/* ============================================================================
   SBG Devis — COMPOSANTS (briques visuelles de la maquette A)
   Documentation et exemples h() : public/css/COMPOSANTS.md
   Couleurs, polices, rayons, ombres : UNIQUEMENT var(--…) de tokens.css.
   var(--nouveau, var(--existant)) = jeton demandé pour coller au pixel près à la maquette ;
   tant qu'il n'est pas dans tokens.css, le jeton existant le plus proche s'applique.
   ========================================================================== */

/* ==========================================================================
   1. Boutons
   ========================================================================== */

/* --- Bouton d'action principal : orange, 64 px, ombre chaude ------------- */
.bouton-action {
  flex: 1;
  min-width: 0;
  min-height: var(--cible-action);
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  padding: 0 var(--esp-8);
  border: none;
  border-radius: var(--rayon-carte);
  background: var(--orange-action);
  color: var(--blanc);
  box-shadow: var(--ombre-action);
  font-family: var(--police-texte);
  font-size: var(--taille-xl);
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  transition: transform var(--duree), opacity var(--duree);
}
.bouton-action:active { transform: scale(0.98); }
.bouton-action:disabled,
.bouton-action[aria-disabled="true"] { opacity: 0.5; box-shadow: none; }
.bouton-action__textes {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bouton-action__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-action, var(--taille-3xl));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.bouton-action__detail { font-size: var(--taille-s); font-weight: 600; }
.bouton-action__detail--fort { font-size: var(--taille-l); font-weight: 700; }
.bouton-action__go {
  font-family: var(--police-titre);
  font-size: var(--taille-montant);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.bouton-action__trait { flex: none; width: 1px; height: 30px; background: var(--blanc-40); }
/* Libellé seul, centré (« Valider et voir le PDF », « Envoyer via WhatsApp ») */
.bouton-action--centre { justify-content: center; gap: var(--esp-4); text-align: center; }
/* Version resserrée (feuilles chargées : totaux du devis, envoi) */
.bouton-action--compact { min-height: 60px; }

/* --- Bouton secondaire : blanc, bordé ------------------------------------- */
.bouton-secondaire {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  padding: 0 var(--esp-7);
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon-l);
  background: var(--blanc);
  color: var(--texte);
  font-size: var(--taille-l);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform var(--duree);
}
.bouton-secondaire:active { transform: scale(0.98); }
.bouton-secondaire:disabled { opacity: 0.5; }
.bouton-secondaire--accent { border-color: var(--orange-action); color: var(--orange-action); }
.bouton-secondaire--petit {
  flex: none;
  min-height: var(--cible-min);
  gap: var(--esp-2);
  padding: 0 var(--esp-6);
  border-radius: var(--rayon-s);
  font-size: var(--taille-m);
}

/* --- Tuile pêche (Prendre une photo, Galerie, Redicter) ------------------- */
.bouton-tuile {
  min-height: var(--cible-action);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-5);
  border: none;
  border-radius: var(--rayon-l);
  background: var(--peche);
  color: var(--brun);
  font-size: var(--taille-m);
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  transition: transform var(--duree);
}
.bouton-tuile:active { transform: scale(0.97); }
.bouton-tuile--colonne {
  flex: none;
  width: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border-radius: var(--rayon-carte);
  font-size: var(--taille-s);
  text-align: center;
}

/* --- Bouton texte (Télécharger le PDF, Corriger au clavier) --------------- */
.bouton-texte {
  min-height: var(--cible-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
  border: none;
  border-radius: var(--rayon-s);
  background: none;
  color: var(--anthracite);
  font-size: var(--taille-m);
  font-weight: 700;
  text-decoration: none;
}
.bouton-texte--accent {
  align-self: flex-start;
  justify-content: flex-start;
  padding: 0 var(--esp-4) 0 var(--esp-1);
  color: var(--orange-action);
  font-weight: 800;
}
.bouton-texte--danger { color: var(--danger); }

/* --- Pilule blanche (« 3 photos jointes › ») ------------------------------ */
.bouton-pilule {
  align-self: flex-end;
  min-height: var(--cible-min);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0 var(--esp-5) 0 var(--esp-6);
  border: none;
  border-radius: var(--rayon-rond);
  background: var(--blanc);
  color: var(--texte);
  box-shadow: var(--ombre-carte);
  font-size: var(--taille-s);
  font-weight: 700;
  text-decoration: none;
}
.bouton-pilule > .icone { color: var(--brun); }
.bouton-pilule > .icone:last-child:not(:first-child) { color: var(--orange-action); }

/* --- Bouton rond (retour, réglages, aperçu, options, voix) ---------------- */
.bouton-rond {
  flex: none;
  width: var(--cible-min);
  height: var(--cible-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--rayon-rond);
  background: var(--lin);
  color: var(--texte);
  text-decoration: none;
  transition: transform var(--duree);
}
.bouton-rond:active { transform: scale(0.94); }
.bouton-rond--gris { color: var(--anthracite); }
.bouton-rond--accent { color: var(--orange-action); }
.bouton-rond--nu { background: none; }
.bouton-rond--peche { background: var(--peche); color: var(--brun); }
.bouton-rond--moyen { width: var(--cible-moyenne); height: var(--cible-moyenne); }
.bouton-rond--grand { width: var(--cible-action); height: var(--cible-action); }

/* --- Gros bouton micro de l'accueil (96 px, halo pêche) ------------------- */
.bouton-micro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-7);
  padding: var(--esp-1) var(--esp-9);
  border: none;
  border-radius: var(--rayon-carte);
  background: none;
  color: var(--texte);
  text-align: center;
  text-decoration: none;
}
.bouton-micro__rond {
  position: relative;
  width: var(--cible-micro);
  height: var(--cible-micro);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--orange-action);
  color: var(--blanc);
  box-shadow: 0 0 0 var(--esp-4) var(--peche), var(--ombre-action);
  transition: transform var(--duree);
}
.bouton-micro:active .bouton-micro__rond { transform: scale(0.95); }
.bouton-micro__textes { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); }
.bouton-micro__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bouton-micro__detail { font-size: var(--taille-m); color: var(--gris); }
.bouton-micro--ecoute .bouton-micro__rond { animation: sbg-pouls 1.8s ease-out infinite; }

