/* ══ Polices AUTO-HÉBERGÉES (Sora, Archivo, IBM Plex Mono) ═══════════════════
   Servies en woff2 depuis /assets/fonts (route serveur). font-display:swap : le texte
   s'affiche tout de suite dans la police système puis bascule, jamais de page nue. Aucun
   appel à un CDN externe — OSMOSE tourne hors réseau et le RGPD proscrit les CDN de polices tiers. */
@font-face { font-family:'Sora'; font-weight:600; font-display:swap; src:url('/assets/fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-weight:700; font-display:swap; src:url('/assets/fonts/sora-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:400; font-display:swap; src:url('/assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:500; font-display:swap; src:url('/assets/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:600; font-display:swap; src:url('/assets/fonts/archivo-600.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:700; font-display:swap; src:url('/assets/fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('/assets/fonts/plexmono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url('/assets/fonts/plexmono-500.woff2') format('woff2'); }

:root {
  /* Neutres — JETONS §2 */
  --encre: #0E1726;            /* titres */
  --encre-secondaire: #24314B;
  --encre-douce: #4A5468;      /* texte courant / secondaire */
  --encre-tres-douce: #8A93A6;
  --muet: #8A93A6;
  --encre-fort: #0E1726;
  --desactive: #A6AEBD;
  --fond: #F7F8FA;
  --surface: #FFFFFF;
  --surface-douce: #FAFBFD;
  --trait: #E8ECF2;
  --trait-carte: #E4E9F0;
  --trait-fin: #EEF1F6;
  --trait-fort: #D5DBE5;
  --bord-bouton: #C0C8D6;
  --puce-fond: #F1F4F8;
  --chassis: #0E1726;
  /* Accent par défaut = OPS (surchargé par module via la coquille) — JETONS §1 */
  --accent: #1C65C8;
  --accent-clair: #5A9BF0;
  --accent-fond: #EAF1FB;
  --accent-sombre: #123F86;
  /* Provenance — JETONS §3, sémantique intouchable */
  --observe: #146044;   --observe-bord: #BFE0CF;  --observe-fond: #E7F4EE;
  --infere: #8A5A10;    --infere-bord: #E8D5AA;   --infere-fond: #FDF3E3;
  --inconnu: #5B6478;   --inconnu-bord: #D5DBE5;  --inconnu-fond: #EEF1F5;
  --conteste: #A02020;  --conteste-bord: #E8C0C0; --conteste-fond: #FCEDED;
  --orange: #C46D00;    --orange-fond: #FDF3E3;
  /* Accent société VISULOGISTIQUE (doré) */
  --dore: #E08A2B;  --dore-texte: #C46D00;  --dore-fond: #FDF6EA;
  /* Palette des cinq modules — JETONS §1 (base / clair / sombre / fond très clair) */
  --ops-base:#1C65C8;    --ops-clair:#5A9BF0;   --ops-sombre:#123F86;   --ops-fond:#EAF1FB;
  --consult-base:#C46D00;--consult-clair:#F0A03A;--consult-sombre:#8A4D00;--consult-fond:#FDF3E3;
  --field-base:#007E79;  --field-clair:#3FB5AE; --field-sombre:#005A57;  --field-fond:#E2F4F2;
  --team-base:#7A4ABA;   --team-clair:#A47FD6;  --team-sombre:#553288;   --team-fond:#F1ECFA;
  --labo-base:#B53C7F;   --labo-clair:#D97AAC;  --labo-sombre:#82285A;   --labo-fond:#FBEBF3;
  /* Élévation — JETONS §5 */
  --ombre: 0 1px 2px rgba(14,23,38,.05), 0 2px 8px rgba(14,23,38,.05);
  --ombre-flottante: 0 14px 40px rgba(14,23,38,.22);
  --ombre-tuile: 0 6px 20px rgba(22,32,44,.14);
  --transition: .15s ease;
  /* Typographie auto-hébergée — JETONS §4 */
  --police: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --police-titre: 'Sora', 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --police-chiffres: 'IBM Plex Mono', "SF Mono", "DejaVu Sans Mono", Consolas, monospace;
  --r: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--police); font-size: 14px; line-height: 1.5;
  color: var(--encre); background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--police-titre); font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: 21px; } h2 { font-size: 15.5px; font-weight: 600; } h3 { font-size: 13.5px; font-weight: 600; }
p { margin: 0 0 8px; }
code { font-family: var(--police-chiffres); font-size: 12px; }

/* ══ Bandeau HUB ═══════════════════════════════════════════════════════════ */
.bandeau-hub {
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; height: 50px;
  background: var(--encre); color: #fff;
}
.bandeau-hub .marque { font-weight: 700; letter-spacing: .1em; font-size: 15px; color: #fff; }
.bandeau-hub .marque:hover { text-decoration: none; }
.bandeau-hub .signature { font-size: 11px; opacity: .55; letter-spacing: .05em; margin-left: -12px; }
.bandeau-hub .droite { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.bandeau-hub a { color: #fff; opacity: .82; }
.bandeau-hub a:hover { opacity: 1; }

/* ══ Bandeau d'une application ═════════════════════════════════════════════
   Identité du logiciel à gauche, contexte client au centre, sortie à droite.
   Il n'y a PAS d'onglets d'autres applications : on quitte, on ne navigue pas. */
.bandeau-app {
  display: flex; align-items: stretch;
  background: var(--accent-sombre); color: #fff; height: 50px;
}
.bandeau-app .retour {
  display: flex; align-items: center; gap: 7px;
  padding: 0 15px; color: #fff; opacity: .78;
  border-right: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 600;
}
.bandeau-app .retour:hover { opacity: 1; background: rgba(0,0,0,.16); text-decoration: none; }
.bandeau-app .identite { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.bandeau-app .identite .nom { font-weight: 700; letter-spacing: .07em; font-size: 15px; }
.bandeau-app .identite .baseline { font-size: 11.5px; opacity: .62; letter-spacing: .02em; }
.bandeau-app .contexte {
  display: flex; align-items: center; gap: 9px;
  margin-left: 22px; padding: 0 12px;
  background: rgba(0,0,0,.22); font-size: 13px;
}
.bandeau-app .contexte .client { font-weight: 600; }
.bandeau-app .contexte .site { opacity: .72; }
.bandeau-app .mandat {
  align-self: center; padding: 2px 8px; border-radius: 3px;
  background: #8a5a10; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.bandeau-app .droite { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 0 16px; font-size: 13px; }
/* Autopilote OSMO — contrôle permanent du bandeau (toujours visible, cliquable de partout). */
.autopilote-bandeau { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 10px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.autopilote-bandeau .ab-pastille { width: 8px; height: 8px; border-radius: 50%; background: #9fb2c2; flex: none; }
.autopilote-bandeau.semi .ab-pastille { background: #e0a83c; box-shadow: 0 0 0 3px rgba(224,168,60,.25); }
.autopilote-bandeau.auto .ab-pastille { background: #46c08a; box-shadow: 0 0 0 3px rgba(70,192,138,.28); }
.autopilote-bandeau .ab-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.autopilote-bandeau .ab-modes { display: inline-flex; background: rgba(0,0,0,.22); border-radius: 12px; padding: 2px; }
.autopilote-bandeau .ab-mode { border: none; background: transparent; cursor: pointer; font-family: inherit; color: #fff; opacity: .7; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; }
.autopilote-bandeau .ab-mode:hover { opacity: 1; }
.autopilote-bandeau .ab-mode.actif { opacity: 1; background: #fff; color: var(--accent-sombre); }
.autopilote-bandeau.auto .ab-mode.actif { background: #46c08a; color: #06301f; }
.autopilote-bandeau.semi .ab-mode.actif { background: #e0a83c; color: #3a2803; }
.bandeau-app a { color: #fff; opacity: .82; }
.bandeau-app a:hover { opacity: 1; }

/* ══ Bascule d'application : un menu, pas des onglets ══════════════════════ */
.bascule { position: relative; align-self: center; }
.bascule > summary {
  list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 3px;
  background: rgba(255,255,255,.12); font-size: 12.5px; font-weight: 600; color: #fff;
}
.bascule > summary::-webkit-details-marker { display: none; }
.bascule > summary:hover { background: rgba(255,255,255,.2); }
.bascule .panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  min-width: 310px; padding: 6px;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: 6px; box-shadow: var(--ombre-flottante);
}
.bascule .panneau .entree { display: block; padding: 8px 10px; border-radius: 4px; color: var(--encre); }
.bascule .panneau .entree:hover { background: var(--fond); text-decoration: none; }
.bascule .panneau .entree.inactive { opacity: .5; cursor: not-allowed; }
.bascule .panneau .entree .nom { font-weight: 700; font-size: 13px; }
.bascule .panneau .entree .bl { font-size: 11.5px; color: var(--encre-douce); }
.bascule .panneau .entree .pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }

/* ══ Navigation propre à l'application ════════════════════════════════════ */
/* Le shell tient dans la fenêtre : bandeau figé en haut, puis nav et contenu qui défilent
   CHACUN de leur côté. C'est le contenu qui bouge, jamais la page entière — on ne perd
   plus la navigation ni le bandeau en descendant dans un long cockpit. */
.corps-app { display: flex; height: calc(100vh - 50px); overflow: hidden; }
.nav-app {
  width: 242px; flex: 0 0 242px;
  background: var(--surface); border-right: 1px solid var(--trait);
  padding: 12px 0; display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
}
.nav-app .groupe { padding: 0 12px; }
.nav-app .titre-groupe {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-tres-douce); padding: 12px 8px 5px;
}
/* Modules dépliants : le titre reste visible et bien lisible (encre foncée), un chevron indique
   l'état, les vues se déploient au clic. */
.nav-app details.groupe-module { padding: 0 12px; }
.nav-app summary.titre-module {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .01em;
  color: var(--encre-fort, #0b2233); padding: 10px 8px; margin-top: 2px; border-radius: 5px;
}
.nav-app summary.titre-module::-webkit-details-marker { display: none; }
.nav-app summary.titre-module::before {
  content: '▸'; font-size: 10px; color: var(--encre-douce); flex: none;
}
.nav-app details[open] > summary.titre-module::before { content: '▾'; }
.nav-app summary.titre-module:hover { background: var(--fond); }
.nav-app details.groupe-module > a { margin-left: 8px; }
/* Bande de couverture analytique du cockpit (données manquantes, compact et repliable). */
.couverture { margin: 4px 0 14px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }
.couverture > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--encre); }
.couverture > summary::-webkit-details-marker { display: none; }
.couverture .cv-pastille { font-family: var(--police-chiffres); font-weight: 800; font-size: 12px; color: var(--accent-sombre); background: var(--accent-fond); border-radius: 20px; padding: 2px 9px; flex: none; }
.couverture .cv-plus { margin-left: auto; }
.couverture .corps { border-top: 1px solid var(--trait); }
.nav-app a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px; margin: 1px 0; border-radius: 4px;
  color: var(--encre); font-size: 13px;
}
.nav-app a:hover { background: var(--fond); text-decoration: none; }
.nav-app a.actif { background: var(--accent-fond); color: var(--accent-sombre); font-weight: 600; }
.nav-app a .compteur {
  margin-left: auto; font-family: var(--police-chiffres); font-size: 11.5px;
  color: var(--encre-tres-douce);
}
.nav-app a.actif .compteur { color: var(--accent); }
.nav-app .pied-nav { margin-top: auto; padding: 12px; border-top: 1px solid var(--trait); }
.contenu-app { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 16px 20px 40px; }
/* Bulle OSMO — flottante fixe, présente sur toutes les pages (sans logo pour l'instant). Toujours
   cliquable : c'est un lien vers la discussion OSMO. */
.osmo-bulle { position: fixed; right: 22px; bottom: 22px; z-index: 800; width: 58px; height: 58px; border-radius: 50%; background: var(--accent-sombre); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: .04em; box-shadow: var(--ombre-flottante); border: 2px solid #fff; transition: transform var(--transition), background var(--transition); }
.osmo-bulle:hover { background: var(--accent); text-decoration: none; transform: translateY(-2px); }
button.osmo-bulle { cursor: pointer; font-family: inherit; }
/* Panneau OSMO flottant (FIELD) — chat + dictée mains-libres. Piloté par /field/osmo.js. */
.osmo-panneau { position: fixed; right: 22px; bottom: 90px; z-index: 810; width: min(360px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; box-shadow: var(--ombre-flottante); overflow: hidden; }
.osmo-panneau[hidden] { display: none; }
.osmo-tete { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--accent-sombre); color: #fff; font-weight: 800; letter-spacing: .04em; }
.osmo-tete .osmo-titre { flex: 1; }
.osmo-tete button { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; width: 32px; height: 30px; cursor: pointer; font-size: 15px; }
.osmo-tete button.ecoute { background: #d64545; }
.osmo-panneau .osmo-fil { padding: 12px; margin: 0; flex: 1; }
.osmo-vide { color: var(--muet); font-size: 12.5px; padding: 4px 2px; }
.osmo-saisie { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--trait); }
.osmo-saisie input { flex: 1; padding: 9px 11px; border: 1px solid var(--trait); border-radius: 10px; font-size: 14px; font-family: inherit; }
.osmo-saisie button { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 0 14px; font-size: 16px; cursor: pointer; }
/* Catalogue de logiques : groupes + petit chip d'info sur la tuile */
.groupe-logiques { margin-bottom: 16px; }
.tuile-voix { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--surface-douce); border: 1px solid var(--trait); border-radius: 9px; padding: 1px 7px; white-space: nowrap; }
/* Catalogue de vues sélectionnables (configurateur) — cartes cochables, état visible sans JS */
.famille-catalogue { margin-bottom: 14px; }
.catalogue-vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.carte-vue { position: relative; display: block; cursor: pointer; }
.carte-vue > input { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.carte-vue .cv-corps { display: block; border: 1px solid var(--trait); border-radius: 12px; padding: 12px 12px 12px 38px; background: var(--surface); transition: border-color var(--transition), background var(--transition); }
.carte-vue:hover .cv-corps { border-color: var(--trait-fort); }
.carte-vue:has(> input:checked) .cv-corps { border-color: var(--accent); background: var(--accent-fond); box-shadow: inset 0 0 0 1px var(--accent); }
.carte-vue .cv-nom { display: block; font-weight: 700; color: var(--accent); }
.carte-vue .cv-meta { display: block; font-size: 12px; color: var(--muet); margin-top: 2px; }
.carte-vue .cv-cols { margin-top: 8px; }
.carte-vue .cv-cols > summary { font-size: 12px; color: var(--muet); cursor: pointer; }
.carte-vue .cv-cols[open] > summary { color: var(--accent); }
/* Sous-titre de FAMILLE fonctionnelle dans un module (Espace, Stock, Réception/prépa/expé…) */
.nav-sous-titre { font-size: 11px; font-weight: 700; color: var(--muet); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 3px; margin-top: 4px; border-top: 1px solid var(--trait); }
.nav-app .groupe-module .nav-sous-titre:first-of-type { border-top: 0; margin-top: 0; }
/* Sous-menu de navigation (ex. « Registres & données ») : replié par défaut, discret, indenté */
.groupe-sous { margin: 2px 0 2px 0; }
.groupe-sous > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muet); text-transform: uppercase; letter-spacing: .03em; border-radius: 8px; }
.groupe-sous > summary::-webkit-details-marker { display: none; }
.groupe-sous > summary::before { content: "▸"; font-size: 10px; color: var(--muet); }
.groupe-sous[open] > summary::before { content: "▾"; }
.groupe-sous > summary:hover { background: var(--surface-douce); }
.groupe-sous > a { padding-left: 22px; font-size: 13px; }
.groupe-sous .compteur { text-transform: none; }
/* Bandeau vocal global : OSMO pilote FIELD à la voix, de partout */
.osmo-bandeau { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface-douce); border: 1px solid var(--trait); border-radius: 12px; }
.osmo-bandeau .ico { font-size: 20px; }
.osmo-bandeau .txt { flex: 1; }
.osmo-bandeau .txt strong { display: block; }
/* Guidage pas-à-pas (préparation, etc.) */
.guidage-liste { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: g; }
.guidage-liste .g-step { counter-increment: g; position: relative; padding: 10px 12px 10px 42px; border: 1px solid var(--trait); border-radius: 10px; margin-bottom: 8px; font-size: 15px; line-height: 1.4; }
.guidage-liste .g-step::before { content: counter(g); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--trait); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muet); }
.guidage-liste .g-step.actif { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-fond); }
.guidage-liste .g-step.actif::before { background: var(--accent); color: #fff; border-color: var(--accent); }
.guidage-liste .g-step.fait { opacity: .55; }
.guidage-cmd { display: flex; gap: 8px; flex-wrap: wrap; }
.bouton.grand { font-size: 16px; padding: 12px 20px; }
/* Fiche 360 */
.f360-tete { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.f360-photo { width: 160px; flex-shrink: 0; }
.f360-photo-vide { width: 160px; height: 110px; border: 1px dashed var(--trait); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muet); font-size: 12px; }
.f360-ident { flex: 1; min-width: 240px; }
.f360-groupe { margin-bottom: 12px; }
.lignes-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.puce { display: inline-block; padding: 3px 9px; border: 1px solid var(--trait); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--surface-douce); text-decoration: none; }
.puce:hover { border-color: var(--accent); text-decoration: none; }
.f360-pied { margin-top: 10px; }
/* Overlay 360 (FIELD, piloté par /field/osmo.js) */
.f360-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(8,16,32,.55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow-y: auto; }
.f360-overlay[hidden] { display: none; }
.f360-modale { background: var(--surface); border-radius: 16px; max-width: 760px; width: 100%; padding: 18px; box-shadow: var(--ombre-flottante); position: relative; }
.f360-fermer { position: absolute; right: 12px; top: 10px; background: var(--surface-douce); border: 1px solid var(--trait); border-radius: 8px; width: 34px; height: 32px; cursor: pointer; font-size: 15px; }
/* Fil de discussion OSMO */
.osmo-fil { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; max-height: 56vh; overflow-y: auto; }
.osmo-echange { display: flex; flex-direction: column; gap: 6px; }
.osmo-q, .osmo-r { padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 85%; }
.osmo-q { align-self: flex-end; background: var(--accent-fond); color: var(--accent-sombre); }
.osmo-r { align-self: flex-start; background: var(--surface-douce); border: 1px solid var(--trait); }
.osmo-qui { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-tres-douce); margin-bottom: 3px; }
.osmo-forme textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--trait-fort); border-radius: 8px; resize: vertical; }
/* TEAM — fil de messagerie */
.tm-fil { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 58vh; overflow-y: auto; }
.tm-msg { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: var(--surface-douce); border: 1px solid var(--trait); }
.tm-msg.tm-mien { align-self: flex-end; background: var(--accent-fond); border-color: var(--accent-fond); }
.tm-msg.tm-osmo { background: #efecf7; border-color: #ddd4ee; }
.tm-qui { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-tres-douce); margin-bottom: 2px; }
/* TEAM — accueil */
.tm-accueil { max-width: 920px; }
.tm-bienvenue h1 { font-size: 22px; }
.tm-bienvenue .tm-sous { color: var(--encre-douce); margin-top: 4px; }
.tm-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.tm-tuile { margin: 0; }
.tm-tuile button { width: 100%; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--trait); border-top: 3px solid var(--accent); border-radius: var(--r); box-shadow: var(--ombre); font-family: inherit; transition: box-shadow var(--transition), transform var(--transition); }
.tm-tuile button:hover { box-shadow: var(--ombre-flottante); transform: translateY(-2px); }
.tm-tuile-ic { font-size: 22px; }
.tm-tuile-t { font-weight: 700; font-size: 14px; color: var(--encre); }
.tm-tuile-s { font-size: 11.5px; color: var(--encre-douce); }
.tm-recentes { margin: 18px 0; }
.tm-recentes-titre { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-tres-douce); margin-bottom: 8px; }
.tm-conv-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tm-conv { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); color: var(--encre); }
.tm-conv:hover { background: var(--accent-fond); text-decoration: none; }
.tm-conv-ic { font-size: 20px; flex: none; }
.tm-conv-b { display: flex; flex-direction: column; min-width: 0; }
.tm-conv-t { font-weight: 600; font-size: 13.5px; }
.tm-conv-s { font-size: 11.5px; color: var(--encre-douce); }
/* TEAM — formulaire */
.tm-segments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tm-seg { position: relative; }
.tm-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tm-seg span { display: inline-block; padding: 7px 13px; border: 1px solid var(--trait-fort); border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); background: var(--surface); }
.tm-seg input:checked + span { background: var(--accent-sombre); color: #fff; border-color: var(--accent-sombre); }
.tm-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-tres-douce); margin: 10px 0 5px; }
.tm-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--trait-fort); border-radius: 8px; font-family: inherit; font-size: 13px; }
.tm-membres { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid var(--trait-fort); border-radius: 20px; font-size: 12.5px; cursor: pointer; }
.tm-chip:has(input:checked) { background: var(--accent-fond); border-color: var(--accent); }
.tm-chip input { margin: 0; }
.tm-ava { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-sombre); color: #fff; font-size: 10px; font-weight: 700; }

