/* ═══════════════════════════════════════════════════════════════════════════
   COCKPIT OSMO — UNE seule interface (Flow + Desk + Field fondus).
   Rail fin de primitives (agenda, tâches, alertes) · barre OSMO pour composer
   tout le reste · cockpit temps réel au centre. Salle de contrôle, pas marketing.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── POLICES AUTO-HÉBERGÉES ───────────────────────────────────────────────
   Le prototype validé chargeait Archivo et JetBrains Mono depuis Google Fonts. Le produit
   ne sort pas sur le réseau : les deux familles sont servies par `/assets/fonts/:nom`
   (CSP `font-src 'self'`). Sans ces déclarations, le cockpit — et lui seul, parmi les écrans —
   retombait sur les polices système : la maquette et le produit ne pouvaient pas se ressembler. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ── LA PALETTE A QUITTÉ CETTE FEUILLE (22/09) ─────────────────────────────────────────────────

   Elle déclarait ici la charte VISUL en littéraux — `--bg:#0a111a`, `--blue:#4991fd` — et deux
   autres feuilles (`link.css`, `osmo.css`) déclaraient la même en triple. Un test comparait les
   trois copies ; il a rendu service, et il soignait le symptôme.

   Les jetons viennent maintenant de `packages/da-visul`, servi AVANT cette feuille. Ne restent ici
   que les variables de FORME du cockpit — celles qui n'ont pas d'équivalent dans la DA parce
   qu'elles décrivent cette coquille-là et aucune autre.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Le rail : large au bureau (libellés), replié en icônes sur tablette (`--d-railIcones`), tiroir au téléphone. */
  --rail:252px;
  --r:var(--r-panneau);
  /* L'élévation du cockpit : la DA ne définit pas d'ombre pour le thème sombre, et une ombre n'est
     pas une couleur de charte — c'est une profondeur. Elle est donc locale, et dérivée du noir. */
  --shadow:0 18px 46px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  /* La zone de lecture : un aplat (blanc cassé en clair), sans halo — le rail, lui, porte le gris (`--void`). */
  background:var(--bg);
  color:var(--ink); font-family:var(--font-corps); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
::selection{background:rgba(91,147,204,.28)}
button{font-family:inherit;color:inherit}
/* La maquette ne posait que des <button> : elle n'avait donc aucune règle pour les liens.
   Le produit, lui, NAVIGUE — chaque case du rail, chaque onglet épinglé, chaque carte est un
   vrai <a href>. Sans remise à zéro, la couleur de lien du navigateur reprenait la main :
   texte bleu souligné sur fond bleu, lisibilité nulle. `:where()` porte une spécificité de zéro,
   donc chaque règle de composant ci-dessous garde le dernier mot sur sa propre couleur. */
:where(.shell a){color:var(--ink);text-decoration:none}
.shell a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-panneau)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon.s{width:14px;height:14px}

/* ── ASTRE OSMO (marque authentique du site) ─────────────────────────────── */
.osmo{display:inline-block;line-height:0;flex:none}
.osmo svg{width:100%;height:100%;overflow:visible;display:block}
.osmo--action{--ring:var(--accent);--halo:var(--accent-hi);filter:drop-shadow(0 0 10px rgba(91,147,204,.18))}
.osmo-field,.osmo-sat-glow{fill:var(--ring)}
.osmo-wide,.osmo-bloom{stroke:var(--ring);fill:none}
.osmo-halo{stroke:var(--halo);fill:none}
.osmo-core{stroke:var(--halo);fill:none;stroke-width:2.3}
.osmo-sat-halo{fill:var(--halo)}
.osmo-trail circle{fill:var(--halo)}
.osmo--action .osmo-field{opacity:.17}.osmo--action .osmo-wide{opacity:.28}
.osmo--action .osmo-bloom{opacity:.64}.osmo--action .osmo-sat-glow{opacity:.68}
.osmo-trail{opacity:1}
.osmo-orbit{transform-box:view-box;transform-origin:50% 50%}
.osmo--anime.osmo--action .osmo-orbit{animation:osmoOrbit 6s linear infinite}
.osmo--anime .osmo-field{animation:osmoFieldA 8.4s ease-in-out infinite}
.osmo--anime .osmo-bloom{animation:osmoBloomA 8.4s ease-in-out infinite}
@keyframes osmoFieldA{0%,100%{opacity:.17}50%{opacity:.105}}
@keyframes osmoBloomA{0%,100%{opacity:.64}50%{opacity:.525}}
@keyframes osmoOrbit{to{transform:rotate(360deg)}}

/* ── OSSATURE : rail + interface ─────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}

/* ══ LE RAIL — la seule navigation latérale (cadrage de la navigation du 31/10/2026) ═════════════════════════════
   Large au bureau (libellés), replié en icônes sur tablette, tiroir au téléphone. OSMO et Alertes en tête, puis les
   dossiers de la personne (feuilles et épingles), la section du module ouvert, « Nouveau dossier », « Modifier le rail ».
   Jetons de la DA seulement : aucune couleur écrite ici. */
/* LES BANDEAUX EN BLEU NUIT (Will, 31/10/2026 au soir : « tous les bandeaux dans la même couleur […] le bleu nuit pour
   les bandeaux c'est peut-être la meilleure solution […] viable dans le mode sombre également »). Le rail, le bandeau haut
   et la fenêtre d'OSMO portent `data-theme="sombre"` : les jetons du thème sombre de la DA s'y appliquent, quel que soit
   le thème de la page — encres, filets, champs, contrastes AA déjà éprouvés par la DA. Leur fond commun est `--chrome`
   (le `panel` du sombre, #152135) ; le cœur de l'emblème OSMO le reprend. La zone de lecture garde le thème choisi. */
.rail,.head,body > .osmo-panneau{--chrome:var(--panel)}
.rail{
  width:var(--rail);flex:none;position:sticky;top:0;height:100vh;
  background:var(--chrome);border-right:1px solid var(--line-strong);
  display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 8px 10px;z-index:50;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
}
.rail .sp{flex:1 0 8px}
.rl-tete{display:flex;align-items:center;gap:10px;padding:2px 6px 8px}
.rail .home{width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rl-marque{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;letter-spacing:.01em}
.rl-fermer{display:none;margin-left:auto;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-panneau);color:var(--ink-2)}
.ri{
  width:100%;min-height:36px;border:0;background:none;border-radius:var(--r-panneau);cursor:pointer;
  display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 10px;text-align:left;
  color:var(--ink-2);position:relative;transition:.14s;font-size:13.5px;line-height:1.3;font-family:inherit;
}
.ri > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri .icon{flex:none}
.ri:hover{color:var(--ink);background:var(--raised)}
.ri.active{color:var(--accent-hi);background:var(--accent-dim)}
.ri.active::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.ri .badge{position:absolute;top:4px;left:22px;min-width:15px;height:15px;border-radius:8px;
  background:var(--danger);color:var(--encre-sur-plein);font-size:9px;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 3px;font-family:var(--mono)}
