/* ECHELLE TYPOGRAPHIQUE (30/08/2026). Sept crans tires de l usage reel,
   ils remplacent 133 tailles distinctes. Chaque taille est tombee sur le
   cran le PLUS PROCHE : on unifie sans grossir ni retrecir. */
:root{
  --z-t0:11px;
  --z-t1:12px;
  --z-t2:13px;
  --z-t3:14px;
  --z-t4:16px;
  --z-t5:20px;
}
/* PALETTE UNIFIEE (30/08/2026). Chaque valeur est LA TEINTE MAJORITAIRE
   de sa famille : cette passe unifie sans repeindre. */
:root{
  --z-c-alerte:#b96b00;
  --z-c-blanc:#ffffff;
  --z-c-creme:#f4efe4;
  --z-c-critique:#c93c4b;
  --z-c-gris-1:#526277;
  --z-c-gris-2:#9fb4cf;
  --z-c-gris-3:#cbd5e1;
  --z-c-info:#3da6e8;
  --z-c-marine:#002252;
  --z-c-nuit:#0f1319;
  --z-c-sain:#0c8c67;
  --z-c-smart:#00a9b8;
  /* LES DEUX CRANS SOMBRES DE LA MARQUE (01/09/2026). Ils ne remplacent
     pas `--z-c-smart`, ils le prolongent : meme teinte a un quart de degre
     pres, meme saturation a 100 %, seule la clarte descend. Le premier est
     le cran qui porte du blanc, ou qui s'ecrit sur du blanc, sans passer
     sous 4,5 pour un ; le second est le cran de survol, qui doit rester
     plus sombre que le premier sous peine de rouvrir le defaut. */
  --z-c-smart-fonce:#007b86;
  --z-c-smart-profond:#00666f;
}
/*
 * © 2026 DATASHIELD RISK CONSULTING (SAS) — Zerval
 * Tous droits réservés. Code propriétaire — toute reproduction,
 * diffusion ou réutilisation non autorisée est interdite. SIREN 984 134 916
 */
/* INTER EST SERVIE EN DEUX PLAGES. Elle partait entiere : 172 Ko
   pour la droite, 189 pour l'italique. Une page n'emploie que la plage
   latine, et Inter ne contient de toute facon aucun glyphe arabe, grec
   ni cyrillique : l'arabe retombait deja sur une police du systeme.
   Seules les fonctionnalites employees sont gardees, ce qui fait tomber
   la plage latine de 97 a 62 Ko ; un `font-feature-settings` reclamant
   `ss01` ou `cv05` resterait donc sans effet, et le banc le refuse. */
/* L ETENDUE EST DECLAREE AVANT LA LATINE, et ce n'est pas un detail.
   Les deux plages se recouvrent : la latine declare `U+0152-0153`, que
   l'etendue contient aussi dans son `U+0100-02BA`. Quand deux faces
   couvrent un meme caractere, le navigateur retient la DERNIERE
   declaree. Dans l'ancien ordre, un seul `œ` sur la page suffisait a
   faire descendre les 73 Ko de la plage etendue, alors que la latine,
   deja chargee, le contient. Google declare l'etendue en premier pour
   cette raison exacte. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/Inter-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/Inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/Inter-Italic-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/Inter-Italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 
   Zerval : Diagnostic & Analyse Post-Incident
   styles.css : thème sombre "outil de sécurité", responsive + styles print.
 */

:root {
  --bg:        var(--z-c-marine);
  --bg-soft:   var(--z-c-marine);
  --bg-card:   var(--z-c-marine);
  --border:    var(--z-c-marine);
  --border-soft:var(--z-c-marine);
  --text:      #eaf7fc;
  --text-dim:  var(--z-c-smart);
  /* Charte V4.1, jetons portés depuis l'app Pro */
  --midnight:var(--z-c-marine); --deep:var(--z-c-marine); --azure:var(--z-c-smart); --cyan:var(--z-c-smart);
  --z-color-surface:#eaf7fc; --z-color-border:#eaf7fc; --z-color-text:var(--z-c-marine); --z-color-muted:var(--z-c-gris-1);
  --accent:    var(--z-c-smart);
  /* LE CRAN SOMBRE DE L'ACCENT, ET POURQUOI IL N'EST PAS L'ENCRE.
     `--accent-dark` etait un alias de `--accent` : meme couleur, nom qui
     ment. Il vaut maintenant le cran de la marque descendu sur l'axe de la
     clarte (teinte a 0,03 degre pres, saturation identique). Mais cette
     interface est SOMBRE et ne l'est que : le theme clair a ete retire,
     `data-theme` vaut `dark` dans le HTML et dans `app.js`. Un cran sombre
     pose en encre y perd au lieu de gagner : mesure sur la surface de
     travail #171b21, l'azur de la marque donne 6,06 pour un et le cran
     fonce 3,44, soit sous le seuil du texte courant et, sur les fonds
     teintes a 11 % et au-dela, sous le plancher de 3,0. Les vingt et un
     emplois qui ecrivaient du texte ou tracaient un survol sont donc
     passes a `--accent`, la couleur qu'ils affichaient deja. Le cran
     sombre ne sert plus qu'a ce qu'il sait faire : un FOND qui porte du
     blanc. */
  --accent-dark:var(--z-c-smart-fonce);
  --violet:    var(--z-c-marine);
  --magenta:   var(--z-c-smart);
  --grad: linear-gradient(120deg,var(--z-c-marine),var(--z-c-smart));
  --ok:        var(--z-c-sain);
  --warn:      var(--z-c-alerte);
  --high:      var(--z-c-alerte);
  --crit:      var(--z-c-critique);
  --radius: 6px;
  --radius-sm: 6px;
  --shadow:    0 8px 30px rgba(0,0,0,.35);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --app-header-h: 72px;   /* hauteur réelle du header fixe (logo 42 + padding 2×14 + bordure 1 = 71, +1 pour passer sous le liseré néon). Décale le contenu et la barre latérale. */
}

* { box-sizing: border-box; }

/* L'attribut HTML [hidden] doit primer sur les display:flex/grid ci-dessous */
[hidden] { display: none !important; }

/* Accessibilité */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--z-c-smart-fonce); color: var(--z-c-blanc); padding: 10px 16px; border-radius:6px;
  font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius:6px; }
#main:focus { outline: none; }

/* THÈME CLAIR */
:root[data-theme="light"] {
  --bg:        #eaf7fc;   /* fond de l'app en tons BLEUS (canvas) ; panneaux/menu restent blancs via --bg-soft */
  --bg-soft:   var(--z-c-blanc);
  --bg-card:   var(--z-c-blanc);
  --border:    #eaf7fc;
  --border-soft:#eaf7fc;
  --text:      var(--z-c-marine);
  --text-dim:  var(--z-c-gris-1);
  --accent:    var(--z-c-smart);
  --accent-dark:var(--z-c-smart-fonce);
  --violet:    var(--z-c-marine);
  --shadow:    0 8px 30px rgba(0,34,82,.12);
  /* Couleurs sémantiques assombries pour un contraste AA (≥4.5:1) sur fond clair */
  --ok:        var(--z-c-sain);
  --warn:      var(--z-c-alerte);
  --high:      var(--z-c-alerte);
  --crit:      var(--z-c-critique);
}
:root[data-theme="light"] .app-header { background: linear-gradient(180deg, var(--z-c-blanc), #eaf7fc); }
/* Menu latéral ÉPINGLÉ opaque : reste blanc et ne prend pas le fond bleuté (le fond ne teinte QUE le centre). */
:root[data-theme="light"] .sidebar { background: var(--deep); }   /* charte V4.1 : barre latérale navy */
:root[data-theme="light"] .brand-mark { filter: none; }
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: var(--z-c-blanc); }
:root[data-theme="light"] .ioc-pub { color: var(--z-c-critique); }
:root[data-theme="light"] .auth-ok { color: var(--z-c-sain); }
:root[data-theme="light"] .auth-bad { color: var(--z-c-critique); }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Le fond de page est porté par <html> (le « canvas »), pas par <body>,
   afin qu'un décor fixe en z-index négatif puisse s'afficher derrière le
   contenu tout en restant au-dessus du fond uni. */
html { background: var(--bg); }
body { background: transparent; }
/* Fond bleuté du CENTRE de l'app : image cyber `fonds.png` en calque FIXE estompé, derrière TOUT
   le contenu. Le menu et les panneaux opaques passent au-dessus (ne s'affiche qu'au centre). */
.app-bgfond {
  position: fixed; inset: 0; z-index: -1;
  background: url("../img/fonds.png") center center / cover no-repeat;
  opacity: .7;   /* fond animé visible */
  pointer-events: none;
  overflow: hidden;
}
/* Fond de marque ANIMÉ (vidéo en boucle), le poster png sert de repli ; coupé si mouvement réduit */
.app-bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .app-bgvid { display: none; } }

/* Titres : police d'affichage (cohérence avec la vitrine) */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; }

/* EN-TÊTE */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  background: linear-gradient(180deg, var(--z-c-marine), var(--bg-soft));
  border-bottom: 1px solid var(--border);
  position: fixed;   /* toujours visible en haut, quel que soit le défilement */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: block; }
.brand-mark {
  display: inline-block;
  height: 1.25em; width: auto;
  vertical-align: -0.32em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: var(--z-t4); letter-spacing: .12em; }
.brand-text small { color: var(--text-dim); font-size: var(--z-t3); }
.badge-proto {
  font-size: var(--z-t3);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 3px 10px;
  border-radius:6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Numéro de version, pastille discrète, fixe en bas à gauche, lisible sur le fond */
.foot-ver {
  text-align: center; margin: 10px auto 2px;
  font-family: var(--mono); font-size: var(--z-t3); letter-spacing: .05em;
  color: var(--text-dim); user-select: none;
}

/* Sélecteur de langue à DRAPEAUX (header) */
.lang-picker { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 4px 8px; font: inherit; font-size: var(--z-t3); font-weight: 700; line-height: 1; cursor: pointer;
}
.lang-btn:hover { border-color: var(--accent); }
.lang-flag {
  display: inline-block; width: 20px; height: 14px; flex: none; line-height: 0;
  border-radius:6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-caret { font-size: var(--z-t3); color: var(--text-dim); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 320;
  min-width: 176px; margin: 0; padding: 5px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius:6px; box-shadow: var(--shadow);
}
.lang-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius:6px; cursor: pointer; font-size: var(--z-t3); color: var(--text); }
.lang-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lang-opt.is-cur { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }
.lang-name { white-space: nowrap; }
:root[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* Sélecteur de PAYS (normes applicables), distinct de la langue */
.ctry-picker { position: relative; }
.ctry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 4px 8px; font: inherit; font-size: var(--z-t3); font-weight: 700; line-height: 1; cursor: pointer;
  max-width: 150px;
}
.ctry-btn:hover { border-color: var(--accent); }
.ctry-flag {
  display: inline-block; width: 20px; height: 14px; flex: none; line-height: 0;
  border-radius:6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.ctry-flag svg { width: 100%; height: 100%; display: block; }
.ctry-btn .ctry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctry-caret { font-size: var(--z-t3); color: var(--text-dim); flex: none; }
.ctry-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 320;
  min-width: 210px; max-height: min(60vh, 420px); overflow-y: auto;
  margin: 0; padding: 5px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius:6px; box-shadow: var(--shadow);
}
.ctry-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius:6px; cursor: pointer; font-size: var(--z-t3); color: var(--text); }
.ctry-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ctry-opt.is-cur { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }
.ctry-opt .ctry-name { white-space: nowrap; }
:root[dir="rtl"] .ctry-menu { right: auto; left: 0; }
@media (max-width: 560px) { .ctry-btn { max-width: 96px; } .ctry-btn .ctry-name { display: none; } }

/* En-têtes multilingues en tête de menu (langue / pays) : non cliquables, discrets, s'enroulent :
   indiquent, dans toutes les langues, ce que chaque sélecteur fait (langue) et son but (normes pays). */
.lang-menu-head, .ctry-menu-head {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 3px 9px 8px; margin: 1px 2px 5px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--z-t3); line-height: 1.55; color: var(--text-dim);
  cursor: default; user-select: none; list-style: none;
}
.lang-menu-head svg, .ctry-menu-head svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent); }
.ctry-menu-head { max-width: 258px; }
:root[dir="rtl"] .lang-menu-head, :root[dir="rtl"] .ctry-menu-head { text-align: right; }

/* RTL (arabe), miroir de la mise en page =====
   i18n.js pose <html dir="rtl" class="rtl"> pour l'arabe. La direction RTL retourne
   nativement le texte et les conteneurs flex (la barre latérale passe à droite, le
   header s'inverse). Ci-dessous : les quelques ajustements de bordures/décor à forcer.
   (Peaufinage RTL complet des vues internes = passe dédiée.) */
:root[dir="rtl"] .app-main { text-align: right; }
:root[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border); }
/* Décor de fond : en RTL la marge libre passe à GAUCHE (la barre latérale est à droite) →
   le panneau décoratif bascule au bord gauche et son image est mise en miroir. */
:root[dir="rtl"] .app-fond { right: auto; left: 0; transform: scaleX(-1); }
/* Indicateur d'onglet actif (barre 3px) : du bord gauche au bord droit de l'onglet. */
:root[dir="rtl"] .nav-tab.active::before { margin: -9px -12px -9px 0; border-radius:6px; }
/* Listes de priorités numérotées : la pastille passe à droite, la marge suit. */
:root[dir="rtl"] .rpt-prio li { padding-left: 0; padding-right: 40px; }
:root[dir="rtl"] .rpt-prio li::before { left: auto; right: 0; }
:root[dir="rtl"] .dg-prio li { padding-left: 0; padding-right: 38px; }
:root[dir="rtl"] .dg-prio li::before { left: auto; right: 0; }
/* Halos décoratifs directionnels : mis en symétrie (X% → 100-X%). */
:root[dir="rtl"] .gate-overlay {
  background:
    radial-gradient(760px 520px at 12% 66%, color-mix(in srgb, var(--violet) 6%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, #eaf7fc 0%, #eaf7fc 58%, #eaf7fc 100%);
}
:root[dir="rtl"][data-theme="light"] {
  background:
    radial-gradient(1050px 500px at 20% -250px, color-mix(in srgb, var(--z-c-marine) 9%, transparent) 0, transparent 58%),
    radial-gradient(1200px 560px at 84% -300px, #eaf7fc 0, rgba(234,247,252,0) 56%),
    #eaf7fc;
  background-attachment: fixed;
}

/* STEPPER */
.stepper {
  display: flex;
  gap: 6px;
  padding: 16px 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius:6px;
  font-size: var(--z-t3);
  color: var(--text-dim);
  white-space: nowrap;
  border: 1px solid transparent;
}
.step .num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: var(--z-t3);
  flex: none;
}
.step.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.step.active .num { background: var(--z-c-smart-fonce); border-color: var(--z-c-smart-fonce); color: var(--z-c-blanc); }
.step.done { color: var(--ok); }
.step.done .num { background: rgba(12,140,103,.15); border-color: var(--ok); color: var(--ok); }

/* MAIN */
.app-main {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 22px 60px;
}

.wizard-step h2 { font-size: var(--z-t5); margin: 0 0 4px; }
.wizard-step .step-hint { color: var(--text-dim); margin: 0 0 22px; font-size: var(--z-t3); }

/* Champs */
.field { margin-bottom: 20px; }
.field > label { display: block; font-weight: 600; margin-bottom: 7px; font-size: var(--z-t3); }
.field .req { color: var(--crit); }
input[type=text], input[type=datetime-local], textarea, select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius:6px;
  padding: 11px 13px;
  font-size: var(--z-t3);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea { min-height: 90px; resize: vertical; }

/* Cartes de choix (type d'incident) */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.choice-card {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 15px 16px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
  color: var(--text);
}
.choice-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.choice-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice-card .ic { font-size: var(--z-t5); }
.choice-card .t { font-weight: 600; margin: 6px 0 3px; }
.choice-card .d { font-size: var(--z-t3); color: var(--text-dim); line-height: 1.4; }

/* Options radio/checkbox stylées */
.opt-list { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: var(--z-t3);
  transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--accent); }
.opt input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.opt.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.opt .opt-label { flex: 1; }

/* BOUTONS */
.wizard-nav, .report-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.spacer { flex: 1; }
.btn {
  font-family: inherit;
  font-size: var(--z-t3);
  font-weight: 600;
  padding: 11px 20px;
  border-radius:6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .13s, border-color .13s, opacity .13s;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); border: none; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.field-error { color: var(--crit); font-size: var(--z-t3); margin-top: 6px; }
.shake { animation: shake .3s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* RAPPORT */
.report { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.report-head {
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  margin-bottom: 22px;
}
.report-head .ref { color: var(--text-dim); font-size: var(--z-t3); font-family: ui-monospace, monospace; }
.report-head h1 { margin: 6px 0 14px; font-size: 24px; }
.report-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px 24px; font-size: var(--z-t3); }
.report-meta div span { color: var(--text-dim); display: block; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; }

.severity-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius:6px;
  padding: 18px 22px;
  margin-bottom: 22px;
  border: 1px solid;
}
.severity-banner .sev-badge {
  font-size: var(--z-t3);
  font-weight: 700;
  padding: 8px 16px;
  border-radius:6px;
  color: var(--z-c-blanc);
  white-space: nowrap;
}
.severity-banner .sev-text strong { display: block; font-size: var(--z-t4); }
.severity-banner .sev-text small { color: var(--text-dim); }

.report-block {
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 20px 22px;
  margin-bottom: 18px;
  background: var(--bg-soft);
}
.report-block > h3 {
  margin: 0 0 14px;
  font-size: var(--z-t4);
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.report-block > h3 .rb-ic { color: var(--accent); }
.report-block ul { margin: 0; padding-left: 20px; }
.report-block li { margin-bottom: 7px; }
.report-block p { margin: 0 0 10px; }

.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; font-size: var(--z-t3); }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; }

.mitre-item { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.mitre-item:last-child { border-bottom: none; }
.mitre-item .tac { color: var(--accent); font-weight: 600; font-size: var(--z-t3); }
.mitre-item .tech { font-family: ui-monospace, monospace; font-size: var(--z-t3); }

.alert-rgpd {
  border: 1px solid var(--crit);
  background: rgba(201,60,75,.08);
  border-radius:6px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.alert-rgpd h3 { color: var(--crit); margin: 0 0 8px; font-size: var(--z-t4); }
.alert-rgpd .deadline { font-weight: 700; }

.phase-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.phase-row:last-child { border-bottom: none; }
.phase-row .p-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
  display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700;
}
.phase-row .p-name { font-weight: 600; }
.phase-row .p-desc { color: var(--text-dim); font-size: var(--z-t3); }

.tag-done { color: var(--ok); font-size: var(--z-t3); }
.tag-todo { color: var(--warn); font-size: var(--z-t3); }

/* FOOTER */
.app-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 26px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: var(--z-t3);
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .app-header { padding: 12px 16px; }
  .app-main { padding: 22px 14px 50px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dt { margin-top: 8px; }
  .stepper { padding: 12px 14px; }
}

/* 
   PHASE 1 : Navigation multi-outils + analyseurs
 */

/* Navigation principale */
/* Coquille : barre latérale + corps */
.app-shell { display: flex; align-items: flex-start; padding-top: var(--app-header-h); }   /* compense le header fixe */
.sidebar {
  flex: none; width: 248px;
  background: var(--bg-soft); border-right: 1px solid var(--border);
  padding: 18px 12px; position: sticky; top: var(--app-header-h); height: calc(100vh - var(--app-header-h));
  overflow-y: auto;
}
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--app-header-h)); }
.app-body .app-main { flex: 1; position: relative; z-index: 1; }

/* DÉCOR DE FOND (côté droit) ============
   Bandeau décoratif fixé au bord droit de la fenêtre, derrière le contenu.
   Non-interactif (pointer-events:none) et masqué aux lecteurs d'écran.
   Le contenu (.app-main, cartes opaques) passe au-dessus ; le décor n'apparaît
   que dans la marge droite et les espaces vides. L'opacité + un dégradé de
   masque vers la gauche garantissent la lisibilité et l'harmonie visuelle. */
.app-fond {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(300px, 40vw, 560px);
  z-index: -1;                 /* derrière le contenu, au-dessus du fond uni (<html>) */
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  opacity: .5;                 /* dosage pour rester discret et harmonieux */
  -webkit-mask-image: linear-gradient(to left, var(--z-c-marine) 58%, transparent 100%);
          mask-image: linear-gradient(to left, var(--z-c-marine) 58%, transparent 100%);
}
.app-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right bottom;
  display: block;
}
/* Tablette : décor un peu plus léger, moins large. */
@media (max-width: 900px) {
  .app-fond { width: clamp(220px, 46vw, 380px); opacity: .38; }
}
/* Mobile : coin décoratif discret en bas à droite (le contenu occupe la largeur). */
@media (max-width: 640px) {
  .app-fond { width: min(62vw, 300px); height: 74vh; top: auto; bottom: 0; opacity: .3; }
}
/* Impression : pas de décor. */
@media print { .app-fond { display: none !important; } }
/* Respect des préférences de contraste renforcé. */
@media (prefers-contrast: more) { .app-fond { display: none; } }

/* MODULES REPLIABLES (réduire / déplier) */
.nm-h { cursor: pointer; }
.nm-h-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* chevron : poussé à droite de l'en-tête */
.nm-toggle {
  margin-left: auto; flex: none;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius:6px; padding: 0;
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nm-h:hover .nm-toggle { color: var(--text); }
.nm-toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.nm-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* le triangle (bordures) tourne selon l'état */
.nm-chev {
  width: 9px; height: 9px; display: block;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);       /* pointe en bas = ouvert */
  transition: transform .25s ease;
}
.nm-mod.nm-closed .nm-chev { transform: translateY(2px) rotate(-45deg); }  /* pointe à droite = fermé */

/* corps repliable : astuce grid-rows 1fr → 0fr (aucune mesure de hauteur) */
.nm-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
.nm-mod.nm-closed .nm-fold { grid-template-rows: 0fr; }
.nm-fold-in { overflow: hidden; min-height: 0; }
.nm-mod.nm-open .nm-fold-in { overflow: visible; }     /* pleinement ouvert : ombres/focus non coupés */
.nm-mod.nm-noanim .nm-fold, .nm-mod.nm-noanim .nm-chev { transition: none; }

/* bouton « Tout replier / déplier » dans le titre de vue (même style que .view-help) */
.nm-allbtn {
  vertical-align: middle; margin-left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--z-t3); font-weight: 600; color: var(--text-dim);
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  padding: 4px 12px 4px 10px; cursor: pointer; line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nm-allbtn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.nm-allbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nm-allbtn .nm-chev-sm { width: 7px; height: 7px; border-width: 1.6px; }
.nm-allbtn.nm-all-collapsed .nm-chev-sm { transform: translateY(2px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .nm-fold, .nm-chev { transition: none; } }
@media print { .nm-fold { grid-template-rows: 1fr !important; } .nm-toggle, .nm-allbtn { display: none !important; } }

.nav-group { margin-bottom: 18px; }
.nav-group-t {
  display: block; font-family: ui-monospace, monospace; font-size: var(--z-t3); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); padding: 0 12px 7px;
}
.nav-tab {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius:6px;
  color: var(--text-dim); font-family: inherit; font-size: var(--z-t3); font-weight: 600;
  padding: 9px 12px; margin-bottom: 2px; cursor: pointer; text-align: left;
  transition: background .12s, color .12s, border-color .12s;
}
.nav-tab:hover { color: var(--text); background: var(--bg-card); }
.nav-tab.active { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.nav-tab.active::before { content: ""; width: 3px; align-self: stretch; margin: -9px 0 -9px -12px; border-radius:6px; background: linear-gradient(180deg, var(--accent), var(--violet)); }

/* Hamburger + tiroir mobile */
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; padding: 8px; margin-right: 4px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius:6px; transition: transform .2s, opacity .2s; }
.nav-backdrop { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px; z-index: 60;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.7,.2,1);
    padding-top: 20px; box-shadow: var(--shadow);
  }
  body.nav-open .sidebar { transform: none; }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .24s; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* En-tête compacté */
  .brand-text small { display: none; }
  .badge-proto { display: none; }
  .mode-switch .ms-label, .mode-switch .ms-change { display: none; }
  .app-header { padding: 12px 14px; }
  .app-body .app-main { padding: 22px 16px 48px; }
}

/* Transition douce entre les vues */
.view:not([hidden]) { animation: viewfade .22s ease; }
@keyframes viewfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view:not([hidden]) { animation: none; } }

.view-title { font-size: var(--z-t5); margin: 4px 0 6px; }
.view-help {
  vertical-align: middle; margin-left: 12px; font-size: var(--z-t3); font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  border-radius:6px; padding: 4px 12px; cursor: pointer; transition: .12s;
}
.view-help:hover { border-color: var(--accent); color: var(--accent); }
.onboard-banner {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft)));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius:6px; padding: 14px 16px;
}
.onboard-banner .ob-ic { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,40,90,.10); }
.onboard-banner .ob-txt { flex: 1; font-size: var(--z-t3); line-height: 1.5; }
.onboard-banner .ob-gi { width: 1.05em; height: 1.05em; vertical-align: -.18em; margin-right: .12em; }
.onboard-banner .ob-gi-ai { color: var(--violet); }
.onboard-banner .ob-x { flex: none; background: var(--z-c-smart-fonce); color: var(--z-c-blanc); border: 0; border-radius:6px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.onboard-banner .ob-x:hover { background: var(--z-c-smart-profond); }
@media (max-width: 640px) { .onboard-banner { flex-wrap: wrap; } }
.view-hint { color: var(--text-dim); font-size: var(--z-t3); margin: 0 0 20px; max-width: 720px; }
.view-hint code { background: var(--bg-card); padding: 1px 5px; border-radius:6px; font-size: var(--z-t3); }

/* Barre d'outils */
.tool-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.inline-check { display: flex; align-items: center; gap: 7px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; }
.inline-check input { accent-color: var(--accent); }

/* Analyse IOC */
.ioc-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.pill {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
  font-size: var(--z-t3);
  padding: 4px 10px;
  border-radius:6px;
}
.pill-muted { background: var(--bg-card); border-color: var(--border); color: var(--text-dim); }

.ioc-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.ioc-cat {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 14px 16px;
}
.ioc-cat h4 { margin: 0 0 10px; font-size: var(--z-t3); display: flex; align-items: center; gap: 8px; }
.ioc-cat h4 .cnt, .cnt {
  margin-left: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:6px;
  font-size: var(--z-t3);
  padding: 1px 9px;
  color: var(--text-dim);
}
.ioc-list { list-style: none; margin: 0; padding: 0; }
.ioc-list li { padding: 5px 0; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ioc-list li:last-child { border-bottom: none; }
.ioc-list code { font-size: var(--z-t3); word-break: break-all; }
.ioc-tag { font-size: var(--z-t3); padding: 1px 7px; border-radius:6px; }
.ioc-pub { background: rgba(201,60,75,.15); color: var(--z-c-critique); border: 1px solid rgba(201,60,75,.4); }
.ioc-priv { background: rgba(82,98,119,.15); color: var(--text-dim); border: 1px solid var(--border); }

/* Analyse e-mail */
.verdict {
  display: flex; align-items: center; gap: 12px;
  border-radius:6px; padding: 16px 20px; margin-bottom: 18px;
  border: 1px solid; font-size: var(--z-t4); font-weight: 600;
}
.verdict-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.verdict-ok   { border-color: var(--ok);   background: rgba(12,140,103,.08); }
.verdict-ok .verdict-dot { background: var(--ok); }
.verdict-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.verdict-warn .verdict-dot { background: var(--warn); }
.verdict-bad  { border-color: var(--crit); background: rgba(201,60,75,.08); }
.verdict-bad .verdict-dot { background: var(--crit); }

.mail-block {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.mail-block h4 { margin: 0 0 12px; font-size: var(--z-t3); display: flex; align-items: center; gap: 8px; }
.mail-empty { color: var(--text-dim); font-style: italic; }

.auth-row { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-badge { font-size: var(--z-t3); padding: 5px 12px; border-radius:6px; font-weight: 600; border: 1px solid; }
.auth-ok   { background: rgba(12,140,103,.12);  color: var(--z-c-sain); border-color: rgba(12,140,103,.4); }
.auth-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--z-c-alerte); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.auth-bad  { background: rgba(201,60,75,.12);  color: var(--z-c-critique); border-color: rgba(201,60,75,.4); }

.flag { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius:6px; margin-bottom: 9px; border-left: 3px solid; }
.flag:last-child { margin-bottom: 0; }
.flag span { font-size: var(--z-t3); color: var(--text-dim); }
.flag-bad  { background: rgba(201,60,75,.07);  border-color: var(--crit); }
.flag-warn { background: color-mix(in srgb, var(--warn) 7%, transparent); border-color: var(--warn); }
.flag-ok   { background: rgba(12,140,103,.07);  border-color: var(--ok); }

.hops { display: flex; flex-direction: column; gap: 8px; }
.hop { display: flex; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 11px 13px; }
.hop-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700; }
.hop-body { font-size: var(--z-t3); display: flex; flex-direction: column; gap: 3px; }
.hop-body code { font-size: var(--z-t3); word-break: break-all; }
.hop-k { color: var(--text-dim); font-size: var(--z-t3); display: inline-block; width: 34px; }
.hop-date { color: var(--text-dim); font-size: var(--z-t3); }
.hop-delay { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius:6px; padding: 0 8px; margin-left: 6px; font-size: var(--z-t3); }

/* THÈME : bouton + badge nav */
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  width: 34px; height: 34px; font-size: var(--z-t4); cursor: pointer; color: var(--text);
  display: grid; place-items: center; transition: border-color .12s;
}
.theme-toggle:hover { border-color: var(--accent); }
.header-help {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  color: var(--text); text-decoration: none; font-size: var(--z-t3); font-weight: 600; white-space: nowrap;
  transition: border-color .12s;
}
.header-help:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .header-help { padding: 0 10px; } }
.nav-count {
  background: var(--z-c-smart-fonce); color: var(--z-c-blanc); font-size: var(--z-t3); border-radius:6px;
  padding: 0 6px; margin-left: 4px; vertical-align: middle;
}

