/*!
 * Propulse CRM — Design System (thème « Neo-Tokyo »)
 * ---------------------------------------------------------------------------
 * Interface TOUJOURS SOMBRE (décision figée du projet : pas de mode Jour/Nuit).
 * La base (:root) = valeurs du thème « neotokyo » (ex-« .app.night » de la
 * maquette de référence 07-MAQUETTE-REFERENCE-v4.html, à plat, sans préfixe).
 * Ce fichier contient : polices auto-hébergées, tokens, 6 palettes, composants.
 * Le LAYOUT, les effets néon, le responsive et l'accessibilité sont dans app.css.
 *
 * Piège #8 (color-mix) : chaque `background`/`border`/`stroke` en color-mix est
 * précédé d'un repli solide.  Contraste AA : le bouton primaire ne code aucune
 * couleur de texte en dur (voir --on-accent / --accent-fill, injectés inline).
 * ---------------------------------------------------------------------------
 */

/* ============ POLICES (auto-hébergées — aucun lien Google Fonts / CSP) ============ */
/* Polices VARIABLES : un seul woff2 par famille couvre toute la plage de poids. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-var.woff2") format("woff2")}
@font-face{font-family:"Orbitron";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/orbitron-var.woff2") format("woff2")}

/* ============ TOKENS DE BASE (palette neotokyo — thème par défaut) ============ */
:root{
  /* ⚠️ Ce que le NAVIGATEUR dessine lui-même — et qu'aucune de nos règles ne
     touche : cases à cocher, boutons radio, barres de défilement, listes
     déroulantes natives, sélecteurs de date.

     Sans cette ligne, Chromium les dessine en thème CLAIR : dans le brief
     public, les cases de « Que doit faire ce site pour vous ? » étaient de gros
     carrés BLANCS OPAQUES posés sur du noir. Défaut vu à l'écran, invisible en
     lisant le CSS — précisément parce qu'il n'y a rien à lire : c'est ce qu'on
     n'a PAS déclaré qui est faux. Le reste du formulaire est soigné ; ces
     pastilles blanches faisaient « inachevé » à l'endroit exact où l'on demande
     de la confiance à un prospect.

     Une seule valeur, sans `light dark` : l'interface est TOUJOURS sombre
     (décision figée, cf. en-tête) et les six palettes le sont toutes. La seule
     exception est l'impression, qui bascule en clair — voir app.css. */
  color-scheme: dark;
  /* fond & surfaces */
  --bg:#0a0605; --surface:#150c08; --surface-2:#1c100a; --surface-3:#28160d;
  --border:#3f2618; --border-strong:#6d4228;
  /* texte */
  --ink:#f5f1ee; --muted:#b6a299; --faint:#937f78;
  /* accent (rose Neo-Tokyo au premier plan, ambre en ambiance) */
  --accent:#ff2d78; --accent-ink:#ff79ac; --accent-soft:#2c0b19;
  --accent-2:#ff9a3c; --accent-3:#ffd15a;
  --glow:255,45,120; --glow-2:255,150,58;
  /* états */
  --ok:#54d98c; --ok-soft:#0f2417;
  --warn:#ffb000; --warn-soft:#2c1d04;
  --crit:#ff445c; --crit-soft:#2c0b10;
  --off:#a07c4e; --off-soft:#1b1207;
  /* ombres */
  --shadow:0 1px 2px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px rgba(0,0,0,.75);
  /* rayons & dimensions */
  --r:10px; --r-sm:7px; --r-lg:14px;
  --rail:236px; --topbar:56px;
  /* palette néon chaude partagée (braise / lave / coucher de soleil) */
  --amber:#ffb000; --orange:#ff6a00; --coral:#ff2d55; --gold:#ffd24a;
  /* typographies */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Orbitron",var(--sans);
}

/* La couleur de l'état COCHÉ d'une case ou d'un radio : sinon Chromium prend
   son bleu système, la seule couleur de la page à n'appartenir à aucune palette.

   ⚠️ Déclarée sur `.app`, PAS sur `:root` — et l'écart n'est visible qu'en
   changeant de palette. `accent-color` s'HÉRITE par sa valeur CALCULÉE : posée
   sur `:root`, elle y résout `var(--accent)` une bonne fois (le rose de
   neotokyo) et transmet cette couleur figée à toute la page. Les six palettes
   redéfinissent `--accent` plus bas, sur `.app[data-palette]` — trop tard, la
   valeur est déjà résolue. Résultat mesuré à l'écran : une case cochée ROSE au
   milieu de la palette cyan, et de la palette émeraude.

   Sur `.app`, la variable et son usage vivent sur le MÊME élément : chaque
   palette est donc lue avant la résolution. */
.app{accent-color:var(--accent)}