/* --- Commandes de la dictée (Photos · Terminer · Pause) ------------------- */
.commandes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  margin-top: var(--esp-2);
}
.commande {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: 0;
  border: none;
  background: none;
  color: var(--anthracite);
  font-size: var(--taille-s);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.commande__rond {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--lin);
  transition: transform var(--duree);
}
.commande:active .commande__rond { transform: scale(0.94); }
.commande--principale { color: var(--orange-action); font-size: var(--taille-l); font-weight: 800; }
.commande--principale .commande__rond {
  width: 88px;
  height: 88px;
  background: var(--orange-action);
  color: var(--blanc);
  animation: sbg-pouls 1.8s ease-out infinite;
}
.commande--calme .commande__rond { animation: none; }
.commande:disabled { opacity: 0.45; }

/* --- Occupé (aria-busy="true") : roue à la place de l'icône --------------- */
.bouton-action[aria-busy="true"],
.bouton-secondaire[aria-busy="true"],
.bouton-micro[aria-busy="true"],
.commande[aria-busy="true"] { pointer-events: none; }
.bouton-action[aria-busy="true"] > .icone:last-child { display: none; }
.bouton-action[aria-busy="true"]::after,
.bouton-secondaire[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--blanc-40);
  border-top-color: var(--blanc);
  border-radius: var(--rayon-rond);
  animation: sbg-rotation 0.8s linear infinite;
}
.bouton-secondaire[aria-busy="true"]::before { border-color: var(--filet-fort); border-top-color: var(--orange-action); }
.bouton-micro[aria-busy="true"] .bouton-micro__rond > .icone,
.commande[aria-busy="true"] .commande__rond > .icone { visibility: hidden; }
.bouton-micro[aria-busy="true"] .bouton-micro__rond::after,
.commande[aria-busy="true"] .commande__rond::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border: 4px solid var(--blanc-40);
  border-top-color: var(--blanc);
  border-radius: var(--rayon-rond);
  animation: sbg-rotation 0.8s linear infinite;
}
.commande__rond { position: relative; }

/* ==========================================================================
   2. Bulles de conversation
   ========================================================================== */

/* L'app parle (à gauche, blanc) */
.bulle-app {
  align-self: flex-start;
  max-width: 332px; /* maquette : 300 px de texte + marges */
  padding: var(--esp-5) var(--esp-7);
  border-radius: var(--rayon-bulle-app);
  background: var(--blanc);
  color: var(--texte);
  box-shadow: var(--ombre-carte);
  font-size: var(--taille-l);
  line-height: var(--interligne);
}
.bulle-app--icone {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 368px;
  padding: var(--esp-5) var(--esp-6);
}
.bulle-app__icone {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--lin);
  color: var(--anthracite);
}
.bulle-app strong, .bulle-app b { font-weight: 800; }

/* L'artisan parle (à droite, anthracite) */
.bulle-artisan {
  align-self: flex-end;
  max-width: 358px; /* maquette : 326 px de texte + marges */
  padding: var(--esp-5) var(--esp-7) 15px;
  border-radius: var(--rayon-bulle-artisan);
  background: var(--anthracite);
  color: var(--blanc);
  box-shadow: var(--ombre-bulle-artisan);
}
.bulle-artisan__etiquette {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: 7px;
  font-size: var(--taille-s);
  font-weight: 700;
  color: var(--blanc-84);
}
.bulle-artisan__texte {
  margin: 0;
  font-size: var(--taille-2xl);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bulle-artisan__texte--grand { font-size: var(--taille-3xl); line-height: 1.5; }
/* Rappel compact de la dictée (2 lignes, en haut des écrans suivants) */
.bulle-artisan--resume {
  max-width: 328px;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6) 11px;
  box-shadow: none;
}
.bulle-artisan--resume > .icone { margin-top: 2px; }
.bulle-artisan--resume .bulle-artisan__texte {
  font-size: var(--taille-m);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dans la bulle : point « En écoute », passages compris, fin atténuée, curseur */
.point-ecoute {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--rayon-rond);
  background: var(--orange);
  animation: sbg-clignote-doux 1.2s ease-in-out infinite;
}
.surligne {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.attenue { opacity: 0.72; }
.curseur {
  display: inline-block;
  width: 2px;
  height: 21px;
  margin-left: 3px;
  vertical-align: -4px;
  background: var(--blanc);
  animation: sbg-clignote 1s steps(1) infinite;
}

/* Mot incertain à vérifier (dans la bulle de l'artisan) */
.mot-douteux {
  display: inline;
  margin: 0;
  padding: 0 var(--esp-1) 1px 5px;
  border: none;
  border-radius: var(--rayon-xs);
  background: var(--peche);
  color: var(--brun);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline dotted;
  text-decoration-color: var(--orange-action);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: pointer;
  position: relative;
}
/* Zone de toucher agrandie (27 px visibles → 45 px) : moins de touchers ratés avec des gants.
   La carte à grosses puces sous le texte reste la voie principale. */
.mot-douteux::after { content: ""; position: absolute; inset: -9px -3px; }
.mot-douteux__marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 3px;
  border-radius: var(--rayon-rond);
  background: var(--orange-action);
  color: var(--blanc);
  font-size: var(--taille-2xs, var(--taille-xs));
  font-weight: 800;
  line-height: 1;
  vertical-align: 2px;
  text-decoration: none;
}
.mot-douteux--actif { outline: 3px solid var(--orange); outline-offset: 1px; }
.mot-douteux--valide {
  padding: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  text-decoration-style: solid;
  text-decoration-color: var(--blanc-40);
}
.mot-douteux--valide .mot-douteux__marque { display: none; }

/* ==========================================================================
   3. Cartes, sections, listes
   ========================================================================== */