.ri.warnbadge .badge{background:var(--warning);color:var(--encre-sur-plein)}
.ri.bluebadge .badge{background:var(--accent);color:var(--encre-sur-plein)}
.rsep{height:1px;background:var(--line-strong);margin:6px 4px;flex:none}
.rl-portes,.rl-mode,.rl-dossiers{display:flex;flex-direction:column;gap:2px}
/* Un dossier : son lien (vers sa page), « ⋯ », sa flèche de repli (un <details> natif), ses éléments. */
.rl-dossier{position:relative}
.rl-d{font-weight:600;color:var(--ink);padding-right:58px}
.rl-nb{font-size:11px;color:var(--ink-3);font-weight:500;flex:none}
.rl-dossier:hover .rl-nb,.rl-dossier:focus-within .rl-nb,.rail-edition .rl-nb{visibility:hidden}
.rl-replier > summary{position:absolute;top:4px;right:2px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;color:var(--ink-3);cursor:pointer;list-style:none}
.rl-replier > summary::-webkit-details-marker{display:none}
.rl-replier > summary:hover{color:var(--ink);background:var(--raised)}
.rl-replier[open] > summary .icon{transform:rotate(180deg)}
.rl-replier > summary .icon{transition:transform .14s}
.rl-items{list-style:none;margin:0 0 4px;padding:0 0 0 14px;display:flex;flex-direction:column;gap:1px}
.rl-el{position:relative}
.rl-i{font-size:13px;min-height:32px;padding:5px 32px 5px 8px}
.rl-i .icon{width:15px;height:15px}
.rl-pin{display:inline-flex;color:var(--ink-3);flex:none}
.rl-vide{font-size:12px;color:var(--ink-3);padding:4px 8px;line-height:1.4}
/* « ⋯ » : visible au survol, au focus, en mode « Modifier le rail ». Sans script, il mène à « Mon rail ». */
.rl-plus{position:absolute;top:50%;transform:translateY(-50%);right:2px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;color:var(--ink-3);opacity:0;transition:opacity .12s}
.rl-dossier > .rl-plus{top:18px;right:30px}
.rl-el:hover > .rl-plus,.rl-dossier:hover > .rl-plus,.rl-plus:focus-visible,.rl-el:focus-within > .rl-plus,.rl-dossier > .rl-d:focus-visible + .rl-plus,
.rail-edition .rl-plus{opacity:1}
.rl-plus:hover{color:var(--ink);background:var(--raised)}
.rail-edition .rl-dossier{outline:1px dashed var(--line-strong);outline-offset:1px;border-radius:var(--r-panneau)}
.rl-edition-bande{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-2);
  background:var(--accent-dim);border:1px solid var(--bp-line);border-radius:var(--r-panneau);padding:7px 8px;margin-bottom:6px}
.rl-edition-bande a{color:var(--accent-hi);text-decoration:underline}
.rl-pied{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line-strong);padding-top:6px}
/* Replier / déplier le rail (bureau) : un des deux boutons se voit, selon l'état posé sur <html data-rail>. */
.rl-bascule{margin:0}
.rl-deplier-rail{display:none}
.rl-nouveau > summary{list-style:none}
.rl-nouveau > summary::-webkit-details-marker{display:none}
.rl-form{display:flex;gap:6px;padding:4px 6px 6px}
.rl-form input{flex:1 1 auto;min-width:0;background:var(--raised);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);padding:6px 8px;font:inherit;font-size:13px}
.rl-ok{background:var(--accent-dim);border:1px solid var(--bp-line);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600}
/* La section du module ouvert : ses écrans (l'ancienne rangée de dossiers), verticale, dans le rail. */
.rl-module{margin-top:6px;border-top:1px solid var(--line-strong);padding-top:6px}
.rail .pinbar{display:block;padding:0;border:0}
.rail .pinscroll{display:flex;flex-direction:column;gap:1px}
.rail .pinlbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);padding:4px 8px;font-weight:600}
.rail .pin{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 22px;font-size:13px;border:0;background:none;border-radius:var(--r-panneau);color:var(--ink-2);min-height:30px}
.rail .pin:hover{background:var(--raised);color:var(--ink)}
.rail .pin.active{color:var(--accent-hi);background:var(--accent-dim)}
.rail .pin-compteur{margin-left:auto;font-size:11px;font-weight:700;color:var(--encre-sur-plein);background:var(--warning);border-radius:8px;padding:0 6px}
.rail .pin-droite{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px}
.rail .pin-client{max-width:100%}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;padding:14px 16px}
.note{border-radius:var(--r-panneau);padding:11px 12px;font-size:12.5px;line-height:1.45;min-height:74px;border:1px solid var(--line)}
.note b{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;opacity:.7}
.note.b{background:rgba(91,147,204,.12)} .note.g{background:rgba(79,174,127,.12)}
.note.o{background:rgba(217,162,59,.13)} .note.p{background:rgba(217,162,59,.12)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ══ LE BANDEAU HAUT — UNE rangée : recherche, accès rapides, épingler, « ? », compte ═══════════════════════════ */
.head{position:sticky;top:0;z-index:40;background:var(--chrome);color:var(--ink);border-bottom:1px solid var(--line-strong)}
.top{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:7px 16px;min-height:52px}
.top .burger{display:none}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-panneau);background:var(--panel);color:var(--ink-2);transition:.14s;list-style:none}
.tb-btn::-webkit-details-marker{display:none}
.tb-btn:hover,details[open] > .tb-btn{color:var(--accent-hi);border-color:var(--bp-line);background:var(--raised)}
.acces{display:flex;align-items:center;gap:6px;flex:none}
.acces:empty{display:none}
.acces-i{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;height:36px;padding:0 8px;border-radius:var(--r-panneau);
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2)}
.acces-i:hover{color:var(--ink);border-color:var(--bp-line);background:var(--raised)}
.acces-i.active{color:var(--accent-hi);border-color:var(--bp-line);background:var(--accent-dim)}
.acces-i .icon{width:16px;height:16px}
.acces-ini{font-size:11px;font-weight:700;letter-spacing:.02em;color:inherit}
.tb-menu-d{position:relative;flex:none}
.tb-menu-d:not([open]) > .tb-menu{display:none}
.tb-menu{position:absolute;top:44px;right:0;width:330px;max-width:calc(100vw - 24px);max-height:min(76vh,640px);overflow:auto;
  background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-panneau);box-shadow:var(--shadow);padding:8px;z-index:70}
.tb-menu-titre{font-weight:600;font-size:13.5px;color:var(--ink);padding:4px 6px 8px}
.tb-mandat{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--warning-ink);border:1px solid var(--warning);border-radius:6px;padding:3px 7px}
/* Le compte : l'espace (et son site), le mode et l'heure, toujours lisibles sans clic. */
.tb-compte{display:flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 4px;cursor:pointer;list-style:none;max-width:280px;
  border:1px solid var(--line-strong);border-radius:var(--r-panneau);background:var(--panel);color:var(--ink)}
