/* Feuille de style des composants AI6.
 *
 * Tout passe par des jetons déclarés sur `:root`. Un hôte qui veut reprendre la
 * main n'a qu'à les redéclarer — mais il n'a plus à le faire pour retrouver la
 * charte : **la palette du fichier de design est ici**, et c'est l'affichage par
 * défaut du poste, en application autonome comme en cellule Odoo.
 *
 * Elle y a été rapatriée du thème « Cellule IMH », qui la portait en surcharge
 * dans `ai6_dde_particulier_imh`. Une palette tenue chez l'appelant, c'est un
 * poste qui ne ressemble à lui-même que là où quelqu'un a pensé à la reposer :
 * la page du lien gestionnaire, elle, n'avait pas de thème et gardait les
 * teintes d'avant. La cellule, qui relaie cette feuille et `app.css` sans les
 * recopier, reçoit le même écran sans rien redéclarer.
 *
 * Les classes sont préfixées `ai6-` : en light DOM, rien n'empêche une feuille
 * d'Odoo ou de Bootstrap de croiser un sélecteur, et un préfixe est ce qui
 * distingue une collision d'une surcharge voulue.
 */

/* --- Les jetons -----------------------------------------------------------
 *
 * Relevés **au fichier de design** (variables Figma), pas à l'œil sur une
 * capture : une couleur lue sur une image est déjà passée par la compression
 * et l'antialiasing, et l'écart ne se voit qu'à côté du vrai. Le nom de la
 * variable d'origine suit chaque valeur — c'est ce qui permet de vérifier une
 * teinte sans rouvrir une capture d'écran.
 *
 * Le poste et le parcours de l'assuré n'ont **pas** la même palette, et ce
 * n'est pas une incohérence : l'assuré voit la marque du donneur d'ordre (le
 * teal IMH, `form6_v2/themes/imh/`), le gestionnaire travaille dans l'outil
 * AI6. Les aligner ferait porter au poste une marque qui n'est pas la sienne.
 */