/* ══ Fil et en-tête d'écran ═══════════════════════════════════════════════ */
.fil { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--encre-douce); margin-bottom: 9px; }
.fil a { color: var(--encre-douce); }
.fil .sep { color: var(--encre-tres-douce); }
.entete-ecran { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.entete-ecran .titre { min-width: 0; }
.entete-ecran .titre h1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.entete-ecran .titre .sous { font-size: 13px; color: var(--encre-douce); margin-top: 3px; }
.entete-ecran .outils { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ══ Blocs ════════════════════════════════════════════════════════════════ */
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); margin-bottom: 15px; }
.bloc > header { display: flex; align-items: baseline; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--trait); }
.bloc > header .compte { margin-left: auto; color: var(--encre-douce); font-size: 12.5px; }
.bloc > .corps { padding: 13px; }
.bloc > .corps.serre { padding: 0; }
.bloc.discret { box-shadow: none; background: var(--surface-douce); }

/* ══ Note de justification : pourquoi cet écran existe ════════════════════ */
.note {
  display: flex; gap: 9px; padding: 9px 13px;
  background: var(--accent-fond); border-bottom: 1px solid var(--trait);
  color: var(--accent-sombre); font-size: 12.5px; line-height: 1.45;
}
.note .clef { font-weight: 700; flex-shrink: 0; }