.carte {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-6) var(--esp-6);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}
/* Carte « message de l'app » dans le fil (coin haut gauche pincé) */
.carte--app { align-self: flex-start; width: 100%; border-radius: var(--rayon-bulle-app); }
.carte--serree { gap: var(--esp-3); }
/* Carte-liste de réglages (interrupteurs séparés par un filet) */
.carte--liste { gap: 0; padding: var(--esp-1) var(--esp-6); }
.carte__entete { display: flex; align-items: center; gap: var(--esp-4); }
.carte__icone {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-icone, var(--rayon-s));
  background: var(--peche);
  color: var(--brun);
}
.carte__icone--grand { width: 42px; height: 42px; }
.carte__icone--petit { width: 28px; height: 28px; }
.carte__icone--rond { border-radius: var(--rayon-rond); }
.carte__icone--neutre { background: var(--lin); color: var(--anthracite); }
.carte__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.carte__surtitre { font-size: var(--taille-s); font-weight: 800; color: var(--brun); letter-spacing: 0.02em; }
.carte__titre { margin: 0; font-size: var(--taille-xl); font-weight: 800; line-height: 1.25; }
.carte__titre--simple { font-size: var(--taille-l); font-weight: 700; line-height: 1.3; }
.carte__titre b, .carte__titre strong { font-weight: 800; }
.carte__texte { margin: 0; font-size: var(--taille-s); line-height: 1.3; color: var(--gris); }
/* Bloc client (écran Annonce) : nom 19 px puis lignes d'adresse 16 px */
.carte__nom { font-size: var(--taille-2xl); font-weight: 700; line-height: 1.2; }
.carte__ligne { font-size: var(--taille-l); line-height: 1.35; }

.separateur { flex: none; height: 1px; margin: 0; border: 0; background: var(--filet); }
.separateur--decale { margin-left: 80px; }

/* Libellé gris au-dessus d'un chiffre (« Montant final », « Total H.T. verrouillé ») */
.libelle { font-size: var(--taille-s); font-weight: 600; color: var(--gris); }

/* Mise en page interne */
.pile { display: flex; flex-direction: column; gap: var(--esp-3); }
.pile--large { gap: var(--esp-4); }
.pile--serree { gap: 2px; }
.rangee { display: flex; align-items: center; gap: var(--esp-4); }
.rangee--espace { justify-content: space-between; }
.rangee--bas { align-items: flex-end; }
.rangee--haut { align-items: flex-start; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }

/* Surlignage pêche d'un morceau de texte (code postal déduit) */
.surlignage {
  padding: 1px 5px;
  border-radius: var(--rayon-xs);
  background: var(--peche);
  color: var(--brun);
  font-weight: 700;
}

/* Petite note avec icône (« Les photos restent sur le téléphone… ») */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin: 0;
  padding: 0 var(--esp-2);
  font-size: var(--taille-m);
  line-height: 1.4;
  color: var(--anthracite);
}
.note > .icone { margin-top: 1px; }

/* Ligne d'état colorée (« Envoyé », « Brouillon enregistré », « PDF prêt ») */
.statut {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--taille-m);
  font-weight: 700;
  line-height: 1.3;
}
.statut--ok { color: var(--vert); }
.statut--attente { color: var(--brun); }
.statut--erreur { color: var(--danger); }
.statut--haut { align-items: flex-start; }

/* --- Liste des devis (accueil) : lignes compactes, groupées par mois --------- */
.liste-devis {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.liste-devis > li { position: relative; }
.liste-devis > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--esp-6) + var(--avatar-ligne) + var(--esp-5)); /* filet aligné sur le texte */
  right: 0;
  height: 1px;
  background: var(--filet);
}

.ligne-devis {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  width: 100%;
  min-height: var(--cible-bouton);
  padding: var(--esp-4) var(--esp-6);
  border: none;
  border-radius: var(--rayon-carte);
  background: none;
  color: var(--texte);
  text-align: left;
  text-decoration: none;
  transition: background var(--duree);
}
.ligne-devis:active { background: var(--lin); }
.ligne-devis[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.ligne-devis__avatar {
  flex: none;
  width: var(--avatar-ligne);
  height: var(--avatar-ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-icone);
  background: var(--lin);
  color: var(--anthracite);
  font-family: var(--police-titre);
  font-size: var(--taille-m);
  font-weight: 800;
}
.ligne-devis__avatar--brouillon { background: var(--peche); color: var(--brun); }
.ligne-devis__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Deux lignes : à gauche ce qui se raccourcit (la ville seule ; le nom seulement s'il ne tient pas), à droite ce qui reste entier */
.ligne-devis__haut, .ligne-devis__bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-4); min-width: 0; }
.ligne-devis__qui { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--esp-2); }
.ligne-devis__nom, .ligne-devis__ville, .ligne-devis__travaux {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ligne-devis__nom { flex: 0 0 auto; max-width: 100%; font-size: var(--taille-xl); font-weight: 700; }
.ligne-devis__nom--vide { color: var(--gris); font-weight: 600; }
.ligne-devis__ville { flex: 0 1 auto; font-size: var(--taille-m); font-weight: 600; color: var(--gris); }
.ligne-devis__ville::before { content: "· "; }
.ligne-devis__montant {
  flex: none;
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ligne-devis__montant--vide { font-family: var(--police-texte); font-size: var(--taille-m); font-weight: 600; letter-spacing: 0; color: var(--gris); }
.ligne-devis__travaux { flex: 1; font-size: var(--taille-m); color: var(--anthracite); }
.ligne-devis__etat { flex: none; gap: var(--esp-1); font-size: var(--taille-m); white-space: nowrap; }

/* Mois : « Septembre 2026 ··· 4 devis · 31 200 € HT » au-dessus de sa carte */
.groupe-mois { display: flex; flex-direction: column; gap: var(--esp-3); }
.groupe-mois__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin: 0 var(--esp-2);
  font-size: var(--taille-m);
}
.groupe-mois__titre { font-weight: 800; color: var(--brun); }
.groupe-mois__resume { font-weight: 600; color: var(--anthracite); white-space: nowrap; }

/* --- Onglets de l'accueil (« À terminer 3 · Envoyés 9 · Tous 12 ») --------- */
.onglets { display: flex; gap: var(--esp-3); }
.onglet {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--cible-min);
  padding: 0 var(--esp-5);
  border: none;
  border-radius: var(--rayon-rond);
  background: var(--lin);
  color: var(--anthracite);
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duree), color var(--duree);
}
.onglet[aria-pressed="true"] { background: var(--orange-action); color: var(--blanc); }
.onglet__nombre { font-family: var(--police-titre); font-weight: 800; }
.onglet__nombre:empty { display: none; }
@media (max-width: 359px) {
  .onglets { gap: var(--esp-2); }
  .onglet { padding: 0 var(--esp-3); font-size: var(--taille-s); }
}