/* ============ 6 PALETTES (overrides — toutes sombres) ============ */
/* neotokyo = base :root ci-dessus (sélecteur vide pour la symétrie). */
.app[data-palette="neotokyo"]{}
.app[data-palette="braise"]{
  --bg:#000000; --surface:#0d0805; --surface-2:#130b05; --surface-3:#1e1108;
  --border:#3a2410; --border-strong:#61401b;
  --ink:#f2f3f5; --muted:#a8adb5; --faint:#797f88;
  --accent:#ff7a1a; --accent-ink:#ffb457; --accent-soft:#2a1607;
  --accent-2:#ff3d00; --accent-3:#ffd24a; --glow:255,106,0; --glow-2:255,45,85;
}
.app[data-palette="cyber"]{
  --bg:#000407; --surface:#040a10; --surface-2:#061119; --surface-3:#0b1a24;
  --border:#123243; --border-strong:#1d4d63;
  --ink:#f2f3f5; --muted:#a8adb5; --faint:#7c828b;
  --accent:#22d3ee; --accent-ink:#67e8f9; --accent-soft:#05202a;
  --accent-2:#0ea5e9; --accent-3:#a5f3fc; --glow:34,211,238; --glow-2:14,165,233;
}
.app[data-palette="rose"]{
  --bg:#0a0006; --surface:#12060d; --surface-2:#180913; --surface-3:#22101c;
  --border:#3f1730; --border-strong:#66264e;
  --ink:#f2f3f5; --muted:#a8adb5; --faint:#7a8089;
  --accent:#ff2d78; --accent-ink:#ff6aa5; --accent-soft:#2a0819;
  --accent-2:#ff4da6; --accent-3:#ff9ecb; --glow:255,45,120; --glow-2:255,90,180;
}
.app[data-palette="violet"]{
  --bg:#06030c; --surface:#0d0819; --surface-2:#120b22; --surface-3:#1b1233;
  --border:#2e1f52; --border-strong:#48327f;
  --ink:#f2f3f5; --muted:#a8adb5; --faint:#7c828b;
  --accent:#a06bff; --accent-ink:#c4a6ff; --accent-soft:#180a2e;
  --accent-2:#7b3cff; --accent-3:#d8b7ff; --glow:150,90,255; --glow-2:110,60,255;
}
.app[data-palette="emeraude"]{
  --bg:#020a07; --surface:#05130d; --surface-2:#071a12; --surface-3:#0c281c;
  --border:#12402c; --border-strong:#1c6444;
  --ink:#f2f3f5; --muted:#a8adb5; --faint:#848b94;
  --accent:#22e39a; --accent-ink:#6ef0be; --accent-soft:#04231a;
  --accent-2:#00c37a; --accent-3:#9dffcf; --glow:40,220,150; --glow-2:0,190,120;
}

/* ============ RESET SCOPÉ DES ÉLÉMENTS NUS ============ */
/* wp-admin (common.css) stylise les ÉLÉMENTS NUS que la console émet :
   `h1{color:#1d2327;font-size:2em;margin:.67em 0}`, `h2,h3{…;margin:1em 0}`, `p`.
   Sans ce reset, aucun titre n'hérite de --ink (contraste ~1,3:1 sur fond noir).

   CE BLOC EST AVANT LES COMPOSANTS À DESSEIN. Ces sélecteurs valent (0,1,1) —
   exactement comme `.md h2`, `.empty p` ou `.modal-b h3`. À spécificité égale,
   c'est la DERNIÈRE règle du fichier qui gagne : un composant doit donc pouvoir
   redéclarer sa couleur ET ses marges. Tant que ce reset vivait dans app.css
   (chargé après), il écrasait silencieusement `.empty p{margin:0 auto 16px}` —
   le paragraphe des états vides perdait son centrage. NE JAMAIS LE DÉPLACER PLUS BAS. */
.app h1,.app h2,.app h3,.app h4,.app h5,.app h6{
  margin:0;color:var(--ink);font-size:inherit;font-weight:650;letter-spacing:-.01em;text-wrap:balance
}
/* `p` et `dl` sont les seuls blocs nus que la console émette hors du composant `.md`.
   Le `<dl>` de `.kv` traînait les 13,5 px de marge du navigateur : la liste
   clé/valeur flottait dans sa carte. */
.app p,.app dl{margin:0}

/* ============ BOUTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);
  font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);white-space:nowrap;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
}
.btn:hover{background:var(--surface-3);border-color:var(--border-strong);box-shadow:0 0 16px rgba(var(--glow),.18);transform:translateY(-1px)}
.btn .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
/* Primaire : AUCUNE couleur de texte en dur (contraste AA piloté par le serveur).
   --on-accent et --accent-fill sont injectés inline ; on ne les définit pas ici. */
.btn.primary{
  position:relative;
  color:var(--on-accent,#0a0603);
  background:linear-gradient(180deg, var(--accent-fill,var(--accent)), var(--accent-2));
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(var(--glow),.28);
}
.btn.primary:hover{box-shadow:0 8px 30px rgba(var(--glow),.5);transform:translateY(-1px);filter:brightness(1.04)}
.btn.sm{padding:5px 10px;font-size:12px;gap:5px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.danger{color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft);border-color:var(--crit)}

.icon-btn{
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);position:relative;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-3);color:var(--ink);border-color:var(--border-strong);box-shadow:0 0 16px rgba(var(--glow),.18);transform:translateY(-1px)}
.icon-btn .ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--crit);border:1.5px solid var(--surface)}

