/* Feuille de l'application.
 *
 * La palette d'origine — papier, encre, bleu ardoise — est **rattachée aux
 * jetons AI6** plutôt que redéfinie : les cent cinquante règles qui suivent sont
 * inchangées et portent pourtant le thème. C'est la même mécanique que celle
 * offerte à « Cellule concerto », qui reprendra la main en surchargeant les
 * `--ai6-*` sur `:root`.
 *
 * Le thème n'est pas suivi à la lettre : ce qui compte est que les surfaces du
 * poste gestionnaire soient reconnaissables dans la charte, pas qu'elles
 * reproduisent le pixel de la maquette.
 *
 * **Ces noms courts sont des alias historiques** : ils ne portent plus aucune valeur
 * à eux (lot « qualité et interface », 02/10/2026), seulement des renvois aux
 * `--ai6-*`. N'en créez plus — une règle nouvelle écrit `var(--ai6-…)` ; un alias de
 * plus serait une seconde source qu'un thème oublierait de redéfinir.
 */
/* Les thèmes de marque (?theme=… ou l'attribut theme de la cellule) : des jetons seulement,
 * sous :root[data-theme="…"]. Importés ici plutôt que déclarés dans chaque page : la cellule
 * relaie app.css, et le relais ne servirait pas un dossier themes/ (css/themes.css, en-tête). */
@import url("themes.css");
/* Le tableau de bord de l'appel (onglet Price6+, 19/10), dans sa propre feuille pour ne pas
 * se mêler aux règles du panneau : importé ici pour la même raison que themes.css. */
@import url("tableau_appel.css");
/* « Les pièces », la colonne de droite de l'onglet Price6+ (DEV-11191) : ses cartes ont leur
 * feuille, importée ici pour la même raison. */
@import url("pieces_appel.css");
/* Nunito, la fonte de la maquette, embarquée (SIL OFL 1.1, polices/OFL.txt) : sous css/, parce
   que le relais de la cellule Odoo ne laisse passer que composants/, js/, css/ et schema/. */
@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url("polices/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url("polices/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url("polices/nunito-latin-700-normal.woff2") format("woff2"); }
/* Trois graisses, pas une de plus : une règle qui demande 500 était rendue en 400, une qui
   demande 800 en 700, sans que rien ne le signale (le navigateur prend la fonte la plus
   proche). Les feuilles n'écrivent donc plus que 400, 600 et 700 — les trois de la maquette
   Price6+. L'italique n'est pas embarqué (aucun nunito-latin-400-italic.woff2 dans le dépôt,
   30/10/2026) : le navigateur penche le romain. Le fichier se dépose ici le jour où il arrive,
   avec un @font-face de plus en font-style: italic. */

:root{
  --papier:var(--ai6-bleu-fond); --papier2:var(--ai6-bleu-fond-2); --blanc:var(--ai6-blanc);
  --encre:var(--ai6-encre); --encre2:var(--ai6-encre-secondaire); --encre3:var(--ai6-muet);
  --trait:var(--ai6-ligne); --trait2:var(--ai6-ligne-2);
  --ok:var(--ai6-succes); --ok-fond:var(--ai6-succes-fond);
  --ind:var(--ai6-attente-encre); --ind-fond:var(--ai6-attente);
  --no:var(--ai6-alerte); --no-fond:var(--ai6-alerte-fond);
  --bleu:var(--ai6-bleu); --bleu-fond:var(--ai6-bleu-pale);
  --mono:var(--ai6-police-chasse-fixe);
}
*{box-sizing:border-box}
body{margin:0;font:var(--ai6-texte-courant)/1.5 var(--ai6-police);
  background:var(--papier);color:var(--encre)}
header{border-bottom:1px solid var(--trait);background:var(--blanc);padding:14px 20px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header h1{font-size:var(--ai6-texte-titre);margin:0;font-weight:600;letter-spacing:-.01em}
header h1 .peril{font-weight:400;color:var(--encre3);font-size:var(--ai6-texte-dense);margin-left:6px}
header .empreinte{font-family:var(--mono);font-size:var(--ai6-texte-mini);color:var(--encre3);margin-left:auto}
/* L'état de la conservation suit l'empreinte, sans repousser à son tour : deux
   marges automatiques les auraient séparés aux deux bouts de la barre. */
header #etat-archive{margin-left:10px}
/* Une écriture refusée est le seul des trois états qui appelle une action. */
header .empreinte.echec{color:var(--no)}
/* Un dossier repris sous d'autres règles que celles qui l'ont ouvert : rien
   n'est en panne, mais les montants peuvent avoir bougé. */
header .empreinte.attention{color:var(--ind)}
select,input,button{font:inherit;color:inherit}
select,input{padding:6px 9px;background:var(--blanc);border:1px solid var(--trait);border-radius:3px}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--bleu);outline-offset:1px}
main{display:grid;grid-template-columns:minmax(340px,440px) 1fr;gap:0;min-height:calc(100vh - 58px)}
/* Le poste gestionnaire inverse les proportions. Une colonne étroite convient à
   un fil de conversation, pas à une table de douze colonnes dont neuf portent un
   contrôle de saisie : la même disposition y imposait un ascenseur horizontal
   sur 440 px. La synthèse, elle, se consulte — elle tient dans le quart droit. */
main.poste{grid-template-columns:minmax(0,3fr) minmax(300px,1fr)}
main.poste #panneau{position:sticky;top:58px;max-height:calc(100vh - 58px);overflow-y:auto}
@media(max-width:900px){main,main.poste{grid-template-columns:1fr}}
/* Une table plus large que sa colonne défile dans son propre conteneur, jamais
   en poussant la page. */
.scroll{overflow-x:auto}

/* ---- entretien ---- */
#entretien{border-right:1px solid var(--trait);background:var(--blanc);
  display:flex;flex-direction:column;max-height:calc(100vh - 58px);position:sticky;top:58px}
#fil{flex:1;overflow-y:auto;padding:18px}
.bulle{max-width:92%;padding:9px 13px;border-radius:12px;margin-bottom:10px;font-size:var(--ai6-texte-courant)}
.bulle.bot{background:var(--papier2);border:1px solid var(--trait2);border-bottom-left-radius:3px}
.bulle.vous{background:var(--bleu-fond);border:1px solid var(--ai6-bleu-trait-3);margin-left:auto;
  border-bottom-right-radius:3px;text-align:right}
.bulle .sous{display:block;margin-top:5px;font-size:var(--ai6-texte-dense);color:var(--encre3);text-align:left}
/* Le dernier tour de parole. Les consignes d'urgence se distinguent du reste :
   elles se lisent avant tout, y compris par quelqu'un qui parcourt l'écran. */
.bulle.bilan strong{display:block;margin-bottom:5px;font-size:var(--ai6-texte-dense)}
.bulle.bilan ul{margin:0;padding-left:18px}
.bulle.bilan li{margin-bottom:4px}
.bulle.bilan.urgent{background:var(--ai6-alerte-fond-3);border-color:var(--ai6-alerte-bord-2)}
.bulle.bilan.urgent strong{color:var(--ai6-alerte-4)}
#controles{border-top:1px solid var(--trait2);padding:14px 18px;background:var(--papier)}
.options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.famille{flex-basis:100%;font-size:var(--ai6-texte-mini);letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre3);margin:8px 0 2px;font-weight:600}
button.option{padding:7px 12px;background:var(--blanc);border:1px solid var(--trait);
  border-radius:16px;cursor:pointer;font-size:var(--ai6-texte-courant)}
button.option:hover{border-color:var(--bleu);color:var(--bleu)}
button.option.choisi{background:var(--bleu);border-color:var(--bleu);color:var(--ai6-sur-bleu)}
button.primaire{padding:8px 18px;background:var(--bleu);color:var(--ai6-sur-bleu);border:0;border-radius:3px;cursor:pointer}
button.primaire:disabled{background:var(--trait);cursor:not-allowed}
button.discret{padding:8px 14px;background:none;border:1px solid var(--trait);
  border-radius:3px;cursor:pointer;margin-right:6px;color:var(--encre2)}
#controles input{width:100%;margin-bottom:8px}
.avert{color:var(--no);font-size:var(--ai6-texte-dense);min-height:16px;margin-bottom:6px}
#progression{font-size:var(--ai6-texte-petit);color:var(--encre3);padding:0 18px 12px}

/* ---- résultats ---- */
#panneau{padding:20px;overflow-y:auto}
.carte{background:var(--blanc);border:1px solid var(--trait);border-radius:4px;margin-bottom:16px}
.carte h2{margin:0;padding:11px 16px;font-size:var(--ai6-texte-dense);font-weight:600;letter-spacing:.02em;
  border-bottom:1px solid var(--trait2);background:var(--papier2)}
.carte .note{margin:9px 16px 0;font-size:var(--ai6-texte-dense);color:var(--encre3)}
.carte .corps{padding:14px 16px}
.chiffres{display:flex;flex-wrap:wrap;gap:18px 28px}
.chiffres div{display:flex;flex-direction:column}
.chiffres span{font-size:var(--ai6-texte-petit);color:var(--encre3)}
.chiffres b{font-size:var(--ai6-texte-grand);font-variant-numeric:tabular-nums}
.motivation{margin:14px 0 0;font-size:var(--ai6-texte-courant);color:var(--encre2);line-height:1.6}
.urgence{background:var(--no-fond);border:1px solid var(--no);color:var(--no);
  border-radius:3px;padding:9px 12px;margin-bottom:14px;font-size:var(--ai6-texte-courant)}
.poste{border-bottom:1px solid var(--trait2);padding:8px 0}
.poste:last-child{border-bottom:0}
.poste summary{cursor:pointer;display:flex;gap:10px;align-items:center}
.poste .lib{flex:1}
.poste .montant{font-variant-numeric:tabular-nums;font-weight:600}
.poste .montant em{font-style:normal;font-weight:400;color:var(--encre3);font-size:var(--ai6-texte-petit)}
.tag{font-size:var(--ai6-texte-mini);padding:2px 7px;border-radius:9px;white-space:nowrap}
.t-ok{background:var(--ok-fond);color:var(--ok)}
.t-ind{background:var(--ind-fond);color:var(--ind)}
.t-no{background:var(--no-fond);color:var(--no)}
.motifs{margin:8px 0 0;padding-left:20px;font-size:var(--ai6-texte-dense);color:var(--encre2)}
.motifs code{font-family:var(--mono);font-size:var(--ai6-texte-petit);color:var(--encre3)}
.motifs .preuve,.motifs .pieces{display:block;font-size:var(--ai6-texte-petit);color:var(--encre3)}
.trace{width:100%;margin-top:8px;font-size:var(--ai6-texte-dense);border-collapse:collapse}
.trace td{padding:3px 0;border-top:1px dotted var(--trait2)}
.trace .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.carte ul{margin:6px 0;padding-left:20px;font-size:var(--ai6-texte-courant)}
.carte h3{font-size:var(--ai6-texte-petit);margin:14px 0 4px;text-transform:uppercase;letter-spacing:.05em;color:var(--encre3)}
.carte h3:first-child{margin-top:0}
.action{font-size:var(--ai6-texte-dense);color:var(--ind)}
.cible{color:var(--encre3);font-size:var(--ai6-texte-petit)}
.erreur{color:var(--no)}
.vide{color:var(--encre3);font-size:var(--ai6-texte-courant);margin:0}
nav.vues{display:flex;gap:2px;background:var(--papier2);border:1px solid var(--trait);border-radius:3px;padding:2px}
nav.vues button{padding:5px 13px;background:none;border:0;border-radius:2px;cursor:pointer;
  font-size:var(--ai6-texte-dense);color:var(--encre2)}
nav.vues button.actif{background:var(--blanc);box-shadow:var(--ai6-ombre-2);font-weight:600;color:var(--encre)}
/* Chaque vue porte son `display` sur une règle d'identifiant : le masquage doit
   donc être écrit au même niveau de spécificité. Sans cela `#entretien{display:flex}`
   l'emporte, l'entretien reste affiché sous le poste gestionnaire, et la synthèse
   — troisième élément d'une grille à deux colonnes — bascule en seconde ligne. */
.vue.cachee,#entretien.cachee,#poste.cachee{display:none}
#poste{border-right:1px solid var(--trait);background:var(--blanc);overflow-y:auto;
  max-height:calc(100vh - 58px);position:sticky;top:58px}
/* **Ce qui est courant est un aplat bleu, en blanc dessus.** C'est la règle du
   fichier de design — il n'a pas d'onglets, il empile des blocs sous des
   bandeaux bleus titrés —, et le poste l'appliquait déjà deux niveaux plus bas :
   ses sous-onglets de résultat (`.resultat-onglet.actif`) sont des pastilles
   bleues pleines. La barre principale, elle, était restée en soulignement : un
   trait de 2 px sous un libellé gris. Le seul repère « où suis-je » de l'écran
   était donc son marqueur le plus faible, et il ne parlait pas la même langue
   que les onglets qu'il contient. */
.onglets{display:flex;gap:4px;padding:8px 10px;background:var(--ai6-bleu-clair);
  border-bottom:1px solid var(--ai6-bleu-moyen);position:sticky;top:0;z-index:2;
  /* Neuf onglets ne tiennent pas toujours sur une ligne. Sans cela, le dernier —
     « Résultat », celui qui porte la décision — sortait du cadre. */
  flex-wrap:wrap}
.onglets button{padding:6px 13px;background:none;border:0;border-radius:999px;
  cursor:pointer;font-size:var(--ai6-texte-dense);color:var(--ai6-bleu-fonce);font-weight:600;
  /* La barre passe à la ligne entre deux onglets, jamais au milieu d'un : « ● Price6+ 3:42 »
     se coupait en deux à 1920 px avec la colonne Décision (vidéo 18, 6.4). */
  white-space:nowrap}
.onglets button:hover{background:var(--ai6-blanc)}
.onglets button.actif{background:var(--ai6-bleu);color:var(--ai6-blanc);font-weight:700;
  box-shadow:var(--ai6-ombre)}
/* La seconde barre — les vues d'un groupe. « Dispositions particulières » et
   « Contrat » étaient deux onglets voisins alors qu'ils disent la même chose,
   sous quelle police le dossier s'instruit ; le second est même grisé par le
   premier. Un expert les a lus comme un doublon.

   Elle se distingue de sa mère sans lui faire concurrence : fond blanc, pastille
   soulignée plutôt que pleine. Deux barres de pastilles bleues empilées
   donneraient deux fois la même promesse, et l'œil ne saurait plus laquelle
   commande l'autre. Elle ne colle pas au haut de l'écran non plus — une seule
   barre y reste, celle qui situe. */
.onglets.sous{background:var(--ai6-blanc);border-bottom:1px solid var(--ai6-bleu-clair);
  padding:5px 14px;position:static;gap:2px}
.onglets.sous button{font-size:var(--ai6-texte-petit);border-radius:0;padding:4px 10px;
  border-bottom:2px solid transparent;color:var(--ai6-muet)}
.onglets.sous button:hover{background:var(--ai6-bleu-clair)}
.onglets.sous button.actif{background:none;color:var(--ai6-bleu);font-weight:700;
  border-bottom-color:var(--ai6-bleu);box-shadow:none}
/* Le compteur des blocs répétés — une pièce, un lieu — se remet à zéro à chaque
   onglet, sinon les pièces continueraient la numérotation des blocs de l'onglet
   précédent. */
.onglet-corps{padding:14px 16px;counter-reset:bloc}
/* Les intertitres titrent leurs groupes en bleu, en casse normale
   (« Dommages mobiliers »). La casse normale n'est pas un détail : ces
   intitulés sont des phrases — « Règles de surface et travaux induits » —, et
   une phrase en capitales se lit lettre à lettre. */
.onglet-corps h3{font-size:var(--ai6-texte-dense);font-weight:700;color:var(--ai6-bleu);
  margin:20px 0 8px;border-bottom:1px solid var(--ai6-bleu-clair);padding-bottom:4px}
.onglet-corps h3:first-child{margin-top:0}
/* **La capitale initiale est rendue, elle.** Tous les intertitres du poste ne
   sont pas des phrases : ceux du barème sont un mot en minuscules — « mur »,
   « plafond », « sol » —, écrits ainsi du temps où cette feuille les
   capitalisait en entier. `::first-letter` traite les deux cas du même coup,
   sans que personne ait à retoucher le texte source. */
.onglet-corps h3::first-letter{text-transform:uppercase}
/* Le complément d'un intertitre reste un complément : il ne prend ni le bleu ni
   la graisse, sinon le titre n'a plus rien qui le distingue de sa glose. */
.onglet-corps h3 em{font-style:normal;letter-spacing:0;font-weight:400;color:var(--ai6-encre)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px}
.grille.serree{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.champ{display:flex;flex-direction:column;gap:3px;font-size:var(--ai6-texte-dense)}
.champ>span{color:var(--encre3);font-size:var(--ai6-texte-petit)}
.champ em{font-style:normal;color:var(--encre3);font-size:var(--ai6-texte-mini);line-height:1.4}
.champ input,.champ select{width:100%}
.bascules{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.bascule{display:flex;gap:6px;align-items:center;font-size:var(--ai6-texte-dense);cursor:pointer}
.clauses,.causes{display:flex;flex-direction:column;gap:2px}
.ligne-clause,.ligne-cause{display:flex;gap:8px;align-items:center;font-size:var(--ai6-texte-dense);
  padding:3px 0;cursor:pointer}
.ligne-clause .lib{flex:1}
.ligne-clause code{font-family:var(--mono);font-size:var(--ai6-texte-mini);color:var(--encre3)}
.ligne-clause em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3)}
.ligne-clause em.dette{color:var(--ind)}
.famille-causes{margin-bottom:10px}
.famille-causes h4{font-size:var(--ai6-texte-mini);text-transform:uppercase;letter-spacing:.05em;
  color:var(--encre3);margin:8px 0 3px}
table.saisie{width:100%;border-collapse:collapse;font-size:var(--ai6-texte-dense)}
/* Les en-têtes de colonne, en bleu léger plutôt qu'en gris. Ils cessent d'être
   confondus avec une première ligne de données — ce qu'ils étaient, au même gris
   et à la même casse que les libellés de la table. */
table.saisie th{text-align:left;font-weight:600;font-size:var(--ai6-texte-mini);color:var(--ai6-bleu);
  padding:4px 5px;border-bottom:1px solid var(--ai6-bleu-moyen)}
table.saisie td{padding:3px 5px;border-bottom:1px solid var(--trait2)}
/* Une ligne survolée se détache. Le barème IMH fait 131 articles sur six
   colonnes : suivre une ligne d'un bout à l'autre sans repère est l'erreur de
   lecture la plus facile à commettre, et la plus coûteuse — c'est un prix
   unitaire qu'on relève. */
table.saisie tbody tr:hover>td{background:var(--ai6-bleu-clair)}
table.saisie input,table.saisie select{padding:3px 5px;font-size:var(--ai6-texte-dense);width:100%;min-width:60px}
table.saisie td.vide{color:var(--encre3);text-align:center;padding:14px}

/* **Une colonne de montants est une colonne de nombres.** `chiffrage.js` posait
   `class="r"` sur Quantité, PU, Montant et sur tous ses sous-totaux depuis
   toujours — mais la seule règle `.r` de cette feuille était portée par
   `.trace`, c'est-à-dire la table du panneau Résultat. Les montants du devis
   étaient donc alignés à gauche, en chiffres proportionnels : aucun ordre de
   grandeur ne se lisait verticalement, et c'est la moitié de ce qui rendait
   l'onglet illisible. `tabular-nums` fait le reste — sans lui, les colonnes
   dansent d'une ligne à l'autre. */
.saisie .r,.saisie th.r{text-align:right}
.saisie .r{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------- la base des travaux induits

   Une table de **lecture**, pas de saisie : c'est la règle que l'expert
   discute, et elle n'était lisible que par quelqu'un qui connaissait déjà le
   barème — la colonne des induits ne portait que des codes, et les conditions
   de pose vivaient en glossaire, sans lien avec l'induit qu'elles gouvernent.

   Les cellules s'alignent en haut : une ligne de matériau porte désormais trois
   à quatre induits, et un alignement au milieu ferait flotter le nom du
   matériau au regard de rien. */
table.saisie.regles td{vertical-align:top;padding:6px 5px}
table.saisie.regles em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3);
  margin-left:5px}
table.saisie.regles em.dette{color:var(--ind)}
table.saisie.regles code.pivot{font-size:var(--ai6-texte-mini);color:var(--encre3)}
table.saisie.regles .so{color:var(--encre3)}
/* Un induit par ligne, sans puce : la puce ajoute un niveau de lecture là où la
   liste est déjà dans une cellule qui la délimite. */
ul.induits{list-style:none;margin:0;padding:0}
ul.induits li{padding:1px 0}
ul.induits li + li{border-top:1px dotted var(--trait2)}
/* La condition tient sur la même ligne que l'induit qu'elle gouverne : reléguée
   en dessous, elle se rattachait au suivant. */
ul.induits .tag{margin-left:6px;display:inline-block}

/* Le devis corrigeable. Une ligne retirée reste à l'écran, barrée et à zéro :
   une ligne absente ne se conteste pas, elle ne se voit pas. */
table.saisie.chiffrage td{vertical-align:top}
table.saisie.chiffrage input[type=number]{min-width:58px;width:72px;text-align:right}
table.saisie.chiffrage tr.retiree{opacity:.55}
table.saisie.chiffrage tr.retiree td{text-decoration:line-through}
table.saisie.chiffrage tr.retiree td:last-child,
table.saisie.chiffrage tr.retiree .base-constat{text-decoration:none}
table.saisie.chiffrage em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3);
  margin-left:5px;white-space:nowrap}
table.saisie.chiffrage em.dette{color:var(--ind)}
/* « au barème X » n'est pas du décor : c'est la trace d'une quantité corrigée,
   donc ce qui rend le devis opposable (I22). Rendue dans le même gris que
   l'unité et les badges d'origine, il fallait lire chaque cellule pour la
   trouver. Elle prend la couleur de la dette, comme « retirée ». */
table.saisie.chiffrage em.corrige,em.corrige{color:var(--ind);font-weight:600}

/* ------------------------------------------------ le récapitulatif du devis

   Le niveau qui manquait entre les quatre tuiles et la ligne de barème. Il n'a
   aucune saisie : c'est une table de lecture, et sa densité le dit. */
table.saisie.recap-indemnisation td{vertical-align:top}

table.saisie.recap-indemnisation em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3);
  margin-left:5px;white-space:nowrap}
table.saisie.recap-indemnisation em.corrige,table.saisie.recap-indemnisation em.dette{color:var(--ind)}

table.saisie.recap-indemnisation .r em{display:block;margin:0}
/* « Sans objet » se distingue de zéro : un frais annexe n'a pas une vétusté
   nulle, il n'a pas de vétusté, et une franchise inopposable n'est pas une
   franchise de 0 €. Les deux ne se plaident pas de la même façon. */
table.saisie.recap-indemnisation td.so{color:var(--encre3)}
tr.rec-groupe td{background:var(--papier2);font-weight:600;font-size:var(--ai6-texte-mini);
  text-transform:uppercase;letter-spacing:.04em;color:var(--encre2);padding:6px}
/* **Trois niveaux de bandeau, et l'œil doit les distinguer sans les lire.**
   C'est la hiérarchie de la maquette « Chiffrage vf », et elle est porteuse : sans
   le deuxième niveau on ne sait pas sous quelle garantie un poste a été liquidé,
   donc sous quel plafond ; sans le troisième on ne lit plus le sinistre mur par
   mur. Les couleurs viennent des variables de la charte, aucune n'est écrite en
   dur.

   **Chaque règle est préfixée par la table**, et ce n'est pas de la coquetterie :
   `table.saisie.recap td` pose un `padding` avec une spécificité de (0,2,2), qu'un
   `tr.rec-piece td` (0,1,2) ne surcharge pas. Écrites sans le préfixe, ces règles
   posaient bien leurs couleurs et perdaient leurs espacements — des bandeaux
   corrects mais serrés, et une surface restée grise sur fond bleu. Le défaut se
   voit sans se comprendre, ce qui est le pire des deux. Le préfixe les scope au
   passage à ce tableau-ci, qui est le seul à les vouloir. */
/* **Toujours toute la largeur.** La largeur et le seuil de défilement sont portés
   par la balise elle-même (`settlement_recap.js`), parce que ce tableau est rendu
   par des hôtes qui ne chargent pas tous cette feuille. Ce qui reste ici est ce qui
   relève du thème.

   La disposition reste **automatique** : `table-layout:fixed` est le seul mode où
   des lignes peuvent être plus étroites que leur table, et c'est ce qui a été
   observé. Les proportions de la maquette vivent dans le `<colgroup>`, lues comme
   une préférence. */
/* Une description longue ne pousse plus les colonnes : elle se coupe proprement. */
table.saisie.recap-indemnisation td{overflow-wrap:anywhere}
table.saisie.recap-indemnisation tr.rec-piece td{background:var(--ai6-bleu);color:var(--ai6-sur-bleu);
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px}
table.saisie.recap-indemnisation tr.rec-piece em{color:var(--ai6-sur-bleu);opacity:.9;font-weight:400;
  text-transform:none;letter-spacing:0;float:right;font-size:var(--ai6-texte-petit)}
/* La pastille est celle de la charte — même composant visuel que la Synthèse et le
   carrousel, puisque c'est la même lettre. Sur fond bleu elle s'inverse. */
table.saisie.recap-indemnisation tr.rec-piece .ai6-pastille{background:var(--ai6-sur-bleu);
  color:var(--ai6-bleu);margin-right:9px;vertical-align:middle}
table.saisie.recap-indemnisation tr.rec-garantie td{background:var(--ai6-bleu-moyen);
  font-weight:700;font-size:var(--ai6-texte-petit);color:var(--encre);padding:6px 12px}
/* L'en-tête est **redonné sous chaque garantie** : un bloc de garantie se lit pour
   lui-même, et un en-tête resté en tête d'un dossier de quinze postes est un
   en-tête que personne n'a plus sous les yeux. Il s'efface donc — italique, gris,
   petit — pour ne pas concurrencer les bandeaux qu'il suit. */
table.saisie.recap-indemnisation tr.rec-entete td{background:var(--ai6-bleu-clair);
  font-style:italic;font-size:var(--ai6-texte-mini);color:var(--encre3);padding:5px 12px;
  border-bottom:1px solid var(--trait2)}
table.saisie.recap-indemnisation tr.rec-support td{background:var(--trait2);
  color:var(--ai6-bleu);font-weight:700;font-size:var(--ai6-texte-dense);padding:5px 12px 5px 24px}
table.saisie.recap-indemnisation tr.rec-poste-rang td{padding:7px 12px}
table.saisie.recap-indemnisation tr.rec-poste-rang .rec-poste{padding-left:24px}
tr.rec-sous td{background:var(--trait2);font-weight:600}
tr.rec-sous-piece td{border-top:1px solid var(--trait);font-weight:600}