/* --- Recherche de l'accueil : loupe à gauche, croix pour effacer à droite --- */
.recherche { position: relative; display: flex; align-items: center; }
.recherche__icone { position: absolute; left: var(--esp-6); display: flex; color: var(--anthracite); pointer-events: none; }
.champ__saisie.recherche__saisie {
  min-height: var(--cible-recherche);
  padding-left: calc(var(--esp-6) + 20px + var(--esp-4));
  padding-right: calc(var(--cible-min) + var(--esp-1));
  border-color: transparent;
  background: var(--lin);
}
.champ__saisie.recherche__saisie:focus { background: var(--blanc); }
.champ__saisie.recherche__saisie::placeholder { color: var(--anthracite); } /* --gris est interdit sur lin (4,5:1) */
.recherche__saisie::-webkit-search-cancel-button,
.recherche__saisie::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.recherche__effacer {
  position: absolute;
  right: 2px;
  width: var(--cible-min);
  height: var(--cible-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--rayon-rond);
  background: none;
  color: var(--anthracite);
  cursor: pointer;
}

/* ==========================================================================
   4. Pastilles, étiquettes, bandeaux
   ========================================================================== */

/* Pastille d'état (« Brouillon ») */
.pastille {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 28px;
  padding: 0 11px;
  border-radius: var(--rayon-rond);
  background: var(--peche);
  color: var(--brun);
  font-size: var(--taille-s);
  font-weight: 700;
  white-space: nowrap;
}
.pastille--petite { height: 20px; gap: var(--esp-1); padding: 0 7px; font-size: var(--taille-xs); }
.pastille--neutre { background: var(--lin); color: var(--anthracite); }

/* Étiquette carrée en capitales (« LOT N1 », « OFFERT ») */
.etiquette {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--esp-3);
  border-radius: var(--rayon-xs);
  background: var(--peche);
  color: var(--brun);
  font-size: var(--taille-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.etiquette--ronde { padding: 0 9px; border-radius: var(--rayon-rond); letter-spacing: 0.04em; }

/* Bandeau (conseil, état du réseau, alerte) */
.bandeau {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-6);
  border-radius: var(--rayon-l);
  background: var(--peche);
  color: var(--anthracite);
}
.bandeau > .icone { color: var(--brun); }
.bandeau__texte {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: var(--taille-m);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
button.bandeau__texte { cursor: pointer; min-height: var(--cible-min); }
.bandeau__texte b, .bandeau__texte strong { font-weight: 800; }
div.bandeau__texte { display: flex; flex-direction: column; gap: var(--esp-1); }
div.bandeau__texte > .bouton-secondaire { align-self: flex-start; margin-top: var(--esp-2); }
.bandeau__fermer {
  flex: none;
  width: var(--cible-min);
  height: var(--cible-min);
  margin: -7px -11px -7px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--rayon-rond);
  background: none;
  color: var(--anthracite);
}
/* État du réseau / information centrée, en brun gras */
.bandeau--info {
  justify-content: center;
  border-radius: var(--rayon-m);
  color: var(--brun);
  text-align: center;
  text-wrap: balance;
}
.bandeau--info .bandeau__texte { flex: 0 1 auto; font-weight: 700; line-height: 1.3; text-align: center; }
/* Alerte : erreur à lire */
.bandeau--alerte {
  border: 2px solid var(--danger);
  background: var(--blanc);
  color: var(--danger);
  box-shadow: var(--ombre-carte);
}
.bandeau--alerte > .icone { color: var(--danger); }
.bandeau--alerte .bandeau__texte { font-weight: 600; }
.bandeau--alerte .bandeau__fermer { color: var(--danger); }
/* Succès */
.bandeau--ok { background: var(--blanc); color: var(--vert); box-shadow: var(--ombre-carte); }
.bandeau--ok > .icone { color: var(--vert); }
.bandeau--ok .bandeau__texte { font-weight: 700; }
/* Bandeau flottant (messages globaux) : posé SOUS l'en-tête de l'écran (--haut-bandeau, mesuré par app.js),
   pour ne jamais couvrir le bouton retour ; en haut d'écran s'il n'y a pas d'en-tête. */
.bandeau--flottant {
  position: fixed;
  z-index: 50;
  top: max(calc(var(--haut-bandeau, 0px) + var(--esp-3)), var(--esp-4), env(safe-area-inset-top));
  left: var(--esp-7);
  right: var(--esp-7);
  max-width: calc(var(--largeur-max) - 2 * var(--esp-7));
  margin: 0 auto;
  animation: sbg-descente var(--duree) ease-out;
}

/* ==========================================================================
   5. Choix : puces et interrupteurs
   ========================================================================== */

.choix { display: flex; gap: var(--esp-2); }
.choix--grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix--colonne { flex-direction: column; }

.puce {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--cible-bouton);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon-m);
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background var(--duree), border-color var(--duree), color var(--duree);
}
.choix--grand .puce { font-size: var(--taille-l); }
.choix--grille .puce { min-height: 62px; padding: 5px var(--esp-1); }
.question .choix:not(.choix--grille) .puce { min-height: 52px; }
.puce--large { flex-grow: 1.35; }
/* Deux lignes (libellé + valeur : « Plus de 2 ans / TVA 10 % ») */
.puce--pile { flex-direction: column; gap: 2px; }
.puce__libelle { font-size: var(--taille-m); font-weight: 600; line-height: 1.2; }
.puce__valeur {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 800;
  line-height: 1.1;
}
/* Proposée par l'app : pointillés orange sur pêche, étiquette « Proposé » */
.puce--proposee {
  flex-direction: column;
  gap: 1px;
  border-style: dashed;
  border-color: var(--orange-action);
  background: var(--peche);
}
.puce__etiquette { font-size: var(--taille-xs); font-weight: 800; color: var(--brun); letter-spacing: 0.02em; }
/* Choisie : plein orange (classe ou aria-pressed="true") */
.puce--choisie,
.puce[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--orange-action);
  background: var(--orange-action);
  color: var(--blanc);
}
.puce--choisie .puce__etiquette,
.puce[aria-pressed="true"] .puce__etiquette { color: var(--blanc-84); }
.puce:disabled { opacity: 0.5; }