.tb-compte::-webkit-details-marker{display:none}
.tb-compte:hover,.compte[open] > .tb-compte{border-color:var(--bp-line);background:var(--raised)}
.cp-ini{width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--accent-hi);background:var(--raised);border:1px solid var(--line-strong);font-family:var(--mono)}
.cp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cp-txt b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-txt i{font-style:normal;font-size:11.5px;color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:5px}
.cp-txt .dot{width:7px;height:7px;border-radius:2px;flex:none}
.cp-chev{color:var(--ink-3);flex:none}
.cp-menu{width:320px}
.cp-qui{display:flex;flex-direction:column;gap:2px;padding:4px 8px 8px;border-bottom:1px solid var(--line-strong);margin-bottom:4px}
.cp-qui b{font-size:14px}.cp-qui i{font-style:normal;font-size:12px;color:var(--ink-2)}
.cp-ligne{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.cp-osmo{padding:2px 8px 6px}
.cp-osmo .autopilote-bandeau{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cp-tel{display:none}
.cp-liens{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border-top:1px solid var(--line-strong);margin-top:6px;padding:9px 8px 4px}
.cp-liens a{color:var(--accent-hi);font-size:13px}
.cp-sortir{background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink-2);padding:4px 10px;cursor:pointer;font:inherit;font-size:13px}
.cp-sortir:hover{color:var(--ink);border-color:var(--bp-line)}
/* Les formulaires « Épingler au rail » / « Ajouter aux accès rapides » (bandeau, proposition, vue composée). */
.ep-form{display:flex;flex-direction:column;gap:8px}
.ep-champ{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3)}
.ep-champ input,.ep-champ select{background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);padding:7px 9px;font:inherit;font-size:13px}
.ep-boutons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ep-boutons .icon{width:14px;height:14px;vertical-align:-2px}
.ep-proposition{margin:0 0 14px;border:1px solid var(--bp-line);background:var(--accent-dim);border-radius:var(--r-panneau);padding:10px 14px}
.ep-proposition > summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ep-proposition[open] > summary{margin-bottom:10px}
.ep-proposition .ep-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.ep-proposition .ep-champ{min-width:180px}
/* Le menu contextuel (script) — clic droit, appui long, « ⋯ », touche Menu. */
.cm-menu{position:fixed;z-index:300;min-width:230px;max-width:min(320px,calc(100vw - 16px));background:var(--raised);border:1px solid var(--line-strong);
  border-radius:var(--r-panneau);box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}
.cm-titre{font-size:12px;color:var(--ink-3);padding:4px 8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:8px 10px;min-height:36px;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.cm-item:hover,.cm-item:focus-visible{background:var(--accent-dim);outline:none}
.cm-item:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-hi)}
.cm-item[disabled]{color:var(--ink-3);cursor:default;background:none}
.cm-danger{color:var(--danger)}
.cm-form{display:flex;flex-direction:column;gap:8px;padding:2px 4px 4px}
.cm-champ{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3)}
.cm-champ input,.cm-champ select{background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);padding:7px 9px;font:inherit;font-size:13.5px}
.cm-ok{align-self:flex-start;background:var(--accent-dim);border:1px solid var(--bp-line);color:var(--ink);border-radius:8px;padding:6px 14px;cursor:pointer;font:inherit;font-weight:600}
/* « Mon rail » : épingles et accès rapides, chaque geste en formulaire. */
.mr-epingles{list-style:none;margin:4px 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.mr-epingle{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;border:1px solid var(--line-strong);border-radius:var(--r-panneau);padding:6px 8px}
.mr-ep-nom{min-width:0;overflow-wrap:anywhere}
.mr-ep-gestes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mr-geste,.mr-ligne{display:inline-flex;gap:6px;align-items:center;margin:0}
.mr-d{display:inline-block}.mr-d > summary{list-style:none}
/* La recherche universelle : suggestions et « Dans le logiciel ». */
.cmd-sugg{position:absolute;top:44px;left:0;right:0;background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-panneau);
  box-shadow:var(--shadow);padding:6px;z-index:80;max-height:min(70vh,520px);overflow:auto}
.cs-lbl{font-size:12px;color:var(--ink-3);padding:6px 8px 3px}
.cs-opt{display:flex;flex-direction:column;padding:7px 9px;border-radius:7px;color:var(--ink)}
.cs-opt b{font-size:13.5px;font-weight:600}.cs-opt i{font-style:normal;font-size:12px;color:var(--ink-3)}
.cs-opt:hover,.cs-opt.cs-actif{background:var(--accent-dim)}
.trouves{margin:0 0 16px}
.trouves-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 18px}
.trouves-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.tr-lien{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-panneau);background:var(--panel)}
.tr-lien:hover{border-color:var(--bp-line);background:var(--raised)}
.tr-lien b{font-size:13.5px}.tr-lien i{font-style:normal;font-size:12px;color:var(--ink-3)}
/* Le bandeau d'indicateurs de module, replié hors de l'accueil (audit D1). */
.a-traiter{margin:0 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-panneau);background:var(--panel);padding:7px 12px}
.a-traiter > summary{cursor:pointer;font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.a-traiter-n{min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--raised);color:var(--ink-2);border:1px solid var(--line-strong)}
.a-traiter-oui .a-traiter-n{background:var(--warning);color:var(--encre-sur-plein);border-color:var(--warning)}
.a-traiter[open] > summary{margin-bottom:8px}
/* Lien d'évitement : masqué à l'œil par découpe (jamais hors de l'écran — garde mise-en-page-bureau), visible au focus. */
.evitement{position:absolute;left:8px;top:8px;z-index:400;background:var(--raised);color:var(--ink);padding:0;border:0;border-radius:8px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.evitement:focus{clip-path:none;width:auto;height:auto;overflow:visible;padding:8px 12px}
.rl-voile{display:none}
.mm-lbl{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);padding:7px 9px 5px}
.mopt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border:1px solid transparent;
  border-radius:8px;background:none;cursor:pointer;color:var(--ink)}
