/* 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). 52 couleurs en dur ramenees a 11 jetons.
   Chaque valeur est LA TEINTE MAJORITAIRE de sa famille, pas une valeur
   inventee : cette passe unifie sans repeindre. Voir systeme.css pour les
   roles semantiques, qui sont une autre affaire. */
:root{
  --z-c-alerte:#b45309;
  --z-c-blanc:#ffffff;
  --z-c-creme:#f4efe4;
  --z-c-critique:#b42318;
  --z-c-encre:#14171b;
  --z-c-gris-1:#526277;
  --z-c-gris-2:#9fb4cf;
  --z-c-gris-3:#c6d3e4;
  --z-c-info:#3da6e8;
  --z-c-nuit:#0f1319;
  --z-c-sain:#1a7f37;
}
/*
 * © 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
 */
/* 
   Zerval : Diagnostic & Analyse Post-Incident
   styles.css : thème sombre "outil de sécurité", responsive + styles print.
 */

/* Typo Inter AUTO-HÉBERGÉE (souveraineté : plus aucune requête vers Google Fonts).
   Police variable (un seul fichier couvre tous les poids 100→900) ; font-display:swap. */
/* 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:100 900;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:100 900;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:100 900;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:100 900;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;}

:root {
  --bg:        var(--z-c-encre);
  --bg-soft:   var(--z-c-encre);
  --bg-card:   var(--z-c-encre);
  --border:    var(--z-c-encre);
  --border-soft:var(--z-c-encre);
  --text:      #eaf7fc;
  --text-dim:  var(--z-c-info);
  --accent:    var(--z-c-info);
  --accent-dark:var(--z-c-info);
  /* Design System ZERVAL V1.0, tokens OFFICIELS (source de vérité technique, kit d'implémentation) */
  --z-color-midnight:var(--z-c-encre); --z-color-navy:var(--z-c-encre); --z-color-deep:var(--z-c-info);
  --z-color-azure:var(--z-c-info); --z-color-cyan:var(--z-c-info); --z-color-pro-blue:var(--z-c-info); --z-color-smart-cyan:var(--z-c-info);
  --z-color-success:var(--z-c-sain); --z-color-warning:var(--z-c-alerte); --z-color-danger:var(--z-c-critique);
  --z-color-surface:#eaf7fc; --z-color-border:#eaf7fc; --z-color-text:var(--z-c-encre); --z-color-muted:var(--z-c-gris-1); --z-color-white:var(--z-c-blanc);
  --z-font-display:"Inter Display", Inter, system-ui, sans-serif; --z-font-body:Inter, system-ui, sans-serif;
  --z-focus:2px solid var(--z-color-cyan);
  /* Charte V4.1, alias de marque (constantes, héritées par le thème clair) */
  --midnight:  var(--z-c-encre);   /* STRUCTURANTE : chrome sombre, titres, surfaces principales */
  --deep:      var(--z-c-nuit);   /* fonds foncés / écrans premium (barre latérale) */
  --azure:     var(--z-c-info);   /* SIGNAL : liseré actif, yeux du serval : jamais texte courant sur blanc */
  --cyan:      var(--z-c-info);   /* focus (anneau clavier) */
  --violet:    var(--z-c-encre);
  --magenta:   var(--z-c-info);
  --grad: linear-gradient(120deg,var(--z-c-encre),var(--z-c-info));
  --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: 'Fraunces', Georgia, 'Times New Roman', 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(--accent); 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(--cyan); outline-offset: 2px; border-radius:6px; }   /* anneau focus cyan (kit V1.0) */
#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;   /* officiel (kit V1.0) */
  --border-soft:#eaf7fc;
  --text:      var(--z-c-encre);   /* officiel (kit V1.0) */
  --text-dim:  var(--z-c-gris-1);   /* officiel (kit V1.0 : muted) */
  --accent:    var(--z-c-info);
  --accent-dark:var(--z-c-info);
  --violet:    var(--z-c-encre);
  --shadow:    0 8px 30px rgba(0,34,82,.12);
  /* Sémantiques : succès aligné sur le kit ; warn/crit gardés plus foncés pour rester ≥4.5:1 en TEXTE
     (le kit var(--z-c-alerte)/var(--z-c-critique) sont des couleurs de SIGNAL, toujours accompagnées d'icône+libellé). */
  --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 : il reste blanc « comme il est » et ne prend pas le fond bleuté
   au travers de sa translucidité (le fond ne teinte QUE le centre). */
:root[data-theme="light"] .sidebar { background: var(--deep); }   /* charte V4.1 : barre latérale navy en thème clair aussi */
: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 très estompé, derrière
   TOUT le contenu (transparence esthétique). Le menu et les panneaux opaques passent au-dessus ;
   le décor n'apparaît qu'au centre et dans les espaces vides. */
.app-bgfond {
  position: fixed; inset: 0; z-index: -1;
  background: url("../img/fonds-zerval.jpg") center center / cover no-repeat;
  opacity: .8;                 /* fond de marque officiel (charte V4.1 : filigrane bleuté clair, centre calme) */
  pointer-events: none;
  overflow: hidden;
}
/* Fond de marque ANIMÉ (vidéo en boucle), le poster jpg 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-encre), 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-encre) 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(--accent); border-color: var(--accent); 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: start;
  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-dark); }
.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-dark); }
.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-inline-start: 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(--deep); border-inline-end: 1px solid rgba(255,255,255,.07);   /* charte V4.1 : chrome NAVY */
  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-encre) 58%, transparent 100%);
          mask-image: linear-gradient(to left, var(--z-c-encre) 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-inline-start: 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-inline-end: 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) */
/* UNE PISTE DE GRILLE QUI PEUT RETRECIR. Mesure du 01/09/2026 : sur
   Continuite et sur Competences, la page entiere partait de cote (278 px a
   1440, 1988 px sur Competences, 2148 px a 1280). Sans piste de colonne
   declaree, la colonne implicite vaut `auto`, dont le minimum est le
   min-content de l'element : un tableau a `min-width: 960px` posait donc
   960 px de large a une grille logee dans 880 px, et poussait le document.
   `minmax(0, 1fr)` autorise la piste a descendre sous ce minimum ; le
   tableau retrouve alors le defilement de son propre conteneur
   (`.eb-scroll`), au lieu de le donner a la page. */
.nm-fold { display: grid; grid-template-rows: 1fr; grid-template-columns: minmax(0, 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; min-width: 0; }   /* meme raison que la piste ci-dessus : l'element doit pouvoir retrecir */
.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-inline-start: 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: start;
  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)); }

/* Barre latérale NAVY (charte V4.1), nav lisible sur fond sombre, quel que soit le thème =====
   La barre est désormais toujours en Deep navy ; on redéfinit donc les couleurs de la nav en clair
   (indépendamment de --text, qui est sombre en thème clair). Un seul accent : l'azur (liseré actif). */
.sidebar .nav-group-t { color: #6A6357; }
.sidebar .nav-tab { color: rgba(244,239,228,.74); }
.sidebar .nav-tab:hover { color: var(--z-c-creme); background: rgba(255,255,255,.06); border-color: transparent; }
.sidebar .nav-tab.active { color: var(--z-c-creme); background: color-mix(in srgb, var(--azure) 18%, transparent); border-color: color-mix(in srgb, var(--azure) 45%, transparent); }
.sidebar .nav-tab.active::before { background: var(--azure); }   /* liseré azur (signal), sans dégradé */
.sidebar .nav-tab.active .nic { color: var(--z-c-info); }   /* icône de l'item actif = Signal (parcimonie) */
.sidebar .nav-tab-crise { color: #eaf7fc; }                     /* onglet crise : rouge lisible sur navy */
.sidebar .nm-toggle { color: #6A6357; }
.sidebar .nm-h:hover .nm-toggle, .sidebar .nm-toggle:hover { color: var(--z-c-blanc); background: rgba(255,255,255,.08); border-color: transparent; }
.sidebar .nav-pill { background: rgba(255,255,255,.10); color: #eaf7fc; border-color: transparent; }
.sidebar .nav-count { background: var(--azure); color: var(--deep); }

/* Hamburger + tiroir mobile */
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; padding: 8px; margin-inline-end: 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-inline-start: 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-inline-end: .12em; }
.onboard-banner .ob-gi-ai { color: var(--violet); }
.onboard-banner .ob-x { flex: none; background: var(--accent); 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(--accent-dark); }
@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-inline-start: 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; }
/* Cette teinte vivait dans un attribut `style` de library.js. Écrite là, elle
   échappait à toute mesure et à toute règle d'impression : #e3b341 rend 1,89
   sur du blanc, illisible dès que le rapport sort sur papier. Elle devient une
   règle, que le gabarit papier peut remplacer par une encre mesurée. */
.ioc-tag-surveiller { background: rgba(210,153,34,.15); color: #e3b341; border: 1px solid rgba(210,153,34,.4); }
.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-inline-start: 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-inline-start: 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(--accent); color: var(--z-c-blanc); font-size: var(--z-t3); border-radius:6px;
  padding: 0 6px; margin-inline-start: 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; }
/* min-width plutot que width : un bouton a icone reste un carre de 28 px, un
   bouton qui porte un libelle grandit au lieu de deborder de sa carte. */
.lib-del { background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius:6px; min-width: 28px; min-height: 28px; padding: 0 6px; gap: 6px;
  white-space: nowrap; 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-inline-start: 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(--accent); color: var(--z-c-blanc); background: var(--accent-dark); }

/* 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); }
/* Toast TYPÉ (chantier 6) : succès / erreur / avertissement / info discernables (liseré d'accent, angles vifs). */
.toast-success { border-color: var(--ok); border-inline-start: 4px solid var(--ok); }
.toast-error   { border-color: var(--crit); border-inline-start: 4px solid var(--crit); }
.toast-warning { border-color: var(--warn); border-inline-start: 4px solid var(--warn); }
.toast-info    { border-color: var(--accent); border-inline-start: 4px solid var(--accent); }

/* PRIMITIVES D'INTERACTION PARTAGÉES (ui.js, confirm / modale) */
.ui-modal-back {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,17,46,.68); backdrop-filter: blur(3px);
}
.ui-modal-card {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius:6px;
  width: 100%; max-width: 440px; padding: 22px 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.ui-modal-t { margin: 0 0 12px; font-size: var(--z-t4); color: var(--text); }
.ui-modal-b { color: var(--text); font-size: var(--z-t3); }
.ui-modal-msg { margin: 0; line-height: 1.55; }
.ui-modal-f { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* Interconnexion : bouton « → Action » sur un signal connecteur (cockpit), chip compact, angles vifs. */
.dash-conn-act { margin-inline-start: auto; flex: none; font-size: var(--z-t3); font-weight: 600; letter-spacing: .02em; padding: 5px 9px; border: 1px solid var(--border); background: transparent; color: var(--accent); cursor: pointer; border-radius:6px; white-space: nowrap; }
.dash-conn-act:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dash-conn-act.is-done { color: var(--ok); border-color: var(--border-soft, var(--border)); cursor: default; opacity: .85; }

/* Journal d'audit append-only : entrée en attente d'envoi + badge « append-only ». */
.aud-pending { opacity: .6; }
.aud-badge { display: inline-flex; gap: 6px; align-items: center; font-size: var(--z-t3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--z-c-gris-1)); border: 1px solid var(--border); padding: 5px 9px; border-radius:6px; }

/* 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-inline-start: 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-inline-start: 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: inline-end; 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-inline-end: 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-inline-start-width: 4px; border-radius:6px;
  padding: 14px 16px; background: var(--bg-soft);
}
.dom-verdict.sev-ok   { border-inline-start-color: var(--ok);   background: rgba(12,140,103,.06); }
.dom-verdict.sev-warn { border-inline-start-color: var(--warn); background: rgba(185,107,0,.07); }
.dom-verdict.sev-crit { border-inline-start-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-inline-start: 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-inline-start: 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-inline-start: 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: end; }
.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: start; 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 de la barre latérale (avatar + identité + déconnexion).
   MESURE DU 01/09/2026. En `position: sticky; bottom: 0`, cette carte était
   peinte PAR-DESSUS les derniers `.nav-tab` dès que la liste dépassait la
   hauteur de la colonne : 90 recouvrements d'ACTION sur 36 relevés, six vues,
   trois largeurs. Des entrées de menu, donc, rendues inatteignables. Le
   `padding-bottom` de réserve n'y aurait rien fait : une carte colle au bas du
   cadre à TOUTES les positions de défilement, pas seulement en fin de liste.
   Elle n'est donc plus collante. C'est la nav qui défile (voir `.sidebar > nav`),
   et la carte est le dernier enfant du flux, hors de cette zone : elle reste
   visible en permanence, ce qui était le but du collage, mais sans rien
   recouvrir. Le flou part avec le collage, plus rien ne passe dessous.
   Sur mobile, la barre latérale est le tiroir ☰, donc la déconnexion y est
   aussi accessible. */
.sidebar-account {
  flex: none; 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));
  border: 1px solid var(--border-soft); border-radius:6px;
  box-shadow: 0 -6px 18px rgba(0,34,82,.06);   /* détache le pied de la liste qui défile au-dessus */
}
.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-encre), 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-inline-start: 1px solid var(--border); padding-inline-start: 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-inline-start: 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-inline-start: 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-info)) 5%, var(--bg-soft)); }
.pp-card-unsure:hover { background: color-mix(in srgb, var(--brand-blue, var(--z-c-info)) 9%, var(--bg-soft)); }
.pp-card-unsure .ic { color: var(--accent-dark); }
.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(--accent); 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;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  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(--accent-dark); 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-inline-start: 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: start; 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: start;
  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(--accent); color: var(--z-c-blanc); border-end-end-radius: 5px; }
.msg-bot .msg-b {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); border-end-start-radius: 5px;
}
.msg-bot.is-intro .msg-b { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent-dark); }
.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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-dark); }
.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: start; 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-encre); 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: start; 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-encre);
  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-encre); 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-info); 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-info); 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-encre); 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-info); }
.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: start; 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-encre); }
.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-inline-start: 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: start; 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-encre); }