/* ============ CHIPS / PASTILLES DE STATUT ============ */
/* pastille de statut : FORME + couleur + libellé (Art. 5.1, jamais la couleur seule) */
.st{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;white-space:nowrap}
.st .gl{font-size:11px;line-height:1}
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.crit{color:var(--crit)} .st.off{color:var(--off)}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--surface-3);color:var(--muted);border:1px solid transparent;white-space:nowrap;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
}
/* Statut push : vide tant que le JS n'a pas lu l'état de l'appareil → invisible (pas une pastille creuse). */
.chip:empty{display:none}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.crit{background:var(--crit-soft);color:var(--crit)}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
.chip.editable{cursor:pointer;border:1px solid var(--border)}
.chip.editable:hover{border-color:var(--border-strong);background:var(--surface)}
.chip.editable::after{content:"\25BE";font-size:9px;opacity:.6;margin-left:1px;display:inline-block;transition:transform .15s}
/* Puce éditable = <details> natif. Le <summary> porte la puce elle-même. */
details.chip-pop{position:relative;display:inline-block}
details.chip-pop>summary.chip.editable{list-style:none}
details.chip-pop>summary.chip.editable::-webkit-details-marker{display:none}
details.chip-pop[open]>summary.chip.editable::after{transform:rotate(180deg)}
details.chip-pop>.pop{top:calc(100% + 6px);left:0}
/* ⚠️ Ce `display:none` n'est PAS redondant avec le masquage natif du <details>.
   Les navigateurs ferment un <details> via `::details-content{content-visibility:hidden}`,
   qui saute le CONTENU du sous-arbre — mais un descendant `position:absolute` dont le
   bloc conteneur est en dehors de ce sous-arbre (ici `details.chip-pop`, qui est
   `position:relative`) lui ÉCHAPPE. Sans cette règle, le popover fermé reste peint,
   cliquable et focalisable au clavier. Mesuré au navigateur, pas déduit. */
details.chip-pop:not([open])>.pop{display:none}
.tag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;background:var(--surface-3);color:var(--muted);letter-spacing:.02em}

/* ============ CARTES ============ */
.card{
  background:var(--surface);                                   /* repli solide */
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.6),0 10px 30px rgba(var(--glow),.05);
  position:relative;
}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-h h3{font-size:14.5px}
.card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-b{padding:16px 18px}
/* carte héros dataviz — surface un peu plus profonde */
.card.hero{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));   /* repli solide */
  background:radial-gradient(120% 90% at 100% 0%, rgba(var(--glow-2),.06), transparent 60%),
            linear-gradient(180deg,var(--surface),var(--surface-2));
}

/* note « moniteur » (avertissement encadré) */
.mono-note{
  background:var(--warn-soft);color:var(--warn);
  border:1px solid var(--warn);                                /* repli solide */
  border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--r-sm);padding:8px 12px 8px 34px;font-size:12px;font-weight:600;position:relative;line-height:1.5;
}
.mono-note>.ic{position:absolute;left:11px;top:9px;flex:none}