/* ZONE DE DÉPÔT (import fichier) */
.dropzone { position: relative; }
.drop-overlay {
  position: absolute; inset: 0; display: none; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 2px dashed var(--accent);
  border-radius:6px; color: var(--accent); font-weight: 600; font-size: var(--z-t3);
  pointer-events: none; z-index: 2;
}
.dropzone.drag-over .drop-overlay { display: grid; }
.dropzone.drag-over textarea { border-color: var(--accent); }

/* BIBLIOTHÈQUE D'IOC */
.lib-table { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.lib-empty { color: var(--text-dim); font-style: italic; padding: 24px; text-align: center;
  border: 1px dashed var(--border); border-radius:6px; }
.lib-row {
  display: grid; grid-template-columns: 130px 1fr 54px 130px 34px; gap: 10px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px;
  padding: 9px 12px; font-size: var(--z-t3);
}
.lib-head { background: transparent; border: none; color: var(--text-dim); font-size: var(--z-t3);
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 12px; }
.lib-row.row-faux { opacity: .55; }
.lib-val code { word-break: break-all; font-size: var(--z-t3); }
.lib-occ { color: var(--warn); font-size: var(--z-t3); }
.ttag { font-size: var(--z-t3); padding: 2px 8px; border-radius:6px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg-card); }
.st-surv { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.st-faux { border-color: var(--border); color: var(--text-dim); }
.lib-status { padding: 5px 8px; font-size: var(--z-t3); border-radius:6px; }
.lib-del { background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius:6px; width: 28px; height: 28px; cursor: pointer; transition: border-color .12s, color .12s; }
.lib-del:hover { border-color: var(--crit); color: var(--crit); }

/* Liste d'IOC dans le rapport technique */
.report-ioc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.report-ioc li { padding: 3px 0; break-inside: avoid; }
.report-ioc code { font-size: var(--z-t3); word-break: break-all; }
@media (max-width: 640px) { .report-ioc { columns: 1; } .lib-row { grid-template-columns: 1fr 50px 108px 30px; }
  .lib-row .lib-type { grid-column: 1 / -1; } }

/* Comptage d'occurrences */
.occ { font-size: var(--z-t3); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:6px; padding: 0 7px; }

/* Liens de pivot externes */
.pivots { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pivot {
  font-size: var(--z-t3); color: var(--accent); text-decoration: none;
  border: 1px solid var(--border); border-radius:6px; padding: 1px 7px;
  background: var(--bg); transition: border-color .12s, color .12s;
}
.pivot:hover { border-color: var(--z-c-smart-fonce); color: var(--z-c-blanc); background: var(--z-c-smart-fonce); }

/* Toast d'information */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); color: var(--text); border: 1px solid var(--accent);
  padding: 12px 20px; border-radius:6px; box-shadow: var(--shadow);
  font-size: var(--z-t3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* CHRONOLOGIE / TIMELINE */
.tl-form {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius:6px; padding: 18px 20px; margin-bottom: 24px;
}
.tl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tl-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: var(--z-t3); }

.tl-list { position: relative; padding-left: 8px; }
.tl-item { position: relative; display: flex; gap: 16px; padding-bottom: 4px; }
.tl-item::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: -4px;
  width: 2px; background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-marker { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px;
  box-shadow: 0 0 0 3px var(--bg); }
.tl-card { flex: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px;
  padding: 12px 14px; margin-bottom: 14px; }
.tl-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tl-cat { font-size: var(--z-t3); font-weight: 600; border: 1px solid; border-radius:6px; padding: 1px 9px; }
.tl-time { color: var(--text-dim); font-size: var(--z-t3); }
.tl-del { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius:6px; width: 24px; height: 24px; cursor: pointer; font-size: var(--z-t3); }
.tl-del:hover { border-color: var(--crit); color: var(--crit); }
.tl-title { font-weight: 600; font-size: var(--z-t3); }
.tl-desc { color: var(--text-dim); font-size: var(--z-t3); margin-top: 4px; }

/* GLOSSAIRE */
.glo-section { margin-bottom: 28px; }
.glo-section > h3 { font-size: var(--z-t4); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.glo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.glo-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 13px 15px; }
.glo-item-t { font-weight: 600; font-size: var(--z-t3); margin-bottom: 5px; }
.glo-item-d { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.5; }
.glo-code { font-family: ui-monospace, monospace; font-size: var(--z-t3); color: var(--accent);
  background: var(--bg-card); padding: 1px 6px; border-radius:6px; }
.glo-delai { float: right; font-size: var(--z-t3); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius:6px; padding: 1px 9px; }

/* EXPOSITION AUX FUITES */
.ext-notice {
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius:6px;
  padding: 14px 18px;
  font-size: var(--z-t3);
  line-height: 1.5;
  margin-bottom: 20px;
}
.expo-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius:6px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.expo-card > h3 { margin: 0 0 6px; font-size: var(--z-t4); }
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field input { padding-right: 44px; }
.pw-eye {
  position: absolute; right: 8px; background: transparent; border: none; cursor: pointer;
  font-size: var(--z-t4); opacity: .7; padding: 4px;
}
.pw-eye:hover { opacity: 1; }
.expo-result {
  border-radius:6px; padding: 14px 16px; margin-top: 6px;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px;
}
.expo-result span { font-size: var(--z-t3); color: var(--text-dim); }
.expo-result strong { font-size: var(--z-t3); }
.expo-ok   { border-color: var(--ok);   background: rgba(12,140,103,.08); }
.expo-bad  { border-color: var(--crit); background: rgba(201,60,75,.08); }
.expo-loading { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text-dim); flex-direction: row; align-items: center; }
.expo-soon { color: var(--text-dim); font-size: var(--z-t3); font-style: italic; }
.spin {
  width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* DIAGNOSTIC DE DOMAINE (Zerval Domain) */
.dom-wrap { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.dom-verdict {
  border: 1px solid var(--border); border-left-width: 4px; border-radius:6px;
  padding: 14px 16px; background: var(--bg-soft);
}
.dom-verdict.sev-ok   { border-left-color: var(--ok);   background: rgba(12,140,103,.06); }
.dom-verdict.sev-warn { border-left-color: var(--warn); background: rgba(185,107,0,.07); }
.dom-verdict.sev-crit { border-left-color: var(--crit); background: rgba(201,60,75,.06); }
.dom-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dom-score-lbl { font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; }
.dom-score-val { font-size: var(--z-t5); font-weight: 700; font-family: var(--font-display); }
.dom-verdict.sev-ok   .dom-score-val { color: var(--ok); }
.dom-verdict.sev-warn .dom-score-val { color: var(--warn); }
.dom-verdict.sev-crit .dom-score-val { color: var(--crit); }
.dom-score-txt { font-size: var(--z-t3); color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.dom-domain { margin-top: 8px; font-family: ui-monospace, monospace; font-size: var(--z-t3); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.dom-domain .gi-globe { color: var(--accent); }

.dom-checks { display: flex; flex-direction: column; gap: 8px; }
.dom-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius:6px; background: var(--bg-card); }
.dom-check-ic { flex: none; width: 26px; height: 26px; border-radius:6px; display: grid; place-items: center; font-size: var(--z-t3); }
.dom-check.sev-ok   .dom-check-ic { color: var(--ok);   background: rgba(12,140,103,.12); }
.dom-check.sev-warn .dom-check-ic { color: var(--warn); background: rgba(185,107,0,.14); }
.dom-check.sev-crit .dom-check-ic { color: var(--crit); background: rgba(201,60,75,.12); }
.dom-check.sev-info .dom-check-ic { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
.dom-check.sev-crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--border-soft)); }
.dom-check-b { flex: 1; min-width: 0; }
.dom-check-h strong { font-size: var(--z-t3); }
.dom-check-d { font-size: var(--z-t3); color: var(--text-dim); line-height: 1.5; margin-top: 2px; }
.dom-rec { display: block; margin-top: 7px; padding: 6px 9px; font-family: ui-monospace, monospace; font-size: var(--z-t3); color: var(--text); background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius:6px; word-break: break-all; white-space: pre-wrap; }
.dom-actions { margin: 2px 0 0; }
.dom-src { font-size: var(--z-t3); color: var(--text-dim); font-style: italic; margin: 2px 0 0; }
.dom-lk-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.dom-lk-list code { font-size: var(--z-t3); }
.dom-tag { font-size: var(--z-t3); padding: 1px 7px; border-radius:6px; background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); white-space: nowrap; }
.dom-tag-mx { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }

/* Veille & vulnérabilités (CVE) */
.vl-sev { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius:6px; margin-left: auto; white-space: nowrap; }
.vl-crit { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.vl-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.vl-ok   { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.vl-info { background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); }
.vl-refs { font-size: var(--z-t3); }
.vl-refs strong { font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.vl-refs ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.vl-refs a { word-break: break-all; }

/* CERT-FR (liste de publications) */
.cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cf-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-soft); }
.cf-item:last-child { border-bottom: none; }
.cf-item a { flex: 1; min-width: 0; }
.cf-date { flex: none; font-size: var(--z-t3); color: var(--text-dim); font-family: ui-monospace, monospace; }
.cf-seg.is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Analyse de lien : capture du rendu isolé */
.lk-shot { display: block; margin-top: 8px; max-width: 320px; width: 100%; border: 1px solid var(--border); border-radius:6px; }

/* Création de compte : jauge de mot de passe + anti-robot */
.gs-strength { display: flex; align-items: center; gap: 8px; margin: -2px 0 2px; }
.gs-strength-bar { flex: 1; height: 6px; border-radius:6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.gs-strength-bar span { display: block; height: 100%; width: 0; border-radius:6px; transition: width .25s ease, background .25s ease; }
.gs-strength-bar span.s-crit { background: var(--crit); }
.gs-strength-bar span.s-mid { background: var(--warn); }
.gs-strength-bar span.s-ok { background: var(--ok); }
.gs-strength-txt { font-size: var(--z-t3); color: var(--text-dim); flex: none; max-width: 58%; text-align: right; }
.gs-hp { position: absolute !important; left: -9999px !important; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.gs-human { display: flex; align-items: center; gap: 8px; font-size: var(--z-t3); margin: 2px 0; }
.gs-human-run { color: var(--text-dim); }
.gs-human-ok { color: var(--ok); }

/* Onboarding : personnalisation inline (logo + couleur) */
.pp-brand { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pp-brand-l { display: inline-flex; align-items: center; gap: 7px; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.pp-brand-l [class^="gi-"] { width: 15px; height: 15px; }
.pp-brand-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pp-logo { width: 46px; height: 46px; border-radius:6px; border: 1px solid var(--border); background: var(--bg-card); display: grid; place-items: center; overflow: hidden; flex: none; }
.pp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-logo-ph { font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.pp-accent { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); }
.pp-accent input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius:6px; background: none; cursor: pointer; }
.pp-brand-note { font-size: var(--z-t3); color: var(--text-dim); margin: 8px 0 0; }

/* Onboarding : recherche + pré-remplissage de l'organisation */
.pp-search { position: relative; margin-bottom: 12px; }
.pp-search > input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-card); font: inherit; font-size: var(--z-t3); }
.pp-search > input:focus { outline: none; border-color: var(--accent); }
.pp-search-res { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; }
.pp-search-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; font: inherit; }
.pp-search-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pp-si-n { font-weight: 600; font-size: var(--z-t3); color: var(--text); }
.pp-si-s { font-size: var(--z-t3); color: var(--text-dim); }
.pp-search-empty { padding: 10px 12px; font-size: var(--z-t3); color: var(--text-dim); }
.pp-search-src { padding: 6px 12px; font-size: var(--z-t3); color: var(--text-dim); font-style: italic; border-top: 1px solid var(--border-soft); }

/* AUTHENTIFICATION / DOSSIERS SERVEUR */
/* Compte connecté : pied épinglé en bas de la barre latérale (avatar + identité + déconnexion).
   sticky bottom:0 -> toujours visible même quand la liste de navigation défile ;
   sur mobile, la barre latérale est le tiroir ☰, donc la déconnexion y est aussi accessible. */
.sidebar-account {
  position: sticky; bottom: 0; z-index: 4; margin-top: 12px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--bg-soft) 92%, var(--z-c-blanc));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--border-soft); border-radius:6px;
  box-shadow: 0 -6px 18px rgba(0,34,82,.06);
}
.sa-ava {
  width: 32px; height: 32px; border-radius:6px; flex: none;
  display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700; color: var(--z-c-blanc);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  background-size: cover; background-position: center;   /* si une photo est fournie */
}
.sa-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.sa-name { font-size: var(--z-t3); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-mail { font-size: var(--z-t3); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-logout {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius:6px; color: var(--text-dim);
  transition: border-color .12s, color .12s;
}
.sa-logout svg { width: 15px; height: 15px; }
.sa-logout:hover { border-color: var(--crit); color: var(--crit); }

#srv-list .lib-row { grid-template-columns: 150px 1fr 90px 110px 108px 82px; }
#adm-users .lib-row { grid-template-columns: 1fr 1fr 90px 150px 40px; }
@media (max-width: 640px) {
  #srv-list .lib-row, #adm-users .lib-row { grid-template-columns: 1fr auto; }
}

/* CATALOGUE D'OUTILS DE RÉFÉRENCE */
.ref-group { margin-bottom: 20px; }
.ref-group:last-child { margin-bottom: 0; }
.ref-group > h4 { font-size: var(--z-t3); margin: 0 0 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ref-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  padding: 12px 14px; transition: transform .12s, border-color .12s;
}
.ref-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.ref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ref-name { font-weight: 600; font-size: var(--z-t3); }
.ref-desc { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.45; }
.ref-tag { font-size: var(--z-t3); padding: 1px 7px; border-radius:6px; white-space: nowrap; border: 1px solid; flex: none; }
.ref-free { color: var(--ok); border-color: rgba(12,140,103,.4); background: rgba(12,140,103,.1); }
.ref-key  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ref-gov  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ref-paid { color: var(--text-dim); border-color: var(--border); background: var(--bg-soft); }

/* ÉCRAN D'ACCUEIL (choix du profil) */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(1200px 600px at 50% -10%, var(--z-c-marine), var(--bg));
  display: grid; place-items: center; padding: 24px; overflow-y: auto;
}
.welcome-box { max-width: 760px; width: 100%; text-align: center; }
.welcome-brand { font-size: var(--z-t5); letter-spacing: .14em; color: var(--accent); margin-bottom: 18px; }
.welcome-brand .brand-mark { font-size: var(--z-t5); }
.welcome-box h1 { font-size: 30px; margin: 0 0 8px; }
.welcome-sub { color: var(--text-dim); margin: 0 0 28px; font-size: var(--z-t4); }
.welcome-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.welcome-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  padding: 28px 22px; cursor: pointer; text-align: center; color: var(--text);
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.welcome-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
.wc-icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin: 0 auto;
  border-radius:6px; color: var(--accent);
  background: color-mix(in srgb, var(--brand-blue) 10%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, var(--border));
}
.wc-icon svg { width: 30px; height: 30px; }
.welcome-card:hover .wc-icon { border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--border)); }
.wc-title { font-weight: 700; font-size: var(--z-t4); margin: 12px 0 8px; }
.wc-desc { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.5; }
.welcome-note { color: var(--text-dim); font-size: var(--z-t3); margin-top: 22px; }
@media (max-width: 600px) { .welcome-choices { grid-template-columns: 1fr; } .welcome-box h1 { font-size: 24px; } }

/* Bouton de bascule de profil (en-tête) */
.mode-switch {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  border-radius:6px; padding: 5px 12px; font-size: var(--z-t3); font-family: inherit; cursor: pointer;
}
.mode-switch:hover { border-color: var(--accent); }
.ms-change { color: var(--text-dim); font-size: var(--z-t3); border-left: 1px solid var(--border); padding-left: 7px; }

/* ESPACE PARTICULIER */
.ref-card-static { cursor: default; }
.ref-card-static:hover { transform: none; border-color: var(--border); }

.pp-golden { background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius:6px; padding: 14px 18px; margin-bottom: 18px; }
.pp-golden-t { font-weight: 700; font-size: var(--z-t3); }
.pp-golden-l { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 26px; font-size: var(--z-t3); color: var(--text-dim); }
.pp-golden-l li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 560px) { .pp-golden-l { columns: 1; } }

/* « Que faire ? », parcours calme et groupé (moins intimidant) */
.pp-choose-lead { font-size: var(--z-t4); font-weight: 700; color: var(--text); margin: 10px 0 14px; }
.pp-cat { margin-bottom: 22px; }
.pp-cat-h { font-size: var(--z-t3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; padding-left: 2px; }
.pp-card-unsure { display: block; width: 100%; margin-top: 4px; border-style: dashed;
  background: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 5%, var(--bg-soft)); }
.pp-card-unsure:hover { background: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 9%, var(--bg-soft)); }
.pp-card-unsure .ic { color: var(--accent); }
.pp-golden-soft { margin-top: 6px; }
.pp-detail {
  margin-top: 22px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius:6px; padding: 22px 24px; animation: fade .25s ease;
}
.pp-detail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.pp-detail-ic { font-size: 34px; flex: none; }
.pp-detail-head h3 { margin: 0 0 4px; font-size: var(--z-t5); }
.pp-detail-head p { margin: 0; color: var(--text-dim); font-size: var(--z-t3); }
.pp-h4 { font-size: var(--z-t3); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }

.pp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--z-t3); }
.pp-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--z-c-smart-fonce); color: var(--z-c-blanc);
  display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700;
}
.pp-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tip {
  background: rgba(12,140,103,.1); border: 1px solid rgba(12,140,103,.35); color: var(--text);
  border-radius:6px; padding: 5px 12px; font-size: var(--z-t3);
}

/* ANALYSE FICHIER / AUTO-DIAGNOSTIC (particulier) */
.pf-zone {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 2px dashed var(--border); border-radius:6px;
  padding: 20px; background: var(--bg);
}
.drop-hint { color: var(--text-dim); font-size: var(--z-t3); }

.ad-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ad-check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px 14px;
  transition: border-color .12s, opacity .12s;
}
.ad-check input { margin-top: 3px; accent-color: var(--ok); flex: none; width: 18px; height: 18px; }
.ad-check-t { font-weight: 600; font-size: var(--z-t3); display: block; }
.ad-check-h { color: var(--text-dim); font-size: var(--z-t3); display: block; margin-top: 3px; }
.ad-check.done { border-color: var(--ok); opacity: .6; }
.ad-check.done .ad-check-t { text-decoration: line-through; }

/* APPELS À L'ACTION (CTA) */
.cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  /* UN DEGRADE, PAS UN APLAT. Les deux bornes etaient la meme couleur, et
     le blanc pose dessus tenait 2,85 pour un. Les deux crans sombres de la
     marque le rendent lisible de bout en bout : 5,03 a la borne claire,
     6,71 a la borne sombre, sans quitter la teinte. */
  background: linear-gradient(135deg, var(--accent-dark), var(--z-c-smart-profond));
  color: var(--z-c-blanc); border-radius:6px; padding: 20px 24px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
.cta-compact { padding: 15px 18px; gap: 14px; }
.cta-body { flex: 1; min-width: 220px; }
.cta-brand { font-weight: 700; font-size: var(--z-t4); letter-spacing: .01em; }
.cta-compact .cta-brand { font-size: var(--z-t4); }
.cta-pitch { font-size: var(--z-t3); line-height: 1.5; opacity: .95; margin-top: 4px; }
.cta-trust { font-size: var(--z-t3); font-weight: 600; margin-top: 8px; opacity: .95; }
.cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cta-btn {
  background: var(--z-c-blanc); color: var(--z-c-smart-fonce); text-decoration: none;
  font-weight: 700; font-size: var(--z-t3); padding: 12px 22px; border-radius:6px; white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,140,214,.2); }
.cta-tel { color: var(--z-c-blanc); text-decoration: none; font-weight: 600; font-size: var(--z-t3); white-space: nowrap; }
.cta-tel:hover { text-decoration: underline; }
.pp-cta-top, #pp-cta { margin-bottom: 20px; }

/* Bouton CTA dans l'en-tête */
.header-cta {
  display: inline-flex; align-items: center; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); font-weight: 700; font-size: var(--z-t3);
  padding: 7px 14px; border-radius:6px; white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); transition: filter .12s, box-shadow .12s;
}
.header-cta:hover { filter: brightness(1.06); }

/* PAGES LÉGALES */
.legal { max-width: 760px; }
.legal p, .legal li { font-size: var(--z-t3); color: var(--text); }
.legal p { margin: 0 0 14px; }
.legal h3 { font-size: var(--z-t4); margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent); }
.legal-updated { color: var(--text-dim); font-size: var(--z-t3); font-family: ui-monospace, monospace; margin-top: -6px; }
.legal-id { display: grid; grid-template-columns: 220px 1fr; gap: 8px 18px; font-size: var(--z-t3); margin: 0 0 8px; }
.legal-id dt { color: var(--text-dim); }
.legal-id dd { margin: 0; }
.todo { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius:6px; padding: 0 6px; font-size: var(--z-t3); }
.legal-callout {
  background: rgba(201,60,75,.08); border: 1px solid var(--crit); border-radius:6px;
  padding: 14px 16px; margin-bottom: 18px; font-size: var(--z-t3);
}
@media (max-width: 560px) { .legal-id { grid-template-columns: 1fr; gap: 2px; } .legal-id dt { margin-top: 8px; } }

/* Pied de page, liens légaux */
.foot-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 6px; flex-wrap: wrap; }
.foot-link {
  background: transparent; border: none; color: var(--text-dim); font-family: inherit; font-size: var(--z-t3);
  cursor: pointer; padding: 2px 6px; border-radius:6px; text-decoration: underline; text-underline-offset: 2px;
}
.foot-link:hover { color: var(--accent); }

/* ACCUEIL PRO (lanceur) */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
/* Bande d'accès direct à la gestion de crise (Accueil pro) */
.home-crise { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 26px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--crit) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft)));
  border: 1px solid color-mix(in srgb, var(--crit) 32%, var(--border)); border-radius:6px; padding: 16px 20px; transition: border-color .15s, box-shadow .15s; }
.home-crise:hover { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); box-shadow: 0 4px 18px color-mix(in srgb, var(--crit) 16%, transparent); }
.home-crise-ic { flex: none; width: 46px; height: 46px; border-radius:6px; display: grid; place-items: center; background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 65%, var(--violet))); }
.home-crise-ic i { width: 24px; height: 24px; background: var(--z-c-blanc); }
.home-crise-b { flex: 1; min-width: 0; }
.home-crise-t { display: block; font-size: var(--z-t4); font-weight: 700; }
.home-crise-d { display: block; font-size: var(--z-t3); color: var(--text-dim); margin-top: 2px; }
.home-crise-go { flex: none; font-size: var(--z-t3); font-weight: 700; color: var(--crit); white-space: nowrap; }
@media (max-width: 560px) { .home-crise-go { display: none; } }
/* Accueil organisé par thème */
.home-section { margin-bottom: 30px; }
.home-section-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--border-soft); }
.home-section-h .hs-ic { font-size: var(--z-t4); align-self: center; opacity: .95; }
.home-section-h h3 { margin: 0; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
.home-section-h .hs-d { font-size: var(--z-t3); color: var(--text-dim); font-weight: 400; letter-spacing: 0; }
.home-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  padding: 18px; cursor: pointer; color: var(--text); font-family: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.home-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.hc-ic { width: 42px; height: 42px; border-radius:6px; flex: none; display: grid; place-items: center; font-size: var(--z-t5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); }
.hc-t { font-weight: 700; font-size: var(--z-t4); margin-top: 4px; }
.hc-d { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.45; }

/* ÉCOSYSTÈME (pied de page) */
.foot-eco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.foot-eco > span { color: var(--text-dim); }
.foot-eco a { color: var(--accent); text-decoration: none; font-weight: 600; }
.foot-eco a:hover { text-decoration: underline; }

/* ASSISTANT IA (chat) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-log {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px; max-height: 58vh; overflow-y: auto;
  padding: 16px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius:6px;
}
.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.msg-b {
  max-width: 82%; padding: 11px 14px; border-radius:6px;
  font-size: var(--z-t3); line-height: 1.55; white-space: normal; word-wrap: break-word;
}
.msg-user .msg-b { background: var(--z-c-smart-fonce); color: var(--z-c-blanc); border-bottom-right-radius: 5px; }
.msg-bot .msg-b {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); border-bottom-left-radius: 5px;
}
.msg-bot.is-intro .msg-b { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.msg-bot.is-error .msg-b { border-color: var(--z-c-alerte); }
.msg-bot.is-cta .msg-b { background: rgba(12,140,103,.10); border-color: var(--ok); font-size: var(--z-t3); }
.msg-b a { color: inherit; font-weight: 700; text-decoration: underline; }
.msg-user .msg-b a { color: var(--z-c-blanc); }

/* Indicateur de saisie (…) */
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); opacity: .5; animation: chatdot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Suggestions rapides */
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  border-radius:6px; padding: 7px 13px; font-size: var(--z-t3); cursor: pointer;
  font-family: inherit; transition: border-color .12s, color .12s;
}
.chip:hover { border-color: var(--accent); color: var(--text); }

/* Zone de saisie */
.chat-input {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius:6px; padding: 12px;
}
.chat-input textarea {
  width: 100%; resize: none; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 10px 12px; font-family: inherit; font-size: var(--z-t3); line-height: 1.5;
}
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
.chat-actions { display: flex; justify-content: flex-end; gap: 10px; }
.chat-foot { color: var(--text-dim); font-size: var(--z-t3); margin: 0; text-align: center; }

@media (max-width: 640px) { .msg-b { max-width: 90%; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }

/* Synthèse assistée (IA) depuis le rapport */
.btn-sm { padding: 6px 12px; font-size: var(--z-t3); }
.synth {
  margin-top: 18px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius:6px; padding: 18px;
}
.synth-head { display: flex; align-items: center; gap: 12px; }
.synth-head h3 { margin: 0; font-size: var(--z-t4); flex: 1; }
.synth-tag {
  font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius:6px;
  padding: 2px 9px; vertical-align: middle; margin-left: 8px;
}
.synth-hint { color: var(--text-dim); font-size: var(--z-t3); margin: 8px 0 14px; }
.synth-body { font-size: var(--z-t3); line-height: 1.6; }
.synth-body h4 { margin: 16px 0 6px; font-size: var(--z-t3); color: var(--accent); }
.synth-body h4:first-child { margin-top: 0; }
.synth-body p { margin: 0 0 10px; }
.synth-body ul { margin: 0 0 10px; padding-left: 20px; }
.synth-body li { margin: 2px 0; }
.synth-loading { color: var(--text-dim); display: flex; align-items: center; gap: 10px; }
.synth-note { padding: 12px 14px; border: 1px solid var(--border); border-radius:6px; }
.synth-note.is-error { border-color: var(--z-c-alerte); }
.synth-note.is-cta { margin-top: 10px; background: rgba(12,140,103,.10); border-color: var(--ok); }
.synth-note a { color: inherit; font-weight: 700; }
.synth-actions { display: flex; gap: 10px; margin-top: 14px; }
.synth-savehint { color: var(--text-dim); font-size: var(--z-t3); margin: 12px 0 0; }

/* Analyse guidée d'un e-mail (particulier) */
.mailcheck { display: flex; flex-direction: column; gap: 12px; }
.mailcheck textarea {
  width: 100%; resize: vertical; min-height: 150px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 12px; font-family: inherit; font-size: var(--z-t3); line-height: 1.5;
}
.mailcheck textarea:focus { outline: none; border-color: var(--accent); }
.mc-bar { display: flex; gap: 10px; }
.mc-ioc, .mc-explain {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius:6px; padding: 16px;
}
.mc-note { color: var(--text-dim); font-size: var(--z-t3); }
.mc-ioc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mc-hint { color: var(--text-dim); font-size: var(--z-t3); }
.mc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mc-cat h4 { margin: 0 0 6px; font-size: var(--z-t3); color: var(--accent); }
.mc-cnt { color: var(--text-dim); font-weight: 400; }
.mc-cat ul { margin: 0; padding-left: 16px; }
.mc-cat li { margin: 2px 0; font-size: var(--z-t3); word-break: break-all; }
.mc-cat li code { font-size: var(--z-t3); }
.mc-more { list-style: none; color: var(--text-dim); font-size: var(--z-t3); }
#mc-tolib { margin-top: 12px; }
.mc-verdict-h { font-weight: 700; margin-bottom: 8px; }
.mc-verdict-b { font-size: var(--z-t3); line-height: 1.6; }

/* Détecteur d'arnaques (particulier) */
.scam { display: flex; flex-direction: column; gap: 12px; }
.scam textarea { width: 100%; resize: vertical; min-height: 130px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 12px; font-family: inherit; font-size: var(--z-t3); line-height: 1.5; }
.scam textarea:focus { outline: none; border-color: var(--accent); }
.sc-bar { display: flex; gap: 10px; }
.sc-out { display: flex; flex-direction: column; gap: 12px; }
.sc-verdict { font-weight: 700; font-size: var(--z-t4); padding: 12px 16px; border-radius:6px; border: 1px solid var(--border); }
.sc-verdict.sc-bad { border-color: var(--crit); background: rgba(201,60,75,.08); }
.sc-verdict.sc-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.sc-verdict.sc-ok { border-color: var(--ok); background: rgba(12,140,103,.08); }
.sc-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 14px 16px; }
.sc-block h4 { margin: 0 0 8px; font-size: var(--z-t3); }
.sc-item { border-left: 3px solid var(--border); padding: 6px 0 6px 10px; margin: 6px 0; font-size: var(--z-t3); }
.sc-item.sc-bad { border-color: var(--crit); }
.sc-item.sc-warn { border-color: var(--warn); }
.sc-item.sc-ok { border-color: var(--ok); }
.sc-item code { word-break: break-all; }
.sc-item ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); font-size: var(--z-t3); }
.sc-ok-t { color: var(--ok); font-size: var(--z-t3); }
.sc-tip { color: var(--text-dim); font-size: var(--z-t3); margin: 8px 0 0; }
.sc-signals { margin: 0; padding-left: 18px; }
.sc-note { color: var(--text-dim); font-size: var(--z-t3); }
.sc-cta { background: rgba(12,140,103,.10); border: 1px solid var(--ok); border-radius:6px; padding: 12px 14px; font-size: var(--z-t3); }
.sc-cta a { color: inherit; font-weight: 700; }