/* 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(--accent); border-color: var(--accent); 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(--cyan); outline-offset: 2px; border-radius:6px; }   /* anneau focus cyan (kit V1.0) */
.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-inline-start: 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: start; 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-encre); color: #eaf7fc; border: 1px solid var(--z-c-encre); 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-inline-start: 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-inline-start: 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-inline-start-color: var(--crit); }
.ds-f-mid { border-inline-start-color: var(--warn); }
.ds-f-ok { border-inline-start-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-dark); }
.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: start; 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-dark);
  background: color-mix(in srgb, var(--brand-blue, var(--z-c-info)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-blue, var(--z-c-info)) 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: start; 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-info)) 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-inline-end: 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-inline-start: 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-inline-end: 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-dark); 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: start; 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-inline-start: 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-dark); white-space: nowrap; flex: none; }
/* Mapping relationnel */
.cf-map-tok { font-family: var(--mono); font-size: var(--z-t3); color: var(--accent-dark); 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: start; 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-dark); margin-inline-end: 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-inline-start: 3px solid var(--text-dim); }
.alrt-crit { border-inline-start-color: var(--crit); }
.alrt-warn { border-inline-start-color: var(--warn); }
.alrt-info { border-inline-start-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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 3px solid var(--accent); padding: 10px 14px; border-radius:6px; }
.rpt-prio { margin: 0; padding-inline-start: 0; list-style: none; counter-reset: rp; display: flex; flex-direction: column; gap: 10px; }
.rpt-prio li { counter-increment: rp; position: relative; padding-inline-start: 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-inline-start: 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-inline-start: 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: end; }
.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-encre)); }
.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-inline-start: 4px; }
.crise-b-go { margin-inline-start: 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; }
/* Bannière d'auto-activation (alerte critique d'un outil connecté), compte à rebours annulable, angles vifs. */
.crise-auto-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1255; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: var(--z-t3); color: var(--z-c-blanc); box-shadow: 0 -2px 12px rgba(0,0,0,.28);
  background: linear-gradient(90deg, var(--crit), color-mix(in srgb, var(--crit) 62%, var(--z-c-encre))); }
.crise-auto-banner b { letter-spacing: .02em; }
.crise-auto-banner #crise-auto-sec { font-family: var(--mono); background: rgba(0,0,0,.22); padding: 1px 7px; border-radius:6px; }
.crise-auto-banner .crise-b-go { margin-inline-start: auto; }
.crise-auto-x { background: rgba(255,255,255,.16); color: var(--z-c-blanc); border: 1px solid rgba(255,255,255,.55); border-radius:6px; padding: 5px 12px; font-weight: 700; font-size: var(--z-t3); cursor: pointer; }
.crise-auto-x:hover { background: rgba(255,255,255,.26); }

/* 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-inline-end: 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: start; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-inline-start: 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-inline-start-color: var(--crit); }
.crise-ctx-c.r-mid { border-inline-start-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-inline-start: 3px solid var(--text-dim); }
.crise-k-phase { border-inline-start-color: var(--accent); }
.crise-k-reflex { border-inline-start-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-inline-start: 3px solid var(--text-dim); border-radius:6px; }
.crise-task-doing { border-inline-start-color: var(--accent); }
.crise-task-done { border-inline-start-color: var(--ok); }
.crise-task-late { border-inline-start-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) */
/* « Ce que vous pouvez prouver aujourd'hui » : une ligne par source mesurable,
   son niveau de preuve tire du fait. Le rouge est reserve a ce qui reclame une
   action, pas a ce qui est simplement absent. */
.pv-panel{border:1px solid var(--border);border-radius:6px;background:var(--bg-card);padding:14px 16px;margin-bottom:16px}
.pv-panel-h h3{margin:0 0 4px;font-size: var(--z-t4)}
.pv-panel-h p{margin:0 0 12px;font-size: var(--z-t3);color:var(--text-dim)}
.pv-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.pv-row-ko{border-left:2px solid var(--crit);padding-left:10px}
.pv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-t{font-weight:600}
.pv-d{grid-column:1;margin:0;font-size: var(--z-t3);color:var(--text-dim);line-height:1.5}
.pv-row > .btn{grid-column:2;grid-row:1/3}
.pv-chip{display:inline-block;font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--z-c-blanc);padding:3px 8px;border-radius:4px}
.pv-chip-vide{background:var(--bg-soft);color:var(--text-dim);border:1px solid var(--border)}
.pv-refus{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size: var(--z-t3);color:var(--text-dim);line-height:1.5}

/* Cellule compacte de crise, dans la salle d'incident (C7). Elle doit se lire
   comme un etat en cours, pas comme une carte de plus. */
.cc-cell{border-color:color-mix(in srgb,var(--crit) 45%,var(--border)) !important}
.cc-cell .dash-conn-h{align-items:center;gap:10px;flex-wrap:wrap}
.cc-etat{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size: var(--z-t3);letter-spacing:.02em;color:var(--crit)}
.cc-cell-ex{border-color:color-mix(in srgb,var(--warn) 45%,var(--border)) !important}
.cc-cell-ex .cc-etat{color:var(--warn)}
.cc-bloc{margin:10px 0}
.cc-bloc-t{display:block;font-size: var(--z-t3);text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);font-weight:700;margin-bottom:6px}
.cc-cell .crise-clocks{margin-bottom:4px}

.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-inline-end: 6px; }
.crise-sitlog li em { color: var(--text-dim); font-style: normal; font-size: var(--z-t3); margin-inline-start: 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-inline-start: 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-inline-start-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-inline-start: 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-inline-start-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-inline-start: 3px solid var(--violet); border-radius:6px; }
.crise-inject.done { opacity: .6; border-inline-start-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-inline-start: 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-inline-start: 3px solid var(--violet); }

/* Rapport : débrief + grille de maturité (réservés à l'exercice) */
.report-doc .rd-class-ex { color: var(--z-c-encre); border-color: var(--z-c-encre); }
.report-doc .rd-ex-banner { background: #eaf7fc; border: 1px solid #eaf7fc; color: var(--z-c-encre); 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-encre); }
.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-encre); }

/* 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-inline-start: 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%); position: relative; overflow: hidden; }
.intg-logo-lg { width: 44px; height: 44px; font-size: var(--z-t4); border-radius:6px; }
/* Logo éditeur réel posé sur le monogramme (angles francs, fond blanc, logo contenu). Retiré par onerror -> le monogramme réapparaît. */
.intg-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--z-c-blanc); box-sizing: border-box; }
.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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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; }
/* Flux d'événements des outils connectés (Acronis…), bande de sévérité, angles vifs. */
.intg-req { color: var(--crit); font-weight: 700; font-size: var(--z-t3); text-transform: uppercase; letter-spacing: .04em; margin-inline-start: 5px; }
.intg-evts { margin-top: 14px; max-height: 300px; overflow: auto; }
.intg-evt { display: flex; align-items: baseline; gap: 9px; padding: 6px 9px; border-inline-start: 3px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); font-size: var(--z-t3); }
.intg-evt-s { flex: none; font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 54px; }
.intg-evt-c { flex: none; font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intg-evt-v { word-break: break-word; }
.intg-evt-critical { border-inline-start-color: var(--crit); } .intg-evt-critical .intg-evt-s { color: var(--crit); }
.intg-evt-high { border-inline-start-color: var(--high); } .intg-evt-high .intg-evt-s { color: var(--high); }
.intg-evt-medium { border-inline-start-color: var(--warn); } .intg-evt-medium .intg-evt-s { color: var(--warn); }
.intg-evt-low { border-inline-start-color: var(--accent); } .intg-evt-low .intg-evt-s { color: var(--accent); }
.intg-evt-info { border-inline-start-color: var(--border); } .intg-evt-info .intg-evt-s { color: var(--text-dim); }

/* Vue « Signaux » (flux de détection consolidé, alimenté par les connecteurs) */
.sig-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.sig-chip { font: inherit; font-size: var(--z-t3); font-weight: 600; color: var(--text-dim); background: var(--bg-soft);
  border: 1px solid var(--border-soft); padding: 5px 10px; cursor: pointer; line-height: 1.2; }
.sig-chip:hover { border-color: var(--accent); color: var(--text); }
.sig-chip.on { background: var(--accent); border-color: var(--accent); color: var(--z-c-blanc); }
.sig-list { margin-top: 10px; }
.sig-row { align-items: flex-start; padding: 9px 12px; gap: 12px; }
.sig-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sig-row .intg-evt-c { max-width: none; white-space: normal; }
.sig-time { color: var(--text-dim); font-family: var(--mono); font-size: var(--z-t3); }
.sig-det { font-size: var(--z-t3); color: var(--text-dim); word-break: break-word; }
.sig-actions { flex: none; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.sig-act { font: inherit; font-size: var(--z-t3); font-weight: 700; color: var(--accent); background: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.sig-act:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sig-act.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); cursor: default; }
.sig-act-crise { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.sig-act-crise:hover { background: color-mix(in srgb, var(--crit) 10%, transparent); }
.sig-row.sig-new { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sig-unseen { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; color: var(--accent) !important; }
@media (max-width: 640px) { .sig-actions { flex-direction: row; } .sig-row { flex-wrap: wrap; } }

/* Accueils par espace : lien « Ouvrir l'espace » dans le menu + grille */
.nav-esp-open { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: none; border: 0;
  border-inline-start: 2px solid transparent; padding: 6px 12px 6px 14px; margin: 1px 0 3px; cursor: pointer;
  font: inherit; font-size: var(--z-t3); font-weight: 600; color: var(--accent); opacity: .82; }
.nav-esp-open:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-esp-open i { width: 13px; height: 13px; flex: none; background: currentColor; }
.esp-grid { margin-top: 2px; }

/* Centre d'incident : bandeau de statut + chronologie */
.inc-status { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start; border: 0; border-radius:6px;
  padding: 16px 20px; margin-bottom: 14px; cursor: pointer; color: var(--z-c-blanc); }
.inc-status-crit { background: linear-gradient(135deg, var(--crit), color-mix(in srgb, var(--crit) 65%, var(--violet))); }
.inc-status-ex { background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, var(--z-c-encre))); }
.inc-status-calm { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); cursor: default; }
.inc-status-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--z-t3); letter-spacing: .04em; text-transform: uppercase; }
.inc-status-calm .inc-status-l { color: var(--ok); text-transform: none; letter-spacing: 0; }
.inc-status-calm .inc-status-l i { width: 15px; height: 15px; flex: none; background: var(--ok); }
.inc-status-t { font-size: var(--z-t3); font-weight: 700; }
.inc-status-calm .inc-status-t { font-weight: 400; font-size: var(--z-t3); color: var(--text-dim); max-width: 76ch; line-height: 1.5; }
.inc-status-a { font-size: var(--z-t3); font-weight: 700; opacity: .95; margin-top: 2px; }
.inc-status-btns { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.inc-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: incPulse 1.8s infinite; }
@keyframes incPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--z-c-blanc) 70%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .inc-dot { animation: none; } }
.inc-tl { display: flex; flex-direction: column; }
.inc-tl-row { display: flex; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border-soft); font-size: var(--z-t3); }
.inc-tl-row:last-child { border-bottom: 0; }
.inc-tl-ts { flex: none; min-width: 92px; font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); padding-top: 1px; }
.inc-tl-t { word-break: break-word; }
.inc-sc { margin-top: 14px; }
/* Entra, posture d'identité : KPI en grille (angles vifs). */
.intg-posture { margin-top: 14px; }
.intg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.intg-kv { background: var(--bg-soft); border: 1px solid var(--border-soft); border-top: 2px solid var(--accent); padding: 8px 10px; }
.intg-kv-v { display: block; font-size: var(--z-t4); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.intg-kv-l { display: block; font-size: var(--z-t3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
/* Cockpit, panneau live « Signaux des outils connectés » (réutilise les lignes .intg-evt). Angles vifs. */
.dash-conn { background: var(--bg-soft); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); padding: 14px 16px; margin-bottom: 14px; }
.dash-conn-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-conn-h h4 { margin: 0; font-size: var(--z-t3); display: flex; align-items: center; gap: 7px; }
.dash-conn-n { font-size: var(--z-t3); font-weight: 700; color: var(--text-dim); }
.dash-conn-crit { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--crit);
  border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent); background: color-mix(in srgb, var(--crit) 10%, transparent); padding: 1px 7px; }
.dash-conn-h .dash-open { margin-inline-start: auto; }
.dash-conn-list { display: flex; flex-direction: column; }
/* Cockpit, panneau « Posture d'identité » (Entra/Google) : réutilise .dash-conn + .intg-kpis. Angles vifs. */
.dash-pilot-src { margin-top: 10px; }
.dash-pilot-src + .dash-pilot-src { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.dash-pilot-srch { font-size: var(--z-t3); font-weight: 700; color: var(--text); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.dash-pilot-trash { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--z-t3); cursor: pointer; }
.dash-pilot-trash:hover { text-decoration: underline; }
.dash-pilot-trash i { width: 14px; height: 14px; }
.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: start; 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-encre))) !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: start; 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-inline-start: 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-inline-start: 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: start; 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-inline-start: 3px solid var(--text-dim); border-radius:6px; padding: 10px 12px; }
.an-item.an-crit { border-inline-start-color: var(--crit); } .an-item.an-warn { border-inline-start-color: var(--warn); } .an-item.an-info { border-inline-start-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: start; 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: start; 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: start; 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-lbl { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex: 1; }
.cmdk-grp { margin-inline-start: auto; padding-inline-start: 10px; font-size: var(--z-t3); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex: none; }
.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-dark); 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 */
/* La pile des bandeaux systeme : un seul conteneur fixe, en colonne, pour que
   plus aucun bandeau n'en recouvre un autre. Les enfants perdent leur
   positionnement propre : c'est la pile qui place, eux qui s'affichent. */
.sys-stack { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250;
  display: flex; flex-direction: column; align-items: stretch; pointer-events: none; }
