:root{
  --teal:#0F6E56; --teal2:#16A37B; --emerald:#1FB888; --accent:#16A37B;
  --ink:#0d1714; --ink2:#15211c;
  --muted:#5d6b64; --muted2:#636e67; /* muted2 assombri : #8a958f sur carte blanche = 3,1:1, sous le AA 4.5:1 (.src omnipresent) */
  --bg:#f4f8f6; --card:#ffffff; --line:#e9eeeb; --line2:#dde5e1;
  --side:#0e1a16; --side2:#0a120f; --sideline:rgba(255,255,255,.08); --sidetext:#a9b6af; --sidetext2:#76847c;
  /* F39 : l'ambre valait 4,45:1 sur son fond — sous le seuil AA de 4,5 pour un texte de 11,5 px. Assombri
     à 5,15:1 ; le fond ne bouge pas (la pastille reste reconnaissable au premier coup d'œil). */
  --amber:#8f5a0c; --amber-bg:#FBF1DC; --red:#a8392c; --red-bg:#FAE8E4; --blue:#155f9f; --blue-bg:#E6F0FA; --teal-bg:#E2F4ED;
  --ok:#0F6E56; /* M11 : succès (toasts) — var(--ok) était référencé sans jamais être défini */
  --grad:linear-gradient(135deg,#1FB888 0%,#0F6E56 100%);
  --shadow-sm:0 1px 2px rgba(13,23,20,.05), 0 1px 3px rgba(13,23,20,.05);
  --shadow:0 1px 2px rgba(13,23,20,.04), 0 12px 32px -10px rgba(13,23,20,.14);
  --r:14px; --r-sm:10px; --r-lg:20px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink2);background:radial-gradient(1100px 460px at 82% -8%, rgba(31,184,136,.07), transparent), var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.011em}

