/* ============================================================================
   STRATOS — DESIGN SYSTEM 1.0 (RM-179, PROMPT-061)
   ----------------------------------------------------------------------------
   Ce fichier est chargé APRÈS v1.css (gelé, généré) et v2.css. Il ne redéfinit
   aucune règle métier : il pose les JETONS des deux thèmes et corrige les
   quelques règles qui portaient une couleur en dur.

   🔑 DEUX THÈMES PAR JETONS, UN SEUL BALISAGE. `html[data-theme="dark"]` est le
      thème « exécutif » par défaut ; `html[data-theme="light"]` garde la lecture
      claire. Le choix est une commodité de la personne (localStorage), jamais une
      donnée du produit.

   🔒 LA COULEUR N'EST JAMAIS LE SEUL VECTEUR : chaque état garde son mot (badges,
      natures). Les contrastes texte / surface des deux thèmes sont VÉRIFIÉS par
      `tests/audit-ux-experience.js` (AA : 4,5:1 pour le texte courant, 3:1 pour
      les grands titres et les composants).

   ⚠ Ce que ce fichier refuse : néons, verre dépoli, animations gratuites, textes
     minuscules, et tout chiffre. Il évoque « entreprise, calme, décisionnel ».
   ========================================================================== */

/* ---------- 1. JETONS COMMUNS — échelle typographique et espacements ---------- */
:root{
  --fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:18px;--fs-kpi:26px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --radius:12px;--radius-sm:8px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  /* les sept NATURES de l'information — une famille lisible sans dictionnaire */
  --nat-observed:#1f9d55;--nat-declared:#2f5fd0;--nat-calculated:#5a4fcf;--nat-simulated:#0f7c8a;
  --nat-ai:#7a3e9d;--nat-validated:#0b7a3e;--nat-unknown:#6b6e74;
}

/* ---------- 2. THÈME CLAIR — la lecture d'origine, contrastes relevés ---------- */
html[data-theme="light"]{
  --bg:#eef1f7;--card:#ffffff;--surface:#ffffff;--surface-2:#f5f7fb;--surface-3:#eaeef6;
  --line:#d9e0ec;--line-soft:#e8edf5;
  --text:#22262e;--text-soft:#4f545e;--muted:#6b7280;--ink:#162142;--navy:#162142;--navy-2:#1f2d57;
  --brand:#c6168d;--brand-dark:#9c0f6e;--brand-link:#a4106f;--pink:#f7d6e8;--pink-ink:#8a0d5f;
  /* ⚠ les pastilles héritées de la V1 (vert #1f9d55 sur #e3f5eb : 3,1:1) n'atteignaient pas AA ; assombries */
  --green:#14733d;--green-bg:#e3f5eb;--orange:#8a4f00;--orange-bg:#fdf1dd;--red:#b02a2a;--red-bg:#fdeaea;
  --ok:#14733d;--ok-bg:#e3f5eb;--warn:#8a4f00;--warn-bg:#fdf1dd;--crit:#b02a2a;--crit-bg:#fdeaea;
  --info:#2a54bf;--info-bg:#e7edfb;--ai:#6d3390;--ai-bg:#f1e8f8;--sim:#0a5f6b;--sim-bg:#e2f3f5;
  --restricted:#5a5f6b;--restricted-bg:#eceef2;
  --nat-observed:#14733d;--nat-declared:#2a54bf;--nat-calculated:#4d43b8;--nat-simulated:#0a5f6b;
  --nat-ai:#6d3390;--nat-validated:#0b6a37;--nat-unknown:#5a5f6b;
  --nat-observed-bg:#e3f5eb;--nat-declared-bg:#e7edfb;--nat-calculated-bg:#ebe9fb;--nat-simulated-bg:#e2f3f5;
  --nat-ai-bg:#f1e8f8;--nat-validated-bg:#dff3e8;--nat-unknown-bg:#eceef2;
  --shadow:0 1px 3px rgba(22,33,66,.08),0 4px 14px rgba(22,33,66,.06);
  --sidebar:#141b33;--sidebar-ink:#cdd4e6;--sidebar-muted:#8d97b8;--topbar:#ffffff;
  --paper:#ffffff;
}

/* ---------- 3. THÈME SOMBRE EXÉCUTIF — par défaut ---------- */
html[data-theme="dark"]{
  --bg:#0f131d;--card:#171c28;--surface:#171c28;--surface-2:#1d2331;--surface-3:#252c3c;
  --line:#2c3446;--line-soft:#262d3d;
  --text:#e6e9f4;--text-soft:#b7bed1;--muted:#98a1b8;--ink:#eef1fa;--navy:#eef1fa;--navy-2:#d9def0;
  --brand:#e11d74;--brand-dark:#ff9ccb;--brand-link:#ff8fc2;--pink:#3a1a2e;--pink-ink:#ffb1c5;
  --green:#4cc38a;--green-bg:#123324;--orange:#f2a93b;--orange-bg:#3a2a10;--red:#ff7b7b;--red-bg:#3b1a1a;
  --ok:#4cc38a;--ok-bg:#123324;--warn:#f2a93b;--warn-bg:#3a2a10;--crit:#ff7b7b;--crit-bg:#3b1a1a;
  --info:#8fb0ff;--info-bg:#1a2540;--ai:#cfa6ff;--ai-bg:#2a1f3d;--sim:#6fd6e6;--sim-bg:#123138;
  --restricted:#b0b8ca;--restricted-bg:#2a3040;
  --nat-observed:#5fd39a;--nat-declared:#8fb0ff;--nat-calculated:#b3a8ff;--nat-simulated:#6fd6e6;
  --nat-ai:#cfa6ff;--nat-validated:#7fe0ad;--nat-unknown:#b0b8ca;
  --nat-observed-bg:#123324;--nat-declared-bg:#1a2540;--nat-calculated-bg:#241f45;--nat-simulated-bg:#123138;
  --nat-ai-bg:#2a1f3d;--nat-validated-bg:#0f3a25;--nat-unknown-bg:#2a3040;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.28);
  --sidebar:#0b0f19;--sidebar-ink:#c9d0e3;--sidebar-muted:#7f8aa8;--topbar:#131824;
  --paper:#ffffff;
  color-scheme:dark;
}