/* ------------------------------------------------- le pli des sous-lignes

   Un poste se déplie sur ce dont il est fait : les articles du barème, leurs
   induits, leur uniformisation. Le chevron dit qu'il y a quelque chose dessous —
   sans lui, un rang cliquable ne s'annonce pas. */
table.saisie.recap-indemnisation tr.rec-poste-rang.est-repliable{cursor:pointer}
table.saisie.recap-indemnisation tr.rec-poste-rang.est-repliable:hover td{
  background:var(--ai6-bleu-fond)}
table.saisie.recap-indemnisation .rec-plieur{display:inline-block;width:13px;
  color:var(--ai6-bleu);font-size:var(--ai6-texte-mini)}
/* Le chevron du pli tourne d'un quart quand la ligne est ouverte : l'état est aria-expanded,
 * posé sur la rangée, et la forme le suit sans que le JS réécrive le glyphe. */
table.saisie.recap-indemnisation .rec-plieur .ai6-icone{width:12px;height:12px;transition:transform .15s}
table.saisie.recap-indemnisation [aria-expanded="true"] .rec-plieur .ai6-icone{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){
  table.saisie.recap-indemnisation .rec-plieur .ai6-icone{transition:none}
}
table.saisie.recap-indemnisation tr.rec-sousligne td{background:var(--papier2);
  font-size:var(--ai6-texte-petit);color:var(--encre2);padding:3px 12px;border-bottom:0}
/* Le retrait de la sous-ligne se pose sur la cellule **avec sa ligne**, non sur la
   classe seule : la règle de padding voisine (`tr.rec-sousligne td`) est plus
   spécifique qu'elle, et il aurait fallu un `!important` pour la battre — un
   `!important` qu'on met une fois et qui interdit ensuite toute correction locale. */
table.saisie.recap-indemnisation tr.rec-sousligne td.rec-sousligne__lib{padding-left:46px}
table.saisie.recap-indemnisation .rec-sousligne__lib code{font:11px var(--mono);
  color:var(--encre3);margin-right:5px}
table.saisie.recap-indemnisation .rec-sousligne__qty{color:var(--encre3);
  font-weight:400;text-align:right}
/* La quote-part ferme l'addition : elle se distingue des lignes qu'elle complète,
   sans quoi on la lit comme un article de plus. */
table.saisie.recap-indemnisation tr.rec-sousligne--quotepart td{
  border-top:1px dashed var(--trait);font-style:italic}
/* L'icône de la maquette : elle annonce le pli, elle ne le remplace pas. */
table.saisie.recap-indemnisation .rec-info{color:var(--ai6-bleu);cursor:help;
  font-size:var(--ai6-texte-petit)}
/* La colonne des montants immédiats est celle qu'on vient lire : elle porte le
   poids, les autres l'expliquent. */
table.saisie.recap-indemnisation td:nth-child(6){color:var(--encre)}



/* ------------------------------------------------------------- la cascade */
table.saisie.cascade td{padding:4px 8px;vertical-align:baseline}
table.saisie.cascade td:first-child{width:38%}
table.saisie.cascade td.r{width:16%;font-weight:600}
table.saisie.cascade td.note{font-size:var(--ai6-texte-petit);color:var(--encre3);border-bottom:0}
table.saisie.cascade tr.casc-somme td{border-top:1px solid var(--trait);
  border-bottom:0;background:var(--trait2)}
table.saisie.cascade tr.casc-total td{border-top:2px solid var(--bleu);
  background:var(--bleu-fond);font-size:var(--ai6-texte-courant)}
/* Les totaux, en bleu gras. La cascade les signale déjà par un filet ; ce qui
   manquait était que le chiffre lui-même se distingue de ceux qu'il additionne.
   `:not(.note)` exclut la glose de droite — « le total du moteur, repris tel
   quel », « au taux effectif de chaque poste ». Elle est dans la même ligne du
   tableau, et la mettre en bleu gras faisait crier l'explication aussi fort que
   le montant qu'elle explique. */
table.saisie.cascade tr.casc-somme td:not(.note),
table.saisie.cascade tr.casc-total td:not(.note){color:var(--ai6-bleu);font-weight:700}
table.saisie.cascade tr.casc-differe td{color:var(--ind)}
table.saisie.cascade tbody.casc-reglement{border-top:10px solid var(--papier)}
table.saisie.cascade tbody.casc-plafonds{border-top:10px solid var(--papier)}
.base-constat{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--ai6-texte-mini)}
.base-constat label{display:flex;gap:3px;align-items:center;white-space:nowrap;cursor:pointer}
.base-constat input[type=checkbox]{width:auto;min-width:0}
.base-constat input[type=text]{min-width:90px}
.ajout-ligne{display:flex;gap:8px;align-items:center;margin:6px 0 14px;flex-wrap:wrap}
.ajout-ligne input[type=text]{flex:1;min-width:240px;padding:5px 7px;font-size:var(--ai6-texte-dense)}
.ajout-ligne button.ajout{margin-top:0}
/* Le mode du chiffrage, en tête d'onglet.
   Il n'est pas décoratif : le mode décide de ce que le document *est* — un
   chiffrage qui suit les postes, ou un chiffrage figé qu'on corrige à la main —
   et cette question-là se lit **avant** les montants. D'où la bande pleine
   largeur, au-dessus des tuiles, et la teinte d'avertissement sur le mode libre :
   un chiffrage qui ne suit plus les postes doit se voir d'un coup d'œil. */
.bandeau-mode{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--trait2);border-radius:3px;padding:9px 12px;margin:0 0 12px;
  background:var(--papier2);font-size:var(--ai6-texte-dense)}
.bandeau-mode.libre{border-color:var(--ind);background:var(--ind-fond)}
.bandeau-mode.libre b{color:var(--ind)}
.bandeau-mode>div{flex:1;min-width:0}
.bandeau-mode p.note{margin:3px 0 0}
/* La sous-ligne du récapitulatif se corrige sur place : quantité, prix, retrait, et
   un second niveau qu'on déplie. Les champs restent étroits — le tableau porte déjà
   huit colonnes de règlement, et il doit continuer de se lire comme un document. */
/* **Qualifiées au niveau du tableau, et c'est ce qui les fait s'appliquer.**
   `table.saisie input{width:100%}` l'emporte sur `.rec-sousligne__qty input` — deux
   classes contre une —, si bien que le champ de quantité prenait toute la largeur de
   la cellule (qui en couvre six) : l'unité partait au bord droit, le prix et les
   boutons passaient à la ligne. Une règle de mise en forme qui perd en spécificité
   ne se voit pas dans le fichier, seulement à l'écran. */
table.saisie.recap-indemnisation .rec-sousligne__qty{white-space:nowrap}
/* La cellule couvre six colonnes et se cale à droite : bon pour la phrase
   « 10 m² × 21,30 € », mauvais pour des champs, qui se retrouvent alors à deux
   écrans du libellé qu'ils décrivent. Saisissable, elle se cale à gauche. */
table.saisie.recap-indemnisation .rec-sousligne__qty--saisie{text-align:left}
table.saisie.recap-indemnisation .rec-sousligne__qty input{width:5.5em;min-width:0;
  padding:2px 4px;font-size:var(--ai6-texte-petit);text-align:right;display:inline-block}
table.saisie.recap-indemnisation .rec-sousligne__qty .rec-uni{color:var(--encre2);
  font-size:var(--ai6-texte-petit);margin:0 2px}
table.saisie.recap-indemnisation .rec-sousligne__qty em.corrige{margin-left:6px}
table.saisie.recap-indemnisation .rec-sousligne__qty button.mini{margin-left:4px}
table.saisie.recap-indemnisation .rec-sousligne__lib.fille{padding-left:18px;
  border-left:2px solid var(--trait2)}
table.saisie.recap-indemnisation .rec-sousligne__detail{background:var(--papier2);
  font-size:var(--ai6-texte-petit);white-space:normal}
table.saisie.recap-indemnisation .rec-sousligne__detail label{margin-right:12px}
table.saisie.recap-indemnisation .rec-sousligne__detail input{width:auto;min-width:0;
  display:inline-block}
table.saisie.recap-indemnisation .rec-sousligne__detail input.commentaire{min-width:220px}
/* Les moyens d'accès se lisent, et ne se corrigent pas encore. */
table.acces-lecture{opacity:.92}
/* L'ajout vient contre le tableau qu'il alimente, pas deux blocs plus bas. */
.ajout-table{margin:0 0 16px}
.ajout-table .ajout-titre{margin-top:8px}
/* Ce qui reste par poste, une fois la table sortie des blocs. */
.bloc-poste{border-top:1px solid var(--trait2);padding-top:6px;margin-top:14px}

.bandeau-gestes{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:stretch}
.bandeau-mode button{margin-top:0;white-space:nowrap}

/* Un ajustement avalé serait pire qu'un ajustement refusé : il se voit. */
.alerte{border:1px solid var(--ind);border-radius:3px;padding:9px 12px;margin:10px 0;
  background:var(--papier2);font-size:var(--ai6-texte-dense)}
.alerte ul{margin:6px 0 0;padding-left:20px}
.alerte code{font-family:var(--mono);font-size:var(--ai6-texte-mini)}

/* Prix de marché : une proposition, avec sa provenance. Un prix sans référence,
   sans date ni source n'est pas opposable — l'écran le porte donc toujours. */
.marche{margin:4px 0 14px}
.marche.encadre{border:1px solid var(--trait);border-radius:3px;
  padding:10px 12px;background:var(--papier2);margin-bottom:16px}
.marche.encadre .ajout-ligne{margin:0}
.marche.encadre .note{margin:8px 0 0}
.ajout-ligne input[disabled],.ajout-ligne button[disabled]{opacity:.5;cursor:not-allowed}
.ajout-ligne select{padding:5px 7px;font-size:var(--ai6-texte-dense)}
.provenance{font-size:var(--ai6-texte-mini);color:var(--encre3);margin-top:2px}
/* Ce que les photos suggèrent, **à côté** des dimensions déclarées et jamais à
   leur place : une estimation par l'image ne mesure rien, et l'écran doit le
   dire aussi clairement que le code. */
.estimation{margin-top:12px;padding:10px 12px;background:var(--papier2);
  border:1px dashed var(--trait);border-radius:3px}
.estimation h3{margin-top:0}
table.estimation-dims{width:auto;min-width:260px;font-size:var(--ai6-texte-dense);margin-bottom:8px}
/* Un écart marqué se voit sans qu'on compare : c'est l'invraisemblance que le
   moteur lève, reprise à l'endroit où elle se corrige. */
table.estimation-dims tr.ecart td{background:var(--no-fond);color:var(--no)}

/* La prise de vue dans l'entretien. L'aperçu est **local** — il ne passe par
   aucun service, et l'URL est révoquée dès qu'elle a servi. */
.apercus{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
img.apercu{width:64px;height:64px;object-fit:cover;border-radius:4px;
  border:1px solid var(--trait)}

/* L'arborescence du devis. Une ligne induite est indentée sous l'ouvrage dont
   elle découle, avec un filet de continuité : à plat, l'induit se signalait par
   un badge, et on ne voyait pas de quoi il découlait. */
table.chiffrage tr.fille > td:first-child { padding-left: 22px; position: relative }
table.chiffrage tr.fille > td.filet::before {
  content: ""; position: absolute; left: 9px; top: 0; bottom: 50%;
  border-left: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  width: 8px;
}

/* La vraie liste de résultats — code, libellé, corps · unité, prix — là où un
   <datalist> natif ne montrait rien de tout cela et ne se parcourait pas au
   clavier de façon prévisible. */
/* Le geste d'ajout s'annonce. Un champ nu avec un attribut `placeholder`, posé
   deux blocs sous la table qu'il alimente, existait sans que personne le
   trouve — c'est ce que Price6+ fait mieux, et pour rien d'autre qu'un titre. */
h4.ajout-titre { font-size: var(--ai6-texte-petit); margin: 12px 0 4px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--encre3) }
h4.ajout-titre em { font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 400 }
.arts-res-hote { margin: 2px 0 10px }
ul.arts-res {
  list-style: none; margin: 0; padding: 0; font-size: var(--ai6-texte-dense);
  border: 1px solid var(--trait); border-radius: 3px;
  max-height: 260px; overflow-y: auto; background: var(--papier);
}
ul.arts-res li + li { border-top: 1px solid var(--trait2) }
ul.arts-res button {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 4px 8px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--ai6-texte-dense); text-align: left; color: inherit;
}
ul.arts-res b { flex: 1; font-weight: 600 }
ul.arts-res em { font-style: normal; font-size: var(--ai6-texte-mini); color: var(--encre3) }
ul.arts-res span { font-variant-numeric: tabular-nums }
ul.arts-res li.actif, ul.arts-res button:hover { background: var(--papier2) }
ul.arts-res li.actif button { font-weight: 600 }

/* Une catégorie déduite se voit comme telle : appliquée en silence, elle ne
   serait plus une proposition mais une décision prise sur un libellé de
   marchand. */
.note.deduite{border-left:2px solid var(--trait);padding-left:8px}
ul.propositions{list-style:none;margin:4px 0 0;padding:0;font-size:var(--ai6-texte-dense)}
ul.propositions li{display:flex;gap:8px;align-items:center;padding:3px 0;
  border-bottom:1px solid var(--trait2)}
ul.propositions li b{flex:1}
ul.propositions li em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3)}
/* La vignette : un titre de vendeur, parfois dans une autre langue, ne dit pas
   si c'est bien le canapé de l'assuré. Servie par le service, jamais par le CDN
   du marchand. */
ul.propositions li img.vignette{width:44px;height:44px;object-fit:contain;flex:none;
  background:var(--ai6-blanc);border:1px solid var(--trait2);border-radius:3px}
/* Un appel en cours se voit, et le bouton qui l'a lancé ne se reclique pas :
   sans cela le gestionnaire recliquait et consommait un second jeton. */
.temoin{font-size:var(--ai6-texte-petit);color:var(--encre3);align-self:center}
.temoin::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;
  border:2px solid var(--trait);border-top-color:var(--encre3);border-radius:50%;
  vertical-align:-1px;animation:temoin-tourne .8s linear infinite}
@keyframes temoin-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.temoin::before{animation:none}}
button.ajout{margin-top:8px;margin-right:6px;padding:6px 12px;background:var(--papier2);
  border:1px dashed var(--trait);border-radius:3px;cursor:pointer;font-size:var(--ai6-texte-dense);color:var(--encre2)}
button.mini{padding:1px 7px;background:none;border:1px solid var(--trait);border-radius:3px;
  cursor:pointer;font-size:var(--ai6-texte-petit);color:var(--encre2)}
button.mini.d{color:var(--no);border-color:var(--ai6-alerte-bord)}
/* Le détail des ouvertures se déplie, et il est **plié par défaut** : neuf
   champs de comptage par pièce, en permanence, éloignaient les dimensions du
   reste du bloc de trois écrans de défilement. Le titre porte le décompte —
   une pièce dont les ouvertures sont saisies se lit sans l'ouvrir. */
details.ouvertures{margin:10px 0 4px}
details.ouvertures>summary{cursor:pointer;font-size:var(--ai6-texte-petit);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--encre3);
  padding:4px 0;list-style:revert}
details.ouvertures>summary em{font-style:normal;text-transform:none;letter-spacing:0;
  font-weight:400;color:var(--encre3)}
details.ouvertures>summary:hover{color:var(--encre)}
/* Une erreur d'instruction reste visible même quand l'onglet du résultat est
   fermé : c'est le seul endroit du poste qui est toujours sous les yeux. */
.ai6-etat-poste .echec,#etat-poste.echec{color:var(--no);font-weight:600}
/* Les blocs répétés — une pièce, un lieu — sont des cartes indexées : « A
   Cuisine », « B Séjour », « C Chambre », chaque pièce annoncée par une pastille
   bleue. La lettre vient d'un compteur CSS, pas du schéma : c'est un repère qui
   n'appartient qu'à cet écran, et le schéma est servi à d'autres.

   Le fond est lavande, pas blanc : la surface de saisie l'est déjà, et une carte
   blanche sur fond blanc ne tenait qu'à son filet. Les champs, eux, restent
   blancs — ce qui distingue enfin ce qui se saisit de ce qui l'entoure. */
fieldset.bloc{counter-increment:bloc;border:1px solid var(--ai6-bleu-moyen);
  border-radius:var(--ai6-rayon-petit);padding:12px 14px;margin-bottom:12px;
  background:var(--ai6-bleu-clair)}
fieldset.bloc legend{display:flex;align-items:center;gap:8px;font-size:var(--ai6-texte-petit);
  font-weight:700;color:var(--ai6-bleu);padding:0 6px}
fieldset.bloc legend::before{content:counter(bloc,upper-alpha);
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:4px;background:var(--ai6-bleu);
  color:var(--ai6-blanc);font-size:var(--ai6-texte-mini);line-height:1}
.bandeau-poste{font-size:var(--ai6-texte-petit);color:var(--encre3);margin-bottom:10px;min-height:16px}
#recap ol{padding-left:20px}
#recap li{margin-bottom:8px;font-size:var(--ai6-texte-courant)}
#recap .q{display:block;color:var(--encre3);font-size:var(--ai6-texte-dense)}
#recap .a{font-weight:600}
#recap button{margin-left:8px;padding:2px 9px;font-size:var(--ai6-texte-petit);background:none;
  border:1px solid var(--trait);border-radius:3px;cursor:pointer;color:var(--encre2)}

/* ══════════════════════════════════════════════════════════════════════
   Le poste gestionnaire sous Form.io
   ══════════════════════════════════════════════════════════════════════
   La vue poste n'est plus assemblée par cette page : un schéma la décrit et
   Form.io la rend. Ces règles n'habillent donc que ce que le moteur de
   formulaire produit autour de nos composants — et neutralisent ce qu'il
   ajoute d'inutile ici (marges de champ, libellés vides).
*/

/* Le fond de page : un lavande très pâle, sur lequel les cartes blanches se
   détachent. Sur du blanc elles ne se détachaient de rien — l'écran se lisait
   comme une seule surface, et le poste comme une liste.

   La règle porte sur `.formio-form`, pas seulement sur `#vue-poste` : cet
   identifiant est celui des pages de ce dépôt, et le poste se rend aussi dans
   la cellule Odoo, où il n'existe pas. */
#vue-poste, .formio-form { background: var(--ai6-bleu-fond); color: var(--ai6-encre); }

/* Nunito, embarquée en tête de feuille : aucune requête ne sort vers un service de polices. */
.formio-form { font-family: var(--ai6-police); }
#vue-poste .formio-form > .formio-component { margin-bottom: 0; }
#vue-poste .formio-component-columns > .row { margin: 0; }
#vue-poste .col-form-label:empty { display: none; }

/* Les quatre tuiles d'identité, sur la grille de Form.io.

   **Pas de `gap` sur cette rangée ni sur celle du corps.** Leurs colonnes sont
   des colonnes Bootstrap, dont les largeurs font déjà 100 % (9 + 3, ou 3 × 4) :
   un espacement s'y ajoute au lieu de s'y insérer, la rangée passe à la ligne,
   et le panneau de décision tombe **sous** la saisie. Mesuré : la page passait
   de 2879 à 3550 px de haut et le panneau sortait de la fenêtre. L'espacement
   entre colonnes vient des gouttières ; entre rangées, d'une marge. */
.ai6-bandeau-formio { padding: 22px 26px 0; margin-bottom: 20px; }
.ai6-bandeau-formio > .row { gap: 0; }
.ai6-bandeau-formio [class^="col-"] { padding: 0 10px; }

/* **Les quatre tuiles se terminent à la même hauteur.** Mesuré : la colonne
   faisait 147 px, les cartes 2 à 4 seulement 127 — un bord inférieur en dents de
   scie sur la première chose que le gestionnaire regarde.

   Chaque maillon de la chaîne doit relayer la hauteur (composant Form.io, hôte,
   élément personnalisé, carte), faute de quoi le dernier ne sait pas jusqu'où
   s'étirer. La **colonne**, elle, n'est pas touchée : elle est déjà étirée par
   la rangée flex, et lui poser une hauteur la fait au contraire retomber sur son
   contenu — essayé, et c'était pire. */
.ai6-bandeau-formio > [class*="col-md"] > .formio-component,
.ai6-bandeau-formio .ai6-hote,
.ai6-bandeau-formio ai6-tuile-identite,
.ai6-bandeau-formio .ai6-tuile { height: 100%; }

/* Saisie à gauche, décision et résultat à droite — les proportions de la
   maquette, et celles que le poste avait déjà adoptées. */
.ai6-corps-formio { padding: 22px 26px 40px; align-items: flex-start; }
.ai6-corps-formio [class^="col-"] { padding: 0 10px; }

/* **La décision reste sous les yeux.** La saisie est longue — lieux, postes,
   chiffrage — et la colonne de droite disparaissait vers le haut dès qu'on
   descendait : pour valider, le gestionnaire remontait tout l'écran, à chaque
   dossier. `align-items: flex-start` sur la rangée est ce qui rend le collage
   possible : dans un conteneur flex étiré, une colonne occupe toute la hauteur
   et n'a plus rien à quoi coller. */
.ai6-corps-formio > .col-md-3 {
  position: sticky;
  top: 12px;
  /* Une colonne plus haute que la fenêtre doit défiler seule, sinon son bas — le
     bouton Valider — devient inatteignable. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* La saisie ne comprime pas la décision : un tableau de postes large déborde
   dans sa propre colonne plutôt que de rogner celle d'à côté. */
.ai6-corps-formio > .col-md-9 { min-width: 0; }
/* La décision reste visible : c'est le geste du poste, tout le reste
   l'explique. Elle ne défile pas avec la lecture.

   Et elle garde son propre contexte d'empilement. Le panneau est collant sans
   `z-index` : ses listes déployées — classement, mode, motif — passaient donc
   *sous* les cartes de résultat qui le suivent dans la même colonne, et le
   gestionnaire ne pouvait plus lire ce qu'il choisissait. Le correctif est
   indépendant du passage aux onglets, et il se livre d'abord. */
.ai6-corps-formio .formio-component-decision {
  position: sticky;
  top: 16px;
  z-index: 3;
}
.ai6-corps-formio .formio-component-resultat { position: relative; z-index: 1; }

/* Le résultat prend le reste de la hauteur, avec son propre défilement : sans
   cela l'onglet le plus long repoussait la décision hors du champ, ce que les
   onglets servent précisément à éviter. La règle vaut pour les deux
   emplacements possibles — l'élément de bibliothèque, et le panneau que le
   poste rend désormais dans son onglet « Résultat ». */
ai6-resultat,
.ai6-saisie #poste-resultat {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* Les sept cartes en onglets. */
.resultat-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.resultat-onglet {
  border: 1px solid var(--ai6-ligne);
  background: var(--ai6-blanc);
  border-radius: var(--ai6-rayon-petit);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--ai6-texte-dense);
  color: var(--ai6-encre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.resultat-onglet:hover { background: var(--ai6-bleu-pale); }
.resultat-onglet.actif {
  background: var(--ai6-bleu);
  border-color: var(--ai6-bleu);
  color: var(--ai6-sur-bleu);
}
/* La pastille dit l'anomalie **sans qu'on ouvre l'onglet** — un incident rangé
   derrière un onglet muet est un incident tu. */
.resultat-onglet .pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ai6-alerte-2);
  color: var(--ai6-blanc);
  font-size: var(--ai6-texte-mini);
  font-weight: 700;
  line-height: 1;
}
.resultat-onglet.actif .pastille { background: var(--ai6-sur-bleu); color: var(--ai6-alerte-2); }

/* La surface de saisie garde son propre cadre : c'est elle qui porte les huit
   onglets, et ils ont besoin de leur fond blanc.

   `clip` et non `hidden` : les deux rognent les coins arrondis, mais `hidden` fait
   de `#poste` un conteneur de défilement — qui ne défile jamais, faute de hauteur
   bornée —, et un élément collant colle alors à ce conteneur immobile, donc jamais.
   La barre d'onglets (`.onglets`) doit coller à la page. */
.ai6-saisie {
  background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon);
  box-shadow: var(--ai6-ombre);
  overflow: clip;
}
.ai6-saisie .onglets { position: static; }
.ai6-saisie #poste-resultat { display: block; }

/* **Le rose vient de Bootstrap**, que ces pages chargent — et Odoo la charge
   aussi dans la cellule. Son `code { color: #d63384 }` s'appliquait à toutes les
   références du poste : clés de barème, articles, codes de garantie. Une couleur
   d'aucune palette, sur la colonne la plus dense de l'écran, et la seule chose
   que l'œil y voyait en premier.

   Dans une table, une référence est la donnée : elle reprend l'encre courante.
   Dans une phrase ou une ligne de clause, elle est un à-côté : elle garde le
   gris — d'où la seconde règle, qui rend la première inopérante là où le poste
   s'était déjà prononcé. */
.ai6-saisie code { color: var(--ai6-encre); }
.ai6-saisie .ligne-clause code,
.ai6-saisie .motifs code { color: var(--ai6-muet); }

ai6-resultat { display: block; margin-top: 18px; }
.ai6-etat-poste {
  font-size: var(--ai6-texte-petit); color: var(--ai6-muet); min-height: 16px; margin-bottom: 10px;
}

/* Les intertitres des cartes suivent ceux de la saisie : en bleu, en casse
   normale. Le sélecteur est celui du poste, pas `.carte h3` seul — `render.js`
   rend les mêmes cartes dans le panneau de l'entretien, qui n'est pas l'écran
   qu'on habille ici. */
.ai6-corps-formio .carte h3 {
  font-size: var(--ai6-texte-dense);
  font-weight: 700;
  color: var(--ai6-bleu);
  text-transform: none;
  letter-spacing: 0;
}
.ai6-corps-formio .carte h3::first-letter { text-transform: uppercase; }

/* Les cartes de résultat portent le bandeau bleu titré du fichier de design.
   C'est son motif le plus reconnaissable — « Descriptif du sinistre », « Détails
   chiffrage », « Documents ajoutés » —, et le seul de ses blocs qui ait ici un
   équivalent exact : une carte, un titre, une liste dessous.

   Le sélecteur porte sur `.ai6-corps-formio`, la classe que le schéma du poste
   pose lui-même, et non sur `#vue-poste` : les deux désignent le même écran dans
   ce dépôt, mais seul le premier existe aussi dans la cellule. */
.ai6-corps-formio .carte {
  border-radius: var(--ai6-rayon);
  box-shadow: var(--ai6-ombre);
  border-color: var(--ai6-ligne);
  /* Sans `overflow`, l'aplat du bandeau passe **par-dessus** les coins et les
     rend carrés — il est collé au bord, sans marge qui masquerait le
     débordement. */
  overflow: hidden;
}
.ai6-corps-formio .carte h2 {
  background: var(--ai6-bleu);
  color: var(--ai6-blanc);
  border-bottom: 0;
}