.mopt:hover,.mopt.cur{background:var(--accent-dim);border-color:var(--bp-line)}
.mopt .mo-dot{width:9px;height:9px;border-radius:3px;flex:none}
.mopt b{font-weight:600;font-size:13.5px} .mopt i{font-style:normal;color:var(--ink-3);font-size:11px;display:block}
.modebanner{display:none;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;border-radius:var(--r-panneau);margin-bottom:16px}
.modebanner.on{display:flex} .modebanner b{font-weight:700}
.modebanner.sim{background:var(--teinte-warning);color:var(--warning);border:1px solid rgba(217,162,59,.3)}
.modebanner.cre{background:rgba(217,162,59,.1);color:var(--warning);border:1px solid rgba(217,162,59,.32)}
.modebanner.con{background:var(--accent-dim);color:var(--accent-hi);border:1px solid var(--bp-line)}
.scn{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.scntile{text-align:left;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-panneau);padding:12px;cursor:pointer;color:var(--ink);transition:.14s}
.scntile:hover,.scntile.cur{border-color:var(--warning);background:var(--teinte-warning)}
.scntile b{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
.scntile i{font-style:normal;color:var(--ink-3);font-size:11.5px}
.cmdwrap{position:relative;flex:1 1 auto;min-width:160px;max-width:640px}
.cmd{position:relative;display:flex;align-items:center;gap:9px;height:38px;padding:0 6px 0 12px;
  background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-panneau);
  transition:border-color .16s, box-shadow .16s;cursor:text}
.cmd:focus-within{border-color:var(--bp-line);box-shadow:0 0 0 3px var(--accent-dim)}
.cmd .glyph{color:var(--accent-hi);flex:none;display:flex}
.cmd input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
  font-family:var(--font-corps);font-size:14px;letter-spacing:.01em}
.cmd input::-webkit-search-cancel-button{display:none}
.cmd input::placeholder{color:var(--ink-3)}
.kbd{font-family:var(--mono);font-size:12px;color:var(--ink-2);border:1px solid var(--line-strong);cursor:pointer;
  border-radius:6px;padding:3px 8px;flex:none;background:var(--panel)}
.clock{font-family:var(--mono);font-size:13px;color:var(--accent-hi);letter-spacing:.03em;
  border:1px solid var(--line-strong);border-radius:8px;padding:4px 9px;background:var(--panel)}
a.clock{text-decoration:none;white-space:nowrap}.clock .clock-fz{font-family:var(--sans,inherit);font-size:11px;color:var(--ink-3)}
.who{font-style:normal;color:var(--ink-3);font-size:11.5px}
.livedot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);
  margin-right:6px;box-shadow:0 0 0 0 rgba(79,174,127,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,174,127,.45)}70%{box-shadow:0 0 0 7px rgba(79,174,127,0)}100%{box-shadow:0 0 0 0 rgba(79,174,127,0)}}

.palette{position:absolute;top:54px;left:0;right:0;background:var(--raised);
  border:1px solid var(--line-strong);border-radius:var(--r-panneau);box-shadow:var(--shadow);padding:10px;z-index:60;display:none}
.palette.on{display:block}
.palette .lbl{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);padding:8px 8px 6px}
.opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;cursor:pointer;
  color:var(--ink);border:1px solid transparent}
.opt:hover,.opt.hi{background:var(--accent-dim);border-color:var(--bp-line)}
.opt .oi{width:26px;height:26px;border-radius:7px;background:var(--panel);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--accent-hi);flex:none}
.opt .ot{flex:1;min-width:0}.opt .ot b{font-weight:600;font-size:13.5px}
.opt .ot i{font-style:normal;color:var(--ink-3);font-size:11.5px;display:block}
.opt .tag{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line-strong);
  border-radius:5px;padding:2px 6px;flex:none}

/* ── SCÈNE ───────────────────────────────────────────────────────────────── */
.stage{max-width:1300px;width:100%;margin:0 auto;padding:20px 22px 60px}
/* Contenu des écrans de gouvernance et de support, servi DANS la fenêtre du logiciel. Il garde ses
   classes génériques (.bloc, .message, .petit…) d'`osmose.css`, chargée avant celle-ci ; on ne
   redéfinit donc rien ici, on lui rend seulement l'air que la coquille hub lui donnait. */
.hubstage{display:block}
/* Un écran métier greffé (`.desk`) garde sa structure, pas son châssis : dans la zone de lecture, il prend le fond de
   la zone (blanc cassé) — le gris est au rail, une seule fois. */
.hubstage > .desk{background:var(--bg)}
.hubstage > .bloc:first-child{margin-top:0}
.hubstage h1{margin-top:0}

/* ── CE QU'OSMO PROPOSE ───────────────────────────────────────────────────
   Dans la carte « Ce qu'OSMO comprend », au même niveau de sobriété que le reste : une proposition
   n'est pas une alerte, elle ne prend donc ni la couleur ni la place d'une alerte. */
.sugg{margin-top:12px;border-top:1px solid var(--line-strong);padding-top:11px;display:grid;gap:10px}
.sugg-lbl{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3)}
.sugg-item{border:1px solid var(--line-strong);border-radius:var(--r-panneau);padding:10px 11px;background:var(--raised)}
.sugg-t{font-size:13px;font-weight:600;color:var(--ink)}
.sugg-p{font-size:12px;color:var(--ink-2);margin-top:3px}
.sugg-a{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.sugg-a form{margin:0}
.sugg-non{background:none;border:1px solid var(--line-strong);color:var(--ink-3);cursor:pointer}
.sugg-non:hover{color:var(--ink-2);border-color:var(--line-strong)}

/* ── OSMO : UN ONGLET DU BANDEAU, QUI DÉPLOIE SA PETITE FENÊTRE ───────────────────────────
   Décision Will (20/09). OSMO n'est pas une pastille qui flotte par-dessus le travail : c'est un
   onglet, au même rang que les autres, en tête du bandeau. Sa fenêtre s'ouvre À CÔTÉ du bandeau,
   là où l'onglet la promet — pas dans un coin sans rapport avec le geste qui l'a ouverte. */
.ri-osmo{font-family:inherit}
.ri-osmo svg{display:block}
body > .osmo-panneau{position:fixed;left:calc(var(--rail) + 10px);bottom:14px;top:auto;right:auto;
  width:min(380px,calc(100vw - var(--rail) - 24px));height:min(520px,calc(100vh - 120px));max-height:none;
  z-index:120;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--chrome);color:var(--ink);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
/* Le centre d'OSMO a la couleur du rail (Will, 31/10/2026 : « le centre de OSMO doit être de la même couleur que le
   rail ») : OSMO s'ouvre DEPUIS le rail, il en garde le fond. */
body > .osmo-panneau .osmo-fil{flex:1;min-height:0;overflow-y:auto;background:var(--chrome)}
body > .osmo-panneau[hidden]{display:none}
/* Ce qu'OSMO produit, offert dans sa fenêtre (c'était le classeur « OSMO » du bandeau). */
.osmo-surfaces{display:flex;flex-wrap:wrap;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line-strong)}
.osmo-surfaces a{font-size:11.5px;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:7px;padding:4px 9px}
.osmo-surfaces a:hover{color:var(--accent-hi);border-color:var(--bp-line);background:var(--accent-dim)}

/* ── NOTIFICATIONS FLOTTANTES — elles passent, elles n'interrompent pas ───────────────────
   Sur la droite, empilées, elles s'effacent d'elles-mêmes après quelques secondes. Ce qui reste se
   lit dans l'onglet « Alertes » : une notification manquée ne doit jamais être une information
   perdue. `pointer-events:none` sur la pile, `auto` sur chaque carte : une notification qui passe
   ne doit pas voler un clic destiné à l'écran. */