/* ---------- 4. LE SHELL — ce que v1.css écrivait en dur ---------- */
body{background:var(--bg);color:var(--text)}
#sidebar{background:var(--sidebar);color:var(--sidebar-ink)}
#sidebar .logo .name{color:#fff}
#sidebar .logo .tag{color:var(--sidebar-muted)}
#sidebar .sec{color:var(--sidebar-muted);font-size:10px;letter-spacing:1.3px;margin:16px 10px 6px;cursor:default}
#sidebar .sec[title]{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:5px}
#sidebar a.nav{color:var(--sidebar-ink);font-size:var(--fs-md)}
#sidebar a.nav:hover{background:rgba(255,255,255,.07);color:#fff}
#sidebar a.nav.active{background:var(--brand);color:#fff}
#sidebar .foot{color:var(--sidebar-muted);border-top-color:rgba(255,255,255,.08)}
#topbar{background:var(--topbar);border-bottom-color:var(--line)}
#topbar h1{color:var(--ink);font-size:17px}
#topbar .company,#topuser{color:var(--text-soft)}
/* la bande de contexte — RM-179 : organisation · rôle · période · données, sur tout écran */
#ctxbar{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;padding:8px 26px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-soft)}
#ctxbar[hidden]{display:none}
#ctxbar .cx{display:inline-flex;gap:6px;align-items:baseline;min-width:0}
#ctxbar .cx .k{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
#ctxbar .cx .v{color:var(--text);font-weight:600}
#ctxbar .cx .s{color:var(--muted)}
#ctxbar .cx button.lnk{font:inherit;font-size:var(--fs-xs);background:none;border:0;padding:0}
#main{padding:22px 26px 60px}
/* ---------- 5. SURFACES ET TEXTES ---------- */
.card,.kpi{background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line-soft)}
.card h2,.card h3,h2,h3{color:var(--ink)}
.card h2{font-size:var(--fs-xl);font-weight:700}
.card h2 .sub,.card h3 .sub,.sub{color:var(--muted);font-size:var(--fs-sm)}
.kpi .val,.facts .fact .v,.ctx-item .ctx-v{color:var(--ink)}
.kpi .lbl,.ctx-item .ctx-k{color:var(--muted)}
.ctx-item .ctx-s{color:var(--text-soft)}
.small{font-size:var(--fs-md)}.tiny{font-size:var(--fs-sm)}
.muted,.text-soft{color:var(--text-soft)}
.tiny.muted,.small.muted,.muted{color:var(--muted)}
p,li,td{color:var(--text)}
a,.lnk{color:var(--brand-link)}
.crumbs{color:var(--muted)}.crumbs b{color:var(--ink)}
.tbl th{color:var(--muted);border-bottom-color:var(--line)}
.tbl td{border-bottom-color:var(--line-soft)}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .tot td{background:var(--surface-2);border-top-color:var(--line)}
.facts,.empty-guide,details.explain,.demo-hint{background:var(--surface-2)}
details.explain{border-color:var(--line)}
details.explain>summary{color:var(--ink)}
.chip{background:var(--pink);color:var(--pink-ink)}
.chip.navy{background:var(--info-bg);color:var(--info)}
.formula{background:var(--surface-3);color:var(--text)}
.timeline{border-left-color:var(--pink)}
/* ---------- 6. COMMANDES ---------- */
.btn{border-radius:var(--radius-sm);font-size:var(--fs-md)}
.btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.sec:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--brand-link);border:1px solid var(--brand-link)}
.btn.sm{font-size:var(--fs-sm)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tab{background:var(--card);color:var(--text-soft);border-color:var(--line);font-size:var(--fs-sm)}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.viz-toggle{border-color:var(--line)}
.viz-toggle button{background:var(--card);color:var(--text-soft)}
.viz-toggle button.on{background:var(--brand);color:#fff}
.rm-chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.field label{color:var(--ink)}
.field input,.field select,.field textarea,input.cell,.searchbar input,.searchbar select,#topsearch input{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus,input.cell:focus{outline:2px solid var(--brand);border-color:var(--brand)}
::placeholder{color:var(--muted);opacity:1}
#modal{background:var(--card);color:var(--text)}
#modal-ov{background:rgba(5,8,16,.62)}
.toast{background:var(--surface-3);color:var(--text);border:1px solid var(--line)}
.toast.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.toast.err{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.skip{background:var(--brand)}
/* les graphiques dessinés restent sur « papier » : leurs couleurs ont été choisies pour un fond clair */
canvas{background:var(--paper);border-radius:var(--radius-sm)}
html[data-theme="dark"] canvas{padding:4px}
/* ---------- 7. LES SEPT NATURES DE L'INFORMATION ---------- */
.nat{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.nat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.nat-observed{background:var(--nat-observed-bg);color:var(--nat-observed)}
.nat-declared{background:var(--nat-declared-bg);color:var(--nat-declared)}
.nat-calculated{background:var(--nat-calculated-bg);color:var(--nat-calculated)}
.nat-simulated{background:var(--nat-simulated-bg);color:var(--nat-simulated);border-style:dashed;border-color:var(--nat-simulated)}
.nat-ai{background:var(--nat-ai-bg);color:var(--nat-ai)}
.nat-validated{background:var(--nat-validated-bg);color:var(--nat-validated)}
.nat-unknown{background:var(--nat-unknown-bg);color:var(--nat-unknown)}
.nat-unknown::before{background:transparent;border:1.5px solid currentColor}
/* une simulation ressemble à une simulation : bordure tiretée, jamais un futur certain */
.is-simulated{border:1px dashed var(--nat-simulated) !important}
/* ---------- 7bis. RM-185 — LE CYCLE D'UNE PROPOSITION ----------
   Quatre étapes, et l'état de chacune écrit EN MOT à côté d'elle. 🔒 La couleur ne
   porte jamais seule l'information : retirer toute la couleur laisse la bande
   parfaitement lisible (« fait · ici · à venir »). Aucune étape n'est cachée derrière
   un survol — un téléphone n'en a pas. */
.lifecycle{margin-top:6px;padding:6px 8px;border-left:2px solid var(--nat-ai);background:var(--nat-ai-bg);border-radius:var(--radius-sm)}
.lifecycle[data-authoritative="1"]{border-left-color:var(--nat-validated);background:var(--nat-validated-bg)}
.lc-steps{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;padding:0;list-style:none}
.lc-step{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-xs);line-height:1.5}
.lc-step + .lc-step::before{content:"→";margin-right:4px;opacity:.6}
.lc-step b{font-weight:700}
.lc-now b{text-decoration:underline;text-underline-offset:2px}
.lc-todo{opacity:.55}
.lc-off b{text-decoration:line-through}
.lifecycle p{margin:4px 0 0}
/* À 390 px, les quatre étapes s'empilent plutôt que de déborder : aucun défilement
   horizontal, et la flèche devient un repère vertical. */
@media (max-width:520px){
  .lc-steps{flex-direction:column;gap:2px}
  .lc-step + .lc-step::before{content:"↓";margin-right:4px}
}
/* ---------- 7ter. PROMPT-074 — L'APERÇU, AVANT LE GESTE ----------
   Replié par défaut : la carte reste lisible, et l'aperçu est à un geste — jamais
   une modale à fermer avant de travailler. 🔒 Aucune information ne vit dans la
   couleur ni dans un survol : « ○ Inconnu », « → Ce que cela change » et « ⊘ Ce que
   cela ne change PAS » portent leur sens en TEXTE, et restent exacts en noir et
   blanc comme à 390 px. */
.preview{margin-top:6px;border-left:2px solid var(--nat-ai);background:var(--nat-ai-bg);border-radius:var(--radius-sm)}
.pv-sum{padding:6px 8px;cursor:pointer;font-size:var(--fs-xs);font-weight:700;line-height:1.5}
.pv-sum:focus-visible{outline:2px solid var(--nat-ai);outline-offset:1px}
/* 🔑 LE CORPS NE S’AFFICHE QU’OUVERT. Sans le sélecteur `[open]`, un `display`
   d’auteur sur l’enfant d’un `<details>` FERMÉ défait la dissimulation du
   navigateur : la recette l’a constaté dans un vrai Chrome — l’aperçu était
   déplié d’office, et la « divulgation progressive » n’était qu’une intention. */
.preview[open] > .pv-corps{padding:0 8px 8px;display:flex;flex-direction:column;gap:8px}
.pv-notice{margin:0;opacity:.8;font-style:italic}
.pv-bloc{margin:0}
.pv-h{margin:0 0 3px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.75}
.pv-champ{display:flex;flex-direction:column;gap:1px;margin-bottom:5px}
.pv-lbl{font-size:var(--fs-xs);font-weight:600;opacity:.8}
.pv-val{font-size:var(--fs-sm);line-height:1.45}
/* 🔒 UN INCONNU N'EST PAS UN BLANC : il est marqué, et sa RAISON est à côté de lui.
   Le tiret vertical le distingue sans qu'aucune couleur n'ait à le faire. */
.pv-inconnu{border-left:2px dashed var(--nat-unknown);padding-left:6px;opacity:.9}
/* Les deux colonnes du geste, côte à côte quand la place existe — et EMPILÉES
   sinon. « Ce que cela ne change pas » n'est jamais sous le pli d'un survol. */
.pv-deux{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv-sous{margin:0 0 2px;font-weight:700;opacity:.85}
.pv-liste{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);line-height:1.45}
.pv-geste{border-top:1px solid var(--line-soft);padding-top:6px}
@media (max-width:760px){ .pv-deux{grid-template-columns:1fr} }
/* ---------- 8. LE THÈME SE CHOISIT ---------- */
#themebtn{min-width:34px;justify-content:center}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
/* ---------- 9. CONNEXION ---------- */
.login-wrap{background:radial-gradient(1200px 600px at 20% 0%,#2a1740 0%,var(--sidebar) 45%,#090c14 100%)}
.login-card{background:var(--card);color:var(--text);border:1px solid var(--line);width:440px}
.login-card h1{color:var(--ink)}
.login-card .demo-hint{color:var(--text-soft)}

/* ---------- 10. LES COULEURS EN DUR DE v2.css — lues par jeton ----------
   v2.css (RM-121 → RM-177) écrit encore quelques fonds clairs en dur. Ils sont repris ici, par
   jeton, pour les deux thèmes : aucune règle n'est retirée, seule la couleur suit le thème. */
.login-card{background:var(--card)}
.viz-toggle button{background:var(--card);color:var(--text-soft)}
.cap-bar,.rm-ph-bar{background:var(--surface-3)}
.tbl tr.rowlink:hover td,.tbl tr.rowlink:focus-visible td{background:var(--surface-3)}
.tbl tr.is-selected td{background:var(--pink)}
.tbl tr.is-selected:hover td{background:var(--pink)}
.rm-f-block{background:var(--crit-bg);color:var(--crit)}
.rm-f-risk{background:var(--ai-bg);color:var(--ai)}
.rm-lane-maintenant,.rm-lane-bloque{background:var(--surface-2)}
.plan-card{background:var(--surface-2)}
details.rowmenu>summary,details.rowmenu>.menu,.tbl details.rowmenu .menu .btn,.pick-list,.visite{background:var(--card);color:var(--text)}
details.rowmenu>.menu .btn{color:var(--ink)}
details.rowmenu>summary{color:var(--ink);border-color:var(--line)}
.rm-legend .rm-lg,.rm-phase,.rm-stream{color:var(--text)}
.rm-phase{background:var(--card);border-color:var(--line)}
.rm-slot .rm-ph-name,.rm-ph-num{color:var(--text-soft)}
.evt122{border-color:var(--line)}
/* les jauges et anneaux dessinés par la V1 écrivent leur valeur en encre foncée (#162142) : sur fond
   sombre elle disparaissait. Le texte SVG suit le jeton d'encre du thème. */
svg text{fill:var(--ink)}
svg text[fill="#a8acb2"],svg text[fill="#585a5e"]{fill:var(--muted)}
svg circle[stroke="#eef1f7"],svg circle[stroke="#edf1f8"],svg circle[stroke="#e4e9f5"],svg circle[stroke="#eef0f4"]{stroke:var(--surface-3)}
svg circle[stroke="#fff"]{stroke:var(--card)}
svg line[stroke="#c9ced8"],svg path[stroke="#c9ced8"]{stroke:var(--line)}
.badge.b-navy,.badge.b-brand{background:var(--info-bg);color:var(--info)}
.lvl,.level,.pill{color:var(--text)}

/* ---------- 11. LA PORTE DE DÉMONSTRATION (écran de connexion, instance de démonstration) ---------- */
.login-wrap.has-door{align-items:flex-start;justify-content:center;gap:28px;flex-wrap:wrap;padding:34px 24px;min-height:100vh;box-sizing:border-box}
.login-wrap.has-door .login-card{flex:0 0 380px;position:sticky;top:24px}
.door{flex:1 1 680px;max-width:1040px;min-width:0;color:var(--text)}
.door-k{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--pink-ink);font-weight:700}
.door h2{font-size:24px;margin:4px 0 6px;color:var(--ink)}
.door-head p{max-width:70ch;color:var(--text-soft)}
.door-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:16px 0}
.door-org{margin:0;padding:16px 18px}
.door-org h3{font-size:var(--fs-xl);margin:0}
.personas{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.persona{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface-2)}
.persona-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.persona-goal{margin:6px 0;color:var(--text)}
.persona .btn{margin-top:6px}
.persona details.explain{margin:6px 0}
.droits{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;font-size:var(--fs-sm)}
.droits ul{margin:4px 0 0;padding-left:16px}
.droits li{margin:2px 0;color:var(--text)}
#modal .droits{grid-template-columns:1fr}
/* ---------- 12. LA SITUATION (accueil) ---------- */
.hero{padding:22px 24px;border:1px solid var(--line);background:linear-gradient(135deg,var(--card) 0%,var(--surface-2) 100%)}
.hero-k{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hero-t{font-size:26px;line-height:1.25;margin:6px 0 8px;color:var(--ink)}
.hero-s{max-width:75ch;color:var(--text-soft);margin:0 0 12px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px}
.hero-fact{font-size:var(--fs-md);color:var(--text)}
.hero-fact b{font-size:var(--fs-lg);color:var(--ink)}
.hero-attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:0 0 16px}
.attn{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius-sm);padding:12px 14px;background:var(--card)}
.attn-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.attn-n{font-size:28px;font-weight:800;color:var(--ink);line-height:1;min-width:34px;font-variant-numeric:tabular-nums}
.attn-unknown{margin:8px 0;color:var(--text-soft)}
.attn-list{margin:6px 0;padding-left:0;list-style:none}
.attn-list li{margin:6px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.attn-cta{margin-top:8px}
.hero-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.door-btn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer}
.door-btn b{font-size:var(--fs-lg);color:var(--ink)}
.door-btn:hover{border-color:var(--brand);background:var(--surface-3)}
details.home-detail>summary{font-size:var(--fs-md)}
@media (max-width:820px){.login-wrap.has-door .login-card{position:static;flex:1 1 100%}.hero-t{font-size:21px}}
.persona .btn{max-width:100%;white-space:normal}
.persona .btn::after{content:"";}

/* ---------- 13. LES OPTIONS CÔTE À CÔTE (une colonne par option) ---------- */
.cmp-t{table-layout:fixed;min-width:640px}
.cmp-t th,.cmp-t td{vertical-align:top;text-align:left;white-space:normal;overflow-wrap:anywhere}
.cmp-t thead th{color:var(--ink);font-size:var(--fs-md)}
.cmp-t .cmp-r{width:18%;font-weight:600;color:var(--text-soft);background:var(--surface-2)}
.cmp-n{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp-l{margin:0;padding-left:16px}
.cmp-l li{margin:3px 0}
.cmp-t td{font-size:var(--fs-sm)}

/* ---------- 14. VOUS ÊTES ICI (aide contextuelle repliée) ---------- */
details.here{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:6px 12px}
details.here>summary{cursor:pointer;font-size:var(--fs-md);color:var(--text)}
.here-k{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:6px}
.here-t{margin:8px 0 4px;max-width:80ch}
.here-n{margin:4px 0 6px}

/* ---------- 15. LA SUITE D'UNE EXPLORATION DEMANDÉE PAR L'IA ---------- */
.ai-suite{margin-top:10px;padding:10px 12px;border:1px dashed var(--nat-simulated,var(--line));border-radius:var(--radius-sm);background:var(--surface-2)}
.ai-suite-l{margin:6px 0 0;padding-left:18px}
.ai-suite-l li{margin:4px 0}

/* ---------- 16. DÉFAUTS DE FINITION ---------- */
/* La bande de mode support s'affiche en flex ; l'attribut `hidden` ne suffisait pas à la cacher : une
   bande rouge VIDE de 16 px barrait le haut de chaque écran hors du mode support. */
#support-banner[hidden]{display:none}

/* ---------- 17. LE REPÈRE CLAVIER, PARTOUT ---------- */
/* v2.css ne cadrait que les boutons, onglets et champs de recherche : un lien, un « résumé » repliable, la
   bascule de thème ou une porte de l'accueil restaient sans repère visible au clavier. Un seul repère. */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,.door-btn:focus-visible{outline:2px solid var(--brand-link);outline-offset:2px;border-radius:4px}

/* RM-190 — la stratégie qualifiée : une proposition de l IA ne se confond jamais avec le validé. */
.strat190-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.strat190-item{border:1px solid var(--line,#d8dce5);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}
.strat190-item.is-ai{border:1.5px dashed var(--nat-ai);background:var(--nat-ai-bg)}
.strat190-item[data-status="rejected"] b,.strat190-item[data-status="superseded"] b{text-decoration:line-through;opacity:.75}
.strat190-state{border-left:4px solid var(--nat-unknown);padding:8px 12px;margin:10px 0;border-radius:6px;background:var(--nat-unknown-bg)}
.strat190-state.strat190-calculable{border-left-color:var(--nat-validated);background:var(--nat-validated-bg)}
.strat190-versions{margin-top:12px;display:grid;gap:6px}

/* RM-188 — la couche d'inspiration IA (PD-071) : coupée, toute proposition NON VALIDÉE se retire de l'écran — une seule règle,
   portée par le marqueur data-inspiration-item. La note dit ce qui est masqué ; rien n'est supprimé. */
html[data-inspiration="off"] [data-inspiration-item]{display:none !important}
[data-inspiration-note]{display:none}
html[data-inspiration="off"] [data-inspiration-note]{display:block}
html[data-inspiration="off"] #inspbtn{opacity:.55;text-decoration:line-through}

/* RM-195 — le brief guidé sur téléphone : visible sous 760 px seulement ; l'accueil de bureau est inchangé. */
.brief195{display:none}
@media (max-width:760px){
  .brief195{display:block}
  #home-situation .hero-attn,#home-situation .hero-s,#home-situation .hero-t,#home-situation .hero-k{display:none}
  .brief-choices{display:grid;gap:8px;margin:10px 0}
  .brief-choice{border:1px solid var(--line,#d8dce5);border-radius:12px}
  .brief-choice>summary{display:flex;gap:10px;align-items:center;min-height:48px;padding:8px 12px;cursor:pointer;list-style:none}
  .brief-choice>summary::-webkit-details-marker{display:none}
  .brief-n{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:var(--nat-declared-bg);font-weight:800}
  .brief-why{padding:0 12px 6px}
  .brief-cta{padding:0 12px 10px}
  .brief-magic{width:100%;min-height:48px;margin:6px 0}
}

/* RM-199 — consulter le raisonnement : une phrase visible ; « Pourquoi ? », « Consulter le raisonnement », « Trace » à la demande. */
.r088{margin:6px 0 4px}
.r088-summary{margin:4px 0;font-size:.95em;overflow-wrap:anywhere}
.r088 details.explain{margin:6px 0}
.r088-factors{margin:6px 0 8px;padding-left:18px}
.r088-group{margin:8px 0}
.r088-group-t{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#667085);margin-bottom:4px}
.r088-group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.r088-step{border-left:3px solid var(--line,#d8dce5);padding:4px 8px;overflow-wrap:anywhere}
.r088-step[data-r088-nature="unknown"]{border-left-color:var(--nat-unknown)}
.r088-step[data-r088-nature="ai"]{border-left:3px dashed var(--nat-ai)}
.r088-step-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.r088-contest{margin-top:4px}
.r088-rules{margin-top:8px}
@media (max-width:760px){
  .r088-summary{font-size:1em}
  .r088 details.explain>summary{min-height:44px;display:flex;align-items:center}
  .r088-contest{min-height:40px}
}

/* PROMPT-077 — accompagner une décision : une lecture de l’IA, élément par élément. Le filet de gauche
   reprend la couleur de la NATURE (RM-179) : ce que le dossier dit, ce que l’IA propose, ce qui n’est pas su. */
.dai-items{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.dai-item{border-left:3px solid var(--line,#d8dce5);padding:4px 8px;overflow-wrap:anywhere}
.dai-item[data-dai-nature="ai"]{border-left-style:dashed;border-left-color:var(--nat-ai)}
.dai-item[data-dai-nature="unknown"]{border-left-color:var(--nat-unknown)}
.dai-item[data-dai-nature="declared"]{border-left-color:var(--nat-declared)}
.dai-reading{margin-top:10px}
/* PROMPT-081 — le grand livre d'une lecture : des cellules qui passent à la ligne, jamais un tableau à faire défiler. */
.dai-ledger{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:12px;padding:8px 10px;border:1px solid var(--line,#d8dce5);border-radius:8px}
.dai-ledger-cell{font-size:.85rem;overflow-wrap:anywhere}
.dai-ledger>.tiny{flex-basis:100%}
/* PROMPT-081 — connecter une source : des cartes qui passent d'elles-mêmes sur une colonne à 390 px. */
/* Six cartes depuis le 2026-10-05 : quatre solutions, puis PostgreSQL et le serveur libre. À 240 px de base, un grand écran en pose quatre par
   ligne — les quatre solutions ensemble, les deux autres dessous. */
.src-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:12px}
.src-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line,#d8dce5);border-radius:10px;background:var(--surface-2,transparent);min-width:0}
.src-card>.btn{margin-top:auto;align-self:flex-start}
.src-card.is-selected{border-color:var(--brand,#2b5cff);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand,#2b5cff) 25%,transparent)}
.src-card-title{font-weight:600;overflow-wrap:anywhere}
.src-quick{margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#d8dce5)}
.src-quick input[type=url]{width:100%}
.src-result{margin-top:12px;padding:10px 12px;border-radius:8px;border-left:4px solid var(--line,#d8dce5);overflow-wrap:anywhere}
.src-result.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.src-result.err{border-left-color:var(--crit);background:var(--crit-bg)}
/* PROMPT-081 — le fil du dossier de décision : une navigation en tête du dossier, qui passe à la ligne sur petit écran.
   ⚠ Pas de `position:sticky` : `html` et `body` portent `overflow:hidden/auto`, le fil s’y accroche et ne colle jamais —
   la recette navigateur l’a mesuré. Changer le défilement de toute l’application dépasse ce chantier : le retour au fil
   passe par le bouton de fin de dossier.
   [PROMPT-083, 2026-10-05] Cette cause est levée : `body` n’est plus un conteneur de défilement, `sticky` fonctionne. Le
   fil n’a PAS été rendu collant pour autant — ce serait un changement d’interface, à décider à part. */
.dos-fil{margin:12px -6px 0;padding:8px 6px;background:var(--card);border-bottom:1px solid var(--line-soft,var(--line))}
.dos-fil ol{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dos-fil-titre{display:block}
.dos-fil-lien{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
.dos-fil-lien:hover,.dos-fil-lien:focus-visible{border-color:var(--brand);outline:2px solid transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.dos-fil-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em;height:1.4em;border-radius:50%;background:var(--surface-2);font-size:.75rem}
.dos-ancre{scroll-margin-top:12px}
h3.dos-ancre:focus,.dos-ancre h3:focus{outline:2px solid var(--brand);outline-offset:3px}
/* Une entrée dont la section est vide (droit absent, capacité fermée) se retire d'elle-même. */
#decision-detail:not(:has(#dos-arbitrage > *)) [data-dos-step="dos-arbitrage"],
#decision-detail:not(:has(#dos-ia > *)) [data-dos-step="dos-ia"],
#decision-detail:not(:has(#dos-enjeux > *)) [data-dos-step="dos-enjeux"],
#decision-detail:not(:has(#dos-actions > *)) [data-dos-step="dos-actions"]{display:none}
/* PROMPT-081 — un libellé long (angle, sorte) passe à la ligne au lieu de sortir de l’écran à 390 px. */
.dai .badge{white-space:normal;overflow-wrap:anywhere;max-width:100%}
/* PROMPT-085 — l'en-tête d'une lecture est une ligne flexible SANS retour : à 390 px, le badge d'état (« relecture en cours »)
   y était écrasé jusqu'à une lettre par ligne. L'en-tête passe à la ligne ; le badge d'état garde sa largeur. */
.dai-reading>summary{flex-wrap:wrap}
.dai-reading>summary>.badge{flex:none;overflow-wrap:normal}

/* PROMPT-082 — le serveur n'exécute plus le code de cet écran : un bandeau qui reste, tant que ce n'est pas réglé. */
.serveur-perime{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--warn-bg,#3a2a00);color:var(--warn,#ffcf66);border-top:2px solid var(--warn,#ffcf66);font-size:.9rem}
.serveur-perime>div{flex:1 1 320px;min-width:0}
/* ============================================================================
   PROMPT-082 — LES CONNEXIONS : la bande, les sources connectées, l'IA connectée, le guide
   ========================================================================== */
.conn-bande{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0 0 14px}
.conn-tabs{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.conn-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;border:1px solid var(--line,#d8dce5);border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0;flex:1 1 180px}
.conn-tab .tiny{color:var(--muted,inherit);opacity:.8}
.conn-tab.is-on{border-color:var(--brand,#2b5cff);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand,#2b5cff) 25%,transparent);background:var(--surface-2,transparent)}
.conn-tab:hover,.conn-tab:focus-visible{border-color:var(--brand,#2b5cff);outline:2px solid transparent}
.conn-guide-btn{align-self:center;white-space:nowrap}
.conn-list{display:grid;gap:10px;margin-top:10px}
.conn-item{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line,#d8dce5);border-radius:10px;background:var(--surface-2,transparent);min-width:0}
.conn-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.conn-item-id{min-width:0}
.conn-name{font-weight:600;font-size:1.05rem;overflow-wrap:anywhere}
.conn-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.conn-panel{margin-top:8px;padding-top:10px;border-top:1px solid var(--line,#d8dce5);display:grid;gap:8px}
.conn-panel input{width:100%;max-width:420px}
.conn-msg{padding:8px 10px;border-radius:8px;border-left:4px solid var(--line,#d8dce5);overflow-wrap:anywhere;font-size:.9rem}
.conn-msg.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.conn-msg.err{border-left-color:var(--crit);background:var(--crit-bg)}
.conn-org{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#d8dce5)}
.conn-kinds,.conn-delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.conn-kind,.conn-delivery{padding:10px 12px;border:1px solid var(--line,#d8dce5);border-radius:10px;min-width:0;overflow-wrap:anywhere}
.conn-delivery.is-on{border-color:var(--brand,#2b5cff)}
.conn-facts{margin:6px 0;display:grid;gap:4px}
.conn-facts>div{display:grid;grid-template-columns:minmax(90px,130px) 1fr;gap:8px;align-items:baseline}
.conn-facts dt{font-size:.78rem;font-weight:600;color:var(--muted,inherit)}
.conn-facts dd{margin:0;font-size:.92rem;overflow-wrap:anywhere;min-width:0}
h3.conn-groupe{margin:14px 0 0;font-size:.9rem}
.conn-dl{margin:8px 0 0;display:grid;gap:2px}
.conn-dl dt{font-size:.78rem;font-weight:600;margin-top:6px}
.conn-dl dd{margin:0;font-size:.88rem}
@media (max-width:520px){ .conn-facts>div{grid-template-columns:1fr;gap:0} .conn-tab{flex:1 1 100%} .conn-guide-btn{width:100%} .conn-actions .btn{flex:1 1 auto} }

/* PROMPT-082 (bloc 6) — les intelligences « par compte » : leurs badges, les limites d'usage que le moteur déclare. */
.conn-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.conn-quota{margin:6px 0;display:grid;gap:4px}
.conn-quota-row{display:grid;grid-template-columns:minmax(90px,130px) minmax(80px,240px) 44px minmax(0,1fr);gap:8px;align-items:center}
.conn-quota-row progress{width:100%;height:8px;accent-color:var(--brand)}
.conn-acct select,.conn-acct input,#conn-ai-uses select,#conn-ai-uses input,[data-ai-import] select,[data-ai-import] input:not([type=file]){max-width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font-family:var(--font);font-size:12.5px;color:var(--text);background:var(--surface-2)}
.conn-acct select:focus,.conn-acct input:focus,#conn-ai-uses select:focus,#conn-ai-uses input:focus,[data-ai-import] select:focus,[data-ai-import] input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.conn-acct details input{width:100%;max-width:320px}
@media (max-width:720px){ .conn-quota-row{grid-template-columns:minmax(0,1fr) 44px} .conn-quota-row progress{grid-column:1 / -1;grid-row:2} .conn-quota-row .muted{grid-column:1 / -1} .conn-badges{justify-content:flex-start} }

/* ============================================================================
   PROMPT-083 — LA BARRE LATÉRALE : stable, à la hauteur du viewport, et seul le menu défile
   ----------------------------------------------------------------------------
   La cause du décrochage est corrigée dans v2.css (`body` n'est plus un conteneur de défilement). Ce bloc règle le
   reste du même défaut : le défilement était posé sur la barre ENTIÈRE (`overflow-y:auto`, logo compris), d'où une
   barre de défilement sur toute sa hauteur dès que le menu dépasse le viewport — et, dans le rail d'icônes, une seconde,
   horizontale, à cause des info-bulles.

   · la barre garde sa place (`position:sticky`, posé par v1) et prend la hauteur VISIBLE du viewport : `100dvh`, moins
     la part des bandeaux d'état encore à l'écran (`--bandeaux`, tenue par app.js — elle vaut 0 sans bandeau) ;
   · le logo ne défile pas ; SEULE la zone de navigation défile, et seulement si elle dépasse ;
   · arrivée au bout, elle n'entraîne pas la page (`overscroll-behavior`) : pas de double défilement involontaire ;
   · sa barre de défilement est fine et discrète, plus lisible quand le pointeur ou le clavier est dans la barre.

   Au-dessus de 760 px seulement : en dessous, la barre est un tiroir ouvert par-dessus le contenu (RM-167) — inchangé.
   ========================================================================== */
@media (min-width:761px){
  #sidebar{height:100vh;height:calc(100dvh - var(--bandeaux,0px));overflow:hidden;top:var(--bandeaux,0px)}
  #sidebar .logo,#sidebar .foot{flex:0 0 auto}
  #sidebar .foot:empty{display:none}
  #sidebar nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  /* Une barre fine, sans flèches ni rail : un simple curseur translucide. Les propriétés standard (`scrollbar-width`)
     feraient revenir, sous Windows, les flèches du système : elles ne servent donc qu'aux navigateurs sans l'autre écriture. */
  #sidebar nav::-webkit-scrollbar{width:6px;height:0}
  #sidebar nav::-webkit-scrollbar-track{background:transparent}
  #sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
  #sidebar:hover nav::-webkit-scrollbar-thumb,#sidebar nav:focus-within::-webkit-scrollbar-thumb{background:rgba(255,255,255,.36)}
  @supports not selector(::-webkit-scrollbar){
    #sidebar nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
    #sidebar:hover nav,#sidebar nav:focus-within{scrollbar-color:rgba(255,255,255,.36) transparent}
  }
}
/* 🔒 CE QUE CETTE CORRECTION NE CHANGE PAS, ET POURQUOI C'EST ÉCRIT. Quatre autres éléments portent `position:sticky` : la
   barre de titre, les deux bandeaux d'état, la carte de connexion. Le même défaut les empêchait de coller depuis le
   2026-09-24 ; la cause levée, ils se remettraient à coller d'eux-mêmes — un changement d'interface que personne n'a
   demandé (une barre de titre de 230 px collée en haut d'un téléphone, par exemple). Leur comportement CONSTATÉ est donc
   conservé, explicitement. Les rendre collants est une décision à part : il suffit de retirer la ligne voulue. */
#topbar,.login-wrap.has-door .login-card{position:relative}
/* PROMPT-084 (R10) — LES BANDEAUX D'ÉTAT COLLENT DE NOUVEAU, et c'est une cible DÉCIDÉE, pas un goût : celui de lecture seule doit
   être annoncé « EN PERMANENCE » (D-4, écrit dans app.js), celui du mode support dit que chaque action est journalisée. Le
   2026-10-05 (PROMPT-083) ils avaient été laissés « relatifs » faute de mandat ; le challenge global les a réévalués : FIX.
   Ils collent l'un sous l'autre ; la barre latérale commence sous eux (`--bandeaux`), et finit au bas du viewport.
   La barre de titre et la carte de connexion restent relatives : DEFER et DROP, Gate PROMPT-084 §A.8. */
#support-banner{position:sticky;top:0}
#readonly-banner{position:sticky;top:var(--bandeau-support,0px)}
/* … et `relative` LIT le décalage que `sticky` gardait pour le moment où il colle : la carte de connexion portait
   `top:24px`, qui l'aurait descendue de 24 px. Les trois autres portent `top:0`. */
.login-wrap.has-door .login-card{top:auto}

/* PROMPT-084 (R02) — le badge « restreint » est un bouton qui mène à la demande d'accès : même allure, souligné en pointillé. */
button.st121-demande{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
button.st121-demande:hover{color:var(--brand)}
.acces-liste{margin:6px 0;padding-left:18px}
.acces-liste li{margin:6px 0}

/* PROMPT-084 (R13) — L'INFO-BULLE DU RAIL D'ICÔNES. Elle était dessinée par `::after`, DANS la zone de navigation : depuis que
   seule cette zone défile (PROMPT-083), elle y était rognée — invisible. Le libellé natif (`title`) restait à la souris, mais
   rien n'apparaissait AU CLAVIER : une personne qui navigue par Tab ne voyait que des icônes. Elle est désormais un élément
   posé sur la page (`#rail-bulle`, placé par app.js), hors de toute zone qui défile. */
@media (min-width:761px) and (max-width:1100px){ #sidebar a.nav::after{display:none} }
#rail-bulle{position:fixed;z-index:300;pointer-events:none;background:var(--navy,#162142);color:#fff;font-size:var(--fs-sm,12px);padding:4px 9px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25);transform:translateY(-50%)}
#rail-bulle[hidden]{display:none}