/* Enrichissement d'IOC (bibliothèque, pro) */
.lib-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.lib-enrich { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius:6px; cursor: pointer; font-size: var(--z-t3); padding: 2px 7px; font-family: inherit; }
.lib-enrich:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.lib-enrich:disabled { opacity: .6; cursor: default; }
.enr { display: inline-block; margin-left: 8px; font-size: var(--z-t3); font-weight: 700; padding: 1px 8px; border-radius:6px; border: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.enr-malicious { color: var(--crit); border-color: var(--crit); background: rgba(201,60,75,.08); }
.enr-suspicious { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.enr-clean { color: var(--ok); border-color: var(--ok); background: rgba(12,140,103,.08); }
.enr-unknown, .enr-error, .enr-notconfigured { color: var(--text-dim); }
/* Badges de provenance des indicateurs (MISP, marqueur détection to_ids) */
.src-badge { display: inline-block; margin-left: 8px; font-size: var(--z-t3); font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border-radius:6px; vertical-align: middle; white-space: nowrap; border: 1px solid var(--border); }
.src-misp { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.src-ids  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Détail d'un dossier serveur (ré-affichage synthèse) */
.srv-detail {
  margin-top: 18px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius:6px; padding: 18px;
}
.srv-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.srv-detail-head h3 { margin: 0; font-size: var(--z-t4); flex: 1; }
.srv-detail-meta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 18px; margin-bottom: 16px;
}
.srv-detail-meta > div { display: flex; flex-direction: column; gap: 1px; }
.sd-k { color: var(--text-dim); font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .03em; }
.sd-v { font-size: var(--z-t3); }
.sd-synth-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin-bottom: 10px; }
.sd-when { color: var(--text-dim); font-weight: 400; font-size: var(--z-t3); }
.sd-synth-b { font-size: var(--z-t3); line-height: 1.6; }
.sd-synth-b h4 { margin: 16px 0 6px; font-size: var(--z-t3); color: var(--accent); }
.sd-synth-b h4:first-child { margin-top: 0; }
.sd-synth-b p { margin: 0 0 10px; }
.sd-synth-b ul { margin: 0 0 10px; padding-left: 20px; }
.sd-synth-b li { margin: 2px 0; }
#srv-synth-copy { margin-top: 12px; }
.sd-nosynth { color: var(--text-dim); font-size: var(--z-t3); }
.srv-detail-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.srv-detail-actions .spacer { flex: 1; }
.srv-detail-dirty { color: var(--z-c-alerte); font-size: var(--z-t3); margin: 8px 0 0; }

/* Journal / commentaires du dossier */
.srv-comments { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.srv-comments-h { margin: 0 0 10px; font-size: var(--z-t3); }
.srv-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.srv-comments-empty { color: var(--text-dim); font-size: var(--z-t3); }
.srv-comment { background: var(--bg); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; }
.srv-comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.srv-comment-auth { font-weight: 700; font-size: var(--z-t3); }
.srv-comment-when { font-size: var(--z-t3); color: var(--text-dim); }
.srv-comment-txt { font-size: var(--z-t3); line-height: 1.5; }
.srv-comment-add { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.srv-comment-ta {
  width: 100%; resize: vertical; min-height: 52px; box-sizing: border-box;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius:6px; padding: 9px 11px; font: inherit; font-size: var(--z-t3);
}

/* Textarea d'édition de synthèse (rapport + dossier) */
.synth-edit-ta {
  width: 100%; resize: vertical; min-height: 220px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 12px; font-family: inherit; font-size: var(--z-t3); line-height: 1.55;
}
.synth-edit-ta:focus { outline: none; border-color: var(--accent); }

/* Assistant IA flottant (présent sur toutes les vues) */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); border: none; cursor: pointer;
  border-radius:6px; padding: 12px 18px; font-family: inherit;
  font-size: var(--z-t3); font-weight: 600; box-shadow: 0 6px 20px rgba(0,140,214,.28);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.ai-fab:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,140,214,.34); }
.ai-fab-ic { width: 32px; height: 32px; flex: none; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
/* Mascotte Zerval en icône inline (remplace l'ancien emoji 🤖) */
.ai-ic { height: 18px; width: 18px; object-fit: cover; border-radius: 50%; vertical-align: middle; display: inline-block; flex: none; box-shadow: 0 0 0 1px rgba(0,40,90,.10); }
img.hc-ic { width: 32px; height: 32px; object-fit: contain; display: block; background: none; border-radius:6px; }
@media (max-width: 640px) {
  .ai-fab { right: 14px; bottom: 14px; padding: 12px; }
  .ai-fab-t { display: none; }   /* icône seule sur mobile */
}
@media print { .ai-fab { display: none !important; } }

/* « Faire le point » rassurant (particulier, détail de situation) */
.pp-synth-hint { color: var(--text-dim); font-size: var(--z-t3); margin: 0 0 8px; }
.pp-synth-note {
  width: 100%; resize: vertical; min-height: 52px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius:6px;
  padding: 9px 11px; font-family: inherit; font-size: var(--z-t3); margin-bottom: 10px;
}
.pp-synth-note:focus { outline: none; border-color: var(--accent); }
.pp-synth-out {
  margin-top: 12px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius:6px; padding: 16px; font-size: var(--z-t3); line-height: 1.6;
}
.pp-synth-out h4 { margin: 14px 0 6px; font-size: var(--z-t3); color: var(--accent); }
.pp-synth-out h4:first-child { margin-top: 0; }
.pp-synth-out p { margin: 0 0 10px; }
.pp-synth-out ul { margin: 0 0 10px; padding-left: 20px; }
.pp-synth-out li { margin: 2px 0; }
.pp-synth-err { color: var(--z-c-alerte); }

/* Plan de récupération suivi (particulier) */
.pp-plan-hint { color: var(--text-dim); font-size: var(--z-t3); margin: 0 0 10px; }
.pp-progress { height: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; overflow: hidden; }
.pp-progress-bar { height: 100%; background: var(--accent); border-radius:6px; transition: width .25s; }
.pp-progress-t { color: var(--text-dim); font-size: var(--z-t3); margin: 6px 0 14px; }
.pp-tasks { display: flex; flex-direction: column; gap: 8px; }
.pp-task { display: flex; align-items: flex-start; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px 14px; cursor: pointer; transition: border-color .12s; }
.pp-task:hover { border-color: var(--accent); }
.pp-task input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-task-box { flex: none; width: 20px; height: 20px; border: 2px solid var(--border); border-radius:6px; margin-top: 1px; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.pp-task input:checked + .pp-task-box { background: var(--accent); border-color: var(--accent); }
.pp-task input:checked + .pp-task-box::after { content: "✓"; color: var(--z-c-blanc); font-size: var(--z-t3); font-weight: 700; }
.pp-task input:focus-visible + .pp-task-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-task-n { flex: none; color: var(--text-dim); font-weight: 700; font-size: var(--z-t3); min-width: 16px; }
.pp-task-t { font-size: var(--z-t3); line-height: 1.45; }
.pp-task.is-done { opacity: .62; }
.pp-task.is-done .pp-task-t { text-decoration: line-through; }
.pp-evidence { margin-top: 14px; }
.pp-evidence summary { cursor: pointer; font-weight: 600; font-size: var(--z-t3); padding: 6px 0; }
.pp-plan-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Générateur de documents (particulier) */
.doc-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.doc-card { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 18px; cursor: pointer; color: var(--text); font-family: inherit; transition: transform .12s, border-color .12s; }
.doc-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.doc-ic { font-size: 24px; }
.doc-t { font-weight: 700; font-size: var(--z-t3); margin-top: 2px; }
.doc-d { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.4; }
.doc-back { margin-bottom: 12px; }
.doc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; }
.doc-form h3 { margin: 0 0 14px; font-size: var(--z-t4); }
.doc-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.doc-f > span { font-size: var(--z-t3); font-weight: 600; }
.doc-f em { color: var(--text-dim); font-weight: 400; font-style: normal; font-size: var(--z-t3); }
.doc-f input, .doc-f textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; font-family: inherit; font-size: var(--z-t3); }
.doc-f input:focus, .doc-f textarea:focus { outline: none; border-color: var(--accent); }
.doc-preview { background: var(--z-c-blanc); color: var(--z-c-marine); border: 1px solid var(--border); border-radius:6px; padding: 22px; white-space: pre-wrap; word-wrap: break-word; font-family: Georgia, "Times New Roman", serif; font-size: var(--z-t3); line-height: 1.6; min-height: 260px; }
.doc-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.doc-warn { color: var(--text-dim); font-size: var(--z-t3); margin: 10px 0 0; }

/* Playbooks + conformité CNIL (pro) */
.pb-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pb-card { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 18px; cursor: pointer; color: var(--text); font-family: inherit; transition: transform .12s, border-color .12s; }
.pb-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pb-ic { font-size: 24px; }
.pb-t { font-weight: 700; font-size: var(--z-t3); }
.pb-d { color: var(--text-dim); font-size: var(--z-t3); line-height: 1.4; }
.pb-back { display: flex; gap: 10px; margin-bottom: 12px; }
.pb-title { font-size: var(--z-t5); margin: 0 0 12px; }
.pb-phase { margin-bottom: 18px; }
.pb-phase h4 { font-size: var(--z-t3); margin: 0 0 8px; color: var(--accent); }
.pb-cnil { margin-top: 26px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 20px; }
.pb-cnil-h { margin: 0 0 4px; font-size: var(--z-t4); }
.cnil-q { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.cnil-q label { display: flex; flex-direction: column; gap: 5px; font-size: var(--z-t3); }
.cnil-q select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 8px 10px; font-family: inherit; font-size: var(--z-t3); max-width: 260px; }
.cnil-out { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius:6px; font-size: var(--z-t3); }
.cnil-out.is-ok { border-color: var(--ok); background: rgba(12,140,103,.08); }
.cnil-out.is-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.cnil-out.is-bad { border-color: var(--z-c-alerte); background: rgba(185,107,0,.08); }
.cnil-out p { margin: 0; }
.cnil-tpl { margin-top: 12px; }
.cnil-tpl pre { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border); border-radius:6px; padding: 14px; font-size: var(--z-t3); font-family: Consolas, monospace; color: var(--text); overflow-x: auto; }
.cnil-tpl .btn { margin: 10px 8px 0 0; text-decoration: none; }
@media (max-width: 820px) { .doc-grid { grid-template-columns: 1fr; } }

/* Impression : n'imprimer que le courrier */
@media print {
  body.printing-doc .app-header, body.printing-doc .app-footer, body.printing-doc .sidebar,
  body.printing-doc .doc-form, body.printing-doc .doc-actions, body.printing-doc .doc-warn,
  body.printing-doc .doc-back, body.printing-doc .doc-picker,
  body.printing-doc .view-title, body.printing-doc .view-hint { display: none !important; }
  body.printing-doc .doc-preview { border: none; padding: 0; }
}

/* Mascotte Zerval (écran d'accueil) */
.welcome-mascot {
  width: 132px; height: 132px; margin: 0 auto 6px;
  object-fit: contain;
}
@media (max-width: 640px) { .welcome-mascot { width: 104px; height: 104px; } }

/* Verrou d'accès (compte + paiement) */
/* ===== PANNEAU DE CONNEXION UNIFIE L'AFFUT (log.png) ===== */
/* ============================================================
   ECRAN DE CONNEXION UNIFIE ZERVAL : "L'AFFUT"
   Carte Nuit ancree dans l'espace negatif gauche de la photo,
   ligne de guet Signal + cote mono, un seul Fauve (le bouton).
   Couleurs codees EN DUR : rendu pixel-identique sur pro / smart / msp / admin.
   Seules les polices passent par var(--display / --font / --mono).
   ============================================================ */

/* Cacher l'app pendant le gate (regle conservee telle quelle) */
body.gated .app-header,
body.gated .app-shell,
body.gated .ai-fab,
body.gated #welcome { display:none !important; }

/* --- Overlay : photo plein-cadre + scrim d'assise (dense a gauche et en bas) --- */
.gate-overlay{
  position:fixed; inset:0; z-index:300;
  overflow-y:auto;
  display:flex; align-items:center; justify-content:flex-start;
  padding:48px clamp(24px, 8vw, 128px);
  color:var(--z-c-creme);
  font-family:var(--font, "Inter", system-ui, sans-serif);
  background:
    linear-gradient(90deg,
      rgba(15,19,25,.94) 0%,
      rgba(15,19,25,.80) 34%,
      rgba(15,19,25,.32) 60%,
      rgba(15,19,25,.10) 100%),
    linear-gradient(0deg,
      rgba(15,19,25,.70) 0%,
      rgba(15,19,25,.12) 40%,
      rgba(15,19,25,0) 72%),
    var(--z-c-nuit);
}

/* Element decoratif : neutralise (le fond vit sur l'overlay) */
.gate-fond{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

/* --- Carte Nuit quasi-opaque, ligne de guet en bordure gauche --- */
.gate-box{
  position:relative;
  width:100%; max-width:448px;
  text-align:left;
  background:var(--z-c-nuit);
  border:1px solid rgba(255,255,255,.11);
  border-left:2px solid var(--z-c-info);            /* ligne de guet */
  border-radius:6px;
  padding:30px 30px 26px;
  color:var(--z-c-creme);
  box-shadow:0 18px 48px rgba(0,0,0,.50);
  box-sizing:border-box;
}

/* --- Logo lockup (toujours variante claire, la carte est toujours sombre) --- */
.gate-logo{ margin:0 0 16px; }
.gate-logo img{ height:58px; width:auto; }
.gate-logo-light{ display:none !important; } /* jamais le logo fond clair */
.gate-logo-dark{ display:inline-block; }

/* --- Sous-titre / intro, coiffe d'une cote mono MAJUSCULE attenuee --- */
.gate-sub{
  color:var(--z-c-gris-2); font-size: var(--z-t3); line-height:1.5;
  margin:0 0 18px;
}
.gate-sub::before{
  content:"ACCÈS SÉCURISÉ";
  display:block;
  font-family:var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--z-t0); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--z-c-gris-2);
  margin-bottom:8px;
}

/* --- Onglets : rail Nuit, actif = Signal plein (froid, jamais un 2e orange) --- */
.gate-tabs{
  display:flex; gap:6px;
  background:var(--z-c-nuit);
  border:1px solid rgba(255,255,255,.11);
  border-radius:6px; padding:4px;
  margin-bottom:16px;
}
.gate-tab{
  flex:1; padding:9px 10px;
  border:none; background:transparent;
  color:var(--z-c-gris-2);
  font-family:var(--font, "Inter", system-ui, sans-serif);
  font-weight:600; font-size: var(--z-t2);
  border-radius:6px; cursor:pointer;
  transition:background .15s, color .15s;
}
.gate-tab:hover{ color:var(--z-c-creme); }
.gate-tab.active{ background:var(--z-c-info); color:var(--z-c-nuit); }
.gate-tab:focus-visible{ outline:2px solid var(--z-c-info); outline-offset:2px; }

/* --- Panneaux + formulaire --- */
.gate-panel{ text-align:left; }
.gate-form{ display:flex; flex-direction:column; gap:11px; }
.gate-form input{
  width:100%; box-sizing:border-box;
  background:var(--z-c-nuit); color:var(--z-c-creme);
  border:1px solid rgba(255,255,255,.11);
  border-radius:6px;
  padding:11px 13px; font-size: var(--z-t3);
  font-family:var(--font, "Inter", system-ui, sans-serif);
  transition:border-color .15s, box-shadow .15s;
}
.gate-form input::placeholder{ color:var(--z-c-gris-2); opacity:.75; }
.gate-form input:focus{
  outline:none;
  border-color:var(--z-c-info);
  box-shadow:0 0 0 3px rgba(61,166,232,.22);
}

/* --- Bouton primaire = UNIQUE Fauve de la vue (la decision) --- */
.gate-box .btn.btn-primary,
.gate-form .btn.btn-primary,
.gate-box .btn-primary{
  width:100%; box-sizing:border-box;
  background:#E0872A; color:#1B1712;
  border:1px solid #E0872A;
  border-radius:6px;
  padding:12px 16px;
  font-family:var(--font, "Inter", system-ui, sans-serif);
  font-weight:700; font-size: var(--z-t3); letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.gate-box .btn.btn-primary:hover,
.gate-form .btn.btn-primary:hover,
.gate-box .btn-primary:hover{ background:var(--z-c-alerte); border-color:var(--z-c-alerte); }
.gate-box .btn.btn-primary:focus-visible,
.gate-box .btn-primary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(224,135,42,.38);
}
.gate-box .btn.btn-primary:disabled{ opacity:.55; cursor:not-allowed; }

/* Boutons secondaires eventuels : froids, sobres (jamais un 2e orange) */
.gate-box .btn:not(.btn-primary){
  background:transparent; color:var(--z-c-creme);
  border:1px solid rgba(255,255,255,.11);
  border-radius:6px;
  padding:11px 15px; font-size: var(--z-t3); font-weight:600;
  font-family:var(--font, "Inter", system-ui, sans-serif);
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.gate-box .btn:not(.btn-primary):hover{
  border-color:var(--z-c-info); color:var(--z-c-info); background:rgba(61,166,232,.08);
}

/* --- Verification 2FA / code par mail --- */
.gate-verify-mail{
  color:var(--z-c-creme); font-weight:600; text-align:center; word-break:break-all;
}
.gate-code-input{
  width:100%; box-sizing:border-box; text-align:center;
  background:var(--z-c-nuit); color:var(--z-c-creme);
  border:1px solid rgba(255,255,255,.11); border-radius:6px;
  padding:12px 8px;
  font-size:30px; letter-spacing:12px;
  font-family:var(--mono, "JetBrains Mono", ui-monospace, monospace);
  transition:border-color .15s, box-shadow .15s;
}
.gate-code-input:focus{
  outline:none; border-color:var(--z-c-info);
  box-shadow:0 0 0 3px rgba(61,166,232,.22);
}
.gate-verify-hint{
  color:var(--z-c-gris-2); font-size: var(--z-t1); text-align:center; margin-top:10px; line-height:1.5;
}

/* --- Contrat d'utilisation --- */
.gate-contract-box{
  max-height:46vh; overflow-y:auto; text-align:left;
  background:var(--z-c-nuit);
  border:1px solid rgba(255,255,255,.11);
  border-radius:6px;
  padding:14px 16px; margin-bottom:12px;
  color:var(--z-c-gris-2); font-size: var(--z-t2); line-height:1.55;
}
.gate-contract-box h1,
.gate-contract-box h2,
.gate-contract-box h3,
.gate-contract-box strong{ color:var(--z-c-creme); }
.gate-check{
  display:flex; gap:9px; align-items:flex-start;
  color:var(--z-c-creme); font-size: var(--z-t2); line-height:1.45;
}
.gate-check input[type="checkbox"]{
  accent-color:var(--z-c-info); width:17px; height:17px; margin-top:1px; flex:0 0 auto;
}

/* --- Erreurs / liens / pied / prix --- */
.gate-err{
  color:var(--z-c-critique); font-size: var(--z-t2); font-weight:600;
  margin:4px 0 0; min-height:1em;
  padding:9px 12px;
  background:rgba(201,60,75,.10);
  border:1px solid rgba(201,60,75,.35);
  border-radius:6px;
}
.gate-foot{ color:var(--z-c-gris-2); font-size: var(--z-t1); margin-top:16px; }
.gate-foot a{ color:var(--z-c-info); text-decoration:none; }
.gate-foot a:hover{ text-decoration:underline; }
.gate-link,
.gate-link-inline{
  color:var(--z-c-info); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.gate-link:hover,
.gate-link-inline:hover{ color:var(--z-c-creme); }
.gate-price{ color:var(--z-c-gris-2); font-size: var(--z-t2); }
.gate-price strong{  /* prix en Os : on ne garde qu'UN seul Fauve (le bouton) par vue */
  color:var(--z-c-creme);
  font-family:var(--display, "Fraunces", Georgia, serif);
  font-size: var(--z-t5); font-weight:600;
}

/* Titres serif eventuels dans la carte */
.gate-box h1,
.gate-box h2{
  font-family:var(--display, "Fraunces", Georgia, serif);
  color:var(--z-c-creme); font-weight:600; margin:0 0 10px;
}

/* ============================================================
   RESPONSIVE : mobile <= 640px, carte pleine largeur centree,
   scrim vertical renforce, photo toujours en fond couvrant.
   ============================================================ */
@media (max-width:640px){
  .gate-overlay{
    justify-content:center; align-items:flex-start;
    padding:20px 16px 32px;
    background:
      linear-gradient(180deg,
        rgba(15,19,25,.88) 0%,
        rgba(15,19,25,.92) 45%,
        rgba(15,19,25,.97) 100%),
      var(--z-c-nuit);
  }
  .gate-box{
    max-width:100%;
    padding:24px 20px 22px;
    margin-top:6vh;
  }
  .gate-logo img{ height:50px; }
  .gate-code-input{ font-size:26px; letter-spacing:9px; }
}

/* ===== GARDE-FOU : la carte de connexion reste sombre meme si l'app est en theme clair =====
   Les regles de theme clair de l'app (:root[data-theme="light"] input ...) ont la meme
   specificite que .gate-form input et gagnaient par ordre de source. On remonte la
   specificite sous .gate-overlay .gate-box pour verrouiller le rendu Nuit. */
.gate-overlay .gate-box input:not([type="checkbox"]):not([type="radio"]),
.gate-overlay .gate-box textarea,
.gate-overlay .gate-box select{
  background:var(--z-c-nuit); color:var(--z-c-creme); border-color:rgba(255,255,255,.11);
}
.gate-overlay .gate-box input::placeholder,
.gate-overlay .gate-box textarea::placeholder{ color:var(--z-c-gris-2); opacity:.75; }
.gate-overlay .gate-box input:focus,
.gate-overlay .gate-box textarea:focus{ border-color:var(--z-c-info); box-shadow:0 0 0 3px rgba(61,166,232,.22); }
.gate-overlay .gate-box .gate-code-input{ background:var(--z-c-nuit); color:var(--z-c-creme); }
.gate-overlay .gate-box .gate-contract-box{ background:var(--z-c-nuit); color:var(--z-c-gris-2); }

/* ===== Bouton primaire : force le Fauve par-dessus le degrade de marque !important de l app (Smart surtout) ===== */
.gate-overlay .gate-box .btn.btn-primary,
.gate-overlay .gate-box .btn-primary{
  background:#E0872A !important; background-image:none !important;
  color:#1B1712 !important; border-color:#E0872A !important;
}
.gate-overlay .gate-box .btn.btn-primary:hover,
.gate-overlay .gate-box .btn-primary:hover{ background:var(--z-c-alerte) !important; border-color:var(--z-c-alerte) !important; }


/* Rapport d'incident (fenêtre imprimable + document) */
.report-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,17,46,.78); display: flex; flex-direction: column; }
.report-modal-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.rm-title { font-weight: 700; }
.report-modal-body { flex: 1; overflow-y: auto; padding: 26px; display: flex; justify-content: center; }
.report-doc { width: 100%; max-width: 800px; height: fit-content; background: var(--z-c-blanc); color: var(--z-c-marine); border-radius:6px; padding: 40px 44px; box-shadow: 0 20px 60px rgba(0,140,214,.45); font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }
.report-doc .rd-head { border-bottom: 2px solid var(--z-c-smart); padding-bottom: 14px; margin-bottom: 22px; }
.report-doc .rd-top { display: flex; justify-content: space-between; align-items: center; font-family: "Segoe UI", sans-serif; }
.report-doc .rd-brand { font-weight: 700; color: var(--z-c-smart); letter-spacing: .08em; }
.report-doc .rd-logo { height: 30px; width: auto; display: block; }
.report-doc .rd-client-logo { height: 42px; width: auto; max-width: 240px; display: block; object-fit: contain; }
@media print { .report-doc .rd-logo { height: 26px; } .report-doc .rd-client-logo { height: 36px; } }
.report-doc .rd-class { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--z-c-critique); border: 1px solid var(--z-c-critique); border-radius:6px; padding: 2px 8px; }
.report-doc h1 { font-size: 28px; margin: 18px 0 4px; }
.report-doc .rd-sub { color: var(--z-c-gris-1); margin: 0; font-family: "Segoe UI", sans-serif; }
.report-doc .rd-sec { margin: 22px 0; }
.report-doc .rd-sec h3 { font-family: "Segoe UI", sans-serif; font-size: var(--z-t4); color: var(--z-c-marine); border-bottom: 1px solid #eaf7fc; padding-bottom: 5px; margin: 0 0 10px; }
.report-doc h4 { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); margin: 12px 0 4px; color: var(--z-c-smart); }
.report-doc h4 span { color: var(--z-c-gris-1); font-weight: 400; }
.report-doc .rd-muted { color: var(--z-c-gris-1); }
.report-doc table.rd-info { width: 100%; border-collapse: collapse; font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); }
.report-doc .rd-info th { text-align: left; width: 190px; color: var(--z-c-gris-1); font-weight: 600; padding: 5px 10px 5px 0; vertical-align: top; }
.report-doc .rd-info td { padding: 5px 0; }
.report-doc .rd-exec { font-size: var(--z-t3); }
.report-doc .rd-exec h4 { color: var(--z-c-marine); }
.report-doc .rd-ioc-cat ul, .report-doc .rd-tl, .report-doc .rd-mitre, .report-doc .rd-reco, .report-doc .rd-journal { margin: 4px 0 10px; padding-left: 20px; }
.report-doc .rd-journal li { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); margin: 6px 0; }
.report-doc .rd-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); }
.report-doc .rd-tbl th, .report-doc .rd-tbl td { border: 1px solid #eaf7fc; padding: 6px 9px; text-align: left; vertical-align: top; }
.report-doc .rd-tbl th { background: #eaf7fc; }
.report-doc .rd-cat-row td { background: #eaf7fc; font-weight: 700; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; color: var(--z-c-marine); }

/* EBIOS Risk Manager */
.nav-pill { font-size: var(--z-t3); font-weight: 700; letter-spacing: .06em; background: color-mix(in srgb, var(--violet) 24%, transparent); color: var(--text); padding: 2px 6px; border-radius:6px; vertical-align: middle; }
.eb-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.eb-title { flex: 1; min-width: 240px; }
.eb-study { width: 100%; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 11px 13px; font-size: var(--z-t4); font-weight: 600; }
.eb-study:focus { outline: none; border-color: var(--accent); }
.eb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.eb-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.eb-step { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); border-radius:6px; padding: 7px 14px 7px 8px; cursor: pointer; font: inherit; font-size: var(--z-t3); transition: .15s; }
.eb-step:hover { border-color: var(--accent); color: var(--text); }
.eb-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: var(--z-t3); }
.eb-step.active { color: var(--z-c-blanc); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--violet)); }
.eb-step.active .eb-step-n { background: rgba(255,255,255,.25); border-color: transparent; color: var(--z-c-blanc); }
.eb-step.done .eb-step-n { background: var(--z-c-smart-fonce); border-color: var(--z-c-smart-fonce); color: var(--z-c-blanc); }

.eb-intro { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:6px; padding: 14px 16px; margin-bottom: 16px; }
.eb-intro h3 { margin: 0 0 5px; font-size: var(--z-t4); }
.eb-intro p { margin: 0; color: var(--text-dim); font-size: var(--z-t3); }

/* Bulles explicatives (tooltips) + glossaire automatique */
.gl { border-bottom: 1px dotted var(--accent); cursor: help; }
.gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius:6px; }
.gl-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: var(--z-t3); font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; margin-left: 7px; flex: none; }
.gl-i:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.gl-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tip-bubble { position: fixed; z-index: 400; max-width: 300px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 12px; font-size: var(--z-t3); line-height: 1.45; font-weight: 400; box-shadow: 0 10px 28px rgba(0,140,214,.3); opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; }
.tip-bubble.show { opacity: 1; visibility: visible; transform: none; }