:root {
  --ai6-bleu: #001dfc;              /* Colors/Primary/Primary */
  --ai6-bleu-fonce: #00034a;        /* Colors/Primary/Dark/PrimaryDarkMax */
  --ai6-bleu-clair: #efefff;        /* Colors/Primary/Light/PrimaryLightMax */
  --ai6-bleu-moyen: #dadaff;        /* Colors/Primary/Light/PrimaryLightMid */
  --ai6-bleu-fond: #f2f3ff;         /* Couleurs/Faible/5primaire — le fond de page */
  --ai6-bleu-pale: #E4E6FF;
  --ai6-blanc: #ffffff;
  --ai6-encre: #181c34;             /* Couleurs/Gris/FauxNoir */
  /* `--ai6-muet` n'est **pas** repris du fichier de design. Son gris faible y
   * vaut #b5b9d9, soit 1,9:1 sur blanc, et c'est ici la couleur des en-têtes de
   * colonne et des libellés de champ — le texte le plus dense de l'écran. Le
   * design pose ce gris sur des aplats, pas sur du texte de travail. */
  --ai6-muet: #5F6672;
  --ai6-ligne: #f0f0f7;             /* Functional/Light/FalseBlackLightMax */
  --ai6-ligne-2: #f4f6fb;           /* maquette Price6+ `surface/ligne-2` : le fond neutre (Puce, réplique « Vous ») */
  --ai6-ombre: 0 1px 3px color-mix(in srgb, var(--ai6-bleu) 10%, transparent);
  --ai6-rayon: 10px;
  --ai6-rayon-petit: 6px;
  /* Les deux valeurs de la famille attente sont celles de la maquette Price6+ (Figma
   * `etat/attente-fond`, `etat/attente`, 30/10/2026) — c'est-à-dire celles que portaient déjà
   * les alias historiques `--ind-fond` et `--ind` (app.css), et que peignaient les étiquettes
   * `.tag .t-ind`. Trois bruns voisins (#8A5A12, #7a4d0e, #8a6a1f) et deux crèmes (#FDF0DC,
   * #faf4e4) disaient la même chose à trois endroits ; un seul couple reste. 4,60:1 sur son
   * fond, 5:1 sur blanc : l'AA tient partout où l'ancien brun était posé. */
  --ai6-attente: #faf4e4;
  --ai6-attente-encre: #8a6a1f;
  --ai6-succes: #2f6b3f;
  --ai6-alerte: #9b3226;
  --ai6-pas: 8px;

  /* --- Lot a (02/10/2026) : les jetons qui manquaient, valeurs exactes. ---------------
   * Toutes les couleurs des deux feuilles passent désormais par ici : une marque qui
   * redéfinit ces jetons repeint tout le poste, et plus aucune règle ne garde sa teinte à
   * elle. Les noms suffixés -2, -3… sont provisoires : une valeur voisine d'un jeton,
   * gardée exacte pour que ce lot ne change rien à l'écran, et fusionnée ensuite
   * (01_UI.md §9, colonne « Fusion »). Les échelles (texte, espaces, rayons) sont
   * déclarées ici et appliquées au lot visible. */
  /* rôles */
  --ai6-sur-bleu: var(--ai6-blanc);        /* texte et icônes posés sur un aplat --ai6-bleu */
  --ai6-encre-secondaire: #4a4f5c;
  --ai6-champ-bord: #d6d8ea;
  /* Le trait des cartes, des saisies et des boutons-icônes de l'appel (maquette Price6+,
   * `maquette/trait-carte`). Un gris bleuté **neutre** : il ne suit pas la marque, comme les
   * états, parce qu'un cadre qui changerait de teinte avec l'assureur ne dirait rien de plus.
   * `--ai6-ligne` (#f0f0f7), qui bordait la carte, disparaissait sur le fond de page. */
  --ai6-carte-bord: #dde3ea;
  /* Le fond d'une ligne ou d'un bouton survolé. Deux règles le lisaient (Clauses et
   * garanties, sommaire « Aller à ») sans qu'il soit déclaré nulle part : leur survol n'avait
   * donc aucun effet. La teinte claire de la marque, pour qu'un thème le repeigne. */
  --ai6-survol: var(--ai6-bleu-clair);
  --ai6-bleu-trait: #c9cff9;
  --ai6-sur-sombre: #e8ecf6;
  --ai6-focus: var(--ai6-bleu);
  --ai6-voile: color-mix(in srgb, var(--ai6-encre) 45%, transparent);
  /* familles sémantiques (--ai6-attente reste le FOND de la famille attente) */
  --ai6-succes-encre: #14603a;
  --ai6-succes-fond: #eef5ef;             /* maquette `etat/ok-fond` = l'alias historique --ok-fond */
  --ai6-succes-vif: #2fbf6a;               /* le point « En ligne » */
  --ai6-attente-fond: var(--ai6-attente);
  --ai6-attente-pale: #fffaf0;
  --ai6-attente-bord: #f1e0bd;
  --ai6-attente-trait: #b7791f;
  --ai6-attente-vif: #e0a030;
  --ai6-alerte-fond: #fbeeec;
  --ai6-alerte-bord: #e6cdc9;
  --ai6-info: var(--ai6-bleu);
  --ai6-info-fond: var(--ai6-bleu-clair);
  --ai6-enregistrement: #e74c3c;
  --ai6-surlignage: #ffe08a;
  /* médias (vidéo, visionneuse 3D, loupe) : ils ne suivent pas la marque */
  --ai6-noir: #000000;
  --ai6-nuit: #101622;
  --ai6-scene-3d: #171c1f;
  --ai6-mesure: #ffd34d;
  --ai6-voile-media: color-mix(in srgb, var(--ai6-nuit) 72%, transparent);
  /* provisoires */
  --ai6-bleu-fond-2: #f4f5ff;  --ai6-bleu-fond-3: #e9ebf5;  --ai6-bleu-clair-2: #eef0ff;
  --ai6-bleu-moyen-2: #e6e6ee; --ai6-bleu-trait-2: #c3c8f2; --ai6-bleu-trait-3: #cfd9e8;
  --ai6-muet-2: #6b7080;       --ai6-muet-3: #9aa0ad;       --ai6-muet-4: #8d8da3;
  --ai6-succes-3: #17693b;     --ai6-succes-4: #1f7a45;
  --ai6-succes-fond-3: #f3faf6;
  --ai6-attente-encre-3: #5c3c0b;
  --ai6-alerte-2: #c0392b;     --ai6-alerte-3: #8a4b00;     --ai6-alerte-4: #a4441a;
  --ai6-alerte-fond-2: #fdecea; --ai6-alerte-fond-3: #fff4ec; --ai6-alerte-bord-2: #e8b48a;
  --ai6-filet-sombre: rgba(31, 36, 48, .12);
  /* ombres */
  --ai6-ombre-2: 0 1px 2px color-mix(in srgb, var(--ai6-noir) 8%, transparent);
  --ai6-ombre-flottante: 0 6px 24px color-mix(in srgb, var(--ai6-bleu-fonce) 14%, transparent);
  --ai6-ombre-flottante-2: 0 6px 20px color-mix(in srgb, var(--ai6-bleu-fonce) 30%, transparent);
  --ai6-ombre-flottante-3: 0 6px 24px rgba(20, 24, 40, .14);
  --ai6-ombre-flottante-4: 0 2px 8px color-mix(in srgb, var(--ai6-noir) 35%, transparent);
  --ai6-ombre-fenetre: 0 10px 40px color-mix(in srgb, var(--ai6-bleu-fonce) 25%, transparent);
  --ai6-ombre-fenetre-2: 0 18px 60px color-mix(in srgb, var(--ai6-noir) 45%, transparent);
  /* typographie : Nunito, embarquée par app.css (css/polices/) ; échelle de 7 tailles, 11 → 24 px */
  --ai6-police: Nunito, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ai6-police-chasse-fixe: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ai6-texte-mini: 11px;    --ai6-texte-petit: 12px;  --ai6-texte-dense: 13px;
  --ai6-texte-courant: 14px; --ai6-texte-titre: 16px;  --ai6-texte-grand: 20px;
  --ai6-texte-vedette: 24px;
  --ai6-graisse-normale: 400; --ai6-graisse-appuyee: 600; --ai6-graisse-forte: 700;
  --ai6-interligne: 1.5;     --ai6-interligne-serre: 1.25;
  /* espacements (demi-pas) et rayons */
  --ai6-espace-1: calc(var(--ai6-pas) / 2);   --ai6-espace-2: var(--ai6-pas);
  --ai6-espace-3: calc(var(--ai6-pas) * 1.5); --ai6-espace-4: calc(var(--ai6-pas) * 2);
  --ai6-espace-6: calc(var(--ai6-pas) * 3);   --ai6-espace-8: calc(var(--ai6-pas) * 4);
  --ai6-espace-10: calc(var(--ai6-pas) * 5);
  --ai6-rayon-mini: 4px;     --ai6-rayon-pilule: 999px;
  /* icônes (lot b) : trois tailles, le trait de Feather, la couleur du texte voisin */
  --ai6-icone-s: 14px;              /* dans le texte : boutons, pastilles, légendes, aides */
  --ai6-icone-m: 20px;              /* titres de carte, commandes vidéo, carrousel, documents */
  --ai6-icone-l: 28px;              /* tuiles d'identité, en-tête */
  --ai6-icone-trait: 2;             /* en unités du viewBox 24 : 1,2 px à 14 px, 2,3 px à 28 px */
  --ai6-icone-couleur: currentColor;
  --ai6-icone-vide-fond: var(--ai6-bleu-clair);
  --ai6-icone-vide-couleur: var(--ai6-bleu);
}