.shell{display:flex;min-height:100vh}
.sidebar{width:262px;flex:none;background:linear-gradient(180deg,var(--side),var(--side2));color:var(--sidetext);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 20px}
.mark{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 18px -4px rgba(31,184,136,.5)}
.brandname{font-weight:600;font-size:18px;color:#fff;letter-spacing:-.02em;line-height:1.1}
.brandsub{font-size:11.5px;color:var(--sidetext2);margin-top:1px}
.rail{display:flex;flex-direction:column;gap:3px}
.step{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--sidetext);transition:.2s;cursor:default}
.step .snum{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:rgba(255,255,255,.06);color:var(--sidetext);border:1px solid var(--sideline);flex:none;transition:.2s}
.step.done{color:#dde9e3}
.step.done .snum{background:var(--grad);color:#fff;border-color:transparent}
.step.active{background:rgba(31,184,136,.13);color:#fff}
.step.active .snum{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 0 4px rgba(31,184,136,.2)}
.sidenav{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding-top:14px;border-top:1px solid var(--sideline)}
.navlink{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--sidetext);text-decoration:none;transition:.15s}
.navlink:hover{background:rgba(255,255,255,.05);color:#fff}
.navlink.active{background:rgba(31,184,136,.15);color:#fff;box-shadow:inset 3px 0 0 var(--emerald)}
/* Icônes du menu : largeur fixe pour aligner tous les libellés sur une colonne -> lecture verticale immédiate. */
.navlink>span[aria-hidden]{width:18px;flex:none;text-align:center;font-size:14px;opacity:.92}
/* Libellé de section non repliable : repère visuel léger qui groupe les surfaces épinglées. */
.navsec{color:var(--sidetext2);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:13px 10px 5px}
.navsec:first-child{padding-top:2px}
/* Tiroirs repliables (disclosure) : en-tête de section + corps replié */
.navgrp{display:flex;flex-direction:column}
.navgrp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;cursor:pointer;font:inherit;text-align:left;color:var(--sidetext2);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:11px 10px 6px;margin-top:6px;border-radius:var(--r-sm)}
.navgrp-h:hover{color:var(--sidetext)}
.navgrp-chev{font-size:9px;line-height:1;opacity:.6;transition:transform .18s ease}
.navgrp:not(.collapsed)>.navgrp-h .navgrp-chev{transform:rotate(90deg)}
.navgrp.collapsed>.navgrp-body{display:none}
.navgrp-body{display:flex;flex-direction:column;gap:2px}
/* Repère « vous êtes ici » sur l'en-tête du tiroir contenant la vue active. La barre n'a de sens que si l'item
   actif n'est PAS visible sous l'en-tête : c'est toujours le cas en flyout desktop ; en accordéon mobile DÉPLIÉ
   l'enfant actif porte déjà sa barre, donc on retire celle de l'en-tête (cf. override @media max-width). */
.navgrp-h.active-parent{color:#fff;box-shadow:inset 3px 0 0 var(--emerald)}
/* === Sous-menus en FLYOUT latéral (desktop : sidebar latérale, > 900px) === */
@media(min-width:901px){
  /* La sidebar (position:sticky) crée un contexte d'empilement qui PIÈGE le panneau fixed du flyout (son
     z-index:1200 n'opère qu'à l'intérieur). Sur certains navigateurs, du contenu positionné plus loin dans le
     DOM peint alors PAR-DESSUS le panneau. On élève donc tout le contexte de la sidebar au-dessus du contenu
     (qui plafonne à z-index 60) tout en restant sous les modales (2000). */
  .sidebar{z-index:200}
  .navgrp{position:relative}
  .navgrp:hover>.navgrp-h,.navgrp.flyout-open>.navgrp-h{background:rgba(255,255,255,.06);color:#fff}
  .navgrp:not(.collapsed)>.navgrp-h .navgrp-chev{transform:none} /* le chevron pointe toujours vers le panneau latéral */
  .navgrp:hover>.navgrp-h .navgrp-chev,.navgrp.flyout-open>.navgrp-h .navgrp-chev{opacity:1;transform:translateX(2px)}
  /* Panneau : position:fixed (coords posées par JS) -> hors flux, échappe au clip overflow de la sidebar.
     visibility bascule INSTANTANÉMENT à l'ouverture (enfants focusables sans délai) et seulement APRÈS le fondu à la fermeture. */
  .navgrp-body{position:fixed;left:0;top:0;width:max-content;min-width:236px;max-width:300px;
    background:linear-gradient(180deg,#142420,#0f1c18);border:1px solid var(--sideline);border-radius:13px;
    box-shadow:0 24px 54px -16px rgba(0,0,0,.72),0 4px 12px rgba(0,0,0,.4);
    padding:8px;gap:2px;z-index:1200;max-height:80vh;overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transform:translateX(-7px);pointer-events:none;
    transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
  .navgrp.collapsed>.navgrp-body{display:flex} /* l'accordéon ne pilote plus l'affichage : flyout-open le fait */
  .navgrp.flyout-open>.navgrp-body{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .14s ease,transform .14s ease,visibility 0s}
  /* Libellé long (ex. « Référentiel central (opérateur) ») : retour à la ligne propre, icône calée sur la 1ʳᵉ ligne. */
  .navgrp-body .navlink{font-size:13px;align-items:flex-start;color:#e8f2ec}
  .navgrp-body .navlink:hover{background:rgba(255,255,255,.08);color:#fff}
}
/* PORTAL flyout (27/07) : le panneau ouvert est DÉPLACÉ dans <body> par NavFlyout — il échappe ainsi au
   transform du drawer (containing block), à l'overflow de la sidebar et à toute égalité de stacking
   (sidebar 200 = palette 200). HORS media query à dessein : même si l'état CSS/JS se désynchronise
   (zoom à la frontière du seuil, bundle mixte après déploiement), un panneau détaché reste lisible et
   AU-DESSUS du contenu (1900, sous les modales 2000). */
.navgrp-body.vg-flyout-detache{position:fixed;left:0;top:0;width:max-content;min-width:236px;max-width:300px;
  display:flex;flex-direction:column;color:var(--sidetext,#cfe0d8);
  background:linear-gradient(180deg,#142420,#0f1c18);border:1px solid var(--sideline,#27433a);border-radius:13px;
  box-shadow:0 24px 54px -16px rgba(0,0,0,.72),0 4px 12px rgba(0,0,0,.4);
  padding:8px;gap:2px;z-index:1900;max-height:80vh;overflow-y:auto;overscroll-behavior:contain;
  visibility:visible;opacity:1;transform:none;pointer-events:auto}
.navgrp-body.vg-flyout-detache .navlink{background:none;border:none;width:100%;text-align:left;cursor:pointer;font:inherit;font-size:13px;align-items:flex-start;color:#e8f2ec} /* reset bouton : hors .sidenav (portal), l'UA remettait ButtonFace gris clair -> texte invisible */
.navgrp-body.vg-flyout-detache .navlink:hover{background:rgba(255,255,255,.08);color:#fff}
.navutil{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--sideline)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--sidetext2);padding:12px 10px 2px;border-top:1px solid var(--sideline);line-height:1.45}
.statusdot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(31,184,136,.22);flex:none}
/* M14 : pastille de PANNE — basculée par sonderSante()/offline. var(--red) est déclinée clair + sombre. */
.statusdot.off{background:var(--red);box-shadow:0 0 0 3px rgba(168,57,44,.22)}
.side-foot b{color:#cdd8d2;font-weight:600}

.canvas{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--line);background:var(--bg)}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);font-weight:600}
.topttl{font-size:17px;font-weight:600;margin-top:3px;letter-spacing:-.02em}
.topnav{font-size:13px;color:var(--teal);text-decoration:none;font-weight:600;padding:8px 15px;border:1px solid var(--line2);border-radius:99px;transition:.2s;background:#fff}
.topnav:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.stage{padding:30px 24px;max-width:840px;width:100%;margin:0 auto;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

#content{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px 30px}

.cop{display:block;background:linear-gradient(135deg,#eff7f3,#edf6f1);border:1px solid #e3efe9;border-radius:var(--r);padding:13px 15px;margin-bottom:22px}
.cop>summary{list-style:none}
.cop>summary::-webkit-details-marker{display:none}
.cop>summary::after{content:"›";margin-left:auto;transform:rotate(90deg);opacity:.6}
.cop[open]>summary::after{transform:rotate(-90deg)}
.cop .av{width:26px;height:26px;border-radius:8px;font-size:11px}
.av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none;color:#fff;box-shadow:var(--shadow-sm)}
.av.iris{background:linear-gradient(135deg,#1FB888,#0F6E56)}
.av.oscar{background:linear-gradient(135deg,#3E8FE0,#185FA5)}
.av.bea{background:linear-gradient(135deg,#8B7BEC,#5A4FB8)}
.av.cass{background:linear-gradient(135deg,#E6A53D,#B5740F)}
.av.vesta{background:linear-gradient(135deg,#E8795A,#C0492A)}
.av.soren{background:linear-gradient(135deg,#E26FA0,#B23E6B)}

h1{font-size:21px;font-weight:600;margin:0 0 5px;letter-spacing:-.025em}
.sub{color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.55}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
/* F52 — le nom d’une ligne s’étire, et sous 600 px il prend sa ligne entière (bloc mobile). Une
   CLASSE et non un style en ligne : un style en ligne bat la feuille, et c’est ce qui a forcé la
   règle voisine du cockpit à s’armer d’un !important pour se faire entendre. */
.row-nom{flex:1 1 auto;min-width:0}
.row:last-child{border-bottom:none}
/* Le focus programmatique posé sur le titre de la vue (a11y, changement d'écran) ne doit pas afficher d'anneau. */
[tabindex="-1"]:focus{outline:none}
/* Combobox recherche : surlignage de l'option active (navigation aux flèches, aria-activedescendant). */
#usearch-results .clickrow.usactive{background:rgba(31,184,136,.14)}
/* F35 — UNE LIGNE CLIQUABLE DOIT AVOIR L’AIR CLIQUABLE. `.clickrow` habille deux choses très
   différentes : des <div> de liste, qui héritent du fond de leur carte, et de vrais <button> (résultats
   de l’annuaire officiel, suggestions de client) auxquels le navigateur impose son ButtonFace gris et sa
   police système. La règle de base ne touche donc que les BOUTONS ; le survol, lui, vaut pour les deux —
   c’est le seul signal qui dit « ceci répond au clic » avant le clic. */
.clickrow{cursor:pointer}
button.clickrow{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
.clickrow:hover{border-color:var(--teal2);box-shadow:var(--shadow-sm)}
.row>*{min-width:0}
.src{font-size:11.5px;color:var(--muted2)}
label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 5px;font-weight:500}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:#fcfdfd;transition:.18s}
textarea{resize:vertical} /* resize réservé aux textarea : sur input, Chrome affichait des poignées sur les champs date */
/* Cases et radios : jamais étirées ni rembourrées — width:100% éjectait le libellé des labels flex dans une
   colonne écrasée hors carte (retour user 29/07, Identité > Automatisations, labels sans la classe .chk). */
input[type="checkbox"],input[type="radio"]{width:auto;flex:0 0 auto;padding:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal2);box-shadow:0 0 0 4px rgba(31,184,136,.15);background:#fff}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.chk{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14px}
.chk input{width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);background:var(--grad);color:#fff;border:none;border-radius:var(--r-sm);padding:12px 20px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 8px 18px -7px rgba(15,110,86,.55);transition:.18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -7px rgba(15,110,86,.6)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn.alt{background:#fff;color:var(--ink2);border:1px solid var(--line2);box-shadow:var(--shadow-sm);font-weight:500}
.btn.alt:hover{border-color:var(--teal2);color:var(--teal)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line2);box-shadow:none}
/* F30 : action secondaire rendue comme un LIEN (bouton pour le registre CSP, pas un <a href="#">) — l'écran scellé n'a qu'un primaire. */
.btnlien{display:inline-flex;align-items:center;min-height:24px;background:none;border:0;padding:0 2px;margin:0;color:var(--teal);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit;font-size:inherit}
.btnlien:hover{color:var(--ink2)}
.bar{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* F46 : ligne d'aide contextuelle en tête d'étape — sobre, sans avatar ni prénom (ex-bandeau .cop). */
.aide-etape{margin:0 0 14px;padding:0 0 0 11px;border-left:2px solid var(--line2);color:var(--muted);font-size:13.5px;line-height:1.5}
/* W5C (F35-F37) : onglets de l'identité ; barre d'action collante sur tout écran (pas seulement mobile) ;
   contrôles natifs habillés (dates, couleur, fichier suivent le thème) ; liens lisibles en sombre. */
.vg-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line2);margin:14px 0 10px}
.vg-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 12px;font:inherit;font-size:14px;color:var(--ink2);cursor:pointer;border-radius:6px 6px 0 0}
.vg-tab:hover{background:var(--teal-bg)}
.vg-tab.on,.vg-tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
.bar.collant{position:sticky;bottom:0;background:var(--bg);padding:10px 0 max(10px,var(--sab,0px));z-index:5;margin-top:12px;border-top:1px solid var(--line2);align-items:center}
/* F25 — UN CTA COLLANT QUI NE COLLE QU'AU TÉLÉPHONE NE COLLE PAS. Cette règle vivait dans le bloc
   mobile, sous les 600 px : sur un écran de bureau, « Continuer » restait à 979 px du haut, sous la
   liste des pièces et l'encart d'extraction — et le professionnel, lui, travaille au bureau. */
.bar.cta-collant{position:sticky;bottom:0;background:var(--bg);padding:10px 0 max(10px,var(--sab,0px));z-index:5;margin-top:12px}
input[type="date"],input[type="color"],input[type="file"]{color-scheme:light}
[data-theme="dark"] input[type="date"],[data-theme="dark"] input[type="color"],[data-theme="dark"] input[type="file"]{color-scheme:dark}
input[type="file"]{padding:8px 10px;cursor:pointer}
input[type="file"]::file-selector-button{font:inherit;font-size:13px;padding:6px 12px;margin-right:10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);cursor:pointer}
input[type="color"]{height:44px;padding:4px 6px}
#content a{color:var(--teal)}
[data-theme="dark"] #content a{color:#7fe0c0}
.chip{display:inline-block;line-height:1.2;vertical-align:middle;font-size:11.5px;padding:4px 11px;border-radius:99px;font-weight:600;white-space:nowrap}
/* F69 — ÉTAT DE BASE DU CHIP-BOUTON. `.chip` n'habillait que la forme : un <button class="chip"> sans
   variante retombait donc sur le rendu natif du navigateur — fond ButtonFace rgb(239,239,239), texte noir,
   bordure outset. C'est ce qu'on voyait sur les filtres « En cours / Scellés / Clôturés » : impossible de
   dire lequel était actif, et un produit qui a l'air inachevé là où il demande le plus de confiance.
   `button.chip` (0,1,1) l'emporte sur `.ok` (0,1,0) : les variantes sont donc re-déclarées juste dessous,
   sinon la base éteindrait leur couleur. */
button.chip{background:var(--card);color:var(--ink2);border:1px solid var(--line2);cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;transition:.15s}
/* Chips-BOUTONS (copier, suggestions, filtres) : cible tactile relevée — les chips-badges (span) restent fins.
   ⚠️ CETTE RÈGLE DOIT RESTER AVANT LE BLOC MOBILE. Elle vivait deux cents lignes plus bas, donc APRÈS la
   règle qui donne 44 px aux mêmes boutons sur petit écran : à spécificité égale, la dernière écrite gagne,
   et la cible tactile de 44 px était annulée pour tout le monde (mesuré à 221 × 32 px sur iPhone 13).
   Une garde de test surveille désormais l'ordre — voir test/ux-cibles-tactiles-mobile.test.mjs. */
button.chip{min-height:32px;padding-top:7px;padding-bottom:7px}
button.chip:hover{border-color:var(--teal2);color:var(--teal)}
button.chip.ok{background:var(--teal-bg);color:#0b5a45;border-color:transparent}
button.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:transparent}
button.chip.bad{background:var(--red-bg);color:var(--red);border-color:transparent}
button.chip.info{background:var(--blue-bg);color:var(--blue);border-color:transparent}
button.chip.neutre{background:transparent;color:var(--muted);border-color:var(--line)}
/* Filtre COURANT : l'état se lit sur aria-pressed — la même vérité pour l'oeil et pour le lecteur d'écran. */
button.chip[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
button.chip[aria-pressed="true"]:hover{color:#fff}
/* F69 — menu « Exporter ▾ » : <details>/<summary> natif, aucun handler inline (CSP). Le summary porte
   l'habillage d'un bouton secondaire ; le panneau se pose au-dessus du contenu sans le déplacer. */
.menuexp{position:relative;display:inline-block}
.menuexp>summary{list-style:none;cursor:pointer}
.menuexp>summary::-webkit-details-marker{display:none}
.menuexp-p{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:230px;display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.menuexp-p>*{text-align:left;white-space:normal}
/* F68 : erreur de BLOC — jamais une pilule. Pleine largeur, 13,5 px, bordure gauche ; role=alert posé par le balisage (vgNotice). */
.notice{display:block;font-size:13.5px;line-height:1.45;font-weight:500;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);border-left:3px solid var(--muted);margin:0 0 12px;white-space:normal}
.notice.bad{background:var(--red-bg);color:var(--red);border-left-color:var(--red)}
.notice.warn{background:var(--amber-bg);color:var(--amber);border-left-color:var(--amber)}
.notice.info{background:var(--blue-bg);color:var(--blue);border-left-color:var(--blue)}
/* F68 — LE BLOC D'ERREUR SE REPÈRE AVANT D'ÊTRE LU. Sur un écran dense, .notice se confondait avec un
   paragraphe encadré : rien, à l'œil qui balaie, ne disait « ceci est à traiter ». Le pictogramme sert de
   repère, pas de sémantique — la couleur et la bordure portent déjà la gravité, l'icône dit seulement que
   le bloc n'est pas du corps de texte. D'où le même signe pour l'erreur et l'avertissement.
   \FE0E (VS15) force la présentation TEXTE : sans lui, ⚠ bascule en emoji couleur sur iOS et Android, et
   un bloc sobre devient un panneau routier jaune au milieu d'un formulaire. Décoratif : un ::before n'entre
   pas dans le nom accessible du bloc, que role=alert fait déjà lire en entier. */
.notice::before{margin-right:7px;font-weight:700;opacity:.9}
.notice.bad::before,.notice.warn::before{content:"\26A0\FE0E"}
.notice.info::before{content:"\2139\FE0E"} /* inline-block : en inline pur, le padding vertical ne pousse pas la boîte de ligne -> la pastille chevauchait les lignes voisines d'un paragraphe (vu sur Identité, fiche RBE) */
.ok{background:var(--teal-bg);color:#0b5a45}.warn{background:var(--amber-bg);color:var(--amber)}.bad{background:var(--red-bg);color:var(--red)}.info{background:var(--blue-bg);color:var(--blue)}.neutre{background:transparent;border:1px solid var(--line);color:var(--muted)}
/* Chip utilise en BANNIERE pleine largeur (display:block) : doit pouvoir s'enrouler, sinon le texte long est coupe (overflow-x:hidden global) */
.chip[style*="display:block"]{white-space:normal;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r);font-size:14px;font-weight:600;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.spin{width:16px;height:16px;border:2.5px solid rgba(15,110,86,.18);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.loadwrap{padding:34px 0;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:10px}

/* cockpit */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:linear-gradient(160deg,#fbfdfc,#f3f9f6);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;transition:.2s}
.kpi:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500}
.kpi .v{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.03em}
/* Conteneur de tableau a defilement horizontal : evite qu'une table large soit CLIPPEE sous 600px (mobile). */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.risk{display:flex;align-items:center;gap:10px;background:var(--red-bg);color:var(--red);border:1px solid #f1d6d0;border-radius:var(--r);padding:11px 14px;font-size:13.5px;margin-bottom:18px;font-weight:500}
.ag{padding:13px 8px;border-radius:var(--r-sm);cursor:pointer;transition:.15s}
.ag:hover{background:#f7fbf9}
.agh{display:flex;align-items:center;gap:14px}
.agbar{height:7px;border-radius:99px;background:#eef2f0;overflow:hidden;width:132px;flex:none}
.agbar>div{height:100%;border-radius:99px;transition:width .45s ease}
h2{font-size:15px;font-weight:600;margin:24px 0 10px;letter-spacing:-.015em}
table{width:100%;border-collapse:collapse;font-size:13.5px}
td,th{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500;font-size:12px}

/* Cartographie des risques : une carte editable par facteur */
.cl-row{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:10px 0;background:#fcfdfd}
/* .card : conteneur encadre (9 usages dans app.js, dont les encarts juridiques Tracfin/purge) — meme motif que .cl-row. */
.card{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:10px 0;background:#fcfdfd}
.cl-fact{font-weight:600;font-size:13.5px;margin-bottom:2px}
/* F10 : mise en route — le rang de l'étape se lit dans une pastille, la progression se chiffre en tête. */
.dem-num{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--teal-bg);color:#0b5a45}
.dem-prog{font-weight:600;margin:0 0 10px}
.cl-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
[data-theme="dark"] .cl-row{background:#0f1b16;border-color:#21332b}
[data-theme="dark"] .card{background:#0f1b16;border-color:#21332b}
/* Maturite : grand score */
.mat-score{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;flex:none}
.mat-score span{font-size:15px;font-weight:600;color:var(--muted2);margin-left:2px}
.mat-score.ok{color:#0b5a45}.mat-score.warn{color:var(--amber)}.mat-score.bad{color:var(--red)}.mat-score.info{color:var(--muted)}

/* === Coque responsive : sidebar laterale (desktop) -> drawer off-canvas (<=900px) === */
.hamb{display:none}
.scrim{display:none}
/* Verrou du scroll de fond quand une surface modale est ouverte : règle GLOBALE (couvre aussi les modales et la
   palette ⌘K sur un desktop à fenêtre étroite <900px avec souris, hors media query tactile).
   Il agit par PROPAGATION de l'overflow de body au viewport, donc SEULEMENT tant que html reste `overflow:visible`
   (responsive-12 : `html{overflow-x:clip}` dans tokens.css l'avait rendu inerte — cf. tokens.css, body{overflow-x}). */
body.vg-noscroll{overflow:hidden}
.topsearch{flex:1;max-width:420px;margin:0 16px}
.toptitle{min-width:0}
.topttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 900.98 (et non 900) ferme la zone morte fractionnaire 900<w<901 — zoom/DPR non entier — où ni le drawer
   ni le flyout (min-width:901) ne s'appliqueraient, laissant les tiroirs déployés inline. */
@media(max-width:900.98px){
  /* Sidebar -> drawer : reste en COLONNE (jamais le magma de pastilles), glisse depuis la gauche */
  .sidebar{position:fixed;left:0;top:0;height:100dvh;width:min(86vw,320px);transform:translateX(-100%);
    transition:transform .28s ease;z-index:1000;box-shadow:0 18px 50px rgba(8,16,13,.4);
    padding-top:max(22px,var(--sat));padding-bottom:max(16px,var(--sab));padding-left:max(16px,var(--sal));overflow-y:auto}
  .sidebar.open{transform:translateX(0)}
  .side-foot{display:flex}
  /* Accordéon mobile : tiroir actif DÉPLIÉ -> l'enfant actif porte déjà sa barre, on retire celle de l'en-tête (pas de double barre). */
  .navgrp:not(.collapsed)>.navgrp-h.active-parent{box-shadow:none}
  .navlink,.step,.navgrp-h{min-height:var(--tap)}
  /* Scrim plein ecran ferme le drawer au tap */
  .scrim{display:block;position:fixed;inset:0;background:rgba(8,16,13,.46);z-index:999;opacity:0;visibility:hidden;transition:opacity .28s}
  .scrim.show{opacity:1;visibility:visible}
  /* (verrou de scroll body : désormais règle GLOBALE, cf. plus haut) */
  /* Hamburger >=44px + topbar reorganisee (recherche pleine largeur en 2e ligne) */
  .hamb{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);
    flex:none;border:1px solid var(--line2);background:#fff;border-radius:11px;font-size:19px;color:var(--ink2);cursor:pointer;padding:0}
  .topbar{flex-wrap:wrap;gap:10px;padding:max(12px,var(--sat)) max(16px,var(--sar)) 12px max(16px,var(--sal))}
  .toptitle{flex:1}
  .topttl{font-size:16px}
  .topsearch{order:5;flex-basis:100%;max-width:none;margin:0}
  .topnav{display:none}
  #bell{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
  #bell-badge{top:2px!important;right:2px!important}
  #notifs-panel{position:fixed!important;left:8px!important;right:8px!important;top:62px!important;width:auto!important;max-width:none!important}
  /* Champs >=16px : supprime le zoom automatique iOS au focus */
  input,select,textarea,#usearch{font-size:16px}
  /* Densite : recuperer de la largeur utile sur petit ecran */
  .stage{padding:18px 16px}
  #content{padding:20px 18px}
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
/* W4B (F18) : un bloc masqué par l'attribut hidden le reste, même s'il porte une classe d'affichage (.grid) ;
   et le CTA de l'étape 1 colle au bas de l'écran sur mobile. */
[hidden]{display:none!important}
@media(max-width:600px){
  #content{padding:16px 14px}
  /* === F52 — une main, dans le métro ===
     Mesuré sur iPhone 13 (390×664) : la barre supérieure tenait deux rangs (123 px, 18,5 % de la hauteur) et
     s'en allait au premier défilement ; la recherche mangeait le second rang alors qu'on la sollicite rarement.
     Elle se replie donc derrière une loupe et ne se déplie qu'au focus — pointeur ET clavier (:focus-within).
     La barre, elle, reste visible : c'est le seul chemin vers le menu et les notifications. */
  .topbar{position:sticky;top:0;z-index:60;flex-wrap:nowrap;gap:8px}
  .topsearch{order:0;flex:0 0 var(--tap);min-width:var(--tap);max-width:var(--tap);margin:0}
  .topsearch::before{content:"🔍";position:absolute;left:0;top:0;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;font-size:15px;pointer-events:none}
  .topsearch:not(:focus-within) #usearch{color:transparent;padding-left:0;padding-right:0}
  .topsearch:not(:focus-within) #usearch::placeholder{color:transparent}
  .topsearch:focus-within{order:5;flex:1 1 100%;min-width:0;max-width:none;margin-top:8px}
  .topsearch:focus-within::before{content:none}
  .topsearch #usearch{min-height:var(--tap)}
  .toptitle{flex:1;min-width:0}
  /* === responsive-03 — RENDRE SA PLACE AU TITRE D'ÉCRAN ===
     Mesuré : 70 px pour le titre à 375, 15 px à 320, sur les vingt-sept vues. La barre est en `nowrap`
     (choix de F52 : un seul rang) et le titre y est le seul élément élastique — il absorbe donc toute la
     contrainte de quatre largeurs fixes. On en retire deux, et on rend le titre repliable.
       · le badge « ⌘K » : un raccourci CLAVIER n'a rien à faire sur un écran qu'on touche. Il n'était
         retiré que par @media(hover:none), donc conservé à l'émulation et sur une fenêtre étroite de
         bureau. Le raccourci lui-même reste armé (gestionnaire clavier, app.js) : on masque un rappel,
         pas une fonction.
       · le mot « Aide » : le bouton garde sa cible de 44 px et son nom accessible (data-i18n-aria) —
         seul le mot s'efface, le « ? » demeure.
       · le titre : deux lignes autorisées, et `overflow-wrap:anywhere` pour qu'une graphie plus large que
         la place restante (allemand, néerlandais) se coupe au lieu de déborder sous l'ellipse. */
  #vg-pal-btn{display:none}
  #vg-aide-btn span[data-i18n]{display:none}
  .toptitle .eyebrow{display:none}
  .topttl{font-size:15px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Cibles ≥ 44 px (WCAG 2.5.5) sur les gestes RÉPÉTÉS : le fil d'Ariane (mesuré à 15 px), le menu « ⋯ » d'une
     ligne du Brief, les chips-boutons (relevées jusqu'ici sur le seul pointeur grossier). */
  .fil-ariane a,.fil-ariane button,.fil-ariane [role="button"]{min-height:44px;display:inline-flex;align-items:center}
  .brief-plus>summary{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
  button.chip{min-height:44px;padding-top:11px;padding-bottom:11px}
  /* Cases à cocher : mesurées à 13 × 13 px sur iPhone 13 — la plus petite cible de l'étape 1, et l'une des
     plus lourdes de conséquence (origine des fonds, destination, faits de risque). La RANGÉE entière fait
     44 px (le libellé est cliquable : c'est un <label>), et la case elle-même 24 px. */
  .chk{min-height:44px}
  .chk input[type="checkbox"],.chk input[type="radio"]{width:24px;height:24px;flex:0 0 24px}
  /* Deuxième passe de mesure (iPhone 13, 390 × 664, écrans « Mes dossiers » et « Nouveau dossier ») :
     la première vague avait gagné les rangées de cases et les puces du Brief, mais quatre gestes très
     répétés restaient sous la cible. Le bouton d'aide de terme, d'abord : 17 × 13 px, et il revient à
     chaque mot de jargon d'une étape. On étend sa ZONE DE FRAPPE sans grossir le pictogramme — un ⓘ de
     44 px au milieu d'une phrase casserait la ligne de texte. */
  .vg-aide-b{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;vertical-align:middle}
  /* Les deux boutons de la barre supérieure (palette de commandes, aide de l'écran) : 29 px de haut,
     présents sur TOUS les écrans, en haut, sous le pouce. */
  #vg-pal-btn,#vg-aide-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Les résumés dépliables du contenu (« Pourquoi cette étape ? », « Précisions », « Contrepartie ») :
     mesurés entre 20 et 34 px. Le menu « ⋯ » du Brief a déjà sa règle, plus haut. */
  #content details>summary{min-height:44px;display:flex;align-items:center}
  /* Le lien vers la sécurité du compte, sous le nom du collaborateur : 214 × 16 px, souligné comme un
     lien mais rendu par un bouton. C'est le chemin vers le second facteur et les sessions ouvertes. */
  button.linklike{min-height:44px;display:inline-flex;align-items:center}
  /* Aucun défilement horizontal du corps : une ligne trop large s'empile au lieu d'écraser le nom du dossier
     dans une colonne de 58 px (les tableaux gardent leur propre .tbl-wrap). */
  body{overflow-x:hidden}
  .row{flex-wrap:wrap}
  .bar{flex-wrap:wrap}
  /* Lignes de detention (beneficiaires) : empilement plein-largeur (neutralise les flex:N inline) */
  .det-row{flex-direction:column;align-items:stretch}
  .det-row>input,.det-row>select,.det-row>button{flex:1 1 auto!important;width:100%}
  /* Cockpit : lignes d'agence -> nom en pleine largeur, barre+score+chip sur la 2e ligne */
  .agh{flex-wrap:wrap;gap:8px 10px}
  .agh>div:first-child{flex-basis:100%!important}
  /* Brief : le nom du dossier avait ~50 px une fois les deux pastilles et le bouton posés — « Cabinet
     Dubois-Lantier » s’y coupait sur cinq lignes. Il prend sa ligne ; le reste suit dessous. */
  .row>.row-nom{flex-basis:100%}
  /* Le bouton natif du champ fichier : la plus petite cible de l’étape Pièces, celle qu’on fait au
     téléphone avec l’appareil photo à la main. */
  input[type="file"]::file-selector-button{min-height:44px;padding:0 14px}
  .agbar{flex:1;width:auto}
  .cl-2{grid-template-columns:1fr} /* risque brut / net empiles sur petit ecran */
}

/* accessibilité */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.clickrow:focus-visible,.ag:focus-visible{outline:2px solid var(--teal2);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* bascule de thème + thème sombre (application + cockpit) */
.sidenav button.navlink{background:none;border:none;width:100%;text-align:left;cursor:pointer;font:inherit}
/* F41 — UNE ENTRÉE D'ONGLET N'EST PAS UNE ENTRÉE DE COLONNE. Le Journal et le Tableau de bord sont des
   onglets de Surveillance, les trois écrans de formation les onglets d'une seule entrée : leur bouton
   reste dans le DOM — c'est lui que `navlinkNavigable` trouve, que la barre d'onglets dessine et que le
   clic d'onglet actionne — mais il ne s'affiche pas deux fois. Masqué par la FEUILLE, jamais par
   `style.display` : cet attribut-là porte le gating par rôle, et s'en servir ici rendait l'écran
   inatteignable au lieu de le ranger. C'est exactement ce qui était arrivé. */
/* ⚠️ ET AUSSI DANS LE PANNEAU DÉTACHÉ. NavFlyout sort le corps du tiroir ouvert dans <body> : une règle
   qui ne parle que de `.sidenav` cesse de s'appliquer, et les entrées rangées en onglet — les trois
   « Formation » — réapparaissent en double dans le flyout, là où elles sont le plus visibles. */
.sidenav .navlink[data-onglet-de], .vg-flyout-detache .navlink[data-onglet-de]{display:none}
/* F41 — LE PREMIER JOUR, LA COLONNE TIENT EN QUATRE GESTES. Les entrées marquées `data-jour1` restent,
   le tiroir « Mon cabinet » aussi (la mise en route y vit) ; le reste se replie. Le pied de menu n'est
   pas un enfant direct de .sidenav : il ne bouge pas, et c'est lui qui porte le geste pour déplier.
   ⚠️ PAR LA FEUILLE, JAMAIS PAR style.display — cet attribut porte le gating par RÔLE, et s'en servir
   ici rendrait les entrées repliées non navigables (onglets, palette, liens profonds). Corollaire : une
   règle de feuille ne bat pas un style inline, donc ce repli ne peut RIEN rouvrir que le rôle a fermé. */
.sidenav.vg-jour1 > .navsec,
.sidenav.vg-jour1 > .navlink:not([data-jour1]),
.sidenav.vg-jour1 > #grp-conformite{display:none}
:root[data-theme="dark"]{
  --bg:#0a120f;--card:#101d18;--ink:#eef5f1;--ink2:#dfeae4;--muted:#9aa8a0;--muted2:#7a8780;
  --line:#1b2a23;--line2:#243731;--teal-bg:#0f2e27;--amber-bg:#2f2511;--red-bg:#34201c;--blue-bg:#15273a;--accent:#7fe0c0;
  /* Accents ECLAIRCIS pour le texte/les nombres sur fond sombre (KPI, score maturite, bannieres) : les accents
     clairs (#0F6E56/#9c6310/#a8392c/#155f9f) etaient illisibles en dark. Les chips .ok/.warn/.bad sont deja
     surchargees plus bas, donc cette redefinition ne touche que le texte d'accent. */
  --teal:#7fe0c0;--amber:#e8c069;--red:#f0a99e;--blue:#8fc0ee;
  --ok:#7fe0c0; /* M11 : déclinaison sombre du token de succès */
}
[data-theme="dark"] .mat-score.ok{color:#7fe0c0}
[data-theme="dark"] .cop{background:#13211c;border-color:#21332b}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0e1a15;border-color:#243731;color:var(--ink2)}
[data-theme="dark"] .kpi{background:linear-gradient(160deg,#13211c,#0f1b16);border-color:#21332b}
[data-theme="dark"] .topnav{background:#13211c;color:#79d9bb;border-color:#243731}
[data-theme="dark"] .agbar{background:#1c2c25}
[data-theme="dark"] .ag:hover{background:#13211c}
[data-theme="dark"] .btn.alt{background:#13211c;color:var(--ink2);border-color:#243731}
[data-theme="dark"] .risk{background:#2a1714;border-color:#3a221d;color:#f0a99e}
[data-theme="dark"] .ok{background:#0f2e27;color:#7fe0c0}
[data-theme="dark"] .warn{background:#322611;color:#e8c069}
[data-theme="dark"] .bad{background:#34201c;color:#f0a99e}
[data-theme="dark"] .info{background:#15273a;color:#8fc0ee}
[data-theme="dark"] .neutre{background:transparent;border-color:#2a3340;color:var(--muted)}

/* === Modale maison (remplace les confirm/prompt natifs) : theme-aware, tactile, safe-area === */
.btn.danger{background:linear-gradient(135deg,#c0492a,#9c2f22);box-shadow:0 8px 18px -7px rgba(168,57,44,.55)}
@media(hover:hover){.btn.danger:hover{box-shadow:0 12px 24px -7px rgba(168,57,44,.62)}}
.vgm-back{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:16px;padding-bottom:max(16px,var(--sab));background:rgba(8,16,13,.5);opacity:0;transition:opacity .2s}
.vgm-back.show{opacity:1}
.vgm{width:100%;max-width:440px;max-height:90dvh;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(8,16,13,.4);padding:22px;
  transform:translateY(10px) scale(.985);transition:transform .22s ease}
.vgm-back.show .vgm{transform:none}
.vgm h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.vgm p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 12px}
.vgm input{margin-top:4px}
.vgm-acts{display:flex;gap:10px;margin-top:18px}
.vgm-acts .btn{flex:1}
.vgm-danger h3{color:var(--red)}

/* === Copilote : fil de discussion multi-tours === */
.cop-suggs .cop-sugg{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.cop-suggs .cop-sugg:hover{border-color:var(--teal);color:var(--teal)}
.cop-msg{margin:8px 0;padding:8px 11px;border-radius:var(--r-sm);border:1px solid var(--line)}
.cop-msg.cop-vous{background:var(--blue-bg);border-color:transparent}
.cop-msg.cop-ia{background:var(--teal-bg);border-color:transparent}
.cop-msg .src{font-weight:600;font-size:11.5px}
.cop-copy{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--muted);padding:2px 9px}
.cop-copy:hover{color:var(--teal);border-color:var(--teal)}

/* Tactile : pas de hover collant (le :hover translate resterait fige apres un tap) */
@media(hover:none){
  .btn:hover,.btn.alt:hover,.btn.ghost:hover,.kpi:hover,.topnav:hover,.ag:hover{transform:none}
  /* Cible tactile confortable (≥44px, WCAG 2.5.5) pour l'action la plus RÉPÉTÉE du parcours : les chips-boutons
     « Copier »/suggestions/filtres, souvent ratées au pouce à 32px. Les chips-badges (span) restent fins. */
  button.chip{min-height:44px;padding-top:11px;padding-bottom:11px}
}

/* === Impression (rapport de controle RCCI / dossier de preuve) : on retire tout le chrome de l'app === */
@media print{
  .sidebar,.scrim,.hamb,.topbar,.bar,.topsearch,.topnotifs,#notifs-panel,#usearch-results{display:none!important}
  .shell,.canvas{display:block}
  .stage{padding:0;max-width:none;margin:0;animation:none}
  #content{box-shadow:none;border:none;border-radius:0;padding:0}
  body{background:#fff}
  a[href]{text-decoration:none;color:inherit}
}

/* Tactile (pas de clavier physique) : le rappel Cmd/Ctrl+Entree et le bouton de palette n'ont pas de sens. */
@media (hover: none){ .cop-hint,#vg-pal-btn{display:none} }

/* Marqueur de champ requis (formulaire Nouveau dossier). */
.req{color:var(--red);font-weight:700;margin-left:2px}


/* Fil copilote : journal de conversation a defilement INTERNE (jusqu'a 24 tours persistes) — la fiche reste compacte. */
#cop_rep{max-height:46vh;overflow-y:auto}

/* Barre de progression du flow (F31) : les retours d'etape (« Etape precedente », « Revenir a l'etape en
   cours ») se voient a TOUTES les largeurs ; seul le compteur « 2 / 6 » est reserve au tiroir ferme
   (mobile/tablette), ou le rail lateral n'est pas visible. */
.flow-prog{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;font-weight:600}
.flow-prog-cpt{display:none}
@media (max-width:900.98px){ .flow-prog-cpt{display:inline} }

/* Décomposition dépliable (écran AMLR 2027) : un domaine d'obligation montre son chiffre en tête et sa
   décomposition à la demande. Le marqueur natif est conservé — c'est lui qui dit « ça s'ouvre » — mais
   l'intitulé reçoit l'air et la cible tactile du reste du produit, et le focus clavier reste visible. */
details.card > summary{cursor:pointer;min-height:34px;padding:4px 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
details.card > summary::-webkit-details-marker{margin-right:4px}
details.card > summary:focus-visible{outline:2px solid var(--teal,#0f6e56);outline-offset:2px;border-radius:6px}
details.card[open] > summary{margin-bottom:6px;border-bottom:1px solid var(--line2,#dde5e1);padding-bottom:8px}

/* F57 : l'erreur de saisie vit SOUS le champ fautif ; la bordure la signale avant même qu'on lise. */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 2px var(--red-bg)}
.err-champ{color:var(--red);font-size:12.5px;line-height:1.35;margin:4px 0 0;font-weight:600}

/* F21 — aide de terme : un bouton ⓘ, une bulle. Survol (souris), focus (clavier), .ouvert (tap). */
.vg-aide{position:relative;display:inline-flex;align-items:center;vertical-align:baseline}
.vg-aide-b{background:none;border:0;padding:0 2px;margin:0 1px;cursor:help;color:var(--teal,#12866a);font:inherit;font-size:13px;line-height:1;border-radius:50%}
.vg-aide-b:focus-visible{outline:2px solid var(--teal,#12866a);outline-offset:2px}
.vg-aide-t{position:absolute;left:0;top:calc(100% + 6px);z-index:70;display:none;width:min(320px,80vw);
  background:var(--card,#fff);color:var(--ink2,#1d2b26);border:1px solid var(--line,#dfe9e4);border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);padding:9px 11px;font-size:12.5px;font-weight:400;line-height:1.55;text-align:left;white-space:normal}
.vg-aide:hover .vg-aide-t,.vg-aide:focus-within .vg-aide-t,.vg-aide.ouvert .vg-aide-t{display:block}
@media(hover:none){.vg-aide:hover .vg-aide-t{display:none}.vg-aide.ouvert .vg-aide-t{display:block}}