/* Programmes de conformité (collaboratif) */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.prog-card { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 14px 16px; cursor: pointer; color: var(--text); font-family: inherit; box-shadow: var(--shadow-sm); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.prog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.prog-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.prog-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prog-card-t { font-weight: 700; font-size: var(--z-t3); }
.prog-card-sub { font-size: var(--z-t3); color: var(--text-dim); }
.prog-create { border: 1px dashed var(--border); border-radius:6px; padding: 16px; margin-top: 6px; }
.prog-create h4 { margin: 0 0 6px; }
.prog-create-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.prog-create-row input, .prog-create-row select { flex: 1; min-width: 160px; }
.prog-add { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.prog-add input { flex: 1; min-width: 180px; }
.prog-member { border: 1px solid var(--border-soft); border-radius:6px; padding: 12px 14px; margin-bottom: 10px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.prog-member-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.prog-m-nom { flex: 1; font-weight: 600; }
.prog-m-role { flex: none; width: 170px; }
.prog-m-mail { width: 100%; margin-bottom: 10px; }
.prog-domaines { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-dom { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font: inherit; font-size: var(--z-t3); font-weight: 600; padding: 5px 12px; border-radius:6px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; }
.prog-dom:hover { color: var(--text); border-color: var(--text-dim); }
.prog-dom.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); border-color: transparent; }
.prog-actbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.prog-acting { font-size: var(--z-t3); color: var(--text-dim); display: flex; gap: 8px; align-items: center; }
.prog-acting select { min-width: 220px; }
.prog-tasks { display: flex; flex-direction: column; gap: 10px; }
.prog-task { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 13px 15px; border: 1px solid var(--border-soft); border-radius:6px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.prog-task:hover { background: var(--bg-card); }
.prog-task-main { flex: 1; min-width: 0; }
.prog-task-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.prog-task-meta { font-size: var(--z-t3); color: var(--text-dim); margin-top: 6px; }
.prog-task-act { display: flex; flex-direction: column; gap: 7px; flex: none; width: 320px; max-width: 46%; }
.prog-risk { background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent); border-radius:6px; padding: 11px 14px; font-size: var(--z-t3); margin: 12px 0; }
@media (max-width: 760px) { .prog-task { flex-direction: column; } .prog-task-act { width: 100%; max-width: none; } }

/* Assistant de rédaction des courriers */
.doc-ai { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px 13px; border: 1px dashed color-mix(in srgb, var(--violet) 42%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--violet) 6%, transparent); }
.doc-ai-desc { width: 100%; resize: vertical; }
.doc-sendto { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.doc-sendto-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: var(--z-t3); margin-bottom: 8px; }
.doc-sendto-i { font-size: var(--z-t3); margin: 0 0 8px; }
.doc-sendto-n { font-size: var(--z-t3); color: var(--text-dim); margin: 6px 0 0; }

/* Analyse approfondie de l'appareil (agent transparent) */
.ds-steps { font-size: var(--z-t3); margin-bottom: 14px; }
.ds-steps p { margin: 4px 0; }
.ds-code-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: var(--z-t3); margin: 6px 0; flex-wrap: wrap; }
.ds-code { background: var(--z-c-marine); color: #eaf7fc; border: 1px solid var(--z-c-marine); border-radius:6px; padding: 12px 14px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--z-t3); line-height: 1.5; overflow-x: auto; white-space: pre; max-height: 230px; }
.ds-input { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: var(--z-t3); margin-top: 12px; resize: vertical; }
.ds-list { margin: 6px 0 12px; padding-left: 20px; font-size: var(--z-t3); line-height: 1.55; }
.ds-list li { margin: 6px 0; }
.ds-verdict { font-weight: 700; padding: 10px 14px; border-radius:6px; margin: 14px 0 10px; }
.ds-verdict.ds-crit { background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent); color: var(--crit); }
.ds-verdict.ds-mid { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.ds-verdict.ds-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); color: var(--ok); }
.ds-flist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-f { padding: 11px 13px; border-radius:6px; border: 1px solid var(--border-soft); border-left: 3px solid var(--border); font-size: var(--z-t3); line-height: 1.5; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.ds-f-crit { border-left-color: var(--crit); }
.ds-f-mid { border-left-color: var(--warn); }
.ds-f-ok { border-left-color: var(--ok); }
.ds-reassure { background: color-mix(in srgb, var(--ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius:6px; padding: 11px 14px; font-size: var(--z-t3); margin-bottom: 14px; }
.ds-why2 { background: color-mix(in srgb, var(--brand-blue) 5%, var(--bg-soft)); border: 1px solid var(--border); border-radius:6px; padding: 12px 15px 13px; font-size: var(--z-t3); line-height: 1.55; margin-bottom: 14px; }
.ds-why2 p { margin: 7px 0; }
.ds-why2-h { font-weight: 700; color: var(--text); margin-top: 0 !important; }
.ds-why2-t { font-weight: 700; color: var(--accent); }
.ds-modes { display: inline-flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 3px; margin-bottom: 16px; }
.ds-mode { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--z-t3); font-weight: 600; padding: 7px 16px; border-radius:6px; cursor: pointer; transition: background .13s ease, color .13s ease; }
.ds-mode.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); }
.ds-guide-l { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ds-guide-l > input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.ds-guide-b { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.ds-guide-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: var(--z-t3); font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.ds-guide-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-guide-t { font-weight: 700; font-size: var(--z-t3); }
.ds-guide-w { font-size: var(--z-t3); color: var(--text-dim); font-style: italic; }
.ds-guide-h { font-size: var(--z-t3); line-height: 1.5; }
.ds-link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* Mon dossier d'incident (agrégateur) */
.dos-sel { margin-bottom: 16px; }
.dos-sel label { display: flex; flex-direction: column; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; max-width: 460px; }
.dos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dos-card { display: flex; flex-direction: column; gap: 3px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.dos-ic { width: 40px; height: 40px; border-radius:6px; flex: none; display: grid; place-items: center; font-size: var(--z-t5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); }
.dos-t { font-weight: 700; font-size: var(--z-t3); margin-top: 2px; }
.dos-d { font-size: var(--z-t3); color: var(--text-dim); }
.dos-letters { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius:6px; padding: 14px 16px; margin-bottom: 8px; }
.dos-letters h4 { margin: 0 0 10px; font-size: var(--z-t3); }
.dos-letter-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ma sécurité (tableau de bord particulier) */
.ms-card { cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.ms-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ms-freq { margin-bottom: 12px; }
.ms-freq-t { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 6px; }
.ms-r-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius:6px; margin-bottom: 6px; cursor: pointer; font-size: var(--z-t3); }
.ms-r-item > input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.ms-r-item > span:not(.ms-r-date) { flex: 1; }
.ms-r-item.done { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
.ms-r-item.done > span:not(.ms-r-date) { color: var(--text-dim); }
.ms-r-date { font-size: var(--z-t3); color: var(--ok); white-space: nowrap; }
.ms-r-date.over { color: var(--warn); font-weight: 600; }
.ms-r-date.todo { color: var(--text-dim); }
.ms-r-item.over { background: color-mix(in srgb, var(--warn) 8%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.ms-due-pill { font-size: var(--z-t3); font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); border-radius:6px; padding: 3px 10px; }

/* Mes comptes & mots de passe, outil de test (k-anonymat) */
.cp-tool { border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); }
.cp-pw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }
.cp-pw-row .input { flex: 1; min-width: 200px; }
.cp-pw-out { border-radius:6px; padding: 11px 13px; font-size: var(--z-t3); line-height: 1.5; margin-top: 4px; border: 1px solid var(--border); }
.cp-pw-out.ds-crit { background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 34%, transparent); }
.cp-pw-out.ds-mid { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.cp-pw-out.ds-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.cp-note { font-size: var(--z-t3); color: var(--text-dim); margin: 6px 0 0; }

/* Agent d'analyse (forensic), côté web */
.fx-code-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fx-code { font-size: 34px; font-weight: 700; letter-spacing: .18em; color: var(--accent);
  background: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 30%, transparent);
  border-radius:6px; padding: 8px 20px; font-variant-numeric: tabular-nums; }
.fx-code.expired { opacity: .45; text-decoration: line-through; }
.fx-code-info { font-size: var(--z-t3); color: var(--text-dim); flex: 1; min-width: 220px; }
.fx-items { display: flex; flex-direction: column; gap: 8px; }
.fx-item { text-align: left; border: 1px solid var(--border); border-radius:6px; padding: 11px 14px;
  background: var(--bg-card); cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s ease, transform .12s ease; }
.fx-item:hover { border-color: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 35%, var(--border)); transform: translateY(-1px); }
.fx-item-h { font-weight: 700; }
.fx-item-m { font-size: var(--z-t3); color: var(--text-dim); }
.fx-detail-card { margin-top: 14px; border: 1px solid var(--border); border-radius:6px; padding: 16px; background: var(--bg-soft); }
.fx-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.fx-detail-head h4 { margin: 0; }
.fx-ai { margin-top: 12px; }
.fx-report { margin-top: 6px; }

/* Bouton d'auto-remplissage IA (mini) */
.ai-mini { background: color-mix(in srgb, var(--violet) 16%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent); color: var(--text); border-radius:6px; padding: 5px 9px; cursor: pointer; font-size: var(--z-t3); margin-right: 4px; transition: background .15s ease, transform .12s ease; }
.ai-mini:hover { background: color-mix(in srgb, var(--violet) 28%, transparent); transform: translateY(-1px); }
.ai-mini[data-busy] { opacity: .55; cursor: progress; }

/* Personnalisation (logo client) */
.brd-preview { display: flex; align-items: center; justify-content: center; background: var(--z-c-blanc); border: 1px solid var(--border); border-radius:6px; padding: 22px; margin-bottom: 14px; min-height: 96px; }
.brd-preview img { max-height: 90px; max-width: 100%; width: auto; object-fit: contain; }
.brd-empty { background: var(--surface-2, rgba(82,98,119,.08)); border: 1px dashed var(--border); border-radius:6px; padding: 22px; margin-bottom: 14px; text-align: center; color: var(--text-dim); font-size: var(--z-t3); }
.brd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brd-upload { cursor: pointer; }
.brd-note { margin: 12px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
/* Nom d'organisation en lecture seule (miroir du serveur) dans la Personnalisation. */
.brd-orgname { font-size: var(--z-t3); font-weight: 700; color: var(--text); padding: 9px 12px;
  background: var(--bg-soft, color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid var(--border); border-radius:6px; }
.brd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .brd-grid { grid-template-columns: 1fr; } }
.brd-grid input.input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: var(--z-t3); }
.brd-grid input.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 18%, transparent); }
.brd-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.brd-swatch { width: 34px; height: 34px; border-radius:6px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; padding: 0; position: relative; transition: transform .1s ease; }
.brd-swatch:hover { transform: scale(1.08); }
.brd-swatch.on { box-shadow: 0 0 0 2px var(--bg-card) inset, 0 0 0 2px var(--accent); }
.brd-swatch.brd-custom { display: grid; place-items: center; overflow: hidden; }
.brd-custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.brd-custom .gi-pen { color: var(--z-c-blanc); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); pointer-events: none; }
.brd-foot { margin-top: 16px; }
/* Co-branding dans l'en-tête de l'app */
.client-brand { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; min-width: 0; }
.client-brand .cb-x { width: 1px; height: 24px; background: var(--border); flex: none; }
.client-brand .cb-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.client-brand .cb-name { font-weight: 700; font-size: var(--z-t3); color: var(--text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .client-brand .cb-name { display: none; } .client-brand .cb-logo { height: 22px; max-width: 96px; } }
/* Nom de l'organisation dans les documents exportés */
.rd-client-name { font-weight: 700; font-size: var(--z-t4); color: var(--brand-blue); letter-spacing: .02em; }
/* Horloge réglementaire (compte à rebours 72 h CNIL) */
.v72 { font-family: var(--mono); font-size: var(--z-t3); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.v72 [class^="gi-"] { width: .95em; height: .95em; margin-right: 0; }
/* Journal d'audit : voir le bloc « enrichi » plus bas (.aud-bar/.aud-seg…). */
/* Registre de preuves (conformité) */
.cf-ev { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; position: relative; }
.cf-ev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--z-t3); background: color-mix(in srgb, var(--brand-blue) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--brand-blue) 22%, var(--border)); color: var(--text); border-radius:6px; padding: 3px 5px 3px 9px; }
.cf-ev-chip [class^="gi-"] { width: 13px; height: 13px; color: var(--accent); margin: 0; }
.cf-ev-x { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: var(--z-t3); line-height: 1; padding: 0 3px; }
.cf-ev-x:hover { color: var(--crit); }
.cf-ev-add { display: inline-flex; align-items: center; gap: 4px; font-size: var(--z-t3); font-weight: 600; color: var(--accent); background: none; border: 1px dashed var(--border); border-radius:6px; padding: 4px 10px; cursor: pointer; }
.cf-ev-add:hover { border-color: var(--accent); background: var(--bg-soft); }
.cf-ev-add [class^="gi-"] { width: 13px; height: 13px; margin: 0; }
.cf-ev-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(430px, 92vw); background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; box-shadow: var(--shadow); padding: 12px 14px; }
.cf-ev-pop-h { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 6px; }
.cf-ev-pop-h:first-child { margin-top: 0; }
.cf-ev-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow: auto; }
.cf-ev-pick { display: flex; align-items: center; gap: 7px; text-align: left; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; cursor: pointer; font-size: var(--z-t3); color: var(--text); }
.cf-ev-pick:hover { border-color: var(--accent); }
.cf-ev-pick [class^="gi-"] { width: 14px; height: 14px; color: var(--accent); margin: 0; }
.cf-ev-t { margin-left: auto; font-size: var(--z-t3); color: var(--text-dim); }
.cf-ev-new { display: flex; flex-direction: column; gap: 7px; }
.cf-ev-new .input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: var(--z-t3); }
.cf-ev-new-act { display: flex; gap: 8px; }
.cf-reg-list { display: flex; flex-direction: column; }
.cf-reg-item { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid var(--border-soft); }
.cf-reg-item:first-child { border-top: 0; }
.cf-reg-ic { width: 30px; height: 30px; border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 10%, var(--bg-soft)); color: var(--accent); display: grid; place-items: center; flex: none; }
.cf-reg-ic [class^="gi-"] { width: 16px; height: 16px; margin: 0; }
.cf-reg-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-reg-t { font-weight: 600; font-size: var(--z-t3); }
.cf-reg-m { font-size: var(--z-t3); color: var(--text-dim); }
.cf-reg-cov { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); white-space: nowrap; flex: none; }
/* Mapping relationnel */
.cf-map-tok { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); background: color-mix(in srgb, var(--brand-blue) 7%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue) 18%, var(--border)); border-radius:6px; padding: 1px 6px; margin: 0 4px 2px 0; cursor: pointer; }
.cf-map-tok:hover { background: color-mix(in srgb, var(--brand-blue) 16%, transparent); }
.cf-map-n { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); }
.cf-map-grp { margin-top: 12px; }
.cf-map-grp-h { font-family: var(--mono); font-size: var(--z-t3); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cf-map-item { display: block; width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 8px 11px; margin-bottom: 5px; font-size: var(--z-t3); color: var(--text); cursor: pointer; }
.cf-map-item:hover { border-color: var(--accent); }
.cf-map-item-fw { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); margin-right: 8px; }
/* Palette de commandes / recherche globale (Ctrl+K) */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; color: var(--text-dim); cursor: pointer; font: inherit; font-size: var(--z-t3); }
.cmdk-trigger:hover { border-color: var(--accent); color: var(--text); }
.cmdk-trigger svg { width: 15px; height: 15px; flex: none; }
.cmdk-trigger kbd { font-family: var(--mono); font-size: var(--z-t3); background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 1px 5px; color: var(--text-dim); }
@media (max-width: 720px) { .cmdk-trigger span, .cmdk-trigger kbd { display: none; } .cmdk-trigger { padding: 8px; } }

/* Centre d'alertes (cloche en-tête) */
.bell-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; color: var(--text-dim); cursor: pointer; }
.bell-trigger:hover { border-color: var(--accent); color: var(--text); }
.bell-trigger svg { width: 17px; height: 17px; }
.bell-trigger.has-alerts { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--border)); }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius:6px;
  background: var(--crit); color: var(--z-c-blanc); font: 600 11px/17px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.alrt-panel { position: fixed; z-index: 1200; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; box-shadow: 0 16px 44px rgba(0,140,214,.28); }
.alrt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; position: sticky; top: 0; background: var(--bg-card); }
.alrt-head h4 { margin: 0; font-size: var(--z-t3); }
.alrt-seen { background: none; border: none; color: var(--accent); font-size: var(--z-t3); cursor: pointer; padding: 2px 4px; }
.alrt-seen:hover { text-decoration: underline; }
.alrt-list { list-style: none; margin: 0; padding: 0 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.alrt-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius:6px;
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); }
.alrt-crit { border-left-color: var(--crit); }
.alrt-warn { border-left-color: var(--warn); }
.alrt-info { border-left-color: var(--accent); }
.alrt-new { background: color-mix(in srgb, var(--accent) 7%, var(--bg-soft)); }
.alrt-ic { flex: none; width: 20px; display: grid; place-items: center; padding-top: 1px; }
.alrt-ic i { width: 15px; height: 15px; }
.alrt-crit .alrt-ic i { background: var(--crit); }
.alrt-warn .alrt-ic i { background: var(--warn); }
.alrt-info .alrt-ic i { background: var(--accent); }
.alrt-body { flex: 1; min-width: 0; }
.alrt-t { display: block; font-size: var(--z-t3); line-height: 1.35; }
.alrt-m { display: block; font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
.alrt-go { flex: none; background: none; border: none; color: var(--accent); font-size: var(--z-t3); font-weight: 600; cursor: pointer; padding: 2px 2px; white-space: nowrap; }
.alrt-go:hover { text-decoration: underline; }
.alrt-empty { display: flex; align-items: center; gap: 9px; padding: 14px 10px; font-size: var(--z-t3); color: var(--text-dim); }
.alrt-empty i { width: 17px; height: 17px; background: var(--ok); flex: none; }
.alrt-foot { padding: 8px 14px 12px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.alrt-foot-link { background: none; border: none; color: var(--accent); font-size: var(--z-t3); font-weight: 600; cursor: pointer; padding: 2px 0; }
.alrt-foot-link:hover { text-decoration: underline; }

/* 
   MESSAGERIE d'équipe + commentaires ancrés
 */
.msgr-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.msgr-tab { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 5px 14px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; }
.msgr-tab.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--text); font-weight: 600; }
.msgr-tabn { font-family: var(--mono); font-size: var(--z-t3); background: var(--crit); color: var(--z-c-blanc); border-radius:6px; padding: 0 6px; margin-left: 4px; }
.msgr-compose { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px; margin-bottom: 16px; }
.msgr-compose-top { margin-bottom: 8px; }
.msgr-compose-top .msgr-to, .cmt-d-form .msgr-to { max-width: 320px; }
.msgr-text { width: 100%; resize: vertical; }
.msgr-compose-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.msgr-hint { font-size: var(--z-t3); color: var(--text-dim); }
.msgr-ro { display: flex; align-items: center; gap: 8px; font-size: var(--z-t3); color: var(--text-dim); background: var(--bg-soft); border: 1px dashed var(--border); border-radius:6px; padding: 10px 12px; margin-bottom: 14px; }
.msgr-ro i { width: 15px; height: 15px; background: var(--text-dim); flex: none; }
.msgr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msgr-msg { display: flex; gap: 10px; }
.msgr-msg.mine { flex-direction: row-reverse; }
.msgr-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); color: var(--z-c-blanc); background: linear-gradient(135deg, var(--accent), var(--violet)); }
.msgr-b { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 8px 12px; max-width: 76%; }
.msgr-msg.mine .msgr-b { background: color-mix(in srgb, var(--accent) 9%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.msgr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--z-t3); margin-bottom: 3px; }
.msgr-ts { color: var(--text-dim); font-family: var(--mono); font-size: var(--z-t3); margin-left: auto; }
.msgr-badge { font-family: var(--mono); font-size: var(--z-t3); padding: 1px 7px; border-radius:6px; letter-spacing: .02em; }
.msgr-gen { background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text-dim); }
.msgr-nom { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.msgr-tx { font-size: var(--z-t3); line-height: 1.4; word-wrap: break-word; }
.msgr-at { color: var(--accent); font-weight: 600; }
.msgr-anchor { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: var(--z-t3); color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px 0; }
.msgr-anchor i { width: 13px; height: 13px; background: var(--accent); }
.msgr-anchor:hover { text-decoration: underline; }
.msgr-empty { text-align: center; color: var(--text-dim); font-size: var(--z-t3); padding: 22px 8px; }
.msgr-del { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 2px 4px; margin-left: 4px; opacity: .45; }
.msgr-del:hover { color: var(--crit); opacity: 1; }
.msgr-del i { width: 12px; height: 12px; background: currentColor; }
.msgr-restore { background: none; border: none; cursor: pointer; color: var(--accent); font-size: var(--z-t3); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.msgr-restore i { width: 13px; height: 13px; background: currentColor; }
.msgr-trashed .msgr-b { opacity: .8; border-style: dashed; }
.msgr-delmeta { display: block; font-size: var(--z-t3); color: var(--text-dim); margin-top: 4px; font-style: italic; }
.msgr-tabn-mut { background: var(--text-dim) !important; }

/* Bouton commentaire (posé sur les entités) */
.cmt-btn { position: relative; display: inline-flex; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius:6px; }
.cmt-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cmt-btn i { width: 15px; height: 15px; background: currentColor; }
.cmt-btn.has { color: var(--accent); }
.cmt-n { font-family: var(--mono); font-size: var(--z-t3); font-weight: 600; min-width: 14px; }

/* Volet de discussion ancrée */
.cmt-drawer { position: fixed; top: 0; right: 0; width: min(400px, 92vw); height: 100vh; z-index: 1300; overflow: auto;
  background: var(--bg); border-left: 1px solid var(--border); box-shadow: -14px 0 40px rgba(0,140,214,.24); display: flex; flex-direction: column;
  animation: cmt-in .18s ease; }
@keyframes cmt-in { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cmt-drawer { animation: none; } }
.cmt-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.cmt-d-k { font-family: var(--mono); font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.cmt-d-t { font-size: var(--z-t3); font-weight: 700; margin-top: 2px; }
.cmt-d-x { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; }
.cmt-d-x i { width: 18px; height: 18px; background: currentColor; }
.cmt-d-list { flex: 1; padding: 16px 18px; }
.cmt-d-form { border-top: 1px solid var(--border); padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: var(--bg); }
.cmt-d-form .btn { align-self: flex-end; }
@media (max-width: 640px) { .msgr-b { max-width: 84%; } }

/* 
   RAPPORTS double audience (vue + bascule + rapport dirigeant)
 */
.rpt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.rpt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rpt-card-ic { width: 44px; height: 44px; border-radius:6px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--violet)); margin-bottom: 4px; }
.rpt-card-ic i { width: 22px; height: 22px; background: var(--z-c-blanc); }
.rpt-card h4 { margin: 0; font-size: var(--z-t4); }
.rpt-card p { margin: 0 0 6px; font-size: var(--z-t3); color: var(--text-dim); line-height: 1.45; }

/* Bascule d'audience dans la modale */
.rpt-wrap { width: 100%; max-width: 820px; margin: 0 auto; }
.rpt-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.rpt-seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 3px; }
.rpt-seg-b { background: none; border: none; border-radius:6px; padding: 6px 16px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; }
.rpt-seg-b.on { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,140,214,.12); }

/* Rapport dirigeant */
.rpt-hero-sec { display: flex; gap: 14px; flex-wrap: wrap; }
.rpt-big { flex: 1; min-width: 150px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft))); border: 1px solid var(--border); border-radius:6px; padding: 16px 18px; }
.rpt-big-v { font-size: 30px; font-weight: 700; line-height: 1; }
.rpt-big-v small { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); }
.rpt-big-l { font-size: var(--z-t3); color: var(--text-dim); margin-top: 6px; }
.rpt-trend { font-size: var(--z-t3); background: var(--bg-soft); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius:6px; }
.rpt-prio { margin: 0; padding-left: 0; list-style: none; counter-reset: rp; display: flex; flex-direction: column; gap: 10px; }
.rpt-prio li { counter-increment: rp; position: relative; padding-left: 40px; }
.rpt-prio li::before { content: counter(rp); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); font: 700 13px var(--mono); display: grid; place-items: center; }
.rpt-prio-t { display: block; font-weight: 700; font-size: var(--z-t3); }
.rpt-prio-w { display: block; font-size: var(--z-t3); color: var(--text-dim); margin-top: 1px; }
.rpt-conseils { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.rpt-conseils li { font-size: var(--z-t3); line-height: 1.5; }
@media print { .rpt-switch, .no-print { display: none !important; } }

/* 
   GOUVERNANCE : domaines de privilèges (équipe) + journal d'audit enrichi
 */
.tm-row-wrap { border: 1px solid var(--border-soft); border-radius:6px; margin-bottom: 8px; overflow: hidden; }
.tm-row-wrap .tm-row { margin: 0; border: none; border-radius:6px; }
.tm-scopes { padding: 10px 14px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-soft)); border-top: 1px dashed var(--border); }
.tm-scopes-l { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); }
.tm-scopes-l i { width: 14px; height: 14px; background: var(--text-dim); }
.tm-scope-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); margin-left: 12px; cursor: pointer; }
.tm-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tm-scope-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--z-t3); padding: 4px 10px; border-radius:6px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; }
.tm-scope-chip i { width: 13px; height: 13px; background: var(--text-dim); }
.tm-scope-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.tm-scope-chip.on i { background: var(--accent); }
.tm-scope-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tm-scope-chip.tm-scope-off { opacity: .5; cursor: not-allowed; }
.tm-scopes-h { margin: 8px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.tm-scopes-ro { background: var(--bg-soft); }

.aud-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.aud-seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 3px; }
.aud-seg-b { background: none; border: none; border-radius:6px; padding: 6px 14px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; }
.aud-seg-b.on { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,140,214,.12); }
.aud-filter { display: inline-flex; align-items: center; gap: 6px; }
.aud-filter i { width: 14px; height: 14px; background: var(--text-dim); }
.aud-filter select { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 6px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.aud-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aud-item { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 9px 12px; }
.aud-item.aud-arch { opacity: .72; border-style: dashed; }
.aud-ic { flex: none; width: 24px; height: 24px; border-radius:6px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.aud-ic i { width: 14px; height: 14px; background: var(--accent); }
.aud-body { flex: 1; min-width: 0; }
.aud-head { display: block; font-size: var(--z-t3); }
.aud-det { display: block; font-size: var(--z-t3); color: var(--text-dim); margin-top: 1px; }
.aud-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.aud-who { display: inline-flex; align-items: center; gap: 4px; font-size: var(--z-t3); font-weight: 600; }
.aud-who i { width: 12px; height: 12px; background: currentColor; }
.aud-when { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .aud-meta { align-items: flex-start; } .aud-item { flex-wrap: wrap; } .aud-meta { width: 100%; flex-direction: row; justify-content: space-between; margin-top: 4px; } }

/* 
   GESTION DE CRISE (cellule / war-room)
 */
.btn-danger { background: var(--crit); color: var(--z-c-blanc); border: 1px solid var(--crit); }
.btn-danger:hover { background: color-mix(in srgb, var(--crit) 88%, var(--z-c-marine)); }
.nav-tab-crise i { background: var(--crit) !important; }
.crise-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--z-c-blanc); box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: crise-pulse 1.6s infinite; }
@keyframes crise-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .crise-dot { animation: none; } }

/* Bannière persistante */
.crise-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, var(--crit), color-mix(in srgb, var(--crit) 70%, var(--violet))); color: var(--z-c-blanc); padding: 9px 18px; font-size: var(--z-t3); box-shadow: 0 -4px 20px rgba(0,140,214,.25); }
.crise-banner b { letter-spacing: .04em; }
.crise-b-clock { font-family: var(--mono); font-weight: 700; background: rgba(0,0,0,.2); padding: 2px 8px; border-radius:6px; margin-left: 4px; }
.crise-b-go { margin-left: auto; background: var(--z-c-blanc); color: var(--crit); border: none; border-radius:6px; padding: 5px 12px; font-weight: 700; font-size: var(--z-t3); cursor: pointer; }
body.crise-on .app-main, body.crise-on .app-shell { padding-bottom: 52px; }

/* Héros */
.crise-hero { border: 1px solid var(--border); border-radius:6px; padding: 20px 22px; margin-bottom: 16px; }
.crise-off { display: flex; gap: 18px; align-items: flex-start; background: var(--bg-soft); }
.crise-hero-ic { flex: none; width: 48px; height: 48px; border-radius:6px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); }
.crise-hero-ic i { width: 24px; height: 24px; background: var(--ok); }
.crise-hero-b h3 { margin: 0 0 4px; }
.crise-hero-b p { margin: 0 0 12px; font-size: var(--z-t3); color: var(--text-dim); max-width: 70ch; }
.crise-declare { display: flex; gap: 8px; flex-wrap: wrap; }
.crise-declare select, .crise-declare input { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.crise-declare input { flex: 1; min-width: 220px; }
.crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--crit) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 10%, var(--bg-soft))); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); }
.crise-lvl-r-high.crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--high) 14%, var(--bg-soft)), var(--bg-soft)); }
.crise-lvl-r-mid.crise-live { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 12%, var(--bg-soft)), var(--bg-soft)); }
.crise-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.crise-live-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--crit); color: var(--z-c-blanc); font-weight: 700; font-size: var(--z-t3); letter-spacing: .04em; padding: 5px 12px; border-radius:6px; margin-right: auto; }
.crise-title-in, .crise-sys-in { display: block; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 9px 12px; color: var(--text); font: inherit; margin-bottom: 8px; }
.crise-title-in { font-size: var(--z-t4); font-weight: 700; }
.crise-sys-in { font-size: var(--z-t3); }

/* Horloges */
.crise-clocks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.crise-clock { flex: 1; min-width: 180px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 10px 14px; }
.crise-clock.r-crit { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); }
.crise-clock-l { font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.crise-clock-v { font-family: var(--mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

.crise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.crise-col { min-width: 0; }
@media (max-width: 900px) { .crise-grid { grid-template-columns: 1fr; } }

/* Contexte siphonné */
.crise-ctx { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.crise-ctx-c { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius:6px; padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; }
.crise-ctx-c:hover { border-color: var(--accent); }
.crise-ctx-c.r-crit { border-left-color: var(--crit); }
.crise-ctx-c.r-mid { border-left-color: var(--warn); }
.crise-ctx-h { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.crise-ctx-h i { width: 14px; height: 14px; background: currentColor; }
.crise-ctx-b { font-size: var(--z-t3); }
.crise-ctx-go { font-size: var(--z-t3); color: var(--accent); font-weight: 600; }

/* Rôles */
.crise-roles { display: flex; flex-direction: column; gap: 8px; }
.crise-role { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.crise-role-l { display: inline-flex; align-items: center; gap: 7px; font-size: var(--z-t3); }
.crise-role-l i { width: 15px; height: 15px; background: var(--accent); }
.crise-role select { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 6px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); min-width: 160px; }

/* Réflexes */
.crise-reflex { display: flex; flex-direction: column; gap: 6px; }
.crise-rx { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius:6px; background: var(--bg-card); cursor: pointer; }
.crise-rx input { margin-top: 2px; flex: none; }
.crise-rx-t { flex: 1; font-size: var(--z-t3); }
.crise-rx.done { background: color-mix(in srgb, var(--ok) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
.crise-rx.done .crise-rx-t { color: var(--text-dim); }
.crise-rx-m { flex: none; font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); }

/* Main courante */
.crise-add { display: flex; gap: 8px; margin-bottom: 10px; }
.crise-add input { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 12px; color: var(--text); font: inherit; }
.crise-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow: auto; }
.crise-log-i { display: flex; gap: 10px; padding: 7px 10px; border-radius:6px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); }
.crise-k-phase { border-left-color: var(--accent); }
.crise-k-reflex { border-left-color: var(--ok); }
.crise-log-t { flex: none; font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); width: 118px; }
.crise-log-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crise-log-x { font-size: var(--z-t3); }
.crise-log-w { font-size: var(--z-t3); color: var(--text-dim); }
.crise-empty { color: var(--text-dim); font-size: var(--z-t3); padding: 10px; }

/* Contacts + liens */
.crise-contacts { display: flex; flex-direction: column; gap: 8px; }
.crise-ct { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.crise-ct-l { font-size: var(--z-t3); }
.crise-ct-v { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); }
.crise-ct input { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 6px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); min-width: 180px; }
.crise-links { display: flex; flex-wrap: wrap; gap: 8px; }
.crise-link { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 7px 14px; font-size: var(--z-t3); color: var(--text); cursor: pointer; }
.crise-link:hover { border-color: var(--accent); color: var(--accent); }
.crise-link i { width: 14px; height: 14px; background: currentColor; }

/* Communication de crise */
.crise-comm-sel { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 6px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.crise-comm-tx { width: 100%; resize: vertical; font-size: var(--z-t3); line-height: 1.5; white-space: pre-wrap; }
.crise-comm-act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Registre des crises */
.crise-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crise-hist-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; }
.crise-hist-b { flex: 1; min-width: 0; }
.crise-hist-t { display: block; font-size: var(--z-t3); font-weight: 600; }
.crise-hist-m { display: block; font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }

/* Palier 1 : poste de commandement (gravité, cellule, plan d'action, SITREP, sortie) */
/* Moteur de gravité (scoring NIST) */
.crise-sev { margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px 14px; }
.crise-sev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 600; font-size: var(--z-t3); }
.crise-sev-h > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.crise-sev-h i { width: 15px; height: 15px; background: var(--crit); }
.crise-sev-hint { font-weight: 400; font-size: var(--z-t3); color: var(--text-dim); }
.crise-sev-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.crise-sev-ax { display: flex; flex-direction: column; gap: 4px; }
.crise-sev-axl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; }
.crise-sev-axl i { width: 13px; height: 13px; background: var(--accent); }
.crise-sev-ax select { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 7px 9px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.crise-declare-btn { margin-top: 14px; }
.crise-sev-tag { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border-soft); padding: 3px 8px; border-radius:6px; }
.crise-hero-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Réévaluation de la gravité */
.crise-reeval { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border)); border-radius:6px; padding: 12px 14px; margin: 4px 0 12px; }
.crise-reeval .crise-sev-axes { margin-bottom: 10px; }