/* Vues : l'entretien reste tel quel, le poste vit dans le formulaire. */
.vue-app.cachee, #vue-entretien.cachee, #vue-poste.cachee { display: none; }
#vue-entretien { display: grid; grid-template-columns: minmax(340px,440px) 1fr;
  min-height: calc(100vh - 58px); }
@media(max-width:900px){ #vue-entretien{ grid-template-columns:1fr } }

/* Reprise des règles héritées de l'ancienne grille : `#poste` était une colonne
   collante de pleine hauteur ; il est désormais le corps d'une carte posée dans
   une colonne Form.io, et c'est cette carte qui porte le cadre. */
#poste { border-right: 0; max-height: none; position: static; overflow-y: visible; }

/* ---- saisie libre et texte déstructuré ---- */
#zone-texte { padding: 14px 18px; border-bottom: 1px solid var(--trait2); background: var(--papier); }
#zone-texte textarea { width: 100%; margin-bottom: 8px; padding: 8px 10px; font: inherit;
  font-size: var(--ai6-texte-courant); border: 1px solid var(--trait); border-radius: var(--ai6-rayon-petit); }
.libre { margin-top: 10px; border-top: 1px dashed var(--trait); padding-top: 10px; }
.libre input { width: 100%; margin-bottom: 8px; }
.libre .sous { display: block; margin: 6px 0 8px; font-size: var(--ai6-texte-dense); color: var(--encre2); }

/* ------------------------------------------------ minimums : un plancher par lot
   Le minimum de facturation n'est pas une majoration : il relève un lot jusqu'à
   son plancher. L'écran ne portait que le *complément*, et un « + » suffit à
   faire lire une somme qui s'ajoute — c'est la lecture qu'en a faite un expert.
   Le lot relevé se marque donc par son montant facturé, et par un rail, jamais
   par une couleur d'alerte : rien d'anormal ne s'est produit. */
table.saisie tr.lot-releve td:first-child{border-left:3px solid var(--bleu)}
table.saisie tr.lot-releve td:nth-child(4){font-weight:600}
/* Un lot dont le gestionnaire a écarté le minimum : même traitement qu'une ligne
   retirée, parce que c'est le même geste — une correction de saisie, et non une
   décision de garantie. Il reste listé : I22, un ajustement sans trace n'est pas
   opposable. */
table.saisie tr.lot-ecarte{opacity:.55}
table.saisie tr.lot-ecarte td:nth-child(3){text-decoration:line-through}
table.saisie td .so{color:var(--encre3)}

/* ------------------------------------------------ TVA : par lot, puis par taux
   Un taux seul ne se vérifie pas : une ligne de menuiserie à 10 % était noyée
   avec l'embellissement et la plomberie. Le lot fait un niveau de titre dans la
   table, et son sous-total se lit sans additionner de tête. */
table.saisie tr.vent-lot th{background:var(--papier2);text-align:left;
  font-size:var(--ai6-texte-mini);text-transform:uppercase;letter-spacing:.04em;color:var(--encre2);
  padding:6px}
table.saisie tr.vent-lot th.r{text-align:right}
table.saisie td.vent-taux{padding-left:16px}

/* ------------------------------------------ ouvertures : situées, ou non
   Situer une ouverture est **facultatif** : le compteur principal reste le
   nombre, et les deux petits champs qui le suivent disent seulement « dont tant
   sur le grand mur ». Ils s'effacent quand il n'y a rien à situer — proposer de
   placer zéro fenêtre serait du bruit —, et ils sont visiblement secondaires :
   c'est le nombre qui commande le chiffrage, la place ne fait que le répartir. */
.champ.ouv-type .ouv-pans{display:flex;gap:6px;margin-top:3px}
.champ.ouv-type .ouv-pans label{display:flex;align-items:center;gap:4px;flex:1}
.champ.ouv-type .ouv-pans em{font-style:normal;font-size:var(--ai6-texte-mini);color:var(--encre3);
  white-space:nowrap}
.champ.ouv-type .ouv-pans input{width:3.2em;padding:1px 3px;font-size:var(--ai6-texte-mini)}

/* ------------------------------------------------ le socle d'usage, à l'écran
   Une exclusion courante n'est stipulée nulle part : elle s'oppose, mais elle
   se plaide. La marquer de la couleur de la dette — celle des clauses sans
   article — n'est pas fortuit : dans les deux cas, le refus tient sans que le
   contrat le porte, et c'est ce que le gestionnaire doit voir avant d'écrire. */
.motifs .usage{display:inline-block;margin-left:6px;font-size:var(--ai6-texte-mini);
  color:var(--ind);border:1px solid var(--ind);border-radius:3px;padding:0 4px}
.ligne-clause.commune{border-left:3px solid var(--ind);padding-left:6px}
.ligne-clause .usage-note{display:block;font-size:var(--ai6-texte-mini);color:var(--encre3);
  margin-left:26px;font-style:italic}

/* ── Les photos du dossier ───────────────────────────────────────────────────
   Elles étaient conservées et invisibles : le poste n'en montrait que le nom de
   fichier. On instruisait donc un dégât des eaux sans voir la tache dont on
   chiffrait la reprise.

   Petites et en ligne, sous ce qu'elles documentent : elles accompagnent la
   saisie, elles ne la remplacent pas. Une galerie pleine largeur aurait poussé
   les dimensions et les dommages hors de l'écran. */