/* ---------------------------------------------------------------- primitives */

.ai6-paire {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: var(--ai6-texte-dense);
  line-height: 1.5;
}
.ai6-paire--large { flex-direction: column; gap: 2px; }
.ai6-paire__lib { color: var(--ai6-muet); font-size: var(--ai6-texte-petit); white-space: nowrap; }
.ai6-paire__val { color: var(--ai6-encre); font-weight: 600; }
.ai6-paire__val--lien { color: var(--ai6-bleu); text-decoration: underline; }

.ai6-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--ai6-bleu);
  color: var(--ai6-sur-bleu);
  font-size: var(--ai6-texte-dense);
  font-weight: 700;
  flex: none;
}

.ai6-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ai6-attente);
  color: var(--ai6-attente-encre);
  font-size: var(--ai6-texte-petit);
  font-weight: 600;
}

.ai6-bouton {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-bleu);
  color: var(--ai6-sur-bleu);
  font: inherit;
  font-weight: 600;
  font-size: var(--ai6-texte-courant);
  cursor: pointer;
}
.ai6-bouton--clair { background: var(--ai6-blanc); color: var(--ai6-bleu); }
.ai6-bouton--contour {
  background: var(--ai6-blanc);
  color: var(--ai6-bleu);
  border: 1px solid var(--ai6-bleu);
  font-weight: 600;
}
/* Les deux types que la maquette Price6+ ajoute au principal et au contour (composant `3:10`).
 * « discret » : l'action tertiaire, sans fond ni bordure — là où le poste mettait tantôt un
 * lien souligné, tantôt un aplat transparent écrit à la main pour un seul bouton. Son survol
 * est le seul repère qu'il garde d'être cliquable : la maquette n'en dessine pas, mais un
 * texte gris qui ne réagit à rien se lit comme une légende.
 * « alerte » : un geste qui ne se défait pas (« Terminer l'appel »). Un aplat pâle et le texte
 * en alerte, sans bordure : assez pour qu'on ne le prenne pas pour son voisin « Pause », pas
 * le poids du principal, qui reste seul à l'écran. */
.ai6-bouton--discret { background: none; color: var(--ai6-encre-secondaire); }
.ai6-bouton--discret:hover:not(:disabled) { background: var(--ai6-survol); }
.ai6-bouton--alerte { background: var(--ai6-alerte-fond); color: var(--ai6-alerte); }
.ai6-bouton--bloc { display: block; width: 100%; }
/* **Le bouton-icône** (maquette Price6+, dessiné dans le Champ `3:49`) : 32 × 32, fond blanc,
 * trait --ai6-carte-bord, rayon 4, une icône de 14 px au trait de 3 px — en unités du viewBox
 * 24 du sprite, 3 × 24 / 14. Pas une variante d'`.ai6-bouton` : il n'en prendrait que des
 * marges à annuler. Il n'a pas de texte, donc toujours un `aria-label` (et un `title`, pour
 * la souris) qui dit le geste : « Valider », « Écarter ». La couleur de l'icône dit son sens,
 * jamais seule : ✓ et ✗ se lisent sans elle. ✗ est à 85 % d'opacité, comme dessiné. Dans
 * Figma l'icône est calée en haut à gauche : un artefact, elle est centrée ici. */
.ai6-bouton-icone { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--ai6-carte-bord); border-radius: var(--ai6-rayon-mini); background: var(--ai6-blanc);
  color: var(--ai6-encre-secondaire); cursor: pointer; }
.ai6-bouton-icone:hover { background: var(--ai6-survol); }
.ai6-bouton-icone .ai6-icone { stroke-width: calc(3 * 24 / 14); }
.ai6-bouton-icone--ok { color: var(--ai6-succes); }
.ai6-bouton-icone--alerte { color: var(--ai6-alerte); }
.ai6-bouton-icone--alerte .ai6-icone { opacity: .85; }
.ai6-bouton:disabled { opacity: .5; cursor: not-allowed; }

/* Les icônes : un seul jeu au trait (Feather 4.29.2, MIT), en sprite posé par ai6-base.js.
 * Une icône est décorative — le texte voisin dit la chose —, d'où aria-hidden partout. */