/* --- Ligne de réglage avec interrupteur ------------------------------------ */
.reglage {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: calc(var(--cible-action) + 2 * var(--esp-4)); /* maquette : 64 px + marges */
  padding: var(--esp-4) 0;
  cursor: pointer;
}
.reglage--seul { flex: none; min-height: var(--cible-min); padding: 0; }
.reglage__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reglage__titre { font-size: var(--taille-l); font-weight: 700; line-height: 1.25; }
.reglage__detail { font-size: var(--taille-s); line-height: 1.3; color: var(--gris); }

/* La vraie case à cocher (role="switch") est invisible mais reste accessible */
.interrupteur__case {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.interrupteur {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.reglage--seul .interrupteur { gap: var(--esp-1); }
.interrupteur__piste {
  position: relative;
  width: 54px;
  height: 32px;
  border: 2px solid var(--gris);
  border-radius: var(--rayon-rond);
  background: var(--blanc);
  transition: background var(--duree), border-color var(--duree);
}
.interrupteur__pouce {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--rayon-rond);
  background: var(--gris);
  transition: left var(--duree), top var(--duree), width var(--duree), height var(--duree), background var(--duree);
}
.interrupteur__etat { font-size: var(--taille-xs); font-weight: 800; color: var(--anthracite); }
.interrupteur__etat--oui { display: none; color: var(--brun); }
.interrupteur__libelle { font-size: var(--taille-s); font-weight: 700; color: var(--texte); white-space: nowrap; }
.interrupteur__case:checked ~ .interrupteur .interrupteur__piste {
  border-color: var(--orange-action);
  background: var(--orange-action);
}
.interrupteur__case:checked ~ .interrupteur .interrupteur__pouce {
  top: 1px;
  left: 23px;
  width: 26px;
  height: 26px;
  background: var(--blanc);
  box-shadow: var(--ombre-pouce, var(--ombre-carte));
}
.interrupteur__case:checked ~ .interrupteur .interrupteur__etat--oui { display: block; }
.interrupteur__case:checked ~ .interrupteur .interrupteur__etat--non { display: none; }
.interrupteur__case:focus-visible ~ .interrupteur .interrupteur__piste {
  outline: 3px solid var(--orange-action);
  outline-offset: 2px;
}
.interrupteur__case:disabled ~ .interrupteur { opacity: 0.5; }

/* ==========================================================================
   6. Dictée : onde, repères « Déjà compris »
   ========================================================================== */

.onde {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
}
/* Chaque barre suit --niveau (0 à 1), à régler depuis le niveau du micro */
.onde__barre {
  flex: none;
  width: 4px;
  height: 100%;
  border-radius: var(--rayon-rond);
  background: var(--orange);
  transform: scaleY(var(--niveau, 0.35));
  transition: transform 90ms linear;
}
/* Onde animée toute seule (démonstration, attente) : --decalage par barre */
.onde--animee .onde__barre {
  height: var(--hauteur, 100%);
  animation: sbg-onde 1.1s ease-in-out infinite;
  animation-delay: var(--decalage, 0s);
}
.onde--pause .onde__barre { background: var(--filet-fort); transform: scaleY(0.2); }

.reperes { display: flex; flex-direction: column; gap: var(--esp-3); }
.reperes__titre { margin: 0; font-size: var(--taille-s); font-weight: 600; color: var(--gris); text-align: center; }
.reperes__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.repere {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  border: 2px dashed var(--filet-fort);
  border-radius: var(--rayon-rond);
  background: var(--blanc);
  color: var(--anthracite);
  font-size: var(--taille-m);
  font-weight: 700;
}
.repere--ok { border: none; background: var(--lin); color: var(--texte); }
.repere--ok > .icone { color: var(--vert); }

/* ==========================================================================
   7. Photos
   ========================================================================== */

.grille-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo { min-width: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.photo__image {
  position: relative;
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--rayon-s);
  background: var(--lin);
  color: var(--anthracite);
  object-fit: cover;
}
img.photo__image { display: block; }
.photo__image > img { width: 100%; height: 100%; object-fit: cover; }
.photo__attente {
  position: absolute;
  right: var(--esp-1);
  bottom: var(--esp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rayon-rond);
  background: var(--blanc);
  color: var(--brun);
  box-shadow: var(--ombre-carte);
}
.photo__legende {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 3px 2px var(--esp-1);
  border: none;
  background: none;
  color: var(--texte);
  font-size: var(--taille-m);
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
}
.photo__numero { display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--brun); }
.photo__numero > .icone { color: var(--orange-action); }

/* ==========================================================================
   8. Annonce : montant, répartition, questions
   ========================================================================== */

.montant {
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.montant--grand { font-size: var(--taille-montant); }
.montant--moyen { font-size: var(--taille-total, var(--taille-titre)); line-height: 1.05; }
.montant__unite { font-size: var(--taille-xl); font-weight: 700; letter-spacing: 0; }

.repartition { display: flex; gap: 3px; height: 10px; }
.repartition__part { flex: var(--part, 1) 1 0; min-width: 4px; border-radius: var(--rayon-rond); }
.legende-couleur { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--taille-m); white-space: nowrap; }
.legende-couleur__point { flex: none; width: 10px; height: 10px; border-radius: var(--rayon-rond); }
.legende-couleur b { font-family: var(--police-titre); font-size: var(--taille-l); font-weight: 700; }
/* Teintes des lots, dans l'ordre (répartition + légende) */
.teinte-1 { background: var(--orange); }
.teinte-2 { background: var(--anthracite); }
.teinte-3 { background: var(--brun); }
.teinte-4 { background: var(--gris); }