/* ============ TABLE ============ */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-weight:600;color:var(--faint);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface)
}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr[data-act]{cursor:pointer}
.tbl tbody tr[data-act]:hover{
  background:var(--surface-2);                                 /* repli solide */
  background:linear-gradient(90deg,rgba(var(--glow),.06),transparent);
}
.tbl tbody tr:last-child td{border-bottom:none}
/* actions de ligne TOUJOURS visibles (Art. 4.3 — découvrabilité, tactile) */
.tbl .row-act{display:flex;gap:5px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
/* NB : pas de colonne d'actions « collante » (position:sticky;right:0). Essayé en
   v0.4.1, retiré : la carte a un dégradé vertical, donc une cellule à fond plat se
   détache visiblement. L'en-tête collant y échappe car il est là où le dégradé vaut
   exactement --surface. Le débordement du tableau était causé par le `max-width:520px`
   que wp-admin imposait à `.card` — corrigé à la racine (voir app.css). */
.tbl .name{font-weight:600;color:var(--ink)}
.tbl .sub{color:var(--faint);font-size:12px}

/* ============ SEGMENTS (bascule) ============ */
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{border:none;background:none;padding:5px 12px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button.active{background:var(--surface-2);color:var(--ink);box-shadow:0 0 0 1px var(--border-strong),0 0 12px rgba(var(--glow),.12)}
/* Sous-onglets rendus en <a> (navigation par vrai lien serveur) : mêmes styles que .seg button. */
.seg a{padding:5px 12px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;text-decoration:none}
.seg a.active{background:var(--surface-2);color:var(--ink);box-shadow:0 0 0 1px var(--border-strong),0 0 12px rgba(var(--glow),.12)}

/* ============ GRILLES DE CONTENU ============ */
.grid{display:grid;gap:16px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.two-col{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
/* Tableau de bord : les ACTIONS prennent la largeur en haut (À faire large + Échéances),
   l'ÉTAT en une RANGÉE compacte de trois cartes dessous. Fini le rail vertical trop haut. */
/* Tableau de bord : deux rangées de deux. HAUT = l'essentiel d'un coup d'œil (Santé | Pipeline) ;
   BAS = les listes d'action (À faire | Prochaines échéances). Cartes plus étroites qu'en pleine
   largeur → l'écart titre↔action des lignes se resserre de lui-même. */
.dash-top,.dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dash-top{margin-bottom:16px}
.dash-top .card,.dash-actions .card{display:flex;flex-direction:column;min-width:0}
.dash-top .card .card-b,.dash-actions .card .card-b{flex:1}
.w-trend{margin-top:16px}
.dash-viz{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:12px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}.dash-actions{grid-template-columns:1fr}
.dash-top{grid-template-columns:1fr}.dash-viz{grid-template-columns:1fr}}

/* ============ STAT (indicateur) ============ */
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
}
.stat .k{color:var(--muted);font-size:12px;font-weight:550;display:flex;align-items:center;gap:6px}
.stat .v{font-size:24px;font-weight:750;letter-spacing:-.02em;margin-top:4px}
.stat .d{font-size:11.5px;color:var(--faint);margin-top:2px}
.stat.clickable{cursor:pointer}
.stat.clickable:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(var(--glow),.14);transform:translateY(-2px)}

/* ============ SANTÉ DU PARC ============ */
.health{display:flex;align-items:center;gap:16px;padding:16px 20px;flex-wrap:wrap}
.health .big{font-size:20px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.health .big .gl{font-size:15px}
.health-sub{color:var(--faint);font-size:12px;font-weight:500;margin-top:3px}
.health-counts{display:flex;gap:8px;flex-wrap:wrap}
.health-gauge{flex:none}
.health-main{min-width:150px}
.hcount{display:flex;align-items:baseline;gap:7px;padding:7px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s}
.hcount:hover{border-color:var(--accent);background:var(--surface);box-shadow:0 0 20px rgba(var(--glow),.14);transform:translateY(-2px)}
.hcount b{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1}
.hcount span{font-size:12.5px;font-weight:600;white-space:nowrap}
.hcount.crit b,.hcount.crit span{color:var(--crit)} .hcount.warn b,.hcount.warn span{color:var(--warn)}
.hcount.ok b,.hcount.ok span{color:var(--ok)} .hcount.off b,.hcount.off span{color:var(--off)}
.hcount.z{opacity:.5} .hcount.z b,.hcount.z span{color:var(--muted)}
.health-bar{display:flex;gap:3px;height:8px;border-radius:6px;overflow:hidden;width:100%;order:9}
.health-bar span{display:block;transition:flex .3s}

/* bandeau d'alerte d'incident (informatif + deep-link) */
.alert-banner{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--r-lg);margin-bottom:16px;cursor:pointer;border:1px solid transparent;font-size:13.5px}
.alert-banner.crit{
  background:var(--crit-soft);
  border-color:var(--crit);                                    /* repli solide */
  border-color:color-mix(in srgb,var(--crit) 45%,transparent);
  color:var(--ink);
  box-shadow:0 0 24px color-mix(in srgb,var(--crit) 20%,transparent);
}
.alert-banner.warn{
  background:var(--warn-soft);
  border-color:var(--warn);                                    /* repli solide */
  border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--ink);
  box-shadow:0 0 24px color-mix(in srgb,var(--warn) 18%,transparent);
}
.alert-banner .ab-ic{color:var(--crit);display:grid;place-items:center;flex:none}
.alert-banner.warn .ab-ic{color:var(--warn)}
.alert-banner .ab-ic .ic{width:19px;height:19px}
.alert-banner .ab-t{min-width:0}
.alert-banner .ab-t b{font-weight:700;color:var(--crit)}
.alert-banner.warn .ab-t b{color:var(--warn)}
.alert-banner .ab-go{margin-left:auto;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;color:var(--crit)}
.alert-banner.warn .ab-go{color:var(--warn)}
.alert-banner .ab-go .ic{width:15px;height:15px}
@media(max-width:600px){.health-gauge .gauge{width:126px;height:126px}.alert-banner{flex-wrap:wrap}.alert-banner .ab-go{margin-left:0;width:100%;margin-top:4px}}

/* ============ FILE « À FAIRE » ============ */
.todo{display:flex;flex-direction:column}
.todo-item{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--border);transition:background .12s}
.todo-item:last-child{border-bottom:none}
.todo-item:hover{
  background:var(--surface-2);                                 /* repli solide */
  background:linear-gradient(90deg,rgba(var(--glow),.06),transparent);
}
/* sévérité = MÊME langage de statut (forme + couleur, Art. 5.1) */
.todo-sev{flex:none;width:16px;text-align:center;font-size:12px;line-height:1;font-weight:700;background:none!important;box-shadow:none!important;border-radius:0}
.todo-sev.crit{color:var(--crit)} .todo-sev.crit::before{content:"\25A0"}
.todo-sev.warn{color:var(--warn)} .todo-sev.warn::before{content:"\25B2"}
.todo-sev.info{color:var(--off)} .todo-sev.info::before{content:"\25CB"}
.todo-txt{min-width:0;flex:1}
.todo-txt[data-act]{cursor:pointer}
.todo-txt b{font-weight:600;font-size:13.5px}
.todo-txt .meta{color:var(--faint);font-size:12px;margin-top:1px}
.todo-txt .who{color:var(--accent-ink);font-weight:600;cursor:pointer}
.todo-txt .who:hover{text-decoration:underline}
.todo-open{opacity:0;transition:opacity .12s;display:inline-flex;vertical-align:middle;margin-left:5px}
.todo-open .ic{width:13px;height:13px;color:var(--faint)}
.todo-item:hover .todo-open{opacity:1}
/* actions inline TOUJOURS visibles (Art. 4.3) — pas de reveal-on-hover */
.todo-actions{display:flex;gap:6px;flex:none}
.todo-actions .btn.ghost{opacity:.7}
.todo-item:hover .todo-actions .btn.ghost{opacity:1}

/* ============ DATAVIZ : jauge radiale · tendance · sparkline ============ */
/* Jauge de disponibilité DENSIFIÉE (P2.7) : elle était surdimensionnée (158px) et lisait
   « décorative » (décision n°6). Compacte à 120px, le chiffre reste net. */