/* Les notifications se posent SOUS l'en-tête, pas dessus. À 78 px elles recouvraient la rangée de
   dossiers (l'en-tête complet — barre de commande + dossiers — descend à 121 px) : trois cartes
   masquaient les onglets du classeur pendant leurs premières secondes, c'est-à-dire exactement
   quand on cherche où aller. Mesuré au navigateur sur les deux surfaces. */
.toasts{position:fixed;top:64px;right:18px;z-index:200;display:flex;flex-direction:column;gap:9px;
  width:min(340px,calc(100vw - 36px));pointer-events:none}
.toast{pointer-events:auto;background:var(--raised);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:var(--r-panneau);box-shadow:var(--shadow);padding:11px 12px;opacity:0;transform:translateX(14px);
  transition:opacity .22s ease,transform .22s ease}
.toast.on{opacity:1;transform:none}
.toast.warn{border-left-color:var(--warning)} .toast.crit{border-left-color:var(--danger)}
.toast .tt{font-size:13px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.toast .tt time{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-weight:400}
.toast .tc{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.toast a{color:var(--accent-hi);font-size:12px;display:inline-block;margin-top:7px}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ── L'ÉCRAN « ALERTES » — l'historique, où rien ne disparaît ─────────────────────────────── */
.alertes{display:grid;gap:10px;max-width:860px}
.alerte{display:grid;gap:3px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:var(--r-panneau);background:var(--panel);padding:12px 13px}
.alerte.warn{border-left-color:var(--warning)} .alerte.crit{border-left-color:var(--danger)}
.alerte.lue{opacity:.62;border-left-color:var(--line-strong)}
.alerte-t{font-size:13.5px;font-weight:600;display:flex;gap:10px;align-items:baseline}
.alerte-t time{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400}
.alerte-c{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.alerte-a{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap}
.alerte-a form{margin:0}
.alerte-vide{border:1px dashed var(--line-strong);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink-2)}
.eyebrow{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;margin:0 0 10px}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line-strong),transparent)}

.pins{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.pin{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--r-panneau);cursor:pointer;transition:.14s;font-size:13px}
.pin:hover{border-color:var(--bp-line);background:var(--raised)}
.pin .pd{width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none}
.pin b{font-weight:600}.pin .x{color:var(--ink-3);margin-left:2px;padding:0 2px;border-radius:4px}
.pin .x:hover{color:var(--danger)}
.pin.add{border-style:dashed;color:var(--ink-3)}
.pin.add:hover{color:var(--accent-hi)}

.grid{display:grid;grid-template-columns:1.62fr 1fr;gap:16px;align-items:start}
@media(max-width:940px){.grid{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}

.card{background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--line-strong);
  border-radius:var(--r);overflow:hidden}
.card>h3{margin:0;padding:13px 16px;font-size:13px;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line-strong)}
.card>h3 .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:500}
.card .body{padding:14px 16px}

.dock{display:flex;flex-direction:column;gap:9px}
.bar{height:6px;border-radius:3px;background:var(--raised);overflow:hidden;margin-top:5px;width:140px;max-width:100%}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.chip.ok{background:var(--teinte-success);color:var(--success)} .chip.warn{background:var(--teinte-warning);color:var(--warning)}
.chip.crit{background:var(--teinte-danger);color:var(--danger)} .chip.free{background:var(--raised);color:var(--ink-3)}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-panneau);padding:13px 14px}
.kpi .n{font-size:27px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.kpi .l{font-size:11px;color:var(--ink-2);margin-top:6px}
.kpi .sub{font-size:11px;margin-top:8px;display:flex;align-items:center;gap:5px}
.kpi .sub.ok{color:var(--success)} .kpi .sub.warn{color:var(--warning)} .kpi .sub.crit{color:var(--danger)}

.osmocard{border-color:var(--bp-line)}
.osmocard>h3{background:linear-gradient(180deg,rgba(91,147,204,.10),transparent)}
.feed{display:flex;flex-direction:column}
.ev{padding:13px 16px;border-bottom:1px solid var(--line-strong)}
.ev:last-child{border-bottom:0}
.ev .hd{display:flex;gap:9px;align-items:flex-start}
.ev .sev{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.sev.crit{background:var(--danger);box-shadow:0 0 0 4px var(--teinte-danger)}
.sev.warn{background:var(--warning);box-shadow:0 0 0 4px var(--teinte-warning)}
.sev.ok{background:var(--success);box-shadow:0 0 0 4px var(--teinte-success)}
.ev .tx{flex:1;min-width:0}
.ev .tx p{margin:0;font-size:13.5px;line-height:1.5}
.ev .tx .t{color:var(--ink-3);font-size:11px;font-family:var(--mono);margin-top:4px}
.ev .act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;font-size:12.5px;
  font-weight:600;border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);cursor:pointer;transition:.14s}
.btn:hover{border-color:var(--bp-line);background:var(--accent-dim)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--encre-sur-plein)}
.btn.pri:hover{background:var(--accent-hi)}
.btn.ok{background:var(--success);border-color:var(--success);color:var(--encre-sur-plein)}
.btn.ghost{background:none}
.btn.sm{padding:5px 10px;font-size:12px}

.chain{margin:12px 0 2px;padding:13px;background:var(--void);border:1px solid var(--line-strong);border-radius:var(--r-panneau);display:none}
.chain.on{display:block}
.node{position:relative;padding:0 0 15px 24px}
.node:last-child{padding-bottom:0}
.node::before{content:"";position:absolute;left:6px;top:3px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.node::after{content:"";position:absolute;left:10px;top:12px;bottom:0;width:1px;background:var(--line-strong)}
.node:last-child::after{display:none}
.node.end::before{background:var(--warning);box-shadow:0 0 0 3px var(--teinte-warning)}
.node.fix::before{background:var(--success);box-shadow:0 0 0 3px var(--teinte-success)}
.node b{font-weight:600;font-size:13px} .node b .mono{color:var(--accent-hi)}
.node p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.seal{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 11px;border-radius:8px;
  border:1px solid rgba(217,162,59,.4);background:rgba(217,162,59,.08);color:var(--warning);
  font-size:11.5px;font-family:var(--mono)}

/* Vue composée / panneaux ouverts par le rail */
@keyframes rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mod{background:var(--panel);padding:14px 15px;min-width:0}
.mod h4{margin:0 0 10px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.mod h4 .mi{width:22px;height:22px;border-radius:6px;background:var(--accent-dim);color:var(--accent-hi);
  display:flex;align-items:center;justify-content:center;flex:none}
.row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line-strong);font-size:12.5px}
.row:first-of-type{border-top:0}
.row .k{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .v{font-family:var(--mono);color:var(--ink);flex:none}

/* Panneau Tâches */
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line-strong)}
.task:last-child{border-bottom:0}
.task .ti{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center}
.task .ti.rdv{background:var(--accent-dim);color:var(--accent-hi)} .task .ti.osmo{background:rgba(217,162,59,.12);color:var(--warning)}
.task .ti.eco{background:var(--teinte-warning);color:var(--warning)}
.task .tb{flex:1;min-width:0}.task .tb b{font-weight:600;font-size:13.5px}
.task .tb p{margin:2px 0 0;font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.task .ta{display:flex;gap:7px;flex:none;align-items:center}
.grp{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);padding:12px 16px 4px;background:var(--void)}