.photos-vignettes{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.photo-vignette{margin:0;width:96px}
.photo-voir{display:block;width:96px;height:72px;padding:0;cursor:zoom-in;
  border:1px solid var(--trait);border-radius:var(--ai6-rayon-petit);
  background:var(--papier2);overflow:hidden}
.photo-voir img{width:100%;height:100%;object-fit:cover;display:block}
.photo-voir:hover{border-color:var(--bleu)}
/* Le focus se voit : ces vignettes s'atteignent au clavier comme le reste, et
   un contour invisible ferait perdre la position dans une rangée d'images qui
   se ressemblent. */
.photo-voir:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
/* Sans adresse joignable, on montre ce qu'on a plutôt qu'une image cassée —
   celle-ci se lirait comme une photo perdue, ce qui est plus grave. */
.photo-absente{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--encre3);font-size:var(--ai6-texte-vedette)}
.photo-vignette figcaption{font-size:var(--ai6-texte-mini);color:var(--encre3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photos-local{margin-top:10px}

/* La loupe. Une vignette de 96 px sert à reconnaître, pas à juger : c'est en
   grand qu'on voit si l'auréole part du plafond ou du sol — et c'est cette
   question-là qui décide de l'origine. */
.photo-loupe{position:fixed;inset:0;z-index:2100;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:var(--ai6-voile-media);cursor:zoom-out}
.photo-loupe__cadre{position:relative;margin:0;max-width:min(92vw,1100px);
  max-height:90vh;display:flex;flex-direction:column;gap:8px;cursor:auto}
.photo-loupe__cadre img{max-width:100%;max-height:80vh;object-fit:contain;
  border-radius:var(--ai6-rayon-petit);background:var(--blanc)}
.photo-loupe__cadre figcaption{color:var(--ai6-sur-sombre);font-size:var(--ai6-texte-dense);text-align:center}
.photo-loupe__fermer{position:absolute;top:-14px;right:-14px;width:32px;height:32px;
  border:0;border-radius:50%;background:var(--blanc);color:var(--encre);
  font-size:var(--ai6-texte-grand);line-height:32px;cursor:pointer;box-shadow:var(--ai6-ombre-flottante-4)}
.photo-loupe__fermer:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* Le fond de la popin du nuage de points.
 *
 * Posé sur `document.body` par `recap_tab.js`, comme la loupe ci-dessus et pour les
 * mêmes deux raisons : un `position: fixed` sous un ancêtre `transform`é cesse d'être
 * fixe — et la Synthèse vit, dans la cellule, à l'intérieur d'enveloppes Form.io et
 * Odoo que nous n'écrivons pas ; et le poste redessine tout l'écran à chaque frappe,
 * si bien qu'un panneau monté dans le flux de l'onglet emporterait à la première
 * saisie les mégaoctets de nuage qu'il venait de télécharger.
 *
 * `inset: 3vh 3vw` : presque tout l'écran, mais pas tout. La bordure de fond assombri
 * est ce qui dit qu'on est **par-dessus** le dossier et non ailleurs — et c'est aussi
 * la zone qu'on clique pour sortir. */
.nuage-loupe{position:fixed;inset:0;z-index:2100;display:flex;
  align-items:center;justify-content:center;
  background:var(--ai6-voile-media);cursor:zoom-out}
.nuage-loupe>ai6-visionneuse-3d{position:absolute;inset:3vh 3vw;display:block;
  cursor:auto}
.nuage-loupe:focus-visible{outline:none}

/* ---------------------------------------------------------- l'entretien */

/* Le fil de l'entretien de l'assuré, en relecture.
 *
 * Ni bulles ni couleurs de messagerie : ce n'est pas une conversation qu'on
 * poursuit, c'est une pièce du dossier qu'on vérifie — combien de pièces ont
 * été touchées, la cause est-elle restée indéterminée. Une mise en scène de
 * chat inviterait à répondre, alors que rien n'est modifiable ici.
 *
 * La question en gris, la réponse en encre pleine : c'est la réponse qu'on
 * parcourt, la question ne sert qu'à la situer. Le rang numéroté permet de
 * désigner un tour au téléphone (« au point 14, il dit… »). */
ol.entretien-fil{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px;counter-reset:none}
ol.entretien-fil .tour{display:flex;gap:10px;padding:8px 10px;border-radius:4px}
ol.entretien-fil .tour:nth-child(odd){background:var(--ai6-bleu-clair)}
ol.entretien-fil .rang{flex:0 0 auto;min-width:22px;text-align:right;
  color:var(--ai6-muet);font-size:var(--ai6-texte-petit);line-height:1.5;font-variant-numeric:tabular-nums}
ol.entretien-fil .question{margin:0;color:var(--ai6-muet);font-size:var(--ai6-texte-petit);line-height:1.45}
ol.entretien-fil .reponse{margin:1px 0 0;font-size:var(--ai6-texte-dense);font-weight:600;line-height:1.4}

/* ------------------------------------------------------ questions au dossier */

/* La conversation avec le dossier. Volontairement sobre : ce n'est pas une
   messagerie, c'est un outil de recherche qui répond en phrases. Des bulles
   colorées inviteraient à bavarder ; ici chaque réponse doit se lire comme une
   citation du dossier, avec ce sur quoi elle s'appuie à portée de clic. */
ol.q-fil{list-style:none;margin:12px 0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.q-tour{padding:9px 12px;border-radius:4px;font-size:var(--ai6-texte-dense);line-height:1.5}
.q-tour p{margin:0}
/* La question du gestionnaire : en retrait, et c'est tout ce qui la distingue —
   c'est lui qui l'a écrite, il n'a pas besoin qu'on la lui mette en valeur. */
.q-vous{background:var(--ai6-bleu-clair);font-weight:600}
.q-repond{border-left:3px solid var(--ai6-bleu);background:var(--blanc)}
/* Une réponse non trouvée n'est pas une panne : c'est un résultat, souvent le
   plus utile — il dit ce que le dossier ne porte pas. Le gris, pas le rouge. */
.q-vide{border-left:3px solid var(--ai6-muet);color:var(--encre3)}
.q-sources{margin-top:7px;font-size:var(--ai6-texte-petit)}
.q-sources summary{cursor:pointer;color:var(--ai6-muet)}
.q-sources ul{margin:6px 0 0;padding-left:18px;display:flex;
  flex-direction:column;gap:4px}
.q-sources li{color:var(--encre2);line-height:1.45}
.q-sources code{margin-right:5px}
.q-sources em{font-style:normal;color:var(--ai6-muet);margin-right:6px}
.q-saisie{display:flex;gap:8px;margin-top:14px}
.q-saisie input{flex:1}

/* ==========================================================================
   Onglet Synthèse
   ==========================================================================

   Transcription de la maquette `Poste gestionnaire — Synthèse (proposition)`
   (Figma i1TSOxON1Jqgq7tFayXsVa, frame 14:2).

   **Les couleurs ne sont pas reprises du Figma : elles y étaient déjà.** Les
   variables `--couleur/*` de la maquette portent exactement les valeurs des
   jetons de ce dépôt — `#001dfc` = `--ai6-bleu`, `#f0f0f7` = `--ai6-ligne`,
   `#9b3226` = `--ai6-alerte`, `#8b929e` = `--ai6-muet`, `#efefff` =
   `--ai6-bleu-clair`, `#eef5ef` = `--ok-fond`, `#fbeeec` = `--no-fond`. Rien
   n'est donc écrit en dur ici : une teinte recopiée en hexadécimal cesserait de
   suivre le jour où le jeton bouge, et c'est précisément ce que les jetons
   existent pour éviter.

   Trois classes viennent d'ailleurs et ne sont **pas** redéfinies :
   `.ai6-paire` (libellé muet 11,5 px / valeur medium 12,5 px — la maquette la
   dessine telle quelle), `.ai6-pastille` (le carré bleu A/B) et `.tag.t-ok`
   (l'étiquette « Garanti »). Les redessiner aurait fait deux vérités pour un
   même composant. */

/* La seule teinte que le dépôt ne portait pas : l'ambre d'un état d'attente,
   dans la valeur exacte de la maquette. `--ind` (#8a6a1f) existe mais sert les
   étiquettes de verdict, et la détourner aurait déplacé celles-ci. */
:root { --attente: var(--ai6-attente); --attente-encre: var(--ai6-attente-encre); }

.synthese { display: flex; flex-direction: column; gap: 14px; }

/* -- la tuile, brique de base de la maquette ------------------------------ */
.synthese__tuile {
  background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne);
  border-radius: 8px;
  box-shadow: var(--ai6-ombre);
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.synthese__rangee { display: flex; gap: 14px; align-items: flex-start; }
.synthese__rangee > * { flex: 1 1 0; min-width: 0; }

.synthese__tete { display: flex; gap: 8px; align-items: center; width: 100%; }
.synthese__tete svg { flex: none; }
.synthese__titre {
  font-size: var(--ai6-texte-dense); font-weight: 700; color: var(--ai6-bleu);
  white-space: nowrap;
}
.synthese__titre--alerte { color: var(--ai6-alerte); }
.synthese__ressort { flex: 1 1 0; }
.synthese__appoint { font-size: var(--ai6-texte-mini); color: var(--ai6-muet); white-space: nowrap; }

/* Le compteur rond de la tête de tuile — le nombre de contradictions. */
.synthese__compteur {
  background: var(--ai6-alerte); color: var(--ai6-blanc);
  font-size: var(--ai6-texte-mini); font-weight: 700; line-height: 1.5;
  padding: 1px 7px; border-radius: 999px; flex: none;
}

/* Le grand chiffre d'une fiche : la température, la durée du parcours. */
.synthese__chiffre { font-size: var(--ai6-texte-grand); font-weight: 700; color: var(--ai6-encre); }
.synthese__chiffre--grand { font-size: var(--ai6-texte-vedette); }
.synthese__chiffre-ligne { display: flex; gap: 8px; align-items: baseline; }
.synthese__chiffre-appoint { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
.synthese__detail { display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* La provenance, en pied de fiche. **Obligatoire** : ce qui est opposable porte
   d'où il vient et de quand il date. */
.synthese__source { font-size: var(--ai6-texte-mini); line-height: 1.4; color: var(--ai6-muet); }
.synthese__note { font-size: var(--ai6-texte-mini); line-height: 1.45; color: var(--ai6-muet); }

/* -- badges --------------------------------------------------------------- */
.synthese__badge {
  font-size: var(--ai6-texte-mini); font-weight: 600; line-height: 1.5;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none;
  border: 1px solid currentColor;
}
.synthese__badge--brancher { font-size: var(--ai6-texte-mini); color: var(--ai6-muet); }
.synthese__badge--bloquant { color: var(--ai6-alerte); }
.synthese__badge--nuance,
.synthese__badge--signale { color: var(--attente-encre); }
.synthese__badge--chiffrage { font-size: var(--ai6-texte-mini); padding: 3px 9px; color: var(--attente-encre); }

/* Le code de l'incident. Il est montré parce qu'un gestionnaire le retrouve
   dans un export et dans un échange avec l'équipe ; le libellé, lui, se
   reformule. En pointillé quand le code n'est pas encore levé par le moteur. */
.synthese__code {
  font-family: var(--mono); font-size: var(--ai6-texte-mini); font-weight: 600; line-height: 1.5;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex: none;
  background: var(--no-fond); color: var(--ai6-alerte);
}

/* -- contradictions ------------------------------------------------------- */
.synthese__incident {
  border-top: 1px solid var(--ai6-ligne);
  padding: 9px 0 2px;
  display: flex; flex-direction: column; gap: 3px; width: 100%;
}
.synthese__incident-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.synthese__incident-lib {
  flex: 1 1 0; min-width: 120px;
  font-size: var(--ai6-texte-dense); font-weight: 700; color: var(--ai6-encre);
}
.synthese__incident-detail { font-size: var(--ai6-texte-dense); line-height: 1.5; color: var(--ai6-encre); }
.synthese__incident-action { font-size: var(--ai6-texte-petit); line-height: 1.45; color: var(--ai6-muet); }

/* L'extrait qui fonde le constat — ce que le CR de terrain réclame en toutes
   lettres : « montrer les bouts de transcription qui sont à l'origine de la
   détection ». */
.synthese__extrait {
  background: var(--ai6-bleu-clair);
  border-left: 2px solid var(--ai6-bleu);
  border-radius: 4px; padding: 7px 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.synthese__extrait-texte { font-size: var(--ai6-texte-petit); line-height: 1.48; color: var(--ai6-encre); }
.synthese__extrait-source { font-size: var(--ai6-texte-mini); line-height: 1.4; color: var(--ai6-muet); }

/* -- un état vide, nommé -------------------------------------------------- */
.synthese__vide { font-size: var(--ai6-texte-dense); line-height: 1.5; color: var(--ai6-muet); }
.synthese__attente {
  border: 1px dashed var(--ai6-muet); border-radius: 6px;
  padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 4px;
  color: var(--ai6-muet);
}
.synthese__attente-titre { display: flex; gap: 8px; align-items: baseline; font-size: var(--ai6-texte-petit); }
.synthese__attente-titre b { font-size: var(--ai6-texte-courant); }
.synthese__attente-note { font-size: var(--ai6-texte-mini); line-height: 1.45; }

/* Le panneau non chargé : une icône, un bouton, et la raison pour laquelle
   rien ne part tout seul. */
.synthese__panneau {
  background: var(--ai6-bleu-fond);
  border-radius: 8px 8px 0 0;
  min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px 20px; text-align: center;
}
.synthese__panneau p { font-size: var(--ai6-texte-dense); color: var(--ai6-muet); margin: 0; }
.synthese__vue { padding: 0; gap: 0; overflow: hidden; }
/* La photographie remplit le panneau sans le déformer : `cover` recadre, là où
   `contain` aurait laissé deux bandes de fond de part et d'autre d'une image
   dont le rapport n'est jamais tout à fait celui du panneau. Le panneau garde
   son `min-height`, donc la rangée ne saute pas quand la vue arrive. */
.synthese__photo {
  width: 100%; height: 100%; min-height: 190px;
  object-fit: cover; display: block; border-radius: 8px 8px 0 0;
}
/* Le panneau qui porte une image ne pose ni fond ni marge : ce serait un liseré
   autour d'une photographie qui occupe déjà tout. */
.synthese__panneau:has(> .synthese__photo) { padding: 0; background: none; }
/* Le panorama interactif occupe le panneau comme la photographie qu'il remplace :
   même empreinte, pour que la rangée ne saute pas quand le composant arrive. Le
   fournisseur écrit dans le nœud enfant, jamais dans celui-ci — c'est ce nœud-là
   que le poste déplace d'un rendu à l'autre plutôt que de le reconstruire. */
.synthese__panorama, .synthese__panorama-hote {
  width: 100%; height: 100%; min-height: 190px; display: block;
  border-radius: 8px 8px 0 0; overflow: hidden;
}
.synthese__panneau:has(> .synthese__panorama) { padding: 0; background: none; }
.synthese__legende { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.synthese__legende-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* -- la carte « Synthèse du sinistre » ------------------------------------ */
.synthese__carte {
  background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne);
  border-radius: 10px; overflow: hidden;
  box-shadow: var(--ai6-ombre);
}
.synthese__carte > h2 {
  margin: 0; padding: 8px 14px;
  background: var(--ai6-bleu); color: var(--ai6-sur-bleu);
  font-size: var(--ai6-texte-dense); font-weight: 700; line-height: 1.5;
}
.synthese__carte-corps {
  padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 14px;
}

.synthese__table { width: 100%; border-collapse: collapse; }
.synthese__table th {
  text-align: left; padding: 7px 5px; font-size: var(--ai6-texte-mini); font-weight: 600;
  color: var(--ai6-bleu);
  border-bottom: 1px solid var(--ai6-bleu-moyen);
}
.synthese__table td {
  padding: 7px 5px; font-size: var(--ai6-texte-dense); color: var(--ai6-encre);
  border-bottom: 1px solid var(--ai6-ligne);
}
.synthese__table .num { text-align: right; white-space: nowrap; }
.synthese__table .piece { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.synthese__table tr.total td {
  border-bottom: 1px solid var(--ai6-bleu-moyen);
  border-top: 1px solid var(--ai6-bleu-moyen);
}
.synthese__table tr.total .lib { font-weight: 700; }
.synthese__table tr.total .franchise { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
.synthese__table tr.total .montant {
  font-size: var(--ai6-texte-courant); font-weight: 700; color: var(--ai6-bleu);
}

/* La bande de chiffrage : cinq chiffres alignés, lus d'un coup d'œil. */
.synthese__bande {
  background: var(--ai6-bleu-clair); border-radius: 6px;
  padding: 11px 14px 12px; display: flex; gap: 34px; flex-wrap: wrap;
}
.synthese__bande > div { display: flex; flex-direction: column; gap: 2px; }
.synthese__bande span { font-size: var(--ai6-texte-mini); color: var(--ai6-muet); }
.synthese__bande b { font-size: var(--ai6-texte-courant); color: var(--ai6-encre); }

/* La bande ambre : ce qui **change un montant**. C'est ce qui la distingue des
   fiches d'ambiance, et c'est pourquoi elle vit ici, avec le chiffrage. */
.synthese__ambre {
  background: var(--attente); border-left: 3px solid var(--attente-encre);
  border-radius: 6px; padding: 10px 14px 11px;
  display: flex; gap: 12px; align-items: center; color: var(--attente-encre);
}
.synthese__ambre svg { flex: none; }
.synthese__ambre-texte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.synthese__ambre-valeur { display: flex; gap: 8px; align-items: baseline; font-size: var(--ai6-texte-petit); }
.synthese__ambre-valeur b { font-size: var(--ai6-texte-courant); }
.synthese__ambre-note { font-size: var(--ai6-texte-petit); line-height: 1.45; }

.synthese__orientation { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.synthese__orientation > span { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
.synthese__orientation-badge {
  background: var(--ai6-bleu); color: var(--ai6-sur-bleu);
  font-size: var(--ai6-texte-dense); font-weight: 700; line-height: 1.5;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.synthese__orientation-motif { flex: 1 1 0; min-width: 200px; font-size: var(--ai6-texte-dense); }

/* Le résumé rédigé. L'avertissement en pied n'est pas décoratif : un paragraphe
   qui conclut, posé au-dessus du panneau Décision, se lit comme une décision. */
.synthese__resume {
  background: var(--ai6-bleu-clair); border-left: 3px solid var(--ai6-bleu);
  border-radius: 6px; padding: 11px 14px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.synthese__resume h3 {
  margin: 0; font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-bleu);
  text-transform: none; letter-spacing: 0;
}
.synthese__resume p { margin: 0; font-size: var(--ai6-texte-courant); line-height: 1.58; color: var(--ai6-encre); }
.synthese__resume p + p { margin-top: 7px; }

.synthese button.synthese__geste {
  padding: 9px 16px; background: var(--ai6-bleu); color: var(--ai6-sur-bleu);
  border: 0; border-radius: 4px; cursor: pointer; font-size: var(--ai6-texte-dense); font-weight: 600;
}
.synthese button.synthese__geste:disabled { opacity: .5; cursor: default; }

@media (max-width: 900px) {
  .synthese__rangee { flex-direction: column; }
  .synthese__rangee > * { width: 100%; }
}

/* ---------------------------------------- Synthèse gestionnaire et Documents
 *
 * L'écran de la maquette (Figma kFn7pEra8nhqZtTwKn85uR, frame
 * « Récapitulatif du sinsitre »), dans l'ordre qu'elle donne : le déclaré, puis
 * le photographié, puis le dit.
 *
 * Le bloc média est en deux colonnes — les photos à gauche, le résumé à droite,
 * comme la vidéo et son résumé chez elle. Il repasse en une colonne sous 1100 px :
 * la cellule Odoo s'ouvre dans un cadre qui n'a pas la largeur d'une maquette, et
 * un carrousel de 300 px ne montre plus de quoi reconnaître une pièce.
 */
/* **Un nom générique n'appartient à personne.** Ce `.recap`-ci est le bloc « récit »
   de la Synthèse — `recap__media`, `recap__photos` en sont les éléments. Il a
   pourtant attrapé, trois lots plus tard, le tableau du récapitulatif
   d'indemnisation, qui portait le même mot parmi ses classes : une table en
   `display:flex` cesse d'être une table, ses lignes se rétractent sur leur contenu,
   et rien dans les règles de largeur n'est faux pour autant. Le tableau porte
   désormais son propre nom ; ce bloc-ci garde le sien, et ce commentaire dit
   pourquoi on ne le renomme pas à la légère. */
.recap { display: flex; flex-direction: column; gap: 22px; }
.recap__media { display: flex; gap: 22px; align-items: flex-start; }
.recap__photos { flex: 1 1 58%; min-width: 0; }
.recap__resume {
  flex: 1 1 42%;
  min-width: 0;
  background: var(--ai6-bleu-fond);
  border-radius: var(--ai6-rayon);
  padding: 16px 18px;
}
.recap__resume h3 { margin: 0 0 12px; }
.recap__paragraphe { display: flex; gap: 10px; margin-bottom: 12px; }
.recap__paragraphe p { margin: 0; font-size: var(--ai6-texte-courant); line-height: 1.45; }
/* Les deux paragraphes qui ne portent pas de pièce — « Point bloquant : » en
 * tête, « Dossier : » en fin. Le retrait les aligne sur le texte des pièces
 * plutôt que sur leurs pastilles ; le filet ne se dessine que si une pièce les
 * précède, pour ne pas ouvrir l'encart sur une ligne horizontale. */
.recap__paragraphe--hors-piece { padding-left: 35px; }
.recap__paragraphe + .recap__paragraphe--hors-piece {
  border-top: 1px solid var(--ai6-bleu-moyen);
  padding-top: 12px;
}
/* **Les citations du résumé.** Un exposant numéroté, dont le survol donne le
 * fragment cité — c'est ce que `sources` voyage entier pour permettre. Elles
 * arrivaient jusque-là en clair au milieu des phrases (« 122,80 €
 * [P:p3][C:totalHT] oriente… ») et se lisaient comme des coquilles, alors
 * qu'elles sont le seul dispositif qui rende le résumé vérifiable.
 *
 * `cursor: help` plutôt qu'un lien : la pastille ne mène nulle part, elle
 * *montre*. La liste repliée en dessous est ce qui reste atteignable au clavier,
 * là où un `title` ne l'est pas. */
.recap__citation {
  font-size: var(--ai6-texte-mini);
  font-weight: 700;
  color: var(--ai6-bleu);
  background: var(--ai6-bleu-moyen);
  border-radius: 6px;
  padding: 1px 4px;
  margin-left: 2px;
  cursor: help;
  vertical-align: super;
  line-height: 1;
}
.recap__sources { margin: 12px 0 0; font-size: var(--ai6-texte-petit); }
.recap__sources summary { cursor: pointer; color: var(--ai6-bleu); font-weight: 600; }
.recap__sources ol { margin: 8px 0 0; padding-left: 20px; }
.recap__sources li { margin-bottom: 6px; line-height: 1.4; color: var(--ai6-muet); }
.recap__source-genre { text-transform: uppercase; font-size: var(--ai6-texte-mini); letter-spacing: .04em; }
/* Une référence citée sans source : ni une panne, ni un détail. Le ton d'alerte
 * dit que le résumé est moins appuyé qu'il n'en a l'air. */
.recap__citations-orphelines {
  margin: 10px 0 0;
  font-size: var(--ai6-texte-petit);
  color: var(--ai6-alerte);
}
/* L'avertissement n'est pas décoratif : un paragraphe qui conclut, posé près du
 * panneau Décision, se lit comme une décision. */
.recap__avertissement {
  margin: 14px 0 0;
  font-size: var(--ai6-texte-petit);
  color: var(--ai6-muet);
  border-top: 1px solid var(--ai6-bleu-moyen);
  padding-top: 10px;
}
/* « Aucune photo pour cette pièce » — écrit là où le carrousel *n'a pas* bougé.
 * Vide la plupart du temps, d'où la hauteur réservée : un message qui apparaît
 * en poussant l'écran fait sauter ce qu'on était en train de lire. */
.recap__note { min-height: 18px; margin: 6px 0 0; font-size: var(--ai6-texte-dense); color: var(--ai6-alerte); }
.recap__entretien { border-top: 1px solid var(--ai6-ligne); padding-top: 16px; }
.recap__vide { color: var(--ai6-muet); font-size: var(--ai6-texte-courant); padding: 14px 0; }
.documents { padding: 4px 0; }

@media (max-width: 1100px) {
  .recap__media { flex-direction: column; }
  .recap__photos, .recap__resume { width: 100%; flex: none; }
}

/* ---- les bulles du chiffrage : pourquoi ce chiffre ----------------------- */
/*
 * Le bouton reste **discret par défaut** et ne s'annonce que dans trois cas —
 * une présomption, une valeur de repli, un arbitrage du gestionnaire —, ceux où
 * il y a quelque chose à lever. C'est la leçon déjà écrite dans `pricing.py` :
 * « un avertissement partout n'est lu nulle part ».
 *
 * `pourquoi`, et non `bulle` : `.bulle` appartient aux tours de parole de
 * l'entretien, quelques centaines de lignes plus haut.
 */
.pourquoi{margin-left:5px;padding:0;width:16px;height:16px;line-height:14px;
  border:1px solid var(--trait);border-radius:50%;background:var(--blanc);
  color:var(--encre3);font-size:var(--ai6-texte-mini);font-weight:700;cursor:pointer;vertical-align:middle}
.pourquoi:hover{border-color:var(--bleu);color:var(--bleu)}
.pourquoi-vue{border-color:var(--ind);background:var(--ind-fond);color:var(--ind)}

/* Le panneau se pose dans la **top layer** : c'est ce qui lui permet de sortir de
 * l'`overflow-x:auto` du tableau de chiffrage. Un `<details>` ouvert dans une
 * cellule de ce tableau se ferait rogner, ou pousserait la colonne. */
/* **`display:block`, et ce n'est pas de la mise en forme.** Le panneau est un
 * `<span>` — il doit l'être, il vit dans un `<h3>` et dans un `<td>`, où un `<div>`
 * serait du balisage invalide. Or `max-width` **ne s'applique pas** à un élément
 * inline : ouvert, le panneau s'étalait donc sur toute la largeur disponible et le
 * texte débordait. Le bloc rend la largeur opposable.
 *
 * La borne est relative au **viewport** en plus d'être absolue : dans la top layer
 * le panneau ne connaît pas la colonne qui l'a ouvert, et 420 px sur un téléphone
 * dépassent l'écran. */
.x-panneau{display:block;width:max-content;max-width:min(420px,calc(100vw - 32px));
  padding:12px 14px;border:1px solid var(--trait);
  border-radius:6px;background:var(--blanc);color:var(--encre);font-size:var(--ai6-texte-dense);
  line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere;
  box-shadow:var(--ai6-ombre-flottante-3)}
.x-panneau .x-regle{margin:0 0 8px;line-height:1.45}
.x-panneau .x-regle + .x-regle{margin-top:10px}
.x-faits{margin:0;padding:0;list-style:none;border-top:1px solid var(--trait2);padding-top:7px}
.x-faits li{display:flex;gap:8px;align-items:baseline;padding:2px 0;font-size:var(--ai6-texte-dense)}
.x-faits .f-lib{flex:1;color:var(--encre2)}
.x-faits .f-src{color:var(--encre3);font-size:var(--ai6-texte-petit);font-style:normal}
/* La lecture du moteur, sous celle du gestionnaire. En retrait et en gris : elle
 * n'est plus celle qui s'applique, et elle doit rester lisible tout de même — une
 * franchise écartée à la main et une franchise jamais due ne se plaident pas
 * pareil. */
.x-moteur{margin-top:10px;padding-left:10px;border-left:2px solid var(--trait);
  color:var(--encre3)}
.x-moteur .x-titre{display:block;font-size:var(--ai6-texte-petit);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:4px}

/* **Le repli rend le motif visible, jamais invisible.** Un navigateur sans
 * `popover` ignore l'attribut : le panneau se rend alors en flux, sous le chiffre.
 * C'est moins joli et c'est lisible — l'inverse (`display:none` écrit à la main)
 * enfermerait l'explication dans les navigateurs qui savent l'ouvrir, et se
 * tairait chez les autres. */
@supports selector(:popover-open){
  .x-panneau:not(:popover-open){display:none}
}
@supports not selector(:popover-open){
  .pourquoi{display:none}
  .x-panneau{display:block;width:auto;max-width:none;margin:6px 0;box-shadow:none}
}

/* La loupe ne montre plus seulement des photos : un devis arrive en PDF, et une
 * balise `img` n'en rendait qu'une image cassée. Le cadre est le même — c'est le
 * geste de regarder qui compte, pas le format. */
.photo-loupe__pdf { width: min(90vw, 900px); height: min(85vh, 1100px); border: 0;
                    background: var(--blanc); border-radius: 8px; }
.photo-loupe__telecharger { display: inline-block; padding: 14px 22px; border-radius: 8px;
                            background: var(--bleu); color: var(--blanc);
                            text-decoration: none; font-weight: 700; }

/* L'onglet Documents, rangé. Une section vide se dit plutôt que de disparaître :
 * « demandé, et passé » n'est pas « pas demandé », et c'est cette différence qui
 * dit au gestionnaire s'il doit relancer. */
.documents__section { margin-bottom: 22px; }
.documents__titre { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
                    font-size: var(--ai6-texte-dense); text-transform: uppercase; letter-spacing: .04em;
                    color: var(--encre3); }
.documents__compte { display: inline-flex; min-width: 20px; justify-content: center;
                     padding: 1px 6px; border-radius: 100px; background: var(--trait2);
                     color: var(--encre2); font-size: var(--ai6-texte-petit); letter-spacing: 0; }
.documents__vide { margin: 0; color: var(--encre3); font-style: italic; font-size: var(--ai6-texte-dense); }

/* ---------------------------------------------- Pièces de règlement (Chiffrage)
 *
 * Le bloc suit la table de chiffrage : on joint un devis pour le confronter à un
 * chiffrage, pas l'inverse. Un filet le sépare de ce qui précède, parce qu'il ne
 * parle plus des lignes mais du dossier.
 */
.pieces-reglement { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--trait2); }
.pieces-reglement h3 { margin: 0 0 4px; font-size: var(--ai6-texte-courant); }
.pieces-reglement .grille.pr-comparer { display: flex; gap: 12px; align-items: flex-end;
                                        flex-wrap: wrap; margin: 12px 0 4px; }
.pieces-reglement .pr-comparer label { display: flex; flex-direction: column; gap: 4px;
                                       font-size: var(--ai6-texte-dense); color: var(--encre2); }
.pieces-reglement .pr-comparer input { width: 140px; padding: 5px 7px; font-size: var(--ai6-texte-dense);
                                       text-align: right; font-variant-numeric: tabular-nums; }
/* Le choix du mode, contre le récapitulatif qu'il commande.
 *
 * Trois options se lisent d'un coup : une bande, pas une liste déroulante. Le mode
 * retenu porte le même liseré que la ligne retenue du tableau de comparaison plus
 * bas — c'est le même fait, dit au même endroit de l'œil, et deux façons de le
 * montrer feraient chercher laquelle est la bonne. */
.choix-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
              margin: 18px 0 4px; }
.choix-mode__t { font-size: var(--ai6-texte-petit); color: var(--encre3); text-transform: uppercase;
                 letter-spacing: .04em; margin-right: 4px; }
.choix-mode__o { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
                 padding: 4px 10px; border: 1px solid var(--trait); border-radius: 3px;
                 font-size: var(--ai6-texte-dense); background: var(--papier); }
.choix-mode__o:hover { border-color: var(--encre3); }
.choix-mode__o.est-retenu { background: var(--papier2); border-color: var(--encre2);
                            box-shadow: inset 2px 0 0 var(--encre2); }
/* Le montant en regard n'est pas un prix affiché : c'est ce que la comparaison a
 * mesuré, et il ne paraît que si elle a été demandée. */
.choix-mode__o em { font-style: normal; color: var(--encre3);
                    font-variant-numeric: tabular-nums; }
.choix-mode__o.est-retenu em { color: inherit; }

table.pr-modes { width: 100%; border-collapse: collapse; font-size: var(--ai6-texte-dense);
                 font-variant-numeric: tabular-nums; }
table.pr-modes th, table.pr-modes td { padding: 6px 8px; border-bottom: 1px solid var(--trait2);
                                       text-align: left; vertical-align: top; }
table.pr-modes th.n, table.pr-modes td.n { text-align: right; }
/* Le mode retenu se voit sans se crier : c'est celui que le dossier porte, pas une
 * recommandation. Le liseré suffit — une couleur pleine le ferait lire comme le
 * meilleur, que le moteur nomme séparément et ne choisit pas. */
table.pr-modes tr.pr-retenu td { background: var(--papier2); }
table.pr-modes tr.pr-retenu td:first-child { box-shadow: inset 2px 0 0 var(--encre2); }
.pr-marque { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 100px;
             background: var(--trait2); color: var(--encre2); font-size: var(--ai6-texte-mini);
             font-style: normal; letter-spacing: .02em; }
.pr-motif { font-size: var(--ai6-texte-mini); color: var(--encre3); font-style: normal; }

/* L'onglet de rapprochement. Trois colonnes — le devis, l'écart, le barème — et
 * un bloc par **groupe**, jamais une rangée par ligne : le barème porte un ouvrage
 * complet là où l'artisan détaille, et une table ligne à ligne aurait été plus
 * simple à dessiner et fausse dans les deux tiers des cas. */
.rap__tete { display: flex; justify-content: space-between; align-items: center;
             gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rap__docs { display: flex; gap: 8px; flex-wrap: wrap; }
.rap__doc { padding: 7px 14px; border: 1px solid var(--trait); border-radius: 8px;
            background: var(--blanc); cursor: pointer; font-size: var(--ai6-texte-dense); }
.rap__doc.est-actif { background: var(--bleu); border-color: var(--bleu);
                      color: var(--blanc); font-weight: 700; }
/* Périmé se dit, et se voit. */
.rap__perime { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
               background: var(--attente); color: var(--attente-encre); font-size: var(--ai6-texte-dense); }
.rap__groupe { border: 1px solid var(--trait); border-radius: 8px; padding: 12px 14px;
               margin-bottom: 10px; background: var(--blanc); }
.rap__groupe--ouvert { background: var(--attente); }
/* Un forfait se distingue à l'œil : il ne se compare pas ligne à ligne, et le
 * lire comme les autres ferait chercher un détail qui n'existe pas. */
.rap__groupe--forfait { border-style: dashed; }
/* Une lecture incohérente se dit **avant** les groupes : après, on s'est déjà
 * fait une opinion sur des écarts qui ne veulent rien dire. */
.rap__doute { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
              background: var(--alerte, var(--attente)); color: var(--encre);
              font-size: var(--ai6-texte-dense); border: 1px solid var(--trait); }
.rap__doute .rap__detail { display: block; margin-top: 4px; font-family: var(--mono);
                           font-size: var(--ai6-texte-petit); color: var(--encre2); }
/* **Qui a apparié.** Un repli qu'on ne voit pas se lit comme un bon
 * rapprochement — et on lui fait confiance pareil. */
.rap__moteur { margin: 0 0 12px; font-size: var(--ai6-texte-petit); color: var(--encre2);
               display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rap__moteur.est-repli { color: var(--attente-encre); }
.rap__repli { font-size: var(--ai6-texte-petit); }
/* Le motif du modèle : ce qui fonde le groupe, en une phrase. Sans seuil de
 * confiance, c'est cela qui se juge — « 0,78 » ne se juge pas. */
.rap__motif { margin: 8px 0 0; font-size: var(--ai6-texte-petit); color: var(--encre2);
              font-style: italic; }
.rap__ligne--titre { font-size: var(--ai6-texte-mini); text-transform: uppercase;
                     letter-spacing: .04em; color: var(--encre3); font-weight: 700; }
.rap__entete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rap__regime { font-size: var(--ai6-texte-mini); text-transform: uppercase; letter-spacing: .04em;
               color: var(--encre3); font-weight: 700; }
.rap__lieu { font-size: var(--ai6-texte-petit); color: var(--encre2); }
/* La confiance est **toujours** montrée : sans seuil, un score caché ment par
 * omission. */
.rap__conf { margin-left: auto; font-family: var(--mono); font-size: var(--ai6-texte-petit);
             color: var(--encre2); }
/* **Une seule grille pour les trois rangs** — les intitulés, chaque carte, le
   pied — sinon les colonnes ne se répondent pas d'un rang à l'autre. Le décalage
   de 15 px est celui qu'imposent la bordure et le rembourrage des cartes : sans
   lui, le pied ne s'alignait sur rien, et c'était déjà le cas avant. */
.rap__corps, .rap__colonnes, .rap__pied {
  display: grid; grid-template-columns: 1fr 130px 1fr; gap: 12px; }
/* **Les deux côtés sont des bandes de pleine hauteur**, pas des listes séparées
   par un trait. Le trait, on l'avait essayé : il tirait sa couleur de `--trait2`,
   qui vaut #f4f6fb — invisible sur du blanc. Et même visible, il s'arrêtait à la
   hauteur du texte, donc les colonnes cessaient d'exister dès qu'un côté était
   plus court que l'autre, ce qui est le cas courant.
   `stretch` leur donne la même hauteur ; la teinte fait le reste. */
.rap__corps { align-items: stretch; }
.rap__colonnes, .rap__pied { padding-left: 15px; padding-right: 15px; }
/* Les intitulés : sans eux, deux listes de montants qu'on ne sait pas attribuer,
   et un écart au milieu dont on ignore dans quel sens le lire. */
.rap__colonnes { margin-bottom: 6px; font-size: var(--ai6-texte-mini); text-transform: uppercase;
                 letter-spacing: .05em; color: var(--encre3); font-weight: 700; }
.rap__colonnes span:nth-child(2) { text-align: center; }
/* Les intitulés tombent sur le texte des bandes, pas sur leur bord : le
   rembourrage est le même de part et d'autre. */
.rap__colonnes span:first-child, .rap__colonnes span:last-child { padding: 0 12px; }
/* Chaque intitulé s'aligne sur ce qu'il titre : à gauche du libellé qu'il
   annonce, centré au-dessus de l'écart. */
.rap__cote { list-style: none; margin: 0; padding: 0; }
/* Chaque côté se lit comme une colonne et non comme une liste posée là. */
/* **Un ton moyen, et il sort délibérément du système.** `--trait` vaut `#f0f0f7`
   et `--trait2` `#f4f6fb` : les deux lignes du design sont conçues pour se faire
   oublier, ce qui est juste partout ailleurs et faux ici. Une colonne dont on ne
   voit pas le bord n'est pas une colonne — et c'est la deuxième fois que ce défaut
   est signalé. D'où cette teinte, dérivée du gris `--ai6-muet` et adoucie, assez
   nette pour délimiter sans crier. */
.rap { --rap-bord: color-mix(in srgb, var(--ai6-muet) 45%, transparent); }
.rap__cote--devis, .rap__cote--bareme {
  background: var(--papier2); border: 1px solid var(--rap-bord);
  border-radius: 6px; padding: 8px 11px; }
/* Sur une carte déjà teintée — un ouvrage sans devis en face, ou l'inverse — la
   bande se pose en clair : la même teinte froide sur le fond chaud de l'attente
   les ferait se battre. */
.rap__groupe--ouvert .rap__cote--devis,
.rap__groupe--ouvert .rap__cote--bareme { background: color-mix(in srgb, var(--ai6-blanc) 55%, transparent); }
/* La colonne vide garde son bord : c'est elle qui dit « rien en face », et sans
   bord la carte paraîtrait n'avoir qu'un seul côté. */
.rap__cote:empty { min-height: 34px; }
/* L'écart se lit **entre** les deux bandes, et se centre sur leur hauteur plutôt
   que de flotter en haut d'une colonne étirée. */
.rap__ecart { align-self: center; }
/* **Les deux colonnes se lisent dans le même sens** — libellé à gauche, montant à
   droite. Mirroiter celle du barème pour rapprocher les montants de l'écart était
   une astuce : elle désaligne les libellés, qui sont ce qu'on parcourt d'abord
   pour vérifier qu'un rapprochement a du sens. */
.rap__ligne { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.rap__ligne--vide { color: var(--encre3); font-style: italic; }
.rap__lib { flex: 1; }
.rap__detail { font-size: var(--ai6-texte-mini); color: var(--encre3); }
.rap__montant { font-weight: 600; white-space: nowrap; }
.rap__ecart { text-align: center; }
.rap__ecart b { display: block; font-size: var(--ai6-texte-courant); }
.rap__ecart span { font-size: var(--ai6-texte-mini); color: var(--encre3); }
.rap__ecart--nul { color: var(--ok); }
.rap__ecart--net { color: var(--ind); }
/* Rejeter est le même geste que retenir, et rien n'est coché d'avance. */
.rap__retenir { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
                font-size: var(--ai6-texte-dense); cursor: pointer; }
.rap__ecartees { margin-top: 16px; font-size: var(--ai6-texte-dense); }
.rap__ecartees ul { list-style: none; margin: 6px 0 0; padding: 0; }
.rap__ecartees li { padding: 3px 0; color: var(--encre2); }
.rap__ecartees span { color: var(--encre3); font-style: italic; }
/* Le pied continue les mêmes bandes : sans elles, les deux totaux flottaient
   sous des colonnes qui s'arrêtaient au-dessus d'eux. */
.rap__pied { align-items: stretch; margin-top: 16px; }
.rap__pied span { background: var(--papier2); border: 1px solid var(--rap-bord);
                  border-radius: 6px; padding: 10px 11px; }
.rap__pied span:last-child { text-align: left; }
.rap__pied b.rap__ecart--net { text-align: center; }
.rap__pied b { font-size: var(--ai6-texte-courant); }
/* **En étroit, on empile** — trois colonnes de 1 fr sur un téléphone donnent des
   libellés coupés mot à mot. Les intitulés de tête n'ont alors plus de sens : ils
   disparaissent, et chaque côté redit son nom au-dessus de lui-même. C'est le
   seul endroit où la répétition vaut mieux que le rang de tête. */
@media (max-width: 720px) {
  .rap__corps, .rap__pied { grid-template-columns: 1fr; gap: 6px; }
  .rap__colonnes { display: none; }
  .rap__cote--devis, .rap__cote--bareme { padding: 6px 9px; }
  .rap__pied span { padding: 8px 9px; }
  .rap__cote::before { display: block; font-size: var(--ai6-texte-mini); text-transform: uppercase;
                       letter-spacing: .05em; color: var(--encre3); font-weight: 700;
                       margin: 6px 0 2px; }
  .rap__cote--devis::before { content: "Devis"; }
  .rap__cote--bareme::before { content: "Chiffrage"; }
  .rap__ecart { text-align: left; }
}
.rap__note { margin-top: 12px; font-size: var(--ai6-texte-mini); font-style: italic; color: var(--encre3); }

/* ------------------------------------------------------------ Téléphone
 *
 * Le panneau d'appel (`js/telephone.js`) et son bloc dans la Synthèse gestionnaire.
 * Repris du prototype validé (scénario A), sur les jetons `--ai6-*`. Tout est préfixé
 * `tel-` : le poste vit sous Bootstrap et Form.io, et `.card`, `.alert` ou `.badge`
 * y ont déjà un sens. Le panneau est posé sur `document.body`, hors de `#poste`, que
 * chaque changement d'onglet réécrit. */
.tel-recap { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--ai6-ligne); border-radius: var(--ai6-rayon); background: var(--ai6-blanc); }
.tel-recap__tete { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.tel-recap__tete h3 { margin: 0; font-size: var(--ai6-texte-dense); font-weight: 700; color: var(--ai6-bleu); }
.fil-suite { margin: 14px 0 0; }
.tel-historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 4px; font-size: var(--ai6-texte-dense); }
.tel-historique li { border-top: 1px solid var(--trait2); padding-top: 4px; }
.tel-vue { border: 0; border-radius: var(--ai6-rayon); padding: 20px 22px; width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); box-shadow: var(--ai6-ombre-fenetre); color: var(--ai6-encre);
  font-size: var(--ai6-texte-courant); line-height: 1.4; }
.tel-vue[open] { display: flex; flex-direction: column; gap: 12px; }
/* The dialog scrolls, not its children: `.tel-tbl` scrolls sideways, and a flex child
 * that scrolls may shrink to nothing — the questions' table did, header left alone. */
.tel-vue > * { flex-shrink: 0; }
.tel-vue::backdrop { background: var(--ai6-voile); }
.tel-vue .tel-fil { max-height: none; overflow: visible; }

.tel { position: fixed; inset: 0; z-index: 2050; overflow-y: auto; background: var(--ai6-bleu-fond);
  color: var(--ai6-encre); font-size: var(--ai6-texte-courant); line-height: 1.4; }
/* 1,4 et non 1,5 (le corps de page) : c'est l'interligne de tous les styles de texte de la
   maquette Price6+, et celui qui fait tomber juste une ligne de Champ de 32 px (13 px × 1,4 +
   les marges). Le reste du poste garde le sien. */
.tel[hidden] { display: none; }
/* **L'appel est un onglet du poste** (`telephone.js`, 29/09) : le même panneau, dans le
   flux du poste plutôt que par-dessus, si bien que le dossier reste à un onglet pendant
   tout l'appel. `.tel` lui-même reste plein écran : la dictée s'ouvre toujours ainsi. */
.tel--onglet { position: static; inset: auto; z-index: auto; overflow: visible; background: none; }
.tel--onglet .tel-tete { position: static; box-shadow: none; background: none; border-bottom: 0;
  padding: 12px 0 0; }
.tel--onglet .tel-corps { max-width: none; padding: 12px 0 24px; }
.tel--onglet .tel-cote { top: calc(var(--haut-actions, 0px) + 60px);
  max-height: calc(100vh - var(--haut-actions, 0px) - 76px); }
/* Le point vert (appel en ligne) et le point orange (appel resté ouvert, à reprendre), sur
   le bouton de la barre d'actions et sur l'onglet — visibles quel que soit l'onglet lu. */
.tel-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
  vertical-align: middle; background: var(--ai6-succes-vif); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai6-succes-vif) 25%, transparent); }
.tel-point--reprendre { background: var(--ai6-attente-vif); box-shadow: none; }
/* Variante `10:1384` (30/10) : en pause, ambre ; raccroché à clore (écran 8), de marque, sans halo. */
.tel-point--pause { background: var(--ai6-attente-vif); box-shadow: none; }
.tel-point--fin { background: var(--ai6-bleu-fonce); box-shadow: none; }
.ai6-bouton.tel-en-ligne { background: var(--ai6-succes-3); border-color: var(--ai6-succes-3); color: var(--ai6-blanc); }
/* Son coupé, transcription en panne, passages en attente : le vert s'en va et l'alerte se lit
   en toutes lettres sur le bouton, en ⚠ sur l'onglet — de n'importe quel onglet. */
.ai6-bouton.tel-en-ligne--alerte { background: var(--ai6-alerte-3); border-color: var(--ai6-alerte-3); }
/* **Rouge**, plus ambre (variante `10:1384`, 30/10) : l'ambre est la couleur de l'attente — la
   pause, l'appel à reprendre —, et un son coupé n'est pas une attente. */
.tel-point--alerte { background: var(--ai6-alerte); box-shadow: 0 0 0 3px var(--ai6-alerte-fond); }
.tel-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
[data-tel-horloge] { font-variant-numeric: tabular-nums; }
.tel-tete { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between;
  gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px;
  background: var(--ai6-blanc); border-bottom: 1px solid var(--ai6-bleu-moyen); box-shadow: var(--ai6-ombre); }
.tel-tete h2 { margin: 0; font-size: var(--ai6-texte-grand); color: var(--ai6-bleu-fonce); }
.tel-tete h2 small { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); font-weight: 400; margin-left: 8px; }
.tel-tete__actions { display: flex; gap: 8px; }
.tel-corps { max-width: 1400px; margin: 0 auto; padding: 16px 16px 72px; display: flex;
  flex-direction: column; gap: 14px; }
.tel-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.tel-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tel-cote { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 70px;
  max-height: calc(100vh - 86px); overflow-y: auto; min-width: 0; }
/* **La colonne défile, ses cartes ne rétrécissent pas** (démo du 19/10). Laissées au
   `flex-shrink: 1` par défaut, elles se partageaient la hauteur de l'écran et la liste de la
   Transcription cédait la première : 0 px à 1366 et 1600 de large, 84 px à 900 — le titre,
   « Ce que j'ai entendu » et « Ajouter » restaient, pas une réplique. */
.tel-cote > * { flex-shrink: 0; }
/* **La Carte** de la maquette Price6+ (relevée sur l'écran `5:162`) : un trait #dde3ea, un
   rayon de 8, 10 px 12 px, et pas d'ombre. L'ombre et le trait --ai6-ligne d'avant posaient
   une carte presque blanche sur blanc, et le 16 px 18 px mangeait à trois colonnes la largeur
   d'une ligne de Champ. Le rayon 8 n'a pas de jeton (--ai6-rayon vaut 10 et sert au reste du
   poste) : il n'existe que pour la carte. L'écart entre ses enfants reste de 12 px — la
   maquette en dessine 4, mais entre des lignes de Champ, que cette carte ne porte pas encore.
   Le titre est un titre, plus une étiquette : 16/700 en encre, dans la casse du catalogue
   (« Question à poser », « Entendu, à valider »), au lieu de 12 px gris en capitales. */
.tel-carte { background: var(--ai6-blanc); border: 1px solid var(--ai6-carte-bord); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* `.tel .tel-titre` et pas `.tel-titre` seul : dans l'onglet, le panneau est sous
   `.onglet-corps`, dont la règle des intertitres (`.onglet-corps h3`, plus spécifique) faisait
   des titres de carte des intertitres du poste — 13 px bleus, soulignés d'un filet, 20 px
   de marge au-dessus. La relecture (`.tel-vue`, posée sur body) n'a pas ce voisinage. */
.tel .tel-titre, .tel-titre { margin: 0; padding: 0; border: 0; font-size: var(--ai6-texte-titre); font-weight: 700;
  line-height: 1.4; color: var(--ai6-encre); }
.tel-note { margin: 0; font-size: var(--ai6-texte-dense); color: var(--encre2); }
.tel-lien { border: 0; background: none; color: var(--ai6-bleu); padding: 0; font-size: var(--ai6-texte-dense);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tel-duo--seul { grid-template-columns: minmax(0, 360px); }
/* Le pied de l'éditeur (écran 11) : la note ou « Ne sait pas » à gauche, « Annuler » discret puis
   « Valider ce choix » à droite — trois boutons au plus, sur une ligne, où `.tel-duo` en tenait deux. */
.tel-editeur__pied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tel-editeur__pied > .tel-note, .tel-editeur__pousse { flex: 1; margin: 0; }
.tel-alerte { background: var(--no-fond); color: var(--ai6-alerte); border-radius: 6px; padding: 10px 12px;
  font-size: var(--ai6-texte-dense); display: flex; flex-direction: column; gap: 8px; }
.tel-consigne { margin: 0; background: var(--ai6-attente); border-left: 3px solid var(--ai6-attente-encre);
  color: var(--ai6-attente-encre-3); border-radius: 4px; padding: 8px 10px; font-size: var(--ai6-texte-dense); }
.tel-succes { background: var(--ai6-succes-fond); color: var(--ai6-succes-encre); border-radius: 6px; padding: 12px 14px; font-size: var(--ai6-texte-courant); }
.tel-etapes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--ai6-texte-courant); }
.tel-qhaut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.tel-cpt { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); font-variant-numeric: tabular-nums; }
.tel-qlabel, .tel-rep__lbl { margin: 0; font-size: var(--ai6-texte-petit); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ai6-muet); }
.tel-qtexte { margin: 0; font-size: var(--ai6-texte-vedette); line-height: 1.3; font-weight: 600; color: var(--ai6-bleu-fonce); }
.tel-qsub { margin: 0; font-size: var(--ai6-texte-dense); color: var(--encre2); max-width: 70ch; }
.tel-rep { border-top: 1px solid var(--ai6-ligne); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.tel-rep__val { font-size: var(--ai6-texte-grand); font-weight: 600; margin: 0; }
.tel-ecoute, .tel-attente { display: flex; gap: 10px; align-items: center; font-size: var(--ai6-texte-courant);
  color: var(--encre2); flex-wrap: wrap; margin: 0; }
.tel-extrait { background: var(--ai6-bleu-clair); border-left: 2px solid var(--ai6-bleu); border-radius: 4px;
  padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tel-extrait q { font-size: var(--ai6-texte-dense); line-height: 1.48; quotes: "« " " »"; }
.tel-extrait small { font-size: var(--ai6-texte-mini); color: var(--ai6-muet); }
.tel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tel-chip { border: 1px solid var(--ai6-bleu-moyen); background: var(--ai6-blanc); color: var(--ai6-bleu-fonce);
  border-radius: 999px; padding: 6px 12px; font-size: var(--ai6-texte-dense); text-align: left; cursor: pointer; }
.tel-chip[aria-pressed="true"] { background: var(--ai6-bleu); border-color: var(--ai6-bleu); color: var(--ai6-sur-bleu); font-weight: 600; }
.tel-chip:disabled { opacity: .5; cursor: default; }
.tel-chips--lecture .tel-chip { cursor: default; }
.tel-groupe { flex-basis: 100%; font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-bleu); margin-top: 4px; }
.tel-repli summary { cursor: pointer; font-size: var(--ai6-texte-dense); color: var(--encre2); }
.tel-repli .tel-chips { margin-top: 8px; }
.tel-champ { display: flex; flex-direction: column; gap: 4px; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
/* La saisie de l'appel (maquette `5:154`). `font: inherit` vient **avant** la taille : écrit
   après, ce raccourci la remettait à celle du libellé (12 px, `.tel-champ`), et les 14 px
   demandés n'avaient jamais paru. */
.tel-champ input, .tel-champ textarea, .tel-entendu select { font: inherit; padding: 7px 10px; background: var(--ai6-blanc);
  border: 1px solid var(--ai6-carte-bord); border-radius: var(--ai6-rayon-petit); font-size: var(--ai6-texte-dense);
  color: var(--ai6-encre); }
.tel-champ input::placeholder, .tel-champ textarea::placeholder { font-style: italic; color: var(--ai6-muet); }
.tel-radio { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ai6-texte-courant); padding: 8px 10px;
  border: 1px solid var(--ai6-ligne); border-radius: 6px; }
.tel-radio input { margin-top: 3px; }
.tel-radio small { display: block; color: var(--ai6-muet); font-size: var(--ai6-texte-petit); }
.tel-voile { position: fixed; inset: 0; background: var(--ai6-voile); z-index: 2060;
  display: grid; place-items: center; padding: 16px; }
.tel-dialogue { background: var(--ai6-blanc); border-radius: var(--ai6-rayon); max-width: 520px; width: 100%;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ai6-ombre-fenetre);
  max-height: calc(100vh - 32px); overflow-y: auto; }
.tel-dialogue h2 { margin: 0; font-size: var(--ai6-texte-grand); color: var(--ai6-bleu-fonce); }
.tel-dialogue p { margin: 0; font-size: var(--ai6-texte-courant); color: var(--encre2); }
.tel-sources { display: flex; flex-direction: column; gap: 8px; }
.tel-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--ai6-texte-dense); }
.tel-source small { display: block; color: var(--ai6-muet); font-size: var(--ai6-texte-petit); }
.tel-vu { display: flex; gap: 3px; align-items: center; height: 24px; }
.tel-vu i { display: block; width: 3px; height: 3px; border-radius: 2px; background: var(--ai6-bleu-moyen);
  transition: height .1s; }
.tel-vu[data-live="1"] i { background: var(--ai6-bleu); }
.tel-horloge { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ai6-alerte-2); }
.tel-sauve { margin: 0; font-size: var(--ai6-texte-dense); color: var(--ai6-succes); }
.tel-sauve--ko { color: var(--ai6-alerte); }
.tel-transcr { min-height: 220px; }
.tel-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; max-height: 34vh; }
/* **La Réplique** (maquette Price6+, composant `3:70`) : une colonne de 64 px pour qui parle
   et quand, le texte à côté, en 14 px. Le texte est enveloppé dans un `<span>` (telephone.js)
   pour que la grille ait deux cellules et pas une par nœud : `marquer()` rend du texte et des
   `<mark>` à plat, qui seraient devenus autant de cellules.
   Le fond dit **qui parle**, plus une ligne sur deux : le gestionnaire (« Vous ») sur le gris
   neutre, l'assuré sur le blanc de la carte — un zébrage n'apprenait rien qu'on ne sache déjà
   par l'ordre. L'accent va à l'assuré, en couleur de marque, et « Vous » passe en muet : c'est
   la parole de l'assuré qu'on relit, et l'ancien brun d'attente se confondait avec « entendu,
   à valider ». Les extraits ne sont plus surlignés (voir plus bas, `mark`). */