.sys-stack > * { position: static !important; transform: none !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  pointer-events: auto; }
/* DANS LE FLUX, ET CETTE FOIS POUR DE BON.

   LE COMMENTAIRE QUI ETAIT ICI DISAIT LE CONTRAIRE DE CE QUE FAISAIT LA REGLE.
   Il annoncait un bandeau « en tete de page » ; le bandeau etait depose dans
   `.sys-stack`, qui est `position: fixed; bottom: 0`. Poser `position: static`
   sur l'enfant ne sort de rien du tout : c'est le PARENT qui flotte, et un
   enfant statique dans un parent fixe flotte avec lui.

   MESURE DU 01/09/2026, sur la demonstration, bandeau pose comme access.js le
   pose. En 1440 x 900 : boite de 560 x 57 px ancree a 24 px du coin bas
   gauche. Passaient dessous, selon la vue : les liens du pied de page
   (« Mentions legales », « Confidentialite », « Contrat d'utilisation »,
   « Avertissement », « Signaler un probleme », le numero de version), la carte
   du compte avec son bouton de deconnexion, et jusqu'a deux onglets de
   navigation de la barre laterale. En 390 x 844, la boite passe a 342 x 77 px
   et couvre le pied de page entier.

   IL VIT DESORMAIS DANS LE CONTENU, en tete de `#main`, comme le bandeau de
   bienvenue quelques regles plus haut. Il pousse la vue au lieu de la couvrir,
   il garde sa largeur de lecture et son filet d'attention, et le refus reste
   bruyant AU MOMENT du geste, qui est le seul instant ou il compte.

   PAS DE `display: flex` ICI. Le contenu du bandeau est UNE phrase dont deux
   mots sont en gras : en disposition flex, chaque fragment autour du `<strong>`
   devient un element separe que le `gap` ecarte, et « lecture seule » se
   coupait en deux lignes au milieu de la phrase. Le flux du texte est fait
   pour cela. */
.ro-banner { position: static; transform: none; display: block; margin: 0 0 18px;
  background: var(--bg-card); border: 1px solid var(--warn);
  border-inline-start: 3px solid var(--warn); color: var(--text);
  border-radius:6px; padding: 10px 14px; font-size: var(--z-t3); line-height: 1.5; }
.ro-banner [class^="gi-"] { color: var(--warn); width: 16px; height: 16px; margin: 0; }
.ro-switch { background: var(--accent); 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; }
/* CETTE EXCEPTION ROUVRAIT TOUT. Elle rendait a `#view-equipe` l'ensemble de
   ses champs ET de ses boutons, dont « Reinitialiser le mot de passe », a un
   compte qui lit le bandeau « consulte sans modifier ». L'intention etait de
   laisser un membre consulter l'annuaire, pas d'y agir : on rend donc les
   champs et la lecture, pas les boutons. Le refus de fond est ailleurs, sur la
   confirmation ; ceci evite seulement de proposer un geste qui sera refuse. */
body.ro-mode #view-equipe input, body.ro-mode #view-equipe textarea,
body.ro-mode #view-equipe select { 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: start; 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-inline-start: 3px solid transparent; }
tr.r-crit td:first-child { border-inline-start-color: var(--crit); }
tr.r-high td:first-child { border-inline-start-color: var(--high); }
tr.r-mid td:first-child { border-inline-start-color: var(--warn); }
tr.r-low td:first-child { border-inline-start-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: end; }
.eb-t .eb-ale { font-weight: 700; white-space: nowrap; }
.eb-t tfoot .eb-tot-l { text-align: end; font-weight: 700; color: var(--text-dim); }
.eb-t tfoot .eb-euro { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Registre RGPD (art. 30), fiches par traitement (remplace le tableau à l'étroit) */
.ropa-list { display: flex; flex-direction: column; gap: 12px; }
.ropa-card { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 8px; background: var(--bg-soft); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.ropa-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ropa-nom { flex: 1; min-width: 0; font-weight: 600; font-size: var(--z-t3); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 11px; font-family: inherit; }
.ropa-nom:focus { outline: none; border-color: var(--accent); }
.ropa-acts { display: inline-flex; gap: 6px; flex: none; align-items: center; }
.ropa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px 14px; }
.ropa-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ropa-f > label { font-size: var(--z-t0); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); font-weight: 700; }
.ropa-f input, .ropa-f 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); text-overflow: ellipsis; }
.ropa-f input:focus, .ropa-f select:focus { outline: none; border-color: var(--accent); }
.ropa-f.ropa-horsue { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.ropa-f.ropa-horsue input { width: auto; flex: none; }
.ropa-f.ropa-horsue > label { white-space: nowrap; cursor: pointer; }
@media (max-width: 560px) { .ropa-grid { grid-template-columns: 1fr; } }
.ropa-card.ropa-crit { border-color: color-mix(in srgb, var(--crit) 45%, var(--border)); border-inline-start: 3px solid var(--crit); }
.ropa-ro { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 6px; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text-dim); font-size: var(--z-t3); }


.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: start; 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-inline-end: 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-inline-start: 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-inline-start-color: var(--ok); }
.cf-ctrl.is-mid { border-inline-start-color: var(--warn); }
.cf-ctrl.is-crit { border-inline-start-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-inline-end: 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-inline-end: 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-encre); }
.cf-seg-b.active.s-mid { background: var(--warn); color: var(--z-c-encre); }
.cf-seg-b.active.s-crit { background: var(--crit); color: var(--z-c-encre); }
.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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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: start; 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-inline-end: 7px; }
.dash-attention li.r-mid span::before { content: "●"; color: var(--warn); margin-inline-end: 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-st-blk { border-color: color-mix(in srgb, var(--crit) 55%, var(--border)) !important; color: var(--crit); }
.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: start; 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: end; }
.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: start; }
.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-inline-end: 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-inline-start: 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-inline-start: 3px solid transparent; border-radius:6px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.prot-item.is-ok { border-inline-start-color: var(--ok); } .prot-item.is-mid { border-inline-start-color: var(--warn); } .prot-item.is-crit { border-inline-start-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-inline-end: 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-info); 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-faits code, .report-doc .rd-hypo code, .report-doc .rd-ioc-cat code { background: #eaf7fc; padding: 1px 4px; border-radius:6px; font-size: var(--z-t3); }
.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-encre);
  --bg-soft:   var(--z-c-encre);
  --bg-card:   var(--z-c-encre);
  --border:    var(--z-c-encre);
  --border-soft:var(--z-c-encre);
  --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-encre);
  --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-encre) 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-inline-end: 1px solid var(--border-soft);
  padding: 20px 14px 28px;
  display: flex; flex-direction: column;
  overflow: hidden;   /* le défilement appartient à la nav, pas à la colonne */
}

/* 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.
   La nav est AUSSI la zone qui défile. C'est ce qui permet à la carte du
   compte de rester visible en permanence sans rien recouvrir : elle est
   en dehors de cette zone, donc rien ne passe jamais sous elle.
   `min-height: 0` est indispensable : sans lui, un enfant flex refuse de
   descendre sous la hauteur de son contenu, la nav ne défile pas et la
   colonne déborde à nouveau.
   `overflow-x: hidden` évite la barre horizontale que ferait apparaître le
   `translateX(2px)` des onglets au survol ; les bulles d'aide sont posées
   sur `body` en `position: fixed`, elles ne sont donc pas rognées. */
.sidebar > nav { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.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; }
/* Le chevron est devenu un <button> : sans ces remises a zero il heriterait
   du fond, de la bordure et de la police des boutons du produit. */
.nav-chev { background: none; border: 0; padding: 0 2px; margin: 0; color: inherit;
  font: inherit; line-height: 1; cursor: pointer; transition: transform .15s; }
.nav-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.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; }
/* LARGEUR DE LECTURE PAR DEFAUT, LARGEUR DE DONNEES QUAND IL LE FAUT.
   940 px tient la mesure de lecture confortable (autour de 75 caracteres). Une
   vue dont un TABLEAU demande plus de place qu'il n'en a n'est pas dans ce
   cas : elle recoit alors toute la largeur disponible. La classe est posee a
   l'affichage, d'apres la largeur que le contenu reclame vraiment : voir
   `ajusterLargeur` et `largeurDemandee` dans app.js.
   1600 ET NON 1500, ET LE CHIFFRE EST MESURE. Le tableau du plan de
   remediation demande 1453 px pour montrer ses sept colonnes sans les
   ecraser. A 1500 px de colonne il en recevait 1406 et defilait encore ;
   a 1600 il en recoit 1506 et tient entier sur un ecran de 1920. Au-dela, on
   ne gagnerait plus que des lignes que personne ne pourrait suivre. */
.app-body .app-main.vue-large { max-width: min(1600px, 100%); }
/* MESURE DE LECTURE, MEME EN VUE DENSE. Une vue dense prend la largeur
   pour ses DONNEES ; son texte courant ne suit pas. Au-dela d'environ 80
   caracteres par ligne, l'oeil perd le debut de la ligne suivante. */
.app-body .app-main.vue-large .eb-intro p,
.app-body .app-main.vue-large .view > p,
.app-body .app-main.vue-large .view-hint { max-width: 78ch; }
.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-encre);
  --brand-blue:  var(--z-c-info);
  --brand-blue2: var(--z-c-info);
  --brand-grad:  linear-gradient(100deg, var(--z-c-info) 0%, var(--z-c-encre) 52%, var(--z-c-info) 100%);
  --brand-grad-soft: linear-gradient(120deg, var(--z-c-info) 0%, var(--z-c-encre) 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-encre);
  --text-dim:  var(--z-c-gris-1);
  --accent:    var(--z-c-info);
  --accent-dark:var(--z-c-info);
  --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-encre) 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-dark); 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-encre) 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-dark); 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-inline-end: 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-inline-end: 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-dark);
  background: color-mix(in srgb, var(--brand-blue, var(--z-c-info)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-blue, var(--z-c-info)) 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-info)) 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; } }