/* ══ Tableaux ═════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 10;
  text-align: left; padding: 7px 10px; white-space: nowrap;
  background: #eff2f6; border-bottom: 1px solid var(--trait-fort);
  font-weight: 600; font-size: 11.5px; letter-spacing: .01em; color: var(--encre-douce);
}
thead th.nombre { text-align: right; }
thead th.mince { width: 34px; padding-right: 0; }
tbody td { padding: 6px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
tbody tr:hover { background: var(--surface-douce); }
tbody tr.selectionnee { background: var(--accent-fond); }
/* Ligne entière cliquable, SANS JavaScript (CSP script-src 'none') : le lien de la 1re colonne
   (.cle-ligne) s'étend sur toute la ligne via un pseudo-élément. On clique n'importe où sur la
   ligne pour ouvrir la fiche. Les contrôles de la ligne (case à cocher, menu d'actions, autres
   liens) restent au-dessus et donc cliquables. */
.tableau-defilant tbody tr, .kanban-carte { position: relative; }
.tableau-defilant tbody tr:hover { background: var(--accent-fond); cursor: pointer; }
.tableau-defilant a.cle-ligne::after, .kanban-carte a.cle-ligne::after { content: ''; position: absolute; inset: 0; }
.tableau-defilant td.mince, .tableau-defilant td.actions-cellule, .tableau-defilant .menu-actions,
.tableau-defilant input[type=checkbox], .kanban-carte .menu-actions,
.tableau-defilant tbody td a:not(.cle-ligne) { position: relative; z-index: 1; }
tbody td.nombre { text-align: right; font-family: var(--police-chiffres); font-size: 12.5px; white-space: nowrap; }
tbody td.vide { color: var(--encre-tres-douce); }
tbody td.mince { padding-right: 0; }
tbody td.actions-cellule { text-align: right; padding: 4px 8px; white-space: nowrap; }
tfoot td { padding: 7px 10px; border-top: 2px solid var(--trait-fort); font-weight: 600; background: #eff2f6; }
tfoot td.nombre { text-align: right; font-family: var(--police-chiffres); }
.tableau-defilant { max-height: 64vh; overflow: auto; }
.cle-ligne { font-family: var(--police-chiffres); font-size: 12.5px; font-weight: 600; }

/* ══ Menu d'actions sur une ligne ═════════════════════════════════════════
   Élément natif <details> : aucun JavaScript, donc aucune exception à la
   politique de contenu. */
.menu-actions { position: relative; display: inline-block; }
.menu-actions > summary {
  list-style: none; cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--trait-fort); border-radius: 4px;
  background: var(--surface); font-size: 12px; font-weight: 600; color: var(--encre-douce);
}
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions > summary:hover { background: var(--fond); color: var(--encre); }
.menu-actions[open] > summary { background: var(--accent-fond); color: var(--accent-sombre); border-color: var(--accent); }
.menu-actions .panneau {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
  min-width: 290px; max-width: 380px; padding: 5px;
  text-align: left; white-space: normal;
  background: var(--surface); border: 1px solid var(--trait-fort);
  border-radius: 6px; box-shadow: var(--ombre-flottante);
}
.menu-actions .panneau .titre-panneau {
  padding: 5px 9px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--encre-tres-douce);
}
.menu-actions .entree {
  display: block; padding: 7px 9px; border-radius: 4px;
  color: var(--encre); font-size: 13px; font-weight: 600;
}
.menu-actions .entree:hover { background: var(--accent-fond); text-decoration: none; }
.menu-actions .entree.inactive { color: var(--encre-tres-douce); font-weight: 400; cursor: not-allowed; }
.menu-actions .entree.inactive:hover { background: transparent; }
.menu-actions .entree .pourquoi { display: block; font-weight: 400; font-size: 11.5px; color: var(--encre-douce); line-height: 1.35; margin-top: 2px; }
.menu-actions .separateur-menu { height: 1px; background: var(--trait); margin: 4px 6px; }

/* ══ Barre de sélection multiple ══════════════════════════════════════════ */
.barre-lot {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; background: var(--encre); color: #fff;
  border-radius: 0 0 var(--r) var(--r);
}
.barre-lot .compte-selection { font-weight: 700; font-size: 13.5px; white-space: nowrap; padding-bottom: 7px; }
.barre-lot label { display: block; font-size: 11px; font-weight: 600; opacity: .72; margin-bottom: 3px; }
.barre-lot select, .barre-lot input[type=text] {
  font-family: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  background: rgba(255,255,255,.1); color: #fff; max-width: none;
}
.barre-lot select option { color: var(--encre); }
.barre-lot .motif-lot { flex: 1 1 260px; min-width: 200px; }
.barre-lot .aide { flex-basis: 100%; font-size: 11.5px; opacity: .68; line-height: 1.4; }