.tel-fil li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 12px;
  border-radius: 6px; font-size: var(--ai6-texte-courant); line-height: 1.4; }
.tel-fil li:has(> .tel-qui--vous) { background: var(--ai6-ligne-2); }
.tel-qui { display: flex; flex-direction: column; font-size: var(--ai6-texte-petit); font-weight: 700; }
.tel-qui--vous { color: var(--ai6-muet); }
.tel-qui--ass { color: var(--ai6-bleu); }
.tel-qui time { font-size: var(--ai6-texte-mini); font-weight: 400; color: var(--ai6-muet); font-variant-numeric: tabular-nums; }
/* **Soulignés, plus surlignés** (Abdel, 30/10, pour Groupama — `RESTE.md` point 4, qui revient
   sur le « surlignage gardé » du matin) : la maquette souligne les extraits retenus en couleur
   de marque (composant `3:70` : « Les extraits retenus sont soulignés en couleur de marque »),
   et met la réplique qui porte une lecture **à valider** sur l'ambre de « à valider », son
   extrait souligné, en gras, à l'encre d'attente (`5:144`). Le jaune posé sur un mot se lisait
   comme un surligneur de relecture, pas comme l'état « à valider » du reste de l'écran. Le
   marquage lui-même ne change pas (`marquer()`, ses plages et ses tests). */
.tel-fil mark { background: none; color: inherit; text-decoration: underline var(--ai6-bleu);
  text-decoration-thickness: from-font; text-underline-offset: 2px; }
.tel-fil mark.tel-actif { color: var(--ai6-attente-encre); font-weight: 700; text-decoration-color: currentColor; }
.tel-fil li.tel-li--actif { background: var(--ai6-attente-fond); }
/* **Les chapitres du fil** (Abdel, 30/10 — Groupama : « un résumé qui s'adapte à la
   conversation, comme des mini-chapitres ») : un par bloc de l'entretien, titré du bloc, sous
   la phrase de `…/resume` (P6b). La phrase n'est pas une réplique — ni « qui parle », ni
   heure, plus petite, avec « résumé automatique, à relire » : c'est le modèle qui l'a écrite.
   Les chapitres passés se replient sur cet en-tête ; celui en cours reste déplié. Ses
   répliques gardent la grille du socle (`li > .tel-qui + span`). */
.tel-fil li.tel-chap { display: block; padding: 0; border-radius: 0; }
.tel-chap + .tel-chap { border-top: 1px solid var(--ai6-ligne); margin-top: 4px; padding-top: 4px; }
.tel-chap__fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tel-chap__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 12px 4px; }
summary.tel-chap__tete { cursor: pointer; list-style: none; border-radius: 6px; }
summary.tel-chap__tete::-webkit-details-marker { display: none; }
summary.tel-chap__tete:hover { background: var(--ai6-survol); }
.tel-chap__titre { font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre); }
.tel-chap__note { font-size: var(--ai6-texte-mini); color: var(--ai6-muet); font-style: italic; }
.tel-chap__resume { order: 3; flex-basis: 100%; font-size: var(--ai6-texte-dense); line-height: 1.4;
  color: var(--ai6-encre-secondaire); }
.tel-chap__voir, .tel-chap__cacher { margin-left: auto; font-size: var(--ai6-texte-petit); font-weight: 700;
  color: var(--ai6-bleu); }
details[open] > summary .tel-chap__voir, details:not([open]) > summary .tel-chap__cacher { display: none; }
/* L'en-tête du chapitre en cours reste en haut du fil quand on est en bas : le fil est ancré
   sur la dernière réplique, et un chapitre de douze répliques poussait son titre et sa phrase
   hors de la vue — on ne voyait plus de quoi on parlait (appel de démo, 30/10). */
.tel-chap--cours > .tel-chap__tete { position: sticky; top: 0; z-index: 1; background: var(--ai6-blanc);
  box-shadow: 0 1px 0 var(--ai6-ligne); }
/* « Voir l'appel » : un appel passé n'a pas de chapitre « en cours ». */
.tel-vue .tel-chap--cours > .tel-chap__tete { position: static; box-shadow: none; }
.tel-fil .tel-enc { display: block; color: var(--ai6-muet); font-style: italic; background: none; }
/* La phrase encore en train d'être dite (temps réel) : grisée, ce n'est pas encore une réplique. */
.tel-fil .tel-encours { color: var(--ai6-muet); font-style: italic; }
/* Les mots que seul l'aperçu a entendus (Mistral, SINISTRE6_REALTIME_PREVIEW) : plus pâles
   encore — montrés, jamais versés ; la phrase gardée les remplace en se fermant. */
.tel-fil .tel-encours .tel-avenir { opacity: .55; }
.tel-entendu { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ai6-ligne); padding-top: 10px; }
.tel-journal { width: 100%; border-collapse: collapse; font-size: var(--ai6-texte-dense); }
.tel-journal th { text-align: left; font-weight: 600; font-size: var(--ai6-texte-mini); color: var(--ai6-bleu); padding: 4px 6px;
  border-bottom: 1px solid var(--ai6-bleu-moyen); }
.tel-journal td { padding: 6px; border-bottom: 1px solid var(--trait2); vertical-align: top; }
.tel-journal q { color: var(--encre2); quotes: "« " " »"; font-size: var(--ai6-texte-petit); }
.tel-tbl { overflow-x: auto; }
.tel-fin { max-width: 720px; }
.tel-temoin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--ai6-bleu-moyen);
  border-top-color: var(--ai6-bleu); border-radius: 50%; animation: tel-tourne .8s linear infinite; }
@keyframes tel-tourne { to { transform: rotate(360deg); } }
.tel-barre { position: fixed; right: 16px; bottom: 16px; z-index: 2050; border: 0; border-radius: 999px;
  padding: 10px 16px; background: var(--ai6-bleu-fonce); color: var(--ai6-blanc); font-size: var(--ai6-texte-dense); font-weight: 600;
  box-shadow: var(--ai6-ombre-flottante-2); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.tel-barre[hidden] { display: none; }
.tel-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--ai6-enregistrement); animation: tel-bat 1.2s ease-in-out infinite; }
@keyframes tel-bat { 50% { opacity: .35; } }
/* L'onglet Appel en pleine largeur (P2, 29/09). Trois colonnes ne tiennent pas dans les
   ~1000 px laissés à côté de la colonne Décision (≈ 965 px en cellule) : sur cet onglet
   seulement, les tuiles et la colonne Décision se replient — comme sur la maquette validée —
   et reviennent sur tous les autres. `poste.js` dit l'onglet affiché (`data-onglet`). */
body:has(#poste[data-onglet="appel"]) .ai6-bandeau-formio { display: none; }
.ai6-corps-formio:has(#poste[data-onglet="appel"]) > .col-md-3 { display: none; }
.ai6-corps-formio:has(#poste[data-onglet="appel"]) > .col-md-9 { flex: 0 0 100%; max-width: 100%; }

/* **L'écran de la maquette Price6+** (Abdel, 30/10, DEV-11191 — `docs/price6plus/`), avant et
   pendant l'appel : la ligne du tableau de bord, la ligne « À demander », deux colonnes
   « Conversation » | « Les pièces », et **pas de défilement de page à 1366 × 768** — ce sont
   les colonnes qui défilent. La hauteur disponible sous l'en-tête et les onglets du poste est
   mesurée par telephone.js (`ajusterHauteur`, `--tel-dispo`) : l'en-tête est celui de l'hôte,
   que la feuille ne connaît pas. Les largeurs sont celles de la maquette : « Les pièces » à
   680 px en 1366 (la moitié de la largeur), 800 px au plus en 1920 ; la conversation prend le
   reste (650, puis 1084). Elles remplacent les trois colonnes du 19/10 (340 | 533 | 380), où
   « Entendu, à valider » commençait sous la ligne de flottaison et la page faisait 1779 px. */
.tel--ecran .tel-corps { position: relative; height: var(--tel-dispo, auto); padding: 12px 0 0; gap: 8px; overflow: hidden; }
/* `position: relative` on what scrolls: the words kept for screen readers (`.tel-lu`) are
   absolutely placed, and without a positioned ancestor inside the screen they escaped the
   clip and made the page scroll anyway — 776 px of it at 1366 × 768 (measured on 30/10). */
.tel--ecran :is(.tel-fil, .tel-conv__corps, .pa-cartes) { position: relative; }
.tel--ecran .tel-corps > * { flex-shrink: 0; }
.tel-deux { flex: 1 1 auto !important; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 50%, 800px); }
.tel-conv { min-height: 0; padding: 0; gap: 0; }
.tel-conv__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 8px; }
.tel-conv__note { margin-left: auto; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
/* **« Résumé de la conversation » en un paragraphe** (Abdel, 01/11, après la vidéo 22 : « au
   moment où Nicolas donne un résumé, il faut qu'il puisse le lire dans un paragraphe ») : les
   phrases des blocs bout à bout, sous la tête de la colonne, ouvertes par « Résumé ». Le fil
   rétrécit dessous (il est en `flex: 1 1 auto; min-height: 0`) ; le paragraphe défile en
   lui-même au-delà de 35 % de la hauteur de la fenêtre — la page, elle, ne défile toujours pas à
   1366 × 768. Le texte est au corps du fil, pas en petit : il est fait pour être lu à voix haute.
   **`flex: 0 0 auto`, il ne rétrécit pas** : en `0 1 auto`, le fil d'un vrai appel (des dizaines
   de répliques) le serrait à quatre lignes, le reste à faire défiler en plein récapitulatif — le
   rétrécissement se partage au prorata de la hauteur de chacun, et celle du fil est immense
   (vidéo 23, première prise, 01/11). Et sa limite en `vh` plutôt qu'en % de la colonne : une
   hauteur en % sur un élément dont le conteneur tient la sienne de la grille ne se résout pas
   toujours, et ne dirait alors plus rien. */
.tel .ai6-bouton.tel-conv__resume-bouton { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px;
  font-size: var(--ai6-texte-petit); }
.tel-conv__resume-bouton[aria-expanded="true"] { background: var(--ai6-survol); }
.tel-conv__resume { flex: 0 0 auto; max-height: 35vh; overflow-y: auto; margin: 0 14px 8px;
  padding: 10px 14px; border-left: 3px solid var(--ai6-bleu); border-radius: 6px; background: var(--ai6-ligne-2);
  display: flex; flex-direction: column; gap: 4px; }
.tel .tel-conv__resume-titre { margin: 0; font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre); }
.tel-conv__resume-texte { margin: 0; font-size: var(--ai6-texte-courant); line-height: 1.5; color: var(--ai6-encre); }
.tel-conv__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 12px; display: flex;
  flex-direction: column; gap: 12px; }
.tel-conv__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px 10px;
  border-top: 1px solid var(--ai6-ligne); }
.tel-conv__pied .tel-note { margin: 0; }
/* Le fil, ancré en bas : au début de l'appel, le vide est en haut, et la dernière réplique
   reste au-dessus de la saisie. */
.tel--ecran .tel-fil { flex: 1 1 auto; min-height: 0; max-height: none; padding: 0 8px; }
.tel--ecran .tel-fil > :first-child { margin-top: auto; }
.tel-coupure { display: flex !important; gap: 8px; align-items: flex-start; background: var(--ai6-alerte-fond);
  color: var(--ai6-alerte); font-weight: 700; font-size: var(--ai6-texte-dense); }
.tel-coupure .ai6-icone { flex: none; width: 14px; height: 14px; margin-top: 2px; }
/* La saisie sur une ligne (`5:93`) : le champ, qui parle, Ajouter. */
.tel-conv__pied--saisie { flex-wrap: nowrap; }
.tel-conv__pied input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--ai6-texte-dense); padding: 7px 10px;
  border: 1px solid var(--ai6-carte-bord); border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); }
.tel-conv__pied select { font: inherit; font-size: var(--ai6-texte-petit); font-weight: 700; padding: 4px 8px;
  border: 0; border-radius: var(--ai6-rayon-pilule); background: var(--ai6-ligne-2); color: var(--ai6-encre-secondaire); }
/* Avant l'appel : l'état vide, centré (`6:108`), et « Reste à compléter » numéroté (`6:261`). */
.tel-vide { margin: auto; max-width: 420px; text-align: center; color: var(--ai6-encre-secondaire);
  font-size: var(--ai6-texte-dense); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tel-vide > .ai6-icone { width: 32px; height: 32px; color: var(--ai6-bleu); }
.tel .tel-vide h4 { margin: 0; font-size: var(--ai6-texte-grand); color: var(--ai6-encre); }
.tel-vide ol { margin: 0; padding-left: 1.2em; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.tel-reste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tel-reste__q { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline;
  text-align: left; font: inherit; color: inherit; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer; }
button.tel-reste__q:hover { background: var(--ai6-survol); }
.tel-reste li:first-child .tel-reste__q { background: var(--ai6-bleu-clair); border-color: var(--ai6-bleu-trait); }
.tel-reste__n { font-weight: 700; font-size: var(--ai6-texte-grand); color: var(--ai6-bleu); }
.tel-reste__q b { display: block; font-weight: 600; }
.tel-reste__q small { display: block; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
/* « Les pièces » : sa tête, puis ses cartes qui défilent ; les cartes elles-mêmes sont à
   `pieces_appel.css` (le lot « pièces »). */
.tel-pieces { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; align-content: start; }
.tel-pieces > .pa-tete { grid-row: 1; grid-column: 1; }
.tel-pieces > .pa-cartes, .tel-pieces > .tel-note { grid-column: 1 / -1; min-height: 0; }
/* Screen 10: the form opens above the footer, both pinned under the cards that scroll. */
.tel-pieces > .aj-form, .tel-pieces > .aj-pied { grid-column: 1 / -1; }
.tel-pieces > .pa-cartes { overflow-y: auto; }
.tel-pieces__refus { grid-row: 1; grid-column: 2; align-self: center; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
/* La ligne « À demander » (`5:75`) : la question qui bloque d'abord, avec ses réponses d'un
   clic, puis la question suivante, son lieu et ses mots en italique ; « Toutes les questions »
   au bout. Elle passe à la ligne plutôt que de couper une question. */
.tel-ademander { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 12px;
  border-radius: 8px; background: var(--ai6-bleu-clair); font-size: var(--ai6-texte-dense); }
.tel-ademander__q { font-style: italic; font-size: var(--ai6-texte-courant); color: var(--ai6-encre); quotes: "« " " »"; }
.tel-ademander__suivante { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; border: 0; padding: 2px 4px;
  margin: -2px -4px; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.tel-ademander__suivante:hover { background: var(--ai6-survol); }
.tel-ademander__ou { font-weight: 600; color: var(--ai6-bleu-fonce); }
.tel-ademander__pousse { flex: 1 1 0; }
.tel-ademander__tout { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ai6-bleu); }
.tel-ademander__tout .ai6-icone { width: 12px; height: 12px; }
.tel-ademander__fini { color: var(--ai6-succes); font-weight: 600; }
.tel-editeur-ligne { gap: 8px; }
.tel-editeur { display: flex; flex-direction: column; gap: 8px; }
/* La ligne d'état rouge de l'écran 7 (`8:511`) : son coupé, transcription en panne. */
.tel-etat-alerte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px;
  border: 1px solid var(--ai6-alerte); border-radius: 8px; background: var(--ai6-alerte-fond); color: var(--ai6-alerte);
  font-size: var(--ai6-texte-dense); }
.tel-etat-alerte .ai6-icone { width: 16px; height: 16px; }
.tel-etat-alerte span { font-size: var(--ai6-texte-petit); }
/* Le tiroir « Toutes les questions » (`10:1460`) : 420 px sur la droite, par-dessus « Les
   pièces » ; non modal — l'appel continue à côté. */
.tel-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2040; width: min(420px, 100vw);
  display: flex; flex-direction: column; background: var(--ai6-blanc); border-left: 1px solid var(--ai6-carte-bord);
  box-shadow: var(--ai6-ombre-fenetre); }
.tel-tiroir__tete { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ai6-ligne); }
.tel-tiroir__tete .ai6-bouton-icone { margin-left: auto; }
.tel-tiroir__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 14px; }
.tel-entretien { display: flex; flex-direction: column; gap: 10px; }
.tel-entretien__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tel-seg { display: inline-flex; border: 1px solid var(--ai6-ligne); border-radius: 6px; overflow: hidden; }
.tel-seg button { border: 0; background: var(--ai6-blanc); padding: 4px 10px; min-height: 28px;
  font-size: var(--ai6-texte-dense); color: var(--encre2); cursor: pointer; }
.tel-seg button[aria-pressed="true"] { background: var(--ai6-bleu); color: var(--ai6-sur-bleu); font-weight: 600; }
.tel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* **La Puce** (maquette Price6+, composant `3:21`) : une seule règle et cinq tons. La classe
   était déclarée deux fois (11 px rayon 9, puis 12 px pilule), la seconde écrasant la première
   sans qu'on le voie, et les tons « ok » et « attente » peignaient des couleurs voisines de
   celles des états, pas les leurs. Elle n'est pas cliquable : un choix passe par `.tel-chip`.
   Tons : marque (sans modificateur), --gris (neutre), --ok, --att (attente), --alerte.
   --poser et --bloque, plus bas, ne sont pas des tons mais des témoins de la liste des
   questions : un contour et un aplat, gardés tels quels. */
.tel-tag { display: inline-block; font-size: var(--ai6-texte-petit); font-weight: 700; line-height: 1.4;
  padding: 2px 8px; border-radius: var(--ai6-rayon-pilule);
  background: var(--ai6-bleu-clair); color: var(--ai6-bleu-fonce); }