.gauge{position:relative;width:120px;height:120px;margin:2px auto;flex:none}
.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .gtrack{
  fill:none;
  stroke:var(--surface-3);                                     /* repli solide */
  stroke:color-mix(in srgb,var(--border) 70%,transparent);
  stroke-width:11;
}
.gauge .gfill{fill:none;stroke-width:11;stroke-linecap:round;stroke-dashoffset:var(--go);transition:stroke-dashoffset 1.1s cubic-bezier(.34,1.2,.4,1);animation:gaugeSweep 1.25s cubic-bezier(.34,1,.4,1) both}
@keyframes gaugeSweep{from{stroke-dashoffset:var(--gc)}}
.gauge.accent .gfill{filter:drop-shadow(0 0 7px rgba(var(--glow),.75))}
.gauge.ok .gfill{filter:drop-shadow(0 0 7px var(--ok));filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ok) 80%,transparent))}
.gauge.warn .gfill{filter:drop-shadow(0 0 7px var(--warn));filter:drop-shadow(0 0 7px color-mix(in srgb,var(--warn) 80%,transparent))}
.gauge.crit .gfill{filter:drop-shadow(0 0 8px var(--crit));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--crit) 85%,transparent))}
.gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.gauge-c b{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);text-shadow:0 0 20px rgba(var(--glow),.5)}
.gauge-c span{font-size:10px;color:var(--faint);font-weight:600;max-width:88px;line-height:1.25;margin-top:2px}

.spark{display:block;width:100%;height:38px}

/* tendance du parc (disponibilité + latence, légendée) */
.trend-svg{width:100%;height:auto;display:block}
/* Mode « les deux » séparé (P3.4) : deux courbes empilées, chacune coiffée de sa métrique. */
.trend-panel+.trend-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.trend-cap{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin:2px 0 2px}
/* Sparklines de la fiche site (dispo/latence, 30 j). */
.spark-box{padding:8px 0}
.spark-box+.spark-box{border-top:1px solid var(--border);margin-top:8px;padding-top:12px}
.spark-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.spark-l{font-size:12px;color:var(--muted);font-weight:600}
.spark-v{font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.spark{width:100%;height:34px;display:block}
.spark-empty{font-size:11.5px;color:var(--faint);padding:4px 0}
.trend-ln{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px)}
.trend-grid{stroke:var(--border);stroke-width:1;opacity:.45}
.trend-thresh{stroke:var(--accent-3);stroke-width:1.4;stroke-dasharray:5 4;opacity:.85;fill:none}
.trend-ax{fill:var(--faint);font-size:9px;font-family:var(--sans)}
.trend-inc{fill:var(--crit);filter:drop-shadow(0 0 5px var(--crit))}
.trend-torii{opacity:.06;filter:drop-shadow(0 0 14px rgba(var(--glow-2),.5))}
.trend-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:600;color:var(--muted);align-items:center}
.tl-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tl-key i{width:12px;height:3px;border-radius:2px;display:inline-block}
.tl-key i.dash{width:14px;height:0;border-radius:0;border-top:2px dashed var(--accent-3)}

/* ============ TIMELINE ============ */
.tl{position:relative;padding-left:8px}
.tl-item{display:flex;gap:13px;padding:10px 0}
.tl-dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);position:relative;z-index:1}
.tl-dot .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.tl-dot.ok{background:var(--ok-soft);color:var(--ok)}
.tl-dot.crit{background:var(--crit-soft);color:var(--crit)}
.tl-dot.warn{background:var(--warn-soft);color:var(--warn)}
.tl-dot.accent{background:var(--accent-soft);color:var(--accent-ink)}
.tl-item:not(:last-child) .tl-dot::after{content:"";position:absolute;top:26px;left:50%;transform:translateX(-50%);width:2px;height:calc(100% + 20px);background:var(--border)}
.tl-body{padding-top:3px;min-width:0}
.tl-body b{font-weight:600;font-size:13.5px}
.tl-body .m{color:var(--faint);font-size:12px}