/* ══ Provenance ═══════════════════════════════════════════════════════════ */
.prov {
  display: inline-block; padding: 1px 6px; border-radius: 3px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.prov.OBSERVE, .prov.CONFIRME { background: var(--observe-fond); color: var(--observe); }
.prov.DECLARE, .prov.INCONNU { background: var(--inconnu-fond); color: var(--inconnu); }
.prov.INFERE { background: var(--infere-fond); color: var(--infere); }
.prov.CONTESTE { background: var(--conteste-fond); color: var(--conteste); }

/* ══ Indicateurs ══════════════════════════════════════════════════════════ */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.indicateur { padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); }
.indicateur .etiquette { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-tres-douce); }
.indicateur .valeur { font-family: var(--police-chiffres); font-size: 21px; font-weight: 600; margin-top: 1px; letter-spacing: -.01em; }
.indicateur .valeur.texte { font-family: var(--police); font-size: 16px; }
.indicateur .precision { font-size: 11.5px; color: var(--encre-douce); margin-top: 4px; line-height: 1.35; }
.indicateur.alerte { border-color: #e8c0c0; background: var(--conteste-fond); }
.indicateur.alerte .valeur { color: var(--conteste); }
.indicateur .obj { font-size: 11px; color: var(--encre-tres-douce); margin-top: 3px; font-family: var(--police-chiffres); }
.indicateur .src { font-size: 10px; color: var(--encre-tres-douce); margin-top: 5px; padding-top: 5px; border-top: 1px dotted var(--trait); }

/* ══ Dashboards — cartes KPI au standard de la maquette validée ═════════════ */
/* Bande de cartes : pastille-icône, libellé, grande valeur, sparkline, badge de variation. */
.kpi-bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-bande.secondaire { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--trait); border-top: 2px solid var(--accent); border-radius: var(--r); box-shadow: var(--ombre); padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; transition: box-shadow var(--transition); }
.kpi:hover { box-shadow: var(--ombre-flottante); }
.kpi-haut { display: flex; align-items: center; gap: 9px; }
/* Échelle stable (charte §10) : vert bon · ambre moyen · orange important/mauvais · rouge critique · gris n/a. */
:root { --orange: #c1601a; --orange-fond: #fcefe3; }
.kpi-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-fond); color: var(--accent); flex: none; }
.kpi.bon .kpi-ic { background: var(--observe-fond); color: var(--observe); }
.kpi.moyen .kpi-ic { background: var(--infere-fond); color: var(--infere); }
.kpi.mauvais .kpi-ic { background: var(--orange-fond); color: var(--orange); }
.kpi.critique .kpi-ic { background: var(--conteste-fond); color: var(--conteste); }
.kpi.na .kpi-ic { background: var(--inconnu-fond); color: var(--inconnu); }
.kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-tres-douce); line-height: 1.25; }
.kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi-val { font-family: var(--police-chiffres); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.kpi.bon .kpi-val { color: var(--observe); }
.kpi.moyen .kpi-val { color: var(--infere); }
.kpi.mauvais .kpi-val { color: var(--orange); }
.kpi.critique .kpi-val { color: var(--conteste); }
.kpi.na .kpi-val { color: var(--inconnu); }
.kpi-spark { flex: none; width: 108px; opacity: .95; }
.kpi-bas { display: flex; align-items: center; gap: 6px; font-size: 11px; min-height: 16px; flex-wrap: wrap; }
.kpi-cmp { color: var(--encre-tres-douce); font-family: var(--police-chiffres); }
.var { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-family: var(--police-chiffres); padding: 1px 6px; border-radius: 20px; }
.var.v-bon { color: var(--observe); background: var(--observe-fond); }
.var.v-mauvais { color: var(--orange); background: var(--orange-fond); }
.var-ref { color: var(--encre-tres-douce); }

/* Bandeau de fraîcheur : distingue période analysée, dernière synchro et temps réel (charte §6). */
.bandeau-fraicheur { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 9px 13px; margin-bottom: 15px; background: var(--surface-douce); border: 1px solid var(--trait); border-radius: var(--r); font-size: 12px; color: var(--encre-douce); }
.bandeau-fraicheur .bf-k { color: var(--encre-tres-douce); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; margin-right: 5px; }
.bandeau-fraicheur .bf-attente { color: var(--infere); }

/* Détails repliables : la vue d'ensemble reste courte ; le détail est à un clic (charte §2). */
.details-cockpit { margin-top: 4px; }
.details-cockpit > summary { cursor: pointer; padding: 11px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); font-weight: 600; font-size: 13px; color: var(--accent-sombre); list-style: none; }
.details-cockpit > summary::-webkit-details-marker { display: none; }
.details-cockpit > summary::before { content: '▸ '; color: var(--encre-tres-douce); }
.details-cockpit[open] > summary::before { content: '▾ '; }
.details-cockpit[open] > summary { margin-bottom: 15px; }

/* Panneaux de visuels centraux : flux qui REMPLIT chaque rangée (flexbox + étirement). Les cartes
   grandissent pour occuper toute la largeur disponible : aucune colonne orpheline, aucun trou,
   quel que soit le nombre de cartes ou de cartes « larges ». Une carte large pèse deux fois plus. */
.panneaux { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.panneaux > * { flex: 1 1 340px; min-width: 0; }
.panneaux > .g-large { flex: 2 1 520px; }
/* Bande de mesures (cartes KPI d'un cockpit) : grille dédiée qui remplit la ligne sans trou,
   quel que soit le nombre de cartes (4, 5…). Un panneaux qui contient des cartes mesure bascule
   automatiquement sur cette grille — pas besoin de classe de conteneur séparée. */
.panneaux:has(> .mesure) { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.mesure { background: var(--surface); border: 1px solid var(--trait); border-top: 2px solid var(--accent); border-radius: var(--r); box-shadow: var(--ombre); padding: 12px 15px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow var(--transition); }
.mesure:hover { box-shadow: var(--ombre-flottante); }
.mesure .m-lib { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; color: var(--encre-tres-douce); }
.mesure .m-val { font-family: var(--police-chiffres); font-size: 23px; font-weight: 650; line-height: 1.15; color: var(--encre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.mesure .m-sub { font-size: 11.5px; color: var(--encre-douce); }
.mesure.alerte { border-top-color: var(--conteste); }
.mesure.alerte .m-val { color: var(--conteste); }
.carte-graphe { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition); }
.carte-graphe:hover { box-shadow: var(--ombre-flottante); }
.carte-graphe > header { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 2px solid var(--accent-fond); font-size: 12.5px; font-weight: 600; color: var(--encre); }
.carte-graphe .graphe { padding: 14px; display: flex; justify-content: center; align-items: center; flex: 1; }
.carte-graphe .graphe svg { max-width: 100%; height: auto; }
.carte-graphe .note-graphe { padding: 0 14px 11px; }
.pastille-nb { margin-left: auto; background: var(--conteste); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.alertes { padding: 4px 6px; }
.alerte-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--trait); }
.alerte-ligne:last-child { border-bottom: none; }
.alerte-ligne .al-lbl { flex: 1; font-size: 13px; }
.alerte-ligne .al-val { font-family: var(--police-chiffres); font-weight: 600; }
.alerte-ligne.muet .al-lbl { color: var(--encre-douce); }
.pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pt.mauvais { background: var(--conteste); } .pt.moyen { background: var(--infere); } .pt.bon { background: var(--observe); }
@media (max-width: 1150px) { .panneaux > *, .panneaux > .g-large { flex-basis: 100%; } }
.badge-grav { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; letter-spacing: .02em; }
.badge-grav.mauvais { color: var(--conteste); background: var(--conteste-fond); }
.badge-grav.moyen { color: var(--infere); background: var(--infere-fond); }
.badge-grav.neutre { color: var(--encre-douce); background: var(--inconnu-fond); }

/* Onglets de mode (Analyse / Exploitation en direct) — charte §5. */
.entete-ecran { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.entete-ecran .mode-tabs { margin-left: auto; align-self: center; flex-shrink: 0; }
.mode-tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 3px; box-shadow: var(--ombre); }
.mode-tabs a { padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); }
.mode-tabs a.actif { background: var(--accent-sombre); color: #fff; }
.mode-tabs a:hover:not(.actif) { background: var(--fond); text-decoration: none; }
/* Barre d'autopilote OSMO (3 niveaux) sur la vue Optimisation. */
.autopilote-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); }
.autopilote-barre .ap-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-tres-douce); }
.autopilote-barre .ap-modes { display: inline-flex; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: 3px; }
.autopilote-barre .ap-mode { border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 5px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); }
.autopilote-barre .ap-mode:hover { background: var(--surface); }
.autopilote-barre .ap-mode.actif { background: var(--accent-sombre); color: #fff; }
.autopilote-barre .ap-desc { margin-left: auto; }

/* Barre de filtres globaux — charte §12. */
.barre-filtres { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 11px 13px; margin-bottom: 15px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); }
.barre-filtres .filtre { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-tres-douce); }
.barre-filtres select { font-family: var(--police); font-size: 13px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 5px; background: var(--surface); color: var(--encre); min-width: 130px; }
.barre-filtres .reinit { font-size: 12px; align-self: center; }