.tel-tag--gris { background: var(--ai6-ligne-2); color: var(--ai6-encre-secondaire); }
.tel-tag--ok { background: var(--ai6-succes-fond); color: var(--ai6-succes); }
.tel-tag--att { background: var(--ai6-attente); color: var(--ai6-attente-encre); }
.tel-tag--alerte { background: var(--ai6-alerte-fond); color: var(--ai6-alerte); }
.tel-chiffrer { margin: 0; background: var(--ai6-bleu-clair-2); border-radius: 8px; padding: 8px 10px; font-size: var(--ai6-texte-dense);
  color: var(--ai6-bleu-fonce); }
.tel-bloc { display: flex; flex-direction: column; gap: 2px; }
.tel-bloc__tete { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: var(--ai6-texte-dense);
  padding-top: 8px; border-top: 1px solid var(--trait2); }
.tel-bloc__compte { font-weight: 600; font-size: var(--ai6-texte-dense); color: var(--encre3); }
.tel-ligne { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 8px; align-items: start;
  min-height: 26px; padding: 2px 0; font-size: var(--ai6-texte-dense); }
.tel-ligne__lib { min-width: 0; }
.tel-ligne__val { max-width: 150px; text-align: right; color: var(--encre2); overflow-wrap: anywhere; }
.tel-ligne--expected .tel-ligne__val { color: var(--ai6-bleu); font-weight: 600; }
.tel-ligne--heard .tel-ligne__val, .tel-ligne--unknown .tel-ligne__val { color: var(--ai6-attente-encre); font-style: italic; }
.tel-st { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; line-height: 1; font-weight: 700; }
.tel-st--done { background: var(--ai6-succes); color: var(--ai6-blanc); }
.tel-st--heard { background: var(--ai6-attente-vif); }
.tel-st--expected { border: 3px solid var(--ai6-bleu); background: var(--ai6-blanc); }
/* « à poser » is a grey outline: red means refusal or alert in the workstation, and fourteen
   red discs at the opening of a call read as fourteen errors (D3, Abdel 19/10). The solid red
   is kept for the one question that blocks. The red outline of the 19/10 middle list went
   with it (30/10): the drawer draws ○ as the mock-up's `10:1460` does. */
.tel-st--todo { border: 1.5px solid var(--ai6-muet-3); background: var(--ai6-blanc); }
.tel-st--unknown { border: 1.5px dashed var(--ai6-attente-trait); background: var(--ai6-blanc); color: var(--ai6-attente-encre); }
.tel-eur { margin-left: 6px; padding: 0 4px; border: 1px solid var(--ai6-bleu-trait-2); border-radius: 4px;
  font-size: var(--ai6-texte-mini); font-weight: 700; color: var(--ai6-bleu-fonce); }
.tel-src { display: inline-flex; margin-top: 2px; color: var(--ai6-muet-2); }
.tel-src--mot { font-size: var(--ai6-texte-mini); color: var(--encre3); }
.tel-legende { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--trait2); display: flex;
  flex-wrap: wrap; gap: 6px 12px; font-size: var(--ai6-texte-petit); color: var(--encre3); }
.tel-legende > span { display: inline-flex; align-items: center; gap: 5px; }
/* P3 — validated ahead (✓, waiting its turn), to review (!), the orange band that names
 * the question the validations wait for, and the middle column's « Entendu, à valider ». */
.tel-st--validated { background: var(--ai6-succes); color: var(--ai6-blanc); }
.tel-st--review { background: var(--ai6-attente); border: 1.5px solid var(--ai6-attente-trait); color: var(--ai6-attente-encre); }
.tel-ligne--review .tel-ligne__val { color: var(--ai6-attente-encre); }
.tel-st--blocking { background: var(--ai6-alerte); color: var(--ai6-blanc); box-shadow: 0 0 0 3px var(--ai6-alerte-fond); }
.tel-ligne--blocking, .tel-ligne--blocking .tel-ligne__val { color: var(--ai6-alerte); font-weight: 700; }
.tel-ligne--courante { background: var(--ai6-bleu-clair); box-shadow: inset 3px 0 0 var(--ai6-bleu); border-radius: 6px;
  margin: 0 -6px; padding: 2px 6px; }
.tel-ligne__sous { display: block; font-size: var(--ai6-texte-petit); color: var(--encre3); }
.tel-ligne__lib .tel-lien { text-align: left; font-size: inherit; color: inherit; text-decoration: none; }
.tel-ligne__lib .tel-lien:hover { color: var(--ai6-bleu); text-decoration: underline; }
/* The question that blocks, first in the « À demander » line (30/10): its count as a Puce,
   its words, its answers as chips — a segment of the line, no longer a band of its own. */
.tel-bande { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tel-bande .tel-chips { display: inline-flex; }
.tel-chip--discret { border-style: dashed; color: var(--ai6-muet); }
.tel-entendu-carte { gap: 10px; }
.tel-groupe-entendu { display: flex; flex-direction: column; gap: 8px; }
.tel-groupe-entendu__titre { font-weight: 700; font-size: var(--ai6-texte-dense); }
.tel-prop { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--ai6-attente-bord); background: var(--ai6-attente-pale);
  border-radius: 8px; padding: 10px 12px; }
.tel-prop--preciser { border-style: dashed; }
.tel-prop__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tel-prop__q { display: flex; flex-direction: column; min-width: 0; }
.tel-prop__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tel-prop__val { font-weight: 700; font-size: var(--ai6-texte-courant); overflow-wrap: anywhere; }
.tel-prop--preciser .tel-prop__val { color: var(--ai6-attente-encre); font-style: italic; }
/* **Le Champ** (maquette Price6+, composant `3:49`) : la ligne d'une carte de pièce, 32 px de
   haut — le libellé sur 112 px, le signe, la valeur, et les gestes s'il y en a. Le nom
   `.tel-champ` était pris (un libellé et sa saisie), d'où `.tel-rangee`. Cinq états, chacun
   avec son signe pour qu'il se lise sans la couleur :
   --demander  ○ de 10 px au trait muet, et la case pointillée `__demander` (un bouton : on
               clique pour saisir) en italique muet ;
   --entendu   la rangée teintée attente, ● plein de 10 px, la valeur en italique, ✓ et ✗
               (`.ai6-bouton-icone`) dans `__actions` — ✓ avant ✗, comme dessiné, bien que la
               règle du Bouton mette le refus à gauche : question posée au designer ;
   --valide    ✓ nu de 14 px (l'icône `check` du sprite dans `__signe`), la valeur en 600 ;
   --saisi     **identique à validé**, comme dessiné (`19:1599`) — seconde question au
               designer : sans couleur ni signe à elle, la saisie à la main ne se distingue pas ;
   --connu     la valeur en 400, suivie d'une Puce de marque (`.tel-tag`) qui dit d'où elle vient.
   Les états du parcours que la maquette n'a pas (attendu, inconnu, à revoir, bloquant) restent
   à `.tel-ligne`. Aucun écran ne porte encore cette rangée : la carte de pièce est l'affaire
   des lots d'écran. */
/* Le libellé sur une ligne, comme dessiné : la maquette tient dans 112 px avec ses mots courts
   (« Hauteur », « Support ») ; ceux du plan sont plus longs (« Bâtiment de plus de 10 ans »,
   « Hauteur sous plafond », 150 à 160 px en 12 px) et passaient sur deux lignes. La colonne
   prend 168 px, la même pour toutes les rangées : les valeurs restent alignées d'une rangée à
   l'autre, ce qu'une colonne à la largeur de son texte perdrait. Au-delà (« Jonction avec une
   autre pièce »), le libellé passe à la ligne plutôt que d'être coupé. */
.tel-rangee { display: grid; grid-template-columns: 168px 14px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 6px; border-radius: var(--ai6-rayon-petit); font-size: var(--ai6-texte-dense);
  line-height: 1.4; color: var(--ai6-encre); }
.tel-rangee__lib { font-size: var(--ai6-texte-petit); color: var(--ai6-muet); overflow-wrap: anywhere; }
.tel-rangee__signe { display: grid; place-items: center; width: 14px; height: 14px; }
.tel-rangee__val { min-width: 0; overflow-wrap: anywhere; }
.tel-rangee__val .tel-tag { margin-left: 6px; }
.tel-rangee__actions { display: flex; gap: 4px; }
/* La case « à demander » occupe toute la colonne de la valeur (`3:25`, « case vide » en flex 1) :
   à la largeur de son texte, elle se lisait comme une Puce de plus, pas comme un champ vide. */
.tel-rangee__demander { display: block; box-sizing: border-box; width: 100%; text-align: left; padding: 3px 8px; border: 1px dashed var(--ai6-carte-bord);
  border-radius: var(--ai6-rayon-mini); background: none; font-style: italic; color: var(--ai6-muet); cursor: pointer; }
.tel-rangee--demander .tel-rangee__signe::before, .tel-rangee--entendu .tel-rangee__signe::before {
  content: ""; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; }
.tel-rangee--demander .tel-rangee__signe::before { border: 1.5px solid var(--ai6-muet); }
.tel-rangee--entendu { background: var(--ai6-attente); }
.tel-rangee--entendu .tel-rangee__signe::before { background: var(--ai6-attente-encre); }
.tel-rangee--entendu .tel-rangee__val { font-style: italic; }
:is(.tel-rangee--valide, .tel-rangee--saisi) .tel-rangee__signe { color: var(--ai6-succes); }
:is(.tel-rangee--valide, .tel-rangee--saisi) .tel-rangee__signe .ai6-icone { stroke-width: calc(3 * 24 / 14); }
:is(.tel-rangee--valide, .tel-rangee--saisi) .tel-rangee__val { font-weight: 600; }
.tel-cite { margin: 0; font-size: var(--ai6-texte-dense); color: var(--encre2); font-style: italic; }
.tel-cite span { font-style: normal; color: var(--encre3); }
.tel-raisons { display: flex; flex-wrap: wrap; gap: 8px; }
/* Targets of 32 px at least (ANALYSE_4 §8). La taille du bouton dans l'appel est celle de la
   maquette Price6+ — 7 px 14 px, 13 px, interligne 1,4, soit 32 px de haut —, et c'est la
   taille par défaut de tout le panneau, pas seulement des boutons marqués `tel-petit` : le
   9 px 18 px en 14 px du reste du poste faisait 39 px, et deux tailles de bouton voisinaient
   sur une même carte. `tel-petit` reste pour les boutons rendus hors du panneau. */
.tel .ai6-bouton, .tel-vue .ai6-bouton, .ai6-bouton.tel-petit { min-height: 32px; padding: 7px 14px;
  font-size: var(--ai6-texte-dense); line-height: 1.4; }
.tel-repli__liste { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--ai6-texte-dense); }
@media (max-width: 980px) {
  .tel-grille { grid-template-columns: 1fr; }
  /* Too narrow for two columns: one under the other, and the page scrolls again — a column
     squeezed under 420 px would cut the fields of the cards. */
  .tel--ecran .tel-corps { height: auto; overflow: visible; }
  .tel-deux { grid-template-columns: 1fr; }
  .tel-conv, .tel-pieces { max-height: 80vh; }
  .tel-cote { position: static; max-height: none; }
}
@media (max-width: 600px) { .tel-duo { grid-template-columns: 1fr; } .tel-qtexte { font-size: var(--ai6-texte-grand); } }
@media (prefers-reduced-motion: reduce) { .tel-temoin, .tel-rec { animation: none; } .tel-vu i { transition: none; } }

/* ------------------------------------------------------------ Dictée
 *
 * Le panneau de dictée (`js/dictee.js`) reprend `.tel`, `.tel-carte` et la barre
 * repliée du téléphone ; ce qui suit est à lui seul. Préfixé `dic-`, pour la même
 * raison que `tel-` : le poste vit sous Bootstrap et Form.io. */
.dic-lance { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dic-barre { cursor: default; }
.dic-barre .ai6-bouton { padding: 4px 10px; font-size: var(--ai6-texte-petit); }
.dic-rouvrir { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.dic-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dic-ligne { border: 1px solid var(--ai6-ligne); border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; }
.dic-ligne--acceptee { border-color: var(--ai6-succes-encre); background: var(--ai6-succes-fond-3); }
.dic-ligne--rejetee { opacity: .55; }
.dic-haut { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--ai6-texte-courant); }
.dic-tag--new { color: var(--ai6-succes-encre); background: var(--ai6-succes-fond); }
.dic-tag--conflict { color: var(--ai6-alerte); background: var(--no-fond); }
.dic-tag--unclear { color: var(--ai6-attente-encre); background: var(--ai6-attente); }
.dic-tag--known { color: var(--encre2); background: var(--trait2); }
.dic-avant { margin: 0; font-size: var(--ai6-texte-dense); font-weight: 600; }
.dic-menus { display: flex; flex-wrap: wrap; gap: 10px; }
.dic-choix { display: flex; flex-direction: column; gap: 3px; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); max-width: 100%; }
.dic-choix select { padding: 6px 8px; border: 1px solid var(--ai6-champ-bord); border-radius: 4px; font: inherit;
  font-size: var(--ai6-texte-dense); max-width: 100%; }
.dic-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dic-ok { color: var(--ai6-succes-encre); font-weight: 600; font-size: var(--ai6-texte-dense); }
.dic-refus ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--ai6-texte-dense); color: var(--encre2); }
.dic-refus q { quotes: "« " " »"; }
.dic-texte { margin: 0; font-size: var(--ai6-texte-courant); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dic-texte mark { background: var(--ai6-bleu-moyen-2); color: inherit; border-radius: 2px; padding: 0 1px;
  text-decoration: underline dotted var(--ai6-muet-4); }
.dic-texte mark.tel-actif { background: var(--ai6-bleu-moyen); text-decoration: none; }
/* « Ce qui va changer » (29/09): a tick per line, the words heard under it. A
 * replacement is marked on its left edge — it overwrites what someone entered. */
.dic-groupe { margin: 14px 0 6px; font-size: var(--ai6-texte-petit); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ai6-muet); }
.dic-haut input[type="checkbox"] { margin: 2px 4px 0 0; flex: none; width: 16px; height: 16px; }
.dic-haut { cursor: pointer; }
.dic-ligne--remplace { border-left: 3px solid var(--ai6-alerte); }
.dic-ligne--connue { font-size: var(--ai6-texte-dense); color: var(--encre2); }
.dic-extrait { display: block; font-size: var(--ai6-texte-dense); color: var(--encre2); font-style: italic; quotes: "« " " »"; }
.dic-refus li { margin-bottom: 6px; }
.dic-refus li span { display: block; }
.dic-bandeau { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--ai6-succes-encre); background: var(--ai6-succes-fond-3); border-radius: 6px; padding: 8px 12px;
  font-weight: 600; color: var(--ai6-succes-encre); margin-bottom: 8px; }
.dic-corps .tel-champ textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .dic-actions .ai6-bouton { flex: 1; } }

/* Écran 8 — « Fin d'appel — relire avec l'assuré » (maquette `8:686`, 30/10). La gauche est
   un texte à lire à voix haute, bloc par bloc : titre 14/700 de marque, phrase 14 px, ce qui
   manque en italique muet 13 px ; son pied porte l'issue en Puces et un seul bouton plein.
   L'ancien écran 4 était une liste de cases à cocher (`.tel-ch`), retirée avec lui. */
.tel-bande-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 12px;
  background: var(--ai6-attente); border-radius: var(--ai6-rayon); font-size: var(--ai6-texte-dense); }
.tel-bande-fin strong { font-weight: 600; color: var(--ai6-bleu-fonce); }
.tel-bande-fin q { font-style: italic; font-size: var(--ai6-texte-courant); color: var(--ai6-encre); quotes: "« " " »"; }
.tel-bande-fin .tel-chips { margin-left: auto; }
.tel-relire { padding: 0; gap: 0; }
.tel-relire__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 8px; }
.tel-relire__entete .tel-note { margin-left: auto; }
.tel-relire__corps { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 12px; }
.tel-relire__bloc { display: flex; flex-direction: column; gap: 4px; }
.tel-relire__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* `.tel` devant, comme `.tel .tel-titre` : sous `.onglet-corps`, la règle des intertitres du poste
   en faisait un intertitre souligné d'un filet, 20 px de marge au-dessus. */
.tel .tel-relire__titre, .tel-relire__titre { margin: 0; padding: 0; border: 0; font-size: var(--ai6-texte-courant);
  font-weight: 700; line-height: 1.4; color: var(--ai6-bleu-fonce); }
.tel-relire__texte { margin: 0; font-size: var(--ai6-texte-courant); line-height: 1.4; color: var(--ai6-encre); }
.tel-relire__manque { margin: 0; font-size: var(--ai6-texte-dense); font-style: italic; color: var(--ai6-muet); }
.tel-relire .tel-rangee__val .tel-tag { margin-left: 6px; font-style: normal; }
/* ✓ et ✗ disent le choix fait (trois issues, Abdel 30/10) : enfoncés, cerclés de leur ton ;
   le mot « sera validée / écartée » le redit pour qui ne voit pas la couleur. */
.tel-relire .ai6-bouton-icone[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.tel-relire .ai6-bouton-icone--ok[aria-pressed="true"] { background: var(--ai6-succes-fond); }
.tel-relire .ai6-bouton-icone--alerte[aria-pressed="true"] { background: var(--ai6-alerte-fond); }
/* Le pied colle au bas de la fenêtre tant que la carte est à l'écran : le bouton se voit sans
   défiler à 1366 × 768 (démo du 19/10 : « Clore l'appel est caché en bas »). */
.tel-relire__pied { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 8px 12px 10px; background: var(--ai6-blanc); border-top: 1px solid var(--ai6-ligne);
  border-radius: 0 0 var(--ai6-rayon) var(--ai6-rayon); }
.tel-relire__avant { flex-basis: 100%; margin: 0; font-size: var(--ai6-texte-petit); font-style: italic;
  color: var(--ai6-attente-encre); }
.tel-relire__pousse { flex: 1 1 0; }
.tel-champ.tel-relire__rappel { flex-direction: row; align-items: center; gap: 6px; font-size: var(--ai6-texte-dense); }
.tel-relire__rappel input { padding: 4px 8px; }
.tel-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tel-issue__titre { font-size: var(--ai6-texte-dense); font-weight: 600; color: var(--ai6-encre-secondaire); }
/* L'issue en Puces (maquette) — des radios quand même, pour le clavier et les lecteurs d'écran. */
.tel-issue__puce { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ai6-rayon-pilule);
  background: var(--ai6-ligne-2); color: var(--ai6-encre-secondaire); font-size: var(--ai6-texte-petit); font-weight: 700;
  cursor: pointer; }
.tel-issue__puce input { margin: 0; accent-color: var(--ai6-bleu); }
.tel-issue__puce:has(input:checked) { background: var(--ai6-bleu-clair); color: var(--ai6-bleu-fonce); }
.tel-issue__puce:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.tel-issue__puce:has(input:focus-visible) { outline: 2px solid var(--ai6-bleu); outline-offset: 1px; }
/* Consignes et résumé (Q3) : gardés contre la maquette, repliés, leur compte dans le titre. */
.tel-repli-fin > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.tel-repli-fin > summary::-webkit-details-marker { display: none; }
.tel-repli-fin[open] > summary { margin-bottom: 8px; }
.tel-repli-fin[open] > summary .tel-chevron { transform: rotate(90deg); }
.tel-radio { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--ai6-texte-courant); }
.tel-montant { display: flex; flex-direction: column; gap: 2px; background: var(--ai6-bleu-clair-2); border-radius: 8px; padding: 10px 12px; }
.tel-montant strong { font-size: var(--ai6-texte-titre); }

/* « Résumé de la conversation » (P6b): one sentence per block, the block in progress blue. */
.tel-rs { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: var(--ai6-texte-dense); line-height: 1.45; }
.tel-rs__bloc { font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--encre2); }
.tel-rs--cours .tel-rs__bloc { color: var(--ai6-bleu); }
.tel-resume-appel { width: 100%; font: inherit; font-size: var(--ai6-texte-courant); line-height: 1.5; padding: 8px; box-sizing: border-box; }

/* What the last call added, on its tab (P6c, screen 8): a green « +N ». */
.tel-plus { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--ai6-succes-4); color: var(--ai6-blanc); font-size: var(--ai6-texte-mini);
  font-weight: 700; vertical-align: middle; }
/* The Pricing's help icon: where a line item's answers come from — shown on hover and on
 * focus only, so the table reads as before. */
.aide-src { display: inline-block; margin-left: 4px; color: var(--encre2); font-size: var(--ai6-texte-dense); cursor: help;
  opacity: 0; transition: opacity .15s; }
.bloc-poste h3:hover .aide-src, .aide-src:focus { opacity: 1; }

/* P4 — le contexte et les médias pendant l'appel (écrans 1, 2 et 5). */
.tel-kv { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: var(--ai6-texte-dense); }
.tel-kv dt { color: var(--encre2); }
.tel-kv dd { margin: 0; font-weight: 600; }
.tel-vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tel-vignette { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--ai6-bleu-fond-3); cursor: zoom-in;
  height: 112px; }
.tel-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La pastille des entendues à valider, hors de l'onglet Price6+ : une forme et un chiffre,
 * dits en toutes lettres aux lecteurs d'écran (`tel-lu`). */
.tel-pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  margin-left: 6px; padding: 2px 8px; border-radius: var(--ai6-rayon-pilule); background: var(--ai6-attente);
  color: var(--ai6-attente-encre); font-size: var(--ai6-texte-petit); font-weight: 700; line-height: 1.4; vertical-align: middle; }

/* P5 — reprendre un appel passé (écran 3). */
.tel-reprise { border-color: var(--ai6-bleu-trait); }
.tel-reprise p { margin: 0; }
.tel-passes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tel-passe { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; border: 1px solid var(--ai6-ligne);
  border-radius: 8px; padding: 12px 14px; }
.tel-passe > .tel-qhaut { align-self: stretch; }
.tel-passe p { margin: 0; }

/* Lot b — les icônes dans leurs contextes. Le check d'un disque d'état de « L'entretien » est
 * plus petit et plus appuyé que celui d'un bouton : il tient dans 14 px, sur fond plein. */
.tel-st .ai6-icone { width: 10px; height: 10px; --ai6-icone-trait: 3; }

/* 02/10 — plus de barre d'actions au-dessus des onglets : l'onglet Price6+, en tête, est l'entrée
 * de l'appel et porte son état. La barre d'onglets colle donc en haut de la page (sous l'en-tête
 * de poste.html quand il colle, --haut-actions), y compris dans la cellule où elle était fixe :
 * c'est le seul endroit où l'appel en cours se lit depuis les autres onglets. */
#poste > nav.onglets:not(.sous) { position: sticky; top: var(--haut-actions, 0px); z-index: 3; }
/* Price6+ à la suite des onglets, collé à « Questions » (Abdel, 02/10 : pas de grand vide) ;
 * à droite de la barre, seulement les deux boutons qui replient tuiles et colonne Décision. */
.onglets-vue { margin-left: auto; display: flex; gap: 2px; align-items: center; }
/* Le réglage des onglets (Abdel, 19/10) : une liste à cocher sous l'icône, au bout de la barre. */
#poste > nav.onglets { position: relative; }
.onglets-reglage { position: absolute; right: 8px; top: calc(100% + 4px); z-index: 30; min-width: 250px;
  display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne); border-radius: var(--ai6-rayon); box-shadow: var(--ai6-ombre); }
.onglets-reglage__titre { margin: 0 0 6px; font-size: var(--ai6-texte-petit); font-weight: 600;
  text-transform: uppercase; color: var(--ai6-muet); }
#poste > nav.onglets .onglets-reglage button { display: flex; align-items: center; gap: 8px; width: 100%;
  justify-content: flex-start; min-height: 34px; padding: 4px 8px; border-radius: 6px; text-align: left; }
.onglets-reglage button[aria-pressed="false"] { color: var(--ai6-muet); }
.onglets-reglage__vide { display: inline-block; width: 16px; }
#poste > nav.onglets .onglets-vue button { min-width: 32px; min-height: 32px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; }
.onglets-vue [data-replier="bandeau"][aria-pressed="true"] .ai6-icone { transform: rotate(180deg); }
.onglets-vue [aria-pressed="true"] { color: var(--ai6-bleu); }
:root[data-replie-bandeau] .ai6-bandeau-formio { display: none; }
:root[data-replie-colonne] .ai6-corps-formio > .col-md-3 { display: none; }
:root[data-replie-colonne] .ai6-corps-formio > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
.onglets button > .ai6-icone:first-child { margin-right: 2px; }
.tel-onglet-reprendre { display: inline-flex; color: var(--ai6-attente-encre); }
.ai6-lu-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }
#poste > nav.onglets [data-telephone] .ai6-icone { margin-right: 2px; }
#poste > nav.onglets [data-telephone]:disabled { opacity: .55; cursor: not-allowed; }
/* L'onglet Price6+ vu d'ailleurs (variante `10:1384`, 30/10) : la durée en 600 et dans la couleur
   de l'état — verte en ligne, ambre en pause, rouge sur une alerte —, l'alerte dans une Puce. */
.tel-onglet-duree { font-weight: 600; color: var(--ai6-succes); font-variant-numeric: tabular-nums; }
.tel-onglet-duree--pause { color: var(--ai6-attente-encre); display: inline-flex; align-items: center; gap: 4px; }
.tel-onglet-duree--pause .ai6-icone { width: 12px; height: 12px; }
.tel-onglet-duree--alerte { color: var(--ai6-alerte); }
.tel-onglet-fin { font-weight: 600; color: var(--ai6-muet); }
.onglets button .tel-tag { margin-left: 6px; vertical-align: middle; }
.tel-onglet-alerte .ai6-icone { width: 12px; height: 12px; vertical-align: -1px; }
/* L'onglet actif souligné de 3 px, plus en pastille pleine (variante `10:1384`, Abdel 30/10) :
   le libellé en 600 de marque, un trait de marque dessous ; les autres en 400 secondaire. **La
   barre du poste seulement** (`#poste`, enfants directs) : les replis et le réglage en bout de
   barre gardent leur dessin, la sous-barre l'avait déjà. La barre perd son fond bleu clair pour
   le blanc de la maquette ; un survol reste dessiné, en fond seul. */
#poste > nav.onglets:not(.sous) { background: var(--ai6-blanc); border-bottom: 1px solid var(--ai6-carte-bord);
  padding: 0 16px; align-items: center; }
#poste > nav.onglets:not(.sous) > button { border-radius: 0; padding: 10px 12px 7px; border-bottom: 3px solid transparent;
  font-weight: 400; color: var(--ai6-encre-secondaire); display: inline-flex; align-items: center; gap: 6px; }
#poste > nav.onglets:not(.sous) > button:hover { background: var(--ai6-survol); }
#poste > nav.onglets:not(.sous) > button.actif { background: none; box-shadow: none; font-weight: 600;
  color: var(--ai6-bleu); border-bottom-color: var(--ai6-bleu); }