/* Cellule à deux niveaux + RACI + suppléants */
.crise-cellgrp { margin-top: 12px; }
.crise-cellgrp:first-child { margin-top: 0; }
.crise-cellgrp-h { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--z-t3); margin-bottom: 4px; }
.crise-cellgrp-h i { width: 15px; height: 15px; background: var(--accent); }
.crise-role2 { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 10px 12px; margin-bottom: 8px; }
.crise-role2-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crise-role2-d { margin: 3px 0 8px; font-size: var(--z-t3); color: var(--text-dim); }
.crise-role2-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crise-role2-sel label { display: flex; flex-direction: column; gap: 3px; font-size: var(--z-t3); color: var(--text-dim); }
.crise-role2-sel select { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 6px 9px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.crise-role2-ct { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); }
.crise-role2-ct i { width: 12px; height: 12px; background: currentColor; }
.crise-raci { flex: none; font-size: var(--z-t3); font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius:6px; white-space: nowrap; }
.crise-raci-A { color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); }
.crise-raci-R { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.crise-raci-C { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.crise-raci-I { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 15%, transparent); }
@media (max-width: 520px) { .crise-role2-sel { grid-template-columns: 1fr; } }

/* Plan d'action (tâches assignées) */
.crise-task-add { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; margin-bottom: 10px; }
.crise-task-add input, .crise-task-add select { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
@media (max-width: 720px) { .crise-task-add { grid-template-columns: 1fr 1fr; } }
.crise-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crise-task { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); border-radius:6px; }
.crise-task-doing { border-left-color: var(--accent); }
.crise-task-done { border-left-color: var(--ok); }
.crise-task-late { border-left-color: var(--crit); }
.crise-task-st { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); cursor: pointer; font-size: var(--z-t3); line-height: 1; }
.crise-task-done .crise-task-st { background: var(--ok); color: var(--z-c-blanc); border-color: var(--ok); }
.crise-task-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crise-task-x { font-size: var(--z-t3); }
.crise-task-done .crise-task-x { text-decoration: line-through; color: var(--text-dim); }
.crise-task-m { font-size: var(--z-t3); color: var(--text-dim); margin-top: 2px; }
.crise-task-cat { font-weight: 700; color: var(--accent); }
.crise-task-late .crise-task-due { color: var(--crit); font-weight: 700; }
.crise-task-del { flex: none; background: none; border: none; color: var(--text-dim); font-size: var(--z-t4); line-height: 1; cursor: pointer; padding: 0 2px; }
.crise-task-del:hover { color: var(--crit); }

/* SITREP */
.crise-sitrep-tx { width: 100%; resize: vertical; font-size: var(--z-t3); line-height: 1.5; white-space: pre-wrap; font-family: var(--mono); }

/* Réflexes spécifiques au type + tags */
.crise-rx-tag { display: inline-block; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 1px 5px; border-radius:6px; vertical-align: middle; }
.crise-rx-crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 14%, transparent); }
.crise-rx-spec { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

/* Sortie de crise (stand-down) */
.crise-standdown { border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); }

/* Chronologie technique (kill-chain) dans la cellule */
.crise-kc { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crise-kc-i { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; }
.crise-kc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; }
.crise-kc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crise-kc-t { font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); }
.crise-kc-x { font-size: var(--z-t3); }

/* Échelle d'escalade (suivi de situation) */
.crise-ladder { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.crise-rung { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; cursor: pointer; color: var(--text-dim); }
.crise-rung:hover { border-color: var(--accent); }
.crise-rung-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700; background: var(--bg-soft); border: 1px solid var(--border); }
.crise-rung-l { font-size: var(--z-t3); font-weight: 600; text-align: center; line-height: 1.15; }
.crise-rung.past { color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.crise-rung.past .crise-rung-n { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: transparent; }
.crise-rung.on { color: var(--text); border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.crise-rung.on .crise-rung-n { background: var(--warn); color: var(--z-c-blanc); border-color: var(--warn); }
.crise-rung-crise.on { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.crise-rung-crise.on .crise-rung-n { background: var(--crit); border-color: var(--crit); }
.crise-matrix { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px 14px; margin-bottom: 8px; }
.crise-matrix-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.crise-matrix-lvl { font-weight: 700; font-size: var(--z-t3); }
.crise-matrix-h > span:last-child { font-size: var(--z-t3); color: var(--text-dim); }
.crise-matrix-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.crise-matrix-g > div { font-size: var(--z-t3); }
.crise-matrix-k { display: block; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); font-weight: 700; margin-bottom: 2px; }
.crise-matrix-veille { font-size: var(--z-t3); color: var(--text-dim); margin: 6px 0 12px; }
.crise-declare-wrap { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.crise-declare-wrap h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: var(--z-t3); }
.crise-declare-wrap h4 i { width: 15px; height: 15px; background: var(--crit); }
.crise-sitlog { margin-top: 14px; }
.crise-sitlog-h { font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); font-weight: 700; }
.crise-sitlog ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.crise-sitlog li { font-size: var(--z-t3); color: var(--text); }
.crise-sitlog li span { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); margin-right: 6px; }
.crise-sitlog li em { color: var(--text-dim); font-style: normal; font-size: var(--z-t3); margin-left: 4px; }

/* Horloges réglementaires + profil */
.crise-clock-go { margin-top: 6px; background: none; border: none; color: var(--accent); font-size: var(--z-t3); font-weight: 600; cursor: pointer; padding: 0; }
.crise-clock.r-high { border-color: color-mix(in srgb, var(--high) 55%, var(--border)); }
.crise-regprof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.crise-regprof-l { font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; }
.crise-regchip { font-size: var(--z-t3); padding: 4px 12px; border-radius:6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); cursor: pointer; }
.crise-regchip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.crise-regnote { font-size: var(--z-t3); color: var(--text-dim); margin: 4px 0 0; width: 100%; }

/* Registre des décisions */
.crise-dec-add { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; margin-bottom: 10px; }
.crise-dec-add input, .crise-dec-add select { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
@media (max-width: 720px) { .crise-dec-add { grid-template-columns: 1fr 1fr; } }
.crise-decs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crise-dec { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--violet); border-radius:6px; }
.crise-dec-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crise-dec-x { font-size: var(--z-t3); font-weight: 600; }
.crise-dec-r { font-size: var(--z-t3); color: var(--text-dim); }
.crise-dec-r b { color: var(--text); font-weight: 600; }
.crise-dec-m { font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); }
.crise-k-decision { border-left-color: var(--violet); }

/* Horloge réglementaire non pertinente */
.crise-clock-off { opacity: .75; }
.crise-clock-off .crise-clock-v { font-size: var(--z-t3); font-family: inherit; color: var(--text-dim); font-weight: 600; }

/* Badge « prêt à clôturer » + RACI dans le rapport */
.eb-badge.r-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.rd-raci { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); border-radius:6px; padding: 0 4px; margin-left: 4px; }

/* 
   MODE EXERCICE (entraînement de la cellule : marqué EXERCICE, isolé du réel)
   Couleur d'accent VIOLET pour ne JAMAIS confondre avec une vraie crise (rouge).
 */
/* Bannière + héro en mode exercice */
.crise-banner.crise-ex { background: linear-gradient(90deg, var(--violet), color-mix(in srgb, var(--violet) 60%, var(--accent))); }
.crise-banner.crise-ex .crise-b-go { color: var(--violet); }
.crise-live-badge.crise-ex-badge { background: var(--violet); }
.crise-live-ex { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 16%, var(--bg-soft)), color-mix(in srgb, var(--accent) 8%, var(--bg-soft))) !important; border-color: color-mix(in srgb, var(--violet) 42%, var(--border)) !important; }
.crise-ex-badge-sm { display: inline-block; background: var(--violet); color: var(--z-c-blanc); font-size: var(--z-t3); font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius:6px; vertical-align: middle; }

/* Injects (cellule d'exercice + créateur) */
.crise-k-inject { border-left-color: var(--violet); }
.crise-inject-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crise-inject { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--violet); border-radius:6px; }
.crise-inject.done { opacity: .6; border-left-color: var(--text-dim); }
.crise-inject-t { flex: none; font-family: var(--mono); font-size: var(--z-t3); font-weight: 700; color: var(--violet); min-width: 50px; padding-top: 1px; }
.crise-inject.done .crise-inject-t { color: var(--text-dim); }
.crise-inject-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crise-inject-cat { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.crise-inject-x { font-size: var(--z-t3); line-height: 1.45; }
.crise-inject-go { flex: none; }
.crise-inject-done { flex: none; align-self: center; font-size: var(--z-t3); font-weight: 700; color: var(--ok); }

/* Section « Entraîner la cellule » (hors crise) */
.crise-ex-off { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.crise-ex-off-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.crise-ex-off-h h4 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--z-t3); }
.crise-ex-off-h h4 i { width: 15px; height: 15px; background: var(--violet); }
.crise-ex-tag { font-size: var(--z-t3); font-weight: 600; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); padding: 2px 9px; border-radius:6px; }
.crise-ex-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crise-ex-row select { flex: 1; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }

/* Créateur de scénario (assisté IA) */
.crise-ex-builder { margin-top: 12px; background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); border-radius:6px; padding: 12px 14px; }
.crise-ex-builder-h h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: var(--z-t3); }
.crise-ex-builder-h h5 i { width: 14px; height: 14px; background: var(--violet); }
.crise-ex-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crise-ex-f { display: flex; flex-direction: column; gap: 3px; font-size: var(--z-t3); color: var(--text-dim); }
.crise-ex-f-wide { grid-column: 1 / -1; }
.crise-ex-f input, .crise-ex-f select { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
@media (max-width: 560px) { .crise-ex-fields { grid-template-columns: 1fr; } }
.crise-ex-inj { margin-top: 12px; }
.crise-ex-inj-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: var(--z-t3); font-weight: 700; }
.crise-ex-inj-add { display: grid; grid-template-columns: 92px auto 1fr auto; gap: 8px; margin-top: 8px; }
.crise-ex-inj-add input, .crise-ex-inj-add select { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 7px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
@media (max-width: 620px) { .crise-ex-inj-add { grid-template-columns: 1fr 1fr; } }

/* Méthodologie (bloc repliable) */
.crise-methode { margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; }
.crise-methode > summary { cursor: pointer; padding: 10px 14px; font-size: var(--z-t3); font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.crise-methode > summary::-webkit-details-marker { display: none; }
.crise-methode > summary i { width: 15px; height: 15px; background: var(--violet); }
.crise-methode[open] > summary { border-bottom: 1px solid var(--border-soft); }
.crise-methode-b { padding: 4px 16px 14px; }
.crise-methode-b h5 { margin: 12px 0 6px; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; color: var(--violet); }
.crise-methode-l, .crise-methode-src { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.crise-methode-l li, .crise-methode-src li { font-size: var(--z-t3); color: var(--text-dim); line-height: 1.5; }
.crise-methode-l li b { color: var(--text); }

/* Registre des exercices */
.crise-ex-hist-i { border-left: 3px solid var(--violet); }

/* Rapport : débrief + grille de maturité (réservés à l'exercice) */
.report-doc .rd-class-ex { color: var(--z-c-marine); border-color: var(--z-c-marine); }
.report-doc .rd-ex-banner { background: #eaf7fc; border: 1px solid #eaf7fc; color: var(--z-c-marine); border-radius:6px; padding: 10px 14px; margin: 0 0 18px; font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); line-height: 1.5; }
.report-doc .rd-ex-banner b { letter-spacing: .06em; }
.report-doc .rd-debrief { list-style: none; margin: 6px 0 10px; padding: 0; }
.report-doc .rd-debrief li { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); margin: 7px 0; display: flex; gap: 8px; align-items: flex-start; }
.report-doc .rd-chk { flex: none; font-size: var(--z-t3); line-height: 1.15; color: var(--z-c-marine); }
.report-doc table.rd-mat .rd-mat-lvl { font-size: var(--z-t3); text-align: center; white-space: nowrap; }
.report-doc table.rd-mat .rd-mat-c { text-align: center; color: var(--z-c-gris-3); font-size: var(--z-t4); }
.report-doc table.rd-mat .rd-mat-ind { font-size: var(--z-t3); color: var(--z-c-marine); }

/* Catalogue d'intégrations (connecteurs) */
.intg-intro p { margin: 0 0 14px; color: var(--text-dim); font-size: var(--z-t3); line-height: 1.55; max-width: 84ch; }
.intg-intro b { color: var(--text); }
.intg-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.intg-search { position: relative; flex: 1; min-width: 200px; }
.intg-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: var(--text-dim); }
.intg-search input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 12px 8px 32px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.intg-filters select { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.intg-only { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; }
.intg-kpi { font-size: var(--z-t3); color: var(--text-dim); margin-left: auto; }
.intg-kpi b { color: var(--accent); }
.intg-cat { margin-bottom: 18px; }
.intg-cat-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--z-t3); margin-bottom: 10px; }
.intg-cat-h i { width: 16px; height: 16px; background: var(--accent); }
.intg-cat-n { font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); background: var(--bg-soft); border-radius:6px; padding: 1px 8px; }
.intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.intg-card { display: flex; flex-direction: column; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 13px 14px; }
.intg-card.intg-used { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--ok); }
.intg-card-h { display: flex; align-items: center; gap: 10px; }
.intg-logo { flex: none; width: 34px; height: 34px; border-radius:6px; display: grid; place-items: center; font-weight: 700; font-size: var(--z-t3); color: var(--z-c-blanc); background: hsl(var(--h, 210), 55%, 46%); }
.intg-logo-lg { width: 44px; height: 44px; font-size: var(--z-t4); border-radius:6px; }
.intg-card-t { flex: 1; min-width: 0; }
.intg-name { display: block; font-weight: 700; font-size: var(--z-t3); }
.intg-flag { font-size: var(--z-t3); }
.intg-cat-l { display: block; font-size: var(--z-t3); color: var(--text-dim); }
.intg-tier { flex: none; font-size: var(--z-t3); font-weight: 700; padding: 2px 8px; border-radius:6px; }
.intg-t-pro { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.intg-t-biz { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.intg-t-ent { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.intg-desc { margin: 0; font-size: var(--z-t3); color: var(--text-dim); line-height: 1.45; flex: 1; }
.intg-card-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intg-auth { font-size: var(--z-t3); font-weight: 700; padding: 2px 8px; border-radius:6px; cursor: help; }
.intg-a-key { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.intg-a-oauth { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.intg-a-pub { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
.intg-acts { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.intg-use { font-size: var(--z-t3); border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); border-radius:6px; padding: 4px 10px; cursor: pointer; }
.intg-use.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.intg-use:disabled { opacity: .5; cursor: not-allowed; }
.intg-standards { margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.intg-std-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.intg-std { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 10px 12px; }
.intg-std b { display: block; font-size: var(--z-t3); }
.intg-std span { font-size: var(--z-t3); color: var(--text-dim); }
.intg-note { margin: 16px 0 0; font-size: var(--z-t3); color: var(--text-dim); display: flex; align-items: flex-start; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius:6px; padding: 10px 12px; }
.intg-note i { flex: none; width: 15px; height: 15px; background: var(--accent); margin-top: 1px; }
.intg-note b { color: var(--text); }
.intg-modal { position: fixed; inset: 0; z-index: 1400; background: rgba(0,17,46,.55); display: grid; place-items: center; padding: 20px; }
.intg-modal[hidden] { display: none; }
.intg-modal-card { width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 20px 22px; }
.intg-modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.intg-modal-h h3 { margin: 0; font-size: var(--z-t4); }
.intg-modal-x { margin-left: auto; background: none; border: none; font-size: 24px; line-height: 1; color: var(--text-dim); cursor: pointer; }
.intg-modal-auth { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 10px 12px; margin: 8px 0; }
.intg-modal-auth p { margin: 0; font-size: var(--z-t3); color: var(--text-dim); }
.intg-modal-steps h4 { margin: 12px 0 6px; font-size: var(--z-t3); }
.intg-modal-steps ol { margin: 0; padding-left: 18px; font-size: var(--z-t3); color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; }
.intg-soon { font-size: var(--z-t3); font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 1px 6px; border-radius:6px; margin-left: 4px; }
.intg-modal-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.intg-modal-note { margin: 12px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.intg-iocs { margin-top: 14px; max-height: 260px; overflow: auto; }
.intg-iocs-h { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.intg-ioc { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--z-t3); }
.intg-ioc-t { flex: none; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; color: var(--accent); min-width: 52px; }
.intg-ioc-v { font-family: var(--mono); word-break: break-all; }
.intg-ioc-ids { flex: none; margin-left: auto; font-size: var(--z-t3); font-weight: 700; letter-spacing: .04em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius:6px; padding: 0 6px; }
.intg-golib { margin-left: 10px; border: 0; background: transparent; color: var(--accent); font-weight: 700; font-size: var(--z-t3); cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; }
.intg-golib:hover { text-decoration: underline; }
.intg-connbadge { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 20%, transparent); }
.intg-connbadge i { width: 12px; height: 12px; background: var(--ok); }
.intg-card.intg-conn { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.intg-connected { display: flex; align-items: center; gap: 7px; font-size: var(--z-t3); font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius:6px; padding: 8px 12px; margin: 8px 0; }
.intg-connected i { flex: none; width: 14px; height: 14px; background: var(--ok); }
.intg-form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.intg-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--z-t3); font-weight: 600; color: var(--text); }
.intg-form input { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.intg-opt { font-weight: 400; font-size: var(--z-t3); color: var(--text-dim); }
.intg-form-sec { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.intg-form-sec i { flex: none; width: 13px; height: 13px; background: var(--ok); }
.intg-form-sec b { color: var(--text); }
.intg-form label.intg-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.intg-form label.intg-check input[type="checkbox"] { width: auto; flex: none; padding: 0; background: none; }

/* 
   ESPACE DIRIGEANT (COMEX) : lecture claire, gros chiffres
 */
.dg-intro { margin-bottom: 16px; }
.dg-intro p { margin: 0; color: var(--text-dim); font-size: var(--z-t3); max-width: 74ch; line-height: 1.55; }
.dg-lead strong { color: var(--text); }
.dg-crise { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 65%, var(--violet))); color: var(--z-c-blanc); border: none; border-radius:6px; padding: 16px 20px; }
.dg-crise-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--z-t3); letter-spacing: .04em; }
.dg-crise-t { font-size: var(--z-t4); font-weight: 700; }
.dg-crise-m { font-size: var(--z-t3); opacity: .9; }
.dg-crise-ex { background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, var(--z-c-marine))) !important; }   /* exercice = violet, jamais rouge */

.dg-hero { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft)));
  border: 1px solid var(--border); border-radius:6px; padding: 24px 28px; margin-bottom: 14px; flex-wrap: wrap; }
.dg-ring { --p: 0; flex: none; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--rc, var(--accent)) calc(var(--p) * 1%), color-mix(in srgb, var(--text-dim) 18%, transparent) 0); }
.dg-ring.r-low { --rc: var(--ok); } .dg-ring.r-mid { --rc: var(--warn); } .dg-ring.r-high { --rc: var(--high); } .dg-ring.r-crit { --rc: var(--crit); } .dg-ring.r-idle { --rc: var(--text-dim); }
.dg-ring-c { width: 104px; height: 104px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; text-align: center; }
.dg-ring-v { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dg-ring-v small { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); }
.dg-ring-l { font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-top: 3px; }
.dg-hero-b { flex: 1; min-width: 240px; }
.dg-level { display: inline-block; font-weight: 700; font-size: var(--z-t4); padding: 3px 12px; border-radius:6px; margin-bottom: 8px; }
.dg-level.r-low { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.dg-level.r-mid { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.dg-level.r-high { background: color-mix(in srgb, var(--high) 15%, transparent); color: var(--high); }
.dg-level.r-crit { background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); }
.dg-verdict { margin: 0; font-size: var(--z-t4); line-height: 1.5; }
.dg-trend { margin: 8px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.dg-reg { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--crit) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border)); border-radius:6px; padding: 12px 16px; margin-bottom: 14px; font-size: var(--z-t3); }
.dg-reg i { width: 17px; height: 17px; background: var(--crit); flex: none; }
.dg-reg span { flex: 1; }
.dg-reg-go { background: none; border: none; color: var(--crit); font-weight: 700; font-size: var(--z-t3); cursor: pointer; }
.dg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.dg-kpi { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 18px 20px; }
.dg-kpi:hover { border-color: var(--accent); }
.dg-kpi-v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-kpi-l { font-size: var(--z-t3); color: var(--text-dim); margin-top: 4px; }
.dg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.dg-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 18px 20px; height: 100%; }
.dg-block h3 { margin: 0 0 12px; font-size: var(--z-t4); }
.dg-muted { color: var(--text-dim); font-size: var(--z-t3); }
.dg-prio { margin: 0; padding: 0; list-style: none; counter-reset: dp; display: flex; flex-direction: column; gap: 12px; }
.dg-prio li { counter-increment: dp; position: relative; padding-left: 38px; }
.dg-prio li::before { content: counter(dp); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); font: 700 13px var(--mono); display: grid; place-items: center; }
.dg-prio-t { display: block; font-weight: 700; font-size: var(--z-t3); }
.dg-prio-w { display: block; font-size: var(--z-t3); color: var(--text-dim); margin-top: 1px; }
.dg-conseils { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.dg-conseils li { font-size: var(--z-t3); line-height: 1.5; }
.dg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 820px) { .dg-kpis { grid-template-columns: 1fr; } .dg-cols { grid-template-columns: 1fr; } }

/* 
   POSTE ANALYSTE (console opérationnelle)
 */
.an-crise { display: inline-flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--crit), color-mix(in srgb, var(--crit) 70%, var(--violet))); color: var(--z-c-blanc); border: none; border-radius:6px; padding: 12px 16px; font-size: var(--z-t3); }
.an-ctx { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.an-ctx-i { flex: 1; min-width: 130px; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 12px 16px; }
.an-ctx-v { font-size: var(--z-t5); font-weight: 700; font-variant-numeric: tabular-nums; }
.an-ctx-v small { font-size: var(--z-t3); color: var(--text-dim); font-weight: 500; }
.an-ctx-l { display: block; font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.an-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .an-cols { grid-template-columns: 1fr; } }
.an-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.an-sec-h h3 { margin: 0; font-size: var(--z-t4); display: inline-flex; align-items: center; gap: 8px; }
.an-sec-h h3 i { width: 16px; height: 16px; background: var(--accent); }
.an-count { font-family: var(--mono); font-size: var(--z-t3); background: var(--crit); color: var(--z-c-blanc); border-radius:6px; padding: 1px 8px; }
.an-grp { margin-bottom: 14px; }
.an-grp-h { display: flex; align-items: center; gap: 7px; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 6px; }
.an-grp-h.r-crit { color: var(--crit); } .an-grp-h.r-mid { color: var(--warn); }
.an-grp-h i { width: 14px; height: 14px; background: currentColor; }
.an-grp-n { font-family: var(--mono); background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text); border-radius:6px; padding: 0 7px; font-size: var(--z-t3); }
.an-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-dim); border-radius:6px; padding: 10px 12px; }
.an-item.an-crit { border-left-color: var(--crit); } .an-item.an-warn { border-left-color: var(--warn); } .an-item.an-info { border-left-color: var(--accent); }
.an-item-b { flex: 1; min-width: 0; }
.an-item-t { display: block; font-size: var(--z-t3); }
.an-item-m { display: block; font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); margin-top: 1px; }
.an-item-go { flex: none; background: none; border: none; color: var(--accent); font-size: var(--z-t3); font-weight: 600; cursor: pointer; white-space: nowrap; }
.an-item-go:hover { text-decoration: underline; }
.an-empty { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--ok) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); border-radius:6px; padding: 16px; font-size: var(--z-t3); color: var(--text-dim); }
.an-empty i { width: 18px; height: 18px; background: var(--ok); flex: none; }
.an-tools { display: flex; flex-direction: column; gap: 8px; }
.an-tool { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 11px 13px; }
.an-tool:hover { border-color: var(--accent); }
.an-tool-ic { flex: none; width: 34px; height: 34px; border-radius:6px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.an-tool-ic i { width: 17px; height: 17px; background: var(--accent); }
.an-tool-t { display: block; font-size: var(--z-t3); font-weight: 600; }
.an-tool-d { display: block; font-size: var(--z-t3); color: var(--text-dim); }

/* 
   PREMIERS PAS (configuration guidée pro)
 */
.pp-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg-soft)), color-mix(in srgb, var(--violet) 8%, var(--bg-soft)));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius:6px; padding: 20px 22px; margin-bottom: 20px; }
.pp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pp-k { font-family: var(--mono); font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.pp-k i { width: 14px; height: 14px; background: var(--accent); }
.pp-h h3 { margin: 3px 0 0; font-size: var(--z-t4); }
.pp-x { background: none; border: none; color: var(--text-dim); font-size: var(--z-t3); cursor: pointer; white-space: nowrap; }
.pp-x:hover { color: var(--text); }
.pp-prog { height: 8px; border-radius:6px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; }
.pp-prog-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius:6px; transition: width .3s; }
.pp-prog-t { font-size: var(--z-t3); color: var(--text-dim); margin: 6px 0 14px; font-family: var(--mono); }
.pp-prog-t b { color: var(--text); }
.pp-org { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pp-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--z-t3); color: var(--text-dim); }
.pp-f input, .pp-f select { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 8px 10px; color: var(--text); font: inherit; font-size: var(--z-t3); }
.pp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pp-step { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 10px 12px; }
.pp-step-c { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; }
.pp-step.done .pp-step-c { background: var(--ok); border-color: var(--ok); }
.pp-step.done .pp-step-c i { width: 12px; height: 12px; background: var(--z-c-blanc); }
.pp-step-b { flex: 1; min-width: 0; }
.pp-step-t { display: block; font-size: var(--z-t3); font-weight: 600; }
.pp-step.done .pp-step-t { color: var(--text-dim); text-decoration: line-through; }
.pp-step-d { display: block; font-size: var(--z-t3); color: var(--text-dim); }
.pp-step-go { flex: none; background: none; border: none; color: var(--accent); font-size: var(--z-t3); font-weight: 600; cursor: pointer; white-space: nowrap; }
.pp-step-go:hover { text-decoration: underline; }
.pp-step-here { flex: none; font-size: var(--z-t3); color: var(--text-dim); font-style: italic; }
.pp-bar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 20px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 11px 16px; }
.pp-bar-l { font-size: var(--z-t3); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pp-bar-l i { width: 15px; height: 15px; background: var(--accent); }
.pp-bar-track { flex: 1; height: 7px; border-radius:6px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; }
.pp-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); }
.pp-bar-go { font-size: var(--z-t3); color: var(--accent); font-weight: 600; white-space: nowrap; }
.pp-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px;
  background: color-mix(in srgb, var(--ok) 9%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--border)); border-radius:6px; padding: 12px 16px; }