.foot{margin-top:26px;text-align:center;color:var(--ink-3);font-size:11.5px;line-height:1.6}

/* ── COCKPIT GLOBAL : état de l'entreprise, auto-composé par OSMO, vivant ─── */
.cockpit{display:flex;flex-direction:column;gap:16px}
/* Le compte d'entités et la phrase de fraîcheur sont du LIBELLÉ : rôle Label (§03). L'HEURE, elle,
   reste en mono juste en dessous — un horodatage est bien une donnée technique. */
.cockpit .eyebrow .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3)}
.cockpit .eyebrow .live .mono{color:var(--ink-2)}
.cockpit .eyebrow .live b{color:var(--success-ink);font-family:var(--mono);font-weight:600}

.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch}
@media(max-width:720px){.hero{grid-template-columns:1fr}}
.healthcard{display:flex;gap:20px;align-items:center;padding:18px 20px;
  background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--line-strong);border-radius:var(--r)}
.ring{position:relative;width:130px;height:130px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring .rtrack{stroke:var(--raised);fill:none}
.ring .rval{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1),stroke .6s}
.ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rc .num{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ring .rc .u{font-size:11px;color:var(--ink-3);margin-top:3px;letter-spacing:.04em}
.hverdict{min-width:0}
.hverdict .st{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);margin-bottom:7px}
.hverdict h2{margin:0 0 7px;font-size:18px;font-weight:600;line-height:1.3}
.hverdict p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.5}
/* §03 : le mono est RÉSERVÉ aux données techniques. « OSMO en veille active · recompose à chaque
   écriture gouvernée » est une phrase métier — elle se compose en Barlow, au rôle Label. */
.hpulse{margin-top:12px;display:flex;align-items:center;gap:8px;font-family:var(--font-corps);font-size:13px;line-height:1.4;color:var(--ink-3)}
.hpulse .pdot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none}

.vitals{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:stretch}
@media(max-width:520px){.vitals{grid-template-columns:1fr 1fr}}
.vital{background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--line-strong);border-radius:var(--r-panneau);
  padding:12px 14px;border-left:3px solid var(--line-strong);display:flex;flex-direction:column;justify-content:center}
.vital.b-ok{border-left-color:var(--success)}.vital.b-warn{border-left-color:var(--warning)}
.vital.b-crit{border-left-color:var(--danger)}.vital.b-none{border-left-color:var(--ink-3)}
/* Liseré NEUTRE = couleur du MODE (Gestion/Simulation/Consultant). Réservé aux KPI d'activité/éco
   (ni bons ni mauvais en soi) : ils portent l'accent de mode, pas un vert « santé » trompeur. */
.vital.b-mode{border-left-color:var(--accent)}
.vital .vn{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.vital .vn.na{color:var(--ink-3);font-size:16px;font-weight:600}
.vital .vl{font-size:11px;color:var(--ink-2);margin-top:6px;line-height:1.35}
.vital .vt{font-size:11px;margin-top:5px;color:var(--ink-3);display:flex;align-items:center;gap:4px}
.vital .vt.up{color:var(--success)}.vital .vt.down{color:var(--danger)}

.domes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:640px){.domes{grid-template-columns:repeat(2,1fr)}}
.dome{text-align:left;background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--line-strong);
  border-radius:var(--r-panneau);padding:12px 13px;cursor:pointer;color:var(--ink);transition:border-color .14s,transform .14s;
  position:relative;overflow:hidden;font-family:inherit}
.dome:hover{border-color:var(--bp-line);transform:translateY(-1px)}
.dome .dh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dome .di{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--accent-dim);color:var(--accent-hi)}
.dome .dt{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dome .dscore{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.dome .dbar{height:5px;border-radius:3px;background:var(--raised);overflow:hidden}
.dome .dbar i{display:block;height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1),background .5s}
/* Le compte d'un domaine se lit EN ENTIER (21/10 : au téléphone « 69 menace(s) avérée(s) · 4876… » coupait le montant). */
.dome .dsig{font-size:11px;color:var(--ink-3);margin-top:8px;overflow-wrap:anywhere}
.dome.ok .di{background:var(--teinte-success);color:var(--success)} .dome.ok .dscore{color:var(--success)} .dome.ok .dbar i{background:linear-gradient(90deg,var(--teinte-success),var(--success))}
.dome.warn .di{background:var(--teinte-warning);color:var(--warning)} .dome.warn .dscore{color:var(--warning)} .dome.warn .dbar i{background:linear-gradient(90deg,var(--teinte-warning),var(--warning))}
.dome.crit .di{background:var(--teinte-danger);color:var(--danger)} .dome.crit .dscore{color:var(--danger)} .dome.crit .dbar i{background:linear-gradient(90deg,var(--teinte-danger),var(--danger))}

.menace .body{padding:0}

/* Performance économique — bande de tuiles (la 1ʳᵉ lecture d'un dirigeant) */
.perf{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
@media(max-width:1000px){.perf{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.perf{grid-template-columns:repeat(2,1fr)}}
.perf .vital{padding:11px 13px}
.perf .vital .vn{font-size:18px}
.perf .vital .vl{font-size:11px;min-height:28px}

/* Plan de salle POS */
.pos-salle{position:relative;height:420px;border-radius:var(--r-panneau);border:1px solid var(--line-strong);background:var(--panel);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:34px 34px;overflow:hidden}
/* Pointeuse */
.pointeuse{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-strong);flex-wrap:wrap}
.pt-state{display:flex;flex-direction:column;font-weight:700;font-size:15px;color:var(--ink-3)}
.pt-state.on{color:var(--success)} .pt-state i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-3);margin-top:2px}
.pt-note{margin-left:auto;font-size:11px;color:var(--ink-3)}
/* Pointeuse mini (toujours visible, à côté de l'horloge) */
.ptmini{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.ptmini:hover{border-color:var(--bp-line);color:var(--ink)}
.ptmini .ptm-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.ptmini.on{color:var(--success);border-color:rgba(79,174,127,.4);background:var(--teinte-success)}
.ptmini.on .ptm-dot{background:var(--success);box-shadow:0 0 0 3px var(--teinte-success)}

/* ══ TABLETTE ET TÉLÉPHONE (cadrage de la navigation du 31/10/2026, lot N5) ═════════════════════════════════════
   Tablette (761 à 1 199 px) : le rail se REPLIE en icônes — un dossier mène à sa page, ses éléments se lisent dans
   « Modifier le rail » ; le bandeau haut reste sur UNE rangée. Téléphone (≤ 760 px) : le rail devient un TIROIR (ancre
   #rail sans script, `body.rail-ouvert` avec), le bandeau garde la recherche, 3 accès rapides et le compte, et ne
   dépasse pas 64 px avant le titre de l'écran. */
@media (min-width:761px) and (max-width:1199px){
  /* Replié en icônes TANT QU'IL N'EST PAS OUVERT : au focus (clavier), par le bouton « menu » (#rail sans script,
     body.rail-ouvert avec), il se déplie PAR-DESSUS la zone de travail — la marge négative garde la mise en page immobile.
     Pas au survol : un rail qui se déplie sous la souris recouvre l'écran qu'on vise juste à côté (mesuré au navigateur). */
  :root{--rail:var(--d-railIcones)}
  .top .burger{display:inline-flex}
  .rail:focus-within,.rail:target,body.rail-ouvert .rail{width:252px;margin-right:calc(var(--d-railIcones) - 252px);box-shadow:var(--shadow)}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target){padding:10px 6px;align-items:center}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .rl-tete{padding:2px 0 8px;justify-content:center}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) :is(.rl-marque,.rl-replier,.rl-nb,.rl-plus,.rl-nouveau,.rl-edition-bande,.pinlbl,.pin-droite){display:none}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .ri{width:48px;min-height:44px;justify-content:center;padding:0;flex-direction:column;gap:2px}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .ri > span{flex:none;font-size:9px;max-width:46px;text-align:center}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .ri.active::before{left:-6px}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .rsep{width:32px;align-self:center}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .rl-pied{border-top:0}
  /* Replié, la section du module ne garde que ses COMPTEURS (le cas « Support » à prendre…) : un nombre, jamais caché. */
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .rl-module{border-top:0;margin-top:2px;padding-top:0}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .pin:not(:has(.pin-compteur)){display:none}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .pin:has(.pin-compteur){font-size:0;padding:4px;justify-content:center;width:48px}
  body:not(.rail-ouvert) .rail:not(:focus-within):not(:target) .pin-compteur{font-size:11px;margin:0}
  body > .osmo-panneau{left:calc(var(--rail) + 10px)}
}
/* ══ BUREAU, RAIL REPLIÉ (demande de Will du 31/10/2026 : « Le rail de gauche doit être repliable ») ═══════════════
   Le choix vit dans le cookie `osmose_rail`, posé par POST /cockpit/rail/replier (et par rail.js sans rechargement) ;
   le serveur l'écrit sur <html data-rail="replie"> AVANT le premier rendu : aucun clignotement. Mêmes icônes que la
   tablette, mais le rail ne se rouvre pas au focus — la personne l'a replié, il reste replié jusqu'à « Déplier ». */