.ai6-icone {
  width: var(--ai6-icone-s); height: var(--ai6-icone-s);
  flex: none;                         /* ne se tasse pas dans un bouton flex */
  vertical-align: -0.125em;           /* sur la ligne de base du texte voisin */
  color: var(--ai6-icone-couleur);
  stroke-width: var(--ai6-icone-trait);
}
.ai6-icone--m { width: var(--ai6-icone-m); height: var(--ai6-icone-m); }
.ai6-icone--l { width: var(--ai6-icone-l); height: var(--ai6-icone-l); }

/* Un état vide : un disque pâle, une icône, la phrase, et l'action qui existe déjà. Le
 * texte seul (« Rien de versé ») se lisait comme une panne ; un motif unique le dit vide. */
.ai6-vide { display: flex; align-items: center; gap: var(--ai6-espace-2); }
.ai6-vide__disque { display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  width: calc(2 * var(--ai6-icone-s)); height: calc(2 * var(--ai6-icone-s));
  background: var(--ai6-icone-vide-fond); color: var(--ai6-icone-vide-couleur); font-style: normal; }

/* ------------------------------------------------------------------ bandeau */

ai6-entete-dossier { display: block; }
.ai6-entete {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 40px;
  background: var(--ai6-blanc);
}
.ai6-entete__retour {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ai6-bleu);
  display: flex;
  padding: 4px;
}
.ai6-entete__marque { display: flex; align-items: center; gap: 10px; }
.ai6-entete__logo { height: 34px; }
.ai6-entete__dossier { display: flex; flex-direction: column; gap: 4px; }
.ai6-entete__ref { font-size: var(--ai6-texte-courant); color: var(--ai6-bleu); font-weight: 600; }
.ai6-entete__ref b { color: var(--ai6-encre); font-size: var(--ai6-texte-grand); font-weight: 700; }
.ai6-entete__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ai6-entete__telecharger {
  background: none; border: 0; cursor: pointer; color: var(--ai6-bleu); display: flex;
}
.ai6-entete__utilisateur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon);
}
.ai6-entete__initiales {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ai6-bleu-pale); color: var(--ai6-bleu);
  font-size: var(--ai6-texte-dense); font-weight: 700;
}
.ai6-entete__nom { font-size: var(--ai6-texte-courant); font-weight: 700; color: var(--ai6-bleu); }
.ai6-entete__role { font-size: var(--ai6-texte-dense); color: var(--ai6-encre); }

/* ---------------------------------------------------------- tuile d'identité */

ai6-tuile-identite { display: block; }
.ai6-tuile {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  height: 100%;
  background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon);
  box-shadow: var(--ai6-ombre);
}
.ai6-tuile__icone { color: var(--ai6-bleu); flex: none; display: flex; align-items: flex-start; }
.ai6-tuile__corps { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ai6-tuile .ai6-paire__val { white-space: normal; }

/* --------------------------------------------------------------- onglets */

ai6-onglets { display: block; }
.ai6-onglets { display: flex; gap: 10px; flex-wrap: wrap; }
.ai6-onglets__item {
  padding: 12px 22px;
  border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-blanc);
  color: var(--ai6-bleu);
  font: inherit;
  font-size: var(--ai6-texte-courant);
  font-weight: 600;
  cursor: pointer;
}
.ai6-onglets__item[aria-selected="true"] {
  background: var(--ai6-bleu);
  border-color: var(--ai6-bleu);
  color: var(--ai6-sur-bleu);
}

/* --------------------------------------------------- récapitulatif par pièce */

ai6-recap-piece { display: block; }
.ai6-piece { border-bottom: 1px solid var(--ai6-ligne); }
.ai6-piece:last-child { border-bottom: 0; }
.ai6-piece__tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 10px;
}
.ai6-piece__nom { font-size: var(--ai6-texte-courant); font-weight: 700; color: var(--ai6-bleu); }
.ai6-piece__surface { margin-left: auto; font-size: var(--ai6-texte-dense); color: var(--ai6-bleu); }
.ai6-piece__surface b { color: var(--ai6-encre); font-weight: 600; }
.ai6-piece__ligne {
  display: grid;
  grid-template-columns: 110px repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px 18px;
  align-items: center;
  padding: 10px 22px;
  border-top: 1px solid var(--ai6-ligne);
}
.ai6-piece__support {
  font-size: var(--ai6-texte-dense);
  font-weight: 600;
  color: var(--ai6-bleu);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ai6-piece__vide { padding: 14px 22px; color: var(--ai6-muet); font-size: var(--ai6-texte-courant); }

/* Le bouton « 3D » d'une pièce — la porte d'entrée du nuage de points.
 *
 * Il n'est rendu que là où il y a quelque chose à ouvrir (`ai6-recap-piece.js`), et
 * c'est ce qui lui permet d'être discret sans être invisible : sur douze pièces, les
 * deux qui portent le bouton se voient d'un coup d'œil. Un bouton grisé sur les dix
 * autres aurait dit la même chose en dix fois plus de bruit.
 *
 * `margin-left: auto` le pousse à droite quand la pièce n'annonce pas de surface ; la
 * règle voisine le recolle à la surface quand elle est là. Sans les deux, le bouton
 * saute d'un bord à l'autre d'une pièce à la suivante, selon qu'une surface a été
 * saisie — un déplacement qu'on lit comme un défaut d'alignement. */
.ai6-piece__nuage {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--ai6-bleu-moyen);
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-bleu-clair);
  color: var(--ai6-bleu);
  font-size: var(--ai6-texte-mini);
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
.ai6-piece__surface + .ai6-piece__nuage { margin-left: 8px; }
.ai6-piece__nuage:hover { background: var(--ai6-bleu-moyen); }
.ai6-piece__nuage:focus-visible { outline: 2px solid var(--ai6-bleu); outline-offset: 2px; }