.question { display: flex; flex-direction: column; gap: var(--esp-3); }
.question__entete { display: flex; align-items: center; gap: 9px; }
.question__numero {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--peche);
  color: var(--brun);
  font-family: var(--police-titre);
  font-size: var(--taille-s);
  font-weight: 800;
}
.question__texte { font-size: var(--taille-l); font-weight: 700; }
.question__aide { font-size: var(--taille-s); font-weight: 500; color: var(--gris); }

/* ==========================================================================
   9. Devis : lots, lignes, totaux
   ========================================================================== */

.lot {
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.lot__entete { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-5) var(--esp-6) var(--esp-4); }
.lot__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.lot__nom { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.lot__titre {
  margin: 0;
  min-width: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-lot, var(--taille-3xl));
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot__lieu { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--taille-s); color: var(--gris); }
.lot__total { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lot__total-libelle { font-size: var(--taille-xs); font-weight: 600; color: var(--gris); }
.lot__total-valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-lot, var(--taille-3xl));
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Une ligne du devis (bouton : on la touche pour la modifier) */
.ligne-lot {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  width: 100%;
  padding: var(--esp-4) var(--esp-6) 11px;
  border: none;
  border-top: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--texte);
  text-align: left;
}
.ligne-lot:active { background: var(--lin); }
.ligne-lot__designation { flex: 1; min-width: 0; font-size: var(--taille-m); line-height: 1.35; overflow-wrap: anywhere; }
.ligne-lot__chiffres { flex: none; min-width: 94px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); }
.ligne-lot__prix {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 700;
  white-space: nowrap;
}
.ligne-lot__prix > .icone { color: var(--orange-action); }
.ligne-lot__unite { font-size: var(--taille-s); color: var(--gris); white-space: nowrap; }
/* Ligne offerte : carte à part, en italique, étiquette OFFERT */
.ligne-lot--offerte { border-top: none; border-radius: var(--rayon-l); box-shadow: var(--ombre-carte); }
.ligne-lot--offerte .ligne-lot__designation { font-style: italic; }
.ligne-lot--offerte .ligne-lot__chiffres { min-width: 72px; gap: 5px; }

/* Totaux (feuille du devis) */
.tuile-montant {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px var(--esp-5);
  border-radius: var(--rayon-s);
  background: var(--lin);
}
.tuile-montant__libelle { font-size: var(--taille-s); font-weight: 600; color: var(--anthracite); }
.tuile-montant__valeur { font-family: var(--police-titre); font-size: var(--taille-2xl); font-weight: 700; white-space: nowrap; }
.tuile-montant--accent { background: var(--peche); }
.tuile-montant--accent .tuile-montant__libelle { color: var(--brun); font-weight: 700; }
.tuile-montant--accent .tuile-montant__valeur { font-weight: 800; }

.conditions { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: var(--taille-m); line-height: 1.3; }
.conditions > div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.conditions dt { color: var(--anthracite); }
.conditions dd { margin: 0; font-weight: 700; text-align: right; }

/* ==========================================================================
   10. Envoi : fichier PDF, aperçu
   ========================================================================== */

.fichier { display: flex; align-items: center; gap: var(--esp-4); }
.fichier__nom { font-size: var(--taille-m); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fichier__note { margin: 0 0 0 52px; font-size: var(--taille-s); font-weight: 600; line-height: 1.3; color: var(--gris); }

.apercu-pdf {
  display: flex;
  justify-content: center;
  padding: var(--esp-5) 0;
  border-radius: var(--rayon-m);
  background: var(--lin);
}
.apercu-pdf__page {
  flex: none;
  width: 214px;
  height: 302px;
  overflow: hidden;
  border-radius: var(--rayon-page, 0);
  background: var(--blanc);
  box-shadow: var(--ombre-page, var(--ombre-carte));
}
.apercu-pdf__page > iframe,
.apercu-pdf__page > img,
.apercu-pdf__page > object,
.apercu-pdf__page > embed { display: block; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   11. Champs de saisie
   ========================================================================== */

.formulaire { display: flex; flex-direction: column; gap: var(--esp-6); }
.champ { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.champ__libelle { font-size: var(--taille-s); font-weight: 700; color: var(--anthracite); }
.champ__groupe { position: relative; display: flex; align-items: center; }
.champ__saisie {
  width: 100%;
  min-height: var(--cible-bouton);
  padding: 0 var(--esp-6);
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon-m);
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-xl); /* ≥ 16 px : l'iPhone ne zoome pas au toucher */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duree), box-shadow var(--duree);
}
textarea.champ__saisie { min-height: 112px; padding: var(--esp-5) var(--esp-6); line-height: var(--interligne); resize: vertical; }
.champ__saisie::placeholder { color: var(--gris); opacity: 1; }
.champ__saisie:focus { border-color: var(--orange-action); box-shadow: 0 0 0 var(--esp-1) var(--peche); outline: none; }
.champ__groupe .champ__saisie { padding-right: 58px; }
.champ__bouton { position: absolute; right: var(--esp-1); }
.champ__suffixe {
  position: absolute;
  right: var(--esp-6);
  color: var(--anthracite);
  font-size: var(--taille-l);
  font-weight: 700;
  pointer-events: none;
}
.champ__aide { margin: 0; font-size: var(--taille-s); line-height: 1.3; color: var(--gris); }
.champ__erreur { margin: 0; font-size: var(--taille-s); font-weight: 700; color: var(--danger); }
.champ--erreur .champ__saisie { border-color: var(--danger); }
/* À compléter (ex. décennale vide) : fond pêche comme le surlignage du PDF */
.champ--a-completer .champ__saisie { border-color: var(--orange); background: var(--peche); }

/* Jauge (coût IA du mois) : --progression de 0 à 1 */
.jauge { height: 10px; overflow: hidden; border-radius: var(--rayon-rond); background: var(--lin); }
.jauge__remplissage {
  height: 100%;
  width: calc(var(--progression, 0) * 100%);
  min-width: 4px;
  border-radius: var(--rayon-rond);
  background: var(--orange);
}
.jauge--pleine .jauge__remplissage { background: var(--danger); }

/* ==========================================================================
   12. Chargement, liste vide
   ========================================================================== */

.chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-5);
  padding: var(--esp-9) var(--esp-7);
  color: var(--anthracite);
  font-size: var(--taille-m);
  font-weight: 600;
  text-align: center;
}
.chargement::before {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid var(--peche);
  border-top-color: var(--orange-action);
  border-radius: var(--rayon-rond);
  animation: sbg-rotation 0.8s linear infinite;
}
.fil > .chargement--plein { margin-top: auto; margin-bottom: auto; }
.chargement--ligne { flex-direction: row; justify-content: flex-start; gap: var(--esp-4); padding: var(--esp-4) 0; }
.chargement--ligne::before { width: 20px; height: 20px; }

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-9) var(--esp-8);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  text-align: center;
}
.etat-vide__icone {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--peche);
  color: var(--brun);
}
.etat-vide__titre { margin: 0; font-family: var(--police-titre); font-size: var(--taille-2xl); font-weight: 800; letter-spacing: -0.01em; }
.etat-vide__texte { margin: 0; max-width: 290px; font-size: var(--taille-m); line-height: var(--interligne); color: var(--anthracite); }

/* ==========================================================================
   13. Feuille modale (panneau d'édition qui monte du bas) — <dialog>
   ========================================================================== */

.feuille-modale {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--voile, var(--filet-fort));
  color: var(--texte);
}
.feuille-modale[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sbg-fondu var(--duree) ease-out;
}
.feuille-modale::backdrop { background: transparent; }
.feuille-modale__panneau {
  /* Collé en bas de l'écran par lui-même (et non par le « flex » de la fenêtre) : sur iPhone, la première image
     de l'ouverture montrait la feuille en HAUT une fraction de seconde (retour d'Avi du 28/09). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--largeur-max);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  overflow: hidden; /* seul le corps défile : titre et boutons (Valider…) restent toujours visibles */
  padding: var(--esp-3) var(--esp-7) max(var(--esp-8), env(safe-area-inset-bottom));
  border-radius: var(--rayon-feuille);
  background: var(--blanc);
  box-shadow: var(--ombre-feuille);
  animation: sbg-montee var(--duree) ease-out;
}
.feuille-modale__poignee {
  flex: none;
  align-self: center;
  width: 40px;
  height: 5px;
  border-radius: var(--rayon-rond);
  background: var(--filet-fort);
}
.feuille-modale__entete { display: flex; align-items: center; gap: var(--esp-4); }
.feuille-modale__titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-3xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.feuille-modale__corps {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* marge intérieure : le halo de focus des champs n'est pas rogné par le défilement */
  margin: 0 calc(-1 * var(--esp-7));
  padding: var(--esp-1) var(--esp-7);
}
.feuille-modale__corps > * { flex: none; }
.feuille-modale__entete, .feuille-modale__poignee { flex: none; }
.feuille-modale__actions { flex: none; display: flex; gap: var(--esp-4); margin-top: var(--esp-1); }

/* Étapes numérotées (mode d'emploi : ajouter à l'écran d'accueil) */
.etapes { display: flex; flex-direction: column; gap: var(--esp-5); margin: 0; padding: 0; list-style: none; }
.etapes > li { display: flex; align-items: center; gap: var(--esp-5); font-size: var(--taille-l); line-height: 1.35; }

/* ==========================================================================
   14. Animations (coupées si « Réduire les animations »)
   ========================================================================== */

@keyframes sbg-pouls {
  0% { box-shadow: 0 0 0 0 var(--halo-micro); }
  100% { box-shadow: 0 0 0 var(--esp-6) var(--halo-micro-fin); }
}
@keyframes sbg-onde {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes sbg-clignote {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes sbg-clignote-doux {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes sbg-rotation { to { transform: rotate(360deg); } }
@keyframes sbg-montee { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sbg-descente { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sbg-fondu { from { opacity: 0; } to { opacity: 1; } }

/* --- Visionneuse du PDF (plein écran, DANS l'app : l'app installée n'a pas de bouton retour) ----------- */
.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: var(--largeur-max);
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  background: var(--lin);
  color: var(--texte);
}
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: var(--voile); }
.visionneuse__entete {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: max(var(--esp-5), env(safe-area-inset-top)) var(--esp-6) var(--esp-5);
  background: var(--blanc);
  box-shadow: var(--ombre-entete);
}
.visionneuse__titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.visionneuse__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visionneuse__compteur { font-size: var(--taille-s); font-weight: 600; color: var(--gris); }
.visionneuse__fermer { flex: none; min-width: var(--cible-min); min-height: var(--cible-min); }
.visionneuse__pages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-6);
  padding: var(--esp-6) var(--esp-5) max(var(--esp-8), env(safe-area-inset-bottom));
}
.visionneuse__page {
  display: block;
  width: 100%;
  height: auto;
  background: var(--blanc);
  border-radius: var(--rayon-page);
  box-shadow: var(--ombre-page);
}
.visionneuse__pages--zoom { align-items: flex-start; }
.visionneuse__pages--zoom .visionneuse__page { width: 220%; max-width: none; }
.visionneuse__message { margin: auto 0; font-size: var(--taille-m); color: var(--anthracite); text-align: center; }
.visionneuse__message--erreur { color: var(--danger); font-weight: 600; }
button.apercu-pdf { width: 100%; border: 0; font: inherit; cursor: pointer; }

/* --- Compléter à la voix (outils/completer.js) ------------------------------------------------------------ */
/* Petit micro de l'écran Devis : rond + libellé « Compléter » (l'artisan doit comprendre sans deviner) */
.bouton-completer {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--brun);
  font-family: var(--police-texte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bouton-completer:active .bouton-rond { transform: scale(0.95); }
.bouton-completer__libelle { font-size: var(--taille-m); font-weight: 700; line-height: 1.1; }
.complement__actions { display: contents; }
.complement__exemples {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.complement__exemples li {
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-s);
  background: var(--peche);
  color: var(--brun);
  font-size: var(--taille-m);
  font-weight: 600;
}
.complement__micro { display: flex; justify-content: center; padding: var(--esp-5) 0 var(--esp-2); }
.complement__demande { align-self: flex-end; max-width: 92%; }
/* « Ce qui change » : une ligne par changement, étiquette colorée à gauche */
.changements { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: var(--rayon-l); background: var(--blanc); box-shadow: var(--ombre-carte); }
.changement { display: flex; align-items: baseline; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); font-size: var(--taille-m); line-height: 1.35; }
.changement + .changement { border-top: 1px solid var(--filet); }
.changement__etiquette {
  flex: none;
  padding: 2px var(--esp-3);
  border-radius: var(--rayon-xs);
  font-size: var(--taille-s);
  font-weight: 800;
  background: var(--peche);
  color: var(--brun);
}
.changement--ajoute .changement__etiquette { background: var(--vert-clair); color: var(--vert); }
.changement--enleve .changement__etiquette { background: var(--danger-clair); color: var(--danger); }
.changement { flex-wrap: wrap; }
.changement__texte { flex: 1; min-width: 0; }
/* Prix estimé : bas / moyen / haut sous la ligne ajoutée */
.changement__gammes { flex-basis: 100%; }
.changement__gammes .puce { min-height: var(--cible-min); }
.changement--enleve .changement__texte { text-decoration: line-through; color: var(--gris); }
.changement__lot { color: var(--gris); font-weight: 600; }
.changement__montant { flex: none; font-family: var(--police-titre); font-weight: 700; white-space: nowrap; }
.changement--enleve .changement__montant { color: var(--gris); text-decoration: line-through; }
.complement__total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--rayon-l);
  background: var(--lin);
}
.complement__total .libelle { margin-right: auto; color: var(--anthracite); } /* --gris interdit sur lin */
.complement__avant { color: var(--anthracite); text-decoration: line-through; font-size: var(--taille-m); }
.complement__rassure { margin: 0; font-size: var(--taille-m); line-height: var(--interligne); color: var(--anthracite); }
/* Petits écrans (iPhone SE dans Safari) : les exemples laissent la place au bouton d'arrêt */
@media (max-height: 650px) { .complement__exemples { display: none; } }