.pp-done-l { display: inline-flex; align-items: center; gap: 8px; font-size: var(--z-t3); }
.pp-done-l i { width: 17px; height: 17px; background: var(--ok); }
@media (max-width: 720px) { .pp-org { grid-template-columns: 1fr; } }
.cmdk-ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,17,46,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk-box { width: min(560px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; box-shadow: 0 30px 80px rgba(0,140,214,.35); overflow: hidden; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-si { width: 20px; height: 20px; color: var(--text-dim); flex: none; }
.cmdk-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--z-t4); color: var(--text); outline: none; }
.cmdk-in kbd { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); border: 1px solid var(--border); border-radius:6px; padding: 2px 6px; flex: none; }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 8px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; border-radius:6px; padding: 10px 12px; font: inherit; font-size: var(--z-t3); color: var(--text); cursor: pointer; }
.cmdk-item.on { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.cmdk-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent); flex: none; }
.cmdk-ic svg { width: 18px; height: 18px; }
.cmdk-ic [class^="gi-"] { width: 18px; height: 18px; margin: 0; }
.cmdk-empty { padding: 24px; text-align: center; color: var(--text-dim); font-size: var(--z-t3); }
/* Équipe & droits */
.tm-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tm-me-l { font-weight: 600; font-size: var(--z-t3); }
.tm-me .input { min-width: 250px; padding: 8px 10px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; }
.tm-list { display: flex; flex-direction: column; }
.tm-row, .tm-inv { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border-soft); }
.tm-row:first-child, .tm-inv:first-child { border-top: 0; }
.tm-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--violet)); color: var(--z-c-blanc); display: grid; place-items: center; font-weight: 700; font-size: var(--z-t3); flex: none; }
.tm-av-p { background: var(--bg-soft); color: var(--accent); }
.tm-av-p [class^="gi-"] { width: 16px; height: 16px; margin: 0; }
.tm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-av-edit { position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden; font: inherit; -webkit-appearance: none; appearance: none; }
.tm-av-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,34,82,.5); color: var(--z-c-blanc); opacity: 0; transition: opacity .15s ease; }
.tm-av-edit:hover .tm-av-cam, .tm-av-edit:focus-visible .tm-av-cam { opacity: 1; }
.tm-av-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-name { font-weight: 600; font-size: var(--z-t3); }
.tm-you { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); border-radius:6px; padding: 1px 5px; }
.tm-mail { font-size: var(--z-t3); color: var(--text-dim); }
.tm-role { flex: none; }
.tm-role-sel { padding: 6px 8px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: var(--z-t3); }
.tm-badge { font-family: var(--mono); font-size: var(--z-t3); padding: 3px 9px; border-radius:6px; border: 1px solid var(--border); color: var(--text-dim); }
.tm-badge.r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.tm-badge.r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tm-invite { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tm-invite .input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; }
.tm-invite .tm-in-role { flex: none; padding: 10px 12px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; }
/* Bandeau + mode lecture seule */
.ro-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 150; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--warn); color: var(--text); border-radius:6px; padding: 8px 10px 8px 16px; box-shadow: 0 10px 30px rgba(0,140,214,.2); font-size: var(--z-t3); }
.ro-banner [class^="gi-"] { color: var(--warn); width: 16px; height: 16px; margin: 0; }
.ro-switch { background: var(--z-c-smart-fonce); color: var(--z-c-blanc); border: 0; border-radius:6px; padding: 5px 12px; font: inherit; font-size: var(--z-t3); cursor: pointer; }
body.ro-mode #main input, body.ro-mode #main textarea, body.ro-mode #main select,
body.ro-mode #main .lib-del, body.ro-mode #main [data-act^="add"], body.ro-mode #main [data-act="del"],
body.ro-mode #main [data-act="stat"], body.ro-mode #main [data-act^="ev-"], body.ro-mode #main .cf-seg-b { pointer-events: none; opacity: .5; }
body.ro-mode #view-equipe input, body.ro-mode #view-equipe textarea, body.ro-mode #view-equipe select,
body.ro-mode #view-equipe button, body.ro-mode #view-equipe .lib-del { pointer-events: auto; opacity: 1; }

.eb-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.eb-metagrid label { display: flex; flex-direction: column; gap: 5px; font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; }
.eb-metagrid input { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; font: inherit; font-size: var(--z-t3); }
.eb-metagrid input:focus { outline: none; border-color: var(--accent); }

.eb-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 14px 16px; margin-bottom: 16px; }
.eb-block-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.eb-block h4 { margin: 0 0 10px; font-size: var(--z-t3); }
.eb-block-h h4 { margin: 0; }
.eb-empty { color: var(--text-dim); font-size: var(--z-t3); padding: 6px 0; }

.eb-t { width: 100%; border-collapse: collapse; font-size: var(--z-t3); }
.eb-t thead th { text-align: left; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 4px 8px; border-bottom: 1px solid var(--border); font-weight: 700; }
.eb-t td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.eb-t input, .eb-t select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 7px 9px; font: inherit; font-size: var(--z-t3); }
.eb-t input:focus, .eb-t select:focus { outline: none; border-color: var(--accent); }
.eb-t .eb-x { width: 34px; text-align: center; }
.eb-t .eb-c { width: 60px; text-align: center; }
.eb-eco th, .eb-eco td { padding: 5px 5px; }
.eb-sub { color: var(--text-dim); font-size: var(--z-t3); margin-top: 2px; }

.eb-badge { display: inline-block; font-size: var(--z-t3); font-weight: 700; padding: 2px 9px; border-radius:6px; border: 1px solid; }
.r-low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.r-high { color: var(--high); border-color: color-mix(in srgb, var(--high) 50%, transparent); background: color-mix(in srgb, var(--high) 14%, transparent); }
.r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, transparent); background: color-mix(in srgb, var(--crit) 14%, transparent); }
tr.r-crit td, tr.r-high td, tr.r-mid td, tr.r-low td { border-left: 3px solid transparent; }
tr.r-crit td:first-child { border-left-color: var(--crit); }
tr.r-high td:first-child { border-left-color: var(--high); }
tr.r-mid td:first-child { border-left-color: var(--warn); }
tr.r-low td:first-child { border-left-color: var(--ok); }

.eb-matrix { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 6px; max-width: 460px; margin: 8px 0; }
.eb-m-corner { }
.eb-m-axis { display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); }
.eb-m-cell { aspect-ratio: 1 / 1; border-radius:6px; display: grid; place-items: center; border: 1px solid var(--border); min-height: 44px; }
.eb-m-count { font-weight: 700; font-size: var(--z-t4); color: var(--text); }
.eb-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

.eb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; }
.eb-cta { margin-top: 16px; }

/* Cockpit de synthèse (RSSI / COMEX) */
.eb-cockpit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.eb-stat { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.eb-stat-v { font-size: 26px; font-weight: 700; line-height: 1.1; }
.eb-stat-v.eb-euro { font-size: var(--z-t5); color: var(--accent); }
.eb-stat-v.r-crit-txt { color: var(--crit); }
.eb-stat-v.r-mid-txt { color: var(--warn); }
.eb-stat-l { font-size: var(--z-t3); color: var(--text-dim); }
/* EBIOS, polish premium */
.eb-block-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.eb-ai-fill { background: color-mix(in srgb, var(--violet) 14%, transparent); border-color: color-mix(in srgb, var(--violet) 42%, transparent); }
.eb-ai-fill:hover { background: color-mix(in srgb, var(--violet) 26%, transparent); border-color: color-mix(in srgb, var(--violet) 60%, transparent); }
.eb-ai-fill[data-busy] { opacity: .6; cursor: progress; }
.eb-step { box-shadow: var(--shadow-sm); }
.eb-step.active { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.eb-stat { box-shadow: var(--shadow-sm); }

/* Registre des risques quantifié */
.eb-scroll { overflow-x: auto; }
.eb-t-risk { min-width: 720px; }
.eb-t .eb-num { width: 92px; }
.eb-t .eb-num input { text-align: right; }
.eb-t .eb-ale { font-weight: 700; white-space: nowrap; }
.eb-t tfoot .eb-tot-l { text-align: right; font-weight: 700; color: var(--text-dim); }
.eb-t tfoot .eb-euro { font-weight: 700; color: var(--accent); white-space: nowrap; }
.eb-note { font-size: var(--z-t3); color: var(--text-dim); margin: 8px 0 0; }
@media (max-width: 900px) { .eb-cockpit { grid-template-columns: 1fr 1fr; } }

/* Conformité multi-référentiels */
.conf-cockpit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.conf-cat-group { margin-bottom: 14px; }
.conf-cat-group .conf-cockpit { margin-bottom: 0; }
.conf-cat-h { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conf-cat-d { font-size: var(--z-t3); font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }

/* Conformité premium : cartes de référentiel (cockpit-sélecteur) */
.cf-fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; margin-bottom: 4px; }
.cf-fw-card { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius:6px; padding: 13px 15px; cursor: pointer; color: var(--text); font-family: inherit; box-shadow: var(--shadow-sm); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.cf-fw-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow); }
.cf-fw-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.cf-fw-info { display: flex; flex-direction: column; min-width: 0; }
.cf-fw-name { font-weight: 700; font-size: var(--z-t3); }
.cf-fw-sub { font-size: var(--z-t3); color: var(--text-dim); }
.cf-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 3.6deg), color-mix(in srgb, var(--text) 12%, transparent) 0); }
.cf-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-card); }
.cf-ring-v { position: relative; font-size: var(--z-t3); font-weight: 700; }
.cf-ring.r-low { --rc: var(--ok); } .cf-ring.r-mid { --rc: var(--warn); } .cf-ring.r-high { --rc: var(--high); } .cf-ring.r-crit { --rc: var(--crit); }
.cf-ring.cf-idle { --rc: color-mix(in srgb, var(--text) 18%, transparent); }
.cf-ring.cf-idle .cf-ring-v { color: var(--text-dim); }

/* Barre d'outils + légende */
.cf-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; }
.cf-legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: var(--z-t3); color: var(--text-dim); }
.cf-legend i { display: inline-block; width: 9px; height: 9px; border-radius:6px; margin-right: 5px; vertical-align: middle; }

/* Panneau d'exigences premium */
.cf-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cf-panel-title { display: flex; align-items: center; gap: 8px; }
.cf-panel-title h4 { margin: 0; font-size: var(--z-t4); }
.cf-panel-plain { margin: 6px 0 14px; color: var(--text-dim); font-size: var(--z-t3); max-width: 74ch; line-height: 1.55; }
.cf-progress { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.cf-progress-bar { flex: 1; height: 8px; border-radius:6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.cf-progress-fill { height: 100%; border-radius:6px; transition: width .35s ease; }
.cf-progress-fill.r-low { background: var(--ok); } .cf-progress-fill.r-mid { background: var(--warn); }
.cf-progress-fill.r-high { background: var(--high); } .cf-progress-fill.r-crit { background: var(--crit); }
.cf-progress-txt { font-size: var(--z-t3); color: var(--text-dim); white-space: nowrap; }

.cf-ctrls { display: flex; flex-direction: column; gap: 10px; }
.cf-ctrl { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border-soft); border-left: 3px solid transparent; border-radius:6px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); transition: background .15s ease, border-color .15s ease; }
.cf-ctrl:hover { background: var(--bg-card); }
.cf-ctrl.is-ok { border-left-color: var(--ok); }
.cf-ctrl.is-mid { border-left-color: var(--warn); }
.cf-ctrl.is-crit { border-left-color: var(--crit); }
.cf-ctrl-main { flex: 1; min-width: 0; }
.cf-ctrl-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cf-dom { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 2px 9px; border-radius:6px; }
.cf-map { font-size: var(--z-t3); color: var(--accent); opacity: .85; }
.cf-ctrl-txt { font-size: var(--z-t3); line-height: 1.5; }
.cf-ctrl-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: none; width: 300px; max-width: 42%; }
.cf-seg { display: inline-flex; border: 1px solid var(--border); border-radius:6px; overflow: hidden; background: var(--bg-soft); }
.cf-seg-b { flex: 1; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-dim); font-family: inherit; font-size: var(--z-t3); font-weight: 600; padding: 7px 8px; cursor: pointer; white-space: nowrap; transition: background .13s ease, color .13s ease; }
.cf-seg-b:last-child { border-right: 0; }
.cf-seg-b:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.cf-seg-b.active.s-ok { background: var(--ok); color: var(--z-c-marine); }
.cf-seg-b.active.s-mid { background: var(--warn); color: var(--z-c-marine); }
.cf-seg-b.active.s-crit { background: var(--crit); color: var(--z-c-marine); }
.cf-seg-b.active.s-na { background: color-mix(in srgb, var(--text) 28%, transparent); color: var(--text); }
.cf-note { width: 100%; }
@media (max-width: 760px) {
  .cf-ctrl { flex-direction: column; }
  .cf-ctrl-act { width: 100%; max-width: none; }
}

/* Questionnaire de profil (page évolutive) */
.cf-quiz-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.cf-quiz-h h4 { margin: 0; font-size: var(--z-t4); }
.cf-ai-row { display: flex; gap: 10px; margin: 12px 0 18px; flex-wrap: wrap; }
.cf-ai-desc { flex: 1; min-width: 240px; }
.cf-qs { display: flex; flex-direction: column; gap: 12px; }
.cf-q { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius:6px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.cf-q-txt { font-size: var(--z-t3); line-height: 1.5; margin-bottom: 11px; display: flex; gap: 10px; align-items: flex-start; }
.cf-q-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: var(--z-t3); font-weight: 700; display: grid; place-items: center; }
.cf-q-opts { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
.cf-q-opt { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font-family: inherit; font-size: var(--z-t3); font-weight: 600; padding: 7px 16px; border-radius:6px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; }
.cf-q-opt:hover { color: var(--text); border-color: var(--text-dim); }
.cf-q-opt.active { background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); border-color: transparent; }
.cf-quiz-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

/* Bandeau de profil + badges de pertinence */
.cf-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius:6px; padding: 12px 16px; margin-bottom: 18px; }
.cf-banner-txt { font-size: var(--z-t3); }
.cf-rel-oblig { color: var(--crit); font-weight: 700; }
.cf-banner-act { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-badge { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius:6px; margin-left: 8px; vertical-align: middle; }
.cf-badge-ob { background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent); }
.cf-badge-out { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-dim); }
.cf-fw-card.cf-out { opacity: .58; }
.cf-fw-card.cf-out:hover { opacity: 1; }
.conf-tabgroups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.conf-tabgroup { display: flex; flex-direction: column; gap: 5px; }
.conf-tabgroup-l { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.conf-bar { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 13px 15px; }
.conf-bar-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: var(--z-t3); }
.conf-bar-pct { font-size: var(--z-t4); font-weight: 700; }
.conf-bar-track { height: 8px; background: var(--bg-card); border-radius:6px; margin: 8px 0 6px; overflow: hidden; }
.conf-bar-fill { height: 100%; border-radius:6px; transition: width .3s; }
.conf-bar-fill.r-low { background: var(--ok); } .conf-bar-fill.r-mid { background: var(--warn); }
.conf-bar-fill.r-high { background: var(--high); } .conf-bar-fill.r-crit { background: var(--crit); }
.conf-bar-pct.r-low { color: var(--ok); } .conf-bar-pct.r-mid { color: var(--warn); }
.conf-bar-pct.r-high { color: var(--high); } .conf-bar-pct.r-crit { color: var(--crit); }
.conf-bar-sub { font-size: var(--z-t3); color: var(--text-dim); }

.conf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.conf-tab { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); border-radius:6px; padding: 9px 16px; cursor: pointer; font: inherit; font-size: var(--z-t3); font-weight: 600; }
.conf-tab:hover { color: var(--text); }
.conf-tab.active { color: var(--text); background: var(--bg-card); border-bottom-color: var(--bg-card); }
.conf-tab-sc { font-size: var(--z-t3); font-weight: 700; padding: 1px 7px; border-radius:6px; border: 1px solid; }
.conf-tab-sc.r-low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.conf-tab-sc.r-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.conf-tab-sc.r-high { color: var(--high); border-color: color-mix(in srgb, var(--high) 50%, transparent); }
.conf-tab-sc.r-crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, transparent); }
.conf-hint { font-size: var(--z-t3); color: var(--text-dim); font-weight: 400; }

.conf-t { min-width: 640px; }
.conf-t .conf-cat { white-space: nowrap; font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; width: 130px; }
.conf-map { font-size: var(--z-t3); color: var(--accent); margin-top: 3px; opacity: .85; }
.conf-t .conf-st { width: 150px; }
.conf-sel.r-low { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.conf-sel.r-mid { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.conf-sel.r-crit { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); }
.conf-count { display: inline-block; font-size: var(--z-t3); font-weight: 700; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-radius:6px; padding: 1px 9px; margin-left: 6px; }
@media (max-width: 900px) { .conf-cockpit { grid-template-columns: 1fr 1fr; } }

/* Aide IA contextuelle (inline) */
.eb-ai { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eb-ai-btn { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)) !important; }
.eb-ai-hint { font-size: var(--z-t3); color: var(--text-dim); }
.ai-inline { flex-basis: 100%; margin-top: 10px; background: color-mix(in srgb, var(--violet) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); border-radius:6px; padding: 13px 15px; }
.ai-inline-load { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: var(--z-t3); }
.ai-inline-err { color: var(--warn); font-size: var(--z-t3); }
.ai-inline-h { font-weight: 700; font-size: var(--z-t3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ai-inline-b { font-size: var(--z-t3); line-height: 1.6; }
.ai-inline-b h4 { margin: 14px 0 5px; font-size: var(--z-t3); color: var(--accent); }
.ai-inline-b h4:first-child { margin-top: 0; }
.ai-inline-b ul, .ai-inline-b ol { margin: 4px 0 10px; padding-left: 20px; }
.ai-inline-b li { margin: 3px 0; }
.ai-inline-b p { margin: 0 0 8px; }
.ai-inline-copy { margin-top: 10px; }

/* Tableau de bord global (cockpit) */
.dash-topline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 16px; }
.dash-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-soft)), color-mix(in srgb, var(--violet) 16%, var(--bg-soft))); border: 1px solid var(--border); border-radius:6px; padding: 18px 22px; }
.dash-hero-l { font-size: var(--z-t3); color: var(--text-dim); }
.dash-hero-v { font-size: 34px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0; }
.dash-hero-s { font-size: var(--z-t3); color: var(--text-dim); }
.dash-ai { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
/* Hero de posture, anneau radial + décomposition (pro & particulier) */
.pg-hero { display: flex; align-items: center; gap: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 14%, var(--bg-soft))); border: 1px solid var(--border); border-radius:6px; padding: 20px 24px; margin-bottom: 16px; flex-wrap: wrap; }
.pg-ring { position: relative; width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--text) 9%, transparent) 0); }
.pg-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-soft); }
.pg-ring.r-low { --rc: var(--ok); } .pg-ring.r-mid { --rc: var(--warn); } .pg-ring.r-high { --rc: var(--high); } .pg-ring.r-crit { --rc: var(--crit); }
.pg-ring.pg-idle { --rc: color-mix(in srgb, var(--text) 20%, transparent); }
.pg-ring-c { position: relative; text-align: center; line-height: 1; }
.pg-ring-v { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.pg-ring-v small { font-size: var(--z-t3); font-weight: 700; opacity: .5; }
.pg-ring-l { font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.pg-body { flex: 1; min-width: 250px; }
.pg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pg-level { font-size: var(--z-t5); font-weight: 700; }
.pg-level.r-low { color: var(--ok); } .pg-level.r-mid { color: var(--warn); } .pg-level.r-high { color: var(--high); } .pg-level.r-crit { color: var(--crit); }
.pg-tag { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius:6px; padding: 2px 7px; cursor: help; }
.pg-desc { font-size: var(--z-t3); color: var(--text-dim); margin: 4px 0 13px; }
.pg-parts { display: flex; gap: 16px; flex-wrap: wrap; }
.pg-part { flex: 1; min-width: 120px; }
button.pg-part { border: 0; background: none; padding: 5px 6px; margin: -5px -6px; border-radius:6px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
button.pg-part:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
button.pg-part:hover .pg-part-h span { color: var(--text); }
.pg-part-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--z-t3); margin-bottom: 4px; }
.pg-part-h span { color: var(--text-dim); }
.pg-part-h b { font-weight: 700; }
.pg-part-track { height: 6px; border-radius:6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.pg-part-fill { height: 100%; border-radius:6px; transition: width .35s; }
.pg-part-fill.r-low { background: var(--ok); } .pg-part-fill.r-mid { background: var(--warn); } .pg-part-fill.r-high { background: var(--high); } .pg-part-fill.r-crit { background: var(--crit); } .pg-part-fill.pg-idle { background: color-mix(in srgb, var(--text) 18%, transparent); }
.pg-cta { margin-top: 12px; }
@media (max-width: 560px) { .pg-hero { gap: 16px; } .pg-ring { width: 92px; height: 92px; } .pg-ring-v { font-size: 25px; } }

.dash-attention { background: color-mix(in srgb, var(--crit) 7%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--crit) 28%, var(--border)); border-radius:6px; padding: 12px 16px; margin-bottom: 16px; }
.dash-attention h4 { margin: 0 0 8px; font-size: var(--z-t3); }
.dash-attention ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-attention li { display: flex; align-items: center; gap: 10px; font-size: var(--z-t3); }
.dash-attention li span { flex: 1; }
.dash-attention li.r-crit span::before { content: "●"; color: var(--crit); margin-right: 7px; }
.dash-attention li.r-mid span::before { content: "●"; color: var(--warn); margin-right: 7px; }
.dash-jump { background: none; border: 1px solid var(--border); color: var(--text); border-radius:6px; padding: 3px 12px; font-size: var(--z-t3); cursor: pointer; }
.dash-jump:hover { border-color: var(--accent); }
.dash-ok { background: color-mix(in srgb, var(--ok) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); border-radius:6px; padding: 14px 16px; margin-bottom: 16px; font-size: var(--z-t3); }

.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dash-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 16px 18px; display: flex; flex-direction: column; }
.dash-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dash-ic { width: 40px; height: 40px; border-radius:6px; flex: none; display: grid; place-items: center; font-size: var(--z-t5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--violet) 15%, transparent)); color: var(--accent); }
.dash-card-h h3 { margin: 0; font-size: var(--z-t4); }
.dash-card-b { flex: 1; margin-bottom: 12px; }
.dash-open { align-self: flex-start; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-kpis-4 { grid-template-columns: repeat(2, 1fr); }
.dash-kpis > div { display: flex; flex-direction: column; }
.dash-k { font-size: var(--z-t5); font-weight: 700; line-height: 1.1; }
.dash-k.eb-euro { color: var(--accent); font-size: var(--z-t4); }
.dash-k.r-crit-txt { color: var(--crit); } .dash-k.r-mid-txt { color: var(--warn); }
.dash-kl { font-size: var(--z-t3); color: var(--text-dim); }
.dash-sub { font-size: var(--z-t3); color: var(--text-dim); margin-top: 10px; }
.dash-empty { font-size: var(--z-t3); color: var(--text-dim); }
.dash-score { font-size: 30px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.dash-score span { font-size: var(--z-t3); font-weight: 400; color: var(--text-dim); }
.dash-score.r-low { color: var(--ok); } .dash-score.r-mid { color: var(--warn); }
.dash-score.r-high { color: var(--high); } .dash-score.r-crit { color: var(--crit); }
.dash-bar { margin-bottom: 7px; }
.dash-bar-h { display: flex; justify-content: space-between; font-size: var(--z-t3); margin-bottom: 3px; }
.dash-bar-h .r-low { color: var(--ok); } .dash-bar-h .r-mid { color: var(--warn); }
.dash-bar-h .r-high { color: var(--high); } .dash-bar-h .r-crit { color: var(--crit); }
.dash-links { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .dash-topline, .dash-grid { grid-template-columns: 1fr; } }

/* Plan de remédiation (roadmap) */
.eb-stat-v.r-low-txt { color: var(--ok); }
.rm-bar { height: 10px; background: var(--bg-card); border-radius:6px; overflow: hidden; margin: 2px 0 4px; }
.rm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius:6px; transition: width .35s; }
.rm-filter { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 8px 11px; font: inherit; font-size: var(--z-t3); }
.rm-src { font-size: var(--z-t3); color: var(--text-dim); white-space: nowrap; }
.rm-done td { opacity: .62; }
.rm-done td:nth-child(2) { text-decoration: line-through; }
.rm-st { font-weight: 600; }
.rm-st-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)) !important; color: var(--ok); }
.rm-st-mid { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)) !important; }
.rm-add { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-add input { flex: 1; min-width: 220px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; font: inherit; }
.rm-add select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; font: inherit; }

/* Tiers / écosystème */
.ti-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ti-meta label { display: flex; flex-direction: column; gap: 5px; font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; }
.ti-meta input, .ti-meta select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 11px; font: inherit; font-size: var(--z-t3); }
.ti-meta input:focus, .ti-meta select:focus { outline: none; border-color: var(--accent); }
.ti-qh { margin: 4px 0 8px; font-size: var(--z-t3); }
.ti-ans { width: 130px; }
@media (max-width: 640px) { .ti-meta { grid-template-columns: 1fr; } }

/* Quiz de sensibilisation */
.qz-card { max-width: 640px; margin: 0 auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 24px 26px; }
.qz-intro { text-align: center; }
.qz-emoji { font-size: 42px; margin-bottom: 6px; }
.qz-intro h3 { font-size: var(--z-t5); margin: 0 0 8px; }
.qz-intro p { color: var(--text-dim); }
.qz-best { color: var(--text) !important; }
.qz-progress { height: 6px; background: var(--bg-card); border-radius:6px; overflow: hidden; margin-bottom: 10px; }
.qz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); transition: width .3s; }
.qz-count { font-size: var(--z-t3); color: var(--text-dim); margin-bottom: 12px; }
.qz-q { font-size: var(--z-t4); margin: 0 0 16px; line-height: 1.35; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt { text-align: left; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius:6px; padding: 13px 15px; cursor: pointer; font: inherit; font-size: var(--z-t3); transition: .12s; }
.qz-opt:hover:not(:disabled) { border-color: var(--accent); }
.qz-opt:disabled { cursor: default; }
.qz-opt.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.qz-opt.bad { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.qz-exp { margin-top: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius:6px; padding: 13px 15px; font-size: var(--z-t3); line-height: 1.55; }
.qz-next { margin-top: 16px; text-align: right; }
.qz-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.qz-card .r-low { color: var(--ok); } .qz-card .r-mid { color: var(--warn); } .qz-card .r-high { color: var(--high); }

/* Ma protection (particulier) */
.prot-hero { display: flex; align-items: center; gap: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-soft)), color-mix(in srgb, var(--violet) 14%, var(--bg-soft))); border: 1px solid var(--border); border-radius:6px; padding: 20px 24px; margin-bottom: 18px; flex-wrap: wrap; }
.prot-gauge { text-align: center; flex: none; }
.prot-gauge-v { font-size: 40px; font-weight: 700; line-height: 1; }
.prot-gauge-v.r-low { color: var(--ok); } .prot-gauge-v.r-mid { color: var(--warn); } .prot-gauge-v.r-high { color: var(--high); }
.prot-gauge-l { font-size: var(--z-t3); color: var(--text-dim); }
.prot-hero-txt { flex: 1; min-width: 220px; }
.prot-level { font-size: var(--z-t4); font-weight: 700; margin-bottom: 8px; }
.prot-level.r-low { color: var(--ok); } .prot-level.r-mid { color: var(--warn); } .prot-level.r-high { color: var(--high); }
.prot-bar { height: 10px; background: var(--bg-card); border-radius:6px; overflow: hidden; }
.prot-bar-fill { height: 100%; border-radius:6px; transition: width .35s; }
.prot-bar-fill.r-low { background: var(--ok); } .prot-bar-fill.r-mid { background: var(--warn); } .prot-bar-fill.r-high { background: var(--high); }
.prot-hero-s { font-size: var(--z-t3); color: var(--text-dim); margin-top: 8px; }