/* 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="dark"]` (app-affut-dark.css)
     et `:root[data-theme="light"]` (plus bas dans cette feuille) portent une
     specificite superieure a `:root`, et le second `:root` de la fin de feuille
     arrive apres celui-ci. Mesure du 02/09/2026 sous emulation `print`, valeurs
     CALCULEES et non ecrites : `--border` valait #E0D8C7 en theme clair, soit
     1,30 sur blanc, et rgba(255,255,255,.11) en theme sombre, soit 1,00, un
     filet strictement invisible. Le bloc etait donc muet sur ces jetons.
     Le plancher d un element non textuel est 3,0, celui d un texte 4,5.

     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,71 et 4,30 pour le vert de statut, et 4,30 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. Sans lui, la couleur du
     client gagnerait, y compris quand elle est illisible sur papier. */
  :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 : 16,44 sur blanc, 15,04 sur le #eaf7fc des encadres. */
    --text: #14171b !important; --ink: #14171b !important;
    --z-encre: #14171b !important; --z-color-text: #14171b !important;

    /* L encre attenuee : 6,20 sur blanc, 5,70 sur #eaf7fc. Elle reste du texte,
       donc elle tient le seuil de 4,5 et non celui de 3,0.
       --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.
       Le filet doux et le filet ordinaire prennent la MEME valeur : sur papier
       il n existe qu une graisse de trait lisible, et un filet plus clair
       serait un trait qu on ne voit pas plutot qu un trait discret.
       --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 :
       les oublier laissait la couleur choisie a l ecran passer sur le papier. */
    --accent: #1574b1 !important;
    --accent-dark: #116091 !important;
    --brand-blue: #1574b1 !important;
    --brand-blue2: #116091 !important;
    --brand-grad: linear-gradient(100deg, #1574b1 0%, #116091 100%) !important;
    --brand-grad-soft: linear-gradient(120deg, #1574b1 0%, #116091 100%) !important;

    /* L accent fauve du socle. 5,06 et 6,56 sur blanc, 4,63 et 6,00 sur #eaf7fc.
       Il rendait 2,50 et 2,04 : il servait de filet et n en etait pas un. */
    --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 : sur papier, deux
       rouges critiques valent un doute. Ils sont alignes ici.
       Luminances sur blanc : 0,0506 critique, 0,1162 alerte, 0,1592 sain, soit
       2,30 puis 1,37 entre voisins et 3,15 entre extremes, au-dessus des 1,30
       et 1,80 qui font tenir une echelle en niveaux de gris.
       --z-c-sain passe de #1b853a a #1a8036 : l ancien rendait 4,71 sur blanc
       mais 4,30 sur le #eaf7fc des encadres, sous le plancher du texte. */
    --z-c-critique: #7d1811 !important; --z-c-alerte: #9b4808 !important;
    --z-c-sain: #1a8036 !important; --z-c-info: #1574b1 !important;
    --crit: #7d1811 !important; --warn: #9b4808 !important;
    --high: #9b4808 !important; --ok: #1a8036 !important;
    --z-crit: #7d1811 !important; --z-haut: #9b4808 !important;
    --z-sain: #1a8036 !important; --z-info: #1574b1 !important;
  }
  /* `!important` ici parce que `:root[data-theme="dark"] body` porte une
     specificite superieure et rendait cette declaration inoperante. */
  body { background: #ffffff !important; color: #14171b !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`, et c est aussi celui que la
     personnalisation remplit avec l image du client, en style en ligne
     `!important`. 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: #14171b; 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: start; 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-inline-start: 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: start; 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-inline-start: 3px solid var(--warn); border-radius:6px; padding: 9px 12px; }
.traj-sev-haute { border-inline-start-color: var(--crit); }
.traj-sev-moyenne { border-inline-start-color: var(--warn); }
.traj-sev-basse { border-inline-start-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(--accent); 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-inline-start: -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-inline-start: 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-inline-start: 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(--accent); 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: start; 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-inline-start: 4px; border-inline-start: 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-encre)) 6px, color-mix(in srgb, var(--crit) 70%, var(--z-c-encre)) 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-inline-start: 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-inline-end: 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-inline-start: 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-inline-start: auto; color: var(--accent-dark); 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-dark); border-bottom-color: var(--accent); }
.bug-tab-admin { margin-inline-start: 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-dark); }
.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-dark); 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: start; 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-inline-start: 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-inline-start: 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-inline-end: 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-dark); 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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); }
/* Preuves jointes (fichiers) par étape, angles vifs, dense. */
.pp-ev-files { display: flex; flex-direction: column; gap: 5px; border-inline-start: 2px solid var(--border); padding: 4px 0 4px 10px; }
.pp-ev-head { font-size: var(--z-t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.pp-ev-n { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); font-weight: 700; padding: 0 6px; font-size: var(--z-t3); }
.pp-ev-file { display: flex; align-items: center; gap: 8px; font-size: var(--z-t3); }
.pp-ev-dl { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-dark); text-decoration: none; font-weight: 600; word-break: break-all; }
.pp-ev-dl:hover { text-decoration: underline; }
.pp-ev-sz { color: var(--text-dim); font-size: var(--z-t3); white-space: nowrap; }
.pp-ev-del { margin-inline-start: auto; flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-dim); width: 20px; height: 20px; line-height: 1; cursor: pointer; border-radius:6px; font-size: var(--z-t3); }
.pp-ev-del:hover { color: var(--crit); border-color: var(--crit); }
.pp-ev-add-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pp-ev-add { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border); background: transparent; color: var(--accent-dark); font-size: var(--z-t3); font-weight: 600; padding: 4px 10px; cursor: pointer; border-radius:6px; }
.pp-ev-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pp-ev-note { font-size: var(--z-t3); color: var(--text-dim); font-style: italic; }
.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-encre)); }
.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-encre)); 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-inline-end: 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-inline-start: 8px; padding: 1px 8px; border-radius:6px; background: color-mix(in srgb, var(--brand-blue) 12%, transparent); color: var(--accent-dark); 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-inline-start-width: 3px; }
.reg-obl-bad { border-inline-start-color: var(--z-c-critique); background: color-mix(in srgb, var(--z-c-critique) 6%, transparent); }
.reg-obl-warn { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.reg-obl-ok { border-inline-start-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}

/*, Accueil « ce qui requiert votre attention » (attention.js), */
#home-attention{margin:0 0 24px}
.home-att-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.home-att-t{font-size: var(--z-t4);font-weight:700;color:var(--text);margin:0}
.home-lens{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.home-lens-b{border:0;background:var(--bg-card);color:var(--text-dim);padding:6px 16px;font:inherit;font-size: var(--z-t2);font-weight:600;cursor:pointer;border-inline-end:1px solid var(--border);line-height:1.15}
.home-lens-b:last-child{border-inline-end:0}
.home-lens-b.on{background:var(--accent);color:var(--z-c-blanc)}
.home-lens-s{display:block;font-size: var(--z-t0);font-weight:400;opacity:.85;margin-top:1px}
.home-att-body{display:flex;flex-direction:column;gap:14px}
.home-att-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.home-comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.home-comp-h{display:flex;justify-content:space-between;font-size: var(--z-t1);color:var(--text-dim);margin-bottom:5px}
.dg-kpis-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.dg-kpis-4{grid-template-columns:1fr 1fr}}

/* Questionnaires securite (DDQ/RFP) */
.q-stats{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.q-chip{font-size: var(--z-t1);padding:2px 9px;border-radius:999px;border:1px solid var(--line,var(--z-c-gris-3));background:var(--panel-2,#eef3fa);color:var(--ink-soft,#33465e)}
.q-list{display:flex;flex-direction:column;gap:10px}
.q-item{border:1px solid var(--line,var(--z-c-gris-3));border-radius:8px;padding:10px 12px;background:var(--panel,var(--z-c-blanc))}
.q-q{font-weight:600;font-size: var(--z-t3);margin-bottom:6px}
.q-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.q-status{font:inherit;font-size: var(--z-t2);padding:4px 8px;border-radius:6px;border:1px solid var(--line-strong,var(--z-c-gris-3));background:var(--panel,var(--z-c-blanc));color:var(--ink,var(--z-c-nuit))}
.q-justif{width:100%;font:inherit;font-size: var(--z-t2);padding:7px 10px;border-radius:6px;border:1px solid var(--line-strong,var(--z-c-gris-3));background:var(--panel,var(--z-c-blanc));color:var(--ink,var(--z-c-nuit));resize:vertical}
.q-ok{color:var(--live,var(--z-c-sain))}.q-warn{color:var(--partial,var(--z-c-alerte))}.q-bad{color:var(--crit,var(--z-c-critique))}.q-muted{color:var(--muted,var(--z-c-gris-1))}
.q-chip.q-ok{border-color:var(--live,var(--z-c-sain))}.q-chip.q-warn{border-color:var(--partial,var(--z-c-alerte))}.q-chip.q-bad{border-color:var(--crit,var(--z-c-critique))}
.rd-qa{margin:0 0 11px}.rd-q{margin:0 0 3px}.rd-a{margin:0;color:var(--ink-soft,#33465e)}
.rd-badge{display:inline-block;font-size: var(--z-t0);font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid currentColor;margin-right:6px}

/* Intégrations : statut de flux (actif vs catalogue) */
.intg-flowline{margin:6px 0 0}
.intg-flow{display:inline-flex;align-items:center;gap:4px;font-size: var(--z-t0);font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line,var(--z-c-gris-3));line-height:1.4}
.intg-flow-on{color:var(--live,var(--z-c-sain));border-color:var(--live,var(--z-c-sain));background:rgba(18,138,91,.08)}
.intg-flow-cat{color:var(--muted,var(--z-c-gris-1));background:var(--panel-2,#eef3fa)}

/* ===== L'Affut (app) : Fraunces + Fauve + filets ===== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 900;font-display:swap;src:url('../fonts/Fraunces-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:'Fraunces';font-style:normal;font-weight:500 900;font-display:swap;src:url('../fonts/Fraunces-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}
:root{ --fauve:#E0872A; --fauve-deep:var(--z-c-alerte); --border:var(--z-c-encre); --border-soft:#242B33; --text-dim:#8B99A9; }
:root[data-theme="light"]{ --bg:var(--z-c-creme); --border:#E0D8C7; --border-soft:var(--z-c-creme); --text-dim:#6A6357; }
h1,h2,.view-title,.app-header h1{ font-family:var(--font-display); letter-spacing:-.015em; }
/* Frappe : action primaire = Fauve (decision unique, texte Encre) */
.btn-primary, :root[data-theme="light"] .btn-primary{ background:var(--fauve)!important; color:#1B1712!important; border:none!important; }
.btn-primary:hover, :root[data-theme="light"] .btn-primary:hover{ background:var(--fauve-deep)!important; filter:none; box-shadow:0 6px 18px rgba(224,135,42,.28)!important; }
/* L Affut : filigrane serval de l app retire + fond du theme */
.app-bgfond::after{ content:none !important; display:none !important; background:none !important; }
.app-bgfond{ background:var(--bg) !important; opacity:1 !important; }

/* ===== C10 : catalogue de l'accueil replie sous « Tous les espaces » ===== */
.home-espaces-fold{ margin-top:10px; }
.home-espaces-sum{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border:1px solid var(--border,var(--z-c-encre)); border-radius:6px; background:transparent;
  color:var(--text-dim,var(--z-c-gris-2)); font:600 13px/1 var(--font-sans,'Inter',system-ui,sans-serif); letter-spacing:.01em;
  transition:border-color .15s,color .15s; }
.home-espaces-sum::-webkit-details-marker{ display:none; }
.home-espaces-sum i{ opacity:.85; }
.home-espaces-sum:hover{ border-color:var(--accent,var(--z-c-info)); color:var(--text,#eaf7fc); }
.home-espaces-fold[open] > .home-espaces-sum{ margin-bottom:14px; }

/* ===== C12 : en mode crise, le bruit visuel tombe (fond anime coupe, cf. VI.3) ===== */
body.crise-on .app-bgfond{ opacity:0; transition:opacity .35s ease; }

/* ===== 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-encre) !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:#171A1F !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; } }
/* Phase 2b orchestrateur : onglets hors-menu (joignables par Ctrl+K + page d'univers) */
.sidebar .nav-tab.nav-off{ display:none !important; }

/* Champ dont la saisie conditionne une decision engageante (motif de revue). */
.is-required { border-color: var(--crit) !important; box-shadow: 0 0 0 2px rgba(201,60,75,.14); }

/* Bandeau des pare-feux (vue Parc) : un etat par pare-feu, lu sur les connecteurs. */
.fw-etats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.fw-item { white-space: nowrap; }
.fw-sep { color: var(--muted); padding: 0 4px; }
.fw-etat { font-size: var(--z-t1); color: var(--muted); }
.fw-etat.fw-ok { color: var(--z-c-sain); }
.fw-etat.fw-ko { color: var(--z-c-critique); }
.fw-etat.fw-off { color: var(--muted); }

/* Personnalisation : galerie de fonds d'ecran (Reglages > Personnalisation). */
.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); border-radius: 6px;
            background: var(--card); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.brd-fond:hover { border-color: var(--accent); }
.brd-fond.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.brd-fond-vue { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--bg-soft, #0e1420); }
.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); }
.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); }

/* Conformite : autorite du referentiel et niveau d'assurance des exigences. */
.cf-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--z-t1); }
.cf-auth { font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid currentColor; }
.cf-auth-ob { color: var(--z-c-critique); }
.cf-auth-mo { color: var(--z-c-info); }
.cf-auth-re { color: var(--z-c-gris-1); }
.cf-auth-de { color: var(--z-c-gris-1); }
.cf-src { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.cf-src-note { color: var(--z-c-alerte); font-style: italic; }
.cf-assur-resume { color: var(--muted); margin-left: auto; }
.cf-assur { font-size: var(--z-t0); font-weight: 600; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.cf-assur-evidence_supported { color: var(--z-c-info); background: rgba(26,111,181,.10); }
.cf-assur-assessor_confirmed { color: var(--z-c-sain); background: rgba(26,127,55,.10); }
.cf-assur-legally_confirmed { color: #6d28d9; background: rgba(109,40,217,.12); }

.cf-ev-date-chip { color: var(--muted); font-size: var(--z-t0); margin-left: 5px; }

.cf-ev-pick-xw { border-left: 2px solid var(--accent, var(--z-c-info)); }
.cf-ev-chip-xw { border-style: dashed; }

/* Suppressions : un bouton qui detruit doit se reconnaitre AVANT le clic, pas au
   survol. Contour et symbole rouges au repos, plein au survol, taille cliquable. */
.lib-del, .tl-del, .cf-ev-x, .msgr-del {
  border: 1px solid color-mix(in srgb, var(--crit) 55%, transparent) !important;
  color: var(--crit) !important;
  border-radius: 6px;
  min-width: 28px; min-height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
}
.lib-del:hover, .tl-del:hover, .cf-ev-x:hover, .msgr-del:hover,
.lib-del:focus-visible, .tl-del:focus-visible, .cf-ev-x:focus-visible, .msgr-del:focus-visible {
  background: var(--crit) !important;
  border-color: var(--crit) !important;
  color: var(--z-c-blanc) !important;
}
.cf-ev-x { padding: 0 4px; }

/* Fraicheur de preuve : l'age se lit sur la puce, sans ouvrir la piece. */
.cf-fresh { font-size: var(--z-t0); margin-left: 6px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.cf-fresh-ajour { color: var(--z-c-sain); background: rgba(26,127,55,.10); }
.cf-fresh-bientot { color: var(--z-c-alerte); background: rgba(180,83,9,.12); }
.cf-fresh-perimee { color: var(--z-c-critique); background: rgba(180,35,24,.12); font-weight: 600; }

/* Catalogue de continuite : choisir plutot qu'inventer devant une page blanche. */
.pca-cat { border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin: 0 0 14px; background: var(--card); }
.pca-cat-h { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 6px; }
.pca-cat-n { color: var(--muted); font-weight: 400; font-size: var(--z-t1); }
.pca-cat-h .btn { margin-inline-start: auto; }
.pca-cat-q { width: 100%; margin: 6px 0; }
.pca-cat-g { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pca-cat-gb { font: inherit; font-size: var(--z-t1); padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px;
              background: transparent; color: var(--text); cursor: pointer; }
.pca-cat-gb.on { border-color: var(--accent); color: var(--accent); }
.pca-cat-l { max-height: 320px; overflow-y: auto; display: grid; gap: 2px; }
.pca-cat-i { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.pca-cat-i:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pca-cat-i.is-deja { opacity: .55; cursor: default; }
.pca-cat-deja { margin-inline-start: auto; font-size: var(--z-t0); color: var(--muted); }

/* Objectifs de continuite rattaches a une exigence : des reperes, pas des exigences. */
.cf-bcm-b { font-size: var(--z-t0); padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px;
            background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; }
.cf-bcm-b:hover, .cf-bcm-b.on { border-color: var(--accent); color: var(--accent); }
.cf-bcm-n { font-weight: 700; }
.cf-bcm { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
          border-radius: 6px; padding: 10px 12px; margin: 8px 0 2px; background: var(--card); }
.cf-bcm-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--z-t2); }
.cf-bcm-h .btn { margin-inline-start: auto; }
.cf-bcm-avert { font-size: var(--z-t0); color: var(--z-c-alerte); margin: 4px 0 10px; }
.cf-bcm-d { margin-bottom: 10px; }
.cf-bcm-dt { font-size: var(--z-t0); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cf-bcm-d ul { margin: 4px 0 0; padding-inline-start: 18px; }
.cf-bcm-d li { font-size: var(--z-t2); margin: 2px 0; }
.cf-bcm-id { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted); margin-inline-end: 7px; }

/* Coherence du BIA : ce que les controles du pack reperent sur vos donnees. */
.pca-coh { border: 1px solid var(--line); border-inline-start: 3px solid var(--z-c-alerte); border-radius: 6px;
           padding: 10px 12px; margin: 0 0 14px; background: var(--card); }
.pca-coh-ok { border-inline-start-color: var(--z-c-sain); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pca-coh-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--z-t2); }
.pca-coh-l { margin: 6px 0 0; padding-inline-start: 18px; }
.pca-coh-l li { font-size: var(--z-t2); margin: 3px 0; }
.pca-coh-ref { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted);
               border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-inline-end: 7px; }
.pca-coh-error .pca-coh-ref { color: var(--z-c-critique); border-color: var(--z-c-critique); }
.pca-coh-high .pca-coh-ref { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }

/* Echeances reglementaires : sources et horizon calendaire. */
.nr-src { margin-top: 3px; }
.nr-src a { color: var(--accent); text-decoration: none; }
.nr-src a:hover { text-decoration: underline; }
.nr-reserve { color: var(--z-c-alerte); }
.nr-hl { list-style: none; margin: 8px 0 0; padding: 0; }
.nr-h { border-inline-start: 3px solid var(--line); padding: 6px 0 6px 12px; margin: 0 0 8px; }
.nr-h-passe { border-inline-start-color: var(--z-c-sain); opacity: .72; }
.nr-h-annonce { border-inline-start-color: var(--z-c-alerte); }
.nr-h-d { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted); margin-inline-end: 9px; }
.nr-h-tag { font-size: var(--z-t0); color: var(--z-c-alerte); border: 1px solid var(--z-c-alerte); border-radius: 3px; padding: 0 4px; }

/* Bibliotheque d atelier EBIOS : choisir, jamais subir. */
.eb-bib { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
          border-radius: 6px; padding: 10px 12px; margin: 8px 0 12px; background: var(--card); }
.eb-bib-h { display: flex; align-items: center; gap: 10px; font-size: var(--z-t2); }
.eb-bib-h .btn { margin-inline-start: auto; }
.eb-bib-avert { font-size: var(--z-t0); color: var(--z-c-alerte); margin: 5px 0 8px; }
.eb-bib-q { width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
            background: var(--bg); color: inherit; font: inherit; font-size: var(--z-t2); }
.eb-bib-l { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.eb-bib-l li { padding: 2px 0; font-size: var(--z-t2); }
.eb-bib-l .eb-sub { color: var(--muted); font-size: var(--z-t0); }
.eb-bib-vide { color: var(--muted); font-style: italic; }
.eb-bib-f { margin-top: 10px; }

/* Couverture de l enrichissement : un verdict vaut par le nombre de sources. */
.enr-couv { font-size: var(--z-t0); color: var(--muted); font-variant-numeric: tabular-nums; }
.enr-manque { color: var(--z-c-alerte); font-size: var(--z-t0); }

/* Choix d une technique ATT&CK : le code pivote, le nom se comprend. */
.mit-cell { display: flex; gap: 5px; align-items: center; }
.mit-cell input { flex: 1 1 auto; min-width: 0; }
.mit-open { flex: 0 0 auto; padding: 2px 7px; }
.mit-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mit-b { font-size: var(--z-t0); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
         color: var(--muted); text-decoration: none; }
.mit-b:hover { border-color: var(--accent); color: var(--accent); }
.mit-b-alerte { border-color: var(--z-c-alerte); color: var(--z-c-alerte); }
.mit-b-inconnu { border-style: dashed; color: var(--z-c-critique); border-color: var(--z-c-critique); }
.mit-b em { font-style: normal; opacity: .8; }
.eb-mit-l li { padding: 0; }
.mit-pick { display: block; width: 100%; text-align: start; background: transparent; border: 0;
            font: inherit; font-size: var(--z-t2); color: inherit; cursor: pointer; padding: 3px 4px; border-radius: 4px; }
.mit-pick:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mit-code { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--accent); }
.mit-legal { font-size: var(--z-t0); color: var(--muted); margin: 9px 0 0; }

/* Produits et Cyber Resilience Act. */
.prod-chip { font-size: var(--z-t0); border-radius: 4px; padding: 1px 8px; border: 1px solid; margin-inline-start: auto; }
.prod-chip.is-crit { color: var(--z-c-critique); border-color: var(--z-c-critique); }
.prod-chip.is-mid { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }
.prod-chip.is-ok { color: var(--z-c-sain); border-color: var(--z-c-sain); }
.prod-q { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
          padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.prod-q > span { flex: 1 1 300px; }
.prod-r { display: flex; gap: 14px; align-items: center; }
.prod-sbom { white-space: nowrap; }
.prod-nb { font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-imp { cursor: pointer; }
.prod-del { border: 1px solid color-mix(in srgb, var(--crit) 55%, transparent) !important;
            color: var(--crit) !important; background: transparent; border-radius: 6px;
            min-width: 28px; min-height: 28px; cursor: pointer; }
.prod-jl, .prod-el { list-style: none; margin: 8px 0 0; padding: 0; }
.prod-j { padding: 4px 0 4px 10px; border-inline-start: 3px solid var(--z-c-alerte); margin-bottom: 6px; font-size: var(--z-t2); }
.prod-j-passe { border-inline-start-color: var(--z-c-sain); opacity: .75; }
.prod-j-d { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted); margin-inline-end: 9px; }
.prod-el li { padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.prod-c-l li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.prod-c-n { font-weight: 500; }
.prod-c-v { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted); }

/* Registre des exceptions : ce qui n est pas fait, et qui l assume. */
.exc-c { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; background: var(--card); }
.exc-c-expiree, .exc-c-sans_approbateur { border-inline-start: 3px solid var(--z-c-critique); }
.exc-c-sans_terme, .exc-c-bientot { border-inline-start: 3px solid var(--z-c-alerte); }
.exc-c-active { border-inline-start: 3px solid var(--z-c-sain); }
.exc-c-revoquee { opacity: .62; border-inline-start: 3px solid var(--line); }
.exc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.exc-etat { font-size: var(--z-t0); border-radius: 4px; padding: 1px 8px; border: 1px solid; }
.exc-etat.is-crit { color: var(--z-c-critique); border-color: var(--z-c-critique); }
.exc-etat.is-mid { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }
.exc-etat.is-ok { color: var(--z-c-sain); border-color: var(--z-c-sain); }
.exc-etat.is-off { color: var(--muted); border-color: var(--line); }
.exc-src { font-size: var(--z-t0); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.exc-actions { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.exc-del { border: 1px solid color-mix(in srgb, var(--crit) 55%, transparent) !important;
           color: var(--crit) !important; background: transparent; border-radius: 6px;
           min-width: 28px; min-height: 28px; cursor: pointer; }
.exc-cl { list-style: none; margin: 8px 0 0; padding: 0; }
.exc-cl li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
             padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.exc-cl li .btn { margin-inline-start: auto; }
.q-chip.exc-expiree, .q-chip.exc-sans_approbateur { color: var(--z-c-critique); }
.q-chip.exc-sans_terme, .q-chip.exc-bientot { color: var(--z-c-alerte); }
.q-chip.exc-active { color: var(--z-c-sain); }
.q-chip.exc-revoquee { color: var(--ink-soft, #33465e); border-style: dashed; }

/* Registre des vulnerabilites. */
.vr-cve { font-family: ui-monospace, monospace; font-size: var(--z-t1); color: var(--accent); text-decoration: none; }
.vr-cve:hover { text-decoration: underline; }
.vr-expl { font-size: var(--z-t0); color: var(--z-c-critique); border: 1px solid var(--z-c-critique); border-radius: 3px; padding: 0 4px; }
.vr-sev { font-size: var(--z-t0); border-radius: 4px; padding: 1px 7px; border: 1px solid; }
.vr-sev-critique { color: var(--z-c-critique); border-color: var(--z-c-critique); }
.vr-sev-elevee { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }
.vr-sev-moyenne { color: var(--muted); border-color: var(--line); }
.vr-sev-faible, .vr-sev-inconnue { color: var(--muted); border-color: var(--line); }
.vr-retard { color: var(--z-c-critique); font-weight: 500; }
.vr-chaine { color: var(--accent); }
tr.vr-crit > td:first-child { box-shadow: inset 3px 0 0 var(--z-c-critique); }
tr.vr-mid > td:first-child { box-shadow: inset 3px 0 0 var(--z-c-alerte); }
tr.vr-ok { opacity: .68; }
.vr-del { border: 1px solid color-mix(in srgb, var(--crit) 55%, transparent) !important;
          color: var(--crit) !important; background: transparent; border-radius: 6px;
          min-width: 28px; min-height: 28px; cursor: pointer; }
.q-chip.vr-c-retard, .q-chip.vr-c-expl { color: var(--z-c-critique); }
.q-chip.vr-c-ok { color: var(--z-c-sain); }
.vr-pol-d { margin: 10px 0; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.vr-pol-d summary { cursor: pointer; font-size: var(--z-t2); font-weight: 600; }
.vr-pol { flex-direction: row; align-items: center; gap: 8px; }
.vr-pol input { width: 5.5rem; }
.cve-suivi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }

/* Renseignement sur la menace. */
.mn-l { list-style: none; margin: 10px 0 0; padding: 0; }
.mn-g { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: var(--card); }
.mn-g-pert { border-inline-start: 3px solid var(--accent); }
.mn-g-open { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.mn-g-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; }
.mn-g-t { flex: 1 1 260px; text-align: start; background: transparent; border: 0; font: inherit;
          color: inherit; cursor: pointer; padding: 0; }
.mn-code { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--accent); }
.mn-score { font-size: var(--z-t1); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.mn-bar { display: inline-block; width: 68px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mn-bar-in { display: block; height: 100%; background: var(--accent); }
.mn-d { border-top: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mn-d h5 { margin: 0 0 4px; font-size: var(--z-t1); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mn-lien { grid-column: 1 / -1; margin: 0; font-size: var(--z-t1); }
.mn-tl { list-style: none; margin: 4px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.mn-tl li { font-size: var(--z-t1); padding: 1px 0; }
.mn-tl a { color: inherit; text-decoration: none; }
.mn-tl a:hover { text-decoration: underline; }
.mn-t-ok a { color: var(--accent); }
.q-chip.mn-c-pert { color: var(--accent); }
.mn-vide { border-inline-start: 3px solid var(--z-c-alerte); }

/* Efficacite reelle des controles : juxtaposer, pas juger. */
.ef-st { font-size: var(--z-t0); border-radius: 4px; padding: 1px 8px; border: 1px solid; white-space: nowrap; }
.ef-st.is-ok { color: var(--z-c-sain); border-color: var(--z-c-sain); }
.ef-st.is-mid { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }
.ef-st.is-off { color: var(--muted); border-color: var(--line); border-style: dashed; }
.q-chip.ef-c-ok { color: var(--z-c-sain); }
.q-chip.ef-c-mid { color: var(--z-c-alerte); }
/* `.q-chip` a un fond clair en dur : une couleur qui suit le theme y disparait
   en mode sombre. On garde la couleur du texte ordinaire et on dit « absent »
   par la bordure. */
.q-chip.ef-c-off { color: var(--ink-soft, #33465e); border-style: dashed; }
.ef-jx { border-inline-start: 3px solid var(--z-c-alerte); }
.ef-jl { list-style: none; margin: 8px 0 0; padding: 0; }
.ef-jl li { padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.ef-jx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

/* Indicateurs : compter, dater, ne rien combler. */
.in-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.in-d { font-size: var(--z-t0); white-space: nowrap; }
.in-d.is-off { color: var(--muted); }
.in-d.is-plat { color: var(--muted); }
.in-d.is-haut { color: var(--z-c-sain); }
.in-d.is-bas { color: var(--z-c-alerte); }
.in-spark { width: 96px; height: 20px; color: var(--accent); display: block; }
.in-bars { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin: 10px 0 4px; }
.in-b { flex: 0 0 8px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .75; }
.in-mods { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.in-mods li { font-size: var(--z-t1); color: var(--muted); }
.in-m { font-family: ui-monospace, monospace; }
.in-mn { font-variant-numeric: tabular-nums; font-weight: 600; }
.in-refus { border-inline-start: 3px solid var(--z-c-critique); }
.in-partiel { border-inline-start: 3px solid var(--z-c-alerte); }

/* Ce qui tient a quoi : remonter des liens declares, jamais en supposer. */
.dp-l2 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dp-c { border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.dp-c-open { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.dp-c-alerte { border-inline-start: 3px solid var(--z-c-alerte); }
.dp-h { display: flex; }
.dp-t { flex: 1 1 auto; text-align: start; background: transparent; border: 0; font: inherit;
        color: inherit; cursor: pointer; padding: 9px 12px; }
.dp-d { border-top: 1px solid var(--line); padding: 10px 12px; }
.dp-l { list-style: none; margin: 8px 0 0; padding: 0; }
.dp-l > li { padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.dp-l > li:first-child { border-top: 0; }
.dp-l3 { list-style: none; margin: 5px 0 0; padding: 0 0 0 14px; }
.dp-l3 li { font-size: var(--z-t1); padding: 2px 0; color: var(--muted); }
.dp-n { font-weight: 600; }
.dp-n-v { color: var(--accent); }
.dp-fl { color: var(--muted); padding: 0 4px; }
.dp-chaine { margin: 0 0 6px; font-size: var(--z-t3); }
.dp-code { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--accent); }
.dp-dec { font-size: var(--z-t0); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.dp-dec-acc { color: var(--z-c-alerte); }
.dp-dec-non { color: var(--muted); border-style: dashed; }
.dp-alerte { color: var(--z-c-alerte); }
.dp-manque { border-inline-start: 3px solid var(--z-c-alerte); }

/* Cycle de vie des politiques : porter, approuver, revoir. */
.plc-c { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 10px 12px; margin-bottom: 10px; }
.plc-c-a_revoir, .plc-c-sans_proprietaire { border-inline-start: 3px solid var(--z-c-critique); }
.plc-c-projet, .plc-c-sans_terme, .plc-c-bientot { border-inline-start: 3px solid var(--z-c-alerte); }
.plc-c-retiree { opacity: .72; }
.plc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.plc-etat { font-size: var(--z-t0); border-radius: 4px; padding: 1px 8px; border: 1px solid; white-space: nowrap; }
.plc-etat.is-ok { color: var(--z-c-sain); border-color: var(--z-c-sain); }
.plc-etat.is-mid { color: var(--z-c-alerte); border-color: var(--z-c-alerte); }
.plc-etat.is-crit { color: var(--z-c-critique); border-color: var(--z-c-critique); }
.plc-etat.is-off { color: var(--ink-soft, #33465e); border-color: var(--line); border-style: dashed; }
.plc-ver { font-family: ui-monospace, monospace; font-size: var(--z-t0); color: var(--muted); }
.plc-actions { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.plc-src em { font-style: normal; font-size: var(--z-t1); color: var(--muted); }
.plc-ml { list-style: none; margin: 8px 0 0; padding: 0; }
.plc-ml li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.plc-ml li:first-child { border-top: 0; }
.plc-ml button { margin-inline-start: auto; }
.q-chip.plc-a_revoir, .q-chip.plc-sans_proprietaire { color: var(--z-c-critique); }
.q-chip.plc-projet, .q-chip.plc-sans_terme, .q-chip.plc-bientot { color: var(--z-c-alerte); }
.q-chip.plc-en_vigueur { color: var(--z-c-sain); }
.q-chip.plc-retiree { color: var(--ink-soft, #33465e); border-style: dashed; }

/* Tenue du plan : ce que le pourcentage ne dit pas. */
.tn-n { font-variant-numeric: tabular-nums; text-align: end; }
.tn-alerte { color: var(--z-c-alerte); font-weight: 600; }
.tn-anon td { background: rgba(180,83,9,.06); }
.tn-l { list-style: none; margin: 8px 0 0; padding: 0; }
.tn-l li { padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.tn-l li:first-child { border-top: 0; }
.tn-manque { border-inline-start: 3px solid var(--z-c-alerte); }
.q-chip.tn-c-mal { color: var(--z-c-alerte); }

/* Revue des acces : la campagne et les decisions par compte. */
.acc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.acc-item:first-child { border-top: 0; }
.acc-u { font-weight: 600; font-size: var(--z-t2); }
.acc-dec { margin-inline-start: auto; font: inherit; font-size: var(--z-t2); padding: 3px 8px; border-radius: 6px;
           border: 1px solid var(--line-strong, var(--z-c-gris-3)); background: var(--panel, var(--z-c-blanc)); color: var(--ink, var(--z-c-nuit)); }
.acc-item-fait .acc-u { color: var(--muted); }
.acc-le { font-variant-numeric: tabular-nums; }
.acc-manque { border-inline-start: 3px solid var(--z-c-alerte); }
.acc-alerte { color: var(--z-c-alerte); }

/* Assurance de sauvegarde : une copie ecrite n est pas une copie relue. */
.as-verdict { margin: 6px 0 0; font-size: var(--z-t2); font-weight: 600; }
.as-verdict.as-ok { color: var(--z-c-sain); }
.as-verdict.as-perime { color: var(--z-c-critique); }
.as-verdict.as-sans_ref { color: var(--muted); }
.as-l { list-style: none; margin: 8px 0 0; padding: 0; }
.as-l li { padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.as-l li:first-child { border-top: 0; }
.as-l li.as-mal strong { color: var(--z-c-critique); }
.as-err { color: var(--z-c-critique); font-family: ui-monospace, monospace; font-size: var(--z-t0); }
.as-n { font-variant-numeric: tabular-nums; text-align: end; }
.as-manque { border-inline-start: 3px solid var(--z-c-critique); }

/* Le risque en euros : vos chiffres, notre arithmetique. */
.eu-kpis { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 10px 0 4px; }
.eu-k { display: flex; flex-direction: column; gap: 2px; }
.eu-v { font-size: var(--z-t5); font-weight: 700; font-variant-numeric: tabular-nums; }
.eu-l { font-size: var(--z-t1); color: var(--muted); max-width: 26ch; }
.eu-bon { color: var(--z-c-sain); }
.eu-mal { color: var(--z-c-alerte); }
.eu-n { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.eu-l2, .eu-l { }
ul.eu-l { list-style: none; margin: 8px 0 0; padding: 0; max-width: none; }
ul.eu-l li { padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
ul.eu-l li:first-child { border-top: 0; }
.eu-manque { border-inline-start: 3px solid var(--z-c-alerte); }
.eu-methode { font-style: italic; }

/* Classification : le mot ne protege pas, la regle protege. */
.cl-nl { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cl-n { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 10px 12px; }
.cl-n-incomplet { border-inline-start: 3px solid var(--z-c-alerte); }
.cl-n-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.cl-nom { font: inherit; font-weight: 600; font-size: var(--z-t3); padding: 4px 8px; border-radius: 6px;
          border: 1px solid var(--line-strong, var(--z-c-gris-3)); background: var(--panel, var(--z-c-blanc)); color: var(--ink, var(--z-c-nuit)); flex: 0 1 220px; }
.cl-n-h .cl-del { margin-inline-start: auto; }
.cl-sel { font: inherit; font-size: var(--z-t2); padding: 3px 8px; border-radius: 6px;
          border: 1px solid var(--line-strong, var(--z-c-gris-3)); background: var(--panel, var(--z-c-blanc)); color: var(--ink, var(--z-c-nuit)); }
.cl-r-non td:first-child { border-inline-start: 3px solid var(--line); }
.cl-r-incomplet td:first-child { border-inline-start: 3px solid var(--z-c-alerte); }
.cl-r-ok td:first-child { border-inline-start: 3px solid var(--z-c-sain); }
.cl-alerte { color: var(--z-c-alerte); }
.cl-manque { border-inline-start: 3px solid var(--z-c-alerte); }
.q-chip.cl-c-mal { color: var(--z-c-alerte); }

/* Qui sait faire quoi : un role a une seule personne est un point unique. */
.cp-t th.cp-p { min-width: 130px; }
.cp-t th.cp-p span { display: block; }
.cp-t { min-width: 640px; }
.cp-c { text-align: center; }
.cp-sel { font: inherit; font-size: var(--z-t1); padding: 3px 6px; border-radius: 6px; width: 100%;
          border: 1px solid var(--line-strong, var(--z-c-gris-3)); background: var(--panel, var(--z-c-blanc)); color: var(--ink, var(--z-c-nuit)); }
.cp-r-orphelin td:first-child { border-inline-start: 3px solid var(--z-c-critique); }
.cp-r-unique td:first-child { border-inline-start: 3px solid var(--z-c-alerte); }
.cp-r-ok td:first-child { border-inline-start: 3px solid var(--z-c-sain); }
.cp-t td:first-child { position: relative; padding-inline-end: 34px; min-width: 200px; }
.cp-del { position: absolute; inset-inline-end: 6px; top: 8px; }
.cp-dispo { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.cp-l { list-style: none; margin: 8px 0 0; padding: 0; }
.cp-l li { padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.cp-l li:first-child { border-top: 0; }
.cp-crit { color: var(--z-c-critique); }
.cp-mid { color: var(--z-c-alerte); }
.cp-ok { color: var(--z-c-sain); }
.cp-n { font-variant-numeric: tabular-nums; text-align: end; }
.cp-manque { border-inline-start: 3px solid var(--z-c-critique); }
.q-chip.cp-c-crit { color: var(--z-c-critique); }
.q-chip.cp-c-mid { color: var(--z-c-alerte); }

/* Clausier : une clause sans base citee est une preference. */
.cq-l2 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cq-c { border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.cq-c-pref { border-inline-start: 3px dashed var(--line-strong, var(--z-c-gris-3)); }
.cq-c-mal { border-inline-start: 3px solid var(--z-c-critique); }
.cq-h { display: flex; align-items: stretch; }
.cq-t { flex: 1 1 auto; text-align: start; background: transparent; border: 0; font: inherit;
        color: inherit; cursor: pointer; padding: 9px 12px; }
.cq-base { display: block; font-size: var(--z-t0); color: var(--accent); font-family: ui-monospace, monospace; margin-top: 2px; }
.cq-c-pref .cq-base { color: var(--muted); font-family: inherit; font-style: italic; }
.cq-del { align-self: center; margin-inline-end: 8px; }
.cq-d { border-top: 1px solid var(--line); padding: 10px 12px; }
.cq-d p { margin: 0 0 6px; font-size: var(--z-t2); }
.cq-l { list-style: none; margin: 8px 0 0; padding: 0; }
.cq-l li { padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.cq-l li:first-child { border-top: 0; }
.cq-l3 { list-style: none; margin: 0; padding: 0; }
.cq-l3 li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--z-t2); }
.cq-l3 li:first-child { border-top: 0; }
.cq-cn { flex: 1 1 220px; font-weight: 600; }
.cq-sel { font: inherit; font-size: var(--z-t1); padding: 3px 8px; border-radius: 6px;
          border: 1px solid var(--line-strong, var(--z-c-gris-3)); background: var(--panel, var(--z-c-blanc)); color: var(--ink, var(--z-c-nuit)); }
.cq-mal { color: var(--z-c-critique); }
.cq-manque { border-inline-start: 3px solid var(--z-c-critique); }
.q-chip.cq-c-mal { color: var(--z-c-critique); border-inline-start: 0; }

/* V50, ce que NARA lit dans vos donnees.
   Aucune couleur en dur : les reponses vivent dans les deux themes comme le
   reste de l application. Un `--text-dim` sur un fond de carte reste lisible,
   contrairement a un `--muted` pose sur un fond clair fixe. */
.nf { margin: 0 0 18px; }
.nf-t { margin: 0 0 2px; font-weight: 600; color: var(--text); }
.nf-d { margin: 0 0 10px; font-size: var(--z-t3); color: var(--text-dim); }
.nf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-chip { text-align: start; }

.nf-rep { display: flex; flex-direction: column; gap: 10px; }
.nf-phrase { margin: 0; font-weight: 600; }
.nf-vide { margin: 0; color: var(--text-dim); }
.nf-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 0; background: var(--border); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; }
.nf-pts > div { background: var(--bg-card); padding: 8px 10px; }
.nf-pts dt { font-size: var(--z-t1); color: var(--text-dim); margin: 0 0 2px; }
.nf-pts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.nf-liste { margin: 0; padding-inline-start: 18px; font-size: var(--z-t3); }
.nf-liste li { margin: 2px 0; }
.nf-src { margin: 0; font-size: var(--z-t2); color: var(--text-dim); }
.nf-go { background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
  color: var(--accent); cursor: pointer; text-decoration: underline; }
.nf-go:hover { text-decoration: none; }
.msg.is-fait .msg-b { border-inline-start: 3px solid var(--accent); }
@media (max-width: 560px) { .nf-pts { grid-template-columns: 1fr 1fr; } }

/* CORE-01, registre des objets canoniques. */
.reg-intro { color: var(--text-dim); max-width: 68ch; margin: 0 0 16px; }
.reg-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; margin: 0 0 22px; }
.reg-kpi > div { background: var(--bg-card); padding: 12px 14px; }
.reg-kpi b { display: block; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.reg-kpi span { font-size: var(--z-t1); color: var(--text-dim); }
.reg-h3 { margin: 26px 0 6px; font-size: var(--z-t4); }
.reg-h4 { margin: 16px 0 4px; font-size: var(--z-t3); }
.reg-aide { margin: 0 0 10px; font-size: var(--z-t3); color: var(--text-dim); max-width: 68ch; }
.reg-vide { color: var(--text-dim); font-size: var(--z-t3); margin: 6px 0 0; }
.reg-liste { display: flex; flex-direction: column; gap: 10px; }
.reg-o, .reg-p, .reg-c { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px; }
.reg-o-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.reg-o-n { font-weight: 600; }
.reg-n { font-size: var(--z-t1); color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; }
.reg-m { margin: 0 0 8px; padding-inline-start: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; font-size: var(--z-t3); }
.reg-m li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reg-mod { font-size: var(--z-t1); color: var(--text-dim); background: var(--bg-soft);
  border-radius: 4px; padding: 1px 6px; }
/* Bouton de suppression : lisible au repos, jamais une icone seule, et une
   largeur qui suit son libelle. Le bouton « Supprimer ce tiers » avait deja
   deborde sa carte pour avoir herite d une largeur fixe de 28 px. */
.reg-det { font: inherit; font-size: var(--z-t1); background: none; cursor: pointer;
  color: var(--crit); border: 1px solid var(--crit); border-radius: 4px;
  padding: 2px 8px; min-height: 24px; }
.reg-det:hover { background: var(--crit); color: var(--bg); }
.reg-c-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.reg-c-r { font-family: var(--mono, ui-monospace, monospace); font-size: var(--z-t1);
  color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: 1px 6px; }
.reg-c.is-doux .reg-c-r { color: var(--text-dim); border-color: var(--border); }
.reg-c-t { font-weight: 600; font-size: var(--z-t3); }
.reg-c-q { margin: 6px 0 0; font-size: var(--z-t3); color: var(--text-dim); }

/* La chaine declaree, dans la carte d un objet canonique. */
.reg-ch { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.reg-ch-h { font-size: var(--z-t2); font-weight: 600; margin-bottom: 4px; }
.reg-ch-r { margin: 0 0 8px; font-size: var(--z-t3); }
.reg-ch-g { margin-top: 8px; }
.reg-ch-l { margin: 4px 0 0; padding-inline-start: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px 14px; }
.reg-ch-l label { display: flex; align-items: center; gap: 7px; font-size: var(--z-t3); cursor: pointer; }
.reg-ch-l input { flex: 0 0 auto; }
.reg-rto { font-size: var(--z-t1); color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }

/* CORE-03 : ce que dit le texte, replie par defaut. */
.nr-det { margin: 6px 0 2px; }
.nr-det > summary { cursor: pointer; font-size: var(--z-t2); color: var(--accent); list-style: none; }
.nr-det > summary::-webkit-details-marker { display: none; }
.nr-det > summary::before { content: "› "; display: inline-block; transition: transform .12s; }
.nr-det[open] > summary::before { content: "⌄ "; }
.nr-det > summary:hover { text-decoration: underline; }
.nr-dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 3px 12px;
  margin: 6px 0 0; font-size: var(--z-t2); }
.nr-dl dt { color: var(--text-dim); }
.nr-dl dd { margin: 0; }
.nr-corpus { margin-top: 12px; font-size: var(--z-t2); color: var(--text-dim);
  font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .nr-dl { grid-template-columns: 1fr; gap: 0 0; }
  .nr-dl dd { margin: 0 0 6px; } }

/* CORE-03 : qui a notifie, et sur quelle preuve. */
.nr-pr { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.nr-pr-f { margin: 0; }
.nr-pr-ok, .nr-pr-ko { grid-column: 1 / -1; margin: 0; font-size: var(--z-t2); }
.nr-pr-ok { color: var(--ok); }
.nr-pr-ko { color: var(--warn); }

.nr-orph { margin-top: 10px; font-size: var(--z-t2); color: var(--warn); }

/* CORE-02 : un constat qu on ne peut pas rattacher a une regle se voit. */
.reg-c.is-horscorpus { border-inline-start: 3px solid var(--warn); }
.reg-c-hc { margin: 6px 0 0; font-size: var(--z-t2); color: var(--warn); }

/* CORE-06 : flux « ce qui a changé », vue Journal. */
.aud-flux .aud-ev-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.aud-flux .aud-ev-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  padding: .4rem .55rem; border-radius: 6px; background: var(--surface-2, rgba(127, 127, 127, .07)); font-size: var(--z-t3); }
.aud-flux .aud-ev-t { font-weight: 600; text-transform: lowercase; opacity: .8; min-width: 5.5em; }
.aud-flux .aud-ev-d { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--z-t3); }
.aud-flux .aud-ev-n { font-style: italic; opacity: .75; }
.aud-flux .aud-ev-a { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--z-t3); }
.aud-flux .aud-ev-m { font-size: var(--z-t3); }

/* CORE-08 : liens deduits de l'atelier 1, dans le registre canonique. */
.reg-ch-d { font-size: var(--z-t3); opacity: .85; margin: .3rem 0 .5rem; }
.reg-ch-l label.reg-ch-dd { opacity: .9; }
.reg-ch-l .reg-dd { font-size: var(--z-t2); opacity: .7; font-style: italic; }
.reg-ch-l input[disabled] { cursor: not-allowed; }

/* P0 27/08 : ce qui a quitte le poste, annonce en tete du resultat. */
.lk-flux {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .55rem .75rem; border-radius: 6px; margin: 0 0 .6rem;
  font-size: var(--z-t3); border: 1px solid transparent;
}
.lk-flux i { flex: 0 0 auto; }
.lk-flux .btn { margin-left: auto; }
.lk-flux-local   { background: rgba(46, 122, 87, .10);  border-color: rgba(46, 122, 87, .35); }
.lk-flux-externe { background: rgba(166, 106, 0, .10);  border-color: rgba(166, 106, 0, .35); }

/* Bloc « Relations », posé sur les fiches. */
.rel-bloc { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .7rem .85rem; margin: .8rem 0; background: rgba(127, 127, 127, .045); }
.rel-h { display: flex; align-items: center; gap: .4rem; font-weight: 600;
  font-size: var(--z-t4); margin-bottom: .5rem; }
.rel-g { margin: .55rem 0 0; }
.rel-lbl { display: block; font-size: var(--z-t2); text-transform: uppercase;
  letter-spacing: .06em; opacity: .7; margin-bottom: .2rem; }
.rel-l { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .22rem; font-size: var(--z-t3); }
.rel-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.rel-go { background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--brand, var(--z-c-info)); font-weight: 600; text-align: left; }
.rel-go:hover { text-decoration: underline; }
.rel-q { margin-left: auto; opacity: .65; font-size: var(--z-t3); font-variant-numeric: tabular-nums; }
.rel-rto { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--z-t3); opacity: .8; }
.rel-dd { font-size: var(--z-t2); font-style: italic; opacity: .7; }
.rel-rto-r { margin: .35rem 0 0; font-size: var(--z-t3); opacity: .85; }
.rel-vide { margin: .35rem 0 .5rem; font-size: var(--z-t3); opacity: .82; }

.rel-l .rel-nom { opacity: .9; }

/* « Pourquoi ce score ? » */
.pq-btn { background: none; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 6px;
  padding: .2rem .55rem; font: inherit; font-size: var(--z-t3); cursor: pointer; color: inherit; opacity: .9; }
.pq-btn:hover { opacity: 1; border-color: var(--brand, var(--z-c-info)); color: var(--brand, var(--z-c-info)); }
.pq-panneau { margin: .6rem 0 0; font-size: var(--z-t3); }
.pq-panneau[hidden] { display: none; }
.pq-regle, .pq-alerte, .pq-levier { padding: .5rem .65rem; border-radius: 6px; margin: 0 0 .5rem; }
.pq-regle { background: rgba(127,127,127,.08); }
.pq-alerte { background: rgba(166,106,0,.10); border: 1px solid rgba(166,106,0,.35); }
.pq-levier { background: rgba(0,140,214,.08); border: 1px solid rgba(0,140,214,.3); }
.pq-t { width: 100%; border-collapse: collapse; margin: .4rem 0 .6rem; }
.pq-t td { padding: .4rem .5rem; border-bottom: 1px solid var(--line-soft, rgba(127,127,127,.16)); vertical-align: top; }
.pq-t tfoot td { border-bottom: none; border-top: 2px solid var(--line, rgba(127,127,127,.3)); font-weight: 600; }
.pq-l { font-weight: 600; }
.pq-p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.pq-r { display: block; font-weight: 400; font-size: var(--z-t3); opacity: .75; margin-top: .1rem; }
.pq-e { list-style: none; margin: .3rem 0 0; padding: 0; font-weight: 400; font-size: var(--z-t3); }
.pq-e li { display: flex; gap: .5rem; justify-content: space-between; max-width: 26rem; opacity: .85; }
.pq-e b { font-variant-numeric: tabular-nums; }
.pq-src { font-size: var(--z-t3); opacity: .7; margin: .3rem 0 0; }
.pq-vide { opacity: .8; }

.pq-fiche { margin: .6rem 0; }
.pq-fiche .pq-panneau { margin-top: .5rem; }

/* Champs personnalises : definition (vue Personnalisation) et saisie (fiches). */
.cf-cible { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .7rem .85rem; margin: .7rem 0; }
.cf-cible-h { display: flex; align-items: baseline; gap: .6rem; font-weight: 600; margin-bottom: .45rem; }
.cf-n { margin-left: auto; font-size: var(--z-t3); opacity: .7; font-variant-numeric: tabular-nums; }
.cf-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cf-liste li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .35rem .5rem; border-radius: 6px; background: rgba(127,127,127,.06); }
.cf-type { font-size: var(--z-t3); opacity: .78; }
.cf-cle { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--z-t2); opacity: .65; }
.cf-liste .lib-del { margin-left: auto; }
.cf-vide { font-size: var(--z-t3); opacity: .8; margin: .2rem 0 .6rem; }
.cf-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cf-form .cf-lbl { flex: 2 1 12rem; }
.cf-form .cf-opts { flex: 2 1 14rem; }
.cf-bloc { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .7rem .85rem; margin: .8rem 0; }
.cf-h { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--z-t4); margin-bottom: .5rem; }
.cf-grille { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cf-champ { display: flex; flex-direction: column; gap: .2rem; font-size: var(--z-t3); }
.cf-champ > span { opacity: .8; }

/* Barre de filtres et vues enregistrees. */
.vu-barre { display: flex; flex-wrap: wrap; gap: .55rem; align-items: flex-end;
  padding: .7rem .85rem; margin: 0 0 .9rem; border: 1px solid var(--line, rgba(127,127,127,.28));
  border-radius: 8px; background: rgba(127,127,127,.045); }
.vu-f { display: flex; flex-direction: column; gap: .18rem; font-size: var(--z-t3); min-width: 9rem; }
.vu-f > span { opacity: .78; }
.vu-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.vu-sel { min-width: 11rem; }
.vu-compte { flex-basis: 100%; font-size: var(--z-t3); opacity: .85; padding-top: .2rem; }
.vu-liste { flex-basis: 100%; list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .25rem; }
.vu-liste li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--z-t3);
  padding: .3rem .5rem; border-radius: 6px; background: rgba(127,127,127,.06); }
.vu-meta { opacity: .7; font-size: var(--z-t3); }
.vu-liste .lib-del { margin-left: auto; }

/* Ressemblances a l import : montrer, ne pas decider. */
.imp-res-l { list-style: none; margin: .5rem 0 .6rem; padding: 0;
  display: flex; flex-direction: column; gap: .3rem; }
.imp-res-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .35rem .55rem; border-radius: 6px; background: rgba(166, 106, 0, .09);
  border: 1px solid rgba(166, 106, 0, .3); font-size: var(--z-t3); }
.imp-res-n { font-weight: 600; }
.imp-res-v { opacity: .7; font-size: var(--z-t3); }
.imp-res-s { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }

/* Questionnaire fournisseur a envoyer. */
.ddq-doc { margin: 0 0 1.2rem; }
.ddq-sep { border-top: 2px dashed var(--line, rgba(127,127,127,.4)); margin: 1.6rem 0; }
.ddq-t { width: 100%; border-collapse: collapse; font-size: var(--z-t3); margin: .6rem 0; }
.ddq-t th, .ddq-t td { border: 1px solid var(--line, rgba(127,127,127,.35));
  padding: .45rem .55rem; vertical-align: top; text-align: left; }
.ddq-t thead th { background: rgba(127,127,127,.08); font-size: var(--z-t3); }
.ddq-n { width: 1.6rem; text-align: center; opacity: .6; font-variant-numeric: tabular-nums; }
.ddq-q { width: 42%; }
.ddq-r { width: 20%; white-space: nowrap; }
.ddq-p { width: 30%; min-height: 2.2rem; }
.ddq-src { display: block; font-size: var(--z-t3); font-style: italic; opacity: .78; margin-top: .2rem; }
.ddq-case { display: inline-block; width: 1rem; height: 1rem; line-height: 1rem; text-align: center;
  border: 1px solid var(--line, rgba(127,127,127,.5)); border-radius: 3px; margin-right: .1rem; }
.ddq-case.ddq-pre { font-weight: 700; }
.ddq-fin { margin-top: .8rem; font-size: var(--z-t4); }
.ddq-note { margin-top: 1rem; font-size: var(--z-t3); opacity: .8; }
@media print { .ddq-sep { page-break-after: always; border: 0; } }

/* Etiquettes (1.57.0). Les couleurs passent par color-mix sur transparent :
   la meme regle tient sur fond clair et sur fond sombre, sans dupliquer la
   palette par theme. */
.et-chip { --c: var(--z-c-gris-1); display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--z-t1); line-height: 1.5; padding: 2px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 48%, transparent);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: color-mix(in srgb, var(--c) 62%, currentColor); }
.et-chip[data-c="ardoise"] { --c: var(--z-c-gris-1); }
.et-chip[data-c="azur"]    { --c: var(--z-c-info); }
.et-chip[data-c="ocean"]   { --c: #1f8a8a; }
.et-chip[data-c="vert"]    { --c: #2f9e63; }
.et-chip[data-c="ambre"]   { --c: #d08a1a; }
.et-chip[data-c="sable"]   { --c: #a68a5b; }
.et-chip[data-c="brique"]  { --c: #c0544a; }
.et-chip[data-c="prune"]   { --c: #8a5aa8; }
.et-btn { cursor: pointer; font-family: inherit; opacity: .55; }
.et-btn:hover, .et-btn:focus-visible { opacity: .85; }
.et-btn.et-on { opacity: 1; font-weight: 600;
  background: color-mix(in srgb, var(--c) 26%, transparent);
  border-color: color-mix(in srgb, var(--c) 72%, transparent); }
.et-pastilles { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-inline-start: .45rem; }
.et-bloc { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .6rem .75rem; margin: .7rem 0; }
.et-h { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin-bottom: .45rem; }
.et-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.et-cible { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .7rem .85rem; margin: .7rem 0; }
.et-cible-h { display: flex; align-items: baseline; gap: .6rem; font-weight: 600; margin-bottom: .45rem; }
.et-n { margin-left: auto; font-size: var(--z-t3); opacity: .7; font-variant-numeric: tabular-nums; }
.et-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.et-liste li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .35rem .5rem; border-radius: 6px; background: rgba(127,127,127,.06); }
.et-cle { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--z-t2); opacity: .6; }
.et-coul { max-width: 9rem; margin-left: auto; }
.et-liste .lib-del { margin-left: 0; }
.et-vide { font-size: var(--z-t3); opacity: .8; margin: .2rem 0 .6rem; }
.et-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.et-form .et-lbl { flex: 2 1 14rem; }
.et-refus { font-size: var(--z-t3); opacity: .85; border-inline-start: 3px solid var(--line, rgba(127,127,127,.4));
  padding-inline-start: .7rem; margin: .5rem 0 .8rem; }

/* Matrices de risque (1.58.0). La grille reutilise les classes de niveau
   existantes (r-crit / r-high / r-mid / r-low) : une cinquieme palette aurait
   fait mentir la legende du reste de l'application. */
.mx-bloc { border: 1px solid var(--line, rgba(127,127,127,.28)); border-radius: 8px;
  padding: .8rem .9rem; margin: .8rem 0; }
.mx-h { display: flex; align-items: baseline; gap: .6rem; font-weight: 600; margin-bottom: .3rem; }
.mx-perso { font-size: var(--z-t2); opacity: .75; border: 1px solid var(--line, rgba(127,127,127,.4));
  border-radius: 999px; padding: 1px 8px; }
.mx-src { font-size: var(--z-t3); opacity: .75; margin: 0 0 .6rem; }
.mx-lignes { display: flex; flex-wrap: wrap; gap: .6rem; }
.mx-l { display: flex; flex-direction: column; gap: .2rem; font-size: var(--z-t3); flex: 1 1 12rem; }
.mx-in { max-width: 8rem; font-variant-numeric: tabular-nums; }
.mx-etendue { font-size: var(--z-t3); opacity: .78; margin: .5rem 0 .3rem; }
.mx-grille { border-collapse: collapse; margin: .5rem 0 .6rem; font-variant-numeric: tabular-nums; }
.mx-grille th { font-weight: 600; font-size: var(--z-t2); opacity: .75; padding: 2px 7px; }
.mx-grille td { width: 2.4rem; height: 2rem; text-align: center; font-size: var(--z-t3);
  border: 1px solid var(--line, rgba(127,127,127,.25)); }
.mx-grille td.r-crit { background: color-mix(in srgb, var(--z-c-critique) 22%, transparent); }
.mx-grille td.r-high { background: color-mix(in srgb, var(--z-c-alerte) 22%, transparent); }
.mx-grille td.r-mid  { background: color-mix(in srgb, var(--z-c-alerte) 20%, transparent); }
.mx-grille td.r-low  { background: color-mix(in srgb, var(--z-c-sain) 18%, transparent); }
.mx-effet { font-size: var(--z-t3); margin: .4rem 0 .7rem; border-inline-start: 3px solid var(--line, rgba(127,127,127,.4));
  padding-inline-start: .7rem; }
.mx-effet.mx-bouge { border-inline-start-color: var(--z-c-alerte); }
.mx-effet.mx-invalide { border-inline-start-color: var(--z-c-critique); }
.mx-effet.mx-inconnu { opacity: .75; }
.mx-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mx-refus { font-size: var(--z-t3); opacity: .85; border-inline-start: 3px solid var(--line, rgba(127,127,127,.4));
  padding-inline-start: .7rem; margin: .5rem 0 .9rem; }

/* Historique d'identite du registre canonique (1.59.0). */
.reg-hist { margin: .5rem 0 .2rem; }
.reg-hist-b { background: transparent; border: 1px solid var(--line, rgba(127,127,127,.35));
  border-radius: 999px; padding: 2px 10px; font: inherit; font-size: var(--z-t3); cursor: pointer;
  color: inherit; opacity: .8; }
.reg-hist-b:hover, .reg-hist-b:focus-visible { opacity: 1; }
.reg-hist-d, .reg-hist-t { font-size: var(--z-t3); margin: .45rem 0 .2rem; opacity: .85; }
.reg-hist-t { border-inline-start: 3px solid var(--z-c-alerte); padding-inline-start: .6rem; }
.reg-hist-l { list-style: none; margin: .4rem 0 0; padding: 0; display: flex;
  flex-direction: column; gap: .18rem; font-size: var(--z-t3); }
.reg-hist-l li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
  padding: .22rem .45rem; border-radius: 5px; background: rgba(127,127,127,.06); }
.reg-hist-n { font-variant-numeric: tabular-nums; opacity: .55; min-width: 1.6rem; }
.reg-hist-q { font-variant-numeric: tabular-nums; opacity: .7; }
.reg-hist-i { opacity: .7; font-style: italic; }

/* Declencheurs reglementaires (1.62.0). */
.nr-dep em { display: block; font-style: normal; font-size: var(--z-t2); opacity: .78; margin-top: .2rem; }
.nr-dep .nr-dep-o { opacity: .62; }
.nr-dep-note { font-size: var(--z-t3); margin: .7rem 0 0; border-inline-start: 3px solid var(--z-c-alerte);
  padding-inline-start: .7rem; }
.nr-dep-note.nr-dep-ok { border-inline-start-color: var(--z-c-sain); }
.nr-suppose { font-size: var(--z-t2); opacity: .8; font-style: italic; }

/* Contrat d'explication : le rendu unique de « pourquoi ce chiffre ».
   Il vit dans les memes panneaux que `.pq-*` et reprend donc leur langage
   visuel. Les jetons ont tous un repli : ce bloc doit tenir meme charge
   avant la feuille de theme. */
.exp { font-size: var(--z-t4); }
.exp-vide { opacity: .85; padding: .5rem .65rem; border-radius: 6px;
  background: rgba(127,127,127,.08); }
.exp-vide p { margin: 0; }

.exp-h { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .5rem; }
.exp-h h3 { margin: 0; font-size: var(--z-t4); }
.exp-val { font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: var(--z-t5); color: var(--brand, var(--z-c-info)); }
.exp-preuve { font-size: var(--z-t1); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: .1rem .4rem; border-radius: 4px;
  color: var(--z-c-blanc); }

.exp-regle { margin: 0; padding: .5rem .65rem; border-radius: 6px;
  background: rgba(127,127,127,.08); }

.exp-b { margin: 0 0 .7rem; }
.exp-b h4 { margin: 0 0 .3rem; font-size: var(--z-t2); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; opacity: .65; }

.exp-l { list-style: none; margin: 0; padding: 0; }
.exp-e { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
  padding: .35rem .1rem; border-bottom: 1px solid var(--line-soft, rgba(127,127,127,.16)); }
.exp-l > .exp-e:last-child { border-bottom: none; }
.exp-e-q { flex: 1 1 12rem; min-width: 0; }
.exp-e-v { font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; }

/* Une entree qui NE COMPTE PAS doit se voir comme telle sans qu'on ait a
   lire le motif : elle est en retrait, et le motif suit sur sa ligne. */
.exp-e-hors { opacity: .68; }
.exp-e-p { flex-basis: 100%; font-size: var(--z-t3); font-style: italic; opacity: .85; }

/* Le second niveau : ce qui compose une entree. */
.exp-l-sous { flex-basis: 100%; margin: .25rem 0 0 .8rem; padding: 0 0 0 .7rem;
  border-left: 2px solid var(--line-soft, rgba(127,127,127,.2)); }
.exp-l-sous .exp-e { border-bottom: none; padding: .12rem 0; font-size: var(--z-t3);
  opacity: .85; }

/* Les pieges et les manques sont de la prose, pas des lignes chiffrees.
   Le fond d'alerte est pose sur la classe elle-meme et non par `:has()` :
   une regle structurelle ne doit pas dependre d'un selecteur recent. */
.exp-l-txt li { display: block; padding: .35rem .65rem; margin: 0 0 .3rem;
  border-radius: 6px; border-bottom: none;
  background: rgba(166,106,0,.10); border: 1px solid rgba(166,106,0,.3); }

/* Le repli, quand la fenetre modale du socle n'est pas la. */
.exp-hote { margin: .5rem 0 0; }
.exp-hote:empty { display: none; }

/* Les rapports que chaque module sait produire, offerts depuis l'ecran Rapports.
   Un rapport indisponible n'est pas masque : il porte sa mention, parce qu'un
   bouton qui disparait se lit comme une fonction qui n'existe pas. */
.rpt-modules { margin-top: 26px; }
.rpt-modules h4 { margin: 0 0 4px; }
.rpt-mod-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rpt-mod-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpt-mod-list li > button { flex: 0 0 auto; min-width: 220px; justify-content: flex-start; }
.rpt-mod-q { color: var(--text-dim); font-size: var(--z-t3); flex: 1 1 260px; }
.rpt-mod-off { color: var(--warn); font-size: var(--z-t2); font-weight: 600; white-space: nowrap; }


/* JETONS MACHINE. Rien de neuf sur la forme : le bloc, la pilule et le bouton
   sont ceux du reste de l'application. Les seules regles propres a cet ecran
   servent deux choses que rien d'autre ne fait ici, un avertissement qui doit
   se voir avant qu'on clique, et un secret affiche une seule fois qu'il faut
   pouvoir selectionner en entier sans le tronquer. */
.mcpj-portee { margin: 0 0 16px; }
.mcpj-champs { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.mcpj-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.mcpj-champ > span { font-weight: 600; font-size: var(--z-t3); }
.mcpj-champ-court { flex: 0 1 180px; }
.mcpj-champ input, .mcpj-champ select { width: 100%; }

/* L'avertissement porte un filet d'alerte : dans un bloc gris uniforme, la
   phrase qui compte se lisait comme une note de bas de page. */
.mcpj-avant {
  margin: 14px 0; padding: 10px 14px;
  border-inline-start: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius:6px; font-size: var(--z-t3); color: var(--text);
}

.mcpj-tablewrap { overflow-x: auto; }
.mcpj-table { width: 100%; border-collapse: collapse; font-size: var(--z-t3); }
.mcpj-table th {
  text-align: start; 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;
}
.mcpj-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.mcpj-table tr:last-child td { border-bottom: 0; }
.mcpj-id code { font-family: var(--mono); font-size: var(--z-t3); color: var(--text-dim); }
.mcpj-gris { color: var(--text-dim); }
.mcpj-etat { white-space: nowrap; }
.mcpj-etat-vivant { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.mcpj-etat-expire { background: var(--bg-card); border-color: var(--border); color: var(--text-dim); }
.mcpj-etat-revoque { background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 38%, transparent); }

/* Le panneau du secret se distingue du reste de la page : il ne reviendra pas. */
.mcpj-secret-bloc { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-sm); }
.mcpj-secret-valeur {
  display: block; font-family: var(--mono); font-size: var(--z-t4); line-height: 1.5;
  padding: 12px 14px; border: 1px solid var(--border); border-radius:6px;
  background: var(--bg-card); color: var(--text);
  overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.mcpj-secret-exp { margin: 8px 0 0; font-size: var(--z-t3); color: var(--text-dim); }
.mcpj-secret-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.mcpj-refus { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.mcpj-refus p { margin: 0; font-size: var(--z-t3); }

/* LES TROIS VARIABLES QUI N ETAIENT DEFINIES NULLE PART.
   `--muted`, `--line` et `--card` etaient appelees par 78 regles sans jamais
   etre declarees. Une declaration dont la variable manque devient invalide au
   calcul : la couleur retombe sur celle du parent, et une bordure disparait
   entierement au lieu de changer de teinte. Mesure en production : le texte
   attenue s'affichait a la couleur exacte du corps de page, et les filets de
   `.brd-fond` et `.nr-h` mesuraient zero pixel.

   CE SONT DES ALIAS, PAS DES VALEURS. Les jetons canoniques sont declares par
   theme ; un alias pose ici se resout avec celui qui gagne sur la racine, donc
   il suit le theme de lui-meme. L'usage confirme chaque correspondance :
   `--muted` ne sert qu'a `color`, `--line` qu'aux bordures, `--card` qu'au
   fond. */
:root {
  --muted: var(--text-dim);
  --line: var(--border);
  --card: var(--bg-card);
}


/* IDENTITE DOCUMENTAIRE. La forme est celle du reste de l'application : le
   bloc, le champ, le bouton et le rayon de 6 px ne changent pas ici. Les seules
   regles propres a cet ecran servent deux choses que rien d'autre ne fait,
   l'apercu d'une feuille et le verdict d'une couleur mesuree.

   AUCUNE VARIABLE NEUVE N'EST INVENTEE ICI. Une variable CSS non declaree ne
   degrade pas la regle, elle la SUPPRIME au calcul, et sans un mot en console :
   ce depot a deja perdu 78 regles ainsi. Toutes celles employees ci-dessous
   sont deja declarees et deja servies par le bloc voisin. */

.idoc-portee { margin: 0 0 16px; }
.idoc-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) {
  /* L'apercu reste visible pendant la saisie : le poser sous le formulaire
     obligerait a faire defiler pour voir l'effet de ce qu'on vient d'ecrire. */
  .idoc-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
  .idoc-cote { position: sticky; top: 12px; }
}

.idoc-champs { display: flex; flex-wrap: wrap; gap: 14px; }
.idoc-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; margin-bottom: 12px; }
.idoc-etiq { font-weight: 600; font-size: var(--z-t3); }
.idoc-champ input, .idoc-champ textarea { width: 100%; }
.idoc-champ textarea { resize: vertical; min-height: 58px; font: inherit; }
.idoc-fige {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text); font-size: var(--z-t3); min-height: 20px;
}
.idoc-note { margin: 0 0 14px; font-size: var(--z-t3); color: var(--text-dim); }
.idoc-alerte {
  margin: 0 0 12px; padding: 10px 14px;
  border-inline-start: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: 6px; font-size: var(--z-t3); color: var(--text);
}
.idoc-refus { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.idoc-refus p, .idoc-panne p { margin: 0; font-size: var(--z-t3); }

/* Le logo depose. Le damier dit ce qu'une case blanche ne dirait pas : que le
   fond est transparent, et non blanc. C'est la seule facon de voir, avant
   impression, qu'un logo porte un fond opaque qu'on ne voulait pas. */
.idoc-logo-vue {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .07) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .07) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, .07) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .07) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.idoc-logo-vue img { max-width: 100%; max-height: 130px; display: block; }
.idoc-logo-vide {
  padding: 22px 16px; margin-bottom: 12px; text-align: center;
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-dim); font-size: var(--z-t3);
}
.idoc-logo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.idoc-depot { cursor: pointer; }

/* Les crans de couleur. Aucun n'est propose s'il ne passe pas le seuil : voir
   le commentaire de la liste dans identite-doc.js. */
.idoc-crans { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.idoc-cran {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  border: 2px solid var(--border); cursor: pointer; position: relative;
}
.idoc-cran.on { border-color: var(--text); box-shadow: var(--shadow-sm); }
.idoc-cran-perso { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.idoc-cran-perso input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.idoc-cran-vide { width: auto; height: 30px; }

/* Le verdict d'une couleur refusee porte le chiffre et la proposition : il doit
   se lire, pas se deviner. Un message aussi precis dans une infobulle qui
   s'efface serait perdu. */
.idoc-verdict { margin-top: 14px; padding: 12px 14px; border-radius: 6px; font-size: var(--z-t3); }
.idoc-verdict p { margin: 0 0 10px; }
.idoc-verdict-ko {
  border-inline-start: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--text);
}
.idoc-verdict-ok {
  border-inline-start: 3px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--text);
}

.idoc-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; }
.idoc-maj { font-size: var(--z-t3); color: var(--text-dim); }

/* L'APERCU EST PEINT SUR DU BLANC, TOUJOURS, y compris en theme sombre. C'est
   le fond du document, pas celui de l'application : montrer la couleur du
   client sur un fond sombre donnerait une lisibilite qui n'existe pas sur le
   papier, et c'est exactement ce que le seuil de contraste cherche a eviter.
   Les couleurs de ce bloc sont donc ecrites en dur, et ce n'est pas un oubli. */
.idoc-feuille {
  background: #ffffff; color: #1a1a1a; border: 1px solid var(--border); border-radius: 6px;
  padding: 22px 24px; font-size: 13px; line-height: 1.55;
}
.idoc-f-tete { margin-bottom: 16px; }
.idoc-f-marque { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.idoc-f-logo { max-height: 46px; max-width: 190px; display: block; }
.idoc-f-logo-vide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 40px; border: 1px dashed #c4c4c4; border-radius: 6px;
  color: #9a9a9a; font-size: 11px;
}
.idoc-f-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.idoc-f-nom { font-size: 15px; font-weight: 700; color: #111111; overflow-wrap: anywhere; }
.idoc-f-legal { font-size: 11px; color: #5b5b5b; overflow-wrap: anywhere; }
.idoc-f-filet { display: block; height: 3px; border-radius: 6px; }
.idoc-f-titre { margin: 16px 0 8px; font-size: 15px; font-weight: 700; }
.idoc-f-corps { margin: 0 0 14px; color: #4a4a4a; font-size: 12px; }
.idoc-f-conf {
  margin: 0 0 16px; padding: 8px 12px; font-size: 11.5px; color: #333333;
  background: #f5f5f5; border-inline-start: 3px solid #999999; border-radius: 6px;
  overflow-wrap: anywhere;
}
.idoc-f-pied {
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid #dcdcdc; padding-top: 10px; font-size: 10.5px; color: #6a6a6a;
  overflow-wrap: anywhere;
}
/* Zerval en pied de page, et rien de plus : le document est au nom du client. */
.idoc-f-zerval { color: #a0a0a0; font-size: 9.5px; letter-spacing: .02em; }