/* Bouton « Photos du chantier » des en-têtes : nombre de photos en pastille */
.bouton-photos { position: relative; }
.bouton-photos__nombre {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--esp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--orange-action);
  color: var(--blanc);
  font-size: var(--taille-xs);
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   Facturation (outils/factures.js) : carte « Facturation » de l'écran Envoi et feuille « Émettre la facture »
   Factures faites par l'app (SPEC §14). Cibles ≥ 54 px (gants), rien en dur : jetons de tokens.css.
   ========================================================================== */

/* Factures émises : une par ligne, séparées par un filet ; deux boutons (Voir · Envoyer via WhatsApp) */
.facturation__liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.facturation__facture { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-5) 0; }
.facturation__facture + .facturation__facture { border-top: 1px solid var(--filet); }
/* Facture annulée par un avoir : visible, mais éteinte (on n'envoie plus que l'avoir et la nouvelle) */
.facturation__facture--annulee .facturation__quoi,
.facturation__facture--annulee .facturation__detail { text-decoration: line-through; color: var(--anthracite); }
.facturation__refaire { align-self: flex-start; }
.facturation__facture:first-child { padding-top: var(--esp-1); }
.facturation__textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facturation__quoi { font-size: var(--taille-l); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.facturation__detail { font-size: var(--taille-m); font-weight: 600; line-height: 1.3; color: var(--anthracite); }
.facturation__reste { font-size: var(--taille-m); font-weight: 700; line-height: 1.3; color: var(--brun); }
/* Côte à côte dès qu'il y a la place ; sur un petit écran (320 px), l'un sous l'autre, pleine largeur */
.facturation__boutons { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.facturation__boutons > .bouton-secondaire { gap: var(--esp-3); padding: 0 var(--esp-5); font-size: var(--taille-m); }
.facturation__voir { flex: 1 0 88px; }
.facturation__envoyer { flex: 999 1 200px; }

/* Prochaine facture : tuile pêche (titre + montant), puis le choix secondaire en bouton texte */
.facturation__emettre { width: 100%; }
.facturation__emettre > .icone:last-child { margin-left: auto; }
/* « Voir la facture globale » : toujours en tête de la carte (définitive émise, sinon aperçu non émis) */
.facturation__globale { width: 100%; }
.facturation__globale > .icone:last-child { margin-left: auto; }
.facturation__action { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.facturation__action-titre { font-size: var(--taille-l); font-weight: 800; line-height: 1.2; }
.facturation__action-detail { font-size: var(--taille-s); font-weight: 600; line-height: 1.25; }
.facturation__secondaire { max-width: 100%; text-align: left; line-height: 1.25; }
.facturation__reessayer { align-self: flex-start; }

/* Feuille de confirmation : montants de la facture, acomptes déduits, somme à payer */
.facturation-montants { display: flex; flex-direction: column; gap: var(--esp-3); }
.facturation-montants__titre { font-size: var(--taille-s); font-weight: 700; color: var(--anthracite); }
.facturation-montants__liste { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; font-size: var(--taille-m); line-height: 1.3; }
.facturation-montants__liste > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-4); }
.facturation-montants__liste dt { min-width: 0; color: var(--anthracite); }
.facturation-montants__liste dd { flex: none; margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.facturation-montants__total { padding-top: var(--esp-2); border-top: 1px solid var(--filet); }
.facturation-montants__total dt, .facturation-montants__total dd { font-weight: 800; color: var(--texte); }
.facturation-montants__deduction dd { color: var(--brun); }
.facturation-montants__a-payer { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-4) var(--esp-5); }

/* Case « client professionnel » (interrupteur Oui / Non) : dans la feuille, sans marges verticales en trop */
.facturation-pro { padding: var(--esp-1) 0; }
/* Date : sur iPhone, la valeur d'un champ date est centrée par défaut */
.facturation-date .champ__saisie { display: flex; align-items: center; }
.facturation-date .champ__saisie::-webkit-date-and-time-value { text-align: left; }
.facturation-figee { font-weight: 700; color: var(--texte); }
.facturation__numero { white-space: nowrap; }
/* Pied de la feuille : rappel « ne se modifie plus » au-dessus d'Annuler · Émettre la facture */
.facturation-actions { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-4); }
.facturation-actions > .note { padding: 0; line-height: 1.3; }