/* ============ CLÉ/VALEUR & LIGNES DE LISTE ============ */
.kv{display:grid;grid-template-columns:150px 1fr;gap:2px 14px;font-size:13.5px}
.kv dt{color:var(--muted);padding:8px 0;border-bottom:1px solid var(--border)}
.kv dd{margin:0;padding:8px 0;border-bottom:1px solid var(--border);font-weight:550}
.list-line{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.list-line:last-child{border-bottom:none}
.list-line .g{flex:1;min-width:0}
.list-line b{font-weight:600;font-size:13.5px}
.list-line .m{color:var(--faint);font-size:12px}
.list-line .ic{opacity:.55}

/* ============ FICHE (en-tête sticky + onglets) ============ */
/* pas d'`overflow:hidden` ici : le popover d'une puce éditable (.chip-pop .pop) est
   un enfant absolu de cet en-tête et serait rogné. Le clipping des coins bas est rendu
   aux onglets, seul enfant qui peigne jusqu'au bord. */
.fiche-head{position:sticky;top:var(--topbar);z-index:10;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);margin-bottom:14px}
.fiche-top{display:flex;align-items:flex-start;gap:16px;padding:16px 20px}
.fiche-ident{min-width:0}
.fiche-ident .crumb{color:var(--faint);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-bottom:6px}
.fiche-ident .crumb:hover{color:var(--ink)}
.fiche-ident h1{font-size:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fiche-ident .url{color:var(--muted);font-size:13px;margin-top:3px}
.fiche-ident .url a{color:var(--accent-ink);text-decoration:none}
.fiche-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fiche-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;flex:none}
.fiche-contact{display:flex;gap:6px}
.fiche-tabs{display:flex;gap:2px;padding:0 12px;border-top:1px solid var(--border);overflow-x:auto;border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.ftab{border:none;background:none;padding:11px 14px;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.ftab:hover{color:var(--ink)}
.ftab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.ftab .cnt{font-size:11px;font-weight:700;background:var(--surface-3);padding:0 6px;border-radius:10px;color:var(--muted)}
.ftab.active .cnt{background:var(--accent-soft);color:var(--accent-ink)}

/* ============ TABLEAU DE BORD : KPI, gros nombre, logs ============ */
.kpi-h{display:flex;align-items:flex-start;gap:8px;padding:13px 16px 4px}
.kpi-h h3{font-size:14px;display:inline-flex;align-items:center;gap:9px}
.kpi-h .sub{font-size:10px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.kpi-h .r{margin-left:auto;display:flex;gap:6px;align-items:center;color:var(--faint)}
.kpi-b{padding:6px 16px 16px;flex:1;display:flex;flex-direction:column}
.bignum{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.02em;line-height:1;color:var(--ink);text-shadow:0 0 26px rgba(var(--glow),.4)}
.bignum.crit{color:var(--crit);text-shadow:0 0 26px color-mix(in srgb,var(--crit) 55%,transparent)}
.bignum-sub{font-size:12px;color:var(--faint);margin-top:6px;font-weight:500}
.logrow{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--border)}
.logrow:last-child{border-bottom:none}
.logrow:hover{
  background:var(--surface-2);                                 /* repli solide */
  background:linear-gradient(90deg,rgba(var(--glow),.06),transparent);
}
.logrow .lg{flex:1;min-width:0;cursor:pointer}
.logrow .lg b{font-weight:600;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logrow .lg .m{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logrow-acts{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:520px){.logrow{flex-wrap:wrap}.logrow-acts{width:100%;margin-top:6px}}

/* pastille de log pleine (INFO · AVERTISSEMENT · CRITIQUE · OK) — couleur + LIBELLÉ */
.lbadge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:5px;line-height:1.5;white-space:nowrap;min-width:58px;
  background:var(--surface-3);color:var(--muted);border:1px solid var(--border);
}
.lbadge.info{background:var(--surface-3);color:var(--muted);border-color:var(--border-strong)}
.lbadge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok);border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.lbadge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.lbadge.crit{background:var(--crit-soft);color:var(--crit);border-color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent);box-shadow:0 0 12px rgba(var(--glow),.18)}
.lbadge.accent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.lbadge.warn{box-shadow:0 0 10px rgba(var(--glow-2),.14)}
/* Puce d'état CLIQUABLE (compteurs de « Santé du parc » — chacun ouvre le Parc filtré,
   Art. 4). En `<a>` elle lisait « statique » : on rend l'affordance de clic visible (P2.7)
   — main au survol + léger relief, comme les tuiles `.stat.clickable`. Les puces en
   `<span>` (badges des échéances) ne sont pas concernées. */
a.lbadge{cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,filter .15s}
a.lbadge:hover{transform:translateY(-1px);filter:brightness(1.09);box-shadow:0 3px 12px rgba(var(--glow),.2)}
a.lbadge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============ FORMULAIRES ============ */
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:12.5px;margin-bottom:5px;color:var(--ink)}
.field .hint{color:var(--faint);font-size:11.5px;font-weight:400;margin-top:4px}
/* Interrupteur on/off (P3.3) — remplace un select à 2 options. */
.field-toggle{margin-bottom:14px}
.field-toggle .switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:0}
.field-toggle .switch-input{position:absolute;top:0;left:0;width:40px;height:22px;margin:0;opacity:0;cursor:pointer}
.field-toggle .switch-track{position:relative;width:40px;height:22px;border-radius:22px;background:var(--surface-3);border:1px solid var(--border-strong);transition:background .18s,border-color .18s;flex:none}
.field-toggle .switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.field-toggle .switch-input:checked+.switch-track{background:var(--accent);border-color:var(--accent)}
.field-toggle .switch-input:checked+.switch-track .switch-thumb{transform:translateX(18px);background:var(--accent-ink,#fff)}
.field-toggle .switch-input:focus-visible+.switch-track{box-shadow:0 0 0 2px var(--accent)}
.field-toggle .switch-text{font-size:13.5px;font-weight:600;color:var(--ink)}
.field-toggle .hint{color:var(--faint);font-size:11.5px;margin-top:6px}
/* Le préfixe `.app` est OBLIGATOIRE ici : wp-admin cible les champs par sélecteur
   d'attribut (`input[type="url"]`, spécificité 0,1,1), ce qui bat la classe nue
   `.input` (0,1,0) et repeint le champ en blanc sur blanc.  `min-height:0` annule
   le `min-height:40px` de forms.css.  Voir le bloc d'isolation en tête d'app.css. */
.app .input,.app .select,.app textarea.input{
  width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--ink);font-family:inherit;font-size:13.5px;min-height:0;box-shadow:none;
  transition:border-color .12s,box-shadow .12s
}
.app .input:focus,.app .select:focus,.app textarea.input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--glow),.22),0 0 18px rgba(var(--glow),.15)}
.app textarea.input{resize:vertical;min-height:72px}
.copy-row{display:flex;gap:6px}
.copy-row .input{font-family:var(--mono);font-size:12.5px}
details.adv{border:1px solid var(--border);border-radius:var(--r-sm);margin-top:12px;background:var(--surface-2)}
details.adv summary{padding:10px 13px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"\25B8";transition:transform .15s;font-size:11px}
details.adv[open] summary::before{transform:rotate(90deg)}
details.adv .adv-b{padding:0 13px 13px}