/* --------------------------------------------------------- liste documents */

ai6-liste-documents { display: block; }
.ai6-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ai6-ligne);
}
.ai6-doc:last-child { border-bottom: 0; }
.ai6-doc__icone { color: var(--ai6-bleu); display: flex; flex: none; }
.ai6-doc__nom { font-size: var(--ai6-texte-courant); min-width: 220px; }
.ai6-doc__montant { font-size: var(--ai6-texte-dense); color: var(--ai6-bleu); }
.ai6-doc__actions { margin-left: auto; display: flex; gap: 12px; }

/* ------------------------------------------------------------ panneau décision */

ai6-panneau-decision { display: block; }
.ai6-decision { display: flex; flex-direction: column; }
.ai6-decision__titre {
  font-size: var(--ai6-texte-grand);
  font-weight: 700;
  color: var(--ai6-bleu);
  margin: 0 0 14px;
}
.ai6-decision__suggestion {
  background: var(--ai6-bleu);
  color: var(--ai6-sur-bleu);
  padding: 18px 20px;
  border-radius: var(--ai6-rayon) var(--ai6-rayon) 0 0;
}
.ai6-decision__suggestion h3 { margin: 0 0 14px; font-size: var(--ai6-texte-courant); font-weight: 600; }
.ai6-decision__montant {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ai6-decision__montant span { font-size: var(--ai6-texte-dense); }
.ai6-decision__montant b { font-size: var(--ai6-texte-vedette); font-weight: 700; }
.ai6-decision__formulaire {
  background: var(--ai6-bleu-pale);
  padding: 18px 20px 22px;
  border-radius: 0 0 var(--ai6-rayon) var(--ai6-rayon);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai6-champ { display: flex; flex-direction: column; gap: 5px; }
.ai6-champ > span { font-size: var(--ai6-texte-petit); color: var(--ai6-encre); }
.ai6-champ input,
.ai6-champ select,
.ai6-champ textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-blanc);
  font: inherit;
  font-size: var(--ai6-texte-courant);
  color: var(--ai6-bleu);
}
.ai6-champ textarea { min-height: 86px; resize: vertical; }
.ai6-champ input::placeholder,
.ai6-champ textarea::placeholder { color: var(--ai6-muet); }
.ai6-champ--montant { position: relative; }
.ai6-champ--montant input { padding-right: 30px; }
.ai6-champ__unite {
  position: absolute; right: 13px; bottom: 12px;
  color: var(--ai6-muet); font-size: var(--ai6-texte-dense);
}
.ai6-decision__valider { margin-top: 6px; }

/* Ce qui a déjà été validé, en tête du panneau : l'expert qui rouvre son dossier
 * doit savoir s'il a terminé, sans avoir à s'en souvenir. Le vert dit
 * « enregistré » ; l'incise ambre dit que le dossier a bougé depuis. */
.ai6-decision__validee {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: var(--ai6-rayon-petit);
  font-size: var(--ai6-texte-dense);
  line-height: 1.45;
  border-left: 3px solid var(--ai6-succes);
  background: var(--ai6-succes-fond);
  color: var(--ai6-succes-encre);
}
.ai6-decision__perimee {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: var(--ai6-attente-encre);
}

/* Consignes et avertissements : au-dessus de la suggestion et du montant. C'est
 * la règle de la clôture — les anomalies avant les chiffres —, et elle vaut pour
 * un écran : « ne pas régler sans validation » lu sous le bouton Valider est lu
 * trop tard. */
.ai6-decision__consignes,
.ai6-decision__alertes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ai6-decision__consigne,
.ai6-decision__alerte {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--ai6-rayon-petit);
  font-size: var(--ai6-texte-dense);
  line-height: 1.45;
  border-left: 3px solid;
}
.ai6-decision__consigne {
  background: var(--ai6-attente);
  color: var(--ai6-attente-encre);
  border-left-color: var(--ai6-attente-encre);
}
.ai6-decision__alerte {
  background: var(--ai6-alerte-fond-2);
  color: var(--ai6-alerte);
  border-left-color: var(--ai6-alerte);
}

/* Les champs qu'une marque ajoute viennent en dernier, et se distinguent de ceux
 * que tout dossier porte : un filet, pas une couleur — l'écran dirait sinon
 * qu'ils comptent davantage. */
.ai6-decision__supplement {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px solid var(--ai6-filet-sombre);
}
.ai6-champ__aide { color: var(--ai6-muet); font-size: var(--ai6-texte-mini); line-height: 1.4; }
.ai6-champ--case { flex-direction: row; align-items: center; gap: 9px; }
.ai6-champ--case input { width: auto; padding: 0; }
.ai6-champ--case > span { order: 2; }

/* ------------------------------------------------------- marques d'exploitation */

.ai6-marques { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ai6-marques__titre {
  margin: 0; font-size: var(--ai6-texte-petit); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ai6-muet);
}
.ai6-marques__liste { display: flex; flex-wrap: wrap; gap: 6px; }
/* Une marque non posée reste **lisible**, pas estompée : c'est une case à
 * cocher, pas une information secondaire. L'écart entre posée et non posée se
 * fait par le fond et le trait, jamais par l'opacité. */