@media (min-width:1200px){
  html[data-rail="replie"]{--rail:var(--d-railIcones)}
  html[data-rail="replie"] .rail{padding:10px 6px;align-items:center}
  html[data-rail="replie"] .rail .rl-tete{padding:2px 0 8px;justify-content:center}
  html[data-rail="replie"] .rail :is(.rl-marque,.rl-replier,.rl-nb,.rl-plus,.rl-nouveau,.rl-edition-bande,.pinlbl,.pin-droite,.rl-replier-rail){display:none}
  html[data-rail="replie"] .rail .rl-deplier-rail{display:flex}
  html[data-rail="replie"] .rail .ri{width:48px;min-height:44px;justify-content:center;padding:0;flex-direction:column;gap:2px}
  html[data-rail="replie"] .rail .ri > span{flex:none;font-size:9px;max-width:46px;text-align:center}
  html[data-rail="replie"] .rail .ri.active::before{left:-6px}
  html[data-rail="replie"] .rail .rsep{width:32px;align-self:center}
  html[data-rail="replie"] .rail .rl-pied{border-top:0}
  html[data-rail="replie"] .rail .rl-module{border-top:0;margin-top:2px;padding-top:0}
  html[data-rail="replie"] .rail .pin:not(:has(.pin-compteur)){display:none}
  html[data-rail="replie"] .rail .pin:has(.pin-compteur){font-size:0;padding:4px;justify-content:center;width:48px}
  html[data-rail="replie"] .rail .pin-compteur{font-size:11px;margin:0}
}
/* Tablette et téléphone ont déjà leur propre repli (icônes, tiroir) : la bascule du bureau n'y a pas de sens. */
@media (max-width:1199px){ .rl-bascule{display:none} }
@media(max-width:760px){
  :root{--rail:min(86vw,320px)}
  .shell{display:block}
  .rail{position:fixed;top:0;left:0;bottom:0;height:auto;width:var(--rail);transform:translateX(-105%);transition:transform .18s ease;
    z-index:260;box-shadow:var(--shadow)}
  .rail:target,body.rail-ouvert .rail{transform:none}
  .rl-fermer{display:flex}
  .rl-plus{opacity:1}
  .rl-nb{display:none}
  .ri{min-height:44px}
  .rl-i{min-height:40px}
  .rail:target ~ .rl-voile,body.rail-ouvert .rl-voile{display:block;position:fixed;inset:0;z-index:250;background:color-mix(in srgb,var(--void) 60%,transparent)}
  .top .burger{display:inline-flex}
  .top{gap:6px;padding:6px 8px;min-height:52px}
  .cmdwrap{min-width:0}
  .cmd{height:38px;padding:0 4px 0 9px;gap:6px}
  .cmd .kbd{display:none}
  .acces-i.acces-bureau,.tb-epingler,.top .tb-aide,.top .fb{display:none}
  .tb-mandat{font-size:10px;padding:2px 4px}
  .tb-compte{padding:0;border:0;background:none;height:40px}
  .cp-txt,.cp-chev{display:none}
  .cp-tel{display:block;border-top:1px solid var(--line-strong);margin-top:6px;padding-top:4px}
  .tb-menu{position:fixed;top:56px;left:8px;right:8px;width:auto;max-width:none}
  .cmd-sugg{position:fixed;top:56px;left:8px;right:8px}
  .stage{padding:6px 12px 40px}
  /* Le sur-titre d'un écran (le groupe : « Pilotage »…) passe À CÔTÉ du titre : le titre commence sous les 64 px. */
  .stage .dg-entete-titre{flex-direction:row !important;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:0 !important}
  body > .osmo-panneau{left:8px;right:8px;width:auto}
  .toasts{top:60px}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }

/* ── Éléments cliquables (explication « why ») + panneau d'explication ─────────────────────────── */
.clic{cursor:pointer}
.clic:hover{border-color:var(--bp-line)}
.clic:focus-visible{outline:2px solid var(--bp-line);outline-offset:2px}
.clic-i{opacity:.5;font-size:11px;margin-left:2px}
.xpanel-ombre{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 35%,transparent);z-index:60}
.xpanel{position:fixed;top:0;right:0;height:100vh;width:min(430px,92vw);background:var(--raised);border-left:1px solid var(--line-strong);
  z-index:61;box-shadow:-18px 0 48px rgba(0,0,0,.45);padding:24px 24px 28px;overflow:auto;color:var(--ink)}
.xpanel-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--ink-3);font-size:16px;cursor:pointer;line-height:1}
.xpanel-x:hover{color:var(--ink)}
.xpanel-corps{padding-top:2px}
.xp{display:block;animation:rise .2s ease}
.xp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-right:28px;margin-bottom:16px;border-bottom:1px solid var(--line-strong);padding-bottom:13px}
.xp-h b{font-size:16px}
.xp-eur{font-size:21px;font-weight:700;color:var(--success);font-variant-numeric:tabular-nums;flex:none}
.xp-b{display:flex;flex-direction:column}
.xp-b .xp-l:last-child{margin-bottom:0}
.xp-l{display:flex;flex-direction:column;gap:3px;margin-bottom:13px}
.xp-k{font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3)}
.xp-v{font-size:13px;color:var(--ink-2);line-height:1.5}
.xp-f{margin-top:18px;border-top:1px solid var(--line-strong);padding-top:15px}
.xp-btn{background:var(--accent-dim);border:1px solid var(--bp-line);color:var(--accent-hi);border-radius:var(--r-panneau);padding:8px 13px;font-weight:600;font-family:inherit;cursor:pointer;opacity:1}
.xp-btn:hover:not(:disabled){background:var(--bp-line)}
.xp-btn:disabled{cursor:not-allowed;opacity:.6}
.xp-btn i{font-style:normal;color:var(--ink-3);font-weight:400;font-size:11px}
.xp-form{display:block}
.xp-eng{display:block}
.xp-ok{font-size:13px;font-weight:600;color:var(--success);margin-bottom:10px}
.xp-note{display:block;margin-top:11px;font-size:11px;color:var(--ink-3);line-height:1.45}
.xp-load{color:var(--ink-3);font-size:13px}
.ckpt-msg{margin:0 0 14px;padding:11px 15px;border-radius:var(--r-panneau);font-size:13px;line-height:1.5;border:1px solid var(--line-strong)}
.ckpt-msg-ok{background:var(--accent-dim);border-color:var(--success);color:var(--ink)}
.ckpt-msg-ko{background:rgba(217,96,90,.10);border-color:var(--danger);color:var(--ink)}
/* Gestion réelle (CRUD gouverné) — liste + gestes ouvrant le moteur d'écriture /ops existant. */
.gest{max-width:1000px}
.gest-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.gest-new{display:inline-block;background:var(--accent-dim);border:1px solid var(--bp-line);color:var(--accent-hi);border-radius:var(--r-panneau);padding:9px 15px;font-weight:600;text-decoration:none;flex:none}
.gest-new:hover{background:var(--bp-line)}
.gest table{width:100%;border-collapse:collapse;font-size:13px}
.gest th{text-align:left;font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);padding:8px 12px;border-bottom:1px solid var(--line-strong)}
.gest td{padding:11px 12px;border-bottom:1px solid var(--line-strong);color:var(--ink-2)}
.gest-lien{color:var(--accent-hi);text-decoration:none;font-weight:600}
.gest-lien:hover{text-decoration:underline}
.gest-empty{color:var(--ink-3);font-size:13px;line-height:1.55;padding:14px 0}
.gest-warn{color:var(--warning);font-weight:600;font-size:12px;white-space:nowrap;cursor:help}
/* Sélecteur d'objets (gestion généralisée à tous les objets logistiques) — jetons du thème, aucun littéral. */
.gest-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gest-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;text-decoration:none;font-size:13px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2)}
.gest-chip:hover{border-color:var(--bp-line);color:var(--ink)}
.gest-chip.actif{border-color:var(--accent);background:var(--accent-dim);color:var(--ink)}
.gest-chip .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* CLASSEURS (bandeau = classeurs · page = intercalaires + feuilles). Jetons du thème, aucun littéral. */
.clsr{max-width:1100px}
.clsr-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.clsr-h1{margin:0;font-size:22px}
.clsr-sous{color:var(--ink-2);font-size:13.5px;margin-top:4px;max-width:64ch}
.clsr-inter{margin-bottom:20px}
.clsr-inter-nom{font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--ink-3);border-bottom:1px solid var(--line-strong);padding-bottom:6px;margin-bottom:12px}
.clsr-feuilles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.clsr-feuille{display:block;padding:13px 15px;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--r-panneau);text-decoration:none}
.clsr-feuille:hover{border-color:var(--bp-line);background:var(--raised)}
.clsr-feuille b{display:block;color:var(--ink);font-size:14.5px}
.clsr-feuille i{display:block;color:var(--ink-3);font-size:12px;font-style:normal;margin-top:3px}
.clsr-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.clsr-feuilles-mini{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* Les flèches d'ordre du rail : discrètes, dans l'en-tête de la carte, jamais au milieu du texte. */
.clsr-rang{float:right;display:inline-flex;align-items:center;gap:6px}
.clsr-rang .bouton{padding:2px 8px;line-height:1.4}
.clsr-rang .bouton[disabled]{opacity:.38;cursor:default}
.clsr-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid var(--line-strong);border-radius:var(--r-panneau);font-size:12.5px;color:var(--ink-2)}
.clsr-chip .x{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.clsr-chip .x:hover{color:var(--danger)}
.clsr-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bouton.danger{border-color:var(--danger);color:var(--danger)}


/* Le contexte de l'écran (signal, intégrations) : au pied de la section du module, dans le rail. */
.pin-droite{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.pin-client{font-family:var(--font-corps);font-size:13px;line-height:1.4;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Rail et compte (31/10/2026) : crochets de mise en forme nommés par le rendu. */
.ep-nouveau input{min-width:12em}
.cp-esp{max-width:22ch}
.cp-heure{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* La navigation de la Toolbox dans le rail (01/11/2026) : ses familles sont des dossiers repliables du rail — sur le hub
   `/toolbox` comme dans la section des écrans `/consult` (`toolbox/navigation-toolbox.mjs`). */
.tb-rl-familles{margin-top:2px}
/* Une famille n'a pas de « ⋯ » (ce n'est pas un dossier de la personne) : son libellé garde la place, seule la flèche reste. */
.tb-rl-familles .rl-d{padding-right:34px}
.tb-rl-familles .rl-dossier:is(:hover,:focus-within) .rl-nb{visibility:visible}
.tb-rl-familles .rl-items .pin-compteur{flex:none;font-size:11px;line-height:16px}

/* L-12 (01/11/2026) : le h1 qu'une page sans titre dessiné reçoit de la coquille — lu par les lecteurs d'écran, pas dessiné. */
.titre-ecran-discret{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}