/* résultat de test (bouton « Vérifier ») */
.test-slot{margin-top:10px}
.test-res{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:13px;font-weight:600;max-width:520px}
.test-res .ic{flex:none;margin-top:1px}
.test-res .tm{font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.test-res.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.test-res.err{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.test-res.busy{color:var(--muted)}

/* ============ ÉTAT VIDE ============ */
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .ei{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:var(--surface-3);display:grid;place-items:center;color:var(--faint)}
.empty .ei .ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.empty h3{font-size:15px;margin-bottom:5px}
.empty p{font-size:13px;max-width:340px;margin:0 auto 16px}

/* ============ SKELETON (chargement) ============ */
.skel{display:inline-block;height:11px;border-radius:5px;background:var(--surface-3);position:relative;overflow:hidden;vertical-align:middle}
.skel-row td{padding:14px}
.skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface),transparent);   /* repli solide */
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 65%,transparent),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ============ OVERLAYS (scrim · drawer · modal) ============ */
.scrim{position:fixed;inset:0;background:rgba(8,3,0,.6);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
/* `height:100dvh` (repli `vh`) : sinon, sur mobile, la barre d'adresse rétractable
   pousse le pied du tiroir — donc ses boutons d'action — hors de l'écran. */
.drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:440px;max-width:92vw;background:var(--surface);z-index:60;
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s .24s;
  display:flex;flex-direction:column;border-left:1px solid var(--border);
  /* Fermé : hors de l'ordre de tabulation (le corps est vidé par le JS, mais on
     verrouille aussi au clavier tant que le panneau est replié). */
  visibility:hidden
}
.drawer.on{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.drawer-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer-h h3{font-size:15px;flex:1}
.drawer-b{padding:18px;overflow-y:auto;flex:1}
.drawer-f{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:60;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:420px;max-width:92vw;opacity:0;pointer-events:none;
  transition:opacity .16s,transform .16s,visibility 0s .16s;border:1px solid var(--border);visibility:hidden
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);visibility:visible;transition:opacity .16s,transform .16s}
.modal-b{padding:22px}
.modal-b .mi{width:40px;height:40px;border-radius:10px;background:var(--crit-soft);color:var(--crit);display:grid;place-items:center;margin-bottom:14px}
.modal-b .mi .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.modal-b h3{font-size:16px;margin-bottom:7px}
.modal-b p{color:var(--muted);font-size:13.5px}
.modal-f{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ============ TOASTS ============ */
.toasts{position:fixed;bottom:20px;right:20px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{
  display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--ok);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 15px;min-width:260px;max-width:380px;
  animation:slidein .28s cubic-bezier(.2,1,.3,1);font-size:13.5px
}
.toast.leave{animation:slideout .25s forwards}
@keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes slideout{to{transform:translateX(120%);opacity:0}}
.toast .ti{width:26px;height:26px;border-radius:7px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:none}
.toast .ti .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3}
.toast.info{border-left-color:var(--accent)} .toast.info .ti{background:var(--accent-soft);color:var(--accent-ink)}
.toast.warn{border-left-color:var(--warn)} .toast.warn .ti{background:var(--warn-soft);color:var(--warn)}
.toast b{font-weight:600} .toast .tm{color:var(--muted);font-size:12px}
/* Ajouts E1 — le composant servait de maquette : il lui manquait la variante
   d'échec, et de quoi loger un bouton de fermeture (une erreur ne s'efface pas
   toute seule, il faut donc pouvoir la congédier). */
.toast.crit{border-left-color:var(--crit)} .toast.crit .ti{background:var(--crit-soft);color:var(--crit)}
.toast .tb{flex:1;min-width:0}
.toast .tx{width:24px;height:24px;border-radius:var(--r-sm);border:none;background:none;color:var(--faint);display:grid;place-items:center;cursor:pointer;flex:none}
.toast .tx:hover{background:var(--surface-3);color:var(--ink)}
.toast .tx .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ============ MENUS · POPOVERS · INFOBULLE ============ */
.menu{
  position:absolute;z-index:70;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:5px;min-width:210px;opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .13s,transform .13s
}
.menu.on{opacity:1;pointer-events:auto;transform:none}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:none;border-radius:var(--r-sm);font-size:13px;font-weight:550;color:var(--ink);cursor:pointer;text-align:left}
.menu button:hover{background:var(--surface-3)}
.menu button .ic{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.9}
.menu .sep{height:1px;background:var(--border);margin:5px 0}
.menu .mlabel{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:8px 10px 3px}
/* Le .pop ne vit plus qu'à l'intérieur d'un <details> ouvert : sa visibilité est celle
   de son parent. Plus d'`opacity:0` (qui laissait ses boutons dans l'ordre de tabulation). */