.ai6-marque {
  --ai6-marque-teinte: var(--ai6-bleu);
  border: 1px solid var(--ai6-marque-teinte);
  background: transparent;
  color: var(--ai6-marque-teinte);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: var(--ai6-texte-petit);
  cursor: pointer;
}
.ai6-marque--active { background: var(--ai6-marque-teinte); color: var(--ai6-blanc); }
.ai6-marque[disabled] { cursor: default; }
.ai6-marques__note { margin: 0; font-size: var(--ai6-texte-mini); color: var(--ai6-muet); }

/* ------------------------------------------------------------------- page */

.ai6-page { background: var(--ai6-bleu-fond); min-height: 100vh; }
.ai6-page__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  padding: 26px 40px 60px;
  align-items: start;
}
.ai6-bandeau-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding: 26px 40px 0;
}
.ai6-carte {
  background: var(--ai6-blanc);
  border: 1px solid var(--ai6-ligne);
  border-radius: var(--ai6-rayon);
  box-shadow: var(--ai6-ombre);
  margin-top: 18px;
  overflow: hidden;
}
.ai6-colonne-decision { position: sticky; top: 26px; }

@media (max-width: 1100px) {
  .ai6-page__corps { grid-template-columns: 1fr; }
  .ai6-colonne-decision { position: static; }
  .ai6-entete, .ai6-bandeau-tuiles, .ai6-page__corps { padding-left: 20px; padding-right: 20px; }
}

/* ------------------------------------------------------- carrousel de photos */
/*
 * Il prend la place que la maquette donne à la vidéo, et il en garde les
 * proportions : une scène large, une bande de vignettes dessous, les repères
 * lettrés entre les deux — là où la barre de lecture porte ses chapitres.
 *
 * La scène est bornée en hauteur plutôt qu'en ratio : une photo de plafond et
 * une photo de plinthe n'ont pas le même cadrage, et un ratio fixe rognerait
 * l'une des deux exactement sur ce qu'il faut voir.
 */
ai6-carrousel-photos { display: block; }
.ai6-carrousel { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ai6-carrousel__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ai6-bleu-fond);
  border-radius: var(--ai6-rayon);
  min-height: 220px;
  overflow: hidden;
}
.ai6-carrousel__voir {
  border: 0;
  background: none;
  padding: 0;
  cursor: zoom-in;
  display: flex;
  width: 100%;
  justify-content: center;
}
.ai6-carrousel__image { max-width: 100%; max-height: 410px; object-fit: contain; display: block; }
.ai6-carrousel__absente { color: var(--ai6-muet); font-size: var(--ai6-texte-courant); padding: 40px; }
.ai6-carrousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ai6-bleu);
  background: var(--ai6-blanc);
  box-shadow: var(--ai6-ombre);
}
.ai6-carrousel__nav--prec { left: 10px; }
.ai6-carrousel__nav--suiv { right: 10px; }
.ai6-carrousel__nav:disabled { opacity: .35; cursor: default; }
.ai6-carrousel__legende {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--ai6-texte-dense);
  color: var(--ai6-muet);
}
.ai6-carrousel__rang { font-weight: 600; color: var(--ai6-bleu); flex: none; }
.ai6-carrousel__nom { color: var(--ai6-encre); }
.ai6-carrousel__reperes { display: flex; gap: 8px; flex-wrap: wrap; }
.ai6-carrousel__repere { border: 0; background: none; padding: 0; cursor: pointer; opacity: .45; }
.ai6-carrousel__repere[aria-current="true"] { opacity: 1; }
.ai6-carrousel__bande { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ai6-carrousel__vignette {
  position: relative;
  flex: none;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ai6-rayon-petit);
  overflow: hidden;
  cursor: pointer;
  background: var(--ai6-bleu-fond);
}
.ai6-carrousel__vignette[aria-current="true"] { border-color: var(--ai6-bleu); }
.ai6-carrousel__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai6-carrousel__pasdimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ai6-muet);
}
.ai6-carrousel__marque {
  position: absolute;
  left: 3px;
  top: 3px;
  background: var(--ai6-bleu);
  color: var(--ai6-blanc);
  font-size: var(--ai6-texte-mini);
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.ai6-carrousel__vide { padding: 30px 22px; color: var(--ai6-muet); font-size: var(--ai6-texte-courant); }

/* ---------------------------------------------------------- fil d'entretien */
ai6-fil-entretien { display: block; }
.ai6-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ai6-fil__tour {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ai6-ligne);
}
.ai6-fil__rang {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ai6-bleu-clair);
  color: var(--ai6-bleu);
  font-size: var(--ai6-texte-petit);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai6-fil__question { margin: 0; font-size: var(--ai6-texte-courant); color: var(--ai6-muet); }