/* Situation opérationnelle (placeholder honnête tant que FIELD n'est pas raccordé). */
.carte-graphe.situation .situation-corps { align-items: stretch; }
.situation-txt { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.situation-txt p { margin: 0; }
.situation-nb { font-family: var(--police-chiffres); font-size: 22px; font-weight: 700; margin-right: 6px; }
.situation-nb.mauvais { color: var(--conteste); } .situation-nb.bon { color: var(--observe); }
.situation-txt .bouton { align-self: flex-start; }
.situation-tete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.situation-kpi { display: flex; flex-direction: column; line-height: 1.1; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-tres-douce); padding: 4px 8px; border-bottom: 1px solid var(--trait); }
.mini-table th.nombre, .mini-table td.nombre { text-align: right; font-family: var(--police-chiffres); }
.mini-table td { padding: 5px 8px; border-bottom: 1px solid var(--trait); font-size: 12.5px; }
.mini-table tr:last-child td { border-bottom: none; }

/* Carte TMS — sélecteur de couches + légende (charte carte §9). */
.carte-outils { margin-bottom: 12px; }
.carte-couches { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-couches button { font-family: var(--police); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border: 1px solid var(--trait-fort); border-radius: 20px; background: var(--surface); color: var(--encre-douce); cursor: pointer; }
.carte-couches button:hover { background: var(--fond); }
.carte-couches button.actif { background: var(--accent-sombre); color: #fff; border-color: var(--accent-sombre); }
.carte-legende { position: absolute; right: 14px; bottom: 14px; z-index: 500; background: rgba(255,255,255,.95); border: 1px solid var(--trait); border-radius: 7px; box-shadow: var(--ombre-flottante); padding: 9px 12px; font-size: 11.5px; line-height: 1.7; max-width: 320px; color: var(--encre); }
.carte-legende .pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px 0 6px; vertical-align: middle; }
.form-signalement { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; background: var(--conteste-fond); border: 1px solid #e8c0c0; border-radius: var(--r); }
.form-signalement select, .form-signalement input { font-family: var(--police); font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 5px; }
.form-signalement input[name=note] { flex: 1; min-width: 200px; }
.form-signalement #sig-coord { font-family: var(--police-chiffres); }

/* ══ Boutons ══════════════════════════════════════════════════════════════ */
button, .bouton {
  display: inline-block; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
}
button:hover, .bouton:hover { background: var(--fond); text-decoration: none; }
button.primaire, .bouton.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primaire:hover, .bouton.primaire:hover { background: var(--accent-sombre); }
button.danger { border-color: #d8a0a0; color: var(--conteste); }
button.petit, .bouton.petit { font-size: 12px; padding: 4px 9px; }
button[disabled], .bouton.inactif { opacity: .5; cursor: not-allowed; background: var(--fond); color: var(--encre-tres-douce); }
.barre-lot button.primaire { background: #fff; border-color: #fff; color: var(--encre); }
.barre-lot button.primaire:hover { background: #e6ebf1; }

/* ══ Formulaires ══════════════════════════════════════════════════════════ */
.champ { margin-bottom: 12px; }
.champ > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.champ .motif { font-size: 11.5px; color: var(--encre-douce); margin-bottom: 4px; line-height: 1.4; }
.champ .obligatoire { color: var(--conteste); font-weight: 700; }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea {
  width: 100%; max-width: 440px; font-family: inherit; font-size: 14px; color: var(--encre);
  padding: 7px 9px; border: 1px solid var(--trait-fort); border-radius: 4px; background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fond); }
textarea { min-height: 68px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 22px; }
.grille-large { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 15px; }

/* ══ Messages ═════════════════════════════════════════════════════════════ */
.message { padding: 10px 13px; border-radius: var(--r); margin-bottom: 13px; font-size: 13px; line-height: 1.5; }
.message.succes { background: var(--observe-fond); border: 1px solid #bfe0cf; color: #13503a; }
.message.refus { background: var(--conteste-fond); border: 1px solid #e8c0c0; color: #7d1c1c; }
.message.avertissement { background: var(--infere-fond); border: 1px solid #e8d5aa; color: #6b4607; }
.message.info { background: var(--accent-fond); border: 1px solid #c5dcec; color: var(--accent-sombre); }
.message .titre { font-weight: 700; margin-bottom: 3px; }
.message ol, .message ul { margin: 5px 0 0; padding-left: 19px; }
.message li { margin: 3px 0; }

/* ══ Tuiles du lanceur HUB ════════════════════════════════════════════════ */
.lanceur { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
.tuile {
  display: block; position: relative; overflow: hidden;
  padding: 15px 15px 13px; background: var(--surface);
  border: 1px solid var(--trait); border-radius: 7px; box-shadow: var(--ombre); color: var(--encre);
}
.tuile .liseré { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.tuile:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-flottante); text-decoration: none; }
.tuile.indisponible { background: var(--surface-douce); }
.tuile.indisponible:hover { box-shadow: var(--ombre); border-color: var(--trait); }
.tuile .entete-tuile { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.tuile .nom { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.tuile .baseline { font-size: 11.5px; color: var(--encre-douce); }
.tuile .role { font-size: 12.5px; color: var(--encre-douce); line-height: 1.45; min-height: 52px; }
.tuile .bas-tuile { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.tuile .motif-indispo { font-size: 11.5px; color: var(--encre-douce); line-height: 1.4; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--trait); }
.etat {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.etat-a_jour { background: var(--observe-fond); color: var(--observe); }
.etat-disponible { background: var(--accent-fond); color: var(--accent); }
.etat-recommandee { background: var(--infere-fond); color: var(--infere); }
.etat-obligatoire, .etat-bloquee { background: var(--conteste-fond); color: var(--conteste); }
.etat-planifiee, .etat-incompatible { background: var(--inconnu-fond); color: var(--inconnu); }

/* ══ Connexion ════════════════════════════════════════════════════════════ */
.connexion { min-height: 100vh; display: grid; grid-template-columns: 1fr 428px; }
.connexion .visuel { background: linear-gradient(158deg, #101923 0%, #1f5f8b 100%); color: #fff; padding: 50px; display: flex; flex-direction: column; }
.connexion .visuel .marque { font-family: var(--police-titre); font-size: 34px; font-weight: 700; letter-spacing: .08em; }
.connexion .visuel .signature { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.connexion .visuel .signature { font-size: 13px; opacity: .72; margin-top: 5px; letter-spacing: .06em; }
.connexion .visuel .phrase { font-size: 17px; line-height: 1.6; margin-top: auto; max-width: 470px; opacity: .95; }
.connexion .visuel .service { margin-top: 26px; font-size: 12.5px; opacity: .72; }
.connexion .formulaire { background: var(--surface); padding: 50px 42px; display: flex; flex-direction: column; justify-content: center; }
.connexion .visuel-osmose { background: linear-gradient(158deg, #0B1424 0%, #123F86 60%, #1C65C8 100%); }
.connexion .visuel { padding: 56px; }
.connexion .cnx-points { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.connexion .cnx-points > div { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.9); }
.connexion .cnx-puce { width: 7px; height: 7px; border-radius: 50%; background: #5A9BF0; flex: none; box-shadow: 0 0 0 4px rgba(90,155,240,.18); }
.connexion .formulaire { padding: 56px 46px; }
.connexion .cnx-tete h1 { font-family: var(--police-titre); font-size: 26px; }
.connexion .champ { margin-bottom: 16px; }
.connexion .champ label { display: block; font-size: 12.5px; font-weight: 600; color: var(--encre-secondaire); margin-bottom: 6px; }
.connexion .champ input { width: 100%; max-width: 440px; box-sizing: border-box; padding: 12px 13px; border: 1px solid var(--trait-fort); border-radius: 8px; font: inherit; font-size: 14px; }
.connexion .champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fond); }
.connexion .cnx-souvenir { display: flex; align-items: center; gap: 9px; max-width: 440px; font-size: 13.5px; color: var(--encre-douce); margin: 4px 0 20px; cursor: pointer; }
.connexion .cnx-souvenir input { width: 16px; height: 16px; accent-color: var(--accent); }
.connexion .cnx-bouton { width: 100%; max-width: 440px; padding: 13px; font-size: 15px; border-radius: 8px; }
@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion .visuel { padding: 26px; }
  .connexion .visuel .phrase, .connexion .visuel .service { display: none; }
  .corps-app { flex-direction: column; }
  .nav-app { width: auto; flex: none; border-right: none; border-bottom: 1px solid var(--trait); }
}

/* ══ Divers ═══════════════════════════════════════════════════════════════ */
.muet { color: var(--encre-tres-douce); }
.petit { font-size: 12px; }
.rangee { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pile { display: flex; flex-direction: column; gap: 3px; }
.separateur { height: 1px; background: var(--trait); margin: 13px 0; }
.jauge { height: 6px; background: var(--trait); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.jauge > i { display: block; height: 100%; background: var(--accent); }
details > summary { cursor: pointer; }
.replie > summary { font-weight: 600; font-size: 12.5px; color: var(--accent); padding: 4px 0; }
.replie[open] > summary { margin-bottom: 7px; }
.vide-etat { padding: 34px 16px; text-align: center; color: var(--encre-douce); }
.vide-etat .grand { font-size: 15px; font-weight: 600; color: var(--encre); margin-bottom: 5px; }
.vide-etat p { max-width: 560px; margin: 0 auto 8px; line-height: 1.5; font-size: 13px; }
.quand { font-family: var(--police-chiffres); font-size: 11.5px; color: var(--encre-douce); }
.liste-nue { margin: 0; padding: 0; list-style: none; }
.liste-nue li { padding: 7px 0; border-bottom: 1px solid var(--trait); }
.liste-nue li:last-child { border-bottom: none; }
.pied-page { padding: 13px 20px; color: var(--encre-tres-douce); font-size: 11.5px; border-top: 1px solid var(--trait); }

/* ════════════════════════════════════════════════════════════════════════════
   HABILLAGE OSMOSE v2 — refonte design (handoff VISULOGISTIQUE, 1er août 2026).
   Couche de surcharge : reprend les classes existantes, applique les jetons validés.
   ════════════════════════════════════════════════════════════════════════════ */

/* — Palette par module : pose --base/--clair/--sombre/--profond/--modfond, utilisée par
     l'anneau CSS et les tuiles. --profond = teinte sombre pour le dégradé de la couronne. */
.mod-OPS{--base:var(--ops-base);--clair:var(--ops-clair);--sombre:var(--ops-sombre);--profond:var(--ops-sombre);--modfond:var(--ops-fond);}
.mod-CONSULT{--base:var(--consult-base);--clair:var(--consult-clair);--sombre:var(--consult-sombre);--profond:var(--consult-sombre);--modfond:var(--consult-fond);}
.mod-FIELD{--base:var(--field-base);--clair:var(--field-clair);--sombre:var(--field-sombre);--profond:var(--field-sombre);--modfond:var(--field-fond);}
.mod-TEAM{--base:var(--team-base);--clair:var(--team-clair);--sombre:var(--team-sombre);--profond:var(--team-sombre);--modfond:var(--team-fond);}
.mod-LABO,.mod-LAB{--base:var(--labo-base);--clair:var(--labo-clair);--sombre:var(--labo-sombre);--profond:var(--labo-sombre);--modfond:var(--labo-fond);}

/* — L'anneau (JETONS §6). Base 76×76 ; mettre à l'échelle par transform sur .anneau-boite.
     Couronne conique masquée en anneau + trois satellites dans l'ouverture haut-droite. */
.anneau-boite{position:relative;width:76px;height:76px;flex:none;}
.anneau-boite .couronne{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--sombre) 0deg,var(--sombre) 26deg,rgba(0,0,0,0) 29deg,rgba(0,0,0,0) 92deg,var(--clair) 95deg,var(--base) 165deg,var(--profond) 250deg,var(--sombre) 330deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 0,transparent 62%,#000 65%,#000 100%);
  mask-image:radial-gradient(circle closest-side,transparent 0,transparent 62%,#000 65%,#000 100%);}
.anneau-boite .s1{position:absolute;top:6px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--base);}
.anneau-boite .s2{position:absolute;top:17px;right:0;width:5.5px;height:5.5px;border-radius:50%;background:var(--clair);}
.anneau-boite .s3{position:absolute;top:26px;right:10px;width:4px;height:4px;border-radius:50%;background:var(--clair);}
.anneau-boite.blanc{--base:#fff;--clair:#fff;--sombre:#fff;--profond:#fff;}

/* — §3 Bandeau d'application : 52 px, châssis sombre, identité colorée par le module. */
.bandeau-app{height:52px;background:var(--chassis);}
.bandeau-app .retour{opacity:.6;font-family:var(--police);font-weight:600;font-size:12.5px;border-right:0;white-space:nowrap;flex:none;}
.bandeau-app > *{white-space:nowrap;flex:none;}
.bandeau-app .identite{background:var(--accent);padding:0 18px;margin-left:14px;gap:10px;}
.bandeau-app .identite .nom{font-family:var(--police-titre);font-weight:700;font-size:16px;letter-spacing:.08em;}
.bandeau-app .identite .baseline{position:relative;padding-left:11px;font-size:11.5px;opacity:.82;letter-spacing:0;}
.bandeau-app .identite .baseline::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.35);}
.bandeau-app .contexte{background:transparent;margin-left:16px;padding:0;font-size:13px;}
.bandeau-app .contexte .client{font-weight:600;}
.bandeau-app .contexte .site{opacity:.55;}
.bandeau-app .mandat{background:transparent;border:1px solid var(--dore-texte);color:#E6A24A;font-weight:700;font-size:10px;letter-spacing:.06em;border-radius:3px;padding:2px 7px;}
.bandeau-app .droite{opacity:1;}
.bandeau-app .droite > a{opacity:.75;}
/* La bascule, désormais à gauche juste après HUB (voir coquilles.mjs). */
.bandeau-app .bascule{align-self:center;margin-left:8px;}
.bandeau-app .bascule > summary{background:var(--accent);border-radius:4px;padding:6px 11px;font-family:var(--police);font-weight:600;font-size:12px;}
.bandeau-app .bascule > summary:hover{filter:brightness(1.08);}
.bandeau-app .bascule .panneau{left:0;right:auto;min-width:336px;border:1px solid #DCE2EB;border-radius:10px;box-shadow:var(--ombre-flottante);padding:7px;}
.bandeau-app .bascule .panneau .entree{padding:9px 11px;border-radius:6px;}
.bandeau-app .bascule .panneau .entree .nom{font-family:var(--police-titre);font-weight:700;font-size:13px;}
.bandeau-app .bascule .panneau .entree .bl{font-size:11.5px;color:var(--encre-tres-douce);}

/* — §4 Barre latérale : 232 px. */
.nav-app{width:232px;flex:0 0 232px;padding:18px 0;border-right:1px solid var(--trait);}
.nav-app .titre-groupe{color:var(--desactive);letter-spacing:.14em;font-size:10px;}
.nav-app a{font-size:13px;padding:9px 12px;}
.nav-app a.actif{background:var(--accent-fond);color:var(--accent);font-weight:600;}
.nav-app a:hover{background:#F4F7FC;}
.nav-app a .compteur{color:var(--desactive);}

/* — §5 Bandeau d'indicateurs : UNE carte découpée en colonnes. */
.indicateurs{display:flex;grid-template-columns:none;gap:0;background:var(--surface);border:1px solid var(--trait-fort);border-radius:5px;overflow:hidden;}
.indicateur{flex:1;border:0;border-right:1px solid #E7EBF1;border-radius:0;padding:13px 15px;background:transparent;}
.indicateur:last-child{border-right:0;}
.indicateur .etiquette{font-size:9.5px;letter-spacing:.1em;color:#8A93A6;}
.indicateur .valeur{font-family:var(--police-chiffres);font-weight:500;font-size:22px;color:var(--encre);margin-top:7px;}
.indicateur .precision{font-size:10.5px;color:#8A93A6;margin-top:4px;}
.indicateur.alerte{background:#FCF3F3;}
.indicateur.alerte .valeur,.indicateur.alerte .etiquette{color:#A02020;}

/* — §6 Tableau : en-tête châssis sombre, lignes alternées. */
thead th{background:var(--chassis);color:rgba(255,255,255,.7);font-family:var(--police);font-weight:700;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:9px 10px;border:0;}
tbody td{padding:10px;border-bottom:1px solid #EDF0F5;font-size:12.5px;}
tbody tr:nth-child(even){background:var(--surface-douce);}
.tableau-defilant tbody tr:hover{background:#F7F9FC;}

/* — Provenance (JETONS §3) : pastille bordée, exacte. */
.prov{display:inline-block;border:1px solid;border-radius:2px;padding:2px 5px;font-family:var(--police);font-weight:700;font-size:9px;letter-spacing:.05em;text-transform:uppercase;line-height:1;}
.prov.OBSERVE,.prov.CONFIRME{background:var(--observe-fond);color:var(--observe);border-color:var(--observe-bord);}
.prov.DECLARE,.prov.INCONNU{background:var(--inconnu-fond);color:var(--inconnu);border-color:var(--inconnu-bord);}
.prov.INFERE{background:var(--infere-fond);color:var(--infere);border-color:var(--infere-bord);}
.prov.CONTESTE{background:var(--conteste-fond);color:var(--conteste);border-color:var(--conteste-bord);}

/* — §7 Tuiles HUB : grille 4 colonnes, radius 10, nom coloré Sora. */
.lanceur{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.tuile{border:1px solid var(--trait-carte);border-radius:10px;padding:18px;}
.tuile .nom{font-family:var(--police-titre);font-weight:700;font-size:17px;letter-spacing:.04em;color:var(--base,var(--accent));}
.tuile .role{min-height:58px;font-size:13px;color:var(--encre-douce);}
.tuile:hover{border-color:var(--trait-fort);box-shadow:var(--ombre-tuile);}
.tuile.indisponible{background:#F8F9FB;border:1px dashed #DDE3EC;}
.tuile.indisponible .nom{color:#9AA3B4;}
.tuile.indisponible .anneau-boite{opacity:.45;}
@media(max-width:1100px){.lanceur{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.lanceur{grid-template-columns:1fr;}}

/* — §8 Panneau OSMO : navy profond. */
.osmo-panneau{background:#101B33;border:0;border-radius:14px;box-shadow:0 18px 48px rgba(14,23,38,.35);}
.osmo-tete{background:transparent;}
.osmo-bulle{background:#0B1424;border:0;width:62px;height:62px;}
.osmo-bulle:hover{background:#101B33;}

/* (marque OSMO complète insérée plus bas, avant le @media reduce final) */

/* Accessibilité : coupe les animations décoratives, la teinte porte seule l'information. */

/* ══ LA MARQUE OSMO (handoff v2, code/marque-osmo.css) ══ */
/* ════════════════════════════════════════════════════════════════════════════
   OSMOSE — LA MARQUE OSMO
   À coller dans la constante CSS de packages/serveur/src/gabarit.mjs,
   juste avant le bloc « @media(prefers-reduced-motion:reduce) » final.

   Aucune image, aucun canvas, aucune requête. Base de dessin 240 px, mise à
   l'échelle par --t (nombre sans unité = taille voulue en px).

   Usage :  <span class="osmo-marque" style="--t:56" data-etat="repos">…</span>

   ⚠ Les éléments porteurs de transform sont en display:block. Un <span> est
   inline par défaut, et une transformation ne s'applique PAS à une boîte inline :
   sans ça les satellites restent collés au centre. Ne retirez pas ces display:block.
   Le markup est produit par marqueOsmo() — voir marque-osmo.mjs.
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes om-spin  { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
@keyframes om-core  { from { transform: rotate(0deg); }  to { transform: rotate(360deg); } }
@keyframes om-pulse {
  0%,100% { opacity:.9;  transform: scale(1);    filter: brightness(1)    saturate(1);   }
  22%     { opacity:1;   transform: scale(1.05); filter: brightness(1.35) saturate(.85); }
  40%     { opacity:.94; transform: scale(1.01); filter: brightness(1.05) saturate(1);   }
  64%     { opacity:1;   transform: scale(1.09); filter: brightness(1.6)  saturate(.7);  }
  82%     { opacity:.95; transform: scale(1.02); filter: brightness(1.12) saturate(.95); }
}
@keyframes om-flare {
  0%,100% { opacity:.18; transform: scale(.86); }
  20%     { opacity:.85; transform: scale(1.18); }
  36%     { opacity:.24; transform: scale(.95); }
  62%     { opacity:1;   transform: scale(1.38); }
  78%     { opacity:.3;  transform: scale(1); }
}
@keyframes om-halo {
  0%,100% { opacity:.3;  transform: scale(.94); }
  20%     { opacity:.72; transform: scale(1.06); }
  36%     { opacity:.36; transform: scale(.98); }
  62%     { opacity:.95; transform: scale(1.16); }
  78%     { opacity:.4;  transform: scale(1); }
}

/* Boîte : sa taille EST --t. La scène de 240 px est mise à l'échelle dedans. */
.osmo-marque{position:relative;flex:none;display:block;
  width:calc(var(--t,72) * 1px);height:calc(var(--t,72) * 1px);
  transition:filter 400ms ease;}
.osmo-marque .om-scene{position:absolute;left:0;top:0;width:240px;height:240px;
  transform:scale(calc(var(--t,72) / 240));transform-origin:0 0;
  perspective:420px;perspective-origin:50% 44%;}
.osmo-marque .om-tilt{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(62deg) rotateZ(-16deg);}

/* Halo extérieur, dans le plan incliné — donc elliptique. */
.osmo-marque .om-halo{position:absolute;left:50%;top:50%;width:222px;height:222px;
  margin:-111px 0 0 -111px;border-radius:50%;pointer-events:none;filter:blur(2px);
  background:radial-gradient(circle closest-side,
    rgba(120,200,255,0) 52%,rgba(120,200,255,.16) 68%,
    rgba(140,215,255,.42) 84%,rgba(120,200,255,.1) 95%,rgba(120,200,255,0) 100%);
  animation:om-halo 6.5s ease-in-out infinite;}

/* ── Un plan d'orbite. Variables posées par .om-o1 … .om-o5 ────────────────
   --ry  inclinaison du plan       --rad  rayon
   --rz  rotation du plan          --dur  durée d'un tour
   --dly décalage de phase         --dir/--undir  sens (normal | reverse) */
.osmo-marque .om-orbite{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));}
.osmo-marque .om-spin{position:absolute;inset:0;transform-style:preserve-3d;
  animation:om-spin var(--dur) linear infinite;animation-delay:var(--dly,0s);
  animation-direction:var(--dir,normal);}
.osmo-marque .om-pivot{position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;transform:rotateZ(var(--a,0deg));}
.osmo-marque .om-arm{display:block;transform-style:preserve-3d;
  transform:translateX(calc(var(--rad) * 1px)) rotateZ(calc(-1 * var(--a,0deg)));}
/* Contre-rotation : sans elle les billes s'aplatissent en traits. */
.osmo-marque .om-unspin{display:block;transform-style:preserve-3d;
  animation:om-spin var(--dur) linear infinite;animation-delay:var(--dly,0s);
  animation-direction:var(--undir,reverse);}
/* Remet la bille face caméra. */
.osmo-marque .om-face{display:block;transform-style:preserve-3d;
  transform:rotateZ(calc(-1 * var(--rz,0deg))) rotateY(calc(-1 * var(--ry,0deg)))
            rotateZ(16deg) rotateX(-62deg);}
.osmo-marque .om-bille{position:absolute;border-radius:50%;
  width:calc(var(--sz) * 1px);height:calc(var(--sz) * 1px);
  margin:calc(var(--sz) * -.5px) 0 0 calc(var(--sz) * -.5px);
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#ddf6ff 8%,#79d6ff 26%,
    #199aff 50%,#0a55d2 74%,#052a86 92%,#0b3fa8 100%);
  box-shadow:inset -2px -2px 5px rgba(2,14,56,.62),inset 2px 2px 4px rgba(150,225,255,.3);
  filter:drop-shadow(0 0 7px rgba(70,180,255,.6));}

/* Traînée de comète : arc dans le plan de l'orbite, masqué en couronne fine.
   closest-side est OBLIGATOIRE — sans lui le masque se calcule sur la diagonale
   et la traînée disparaît. */
.osmo-marque .om-trainee{position:absolute;left:50%;top:50%;border-radius:50%;
  width:calc(var(--rad) * 2px);height:calc(var(--rad) * 2px);
  margin:calc(var(--rad) * -1px) 0 0 calc(var(--rad) * -1px);
  background:conic-gradient(from 34deg,rgba(60,175,255,0) 0deg,rgba(60,175,255,.12) 22deg,
    rgba(90,200,255,.55) 50deg,rgba(140,225,255,.85) 56deg,
    rgba(90,195,255,0) 56.5deg,rgba(90,195,255,0) 360deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 0,
    transparent calc(100% - 3.5px),#000 calc(100% - 2.5px),#000 100%);
  mask-image:radial-gradient(circle closest-side,transparent 0,
    transparent calc(100% - 3.5px),#000 calc(100% - 2.5px),#000 100%);}

/* Les cinq plans. Ne pas « harmoniser » ces valeurs : ce sont des inclinaisons,
   rayons et vitesses tous différents qui donnent la lecture 3D. */
.osmo-marque .om-o1{--ry:0deg;   --rz:0deg;   --rad:77;  --dur:var(--v);
                    --dly:0s;                --dir:normal; --undir:reverse;}
.osmo-marque .om-o2{--ry:36deg;  --rz:-20deg; --rad:92;  --dur:calc(var(--v) * 1.45);
                    --dly:calc(var(--v) * -.55); --dir:normal; --undir:reverse;}
.osmo-marque .om-o3{--ry:-30deg; --rz:24deg;  --rad:83;  --dur:calc(var(--v) * .78);
                    --dly:calc(var(--v) * -.2);  --dir:reverse; --undir:normal;}
.osmo-marque .om-o4{--ry:64deg;  --rz:-8deg;  --rad:101; --dur:calc(var(--v) * 1.9);
                    --dly:calc(var(--v) * -1.1); --dir:normal; --undir:reverse;}
.osmo-marque .om-o5{--ry:14deg;  --rz:-34deg; --dur:calc(var(--v) * 1.7);
                    --dly:0s;                --dir:reverse; --undir:normal;}
/* La grappe intérieure : QUATRE billes, pas cinq. */
.osmo-marque .om-o5 .om-g1{--a:0deg;  --rad:71; --sz:8;}
.osmo-marque .om-o5 .om-g2{--a:13deg; --rad:79; --sz:11;}
.osmo-marque .om-o5 .om-g3{--a:26deg; --rad:70; --sz:6;}
.osmo-marque .om-o5 .om-g4{--a:39deg; --rad:76; --sz:9;}
.osmo-marque .om-o1 .om-bille{--sz:15;}
.osmo-marque .om-o2 .om-bille{--sz:12;}
.osmo-marque .om-o3 .om-bille{--sz:13;}
.osmo-marque .om-o4 .om-bille{--sz:10;}
.osmo-marque .om-o5 .om-trainee{display:none;}

/* Le noyau, dans le plan incliné. */
.osmo-marque .om-noyau{position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;transform:rotateZ(16deg) rotateX(-62deg);}
.osmo-marque .om-noyau > *{position:absolute;border-radius:50%;}
.osmo-marque .om-n-aura{width:135px;height:135px;margin:-67.5px 0 0 -67.5px;
  background:radial-gradient(circle,rgba(120,200,255,.5) 0%,rgba(120,200,255,.18) 45%,
    rgba(120,200,255,0) 70%);animation:om-halo 5.5s ease-in-out infinite;}
.osmo-marque .om-n-c{width:102px;height:102px;margin:-51px 0 0 -51px;
  animation:om-core calc(var(--v) * .55) linear infinite;
  background:conic-gradient(from -32deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 46deg,
    #0d54d8 58deg,#2e9bff 96deg,#1c74f0 140deg,#0b3bb4 196deg,#05205e 252deg,
    #061c4f 300deg,rgba(255,255,255,0) 330deg,rgba(255,255,255,0) 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0,transparent 51%,#000 57%,#000 100%);
  mask-image:radial-gradient(circle,transparent 0,transparent 51%,#000 57%,#000 100%);}
.osmo-marque .om-n-v{width:92px;height:92px;margin:-46px 0 0 -46px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0%,
    rgba(220,242,255,.7) 30%,rgba(170,220,255,.3) 58%,rgba(140,200,255,.06) 78%,transparent 100%);}
.osmo-marque .om-n-f{width:80px;height:80px;margin:-40px 0 0 -40px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(190,240,255,.8) 18%,
    rgba(90,200,255,.4) 40%,rgba(60,170,255,.12) 62%,rgba(60,170,255,0) 78%);
  animation:om-flare 6.5s ease-in-out infinite;}
.osmo-marque .om-n-b{width:41px;height:41px;margin:-20.5px 0 0 -20.5px;
  background:radial-gradient(circle at 50% 50%,#ffffff 0%,#ffffff 18%,#a8f0ff 34%,
    #2ec2ff 58%,#0b7ae8 82%,rgba(11,122,232,.25) 100%);
  box-shadow:0 0 20px rgba(70,200,255,.95),0 0 42px rgba(60,170,255,.55);
  animation:om-pulse 6.5s ease-in-out infinite;}

/* ── LES CINQ ÉTATS (JETONS §7) ────────────────────────────────────────────
   La forme ne change JAMAIS. Seuls la teinte (filter) et la vitesse d'orbite
   (--v) varient. Le saut de rythme est le signal : sur un écran de travail un
   changement de couleur seul passe inaperçu en vision périphérique. */
.osmo-marque{--v:22s;}
.osmo-marque[data-etat="repos"]    { filter:none;                                                   --v:22s; }
.osmo-marque[data-etat="reflexion"]{ filter:hue-rotate(-158deg) saturate(1.3)  brightness(1.04);    --v:7s;  }
.osmo-marque[data-etat="question"] { filter:hue-rotate(-176deg) saturate(1.35);                     --v:13s; }
.osmo-marque[data-etat="bloque"]   { filter:hue-rotate(-212deg) saturate(1.6)  brightness(.92);     --v:40s; }
.osmo-marque[data-etat="reponse"]  { filter:hue-rotate(-64deg)  saturate(1.2);                      --v:16s; }

/* En dessous de 40 px les traînées et la grappe deviennent illisibles :
   on les retire plutôt que de les laisser baver. */
.osmo-marque.compacte .om-trainee,
.osmo-marque.compacte .om-o5{display:none;}

@media(prefers-reduced-motion:reduce){
  .osmo-marque *{animation:none !important;}
}

/* ══ CORRECTIFS C1–C7 (handoff v2, code/correctifs.css) ══ */
/* ════════════════════════════════════════════════════════════════════════════
   OSMOSE — CORRECTIFS D'HABILLAGE (2 août 2026)
   À coller dans la constante CSS de packages/serveur/src/gabarit.mjs,
   à la FIN du bloc « HABILLAGE OSMOSE v2 », avant @media(prefers-reduced-motion).
   Chaque bloc porte le numéro du correctif décrit dans 01-LOGICIEL.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── C1 · Bandeau HUB : clair, 62 px, avec l'anneau OSMOSE ─────────────────
   Il était resté sombre et à 50 px. Le HUB est une fenêtre d'accueil, pas un
   poste de travail : fond clair, respiration, la marque en premier. */
.bandeau-hub{height:62px;padding:0 26px;gap:12px;
  background:var(--surface);color:var(--encre);
  border-bottom:1px solid var(--trait);}
.bandeau-hub .marque{display:flex;align-items:center;gap:12px;
  font-family:var(--police-titre);font-weight:700;font-size:17px;
  letter-spacing:.05em;color:var(--encre);}
.bandeau-hub .signature{margin-left:0;font-family:var(--police);font-weight:500;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#9AA3B4;opacity:1;}
.bandeau-hub .droite{gap:14px;font-size:13px;color:var(--encre-douce);}
.bandeau-hub a{color:var(--encre-douce);opacity:1;}
.bandeau-hub a:hover{color:var(--accent);}
.bandeau-hub .initiales{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--ops-fond);
  color:var(--ops-base);font-weight:700;font-size:11.5px;letter-spacing:.02em;}

/* ── C2 · Liseré de fenêtre ────────────────────────────────────────────────
   Un box-shadow inset sur <body> se peint SOUS les enfants : le bandeau et la
   nav le recouvraient, on ne voyait rien. Il faut un calque fixe au-dessus. */
body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--accent);}
body:not([data-accent])::after{display:none;}

/* ── C3 · Hauteur du corps ─────────────────────────────────────────────────
   Le bandeau est passé à 52 px mais .corps-app calculait encore 100vh - 50px :
   2 px de débordement et une barre de défilement parasite. */
.corps-app{height:calc(100vh - 52px);}

/* ── C4 · Densité du contenu ───────────────────────────────────────────────*/
.contenu-app{padding:22px 24px 24px;}

/* ── C5 · Bulle OSMO : c'est un support de marque, pas une pastille ────────
   Elle contenait le texte « OSMO ». Elle doit contenir la marque animée.
   Voir bulleOsmo() dans code/marque-osmo.mjs. */
.osmo-bulle{width:60px;height:60px;background:#0B1424;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(14,23,38,.32);}
.osmo-bulle:hover{background:#101B33;transform:translateY(-2px);}
.osmo-bulle .osmo-marque{pointer-events:none;}
/* L'étiquette qui l'accompagne sur le HUB. */
.osmo-etiquette{position:fixed;right:96px;bottom:36px;z-index:800;
  background:var(--surface);border:1px solid var(--trait-carte);border-radius:999px;
  padding:9px 16px;font-size:12.5px;color:var(--encre-secondaire);white-space:nowrap;
  box-shadow:0 8px 22px rgba(14,23,38,.14);}

/* ── C6 · Panneau OSMO : en-tête avec la marque et l'égaliseur ─────────────*/
.osmo-panneau{width:364px;}
.osmo-tete{gap:13px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09);
  background:transparent;color:#fff;}
.osmo-tete .ot-nom{font-family:var(--police-titre);font-weight:700;font-size:14px;
  letter-spacing:.04em;}
.osmo-tete .ot-activite{font-weight:400;font-size:11.5px;letter-spacing:0;
  color:rgba(255,255,255,.55);}
.osmo-eq{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:16px;}
.osmo-eq i{display:block;width:3px;height:100%;border-radius:2px;
  background:rgba(255,255,255,.55);transform-origin:50% 100%;
  animation:osmo-eq 1.1s ease-in-out infinite;}
.osmo-eq i:nth-child(2){animation-delay:-.35s;}
.osmo-eq i:nth-child(3){animation-delay:-.7s;}
@keyframes osmo-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
/* La ligne de source sous chaque réponse. Elle n'est pas décorative :
   c'est la provenance appliquée à la conversation. Ne pas la masquer. */
.osmo-source{font-size:11px;line-height:1.5;color:rgba(255,255,255,.42);margin-top:6px;}

/* ── C7 · Bandeau d'application : quelques finitions ──────────────────────*/
.bandeau-app .contexte{margin-left:16px;}
.bandeau-app .droite{padding:0 16px;font-size:12.5px;}

@media(prefers-reduced-motion:reduce){
  .osmo-eq i{animation:none !important;}
}

/* — POS · Plan de salle (CHR) : tables posées, déplaçables. */
.pos-salle{position:relative;min-height:520px;background:var(--surface-douce);
  background-image:linear-gradient(rgba(14,23,38,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(14,23,38,.03) 1px,transparent 1px);
  background-size:38px 38px;overflow:hidden;border-radius:8px;}
.pos-table{position:absolute;width:80px;height:80px;border:2px solid;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;text-decoration:none;font-size:11px;line-height:1.1;text-align:center;
  cursor:grab;touch-action:none;user-select:none;box-shadow:0 2px 6px rgba(14,23,38,.10);}
.pos-table:hover{text-decoration:none;filter:brightness(.98);}
.pos-table:active{cursor:grabbing;}
.pos-table.sel{box-shadow:0 0 0 3px var(--accent-fond),0 8px 18px rgba(14,23,38,.20);}
.pos-table .pos-nom{font-weight:700;}
.pos-table .pos-cv{opacity:.75;font-size:9.5px;}
.pos-table .pos-mnt{font-family:var(--police-chiffres);font-weight:600;margin-top:1px;font-size:11px;}
.pos-vide{padding:48px 24px;text-align:center;color:var(--muet);font-size:13px;}

@media(prefers-reduced-motion:reduce){
  [class*="osmo"] *{animation:none !important;}
  .anneau-boite *{animation:none !important;}
}