.prot-list { display: flex; flex-direction: column; gap: 10px; }
.prot-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; overflow: hidden; }
.prot-card.open { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.prot-head { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); padding: 14px 16px; cursor: pointer; font: inherit; text-align: left; }
.prot-ic { font-size: var(--z-t5); flex: none; }
.prot-h-t { flex: 1; font-size: var(--z-t4); font-weight: 600; }
.prot-h-p { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); }
.prot-h-p.r-low { color: var(--ok); }
.prot-chev { color: var(--text-dim); font-size: var(--z-t3); }
.prot-mini { height: 3px; background: var(--bg-card); }
.prot-mini-fill { height: 100%; background: var(--accent); transition: width .3s; }
.prot-mini-fill.r-low { background: var(--ok); }
.prot-body { padding: 4px 16px 16px; }
.prot-why { font-size: var(--z-t3); color: var(--text-dim); line-height: 1.55; margin: 4px 0 14px; }
.prot-acts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.prot-act { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius:6px; cursor: pointer; font-size: var(--z-t3); transition: .12s; }
.prot-act:hover { border-color: var(--accent); }
.prot-act input { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.prot-act.on { background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.prot-act.on span { color: var(--text-dim); text-decoration: line-through; }
.prot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--z-t3); }
.prot-tools-l { color: var(--text-dim); }
.prot-tool { display: inline-flex; align-items: baseline; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius:6px; padding: 5px 12px; color: var(--text); text-decoration: none; }
a.prot-tool:hover { border-color: var(--accent); }
.prot-tool small { color: var(--text-dim); font-size: var(--z-t3); }
.prot-gotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.prot-ai { margin-top: 6px; }
/* Bilan particulier, référentiel (compléments) */
.prot-gauge-v small { font-size: var(--z-t4); font-weight: 700; opacity: .55; }
.prot-gauge-v.r-crit { color: var(--crit); }
.prot-level.r-crit { color: var(--crit); }
.prot-bar-fill.r-crit { background: var(--crit); }
.prot-mini-fill.r-mid { background: var(--warn); } .prot-mini-fill.r-crit { background: var(--crit); }
.prot-h-p.r-mid { color: var(--warn); } .prot-h-p.r-crit { color: var(--crit); }
.prot-levelbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.prot-levelbar-l { font-size: var(--z-t3); color: var(--text-dim); font-weight: 600; margin-right: 2px; }
.prot-lvl { border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim); font: inherit; font-size: var(--z-t3); font-weight: 600; padding: 7px 14px; border-radius:6px; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; }
.prot-lvl:hover { color: var(--text); border-color: var(--text-dim); }
.prot-lvl.on { color: var(--z-c-blanc); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--violet)); }
.prot-prio { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius:6px; padding: 14px 16px; margin-bottom: 16px; }
.prot-prio-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: var(--z-t3); }
.prot-prio-l { margin: 10px 0 0; padding-left: 20px; font-size: var(--z-t3); color: var(--text-dim); }
.prot-prio-l li { margin: 4px 0; }
.prot-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.prot-item { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 11px 13px; border: 1px solid var(--border-soft); border-left: 3px solid transparent; border-radius:6px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.prot-item.is-ok { border-left-color: var(--ok); } .prot-item.is-mid { border-left-color: var(--warn); } .prot-item.is-crit { border-left-color: var(--crit); }
.prot-item-txt { flex: 1; min-width: 0; font-size: var(--z-t3); line-height: 1.5; }
.prot-niv { display: inline-block; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius:6px; margin-right: 8px; vertical-align: 1px; }
.prot-niv.r-crit { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.prot-niv.r-mid { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.prot-niv.r-low { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.prot-seg { flex: none; }
@media (max-width: 640px) { .prot-item { flex-direction: column; } .prot-seg { width: 100%; } .prot-seg.cf-seg { display: flex; } }
@media (max-width: 680px) { .eb-metagrid { grid-template-columns: 1fr; } .eb-t { font-size: var(--z-t3); } }
.report-doc .rd-ioc-cat li { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); word-break: break-all; }
.report-doc code { font-family: Consolas, monospace; font-size: var(--z-t3); background: #eaf7fc; padding: 1px 4px; border-radius:6px; }
.report-doc .rd-tl li, .report-doc .rd-mitre li, .report-doc .rd-reco li { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); margin: 5px 0; }
.report-doc .rd-tl-cat { color: var(--z-c-smart); font-weight: 600; }
.report-doc .rd-oblig { font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); background: #eaf7fc; border: 1px solid var(--z-c-alerte); border-radius:6px; padding: 10px 12px; color: var(--z-c-alerte); }
.report-doc .rd-faits, .report-doc .rd-hypo { list-style: none; padding-inline-start: 0; }
.report-doc .rd-faits li { border-inline-start: 3px solid var(--z-c-sain); padding: 2px 0 2px 10px; margin: 5px 0; }
.report-doc .rd-hypo li { border-inline-start: 3px solid var(--z-c-alerte); padding: 2px 0 2px 10px; margin: 5px 0; }
.report-doc .rd-lim li { color: var(--z-c-gris-1); }
.report-doc .rd-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #eaf7fc; font-family: "Segoe UI", sans-serif; font-size: var(--z-t3); color: var(--z-c-gris-1); }
.srv-badge { display: inline-block; font-size: var(--z-t3); font-weight: 700; border: 1px solid; border-radius:6px; padding: 1px 8px; vertical-align: middle; }
.srv-status-l { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); }
.srv-status { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 6px 8px; font-family: inherit; font-size: var(--z-t3); }
@media print {
  body.report-open > *:not(#report-modal) { display: none !important; }
  #report-modal { position: static; background: var(--z-c-blanc); }
  .report-modal-bar { display: none !important; }
  .report-modal-body { overflow: visible; padding: 0; }
  .report-doc { box-shadow: none; max-width: 100%; padding: 0; }
}

/* 
   PREMIUM PASS : raffinement global (profondeur, respiration, transitions).
   Placé en fin de feuille (hors @media print) pour surcharger proprement.
 */
:root {
  --bg:        var(--z-c-marine);
  --bg-soft:   var(--z-c-marine);
  --bg-card:   var(--z-c-marine);
  --border:    var(--z-c-marine);
  --border-soft:var(--z-c-marine);
  --text:      #eaf7fc;
  --text-dim:  var(--z-c-gris-3);
  --radius: 6px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.22);
  --shadow:    0 2px 6px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.42);
}
:root[data-theme="light"] {
  --bg:        #eaf7fc;
  --bg-soft:   var(--z-c-blanc);
  --bg-card:   var(--z-c-blanc);
  --border:    #eaf7fc;
  --border-soft:#eaf7fc;
  --text:      var(--z-c-marine);
  --text-dim:  var(--z-c-gris-1);
  --shadow-sm: 0 1px 2px rgba(0,34,82,.06), 0 4px 12px rgba(0,34,82,.06);
  --shadow:    0 2px 8px rgba(0,34,82,.08), 0 18px 44px rgba(0,34,82,.12);
}

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius:6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Décor de page porté par <html> (le canvas) pour laisser passer .app-fond. */
html {
  background: radial-gradient(1200px 560px at 50% -280px, var(--z-c-marine) 0%, rgba(0,34,82,0) 62%), var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] {
  background: radial-gradient(1200px 560px at 50% -300px, #eaf7fc 0%, rgba(234,247,252,0) 60%), var(--bg);
  background-attachment: fixed;
}

/* En-tête translucide */
.app-header {
  background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 30px;
}
:root[data-theme="light"] .app-header { background: color-mix(in srgb, var(--z-c-blanc) 78%, transparent); }
.brand-text strong { letter-spacing: .16em; font-weight: 700; }

/* Barre latérale + accordéon dynamique */
.sidebar {
  width: 258px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  border-right: 1px solid var(--border-soft);
  padding: 20px 14px 28px;
  display: flex; flex-direction: column;
}

/* Emblème décoratif du menu, COLLÉ AU BORD GAUCHE, même hauteur qu'avant (image transparente) */
.sidebar-mascot {
  position: sticky;              /* reste ancré au bas de la barre quand le menu défile */
  bottom: 0;
  margin: auto auto -90px -14px; /* -14px = annule le padding gauche → collé PILE au bord ; bas négatif = déborde */
  padding: 0;
  display: flex; justify-content: flex-start; align-items: flex-end;
  pointer-events: none;          /* purement décoratif : aucun effet au survol */
  z-index: 0;                    /* derrière le texte du menu */
}
/* Le texte/les onglets du menu passent AU-DESSUS de l'emblème */
.sidebar > nav { position: relative; z-index: 1; }
.sidebar-mascot img {
  height: 640px; width: auto; max-width: none; display: block;   /* taille doublée (320px → 640px) */
  opacity: .11;                  /* harmonisé avec le fond bleu (abaissée) */
  filter: saturate(1.9) brightness(1.15);   /* teinté BLEU franc : tue le gris/rose de la faible opacité */
  user-select: none; -webkit-user-drag: none;
}
.nav-group { margin-bottom: 4px; }
.nav-group-t {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-bottom: 2px; border-radius:6px;
  cursor: pointer; user-select: none;
  transition: color .15s ease, background .15s ease;
}
.nav-group-t:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.nav-chev { font-size: var(--z-t3); opacity: .5; transition: transform .24s cubic-bezier(.2,.7,.2,1); flex: none; }
.nav-group.collapsed .nav-chev { transform: rotate(-90deg); }
.nav-grp-body { overflow: hidden; max-height: 900px; opacity: 1; transition: max-height .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease; }
.nav-group.collapsed .nav-grp-body { max-height: 0; opacity: 0; }
.nav-group.collapsed .nav-group-t { color: var(--text-dim); }
.nav-group.has-active-hidden .nav-group-t { color: var(--accent); }
.nav-tab {
  border-radius:6px; padding: 9px 12px;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.nav-tab:hover { background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateX(2px); }
.nav-tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .nav-grp-body { transition: none; } .nav-chev { transition: none; } .nav-tab:hover { transform: none; }
}

/* Contenu : plus d'air, titres premium */
.app-body .app-main { max-width: 940px; padding: 40px 30px 76px; }
.view-title { font-size: 27px; font-weight: 700; letter-spacing: -.015em; margin: 2px 0 7px; }
.view-hint { font-size: var(--z-t3); line-height: 1.62; margin: 0 0 24px; }

/* Boutons premium */
.btn { border-radius:6px; transition: transform .12s ease, background .15s ease, box-shadow .16s ease, border-color .15s ease, opacity .13s ease; }
.btn-primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 7px 22px color-mix(in srgb, var(--accent) 46%, transparent); }
.btn-ghost { background: color-mix(in srgb, var(--text) 4%, transparent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 9%, transparent); border-color: var(--text-dim); }
.btn:active { transform: translateY(0); }

/* Cartes & blocs : profondeur douce + survol */
.eb-block { border-radius:6px; border-color: var(--border-soft); box-shadow: var(--shadow-sm); }
.home-card { border-radius:6px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.conf-bar { border-radius:6px; transition: border-color .15s ease, transform .12s ease; }
.conf-bar:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* Champs : focus premium */
input, textarea, select { border-radius:6px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* Transition de vue plus soyeuse */
.view:not([hidden]) { animation: viewfade .28s cubic-bezier(.2,.7,.2,1); }

/* 
   IDENTITÉ ZERVAL : refonte esthétique (fond clair conservé)
   Direction : « cyber-guardian » d'après la mascotte : navy profond + bleu
   électrique néon, neutres froids, profondeur douce, touches lumineuses
   parcimonieuses. Bloc final : surcharge proprement les règles précédentes.
 */
:root {
  --brand-ink:   var(--z-c-marine);
  --brand-blue:  var(--z-c-smart);
  --brand-blue2: var(--z-c-smart);
  --brand-grad:  linear-gradient(100deg, var(--z-c-smart) 0%, var(--z-c-marine) 52%, var(--z-c-smart) 100%);
  --brand-grad-soft: linear-gradient(120deg, var(--z-c-smart) 0%, var(--z-c-marine) 100%);
}
:root[data-theme="light"] {
  --bg:        #eaf7fc;
  --bg-soft:   var(--z-c-blanc);
  --bg-card:   var(--z-c-blanc);
  --border:    #eaf7fc;
  --border-soft:#eaf7fc;
  --text:      var(--z-c-marine);
  --text-dim:  var(--z-c-gris-1);
  --accent:    var(--z-c-smart);
  --accent-dark:var(--z-c-smart-fonce);
  --shadow-sm: 0 1px 2px rgba(0,34,82,.05), 0 6px 16px rgba(0,140,214,.07);
  --shadow:    0 2px 10px rgba(0,34,82,.07), 0 22px 48px rgba(0,140,214,.13);
}
:root[data-theme="light"] {
  /* Canvas de l'app : base accordée à la teinte claire de l'image de fond (#eaf7fc,
     identique au bas de l'écran de connexion) → transition login → app sans rupture,
     et le décor .app-fond se fond dans le même ton. Halos violet/bleu = écho du néon de l'image. */
  background:
    radial-gradient(1050px 500px at 80% -250px, color-mix(in srgb, var(--z-c-marine) 9%, transparent) 0, transparent 58%),
    radial-gradient(1200px 560px at 16% -300px, #eaf7fc 0, rgba(234,247,252,0) 56%),
    #eaf7fc;
  background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); }

/* En-tête : fin liseré électrique néon sous la barre */
.app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }   /* toujours visible (le ::after reste ancré, fixed = contexte de positionnement) */
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-grad); opacity: .85;
}
.brand { transition: transform .16s ease, filter .16s ease; }
.brand:hover { transform: translateY(-1px); filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--brand-blue) 34%, transparent)); }
.brand-logo { height: 42px; }

/* Boutons primaires : dégradé électrique + halo */
.btn-primary, :root[data-theme="light"] .btn-primary {
  background: var(--brand-grad-soft); border-color: transparent; color: var(--z-c-blanc);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-blue) 26%, transparent);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-blue) 38%, transparent); }

/* Barre latérale : indicateur électrique sur l'onglet actif */
.nav-tab.active {
  position: relative; color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--brand-blue) 11%, transparent);
}
.nav-tab.active::before {
  content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px;
  border-radius:6px; background: var(--brand-grad);
}

/* Heros : dégradé bleu électrique / violet + bord lumineux */
.pg-hero, .prot-hero, .dash-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 12%, var(--bg-soft)), color-mix(in srgb, var(--z-c-marine) 10%, var(--bg-soft)));
  border-color: color-mix(in srgb, var(--brand-blue) 18%, var(--border));
}

/* Cartes : profondeur froide + survol vivant */
.eb-block, .home-card, .home-section, .conf-panel { box-shadow: var(--shadow-sm); }
.dos-card, .doc-card, .pb-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.dos-card:hover, .doc-card:hover, .pb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand-blue) 26%, var(--border)); }

/* Badge prototype : bleu discret plutôt qu'ambre (cohérence de marque) */
.badge-proto { color: var(--accent); border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent); background: color-mix(in srgb, var(--brand-blue) 8%, transparent); }

/* Barre de défilement froide */
* { scrollbar-color: color-mix(in srgb, var(--brand-blue) 30%, var(--border)) transparent; }

/* Logos de plateforme (Windows / Android / Apple), SVG monochrome, à l'échelle du texte */
.os-ic { width: 1.18em; height: 1.18em; vertical-align: -.24em; flex: none; }
.conf-tab .os-ic { margin-right: 4px; }

/* Jeu d'icônes SVG « trait fin », cohérent, hérite couleur & taille du texte */
.nic { width: 1.18em; height: 1.18em; vertical-align: -.24em; flex: none; }
.nav-tab .nic { margin-right: 10px; opacity: .82; transition: opacity .15s ease; }
.nav-tab:hover .nic, .nav-tab.active .nic { opacity: 1; }

/* Bouton d'installation PWA (en-tête), chip discret, apparaît si installable */
.header-install {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--z-t3); font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 32%, transparent);
  border-radius:6px; padding: 6px 13px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.header-install:hover { background: color-mix(in srgb, var(--brand-blue, var(--z-c-smart)) 15%, transparent); transform: translateY(-1px); }
.header-install .nic { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
@media (max-width: 640px) { .header-install .hi-label { display: none; } .header-install { padding: 7px; } }

/* La copie en texte des notes de l'usager n'existe que pour le document rendu
   par le serveur : à l'écran, c'est la zone de saisie qui fait foi. */
.pp-evidence-doc { display: none; }

/* IMPRESSION / PDF */
@media print {
  /* LE PAPIER EST UN AUTRE SUPPORT, ET LA FEUILLE D ECRAN NE LE SAIT PAS.

     CE QUE LA VERSION PRECEDENTE DE CE BLOC NE POUVAIT PAS FAIRE. Elle posait
     ses jetons sans `!important`. Or `:root[data-theme="light"]` porte une
     specificite superieure a `:root`. Mesure du 02/09/2026 sous emulation
     `print`, valeurs CALCULEES et non ecrites : `--border` valait #eaf7fc en
     theme clair, soit 1,00 sur blanc, un filet strictement invisible, et
     rgba(255,255,255,.11) en theme sombre, soit 1,00 lui aussi. Le bloc etait
     donc muet sur ce jeton, et le chiffre de 1,48 releve par l audit ne
     decrivait ni l un ni l autre.

     IMPRIMER DEPUIS LE THEME SOMBRE RENDAIT UNE PAGE VIDE. `:root[data-theme="dark"] body`
     posait `background: transparent; color: var(--text)`, et l emportait sur le
     `body` de ce bloc : encre #f4efe4 sur papier blanc, 1,05.

     DEUX PAPIERS, PAS UN. Le blanc de la page, et le #eaf7fc des blocs de code
     et des encadres d obligation. Chaque valeur ci-dessous tient son plancher
     sur LE PIRE DES DEUX, jamais sur le blanc seul : c est la difference entre
     4,68 et 4,28 pour le vert de statut, et 4,28 est sous le plancher du texte.

     `!important` n est pas un tic : la personnalisation ecrit --accent,
     --brand-blue et --brand-blue2 en style EN LIGNE sur la racine, et un style
     en ligne l emporte sur toute regle de feuille. */
  :root {
    /* Le papier. Toutes les surfaces deviennent la page. */
    --bg: #ffffff !important; --bg-soft: #ffffff !important; --bg-card: #ffffff !important;
    --paper: #ffffff !important; --surface-opaque: #ffffff !important;
    --z-sol: #ffffff !important; --z-sol-2: #ffffff !important;
    --z-surface: transparent !important; --z-surface-h: transparent !important;

    /* L encre pleine : le marine de la charte, 14,22 sur blanc. */
    --text: #002252 !important; --ink: #002252 !important;
    --z-encre: #002252 !important; --z-color-text: #002252 !important;

    /* L encre attenuee : 6,20 sur blanc, 5,70 sur #eaf7fc.
       --z-c-gris-3 entre ici et non dans les filets : il est l encre de
       `.report-doc table.rd-mat .rd-mat-c`, une cellule de matrice imprimee. */
    --text-dim: #526277 !important; --muted: #526277 !important;
    --z-encre-2: #526277 !important; --z-color-muted: #526277 !important;
    --z-c-gris-3: #526277 !important;

    /* Les filets. 3,49 sur blanc, 3,20 sur #eaf7fc, pour un plancher de 3,0.
       --z-filet et --z-filet-fort etaient translucides (1,12 et 1,22 une fois
       composes sur la page) : sur papier, une encre a 16 % n existe pas. */
    --border: #7c8ba1 !important; --border-soft: #7c8ba1 !important;
    --line: #7c8ba1 !important; --z-color-border: #7c8ba1 !important;
    --z-filet: #7c8ba1 !important; --z-filet-fort: #7c8ba1 !important;

    /* L accent du client et ses derives. --brand-blue et --brand-blue2 sont
       ecrits en ligne par la personnalisation au meme titre que --accent. */
    --accent: #007b86 !important;
    --accent-dark: #00666f !important;
    --brand-blue: #007b86 !important;
    --brand-blue2: #00666f !important;
    --brand-grad: linear-gradient(100deg, #007b86 0%, #00666f 100%) !important;
    --brand-grad-soft: linear-gradient(120deg, #007b86 0%, #00666f 100%) !important;

    /* Le turquoise de marque servait d encre et de filet a 2,61. Il descend au
       cran fonce de la charte, qui est deja celui de l accent d impression. */
    --z-c-smart: #007b86 !important;

    /* L accent fauve du socle. 5,06 et 6,56 sur blanc. Il rendait 2,50 et 2,04. */
    --z-accent: #a35e11 !important;
    --z-accent-h: #8a5010 !important;

    /* LES STATUTS, UNE SEULE ECHELLE. La charte (--z-c-*) et le socle (--z-*)
       nommaient les memes etats avec des teintes differentes.
       Luminances sur blanc : 0,0511 critique, 0,1170 alerte, 0,1603 sain, soit
       2,29 puis 1,37 entre voisins et 3,14 entre extremes, au-dessus des 1,30
       et 1,80 qui font tenir une echelle en niveaux de gris.
       --z-c-sain passe de #0b8461 a #0a7f5d et --z-c-info de #167cbd a #136d9f :
       les deux rendaient 4,52 et 4,71 sur blanc mais 4,13 et 4,28 sur le
       #eaf7fc des encadres, sous le plancher du texte. */
    --z-c-critique: #76212a !important; --z-c-alerte: #8d5200 !important;
    --z-c-sain: #0a7f5d !important; --z-c-info: #136d9f !important;
    --crit: #76212a !important; --warn: #8d5200 !important;
    --high: #8d5200 !important; --ok: #0a7f5d !important;
    --z-crit: #76212a !important; --z-haut: #8d5200 !important;
    --z-sain: #0a7f5d !important; --z-info: #136d9f !important;
  }
  /* `!important` ici parce que `:root[data-theme="dark"] body` porte une
     specificite superieure et rendait cette declaration inoperante. */
  body { background: #ffffff !important; color: #002252 !important; }

  /* LE DECOR NE S IMPRIME PAS, ET LA REGLE QUI LE DISAIT VISAIT LA MAUVAISE
     CLASSE. `.app-fond` n apparait pas une seule fois dans index.html ; le
     calque qui peint le decor est `.app-bgfond`. La regle d impression
     existait donc sans effet, et une photographie pleine page passait derriere
     le rapport. */
  .app-bgfond, .app-fond { display: none !important; }

  /* LA BARRE LATERALE PART AUSSI. Elle n est pas seulement inutile sur papier :
     `.sidebar` prend `color-mix(in srgb, var(--bg-soft) 55%, transparent)`, donc
     la page une fois le fond passe au blanc, tandis que `.sidebar .nav-tab.active`
     garde son encre creme #f4efe4. Cela ferait de la creme sur du blanc, 1,05.
     On ne repeint pas une navigation qui n a rien a faire sur une impression. */
  .sidebar, .sidebar-account { display: none !important; }
  .app-header, .main-nav, .stepper, .wizard-nav, .report-actions, .app-footer, .badge-proto, .chat-input, .chat-suggest { display: none !important; }
  .app-main { max-width: 100%; padding: 0; }
  .report-block, .report-head, .severity-banner, .alert-rgpd {
    break-inside: avoid;
    box-shadow: none;
    border-color: var(--border);
  }
  /* Le bandeau de rapport etait un aplat #eaf7fc. Sur papier il coute de l
     encre, ne dit rien de plus qu un filet, et abaisse le contraste de tout ce
     qui s ecrit dessus. Il devient la page, avec un trait dessous. */
  .report-head { background: #ffffff; border-bottom: 1px solid var(--border); }
  a { color: #002252; text-decoration: none; }
  @page { margin: 16mm; }
}

/* FINITIONS DA, typo « tech » (mono) sur les micro-labels ============
   Calme et statique : aucune animation, aucune couleur ajoutée. */
.badge-proto, .pg-tag, .synth-tag, .srv-badge, .cf-badge, .cf-badge-ob, .cf-badge-out,
.eb-badge, .hi-label, .nav-pill, .ms-due-pill, .eb-step-n,
.prog-task-meta, .ti-meta, .srv-detail-meta, .srv-comment-meta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: .02em;
}
.eb-step-n { font-weight: 600; }

/* 
   TRAJECTOIRE : temporalité (sparklines, deltas, échéancier unifié)
 */
.traj-svg { display: block; overflow: visible; }

/* Bandeau compact dans le tableau de bord */
.traj-strip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 10px 14px; margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s; }
.traj-strip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 14%, transparent); }
.traj-strip-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius:6px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); }
.traj-strip-ic i { width: 16px; height: 16px; background: var(--z-c-blanc); }
.traj-strip-lbl { font-weight: 700; font-size: var(--z-t3); }
.traj-strip-cur { font-family: var(--mono); font-weight: 700; font-size: var(--z-t3); }
.traj-strip-cur small { color: var(--text-dim); font-weight: 500; }
.traj-strip-hint { color: var(--text-dim); font-size: var(--z-t3); }
.traj-strip .traj-svg { flex: none; }
.traj-strip-go { margin-left: auto; font-size: var(--z-t3); font-weight: 600; color: var(--accent); white-space: nowrap; }

/* Barre d'action */
.traj-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.traj-bar-info { font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); }
.traj-bar-info b { color: var(--text); }

/* Delta chip */
.traj-d { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: var(--z-t3); font-weight: 600;
  padding: 2px 8px; border-radius:6px; letter-spacing: .01em; white-space: nowrap; }
.traj-d small { font-weight: 500; opacity: .8; }
.traj-d-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.traj-d-down { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); }
.traj-d-flat { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }

/* Héros posture */
.traj-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), color-mix(in srgb, var(--violet) 12%, var(--bg-soft)));
  border: 1px solid var(--border); border-radius:6px; padding: 20px 24px; }
.traj-hero-l { flex: 1; min-width: 200px; }
.traj-hero-k { font-family: var(--mono); font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px; }
.traj-hero-v { font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.traj-hero-v small { font-size: var(--z-t5); font-weight: 600; color: var(--text-dim); }
.traj-hero-s { font-size: var(--z-t3); color: var(--text-dim); margin-top: 6px; }
.traj-hero-spark { flex: none; width: min(340px, 100%); }
.traj-hero-spark .traj-svg { width: 100%; height: 90px; }
.traj-hero-empty { align-items: center; }
.traj-hero-empty .traj-hero-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius:6px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--violet)); }
.traj-hero-empty .traj-hero-ic i { width: 26px; height: 26px; background: var(--z-c-blanc); }
.traj-hero-empty h3 { margin: 0 0 4px; font-size: var(--z-t4); }
.traj-hero-empty p { margin: 0; font-size: var(--z-t3); color: var(--text-dim); max-width: 62ch; }

/* Cartes de tendance */
.traj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; }
.traj-card { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .1s; }
.traj-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.traj-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--z-t3); color: var(--text-dim); }
.traj-card-v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.traj-card-v small { font-size: var(--z-t3); font-weight: 500; color: var(--text-dim); }
.traj-card-v .traj-na { color: var(--text-dim); }
.traj-card-spark { height: 40px; }
.traj-card-spark .traj-svg { width: 100%; height: 40px; }
.traj-card-hint { font-size: var(--z-t3); color: var(--text-dim); }

/* Échéancier unifié */
.traj-ech { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 16px 18px; }
.traj-ech-top { margin-bottom: 12px; }
.traj-ech-top h4 { margin: 0 0 2px; font-size: var(--z-t3); display: flex; align-items: center; gap: 8px; }
.traj-ech-top h4 i { width: 16px; height: 16px; background: var(--accent); }
.traj-ech-sub { font-size: var(--z-t3); color: var(--text-dim); }
.traj-ech-group { margin-top: 14px; }
.traj-ech-h { display: flex; align-items: center; gap: 8px; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 6px; }
.traj-ech-h i { width: 14px; height: 14px; background: currentColor; }
.traj-ech-n { font-family: var(--mono); font-weight: 600; background: color-mix(in srgb, var(--text-dim) 16%, transparent); color: var(--text);
  border-radius:6px; padding: 0 7px; font-size: var(--z-t3); }
.traj-b-retard .traj-ech-h { color: var(--crit); }
.traj-ech-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.traj-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--warn); border-radius:6px; padding: 9px 12px; }
.traj-sev-haute { border-left-color: var(--crit); }
.traj-sev-moyenne { border-left-color: var(--warn); }
.traj-sev-basse { border-left-color: var(--ok); }
.traj-row-when { font-family: var(--mono); font-size: var(--z-t3); font-weight: 600; white-space: nowrap; min-width: 96px; color: var(--text-dim); }
.traj-row-when.late { color: var(--crit); }
.traj-row-body { flex: 1; min-width: 0; }
.traj-row-t { display: block; font-size: var(--z-t3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.traj-row-meta { display: block; font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); margin-top: 1px; }
.traj-row-go { flex: none; font-size: var(--z-t3); font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 6px; white-space: nowrap; }
.traj-row-go:hover { text-decoration: underline; }
.traj-ech-empty { display: flex; align-items: center; gap: 10px; font-size: var(--z-t3); color: var(--text-dim); padding: 10px 4px; }
.traj-ech-empty i { width: 18px; height: 18px; background: var(--ok); flex: none; }
@media (max-width: 560px) {
  .traj-hero-v { font-size: 36px; }
  .traj-row-when { min-width: 78px; font-size: var(--z-t3); }
  .traj-strip-go { display: none; }
}

/* 
   COCKPIT unifié : sélecteur de vue (ensemble / dirigeant / analyste)
 */
.ck-switch { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.ck-b { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-radius:6px; padding: 8px 16px; font-size: var(--z-t3); color: var(--text-dim); cursor: pointer; font-weight: 600; }
.ck-b i { width: 15px; height: 15px; background: currentColor; }
.ck-b:hover { color: var(--text); }
.ck-b.on { background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--z-c-blanc); }
.ck-b.on i { background: var(--z-c-blanc); }
@media (max-width: 560px) { .ck-switch { display: flex; width: 100%; } .ck-b { flex: 1; justify-content: center; padding: 8px 8px; } }

/* 
   ACCESSIBILITÉ : anneau de focus clavier + cibles tactiles (audit a11y)
 */
/* Rétablit un focus visible au clavier même là où un outline:none a été posé,
   sans le montrer au clic souris (:focus-visible). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .nav-tab:focus-visible,
.choice-card:focus-visible, .home-card:focus-visible, .seg-b:focus-visible,
.cf-seg-b:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius:6px;
}
/* Sur écran tactile, agrandit la zone de tap des petits boutons icône. */
@media (pointer: coarse) {
  .lib-del, .cmt-btn, .msgr-del, .aud-seg-b, .bell-trigger { min-width: 40px; min-height: 40px; }
}

/* MON PROFIL + ANNUAIRE D'ÉQUIPE */
.pf-wrap { display: flex; flex-direction: column; gap: 16px; }
.pf-loading { color: var(--text-dim); font-size: var(--z-t3); padding: 20px 4px; display: flex; align-items: center; gap: 8px; }

/* Avatar (grand) */
.pf-ava {
  position: relative; width: 72px; height: 72px; border-radius:6px; flex: none;
  display: grid; place-items: center; overflow: hidden; padding: 0; border: 2px solid var(--bg-card);
  background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: var(--shadow-sm);
}
.pf-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-ava-txt { color: var(--z-c-blanc); font-size: 24px; font-weight: 700; }
.pf-ava-edit { position: relative; display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius:6px; transition: box-shadow .12s; }
.pf-ava-edit:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pf-ava-cam {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius:6px;
  background: var(--z-c-smart-fonce); color: var(--z-c-blanc); display: grid; place-items: center; border: 2px solid var(--bg-card);
}

/* Mon profil */
.pf-me-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pf-me-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-name {
  background: transparent; border: 1px solid transparent; border-radius:6px; font-family: inherit;
  font-size: var(--z-t5); font-weight: 700; color: var(--text); padding: 3px 6px; margin-left: -6px; max-width: 320px;
}
.pf-name:hover { border-color: var(--border); }
.pf-name:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.pf-role-badge { align-self: flex-start; font-size: var(--z-t3); font-weight: 700; padding: 2px 10px; border-radius:6px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.pf-role-admin { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 30%, transparent); }
.pf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pf-f { display: flex; flex-direction: column; gap: 5px; }
.pf-f > span { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); }
.pf-f input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px;
  padding: 9px 12px; font-family: inherit; font-size: var(--z-t3);
}
.pf-f input:focus { outline: none; border-color: var(--accent); }
.pf-f input:disabled { background: var(--bg-soft); color: var(--text-dim); cursor: not-allowed; }
.pf-f-wide { grid-column: 1 / -1; }
.pf-hint { margin: 12px 0 0; font-size: var(--z-t3); color: var(--text-dim); }