#poste > nav.onglets:not(.sous) > button > .ai6-icone:first-child { margin-right: 0; }
/* L'écart est le `gap` du bouton : les marges propres au point, aux Puces et à la pastille le
   doublaient. */
#poste > nav.onglets:not(.sous) > button :is(.tel-point, .tel-tag, .tel-pastille) { margin: 0; }
/* **Price6+ ne passe plus à la ligne** (RESTE.md, point 2). À 1366, la colonne Décision réduit
   la barre à 983 px — sur tous les onglets sauf Price6+ : sept onglets, Price6+ et les trois
   boutons de vue n'y tenaient pas, la barre passait sur deux lignes (77 px, avant même
   l'appel), et en dernier, c'est l'onglet de l'appel — celui qui dit qu'un assuré attend au
   bout du fil — qui partait sous les autres. Une ligne, donc : les libellés des **autres**
   onglets se resserrent en points de suspension (le libellé entier reste en `title`, et
   entier pour les lecteurs d'écran), l'onglet de l'appel et les boutons de vue gardent leur
   largeur. Ni défilement horizontal (il aurait caché des onglets, et rogné la liste du
   réglage, qui déborde sous la barre), ni icônes retirées (elles ne rendent qu'une vingtaine
   de pixels chacune, et l'alerte de l'appel s'écrit en toutes lettres).
   Sous 1024 px de fenêtre la barre repasse à la ligne, comme avant : resserrés jusque-là,
   les libellés ne se liraient plus du tout. */
@media (min-width: 1024px) {
  #poste > nav.onglets:not(.sous) { flex-wrap: nowrap; }
  #poste > nav.onglets:not(.sous) > button[data-tab] { min-width: 0; }
  #poste > nav.onglets:not(.sous) > button[data-tab] > .onglet-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #poste > nav.onglets:not(.sous) > :is([data-telephone], .onglets-vue) { flex-shrink: 0; }
  /* Serrée (`data-serree`, posé par `rendrePoste` quand un libellé serait coupé) : les autres
     onglets laissent d'abord leur icône et 4 px de marge de chaque côté — environ 200 px rendus
     à 983, assez pour Price6+ en ligne avec sa durée et sa pastille sans couper un mot. */
  #poste > nav.onglets[data-serree] > button[data-tab] { padding-left: 8px; padding-right: 8px; }
  #poste > nav.onglets[data-serree] > button[data-tab] > .ai6-icone { display: none; }
  /* À la ligne (`data-ligne`, posé par `rendrePoste` quand un libellé coupé ne garderait pas
     quatre lettres) : les libellés entiers, sur deux lignes, plutôt que des « Co… ». */
  #poste > nav.onglets[data-ligne]:not(.sous) { flex-wrap: wrap; }
  #poste > nav.onglets[data-ligne]:not(.sous) > button[data-tab] { min-width: auto; }
  #poste > nav.onglets[data-ligne]:not(.sous) > button[data-tab] > .onglet-lib { overflow: visible; text-overflow: clip; }
}
/* **Price6+ en tête** (`?onglet_appel=debut`, attribut `onglet_appel` — Abdel, 30/10 : « pour
   Groupama, garde ce que Sébastien a mis dans la maquette ») : le dessin de la maquette
   (variante `10:1384`, barre de l'écran 3 `5:13`). L'icône téléphone dans la couleur de marque ;
   les points dans l'**encre** de leur état et sans halo — la maquette dessine #2f6b3f, #8a6a1f,
   #9b3226, exactement nos --ai6-succes, --ai6-attente-encre, --ai6-alerte — là où l'onglet du
   30/10 prend les teintes vives ; « à reprendre » écrit, derrière un **anneau** ambre.
   En dernier (le défaut), rien ne change : les cellules IMH gardent l'onglet qu'elles ont. */
#poste > nav.onglets > .tel-onglet-tete > .ai6-icone:first-child { color: var(--ai6-bleu); }
.tel-onglet-tete .tel-point { box-shadow: none; }
.tel-onglet-tete .tel-point:not([class*="tel-point--"]) { background: var(--ai6-succes); }
.tel-onglet-tete .tel-point--pause { background: var(--ai6-attente-encre); }
.tel-onglet-tete .tel-point--reprendre { background: none; box-shadow: inset 0 0 0 1.5px var(--ai6-attente-encre); }
.tel-onglet-tete .tel-onglet-reprendre { font-weight: 600; }
/* « Dicter » et « coller un texte », dans l'onglet Price6+, au-dessus du panneau d'appel. */
.poste-outils { display: flex; justify-content: flex-end; align-items: center; gap: var(--ai6-espace-2);
  padding: var(--ai6-espace-3) var(--ai6-espace-6) 0; }

/* Le logo d'une marque devant le titre de l'en-tête (poste.html, /ui/) : deux jetons du thème,
 * l'image et sa largeur à 24 px de haut. Sans thème, le pseudo-élément n'existe pas. */
:root[data-theme] header h1::before {
  content: ""; display: inline-block; vertical-align: middle; height: 24px;
  width: var(--ai6-logo-largeur, 0px); margin-right: min(12px, var(--ai6-logo-largeur, 0px));
  background: var(--ai6-logo, none) left center / contain no-repeat;
}


/* ===================================================================================
 * R17 — Dommages › Lieux, Origines, Postes et le bien mobilier (maquette v2, validée par
 * Abdel le 02/10 : propositions/r17/maquette_v2.html). Préfixe `sai-` : ces règles ne
 * touchent rien d'autre du poste. Les boutons suivent les rôles de 05_BOUTONS §5 (principal,
 * secondaire à contour, tertiaire, danger sans aplat), cibles de 32 px au moins ; le lot e
 * les rangera dans `.ai6-bouton`.
 * =================================================================================== */
.sai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 0 16px; border: 1px solid var(--ai6-bleu); border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-bleu); color: var(--ai6-sur-bleu); font-size: var(--ai6-texte-courant); font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.sai-btn:hover { background: color-mix(in srgb, var(--ai6-bleu) 85%, var(--ai6-bleu-fonce)); }
.sai-btn--contour { background: var(--ai6-blanc); color: var(--ai6-bleu); }
.sai-btn--contour:hover { background: var(--ai6-bleu-clair); }
.sai-btn--tertiaire { background: transparent; border-color: transparent; color: var(--ai6-bleu); padding: 0 8px; }
.sai-btn--tertiaire:hover { background: var(--ai6-bleu-clair); }
.sai-btn--danger { color: var(--ai6-alerte); }
.sai-btn--danger:hover { background: var(--ai6-alerte-fond); color: var(--ai6-alerte); }
.sai-btn--compact { min-height: 32px; font-size: var(--ai6-texte-dense); }
.sai-btn--bloc { display: flex; width: 100%; }
.sai-btn:disabled { background: var(--ai6-bleu-clair); border-color: transparent; color: var(--ai6-encre-secondaire);
  cursor: not-allowed; }
#poste :is(.sai-btn, .sai-deplier, .sai-segment input, .sai-aide summary, .sai-pourquoi summary,
  details.ouvertures > summary):focus-visible { outline: 2px solid var(--ai6-focus); outline-offset: 2px; }

/* La barre de la liste : titre, compte, ajout — en haut, à sa place. */
.sai-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.sai-barre h3 { margin: 0; font-size: var(--ai6-texte-titre); color: var(--ai6-bleu-fonce); }
.sai-barre__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.sai-compte, .sai-puce { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: var(--ai6-texte-petit); font-weight: 600; white-space: nowrap; }
.sai-compte { background: var(--ai6-bleu-clair); color: var(--ai6-bleu-fonce); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sai-puce { background: var(--ai6-ligne); color: var(--ai6-encre-secondaire); }
.sai-puce--bleu { background: var(--ai6-bleu-clair); color: var(--ai6-bleu-fonce); }
.sai-puce--attente { background: var(--ai6-attente); color: var(--ai6-attente-encre); }
.sai-puce--succes { background: var(--ai6-succes-fond); color: var(--ai6-succes-encre); }
.sai-aide { font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); margin-bottom: 12px; }
.sai-aide summary, .sai-pourquoi summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  cursor: pointer; color: var(--ai6-bleu); font-weight: 600; list-style: none; }
.sai-aide summary::-webkit-details-marker, .sai-pourquoi summary::-webkit-details-marker { display: none; }
.sai-aide[open] p { margin: 4px 0 0; max-width: 95ch; }
.sai-muet { color: var(--ai6-encre-secondaire); }
.sai-note { margin: 0; font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }

/* Une carte par pièce, par origine : l'en-tête dit ce qu'elle est et ce que la supprimer emporte. */
.sai-carte { border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon); background: var(--ai6-blanc);
  margin-bottom: 14px; }
.sai-carte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--ai6-ligne); }
.sai-lettre { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--ai6-bleu); color: var(--ai6-sur-bleu); font-weight: 700; font-size: var(--ai6-texte-dense); }
.sai-carte__titre { margin: 0; font-size: var(--ai6-texte-titre); font-weight: 700; }
.sai-carte__actions { margin-left: auto; }
.sai-carte__corps { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.sai-carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px;
  border-top: 1px solid var(--ai6-ligne); font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); }
.sai-carte__pied .sai-btn { margin-left: auto; }
.sai-sous-titre { margin: 0; font-size: var(--ai6-texte-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ai6-encre-secondaire); }

/* Les champs : libellé au-dessus, grille qui ne tronque rien. */
.sai-champs { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.sai-champs--dims { grid-template-columns: repeat(auto-fill, minmax(9rem, 12rem)); }
.sai-champs .sai-large { grid-column: span 2; }
#poste .sai-champs .champ, .sai-mobilier .champ { gap: 4px; min-width: 0; }
#poste .sai-champs .champ > span, .sai-mobilier .champ > span { font-size: var(--ai6-texte-petit); font-weight: 700;
  color: var(--ai6-encre-secondaire); }
#poste .sai-champs .champ em { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
#poste :is(.sai-champs, .sai-mobilier, .sai-prix) :is(input:not([type=checkbox]):not([type=radio]), select),
.sai-champ-seul { min-height: 36px; width: 100%; padding: 0 10px; border: 1px solid var(--ai6-muet);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); color: var(--ai6-encre); font-size: var(--ai6-texte-courant); }
#poste .sai-champs .ouv-type input { width: 100%; }
.sai-invalide { border-color: var(--ai6-alerte) !important; }
.sai-message-champ { display: flex; gap: 6px; align-items: flex-start; font-size: var(--ai6-texte-petit); color: var(--ai6-alerte);
  font-weight: 600; }
.sai-carte details.ouvertures > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  list-style: none; }
.sai-carte details.ouvertures > summary::-webkit-details-marker { display: none; }
.sai-carte details.ouvertures > summary .ai6-icone { transition: transform .15s; }
.sai-carte details.ouvertures[open] > summary .ai6-icone { transform: rotate(90deg); }
.sai-carte details.ouvertures .sai-champs { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

/* Origines : les cinq faits en segments ; « À établir » coché se dessine en creux. */
.sai-faits { border: 1px solid var(--ai6-ligne); border-radius: var(--ai6-rayon-petit); }
.sai-fait { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  border: 0; margin: 0; padding: 8px 12px; min-width: 0; }
.sai-fait + .sai-fait { border-top: 1px solid var(--ai6-ligne); }
.sai-fait__nom small { display: block; font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
.sai-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ai6-muet); border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-blanc); }
.sai-segment label { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  font-size: var(--ai6-texte-dense); font-weight: 600; color: var(--ai6-encre-secondaire); cursor: pointer; }
.sai-segment label + label { border-left: 1px solid var(--ai6-champ-bord); }
.sai-segment label:first-child { border-radius: 5px 0 0 5px; }
.sai-segment label:last-child { border-radius: 0 5px 5px 0; }
.sai-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sai-segment label:has(input:checked) { background: var(--ai6-bleu); color: var(--ai6-sur-bleu); }
.sai-segment label.sai-a-etablir:has(input:checked) { background: var(--ai6-attente-pale); color: var(--ai6-attente-encre);
  outline: 1px dashed var(--ai6-attente-trait); outline-offset: -4px; }
.sai-segment label:has(input:focus-visible) { outline: 2px solid var(--ai6-focus); outline-offset: 2px; z-index: 1; }

/* Postes : un tbody par pièce, une ligne lue par poste, un tiroir d'édition. */
.sai-table-cadre { border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon-petit); overflow-x: auto;
  margin-bottom: 16px; }
.sai-postes { width: 100%; border-collapse: collapse; font-size: var(--ai6-texte-dense); }
.sai-postes thead th { text-align: left; font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre-secondaire);
  padding: 8px 10px; background: var(--ai6-bleu-fond); white-space: nowrap; }
.sai-postes .sai-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sai-postes tbody th[scope=rowgroup] { text-align: left; padding: 14px 10px 6px; font-weight: 700; font-size: var(--ai6-texte-courant);
  background: var(--ai6-blanc); border-top: 1px solid var(--ai6-bleu-moyen); }
.sai-postes tbody:first-of-type th[scope=rowgroup] { border-top: 0; }
.sai-postes th[scope=rowgroup] .sai-lettre { width: 22px; height: 22px; font-size: var(--ai6-texte-petit); margin-right: 6px; vertical-align: -5px; }
.sai-details { font-weight: 600; color: var(--ai6-encre-secondaire); font-size: var(--ai6-texte-dense); }
.sai-postes td { padding: 6px 10px; border-top: 1px solid var(--ai6-ligne); vertical-align: middle; }
.sai-postes .sai-col-poste { width: 40%; }
.sai-postes .sai-col-actions { width: 1%; white-space: nowrap; text-align: right; padding-right: 6px; }
.sai-lecture:hover td { background: var(--ai6-bleu-fond-2); }
.sai-lecture.sai-ouverte td { background: var(--ai6-bleu-clair); border-top-color: var(--ai6-bleu-moyen); }
.sai-deplier { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 40px; padding: 4px 6px 4px 2px;
  border: 0; border-radius: var(--ai6-rayon-petit); background: none; text-align: left; cursor: pointer; }
.sai-deplier:hover { background: color-mix(in srgb, var(--ai6-bleu-clair) 70%, transparent); }
.sai-deplier > .ai6-icone { margin-top: 3px; color: var(--ai6-bleu); transition: transform .15s; }
.sai-deplier[aria-expanded=true] > .ai6-icone { transform: rotate(90deg); }
.sai-deplier b { display: block; font-size: var(--ai6-texte-courant); }
.sai-deplier small { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; color: var(--ai6-encre-secondaire);
  font-size: var(--ai6-texte-petit); }
.sai-etiq { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: var(--ai6-texte-mini); font-weight: 700; line-height: 18px; }
.sai-etiq--rev { background: var(--ai6-succes-fond); color: var(--ai6-succes-encre); }
.sai-etiq--ann { background: var(--ai6-attente); color: var(--ai6-attente-encre); }
.sai-tiroir > td { background: var(--ai6-bleu-fond-2); padding: 4px 14px 14px 36px; box-shadow: inset 3px 0 0 var(--ai6-bleu); }
.sai-groupe { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 16px; padding: 12px 0; }
.sai-groupe + .sai-groupe { border-top: 1px dashed var(--ai6-bleu-moyen); }
.sai-groupe > .sai-sous-titre { padding-top: 22px; }
.sai-groupe--prix > .sai-champs { display: block; }
.sai-tiroir__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px;
  border-top: 1px dashed var(--ai6-bleu-moyen); font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
#poste .sai-champs .bascule { min-height: 36px; font-size: var(--ai6-texte-courant); gap: 8px; }
#poste .sai-champs .bascule input { width: 18px; height: 18px; margin: 0; accent-color: var(--ai6-bleu); }
#poste .sai-champs .bascule > span { color: var(--ai6-encre); font-size: var(--ai6-texte-courant); font-weight: 400; }
.sai-mobilier__tete h4 { font-weight: 700; }

/* États vides : un disque, une phrase, l'action. */
.sai-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 16px;
  border: 1px dashed var(--ai6-bleu-trait); border-radius: var(--ai6-rayon); background: var(--ai6-bleu-fond-2);
  margin-bottom: 16px; }
.sai-vide h4 { margin: 0; font-size: var(--ai6-texte-titre); }
.sai-vide p { margin: 0; color: var(--ai6-encre-secondaire); max-width: 60ch; }
.sai-vide__boutons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.sai-rond { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ai6-icone-vide-fond); color: var(--ai6-icone-vide-couleur); }

/* Le bien mobilier : une phrase, un champ, un bouton plein, des cartes de prix. */
.sai-mobilier { border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon); background: var(--ai6-blanc);
  padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.sai-mobilier__tete { display: flex; gap: 12px; align-items: flex-start; }
.sai-mobilier__tete h4 { margin: 0; font-size: var(--ai6-texte-titre); color: var(--ai6-bleu-fonce); }
.sai-mobilier__tete p { margin: 0; color: var(--ai6-encre-secondaire); }
.sai-mobilier__saisie { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.sai-mobilier__saisie .champ { flex: 1 1 22rem; display: flex; flex-direction: column; }
.sai-mobilier__saisie .sai-champ-court, .sai-cat-ligne .sai-champ-court { flex: 0 1 20rem; }
.sai-message { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px;
  border-radius: var(--ai6-rayon-petit); font-size: var(--ai6-texte-dense); }
.sai-message--info { background: var(--ai6-info-fond); color: var(--ai6-bleu-fonce); }
.sai-message--attente { background: var(--ai6-attente); color: var(--ai6-attente-encre); }
.sai-resultats__tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; justify-content: space-between; }
.sai-resultats__tete > p { margin: 0; font-weight: 700; }
.sai-cat-ligne { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.sai-cartes-prix { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.sai-carte-prix { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--ai6-bleu-moyen);
  border-radius: var(--ai6-rayon); background: var(--ai6-blanc); }
.sai-carte-prix p { margin: 0; }
.sai-carte-prix--bareme { border-style: dashed; border-color: var(--ai6-bleu-trait); background: var(--ai6-bleu-fond-2); }
.sai-carte-prix__haut { display: flex; gap: 10px; align-items: flex-start; }
.sai-carte-prix .vignette { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: var(--ai6-rayon-petit); }
.sai-vignette-vide { display: grid; place-items: center; background: var(--ai6-bleu-fond); color: var(--ai6-bleu-trait-2); }
.sai-carte-prix__nom { font-weight: 600; line-height: 1.35; }
.sai-carte-prix__prix { font-size: var(--ai6-texte-grand); font-weight: 700; font-variant-numeric: tabular-nums; }
.sai-carte-prix__prix small { font-size: var(--ai6-texte-petit); font-weight: 600; color: var(--ai6-encre-secondaire); }
.sai-carte-prix__source { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
.sai-carte-prix .sai-btn { margin-top: auto; }
.sai-pourquoi { font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); }
.sai-pourquoi[open] > div { margin-top: 4px; padding: 10px 12px; border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-ligne-2); display: grid; gap: 6px; max-width: 95ch; }
.sai-pourquoi[open] > div p { margin: 0; }
.sai-prix { display: flex; flex-direction: column; gap: 10px; }
.sai-prix__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sai-prix__ligne .sai-champ-seul { flex: 1 1 18rem; width: auto; }
.sai-prix__phrase { margin: 0; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.sai-tourne { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: tel-tourne .8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .sai-tourne { animation: none; } }
@media (max-width: 760px) {
  .sai-groupe { grid-template-columns: 1fr; }
  .sai-groupe > .sai-sous-titre { padding-top: 0; }
  .sai-champs .sai-large { grid-column: auto; }
  .sai-postes { min-width: 760px; }
}

/* ===================================================================================
 * Global — l'onglet Contrat en sections (maquette propositions/global/maquette_contrat.html,
 * validée par Abdel le 02/10). Même langage que R17 : section-carte titrée avec icône,
 * groupes à sous-titre et filet pointillé, cases en tuiles, montants à droite avec « € ».
 * =================================================================================== */
#poste .onglet-corps { container-type: inline-size; }
.sai-section { border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon); background: var(--ai6-blanc);
  margin-bottom: 16px; }
.sai-section__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px;
  background: var(--ai6-bleu-fond-2); border-bottom: 1px solid var(--ai6-bleu-moyen);
  border-radius: var(--ai6-rayon) var(--ai6-rayon) 0 0; }
.sai-section__icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--ai6-bleu-clair); color: var(--ai6-bleu); }
#poste .sai-section__tete h3 { margin: 0; padding: 0; border: 0; font-size: var(--ai6-texte-titre); font-weight: 700; line-height: 1.25;
  color: var(--ai6-bleu-fonce); text-transform: none; letter-spacing: 0; }
#poste .sai-section__tete h3 { flex: 1; min-width: 0; }
.sai-section__bascule { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 32px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sai-section__bascule > .ai6-icone { width: 18px; height: 18px; color: var(--ai6-bleu); transition: transform .15s; }
.sai-section__bascule[aria-expanded=false] > .ai6-icone { transform: rotate(180deg); }
.sai-section__bascule:focus-visible { outline: 2px solid var(--ai6-focus); outline-offset: 4px; border-radius: 4px; }
.sai-section--fermee .sai-section__tete { border-bottom: 0; border-radius: var(--ai6-rayon); }
#poste .sai-section__tete h3 em { font-style: normal; font-weight: 400; font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); }
.sai-section__corps { padding: 4px 16px 8px; }
.sai-groupe--seul { grid-template-columns: minmax(0, 1fr); }
.sai-section .sai-groupe { align-items: start; }
.sai-pile { display: grid; gap: 12px; min-width: 0; }
@container (max-width: 44rem) {
  .sai-groupe { grid-template-columns: 1fr; }
  .sai-groupe > .sai-sous-titre { padding-top: 0; }
  .sai-champs .sai-large { grid-column: auto; }
}
/* Les cases en tuiles cochables ; celle qui lève un plafond vit sous lui, en pointillé. */
.sai-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px; }
#poste :is(.sai-cases, .sai-section .champ) .bascule { min-height: 36px; padding: 0 12px; gap: 8px;
  border: 1px solid var(--ai6-muet); border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc);
  font-size: var(--ai6-texte-courant); color: var(--ai6-encre); }
#poste .sai-section .champ .bascule { min-height: 32px; border-style: dashed; font-size: var(--ai6-texte-dense); }
#poste :is(.sai-cases, .sai-section .champ) .bascule:hover { background: var(--ai6-bleu-clair); }
#poste :is(.sai-cases, .sai-section .champ) .bascule:has(input:checked) { background: var(--ai6-bleu-clair);
  border: 1px solid var(--ai6-bleu); color: var(--ai6-bleu-fonce); font-weight: 600; }
#poste :is(.sai-cases, .sai-section .champ) .bascule input { width: 18px; height: 18px; margin: 0; accent-color: var(--ai6-bleu); }
/* Montants : l'unité en suffixe, les chiffres à droite. */
.sai-unite { position: relative; display: block; }
#poste .sai-champs .sai-unite input { padding-right: 32px; }
.sai-unite::after { content: attr(data-u); position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ai6-encre-secondaire); font-size: var(--ai6-texte-dense); pointer-events: none; }
#poste .sai-champs input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
/* « À préciser » : l'option vide que choix() ajoute (data-vide) se dessine en creux ; les vides
 * légitimes (« Selon le contrat », « Selon le lieu du sinistre ») ne la portent pas. */
#poste select:has(option[data-vide]:checked) { border-style: dashed; border-color: var(--ai6-attente-trait);
  background: var(--ai6-attente-pale); color: var(--ai6-attente-encre); font-style: italic; }
/* Un champ figé (version désignée par la disposition particulière) se lit comme une valeur. */
#poste .sai-champs :is(select, input):disabled { appearance: none; border-color: transparent;
  background: var(--ai6-bleu-fond); color: var(--ai6-encre); opacity: 1; cursor: default; }

/* Les sous-onglets se voient (Abdel, 02/10 : « Lieux, Origines, Postes, je ne les vois pas
 * bien ») : 14 px, 40 px de haut, une icône à 16 px, l'actif souligné de 3 px. */
#poste nav.onglets.sous { padding: 0 14px; gap: 4px; }
#poste nav.onglets.sous button { font-size: var(--ai6-texte-courant); font-weight: 600; min-height: 42px; padding: 8px 16px;
  color: var(--ai6-encre-secondaire); border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
#poste nav.onglets.sous button .ai6-icone { width: 16px; height: 16px; }
#poste nav.onglets.sous button.actif { color: var(--ai6-bleu); font-weight: 700; border-bottom-color: var(--ai6-bleu); }

/* Dispositions particulières au même gabarit (Abdel, 02/10). */
.sai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 8px; }
.sai-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 10px; padding: 12px 0; }
.sai-tuile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-bleu-fond-2); min-width: 0; }
.sai-tuile b { font-size: var(--ai6-texte-titre); font-weight: 700; color: var(--ai6-encre); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sai-tuile span { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
.sai-liste { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--ai6-texte-courant); }
.sai-section .clauses { margin: 8px 0; }
.sai-section .sai-note { margin: 8px 0; display: flex; gap: 6px; align-items: flex-start; }
.sai-section .sai-message { margin: 8px 0; }
.sai-sites td { vertical-align: middle; }
.sai-sites input:not([type=checkbox]), .sai-sites select { min-height: 32px; border: 1px solid var(--ai6-muet);
  border-radius: var(--ai6-rayon-petit); width: 100%; min-width: 6rem; }

/* ===================================================================================
 * Passe de style, sans balisage (Abdel, 02/10 : « le chiffrage, il faut le travailler »).
 * La refonte du Chiffrage passe par sa maquette (propositions/chiffrage/) ; ceci ne change
 * que l'habillage de ce qui existe, sur tous les onglets pour les notes et les fichiers.
 * =================================================================================== */
/* Les notes d'onglet : du texte d'aide, pas le plus gros texte de l'écran (IDEES G3). */
#poste .onglet-corps p.note { font-size: var(--ai6-texte-dense); line-height: 1.5; color: var(--ai6-encre-secondaire); max-width: 95ch; }
#poste .onglet-corps p.note b { color: var(--ai6-encre); }
/* Le champ fichier natif (« Choose Files ») prend le bouton à contour du poste. */
#poste input[type=file] { font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); }
#poste input[type=file]::file-selector-button { margin-right: 10px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--ai6-bleu); border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc);
  color: var(--ai6-bleu); font: inherit; font-weight: 600; cursor: pointer; }
#poste input[type=file]::file-selector-button:hover { background: var(--ai6-bleu-clair); }
/* Les intertitres du Chiffrage se voient : 16 px, encre foncée, un filet sous le titre. */
#poste[data-onglet="chiffrage"] .onglet-corps > h3, #poste[data-onglet="chiffrage"] .onglet-corps section > h3 {
  font-size: var(--ai6-texte-titre); color: var(--ai6-bleu-fonce); margin: 28px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--ai6-bleu-moyen); }