.ai6-fil__reponse { margin: 2px 0 0; font-size: var(--ai6-texte-courant); color: var(--ai6-encre); font-weight: 600; }
.ai6-fil__provenance { margin: 2px 0 0; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
.ai6-fil__note { color: var(--ai6-muet); font-size: var(--ai6-texte-dense); margin: 0 0 10px; }
.ai6-fil__vide { color: var(--ai6-muet); font-size: var(--ai6-texte-courant); padding: 14px 0; }

/* Un bloc ou une ligne du récapitulatif qui **désigne** quelque chose — sa pièce,
 * son poste. Le curseur est la seule chose qui l'annonce avant le clic ; le fond
 * au survol dit lequel des deux on est en train de désigner, une ligne étant
 * imbriquée dans son bloc. */
.ai6-designe { cursor: pointer; }
.ai6-designe:hover { background: var(--ai6-bleu-fond); }
.ai6-designe:focus-visible { outline: 2px solid var(--ai6-bleu); outline-offset: -2px; }

/* Une pièce visitée et intacte. Grisée comme les autres états vides, mais **dans**
 * le bloc de sa pièce : c'est une constatation portée par cette pièce-là, pas
 * l'état vide de l'écran. */
.ai6-piece__sansdommage {
  margin: 0;
  padding: 4px 22px 14px;
  color: var(--ai6-muet);
  font-size: var(--ai6-texte-dense);
}

/* --------------------------------------------------- vidéo de la déclaration */
/*
 * La piste des chapitres est **sous** le lecteur, non par-dessus sa barre : les
 * contrôles natifs diffèrent d'un navigateur à l'autre, et un repère calé sur la
 * barre de Chrome tomberait à côté sur Firefox. Elle est positionnée en pour-cent
 * de la durée, ce que seul `loadedmetadata` permet de calculer.
 */
ai6-video-declaration { display: block; }
.ai6-video { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ai6-video__lecteur {
  width: 100%;
  max-height: 410px;
  background: var(--ai6-noir);
  border-radius: var(--ai6-rayon);
  display: block;
}
/* **La barre du lecteur, la nôtre** (maquette `7041:98407`, arbitrage du 30/08/2026).
 *
 * Elle remplace les contrôles natifs, et la raison est unique : les lettres des pièces
 * doivent être **sur** la piste de position. Tant que la barre était celle du navigateur,
 * elles ne pouvaient qu'être posées dessous, à une place différente sur chacun d'eux.
 *
 * Le rail porte le remplissage et le geste ; la piste, par-dessus, ne porte que les
 * repères — `poserReperes` y réécrit `innerHTML` sans emporter le remplissage. */
.ai6-video__ecran { position: relative; line-height: 0; }
.ai6-video__barre {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 6px;
  background: var(--ai6-encre);
  border-radius: 0 0 8px 8px;
}
.ai6-video__rail {
  position: relative; height: 26px; cursor: pointer;
  display: flex; align-items: center;
}
/* **Une seule ligne médiane** pour tout ce que porte le rail : le fond (le noir du film),
 * les passages filmés, le remplissage, puis les lettres et les prises, centrées dessus.
 * Chacun posé à sa hauteur, ils ne s'alignaient sur rien (DEV-11148). */
.ai6-video__rail::before,
.ai6-video__passage,
.ai6-video__progres {
  position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px;
}
.ai6-video__rail::before { content: ""; left: 0; right: 0; background: color-mix(in srgb, var(--ai6-blanc) 18%, transparent); }
.ai6-video__rail:focus-visible { outline: 2px solid var(--ai6-bleu); outline-offset: 2px; }
/* Les passages filmés, **par-dessus** le remplissage et translucides : gris clair avant
 * la lecture, bleu clair après. Le noir reste sombre dans les deux cas. */
.ai6-video__passages { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ai6-video__passage { background: color-mix(in srgb, var(--ai6-blanc) 45%, transparent); }
.ai6-video__progres { left: 0; width: 0; background: var(--ai6-bleu); }
.ai6-video__commandes { display: flex; align-items: center; gap: 8px; color: var(--ai6-blanc); }
.ai6-video__cmd {
  border: 0; background: none; padding: 2px 6px; cursor: pointer;
  color: var(--ai6-blanc); font: inherit; font-size: var(--ai6-texte-dense); line-height: 1;
  border-radius: 4px;
}
.ai6-video__cmd:hover { background: color-mix(in srgb, var(--ai6-blanc) 14%, transparent); }
.ai6-video__cmd:focus-visible { outline: 2px solid var(--ai6-blanc); outline-offset: 1px; }
/* Le titre pousse les deux dernières commandes à droite, comme la maquette. */
.ai6-video__commandes .ai6-video__titre { margin-right: auto; }
.ai6-video__commandes .ai6-video__temps { margin-right: auto; }
.ai6-video__commandes .ai6-video__titre + .ai6-video__cmd { margin-left: 0; }

.ai6-video__piste { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ai6-video__piste:empty { display: none; }
.ai6-video__repere {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  line-height: 0;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
/* Un chapitre que rien ne rattache à une pièce : une puce, pas une lettre. Une
 * lettre inventée vaudrait moins que pas de lettre du tout. */
.ai6-video__puce {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ai6-bleu);
}
.ai6-video__legende {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--ai6-texte-dense);
  color: var(--ai6-muet);
}
.ai6-video__temps { font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.ai6-video__titre { color: color-mix(in srgb, var(--ai6-blanc) 82%, transparent); }
.ai6-video__vide { padding: 30px 22px; color: var(--ai6-muet); font-size: var(--ai6-texte-courant); }

/* Le repère d'une **prise délibérée** : une puce carrée, plus petite que la pastille
 * d'une pièce, centrée comme elle sur la ligne du rail.
 *
 * Elle se distingue par sa **forme**, jamais par sa seule couleur : une piste qui se
 * lirait à la nuance ne se lit pas en plein soleil, ni par qui distingue mal les
 * couleurs. Une lettre annonce une pièce, une puce carrée une image qu'on a demandée. */
.ai6-video__prise {
  display: block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--ai6-blanc, #fff);
  border: 2px solid var(--ai6-bleu, #2f6feb);
}

/* ------------------------------------------------- visionneuse de nuage 3D */

/* La popin plein écran, son cadre et sa couche de cotes.
 *
 * Elle n'avait **aucune règle** jusqu'ici : la toile tombait sur le 300 × 150 par
 * défaut d'un `<canvas>`, et un nuage de 86 000 points se regardait par un hublot.
 * C'est ce qui rendait l'écran décevant, bien plus que la place du panneau.
 *
 * Le fond de la scène reprend **exactement** le `clearColor` du composant
 * (`0.09, 0.11, 0.12` → #171c1f). Les deux doivent rester d'accord : un écart cerne
 * le nuage d'une bande claire, visible seulement quand la toile ne remplit pas encore
 * sa boîte — c'est-à-dire à l'ouverture, une fois sur deux. */
ai6-visionneuse-3d { display: block; }

.ai6-visionneuse {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ai6-blanc);
  border-radius: var(--ai6-rayon);
  overflow: hidden;
  box-shadow: var(--ai6-ombre-fenetre-2);
}
.ai6-visionneuse__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ai6-ligne);
}
.ai6-visionneuse__titre { font-size: var(--ai6-texte-courant); font-weight: 700; color: var(--ai6-bleu); }
.ai6-visionneuse__etat {
  font-size: var(--ai6-texte-dense);
  color: var(--ai6-muet);
  font-variant-numeric: tabular-nums;
}
.ai6-visionneuse__outils { margin-left: auto; display: flex; gap: 8px; }
.ai6-visionneuse__outil {
  padding: 5px 12px;
  border: 1px solid var(--ai6-bleu-moyen);
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-blanc);
  color: var(--ai6-bleu);
  font-size: var(--ai6-texte-dense);
  font-weight: 600;
  cursor: pointer;
}
.ai6-visionneuse__outil:hover:not(:disabled) { background: var(--ai6-bleu-clair); }
.ai6-visionneuse__outil:disabled { color: var(--ai6-muet); border-color: var(--ai6-ligne); cursor: default; }
.ai6-visionneuse__outil--actif {
  background: var(--ai6-bleu);
  border-color: var(--ai6-bleu);
  color: var(--ai6-blanc);
}
.ai6-visionneuse__outil:focus-visible { outline: 2px solid var(--ai6-bleu); outline-offset: 2px; }
.ai6-visionneuse__fermer {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ai6-ligne);
  border-radius: 50%;
  background: var(--ai6-blanc);
  color: var(--ai6-encre);
  font-size: var(--ai6-texte-grand);
  line-height: 1;
  cursor: pointer;
}
.ai6-visionneuse__fermer:hover { background: var(--ai6-bleu-clair); }
.ai6-visionneuse__fermer:focus-visible { outline: 2px solid var(--ai6-bleu); outline-offset: 2px; }