.pop{position:absolute;z-index:70;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;min-width:180px}
.pop button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:none;background:none;border-radius:var(--r-sm);font-size:13px;color:var(--ink);cursor:pointer;text-align:left;font-weight:550;white-space:nowrap}
.pop button:hover{background:var(--surface-3)}
.pop button[aria-current="true"]{background:var(--surface-2);color:var(--ink)}
.pop button[aria-current="true"]::after{content:"\2713";margin-left:auto;opacity:.7}
.tip{position:fixed;z-index:100;background:var(--surface-3);color:var(--ink);border:1px solid var(--border-strong);padding:8px 11px;border-radius:8px;font-size:12px;line-height:1.4;max-width:250px;box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.tip.on{opacity:1;transform:none}
.tip b{color:var(--ink);display:block;margin-bottom:2px}

/* ============ PALETTE DE COMMANDES ============ */
.palette{
  position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-8px);width:560px;max-width:92vw;z-index:60;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s,visibility 0s .15s;overflow:hidden;
  /* Fermée : `visibility:hidden` sort son <input> de l'ordre de tabulation
     (opacity:0 seul le laissait focusable au clavier — piège d'accessibilité). */
  visibility:hidden
}
.palette.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);visibility:visible;transition:opacity .15s,transform .15s}
.palette-in{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--border)}
.palette-in .ic{width:19px;height:19px;stroke:var(--faint);fill:none;stroke-width:2}
.palette-in input{border:none;background:none;outline:none;font-size:16px;color:var(--ink);width:100%;font-family:inherit}
.palette-res{max-height:340px;overflow-y:auto;padding:6px}
.pgroup{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px}
.pres{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;color:inherit}
.pres:hover,.pres.sel{background:var(--accent-soft)}
.pres .pic{width:28px;height:28px;border-radius:7px;background:var(--surface-3);display:grid;place-items:center;color:var(--muted);flex:none}
.pres .pic .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.pres b{font-weight:600;font-size:13.5px}
.pres .m{color:var(--faint);font-size:12px}
.pres .k{margin-left:auto;font-size:11px;color:var(--faint)}

/* ============ MATRICE DE CANAUX & APPAIRAGE GUIDÉ ============ */
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th{text-align:left;font-weight:600;color:var(--faint);font-size:11px;letter-spacing:.03em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--border)}
.matrix td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.matrix tr:last-child td{border-bottom:none}
.matrix .evt b{font-weight:600}.matrix .evt .m{color:var(--faint);font-size:11.5px}
.matrix .seg{display:inline-flex}.matrix .seg button{padding:4px 9px;font-size:11.5px}
.pairflow{display:flex;flex-direction:column}
.pstep{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.pstep:last-child{border-bottom:none}
.pnum{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 12px rgba(var(--glow),.25)}
.pbody{flex:1;min-width:0}.pbody>b{font-size:13.5px}
.pstep .field{margin-bottom:0;margin-top:6px}

/* ============ VISIONNEUSE (documents · révisions) ============ */
.viewer{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:62;width:860px;max-width:94vw;max-height:90vh;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;overflow:hidden}
.viewer.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.viewer-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border)}
.viewer-h h3{font-size:15px;flex:1;display:inline-flex;align-items:center;gap:9px}
.viewer-h .r{display:flex;gap:8px;align-items:center}
.viewer-b{padding:20px 22px;overflow:auto;flex:1}
.viewer-f{padding:11px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.viewer-f .sp{flex:1;color:var(--faint);font-size:12px}
.md{font-size:13.5px;line-height:1.65;color:var(--ink);max-width:76ch}
.md h1{font-size:20px;margin:0 0 4px}.md .subtitle{color:var(--faint);font-size:12.5px;margin-bottom:14px}
.md h2{font-family:var(--display);font-size:14px;letter-spacing:.02em;margin:20px 0 7px;color:var(--accent-ink)}
.md p{margin:0 0 10px;color:var(--muted)}.md ul{margin:0 0 10px 18px;color:var(--muted)}.md li{margin:2px 0}
.md code{font-family:var(--mono);font-size:12px;background:var(--surface-3);padding:1px 5px;border-radius:4px;color:var(--accent-ink)}
.md hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.diff{font-family:var(--mono);font-size:12.5px;line-height:1.75;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.diff .dl{padding:2px 12px;white-space:pre-wrap;display:flex;gap:8px}
.diff .dl .gut{color:var(--faint);user-select:none;flex:none;width:14px;text-align:center}
.diff .add{background:var(--ok-soft);background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.diff .del{background:var(--crit-soft);background:color-mix(in srgb,var(--crit) 13%,transparent);color:var(--crit)}
.diff .ctx{color:var(--muted)}
.revlist{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.revlist .rev{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border)}
.revlist .rev:last-child{border-bottom:none}
.revlist .rev.cur{background:var(--accent-soft)}
.revlist .rev .rv{font-family:var(--display);font-weight:700;font-size:13px;flex:none;min-width:34px}
.revlist .rev .g{flex:1;min-width:0}.revlist .rev .g b{font-weight:600;font-size:13px}.revlist .rev .g .m{color:var(--faint);font-size:11.5px}
.revlist .rev .ra{display:flex;gap:6px;flex:none}

/* ============ UTILITAIRES ============ */
.hr{height:1px;background:var(--border);margin:16px 0;border:none}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.flex{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.sp{flex:1}