/* Chaque poste en carte : son titre, sa décision, sa photo. */
#poste[data-onglet="chiffrage"] .bloc-poste { border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon);
  background: var(--ai6-blanc); padding: 12px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#poste[data-onglet="chiffrage"] .bloc-poste > h3 { margin: 0; padding: 0; border: 0; font-size: var(--ai6-texte-courant); color: var(--ai6-bleu-fonce); }
#poste[data-onglet="chiffrage"] .bloc-poste .arbitrage label { display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ai6-texte-dense); font-weight: 600; color: var(--ai6-encre-secondaire); }
#poste[data-onglet="chiffrage"] .bloc-poste select, #poste[data-onglet="chiffrage"] .ajout-ligne :is(input, select) {
  min-height: 34px; border: 1px solid var(--ai6-muet); border-radius: var(--ai6-rayon-petit); padding: 0 10px; }
#poste[data-onglet="chiffrage"] .bloc-poste p.note { margin: 0; }
/* Les boutons gris (« Joindre un devis », « + ligne libre ») prennent le contour du poste. */
#poste[data-onglet="chiffrage"] button.ajout { min-height: 32px; padding: 0 12px; border: 1px solid var(--ai6-bleu);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); color: var(--ai6-bleu); font-weight: 600; }
#poste[data-onglet="chiffrage"] button.ajout:hover { background: var(--ai6-bleu-clair); }

/* La sous-barre reste en haut au défilement, sous la barre d'onglets (Abdel, 05/10 : « garder
 * Lieux, Origines, Postes fixés en haut »). --haut-barre est mesuré au rendu (poste.js). */
#poste > nav.onglets.sous { position: sticky; top: calc(var(--haut-actions, 0px) + var(--haut-barre, 0px));
  z-index: 3; background: var(--ai6-blanc); box-shadow: 0 1px 0 var(--ai6-bleu-moyen); }

/* ===================================================================================
 * Chiffrage — maquette du 02/10 validée le 05/10 (propositions/chiffrage/). Six cartes
 * (chiffrage.js, CARTES), le récapitulatif sans bandes pleines (aussi dans la cellule, qui
 * partage settlement_recap.js), « Régler en » en segment, la synthèse en relevé, les postes
 * en cartes. Mêmes classes et data-* : seule la feuille et l'enveloppe changent.
 * =================================================================================== */
/* « Régler en » : les mêmes radios, en contrôle segmenté. */
#poste .choix-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
#poste .choix-mode__t { flex: 0 0 9.5rem; margin-right: 16px; font-size: var(--ai6-texte-petit); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ai6-encre-secondaire); }
#poste .choix-mode__o { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 0 14px; margin: 0; border: 1px solid var(--ai6-muet); border-radius: 0; background: var(--ai6-blanc);
  font-size: var(--ai6-texte-dense); font-weight: 600; color: var(--ai6-encre-secondaire); cursor: pointer; }
#poste .choix-mode__o + .choix-mode__o { margin-left: -1px; }
#poste .choix-mode__o:first-of-type { border-radius: var(--ai6-rayon-petit) 0 0 var(--ai6-rayon-petit); }
#poste .choix-mode__o:last-of-type { border-radius: 0 var(--ai6-rayon-petit) var(--ai6-rayon-petit) 0; }
#poste .choix-mode__o:hover { background: var(--ai6-bleu-clair); }
#poste .choix-mode__o input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
#poste .choix-mode__o:has(input:checked) { z-index: 1; background: var(--ai6-bleu); border-color: var(--ai6-bleu);
  color: var(--ai6-sur-bleu); }
#poste .choix-mode__o:has(input:focus-visible) { outline: 2px solid var(--ai6-focus); outline-offset: 2px; z-index: 2; }
#poste .choix-mode__o em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Les tuiles des coûts, le titre du récapitulatif et son compte. */
#poste .sai-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 10px; }
#poste .sai-tuiles > .champ { padding: 10px 12px; border: 1px solid var(--ai6-ligne); border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-bleu-fond-2); }
#poste .sai-tuiles > .champ b { font-size: var(--ai6-texte-titre); font-variant-numeric: tabular-nums; }
.sai-recap-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#poste .onglet-corps h3.sai-recap-titre, .sai-recap-titre { margin: 14px 0 10px; padding: 0; border: 0; font-size: var(--ai6-texte-titre);
  color: var(--ai6-bleu-fonce); }
.sai-recap-titre em.sai-compte { font-style: normal; }

/* Le récapitulatif : un seul aplat (l'en-tête), plus de bandes bleues pleines. */
table.saisie.recap-indemnisation td { padding: 7px 10px; border-top: 1px solid var(--ai6-ligne); }
table.saisie.recap-indemnisation tr.rec-piece td { padding: 16px 10px 8px; border-top: 1px solid var(--ai6-bleu-moyen);
  background: var(--ai6-blanc); color: var(--ai6-bleu-fonce); font-size: var(--ai6-texte-courant); font-weight: 700;
  text-transform: none; letter-spacing: 0; }
table.saisie.recap-indemnisation tr.rec-piece em { display: inline-flex; float: none; margin-left: 8px; padding: 0 9px;
  min-height: 22px; align-items: center; border-radius: 999px; background: var(--ai6-ligne); color: var(--ai6-encre-secondaire);
  font-size: var(--ai6-texte-petit); font-weight: 600; font-style: normal; }
table.saisie.recap-indemnisation .ai6-pastille { display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin-right: 6px; border-radius: 6px; background: var(--ai6-bleu); color: var(--ai6-sur-bleu); font-size: var(--ai6-texte-petit); font-weight: 700; }
table.saisie.recap-indemnisation tr.rec-garantie td { padding: 12px 10px 4px; border-top: 1px dashed var(--ai6-bleu-moyen);
  background: var(--ai6-blanc); font-size: var(--ai6-texte-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ai6-encre-secondaire); }
table.saisie.recap-indemnisation tr.rec-entete td { padding: 6px 10px; border-top: 0; background: var(--ai6-bleu-fond);
  font-size: var(--ai6-texte-petit); font-weight: 700; font-style: normal; color: var(--ai6-encre-secondaire); white-space: nowrap; }
table.saisie.recap-indemnisation tr.rec-support td { padding: 10px 10px 2px 24px; border-top: 0; background: none;
  font-weight: 700; color: var(--ai6-encre); }
table.saisie.recap-indemnisation :is(tr.rec-sous, tr.rec-sous-piece) td { background: var(--ai6-bleu-fond-2);
  border-top: 1px solid var(--ai6-bleu-moyen); font-weight: 700; color: var(--ai6-bleu-fonce); }
table.saisie.recap-indemnisation td.r b { font-size: var(--ai6-texte-courant); }
table.saisie.recap-indemnisation tr.est-repliable:hover td { background: var(--ai6-bleu-fond-2); }
table.saisie.recap-indemnisation td.rec-etat select { display: block; width: 100%; min-height: 28px; margin-top: 4px;
  font-size: var(--ai6-texte-petit); border: 1px solid var(--ai6-muet); border-radius: var(--ai6-rayon-petit); }
table.saisie.recap-indemnisation td.rec-etat em.dette { color: var(--ai6-attente-encre); font-weight: 700; }
#poste button.pourquoi { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ai6-bleu-clair); color: var(--ai6-bleu); font-size: var(--ai6-texte-mini); font-weight: 700;
  line-height: 1; vertical-align: 1px; cursor: help; }

/* La synthèse : la table cascade lue comme un relevé. */
.scroll:has(> table.recap-indemnisation) + h3 { margin: 16px 0 6px; padding-top: 14px; border: 0;
  border-top: 1px dashed var(--ai6-bleu-moyen); font-size: var(--ai6-texte-titre); color: var(--ai6-bleu-fonce); }
table.saisie.cascade { width: 100%; max-width: 860px; }
table.saisie.cascade td { padding: 7px 10px; border-top: 1px solid var(--ai6-ligne); }
table.saisie.cascade td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.saisie.cascade tr.casc-total td { border-top: 2px solid var(--ai6-bleu-fonce); background: var(--ai6-bleu-fond-2);
  font-size: var(--ai6-texte-titre); font-weight: 700; color: var(--ai6-bleu-fonce); }
table.saisie.cascade tr.casc-total td.note { font-size: var(--ai6-texte-petit); font-weight: 400; }
table.saisie.cascade tr.casc-differe td:not(.note) { color: var(--ai6-attente-encre); }
table.saisie.cascade tr.casc-differe.casc-total td:not(.note) { color: var(--ai6-bleu-fonce); }
table.saisie.cascade td.note { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
table.saisie.cascade .bascule { display: inline-flex; min-height: 36px; padding: 0 12px; gap: 8px;
  border: 1px solid var(--ai6-muet); border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); }
table.saisie.cascade .bascule:has(input:checked) { background: var(--ai6-bleu-clair); border-color: var(--ai6-bleu); font-weight: 600; }
table.saisie.cascade tr.rec-groupe td { padding: 14px 10px 4px; border-top: 1px dashed var(--ai6-bleu-moyen); background: none;
  font-size: var(--ai6-texte-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ai6-encre-secondaire); }

/* Ajouter, contrôles : titres dans la carte, tables à en-tête pâle. */
#poste .ajout-table > .ajout-titre:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#poste .ajout-titre { font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre-secondaire); margin: 6px 0; }
#poste .sai-controle { padding: 10px 0; }
#poste .sai-controle + .sai-controle { border-top: 1px dashed var(--ai6-bleu-moyen); }
#poste[data-onglet="chiffrage"] .sai-controle > h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: var(--ai6-texte-courant);
  color: var(--ai6-bleu-fonce); }
#poste .sai-controle table.saisie { width: 100%; }
#poste .sai-controle table.saisie thead th { background: var(--ai6-bleu-fond); font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }
#poste .sai-controle table.saisie .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Par poste : une carte par poste, deux par rangée. */
#poste .sai-postes-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 12px; padding: 12px 0; }
#poste[data-onglet="chiffrage"] .sai-postes-cartes .bloc-poste { margin: 0; }
.sai-fichier { position: relative; overflow: hidden; }
.sai-fichier input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.sai-fichier:has(input:focus-visible) { outline: 2px solid var(--ai6-focus); outline-offset: 2px; }
/* La phrase sur le stockage des photos ne se lit qu'une fois (gardée pour le lecteur d'écran). */
#poste .bloc-poste ~ .bloc-poste .photos .note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Explications repliées : l'élément « Pourquoi ? » de R17, dans les cartes. */
#poste .sai-section .sai-pourquoi { margin: 6px 0; }
#poste .sai-pourquoi summary b { color: var(--ai6-encre); }
#poste .sai-pourquoi[open] > div p.note { margin: 0; }
table.saisie.cascade .bascule { white-space: nowrap; }
#poste .photos .note { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }

/* ===================================================================================
 * Barème — maquette validée le 05/10 (propositions/bareme/maquette_bareme.html) : en-tête et
 * zone du dossier, recherche collante, règles / conditions / articles en sections, en-têtes
 * de table collants (overflow-x: clip, sans quoi le cadre devient conteneur de défilement).
 * =================================================================================== */
#poste { --haut-recherche: 60px; }
/* L'en-tête du barème : ce qu'il est, d'un coup d'œil ; la zone du dossier en pastille (B2). */
.sai-bareme-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px;
  border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon); background: var(--ai6-bleu-fond-2); }
.sai-bareme-tete__titre { flex: 1 1 24rem; min-width: 0; }
.sai-bareme-tete__titre p { margin: 0; font-size: var(--ai6-texte-dense); }
.sai-bareme-tete__nom { font-size: var(--ai6-texte-titre) !important; font-weight: 700; color: var(--ai6-bleu-fonce); }
.sai-zone-puce { min-height: 28px; font-size: var(--ai6-texte-dense); }
/* B1 — la recherche, collante sous la barre d'onglets. */
.sai-recherche { position: sticky; top: calc(var(--haut-actions, 0px) + var(--haut-barre, 0px)); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: var(--haut-recherche);
  padding: 12px 0; background: var(--ai6-blanc); }
.sai-recherche__champ { position: relative; flex: 1 1 22rem; max-width: 40rem; }
.sai-recherche__champ > .ai6-icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ai6-encre-secondaire); pointer-events: none; }
.sai-recherche input { width: 100%; min-height: 36px; padding: 0 40px 0 36px; border: 1px solid var(--ai6-muet);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); color: var(--ai6-encre); font: inherit; font-size: var(--ai6-texte-courant); }
.sai-recherche input:focus-visible { outline: 2px solid var(--ai6-focus); outline-offset: 1px; }
.sai-recherche__effacer { position: absolute; right: 2px; top: 2px; }
/* Les tables du barème : en-tête collant sous la recherche ; code jamais coupé ; prix à droite. */
.sai-bareme { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ai6-texte-dense); table-layout: fixed; }
.sai-bareme thead th { position: sticky; top: calc(var(--haut-actions, 0px) + var(--haut-barre, 0px) + var(--haut-recherche));
  z-index: 2; text-align: left; font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre-secondaire); padding: 8px 10px;
  background: var(--ai6-bleu-fond); box-shadow: inset 0 -1px 0 var(--ai6-bleu-moyen); white-space: nowrap; }
.sai-bareme td { padding: 7px 10px; border-top: 1px solid var(--ai6-ligne); vertical-align: top; overflow-wrap: anywhere; }
.sai-bareme tbody tr:first-child td { border-top: 0; }
.sai-bareme tbody tr.sai-cherchable:hover td { background: var(--ai6-bleu-fond-2); }
.sai-bareme code { white-space: nowrap; overflow-wrap: normal; }
.sai-bareme .sai-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sai-bareme .sai-zone-dossier { background: var(--ai6-bleu-clair); }
.sai-bareme thead .sai-zone-dossier { color: var(--ai6-bleu-fonce); background: var(--ai6-bleu-moyen); }
.sai-bareme thead .sai-zone-dossier .ai6-icone { color: var(--ai6-bleu); }
.sai-bareme td.sai-zone-dossier { font-weight: 700; color: var(--ai6-bleu-fonce); }
.sai-bareme tbody th[scope=rowgroup] { text-align: left; padding: 14px 10px 6px; font-size: var(--ai6-texte-courant); font-weight: 700;
  color: var(--ai6-encre); background: var(--ai6-blanc); border-top: 1px solid var(--ai6-bleu-moyen); }
.sai-bareme tbody:first-of-type th[scope=rowgroup] { border-top: 0; }
.sai-bareme .sai-national { color: var(--ai6-encre); }
/* Une table courte, dans un cadre qui défile, ne colle pas : un en-tête collant dans un conteneur
 * qui défile se décale de --haut-recherche à l'intérieur du cadre (constaté sur cette maquette). */
.sai-minimums thead th { position: static; }
.sai-bareme .sai-national .sai-puce { margin-right: 8px; }
/* La table ne défile pas latéralement en largeur normale : sans quoi l'en-tête ne colle plus. */
.sai-table-cadre--collant { overflow-x: clip; }
@container (max-width: 44rem) {
  .sai-table-cadre--collant { overflow-x: auto; }
  .sai-bareme { table-layout: auto; min-width: 640px; }
  .sai-bareme thead th { position: static; }
}
/* Règles : le support en barre « titre + compte », une ligne par matériau. */
.sai-support { padding: 12px 0 4px; }
.sai-support + .sai-support { border-top: 1px dashed var(--ai6-bleu-moyen); }
#poste .sai-support .sai-barre { margin-bottom: 8px; }
#poste .sai-support .sai-barre h3 { text-transform: capitalize; }
.sai-regles td > b { display: block; font-size: var(--ai6-texte-courant); }
.sai-regles code.pivot { display: inline-block; margin-top: 2px; padding: 0; background: none; font-size: var(--ai6-texte-mini);
  color: var(--ai6-encre-secondaire); }
.sai-regles em { font-style: normal; color: var(--ai6-encre-secondaire); }
.sai-regles .sai-etiq { margin-left: 2px; }
.sai-pt { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 6px 8px; font-size: var(--ai6-texte-dense);
  border: 1px dashed var(--ai6-bleu-trait); border-radius: var(--ai6-rayon-petit); background: var(--ai6-bleu-fond-2); }
.sai-pt > .ai6-icone { margin-top: 2px; color: var(--ai6-bleu); }
ul.induits { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
ul.induits li { line-height: 1.4; }
.so { color: var(--ai6-encre-secondaire); font-style: italic; }
.sai-regles .sai-pourquoi { margin-top: 4px; }
/* Conditions de pose : une tuile par fait, le défaut en pastille, la question en dessous. */
.sai-conditions { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.sai-conditions li { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); font-size: var(--ai6-texte-dense); }
.sai-cond__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: center; }
.sai-cond__tete b { font-size: var(--ai6-texte-courant); }
.sai-conditions p { margin: 0; color: var(--ai6-encre-secondaire); }
.sai-cond__q { display: flex; gap: 6px; font-style: italic; }
.sai-cond__q .ai6-icone { margin-top: 3px; flex: none; }
.sai-section__bascule .sai-compte { margin-left: auto; }
.sai-coupe { margin-top: 8px !important; font-style: italic; }


#poste .sai-variantes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--ai6-texte-dense); }
#poste .sai-regles code.pivot { display: block; }
#poste .sai-bareme-tete .sai-rond { width: 36px; height: 36px; }
#poste .sai-bareme-tete { margin-bottom: 4px; }

/* ── Clauses et garanties (G5, G11, G12) ─────────────────────────────────────
   Chaque liste est une grille ; chaque ligne en reprend les colonnes (subgrid) : la
   qualification, le libellé, le code et l'article tombent l'un sous l'autre. La note
   d'usage d'une règle commune passe sous son libellé, sur toute la largeur — enfant d'un
   label en flex, elle prenait la place du libellé, qui tombait un mot par ligne. */
.sai-garantie .clauses { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto auto; gap: 0; }
.sai-garantie .clauses:has(.commune) { grid-template-columns: 20px auto auto minmax(0, 1fr) auto auto; }
/* Sans subgrid (navigateur d'avant 2023), la ligne garde ses propres colonnes : moins bien
   alignée d'une ligne à l'autre, jamais empilée. */
.sai-garantie .ligne-clause { display: grid; grid-column: 1 / -1; grid-template-columns: 20px auto minmax(0, 1fr) auto auto;
  grid-template-columns: subgrid; column-gap: 12px;
  align-items: center; min-height: 34px; padding: 4px 6px; border-top: 1px solid var(--ai6-ligne); font-size: var(--ai6-texte-dense); }
.sai-garantie .ligne-clause:first-child { border-top: 0; }
.sai-garantie .ligne-clause:hover { background: var(--ai6-bleu-fond); }
.sai-garantie .ligne-clause .tag { justify-self: start; }
.sai-garantie .ligne-clause:has(input:not(:checked)) :is(.lib, .numero) { color: var(--ai6-encre-secondaire); }
.sai-garantie .ligne-clause.commune { grid-template-columns: 20px auto auto minmax(0, 1fr) auto auto;
  grid-template-columns: subgrid; border-left: 3px solid var(--ind); padding-left: 6px; }
.sai-garantie .ligne-clause .numero { white-space: nowrap; }
.sai-garantie .ligne-clause .usage-note { grid-column: 3 / -1; margin: 0 0 2px; font-size: var(--ai6-texte-petit); line-height: 1.4; }
#poste .sai-garantie .note, #poste .note:has(+ .sai-garantie) { font-size: var(--ai6-texte-dense); color: var(--ai6-encre-secondaire); max-width: 90ch; }
.sai-garantie .causes { display: block; columns: 3 16rem; column-gap: 24px; }
.sai-garantie .famille-causes { break-inside: avoid; }
.sai-garantie .ligne-cause { min-height: 30px; font-size: var(--ai6-texte-dense); }
.sai-garantie .ligne-clause input { width: 16px; height: 16px; margin: 0; }
.sai-garantie .motifs .cible { display: block; margin: 2px 0 6px; color: var(--ai6-encre-secondaire); }

/* ── Documents (G13) : une section vide se dit en tuile ──────────────────────
   Elle reste rendue (« demandé, et passé » n'est pas « pas demandé ») mais ne prend plus
   une rangée entière : six « Rien de versé » empilés deviennent deux rangées de tuiles.
   Le versement et toute section qui a des pièces gardent la largeur. */
.documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; align-items: start; }
.documents > :not(.documents__section), .documents__section:not(:has(.documents__vide)) { grid-column: 1 / -1; }
.documents__section:has(.documents__vide) { margin: 0; padding: 12px; border: 1px dashed var(--ai6-bleu-trait);
  border-radius: var(--ai6-rayon-petit); background: var(--ai6-blanc); }
.documents__section:has(.documents__vide) .documents__titre { margin-bottom: 6px; }
.documents > .pieces-reglement { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Lot e (e1-e3) : typographie, boutons, actions toujours à l'écran ─────────
   01_UI.md §2, §5-§7 ; 02_UX.md UX2, UX3, UX7 ; 05_BOUTONS.md §5. */
.ai6-piece__nom, .ai6-decision__suggestion h3 { font-size: var(--ai6-texte-titre); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ai6-bleu); }

/* Un désactivé qui se lit comme tel, au lieu d'un bleu à 50 % qui paraît actif (C9). */
.ai6-bouton:disabled, button.primaire:disabled {
  opacity: 1; background: var(--ai6-ligne); color: var(--ai6-muet); border-color: transparent; }

/* « Terminer l'appel » : un geste qui ne se défait pas, en danger, plus le jumeau de « Pause ».
   Il porte désormais `ai6-bouton--alerte` (telephone.js) : la règle d'ici, un contour rouge,
   peignait aussi en rouge le texte du « Terminer » plein de la fin du parcours, sur la marque. */

/* Un code couleur d'appel : vert en cours, rouge en panne ; la durée n'est plus rouge (C15). */
.tel-horloge { color: var(--ai6-encre); }
.ai6-bouton.tel-en-ligne--alerte { background: var(--ai6-alerte); border-color: var(--ai6-alerte); }

/* Résultat : ses onglets prennent le style des sous-onglets (deux niveaux au lieu de trois, C1). */
.resultat-onglet { border: 0; border-radius: 0; background: none; box-shadow: none;
  border-bottom: 2px solid transparent; }
.resultat-onglet.actif { background: none; color: var(--ai6-bleu); border-color: var(--ai6-bleu); }

/* Écran 8 et Décision : l'action principale reste à l'écran (UX2, UX7). Le pied de la
   relecture (`.tel-relire__pied`) colle au bas de la fenêtre ; la colonne de droite défile avec
   la page — collée, elle débordait sous l'écran (« Appliquer » à 865 px sur un portable de 768). */
.tel-fin-appel .tel-cote { position: static; max-height: none; overflow: visible; }
/* « Valider » collé en bas de la colonne Décision, sur une bande du fond du panneau : ce qu'il
   recouvre (le bas du Commentaire) est coupé net au lieu de passer sous le bouton. */
.ai6-decision__valider { position: sticky; bottom: 12px; z-index: 1;
  box-shadow: 0 0 0 12px var(--ai6-bleu-pale), 0 -14px 12px -4px rgba(24, 28, 52, .18); }

/* La pilule de dictée ne couvre plus la Décision (UX3, C11). */
body:has(.ai6-corps-formio > .col-md-3) .dic-barre { right: calc(25% + 16px); }

/* ── Montants du règlement (Chiffrage) : deux tuiles au même poids ─────────── */
.sai-montants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 10px; margin: 4px 0 12px; }
.sai-montant { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--ai6-bleu-moyen);
  border-radius: var(--ai6-rayon); background: var(--ai6-blanc); }
.sai-montant > span { font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre-secondaire); }
.sai-montant > b { font-size: var(--ai6-texte-vedette); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ai6-bleu-fonce); line-height: 1.2; }
.sai-montant > small { font-size: var(--ai6-texte-petit); color: var(--ai6-encre-secondaire); }

/* ── Sommaire « Aller à » (Clauses et garanties, Barème, Chiffrage) ──────────
   Des boutons qui font défiler (poste.js, data-aller) ; la section s'arrête sous les barres
   collantes au lieu de passer dessous. */
.sai-sommaire { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sai-sommaire > span { font-size: var(--ai6-texte-petit); font-weight: 700; color: var(--ai6-encre-secondaire); margin-right: 4px; }
.sai-sommaire button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--ai6-bleu-moyen); border-radius: var(--ai6-rayon-pilule); background: var(--ai6-blanc);
  color: var(--ai6-bleu-fonce); font: inherit; font-size: var(--ai6-texte-dense); font-weight: 600; cursor: pointer; }
.sai-sommaire button:hover { background: var(--ai6-bleu-fond); border-color: var(--ai6-bleu); }
.sai-sommaire button:focus-visible { outline: 2px solid var(--ai6-focus); outline-offset: 2px; }
#poste .sai-section { scroll-margin-top: calc(var(--haut-actions, 0px) + var(--haut-barre, 0px) + 12px); }
#poste:has(#bareme-cherche) .sai-section { scroll-margin-top: calc(var(--haut-actions, 0px) + var(--haut-barre, 0px) + var(--haut-recherche) + 12px); }

/* ── Lot e6 : les petites retouches (02_UX.md UX10, UX16, UX17, UX19) ───────── */
.tel-raison { display: block; margin-top: 6px; color: var(--ai6-attente-encre); }
/* Un échec d'enregistrement se voit : un encart rouge, plus 11 px gris dans l'en-tête. */
header .empreinte.echec { font-family: var(--ai6-police); font-size: var(--ai6-texte-dense); font-weight: 600; color: var(--ai6-alerte);
  background: var(--ai6-alerte-fond); border: 1px solid var(--ai6-alerte); border-radius: var(--ai6-rayon-petit); padding: 4px 10px; }
/* « Annuler » (rendre le dossier d'avant l'appel) n'a plus le poids de « Fermer », ni sa place.
   Il est `ai6-bouton--discret` (telephone.js) ; seule sa place reste écrite ici. */
#tel-panneau [data-act="annuler-appel"] { order: 1; grid-column: 1 / -1; justify-self: start; }

/* Le retour à l'accueil, dans l'en-tête du poste en mode Price6+ (`poste_seul.js`, 01/11). */
header .accueil-retour { margin-left: 12px; text-decoration: none; padding: 6px 12px; }

/* La zone des onglets en plein écran (mode Price6+, `basculerPleinEcran`, 01/11) : `#poste`
 * couvre la fenêtre, sous les visionneuses et les fenêtres posées sur `body` (z-index 2040 et
 * plus). La barre colle alors en haut : il n'y a plus d'en-tête au-dessus d'elle. */
:root[data-plein-ecran] body { overflow: hidden; }
:root[data-plein-ecran] #poste { position: fixed; inset: 0; z-index: 1000; margin: 0; max-height: none;
  overflow-y: auto; background: var(--ai6-blanc); --haut-actions: 0px !important; }