/* `min-height: 0` : sans lui, un enfant en `flex: 1` refuse de descendre sous sa
 * taille de contenu, la scène déborde du cadre et le pied sort de l'écran. */
.ai6-visionneuse__scene {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--ai6-scene-3d);
}
.ai6-visionneuse__scene--mesure { cursor: crosshair; }
.ai6-visionneuse__toile { display: block; width: 100%; height: 100%; }

/* La couche des cotes. Transparente aux gestes : ils appartiennent à la toile, et une
 * couche qui les intercepterait ferait un écran qui ne tourne plus dès la première
 * mesure posée. */
.ai6-visionneuse__cotes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ai6-visionneuse__trait { stroke: var(--ai6-mesure); stroke-width: 2; }
.ai6-visionneuse__trait--vise { stroke-width: 1.5; stroke-dasharray: 5 4; }
.ai6-visionneuse__jalon { fill: var(--ai6-mesure); stroke: var(--ai6-scene-3d); stroke-width: 1.5; }
.ai6-visionneuse__jalon--vise { fill: none; stroke: var(--ai6-mesure); stroke-width: 2; }

/* Le halo (`paint-order: stroke`) plutôt qu'un cartouche : une cote se lit aussi bien
 * sur un mur clair que dans une ombre, et un rectangle opaque cacherait justement les
 * points qu'on vient de viser. */
.ai6-visionneuse__cote {
  fill: var(--ai6-blanc);
  font-size: var(--ai6-texte-dense);
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--ai6-nuit) 85%, transparent);
  stroke-width: 4;
  stroke-linejoin: round;
}

.ai6-visionneuse__pied {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-top: 1px solid var(--ai6-ligne);
}
.ai6-visionneuse__aide { margin: 0; font-size: var(--ai6-texte-petit); color: var(--ai6-muet); }
.ai6-visionneuse__reserve {
  margin: 0 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--ai6-rayon-petit);
  background: var(--ai6-attente);
  color: var(--ai6-attente-encre);
  font-size: var(--ai6-texte-petit);
}

/* Palier grand écran (01_UI.md C13) : trois tailles redéfinies, tout l'écran suit. */
@media (min-width: 1680px) {
  :root { --ai6-texte-petit: 13px; --ai6-texte-dense: 14px; --ai6-texte-courant: 15px; }
}