/* Annuaire */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pf-card {
  display: flex; align-items: flex-start; gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius:6px; padding: 13px 14px;
}
.pf-card-me { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.pf-card .pf-ava { width: 46px; height: 46px; }
.pf-card .pf-ava-txt { font-size: var(--z-t4); }
.pf-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pf-card-id strong { font-size: var(--z-t3); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-you { font-size: var(--z-t3); font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius:6px; padding: 0 6px; vertical-align: middle; }
.pf-card-role { font-size: var(--z-t3); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pf-contact { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-contact:hover { color: var(--accent); }
.pf-contact svg, .pf-contact i { width: 13px; height: 13px; flex: none; }

/* Rôle applicatif, étiquette inline sur les cartes de l'annuaire + contrôles du propriétaire. */
.pf-role-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: var(--z-t3); font-weight: 700;
  padding: 1px 8px; border-radius:6px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.pf-role-tag.pf-role-member { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 10%, transparent); border-color: var(--border); }
.pf-role-tag.pf-role-admin { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 30%, transparent); }
.pf-card-admin { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pf-role-sel { font-size: var(--z-t3); padding: 4px 8px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-card); color: var(--text); }
.pf-card-rm { font-size: var(--z-t3); font-weight: 600; padding: 4px 10px; border-radius:6px; cursor: pointer;
  color: var(--crit); background: transparent; border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); }
.pf-card-rm:hover { background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* Avatar UNIQUE Zerval (.n-avatar), photo / initiales / non assigné ============
   Un seul composant pour la puce compte, l'annuaire, la messagerie, le suivi et la crise.
   Dégradé accent→violet unique, initiales sans-serif 700, photo en fond couvrant. */
.n-avatar {
  --n-av: 32px;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: var(--n-av); height: var(--n-av); flex: none;
  border-radius: 50%; overflow: hidden;
  font-family: inherit; font-weight: 700; font-size: calc(var(--n-av) * .42);
  line-height: 1; text-transform: uppercase; letter-spacing: .01em;
  color: var(--z-c-blanc); background: linear-gradient(135deg, var(--accent), var(--violet));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  user-select: none;
}
.n-avatar--xs { --n-av: 24px; }
.n-avatar--sm { --n-av: 32px; }
.n-avatar--md { --n-av: 46px; }
.n-avatar--lg { --n-av: 72px; }
.n-avatar img { width: 100%; height: 100%; object-fit: cover; }
.n-avatar--empty { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
.n-avatar--empty svg { width: 58%; height: 58%; }

/* Mon compte (espace personnel) + résumé profil */
.cpt-wrap { display: flex; flex-direction: column; gap: 16px; }
.pf-name-ro { font-size: var(--z-t4); font-weight: 700; color: var(--text); }
.pf-me-poste { font-weight: 500; color: var(--text-dim); font-size: var(--z-t3); }
.pf-me-head .pf-goto-compte { margin-left: auto; align-self: center; }
.cpt-access { display: flex; align-items: center; gap: 10px; font-size: var(--z-t3); color: var(--text);
  padding: 12px 14px; border-radius:6px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ok, var(--z-c-sain)) 8%, transparent); }
.cpt-access i { color: var(--ok, var(--z-c-sain)); flex: none; }
.cpt-access-warn { background: color-mix(in srgb, var(--crit) 8%, transparent); }
.cpt-access-warn i { color: var(--crit); }
.cpt-msg { font-size: var(--z-t3); margin: 8px 0 0; }
.cpt-msg.cpt-ok { color: var(--ok, var(--z-c-sain)); }
.cpt-msg.cpt-err { color: var(--crit); }
.cpt-danger { border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); }
.cpt-danger h4 i { color: var(--crit); }
.btn-danger { color: var(--z-c-blanc); background: var(--crit); border: 1px solid var(--crit); }
.btn-danger:hover { filter: brightness(.92); }

/* Demandes d'adhésion à l'entreprise (le propriétaire décide, avec les infos du demandeur). */
.pf-reqs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pf-req-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-card); }
.pf-req-id { display: flex; flex-direction: column; min-width: 140px; flex: 1; }
.pf-req-id strong { font-size: var(--z-t3); color: var(--text); }
.pf-req-meta { font-size: var(--z-t3); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.pf-req-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-req-role { font-size: var(--z-t3); padding: 5px 8px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-card); color: var(--text); }

/* Invitations d'entreprise */
.pf-invite-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius:6px; background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); font-size: var(--z-t3); color: var(--text); }
.pf-invite-banner i, .pf-invite-banner svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.pf-invite-banner span { flex: 1; min-width: 160px; }
.pf-invite-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pf-invite-h { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.pf-invite { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-invite #pf-inv-email { flex: 1; min-width: 180px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 12px; font-family: inherit; font-size: var(--z-t3); }
.pf-invite select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 10px; font-family: inherit; font-size: var(--z-t3); }
.pf-invites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pf-inv-row { display: flex; align-items: center; gap: 10px; font-size: var(--z-t3); padding: 6px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; }
.pf-inv-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pf-inv-badge { font-size: var(--z-t3); color: var(--text-dim); white-space: nowrap; }
.pf-inv-x { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--z-t3); padding: 2px 6px; border-radius:6px; flex: none; }
.pf-inv-x:hover { color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* SUIVI D'ÉQUIPE (Kanban / Gantt / Charge) */
/* Couleur sémantique par statut, portée par une variable --c. */
.su-bar-todo, .su-h-todo, .su-num.su-bar-todo { --c: var(--z-c-gris-1); }
.su-bar-mid,  .su-h-mid,  .su-num.su-bar-mid  { --c: var(--accent); }
.su-bar-blk,  .su-h-blk,  .su-num.su-bar-blk  { --c: var(--crit); }
.su-bar-ok,   .su-h-ok,   .su-num.su-bar-ok   { --c: var(--ok); }
.su-bar-late { --c: var(--crit); }

.su-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.su-switch { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 4px; }
.su-b { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: var(--z-t3); font-weight: 600; padding: 7px 14px; border-radius:6px; cursor: pointer; transition: background .12s, color .12s; }
.su-b:hover { color: var(--text); }
.su-b.on { background: var(--z-c-smart-fonce); color: var(--z-c-blanc); }
.su-b i { width: 15px; height: 15px; }
.su-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.su-pri { font-size: var(--z-t3); font-weight: 700; padding: 1px 7px; border-radius:6px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.su-pri.r-crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); }
.su-pri.r-mid  { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.su-pri.r-low  { color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--border); }

/* Avatars */
.su-ava { width: 26px; height: 26px; border-radius:6px; flex: none; display: grid; place-items: center; font-size: var(--z-t3); font-weight: 700; color: var(--z-c-blanc); background: linear-gradient(135deg, var(--accent), var(--violet)); background-size: cover; background-position: center; }
.su-ava-none { background: var(--bg-card); color: var(--text-dim); border: 1px dashed var(--border); }
.su-ava-none i { width: 13px; height: 13px; }
.su-ava-lg { width: 36px; height: 36px; font-size: var(--z-t3); }

/* Ajout rapide */
.su-quickadd { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.su-quickadd #su-add-t { flex: 1; min-width: 200px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 12px; font-family: inherit; font-size: var(--z-t3); }
.su-quickadd select { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius:6px; padding: 9px 10px; font-family: inherit; font-size: var(--z-t3); }

/* Kanban */
.su-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.su-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; display: flex; flex-direction: column; min-height: 120px; }
.su-col-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: var(--z-t3); border-bottom: 2px solid var(--c); border-radius:6px; color: var(--text); }
.su-col-h .su-col-n { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: var(--z-t3); padding: 0 8px; border-radius:6px; min-width: 22px; text-align: center; }
.su-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; flex: 1; transition: background .12s; border-radius:6px; }
.su-col-over { background: color-mix(in srgb, var(--accent) 9%, transparent); outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -4px; }
.su-col-empty { color: var(--text-dim); font-size: var(--z-t3); text-align: center; padding: 18px 8px; border: 1px dashed var(--border); border-radius:6px; }

.su-card { background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; padding: 10px 11px; box-shadow: var(--shadow-sm); cursor: grab; display: flex; flex-direction: column; gap: 8px; }
.su-card:active { cursor: grabbing; }
.su-card.su-drag { opacity: .45; }
.su-card-done { opacity: .68; }
.su-card-done .su-card-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
.su-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-src { font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-card-t { font-size: var(--z-t3); font-weight: 600; line-height: 1.35; color: var(--text); }
/* Assignation par avatar cliquable (façon photo de profil) */
.su-assign-wrap { position: relative; align-self: flex-start; max-width: 100%; }
.su-assign-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; border-radius:6px; padding: 3px 10px 3px 3px; cursor: pointer; font-family: inherit; max-width: 100%; transition: background .12s, border-color .12s; }
.su-assign-btn:hover { background: var(--bg-soft); border-color: var(--border); }
.su-assign-name { font-size: var(--z-t3); font-weight: 600; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-assign-name.su-assign-none { color: var(--text-dim); font-weight: 500; }
.su-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; max-height: 240px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius:6px; box-shadow: var(--shadow); padding: 5px; }
.su-pick-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; border-radius:6px; padding: 7px 9px; cursor: pointer; font-family: inherit; font-size: var(--z-t3); color: var(--text); }
.su-pick-item:hover { background: var(--bg-soft); }
.su-pick-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.su-pick-free { color: var(--text-dim); font-size: var(--z-t3); font-weight: 400; }

/* Dates début → échéance */
.su-card-dates { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: var(--z-t3); }
.su-dt-ic { width: 13px; height: 13px; flex: none; }
.su-card-dates input[type="date"] { background: transparent; border: 1px solid transparent; border-radius:6px; color: var(--text-dim); font-family: inherit; font-size: var(--z-t3); padding: 1px 3px; flex: 1; min-width: 0; cursor: pointer; }
.su-card-dates input[type="date"]:hover { border-color: var(--border); }
.su-card-dates input.su-late { color: var(--crit); font-weight: 600; }
.su-arrow { color: var(--border); flex: none; }
.su-badge-late { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: var(--z-t3); font-weight: 600; color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); padding: 2px 8px; border-radius:6px; }
.su-badge-late i { width: 12px; height: 12px; }

/* Gantt / échéancier */
.su-gantt { padding: 14px; }
.su-g-scroll { overflow-x: auto; }
.su-g-head, .su-g-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; }
.su-g-head { position: sticky; top: 0; z-index: 2; }
.su-g-lbl { font-size: var(--z-t3); color: var(--text); padding: 6px 10px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-g-lbl-h { font-weight: 700; color: var(--text-dim); text-transform: uppercase; font-size: var(--z-t3); letter-spacing: .04em; }
.su-g-track { position: relative; height: 26px; min-width: 520px; }
.su-g-axis { height: 30px; border-bottom: 1px solid var(--border); }
.su-g-week { position: absolute; top: 6px; font-size: var(--z-t3); color: var(--text-dim); font-family: var(--mono); padding-left: 4px; border-left: 1px solid var(--border-soft); height: 22px; box-sizing: border-box; white-space: nowrap; }
.su-g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--violet); z-index: 3; }
.su-g-today::after { content: "auj."; position: absolute; top: 2px; left: 3px; font-size: var(--z-t3); color: var(--violet); font-weight: 700; }
.su-g-rows { border-top: 1px solid var(--border-soft); }
.su-g-row { border-bottom: 1px solid var(--border-soft); }
.su-g-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.su-g-bar { position: absolute; top: 5px; height: 16px; background: var(--c); border-radius:6px; display: flex; align-items: center; overflow: hidden; box-shadow: 0 1px 3px rgba(0,34,82,.15); min-width: 6px; }
.su-g-bar-txt { font-size: var(--z-t3); color: var(--z-c-blanc); font-weight: 600; padding: 0 6px; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.su-bar-late.su-g-bar { background: repeating-linear-gradient(45deg, var(--crit), var(--crit) 6px, color-mix(in srgb, var(--crit) 70%, var(--z-c-marine)) 6px, color-mix(in srgb, var(--crit) 70%, var(--z-c-marine)) 12px); }
.su-g-group { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-weight: 700; font-size: var(--z-t3); color: var(--text); border-bottom: 1px solid var(--border-soft); margin-top: 4px; }
.su-g-group .su-g-count { margin-left: auto; color: var(--text-dim); font-size: var(--z-t3); font-weight: 600; background: var(--bg-soft); border-radius:6px; padding: 0 8px; }
.su-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.su-lg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-t3); color: var(--text-dim); }
.su-dot { width: 11px; height: 11px; border-radius:6px; background: var(--c); display: inline-block; }
.su-undated { display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius:6px; padding: 4px 11px 4px 6px; font-size: var(--z-t3); color: var(--text); }

/* Charge d'équipe */
.su-team { display: flex; flex-direction: column; }
.su-team-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.su-team-row:last-child { border-bottom: none; }
.su-team-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.su-team-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.su-team-id strong { font-size: var(--z-t3); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-team-sub { font-size: var(--z-t3); color: var(--text-dim); }
.su-team-bar { display: flex; height: 12px; border-radius:6px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); }
.su-seg { background: var(--c); min-width: 3px; }
.su-team-nums { display: flex; gap: 6px; }
.su-num { min-width: 26px; text-align: center; font-size: var(--z-t3); font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius:6px; padding: 3px 0; }

@media (max-width: 900px) {
  .su-board { grid-template-columns: repeat(4, minmax(200px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .su-team-row { grid-template-columns: 1fr auto; }
  .su-team-bar { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 560px) {
  .su-toolbar { flex-direction: column; align-items: stretch; }
  .su-switch { justify-content: center; }
}

/* 
   Moteur IA (Mon compte) : choix souverain, gouverné côté serveur.
   Moteur souverain unique : Mistral (France/UE).
 */
.ai-flag { height: 14px; width: auto; max-width: 26px; border-radius:6px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 1px 2px rgba(0,34,82,.12); flex: none; vertical-align: middle; }

/* Badge « moteur actif » */
.ai-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
.ai-current-lbl { font-size: var(--z-t3); color: var(--text-dim); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ai-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.ai-badge-lbl { font-weight: 700; color: var(--text); }
.ai-badge-juris { font-size: var(--z-t3); color: var(--text-dim); }
.ai-badge-juris::before { content: "·"; margin-right: 8px; color: color-mix(in srgb, var(--text-dim) 55%, transparent); }

/* Liste d'implications réglementaires / données */
.ai-impl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ai-impl li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--z-t3); line-height: 1.45; color: var(--text); }
.ai-impl li i { margin-top: .12em; font-size: var(--z-t4); flex: none; }
.ai-impl li em { font-style: italic; opacity: .95; }
.ai-impl-ok i   { color: var(--ok); }
.ai-impl-info i { color: var(--accent); }
.ai-impl-warn i { color: var(--warn); }
.ai-impl-box { padding: 12px 14px; border: 1px solid var(--border); border-radius:6px; background: color-mix(in srgb, var(--bg) 55%, var(--bg-soft)); }

/* Bandeau « moteur IA à confirmer » (nouvel utilisateur / changement non acquitté) */
.ai-ackbar { display: flex; gap: 11px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--warn) 9%, var(--bg-soft)); margin-bottom: 14px; }
.ai-ackbar > i { color: var(--warn); font-size: var(--z-t5); flex: none; margin-top: .1em; }
.ai-ackbar-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ai-ackbar-body > strong { color: var(--text); }
.ai-ackbar-body > p { margin: 0; font-size: var(--z-t3); color: var(--text-dim); }

/* Éditeur : deux options radio + implications live + consentement + mot de passe */
.ai-editor { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 15px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.ai-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 560px) { .ai-opts { grid-template-columns: 1fr; } }
.ai-opt { position: relative; display: block; cursor: pointer; padding: 13px 14px; border: 1.5px solid var(--border); border-radius:6px; background: var(--bg); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.ai-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ai-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ai-opt-cur { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-soft)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.ai-opt-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ai-opt-head b { color: var(--text); }
.ai-opt-juris { font-size: var(--z-t3); color: var(--text-dim); flex-basis: 100%; }
.ai-reco { margin-left: auto; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); padding: 2px 8px; border-radius:6px; }

/* Consentement « en connaissance de cause » */
.ai-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--z-t3); line-height: 1.45; color: var(--text); cursor: pointer; }
.ai-consent input { margin-top: .16em; width: 17px; height: 17px; flex: none; accent-color: var(--accent); }

/* Historique des décisions (transparence d'équipe) */
.ai-hist { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--border); border-radius:6px; overflow: hidden; }
.ai-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; font-size: var(--z-t3); }
.ai-hist li:nth-child(odd) { background: color-mix(in srgb, var(--bg) 50%, var(--bg-soft)); }
.ai-hist-when { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-hist-typ { color: var(--text); font-weight: 600; }
.ai-hist-prov { margin-left: auto; color: var(--accent); font-weight: 700; }
.ai-hist-by { flex-basis: 100%; font-size: var(--z-t3); color: var(--text-dim); }

/* Modale de verrou « moteur IA à confirmer » (assistant), non contournable */
.ai-gate-ov { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--brand-ink) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: aiGateIn .16s ease; }
@keyframes aiGateIn { from { opacity: 0; } to { opacity: 1; } }
.ai-gate { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px 22px 18px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); box-shadow: var(--shadow); }
.ai-gate h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--z-t4); color: var(--text); }
.ai-gate-lead { margin: 0 0 14px; font-size: var(--z-t3); line-height: 1.5; color: var(--text-dim); }
.ai-gate .ai-impl { margin-bottom: 6px; }
.ai-gate-err { margin: 10px 0 0; font-size: var(--z-t3); color: var(--warn); }
.ai-gate-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) { .ai-gate-bar { flex-direction: column-reverse; } .ai-gate-bar .btn { width: 100%; } }

/* 
   Signalement de bugs / ticketing.
 */
/* Modale */
.bug-ov { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, var(--brand-ink) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: aiGateIn .16s ease; }
.bug-modal { width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius:6px; background: var(--bg-soft); box-shadow: var(--shadow); overflow: hidden; }
.bug-modal-wide { width: min(980px, 100%); }
.bug-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.bug-modal-h h3 { margin: 0; font-size: var(--z-t4); color: var(--text); }
.bug-x { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 0 4px; }
.bug-x:hover { color: var(--text); }
.bug-modal-b { padding: 18px 20px; overflow-y: auto; }

/* Onglets */
.bug-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.bug-tab { border: 0; background: none; padding: 9px 12px; font: inherit; font-weight: 600; font-size: var(--z-t3); color: var(--text-dim);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bug-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.bug-tab-admin { margin-left: auto; color: color-mix(in srgb, var(--brand-blue) 80%, var(--text-dim)); }

/* Formulaire */
.bug-lead { margin: 0 0 14px; color: var(--text-dim); font-size: var(--z-t3); line-height: 1.5; }
.bug-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .bug-row { grid-template-columns: 1fr; } }
.bug-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.bug-f > span { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); }
.bug-f input, .bug-f select, .bug-f textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius:6px;
  background: var(--bg-card); color: var(--text); font: inherit; }
.bug-f textarea { resize: vertical; min-height: 90px; }
.bug-f input:focus, .bug-f select:focus, .bug-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.bug-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* pot de miel */
.bug-ctxhint { margin: 4px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.bug-msg { margin: 12px 0 0; font-size: var(--z-t3); }
.bug-ok { color: var(--ok); } .bug-err { color: var(--warn); }
.bug-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 560px) { .bug-bar { flex-direction: column-reverse; } .bug-bar .btn { width: 100%; } }

/* Confirmation */
.bug-done { text-align: center; padding: 12px 0; }
.bug-done i { font-size: 2.4em; color: var(--ok); }
.bug-done h4 { margin: 8px 0 6px; color: var(--text); }
.bug-done p { margin: 0 0 8px; color: var(--text-dim); }
.bug-done .bug-bar { justify-content: center; }

/* Listes / pills */
.bug-loading, .bug-empty { color: var(--text-dim); font-size: var(--z-t3); padding: 10px 0; }
.bug-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bug-list li { border: 1px solid var(--border); border-radius:6px; padding: 10px 12px; background: var(--bg-card); }
.bug-li-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bug-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; color: var(--accent); }
.bug-li-s { margin: 4px 0 2px; color: var(--text); font-weight: 500; }
.bug-li-m { font-size: var(--z-t3); color: var(--text-dim); }
.bug-pill { font-size: var(--z-t3); font-weight: 700; padding: 2px 9px; border-radius:6px; white-space: nowrap; }
.bug-pill-open { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bug-pill-in_progress { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.bug-pill-resolved { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.bug-pill-closed { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); }
.bug-sev { font-size: var(--z-t3); font-weight: 700; padding: 1px 7px; border-radius:6px; }
.bug-sev-high { color: var(--z-c-critique); background: color-mix(in srgb, var(--z-c-critique) 13%, transparent); }
.bug-sev-normal { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
.bug-sev-low { color: var(--text-dim); }

/* Panneau admin */
.bug-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bug-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); font: inherit; font-size: var(--z-t3);
  font-weight: 600; padding: 5px 11px; border-radius:6px; cursor: pointer; }
.bug-chip.is-active { color: var(--z-c-blanc); background: var(--brand-grad-soft); border-color: transparent; }
.bug-tablewrap { overflow-x: auto; }
.bug-table { width: 100%; border-collapse: collapse; font-size: var(--z-t3); }
.bug-table th { text-align: left; padding: 8px 10px; color: var(--text-dim); font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bug-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.bug-trow { cursor: pointer; }
.bug-trow:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bug-tsubj { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bug-twho, .bug-tdate { color: var(--text-dim); white-space: nowrap; }

/* Détail d'un ticket */
.bug-detail { margin-top: 16px; border: 1px solid var(--border); border-radius:6px; padding: 16px; background: var(--bg-card); }
.bug-d-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bug-d-who { font-size: var(--z-t3); color: var(--text-dim); margin-left: auto; }
.bug-detail h4 { margin: 4px 0 10px; color: var(--text); }
.bug-d-body { white-space: pre-wrap; word-break: break-word; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius:6px; padding: 12px; font: inherit; font-size: var(--z-t3); color: var(--text); }
.bug-ctx { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: var(--z-t3); }
.bug-ctx td { padding: 3px 10px 3px 0; color: var(--text-dim); vertical-align: top; word-break: break-all; }
.bug-ctx td:first-child { font-weight: 600; white-space: nowrap; text-transform: uppercase; font-size: var(--z-t3); }
.bug-errs { margin: 8px 0; font-size: var(--z-t3); color: var(--warn); }
.bug-errs ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); }
.bug-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.bug-actions-l { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); margin-right: 4px; }
.bug-comment { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.bug-comment textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-soft); color: var(--text); font: inherit; resize: vertical; }
.bug-timeline { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.bug-timeline > b { font-size: var(--z-t3); color: var(--text-dim); }
.bug-timeline ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bug-ev-h { font-size: var(--z-t3); color: var(--text-dim); }
.bug-ev-b { margin-top: 3px; font-size: var(--z-t3); color: var(--text); white-space: pre-wrap; }
.bug-ai { margin: 12px 0; }
.bug-ai .ai-inline { margin-top: 10px; }

/* 
   Playbooks : moteur de conduite d'incident (filtres, adaptatif, opérationnel).
 */
.pb-picker { display: block; }                       /* contient désormais filtres + grille */
.pb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pb-fchip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); font: inherit; font-size: var(--z-t3); font-weight: 600; padding: 6px 14px; border-radius:6px; cursor: pointer; }
.pb-fchip.is-active { color: var(--z-c-blanc); background: var(--brand-grad-soft); border-color: transparent; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pb-cardmeta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pb-aud { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius:6px; }
.pb-aud-pro { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pb-aud-perso { color: var(--z-c-alerte); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pb-aud-both { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
.pb-cardprog { margin-left: auto; font-size: var(--z-t3); font-weight: 700; color: var(--ok); }

/* En-tête d'un playbook */
.pb-back { flex-wrap: wrap; }
.pb-fw { margin-left: 10px; font-size: var(--z-t3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius:6px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; }

/* Bandeau adaptatif (questions oui/non) */
.pb-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid color-mix(in srgb, var(--brand-blue) 22%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 5%, var(--bg-soft)); }
.pb-toggles-l { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); }
.pb-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: var(--z-t3); color: var(--text); cursor: pointer; }
.pb-toggle input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* Objectif de délai (SLA) par phase */
.pb-sla { margin-left: 10px; font-size: var(--z-t3); font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-radius:6px; padding: 1px 8px; vertical-align: middle; white-space: nowrap; }

/* Étape opérationnelle : ligne principale + badges + détail (scopé sous .pb-tasks) */
.pb-tasks .pp-task { display: block; cursor: default; }
.pb-tasks .pp-task-main { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.pb-tasks .pp-task.is-crit { border-left: 3px solid var(--z-c-critique); }
.pb-tasks .pp-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 7px 0 0 31px; }
.pb-tasks .pp-task.is-done .pp-task-t { text-decoration: line-through; }
.pp-crit { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--z-c-critique); background: color-mix(in srgb, var(--z-c-critique) 12%, transparent); padding: 1px 7px; border-radius:6px; }
.pp-ev { font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; }
.pp-done-by { font-size: var(--z-t3); color: var(--ok); font-weight: 600; }
.pp-more { margin-left: auto; border: 0; background: none; color: var(--text-dim); font-size: var(--z-t4); line-height: 1; cursor: pointer; padding: 0 8px; border-radius:6px; }
.pp-more:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.pp-detail { margin: 10px 0 2px 31px; display: flex; flex-direction: column; gap: 8px; }
.pp-ev-hint { margin: 0; font-size: var(--z-t3); color: var(--text-dim); }
.pp-assign { max-width: 260px; padding: 7px 10px; border: 1px solid var(--border); border-radius:6px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--z-t3); }
.pp-note { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius:6px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--z-t3); resize: vertical; }

/* IA-native : sélecteur intelligent + rédaction de communications */
.pb-reco { border: 1px solid color-mix(in srgb, var(--brand-blue) 24%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 5%, var(--bg-soft)); padding: 14px 16px; margin-bottom: 18px; }
.pb-reco-l { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--z-t3); color: var(--text); margin-bottom: 9px; }
.pb-reco-l .gi-ai { color: var(--violet, var(--z-c-marine)); }
.pb-reco-row { display: flex; gap: 10px; align-items: stretch; }
.pb-reco-row textarea { flex: 1; padding: 9px 11px; border: 1px solid var(--border); border-radius:6px; background: var(--bg-card); color: var(--text); font: inherit; font-size: var(--z-t3); resize: vertical; min-height: 44px; }
.pb-reco-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.pb-reco-row .btn { white-space: nowrap; }
@media (max-width: 560px) { .pb-reco-row { flex-direction: column; } }
.pb-reco-box { margin-top: 12px; }
.pb-reco-out { display: flex; gap: 10px; align-items: flex-start; }
.pb-reco-out > .gi-ai { color: var(--violet, var(--z-c-marine)); font-size: var(--z-t5); flex: none; margin-top: 2px; }
.pb-reco-body { font-size: var(--z-t3); line-height: 1.5; color: var(--text); }
.pb-reco-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pb-comms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pb-comms-l { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); margin-right: 2px; }
.pb-comms .ai-inline { flex-basis: 100%; }

/* Indicateur de collaboration (progression partagée serveur vs locale) */
.pb-collab { display: flex; align-items: center; gap: 6px; font-size: var(--z-t3); margin: -6px 0 14px; }
.pb-collab i { font-size: var(--z-t4); }
.pb-collab-shared { color: var(--ok); }
.pb-collab-local { color: var(--text-dim); }
.pb-presence { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 12%, transparent); color: var(--accent); font-weight: 600; }
.pb-presence i { font-size: var(--z-t4); }

/* Bandeau réglementaire adapté au pays (country.js) */
.pb-reg-ctx { display: flex; align-items: center; gap: 8px; font-size: var(--z-t3); color: var(--text); padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, var(--border)); border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 5%, var(--bg-soft)); margin: 4px 0; }
.pb-reg-ctx .gi-globe { color: var(--brand-blue); flex: none; }
.pb-reg-note { margin: 8px 0 0; font-size: var(--z-t3); color: var(--warn); }
.reg-obl-h { margin: 0 0 8px; font-weight: 700; font-size: var(--z-t3); color: var(--text); }
.reg-obl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reg-obl li { padding: 9px 12px; border-radius:6px; border: 1px solid var(--border); font-size: var(--z-t3); line-height: 1.45; border-left-width: 3px; }
.reg-obl-bad { border-left-color: var(--z-c-critique); background: color-mix(in srgb, var(--z-c-critique) 6%, transparent); }
.reg-obl-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.reg-obl-ok { border-left-color: var(--ok); }

/* App : fond de marque calme (Mist) + filigrane serval, fond animé & réseau retirés (identité Zerval) */
.app-bgfond zerval-animated-background{display:none!important}
.app-bgfond{background:#f4f7fa!important;opacity:1!important;overflow:hidden}

/* ===== NARA in-app : presence L'Affut (meme design que le site : onglet vertical au bord droit) ===== */
.ai-fab{ right:0 !important; bottom:auto !important; top:50% !important; transform:translateY(-50%) !important;
  flex-direction:column !important; gap:11px !important; width:50px !important; padding:13px 0 14px !important;
  background:var(--z-c-nuit) !important; color:var(--z-c-creme) !important; border:1px solid rgba(255,255,255,.14) !important; border-right:0 !important;
  border-radius:10px 0 0 10px !important; box-shadow:-9px 0 28px rgba(0,0,0,.44) !important; }
.ai-fab:hover{ width:56px !important; filter:none !important; transform:translateY(-50%) !important; background:var(--z-c-nuit) !important;
  border-color:rgba(61,166,232,.55) !important; box-shadow:-13px 0 36px rgba(0,0,0,.52) !important; }
.ai-fab-ic{ width:34px !important; height:34px !important; object-position:50% 12%; box-shadow:none !important; background:var(--z-c-nuit) !important; }
/* LES LETTRES DEBOUT, corrige pour TOUS les themes. La rotation de 180
   degres couchait le nom sur le flanc, lisible de bas en haut. Le socle
   redressait deja cela, mais seulement sous `[data-theme="dark"]` : en
   theme clair le defaut restait entier. `text-orientation: upright`
   empile les lettres sans les coucher, et la rotation n'a plus d'objet. */
.ai-fab-t{ writing-mode:vertical-rl; text-orientation:upright; font:600 11px/1 'JetBrains Mono',ui-monospace,monospace !important;
  letter-spacing:.24em !important; text-transform:uppercase; color:var(--z-c-gris-2) !important; display:block !important; }
.ai-fab::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--z-c-info); box-shadow:0 0 7px rgba(61,166,232,.8); flex:0 0 auto; }
@media (max-width:640px){ .ai-fab-t{ display:none !important; } }
/* FOND-PICKER-SMART : picker de fond d'application (vue Mon compte), porte de Pro. */
.brd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brd-upload { cursor: pointer; }
.brd-note { margin: 12px 0 0; font-size: var(--z-t3); color: var(--text-dim,var(--z-c-gris-1)); }
.brd-fond-block { margin-top: 18px; }
.brd-fonds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 10px; }
.brd-fond { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line,var(--z-c-nuit)); border-radius: 6px; background: var(--card,var(--z-c-nuit)); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.brd-fond:hover { border-color: var(--accent,var(--z-c-info)); }
.brd-fond.on { border-color: var(--accent,var(--z-c-info)); box-shadow: inset 0 0 0 1px var(--accent,var(--z-c-info)); }
.brd-fond-vue { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--bg-soft,var(--z-c-nuit)); }
.brd-fond-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brd-fond-vide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted,var(--z-c-gris-1)); }
.brd-fond-t { font-size: var(--z-t1); font-weight: 600; }
.brd-fond-h { margin: 16px 0 0; font-size: var(--z-t1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted,var(--z-c-gris-1)); }