/* ============================================================
   OCCTAM · NEXUS — Design system (clair par défaut + sombre)
   Source : _resources/Design/V2 (DESIGN_SYSTEM.md + handoff).

   Cascade en couches @layer (priorité croissante) :
     tokens   → variables (thèmes)
     base     → reset + éléments globaux
     shell    → topbar / sidebar / contenu
     components → boutons, cartes, KPI, tables, badges, formulaires, onglets…
     pages    → spécifique « détail site »
     compat   → classes héritées des vues (à retirer à terme)
     a11y     → focus visible + reduced-motion (toujours prioritaire)

   Conventions : couleurs/tons via tokens (jamais en dur), tons dérivés via
   color-mix(), TYPO en rem (respecte le zoom), tailles d'UI/rayons en px
   (fidélité au proto). Commentaires courts.
   ============================================================ */

/* Fontes auto-hébergées (hors couches) */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:300 800; font-display:swap; src:url('/assets/fonts/figtree-latin.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/space-mono-latin.woff2') format('woff2'); }
@font-face { font-family:'Michroma'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/michroma-latin.woff2') format('woff2'); }

@layer tokens, base, shell, components, pages, compat, a11y;

/* ---- TOKENS ------------------------------------------------ */
@layer tokens {
:root{
  --kernel:#071318; --backend:#0D4F4B; --output:#FF5102; --canvas:#F7F0E3; --ink:#101820;
  --surface:#0C2328; --border:#1C3B40; --muted:#8FA8A5;
  --ok:#3FB68B; --warn:#F5A623; --danger:#E5484D;

  --accent:var(--output);
  --radius:5px; --gap:20px;   /* rayon unique : cartes, contrôles, boutons, encarts */
  --sidebar-w:240px; --sidebar-w-compact:74px; --topbar-h:64px;

  --font-title:'Space Grotesk','Avenir Next',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* surfaces — valeurs sombres par défaut, écrasées en clair */
  --app-bg:linear-gradient(168deg,#0C4A47 0%,#08272B 44%,#071318 100%);
  --card-bg:var(--surface); --card-bg-2:#0E2A30; --card-border:var(--border);
  --text:var(--canvas); --text-strong:#FFFFFF; --text-muted:var(--muted);
  --field-bg:rgba(255,255,255,.03); --field-border:var(--border);
  --hover:rgba(255,255,255,.04); --icon-tile:rgba(255,255,255,.05);
  --topbar-bg:rgba(6,16,20,.86);
  --tb-ink:var(--canvas); --tb-muted:var(--muted); --tb-soft:rgba(255,255,255,.05);
  --tb-line:rgba(28,59,64,.85); --tb-border:rgba(28,59,64,.7); --tb-hover:rgba(255,255,255,.05);
  --tb-dot-ring:var(--kernel); --tb-shadow:none;

  /* tons dérivés des tokens (au lieu de rgba codés en dur) */
  --accent-soft:color-mix(in oklab, var(--accent) 9%, transparent);
  --accent-tile:color-mix(in oklab, var(--accent) 12%, transparent);
  --ok-soft:color-mix(in oklab, var(--ok) 14%, transparent);
  --warn-soft:color-mix(in oklab, var(--warn) 14%, transparent);
  --danger-soft:color-mix(in oklab, var(--danger) 14%, transparent);
}
html[data-theme="light"]{
  --app-bg:var(--canvas);
  --card-bg:#FFFFFF; --card-bg-2:#FBF7EE; --card-border:#E7DECC;
  --text:var(--ink); --text-strong:#0A1016; --text-muted:#7A8A82;
  --field-bg:#FFFFFF; --field-border:#E2D9C7;
  --hover:color-mix(in oklab, var(--backend) 5%, transparent); --icon-tile:#F2EBDB;
  --topbar-bg:#FFFFFF;
  --tb-ink:#101820; --tb-muted:#8A8270; --tb-soft:#F4EFE3; --tb-line:#ECE4D4;
  --tb-border:rgba(231,222,204,.55); --tb-hover:color-mix(in oklab, var(--backend) 5%, transparent); --tb-dot-ring:#FFFFFF;
  --tb-shadow:0 4px 16px -10px rgba(16,24,32,.18);
}
}

/* ---- BASE -------------------------------------------------- */
@layer base {
*{ box-sizing:border-box; }
/* L'attribut [hidden] doit toujours masquer, même sur un élément à display: explicite
   (sinon un .btn-primary ou .tb-badge marqué hidden reste visible). */
[hidden]{ display:none !important; }
html,body{ margin:0; min-height:100%; }
html{ font-size:100%; }                 /* 16px = base rem (respecte le zoom utilisateur) */
body{ font-family:var(--font-body); background:var(--app-bg); background-attachment:fixed;
  color:var(--text); -webkit-font-smoothing:antialiased; font-size:.9375rem; line-height:1.4; }
html[data-density="compact"]{ line-height:1.3; }
a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:20px; border:3px solid transparent; background-clip:content-box; }
.muted{ color:var(--text-muted); }
.error{ color:var(--danger); }
code, pre{ font-family:var(--font-mono); }
h1,h2,h3{ font-family:var(--font-title); font-weight:400; }
}

/* ---- SHELL : TOPBAR --------------------------------------- */
@layer shell {
.topbar{ position:fixed; top:0; left:0; right:0; height:var(--topbar-h); display:flex; align-items:center;
  padding:0 28px 0 0; background:var(--topbar-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tb-border); box-shadow:var(--tb-shadow); z-index:50; }
.tb-brand{ display:flex; align-items:center; gap:11px; width:var(--sidebar-w); padding-left:22px; min-width:0; flex-shrink:0; text-decoration:none; }
html[data-compact="true"] .tb-brand{ width:var(--sidebar-w-compact); justify-content:center; padding-left:0; }
.tb-brand .brand-full{ height:19px; width:auto; display:block; }
.tb-brand .brand-mark{ height:24px; width:auto; display:none; }
.tb-brand .nx{ font-family:var(--font-title); font-size:.75rem; letter-spacing:.04em; color:var(--tb-muted); white-space:nowrap; }
html[data-compact="true"] .tb-brand .brand-full, html[data-compact="true"] .tb-brand .nx{ display:none; }
html[data-compact="true"] .tb-brand .brand-mark{ display:block; }
.tb-lead{ display:flex; align-items:center; padding-left:28px; flex-shrink:0; }
.tb-burger{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; background:var(--tb-soft);
  border:1px solid var(--tb-line); border-radius:50%; color:var(--tb-ink); cursor:pointer; transition:all .18s; }
.tb-burger:hover{ color:var(--accent); border-color:var(--accent); }
.tb-burger svg{ width:18px; height:18px; }
.tb-spacer{ flex:1; }
.tb-right{ display:flex; align-items:center; gap:9px; }
.tb-search{ display:flex; align-items:center; gap:10px; height:38px; width:300px; max-width:30vw; padding:0 14px;
  background:var(--tb-soft); border:1px solid var(--tb-line); border-radius:var(--radius); color:var(--tb-muted); transition:border-color .18s; }
.tb-search:focus-within{ border-color:var(--accent); }
.tb-search svg{ width:16px; height:16px; flex-shrink:0; }
.tb-search input{ border:none; background:transparent; outline:none; font-family:var(--font-body); font-size:.84375rem; color:var(--tb-ink); width:100%; }
.tb-search input::placeholder{ color:var(--tb-muted); }
/* Recherche globale : panneau de suggestions groupées par modèle CMS */
.tb-search-wrap{ position:relative; }
.tb-suggest{ position:absolute; top:calc(100% + 6px); right:0; width:340px; max-width:80vw; max-height:60vh; overflow-y:auto;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.18); padding:5px; z-index:60; }
.tb-suggest-group{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  padding:8px 10px 4px; font-weight:600; }
.tb-suggest-item{ display:flex; flex-direction:column; gap:1px; padding:7px 10px; border-radius:var(--radius);
  text-decoration:none; color:var(--text); cursor:pointer; }
.tb-suggest-item[aria-selected="true"]{ background:var(--hover); }
.tb-suggest-item .ts-nom{ font-size:.84375rem; }
.tb-suggest-item .ts-url{ font-size:.75rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-suggest-empty{ padding:10px; font-size:.8125rem; color:var(--text-muted); text-align:center; }
/* Cloche : badge non-lu + panneau de notifications */
.tb-bell-wrap{ position:relative; }
.tb-badge{ position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  display:grid; place-items:center; border-radius:9px; background:var(--danger); color:#fff;
  font-size:.625rem; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--tb-dot-ring); }
.tb-notif{ width:360px; }
.tb-notif-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:var(--radius);
  text-decoration:none; color:var(--text); }
.tb-notif-item:hover{ background:var(--hover); }
.tb-notif-item .tn-dot{ width:8px; height:8px; margin-top:5px; border-radius:50%; flex-shrink:0; background:var(--text-muted); }
.tb-notif-item.sev-critical .tn-dot{ background:var(--danger); }
.tb-notif-item.sev-degraded .tn-dot{ background:var(--warn); }
.tb-notif-item.sev-warning .tn-dot{ background:var(--warn); }
.tb-notif-item.is-resolved .tn-dot{ background:var(--ok); }
.tb-notif-item.is-resolved .tn-title{ color:var(--text-muted); }
.tb-notif-item .tn-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tb-notif-item .tn-title{ font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-notif-item .tn-meta{ font-size:.6875rem; color:var(--text-muted); }
.tb-notif-item.is-health{ flex-direction:column; gap:1px; background:var(--warn-soft); margin-bottom:3px; }
.tb-notif-item.is-health .tn-title{ font-weight:600; }
.tb-notif-foot{ display:block; padding:8px 10px 4px; font-size:.75rem; color:var(--accent); text-decoration:none; text-align:right; }
.tb-notif-foot:hover{ text-decoration:underline; }
.tb-notif-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px 4px; }
.tb-notif-head .tb-notif-title{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; }
.tb-notif-clear{ background:none; border:none; padding:0; cursor:pointer; font-size:.7rem; color:var(--text-muted); }
.tb-notif-clear:hover{ color:var(--danger); text-decoration:underline; }
.tb-icon{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; position:relative;
  background:transparent; border:1px solid transparent; border-radius:var(--radius); color:var(--tb-muted); cursor:pointer; transition:all .16s; }
.tb-icon:hover{ color:var(--tb-ink); background:var(--tb-hover); }
.tb-icon:disabled{ opacity:.5; cursor:not-allowed; }
.tb-icon svg{ width:18px; height:18px; }
.tb-icon .dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--tb-dot-ring); }
.tb-search-btn{ display:none; }       /* loupe masquée sur desktop (après .tb-icon → l'emporte par l'ordre) ; affichée en mobile */
.tb-user{ display:flex; align-items:center; gap:10px; padding:4px 8px 4px 4px; border-radius:24px; transition:background .16s; margin-left:2px; text-decoration:none; }
.tb-user:hover{ background:var(--tb-hover); }
.tb-user .av{ width:32px; height:32px; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg,#0D4F4B,#071318);
  border:1px solid rgba(143,168,165,.4); display:grid; place-items:center; font-family:var(--font-title); font-size:.6875rem; color:var(--canvas); }
.tb-user .who b{ font-size:.8125rem; font-weight:600; color:var(--tb-ink); }
.tb-user .who small{ font-size:.6875rem; color:var(--tb-muted); }

/* SHELL : corps / sidebar */
.below{ display:flex; padding-top:var(--topbar-h); min-height:100vh; }
.sidebar{ position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); width:var(--sidebar-w);
  flex:0 0 auto; display:flex; flex-direction:column; border-right:1px solid var(--border);
  background:rgba(7,19,24,.45); overflow:hidden; }
html[data-theme="light"] .sidebar{ background:linear-gradient(168deg,#0A3B37 0%,#072422 44%,#06181C 100%); border-right-color:#0A302D; }
html[data-compact="true"] .sidebar{ width:var(--sidebar-w-compact); }
.nav{ padding:12px; overflow-y:auto; overflow-x:hidden; flex:1; }
.nav-label{ font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:#516B68; font-weight:600; padding:0 12px; margin:14px 0 6px; }
html[data-compact="true"] .nav-label{ opacity:0; height:12px; }
.nav-item{ position:relative; display:flex; align-items:center; gap:12px; height:36px; padding:0 12px; border-radius:var(--radius);
  color:var(--muted); cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .18s,color .18s; margin-bottom:1px; }
.nav-item svg{ width:18px; height:18px; flex-shrink:0; stroke-width:1.7; }
.nav-item .txt{ font-size:.84375rem; font-weight:500; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:var(--canvas); }
.nav-item.active{ color:var(--accent); background:var(--accent-soft); }
.nav-item.active::before{ content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.nav-sub{ padding-left:18px; }
.nav-sub .nav-item{ height:32px; }
.nav-sub .nav-item .txt{ font-size:.78125rem; }
html[data-compact="true"] .nav-item{ justify-content:center; padding:0; }
html[data-compact="true"] .nav-item .txt{ opacity:0; width:0; overflow:hidden; }
html[data-compact="true"] .nav-item.active::before{ left:0; }
html[data-compact="true"] .nav-sub{ display:none; }
.sidebar-foot{ padding:14px; border-top:1px solid rgba(28,59,64,.55); flex-shrink:0; }
.foot-soon{ display:flex; align-items:center; gap:11px; height:42px; padding:0 13px; border-radius:var(--radius); white-space:nowrap; overflow:hidden;
  border:1px dashed #173036; background:rgba(2,8,10,.55); color:#4E6C69; }
.foot-soon .dot{ width:7px; height:7px; border-radius:50%; background:#3A5B58; flex-shrink:0; }
.foot-soon .soon-badge{ font-family:var(--font-body); font-size:.59375rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.04); border-radius:20px; padding:3px 9px; flex-shrink:0; }
.foot-soon .soon-txt{ font-size:.78125rem; color:#5E7B78; }
html[data-compact="true"] .foot-soon{ justify-content:center; padding:0; }
html[data-compact="true"] .foot-soon .soon-txt, html[data-compact="true"] .foot-soon .soon-badge{ display:none; }
html[data-theme="light"] .foot-soon{ background:#DCEFE5; border:1px solid #BCDCCD; color:#3A6457; }
html[data-theme="light"] .foot-soon .dot{ background:#3FB68B; }
html[data-theme="light"] .foot-soon .soon-badge{ color:#2E5A4D; background:color-mix(in oklab, var(--ok) 18%, transparent); }
html[data-theme="light"] .foot-soon .soon-txt{ color:#3A6457; }
.content{ padding:24px 28px 44px; min-width:0; flex:1 1 auto; }
@media (max-width:860px){
  .sidebar{ position:fixed; left:0; top:var(--topbar-h); z-index:40; transform:translateX(-100%); transition:transform .2s ease; }
  html[data-mobnav="true"] .sidebar{ transform:translateX(0); }
  .tb-user .who{ display:none; } .tb-search{ width:160px; }
}
/* Téléphone : la marque pleine + la recherche prennent trop de place → marque réduite au
   signe, recherche masquée, espacements resserrés. On garde l'essentiel (thème, cloche,
   déconnexion, avatar) pour que le topbar ne déborde JAMAIS. */
@media (max-width:560px){
  .tb-brand{ width:auto; padding-left:14px; gap:8px; }
  .tb-brand .brand-full, .tb-brand .nx{ display:none; }
  .tb-brand .brand-mark{ display:block; }
  .tb-lead{ padding-left:12px; }
  /* Recherche : la loupe ouvre le champ en barre fixe pleine largeur sous le topbar (popin
     qui s'adapte à l'écran) ; les suggestions tombent juste dessous. */
  .tb-search-btn{ display:grid; }
  .tb-search-wrap{ display:none; }
  /* Alignée sur la largeur des éléments en dessous (inset 28px = padding .content) et
     décalée sous le header pour ne pas y être collée. */
  .tb-search-wrap.open{ display:block; position:fixed; top:calc(var(--topbar-h) + 16px); left:28px; right:28px; z-index:60; }
  /* La loupe RESTE visible = interrupteur on/off ; ouverte, elle passe en accent plein. */
  .tb-search-wrap.open ~ .tb-search-btn{ background:var(--accent); border-color:var(--accent); color:#fff; }
  /* Champ surélevé (surface carte + ombre) pour ressortir du fond beige. */
  .tb-search-wrap.open .tb-search{ width:100%; max-width:none; height:auto; padding:13px 14px; color:var(--text-muted);
    background:var(--card-bg); border-color:var(--card-border); box-shadow:0 10px 30px rgba(0,0,0,.18); }
  .tb-search-wrap.open .tb-search:focus-within{ border-color:var(--accent); }  /* trait de focus accent (sinon écrasé par la règle ci-dessus) */
  .tb-search-wrap.open .tb-search input{ color:var(--text); }
  .tb-search-wrap.open .tb-suggest{ left:0; right:0; width:auto; max-width:none; }
  /* Cloche : panneau en feuille fixe pleine largeur (ancré au viewport, plus de débord à gauche). */
  .tb-notif{ position:fixed; top:calc(var(--topbar-h) + 6px); left:8px; right:8px; width:auto; max-width:none; }
  .tb-right{ gap:5px; }
  .tb-right .tb-icon:disabled{ display:none; }      /* « Apps (à venir) » masqué */
}
}

/* ---- COMPONENTS ------------------------------------------- */
@layer components {
/* En-tête de page + boutons + pills */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.page-title{ font-family:var(--font-title); font-size:clamp(.9rem,.82rem + .35vw,1rem); font-weight:400; color:var(--text-strong); letter-spacing:.02em; margin:0; }
html[data-caps="true"] .page-title{ text-transform:uppercase; letter-spacing:.06em; }
.page-sub{ color:var(--text-muted); font-size:.78125rem; margin:5px 0 0; }
.head-actions{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.btn-round{ width:38px; padding:0; justify-content:center; border-radius:50%; font-size:1.3rem; font-weight:400; line-height:1; flex-shrink:0; }
.back-link{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:var(--text-muted); font-size:.8125rem; font-weight:600; text-decoration:none; margin-bottom:14px; }
.back-link svg{ width:13px; height:13px; flex-shrink:0; }
.back-link:hover{ color:var(--accent); }

.btn-primary,.btn{ height:38px; padding:0 16px; border:none; background:var(--accent); color:#fff; border-radius:var(--radius);
  font-family:var(--font-body); font-size:.8125rem; font-weight:700; cursor:pointer; transition:filter .18s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; }
.btn-primary:hover,.btn:hover{ filter:brightness(1.08); }
.btn-primary svg,.btn svg{ width:16px; height:16px; }
.btn-primary:disabled,.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.btn-ghost{ height:32px; padding:0 14px; background:transparent; border:1px solid var(--field-border); border-radius:var(--radius);
  color:var(--text-muted); font-family:var(--font-body); font-size:.78125rem; font-weight:500; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.btn-ghost:hover{ color:var(--text); border-color:var(--accent); }
.btn-secondary{ height:38px; padding:0 16px; background:transparent; border:1px solid var(--field-border); border-radius:var(--radius);
  color:var(--text); font-family:var(--font-body); font-size:.78125rem; font-weight:600; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; }
.btn-secondary:hover{ border-color:var(--accent); color:var(--text-strong); }
.btn-secondary.danger{ color:var(--danger); border-color:color-mix(in oklab, var(--danger) 40%, transparent); }
.btn-secondary.danger:hover{ border-color:var(--danger); color:var(--danger); }

/* --- Page de connexion (hors coquille app) : carte blanche sur dégradé teal --- */
body.login{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--app-bg); font-family:var(--font-body); }
.login-card{ width:100%; max-width:430px; background:#fff; border-radius:16px; padding:42px 40px 40px;
  text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.login-mark{ width:54px; height:54px; display:block; margin:0 auto 16px; }
.login-brand{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 30px; }
.login-brand img{ height:18px; width:auto; display:block; }
.login-brand span{ font-family:var(--font-title); font-size:18px; font-weight:500; color:#9aa3a8; }
.login-title{ font-family:var(--font-title); font-size:30px; font-weight:700; color:var(--ink); margin:0 0 28px; letter-spacing:.5px; }
.login-error{ background:#FBE9E9; color:var(--danger); padding:10px 14px; border-radius:var(--radius); font-size:14px; margin:0 0 18px; }
.login-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:54px;
  font-size:16px; font-weight:700; border-radius:10px; text-decoration:none; box-shadow:0 14px 34px rgba(255,81,2,.32); }
.login-btn svg{ width:17px; height:17px; flex:0 0 auto; }

/* Barre de progression globale (branchée sur nexusApi → visible pour toute action) */
#nx-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; opacity:0; }
#nx-progress::before{ content:""; display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #fff)); box-shadow:0 0 8px color-mix(in oklab, var(--accent) 60%, transparent); }
#nx-progress.run{ opacity:1; }
#nx-progress.run::before{ transform:scaleX(.85); transition:transform 9s cubic-bezier(.08,.82,.2,1); }  /* fausse progression lente vers 85% */
#nx-progress.done{ opacity:0; transition:opacity .3s ease .12s; }
#nx-progress.done::before{ transform:scaleX(1); transition:transform .18s ease; }

/* Popin de résultat (déploiement…) : overlay + carte centrée, fermeture ×/overlay/Échap/10 s. */
.nx-popin-overlay{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.42); }
.nx-popin{ width:100%; max-width:520px; max-height:80vh; overflow:auto; padding:20px 22px; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:0 20px 55px rgba(0,0,0,.32); }
.nx-popin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.nx-popin-head h3{ margin:0; font-size:.95rem; font-weight:600; color:var(--text-strong); }
.nx-popin.ok .nx-popin-head h3{ color:var(--ok); }
.nx-popin.error .nx-popin-head h3{ color:var(--danger); }
.nx-popin-close{ flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; border:none; border-radius:50%;
  background:color-mix(in oklab, var(--text-strong) 8%, transparent); color:var(--text-muted); cursor:pointer; font-size:.85rem; }
.nx-popin-close:hover{ color:var(--danger); }
.nx-popin-body p{ margin:0 0 7px; font-size:.84rem; line-height:1.5; color:var(--text); word-break:break-word; }
.nx-popin-body p:last-child{ margin-bottom:0; }

/* Bouton « occupé » : spinner + désactivé */
.btn-spin{ display:inline-block; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:nx-spin .6s linear infinite; vertical-align:-2px; }
@keyframes nx-spin{ to{ transform:rotate(360deg); } }
.is-busy{ cursor:progress; opacity:.9; }
.btn-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.pill-select,select.pill-select{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 32px 0 14px; background-color:var(--field-bg); border:1px solid var(--field-border);
  border-radius:var(--radius); color:var(--text); font-size:.78125rem; font-weight:500; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238FA8A5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px; }
html[data-theme="light"] .pill-select,html[data-theme="light"] select.pill-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237A8A82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pill-select svg{ width:14px; height:14px; color:var(--text-muted); }

/* Grilles + cartes */
.grid{ display:grid; gap:var(--gap); }
.row-main{ grid-template-columns:1fr 1.55fr; margin-bottom:var(--gap); } /* Dispo étroite · Temps de réponse large (futur graphe) */
.row-2{ grid-template-columns:1fr 1fr; margin-bottom:var(--gap); }
.config-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,1fr); margin-bottom:var(--gap); }
@media (max-width:980px){ .config-grid{ grid-template-columns:1fr; } }
/* En grille, l'espacement vient du gap : on neutralise la marge des cartes. */
.grid > .card, .config-grid > .card{ margin-bottom:0; }
.card,.panel{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; margin-bottom:var(--gap); }
:where(html[data-density="compact"]) .card, :where(html[data-density="compact"]) .panel{ padding:17px; }
html[data-theme="light"] .card, html[data-theme="light"] .panel{ box-shadow:0 1px 2px rgba(16,24,32,.04),0 10px 26px -18px rgba(16,24,32,.16); }
.card h2,.panel h2,.card-title{ font-family:var(--font-title); font-size:.75rem; font-weight:400; color:var(--text-strong); letter-spacing:.03em; margin:0 0 14px; }
html[data-caps="true"] .card h2, html[data-caps="true"] .panel h2, html[data-caps="true"] .card-title{ text-transform:uppercase; letter-spacing:.07em; font-size:.6875rem; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.card-head h2{ margin:0; }

/* KPI */
.kpi-strip{ display:grid; grid-template-columns:repeat(4,1fr); padding:0; overflow:hidden; }
.kpi{ padding:22px 24px; border-right:1px solid var(--card-border); display:flex; flex-direction:column; min-width:0; }
.kpi:last-child{ border-right:none; }
.kpi .k-top{ display:flex; align-items:center; gap:9px; }
.kpi .k-ico{ width:30px; height:30px; border-radius:var(--radius); flex-shrink:0; display:grid; place-items:center; background:var(--icon-tile); color:var(--text-muted); }
.kpi .k-ico svg{ width:16px; height:16px; }
.kpi .k-ico.accent{ background:var(--accent-tile); color:var(--accent); }
.kpi .k-label{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.kpi .k-val{ font-size:clamp(1.5rem,1.2rem + 1.1vw,1.875rem); font-weight:700; letter-spacing:-.01em; color:var(--text-strong); line-height:1; margin-top:11px; }
/* Unité d'un KPI : taille réduite + espace (norme SI/FR : une espace entre nombre et unité). */
.k-val .u{ font-size:.9375rem; font-weight:600; color:var(--text-muted); margin-left:.32em; }
.kpi .k-delta{ font-size:.75rem; font-weight:600; color:var(--text-muted); margin-top:5px; }
.kpi .k-delta .up{ color:var(--ok); } .kpi .k-delta .down{ color:var(--danger); }
:where(html[data-density="compact"]) .kpi{ padding:16px 18px; }

/* Tables */
/* Débord G/D pour les filets pleine largeur ; le débord BAS annule le padding de la
   carte, et la dernière ligne reçoit un padding = à l'espace inter-lignes → uniforme. */
.table-wrap{ overflow-x:auto; margin:0 -22px -22px; }
:where(html[data-density="compact"]) .table-wrap{ margin-bottom:-17px; }
table,.table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:0 18px 12px; white-space:nowrap; border-bottom:1px solid var(--card-border); }
thead th:first-child{ padding-left:22px; } thead th:last-child{ text-align:right; padding-right:22px; }
tbody td{ padding:14px 18px; border-bottom:1px solid var(--card-border); font-size:.84375rem; vertical-align:middle; }
tbody td:first-child{ padding-left:22px; } tbody td:last-child{ text-align:right; padding-right:22px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .15s; } tbody tr:hover{ background:var(--hover); }
/* Mode « compact » : préfixe contextuel enveloppé dans :where() → spécificité NEUTRE.
   Ces réglages de densité gagnent par l'ordre source (après le style de base), pas par
   la spécificité, donc les overrides responsive (cartes mobiles) priment sans !important. */
:where(html[data-density="compact"]) tbody td{ padding:10px 18px; }
/* Mobile : chaque ligne du tableau devient une CARTE (scroll vertical). On RETIRE la boîte
   blanche englobante (.list-card) → les cartes flottent directement, on récupère le padding. */
@media (max-width:640px){
  .list-card{ padding:0; background:none; border:none; box-shadow:none; }
  .list-card > .card-head, .list-card > h2, .list-card > .card-desc{ padding:0 2px; }
  .table-wrap{ overflow-x:visible; margin:0; }
  .table-wrap table, .table-wrap tbody{ display:block; width:auto; }
  .table-wrap thead{ display:none; }
  /* Entité/Catégorie/CMS sur une ligne ; Statuts pleine largeur ; Réponse + action sur une ligne.
     Espacement porté par la carte (tr), pas entre les td. Libellé au-dessus, valeur en dessous. */
  .table-wrap tbody tr{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-start;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:12px 14px; margin-bottom:8px; }
  .table-wrap tbody td{ flex:1 1 26%; min-width:0; border:none; padding:0; background:none; display:flex; flex-direction:column; gap:1px; }
  .table-wrap tbody td:first-child{ flex-basis:100%; padding:0 0 8px; border-bottom:1px solid var(--card-border); }
  .table-wrap tbody td[data-label="Statuts"]{ flex-basis:100%; }
  .table-wrap tbody td[data-label="Réponse"]{ flex:1 1 auto; }
  .table-wrap tbody td:last-child:not([data-label]){ flex:0 0 auto; margin-left:auto; align-self:center; }
  .table-wrap tbody td[data-label]::before{ content:attr(data-label); font-size:.5625rem; text-transform:uppercase;
    letter-spacing:.07em; color:var(--text-muted); font-weight:700; }
  .table-wrap tbody td .tag{ width:fit-content; }                                  /* pastille catégorie ajustée */
  .table-wrap tbody td .btn-ghost, .table-wrap tbody td .btn-secondary{ width:auto; } /* Retirer fit-content */
  .site-name{ white-space:normal; }                 /* le nom peut passer à la ligne */
  .table-wrap .site-url{ word-break:break-all; }
  /* ALERTE (carte) : UN seul fond léger + UN seul trait gauche, portés par la carte (tr).
     Les règles par-td (fond/trait) sont desktop-only → ici, ni rouge-sur-rouge ni double trait. */
  .table-wrap tbody tr.row-alert{ background:color-mix(in oklab, var(--danger) 6%, var(--card-bg)); }
  .table-wrap tbody tr.row-critical{ box-shadow:inset 3px 0 0 var(--danger); }
  .table-wrap tbody tr.row-warning{ box-shadow:inset 3px 0 0 var(--warn); }
  /* Chiffre + libellé : interlignage resserré (KPI, cartes parc). */
  .kpi{ padding:15px 16px; }
  .kpi .k-val{ line-height:1; margin-top:6px; }
  .kpi .k-delta{ line-height:1.15; margin-top:3px; }
  .resp-kpi .k-val{ line-height:1; } .resp-kpi .kv{ line-height:1.1; margin:2px 0 0; }
  .rl .v{ line-height:1; } .rl .l{ line-height:1.1; margin-top:1px; }
  /* Filtre + Collecte à gauche, « + » collé à DROITE, barre pleine largeur (= largeur des cartes). */
  .head-actions{ flex:1 1 100%; flex-wrap:nowrap; gap:8px; }
  .head-actions .pill-select{ flex:0 1 auto; min-width:0; padding:0 30px 0 12px; }
  .head-actions #collectAll{ flex-shrink:1; padding:0 12px; }
  .head-actions .btn-round{ margin-left:auto; }
  /* Déploiement : Agent / Accès = champs longs → pleine largeur (pas 2/ligne). */
  .deploy-table tbody td{ flex-basis:100%; }
}
/* Accès SFTP : le code et le badge « épinglée » passent à la ligne au lieu de déborder. */
.access-val{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.access-val code{ word-break:break-all; }
.site-name{ display:block; font-weight:700; color:var(--text-strong); white-space:nowrap; }
.site-name a{ color:inherit; text-decoration:none; }            /* seul le NOM se souligne, pas l'icône */
.site-name a:hover{ text-decoration:underline; }
/* Renommage du site sur la page détail (crayon / double-clic). */
/* Édition du hero : titre en flex, bouton crayon ROND translucide poussé à droite (« en face »). */
.site-hero .page-title{ display:flex; align-items:center; gap:10px; }
.name-edit{ margin-left:auto; flex-shrink:0; width:30px; height:30px; display:grid; place-items:center;
  border:none; border-radius:50%; background:color-mix(in oklab, var(--text-strong) 8%, transparent);
  color:var(--text-muted); cursor:pointer; transition:background .15s, color .15s; }
.name-edit:hover{ background:color-mix(in oklab, var(--accent) 16%, transparent); color:var(--accent); }
.name-edit svg{ width:14px; height:14px; }
.name-form{ display:flex; flex-direction:column; gap:10px; margin:10px 0 0; }
.name-form[hidden]{ display:none; }   /* sinon display:flex écrase l'attribut hidden */
.name-form input{ width:100%; }
.nf-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.nf-tags .nf-sel{ flex:1 1 150px; min-width:0; }   /* 3 sur une ligne en large, empilées en mobile */
.nf-actions{ display:flex; gap:8px; }
.site-url{ display:block; font-size:.75rem; color:var(--text-muted); max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell-mute{ font-size:.75rem; color:var(--text-muted); }
.tag{ display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:20px; font-size:.71875rem; font-weight:600; background:var(--icon-tile); color:var(--text-muted); }
.resp,.parc-pct{ font-family:var(--font-mono); font-size:.78125rem; font-weight:700; color:var(--text); }

/* Badges (nouveau .badge.ok + hérité .badge-ok) */
.badge{ display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 11px; border-radius:20px; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.badge i{ width:6px; height:6px; border-radius:50%; }
.badge.ok,.badge-ok{ background:var(--ok-soft); color:var(--ok); } .badge.ok i{ background:var(--ok); }
.badge.ko,.badge-ko{ background:var(--danger-soft); color:var(--danger); } .badge.ko i{ background:var(--danger); }
.badge.warn,.badge-warn{ background:var(--warn-soft); color:var(--warn); } .badge.warn i{ background:var(--warn); }
.badge-muted,.badge.muted{ background:var(--icon-tile); color:var(--text-muted); }
.badge .b-ico{ width:13px; height:13px; flex-shrink:0; }   /* icône FA dans un badge (horloge, gyrophare) */
.statuts{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }   /* colonne « Statuts » : 2 badges */

/* Formulaires — contrôles uniformisés : hauteur 38px, padding 0 11px, rayon --radius. */
input:not([type]),input[type=text],input[type=url],input[type=password],input[type=email],input[type=number],select,textarea{
  font-family:var(--font-body); font-size:.84375rem; color:var(--text); background:var(--field-bg); border:1px solid var(--field-border);
  border-radius:var(--radius); height:38px; padding:0 11px; outline:none; transition:border-color .18s; accent-color:var(--accent); }
textarea{ height:auto; padding:8px 11px; line-height:1.5; }   /* multi-ligne : pas de hauteur fixe */
input:focus,select:focus,textarea:focus{ border-color:var(--accent); }
input::placeholder,textarea::placeholder{ color:var(--text-muted); }
.form-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:.4rem 0; }
/* Formulaire d'accès de dépôt : grille 2 colonnes uniformes. */
.creds-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
.creds-grid > *{ min-width:0; }
.creds-grid input, .creds-grid select{ width:100%; }   /* hauteur/padding hérités de la base */
.creds-grid .full{ grid-column:1 / -1; }
.creds-foot{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:flex-end; margin-top:4px; }
.creds-foot .ftps-only{ margin-right:auto; }
.creds-foot .deploy-test-msg{ flex-basis:100%; text-align:right; }
/* Formulaire « élément surveillé » : chemin pleine largeur + ligne type/chmod/ajouter. */
.file-form{ margin-top:.5rem; }
.wf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.wf-type{ display:inline-flex; align-items:center; gap:6px; height:38px; font-size:.8rem; color:var(--text); white-space:nowrap; cursor:pointer; }
.wf-type input{ accent-color:var(--accent); }
.wf-chmod{ width:64px; }
.wf-row .btn-secondary{ margin-left:auto; }
label{ font-size:.8125rem; }

/* Note de bas de carte */
.panel-note{ color:var(--text-muted); font-size:.8125rem; margin:0 2px 18px; }

/* Onglets de réglages */
.settings-tabs{ position:sticky; top:calc(var(--topbar-h) + 14px); z-index:30; display:flex; align-items:center; gap:6px;
  margin:14px 0 22px; padding:8px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:0 12px 28px -18px rgba(2,12,14,.5);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.settings-tabs::-webkit-scrollbar{ display:none; }   /* défilable au doigt si ça déborde, sans barre visible */
.stab{ flex:0 0 auto; }                               /* les onglets gardent leur taille (pas d'écrasement) */
html[data-theme="light"] .settings-tabs{ box-shadow:0 12px 28px -18px rgba(16,24,32,.3); }
.stab{ height:38px; padding:0 16px; border:none; background:transparent; border-radius:var(--radius); color:var(--text-muted); font-family:var(--font-body); font-size:.84375rem; font-weight:600; cursor:pointer; transition:all .16s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.stab small{ font-family:var(--font-mono); font-size:.6875rem; opacity:.7; font-weight:700; }
.stab:hover{ color:var(--text); background:var(--hover); }
.stab.active{ color:var(--accent); background:color-mix(in oklab, var(--accent) 10%, transparent); }
.stab-spacer{ flex:1; }
.stab-state{ display:flex; align-items:center; gap:7px; font-size:.75rem; color:var(--text-muted); margin-right:6px; }
.stab-state .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.set-section{ margin-bottom:var(--gap); }
/* Réglages — onglet .env en 2 colonnes (la note d'intro reste pleine largeur). */
.tab-panel[data-panel="env"]:not([hidden]){ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
.tab-panel[data-panel="env"] .panel-note{ grid-column:1 / -1; margin-bottom:2px; }
.tab-panel[data-panel="env"] .set-section{ margin-bottom:0; }
@media (max-width:1024px){ .tab-panel[data-panel="env"]:not([hidden]){ grid-template-columns:1fr; } }
/* Bascule d'onglets : masquée en desktop (les onglets sont affichés normalement). */
.stab-toggle{ display:none; }
.stab-chev{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s; margin-left:3px; flex-shrink:0; }
.settings-bottom-spacer{ display:none; }

/* Téléphone : la barre d'onglets devient un MENU FIXE EN BAS, replié. La bascule (à gauche) et
   « Enregistrer » (à droite) restent toujours visibles ; on déplie vers le haut pour voir les
   onglets. → gros boutons faciles au pouce, pas de bloc « moche » pleine largeur. */
@media (max-width:560px){
  .settings-tabs{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; margin:0;
    border-radius:14px 14px 0 0; flex-wrap:wrap; gap:7px; max-height:72vh; overflow-y:auto;
    padding:11px 13px calc(11px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px -14px rgba(0,0,0,.32); }
  .stab-toggle{ order:2; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
    border:1px solid var(--field-border); background:var(--field-bg); border-radius:var(--radius);
    color:var(--text); font-family:var(--font-body); font-size:.84375rem; font-weight:700; cursor:pointer; }
  .stab{ order:1; flex-basis:100%; display:none; height:40px; }   /* onglets : liste verticale, masquée si replié */
  .settings-tabs.open .stab{ display:inline-flex; }
  .settings-tabs.open .stab-chev{ transform:rotate(-135deg); }
  .stab-spacer, .stab-state{ display:none; }
  .stab-save{ order:2; margin-left:auto; flex-shrink:0; height:40px; }   /* toujours visible, à droite */
  .settings-bottom-spacer{ display:block; height:76px; }
}
.set-section .desc{ color:var(--text-muted); font-size:.8125rem; margin:-2px 0 14px; }
.field-group{ margin-bottom:14px; } .field-group:last-child{ margin-bottom:0; }
.field-label{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78125rem; font-weight:600; color:var(--text); margin-bottom:6px; }
.field-label code{ font-family:var(--font-mono); font-size:.71875rem; color:var(--text-muted); font-weight:700; }
.rb{ display:inline-flex; align-items:center; height:18px; padding:0 8px; border-radius:20px; font-size:.5625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--icon-tile); color:var(--text-muted); }
.set-input{ width:100%; }   /* le reste est hérité de la règle input de base */
.set-input:focus{ border-color:var(--accent); }
.field-hint{ font-size:.75rem; color:var(--text-muted); margin-top:5px; }
.note-box{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px 14px; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--card-bg-2); color:var(--text-muted); font-size:.78125rem; line-height:1.5; }
.note-box svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

/* États */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; padding:60px 24px; text-align:center; color:var(--text-muted); }
.empty-state .es-ico{ width:54px; height:54px; border-radius:var(--radius); display:grid; place-items:center; background:var(--icon-tile); color:var(--text-muted); }
.empty-state .es-ico svg{ width:24px; height:24px; stroke-width:1.7; }
.empty-state .es-badge{ font-size:.59375rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:var(--accent-tile); border-radius:20px; padding:4px 11px; }
.empty-state h2, .empty-state h3{ font-family:var(--font-title); font-size:.875rem; font-weight:400; color:var(--text-strong); margin:2px 0 0; }
html[data-caps="true"] .empty-state h3{ text-transform:uppercase; letter-spacing:.06em; font-size:.78125rem; }
.empty-state p{ max-width:380px; margin:0; line-height:1.5; }
.ok-clean{ color:var(--ok); font-weight:600; }
.alert-summary{ color:var(--danger); font-weight:600; }

/* Graphes */
.chart-svg{ width:100%; height:236px; display:block; overflow:visible; }
.chart-legend{ display:flex; gap:18px; margin-top:8px; font-size:.75rem; color:var(--text-muted); align-items:center; }
.legend-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
.uptime{ display:flex; gap:3px; height:26px; align-items:stretch; }
.uptime i{ flex:1; border-radius:2px; background:var(--ok); opacity:.85; min-width:2px; }
.uptime i.warn{ background:var(--warn); } .uptime i.ko{ background:var(--danger); }
.ring-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.ring{ position:relative; width:170px; height:170px; }
.ring .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .center .big{ font-size:clamp(1.6rem,1.3rem + 1.1vw,2rem); font-weight:700; color:var(--text-strong); line-height:1; }
.ring .center .cap{ font-size:.65625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-top:7px; }
.ring-legend{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.rl{ text-align:center; padding:11px 6px; border:1px solid var(--card-border); border-radius:var(--radius); }
.rl .v{ font-size:1.25rem; font-weight:700; line-height:1; }
.rl .v.ok{ color:var(--ok); } .rl .v.warn{ color:var(--warn); } .rl .v.ko{ color:var(--danger); }
.rl .l{ font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:7px; }
@media (max-width:1100px){ .row-main{ grid-template-columns:1fr; } }
@media (max-width:900px){ .row-2{ grid-template-columns:1fr; } }
@media (max-width:920px){ .kpi-strip{ grid-template-columns:repeat(2,1fr); } .kpi:nth-child(2){ border-right:none; } }
}

/* ---- PAGES : détail site --------------------------------- */
@layer pages {
.site-hero{ margin-bottom:var(--gap); }
.site-hero .page-head{ align-items:flex-start; margin-bottom:0; }
.site-link{ display:inline-block; color:var(--accent); font-size:.875rem; font-weight:600; text-decoration:none; word-break:break-all; margin:9px 0 0; }
.site-link:hover{ text-decoration:underline; }
.sh-meta{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.col-label{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin:0 2px 11px; display:flex; align-items:center; gap:9px; }
.col-label::after{ content:""; flex:1; height:1px; background:var(--card-border); }
.fiche-grid{ display:grid; grid-template-columns:450px 1fr; gap:var(--gap); align-items:start; }
@media (max-width:1080px){ .fiche-grid{ grid-template-columns:1fr; } }
.fiche-col{ display:flex; flex-direction:column; min-width:0; }
.fiche-col > .col-label{ margin-bottom:11px; }   /* espace unifié avec les autres pages */
.fiche-col .card{ margin-bottom:var(--gap); }
.fiche-col .card:last-child{ margin-bottom:0; }
.kv{ font-size:.84375rem; color:var(--text-muted); margin:0 0 9px; }
.kv:last-of-type{ margin-bottom:0; }
.kv b{ color:var(--text); font-weight:700; }
.kv code, .kv-row code, .card-desc code{ font-family:var(--font-mono); font-size:.78125rem; color:var(--text); background:var(--icon-tile); padding:1px 6px; border-radius:5px; }
.card-desc{ color:var(--text-muted); font-size:.8125rem; margin:0 0 16px; line-height:1.5; }
.setup-steps{ margin:6px 0 16px; padding-left:1.25rem; color:var(--text-muted); font-size:.8125rem; line-height:1.55; }
.setup-steps li{ margin:5px 0; } .setup-steps b{ color:var(--text); } .setup-steps a{ color:var(--accent); }
.subline{ color:var(--text-muted); font-size:.78125rem; }
.kv-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--card-border); }
.kv-row:first-child{ padding-top:0; } .kv-row:last-child{ border-bottom:none; padding-bottom:0; }
.kv-row .k{ font-size:.8125rem; color:var(--text-muted); font-weight:600; }
.kv-row .val{ display:flex; align-items:center; gap:10px; min-width:0; }
/* Variante empilée : libellé au-dessus, valeur en dessous sur sa propre ligne. */
.kv-row.stack{ flex-direction:column; align-items:flex-start; gap:6px; }
.kv-row.stack .val{ width:100%; flex-wrap:wrap; }
.kv-lead{ font-size:.9rem; margin:0 0 2px; }
.kv-grid{ margin-top:12px; }
.kv-ver{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); }
/* Pied « Informations techniques » : dernière / prochaine analyse (calendrier · horloge). */
.tech-foot{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-size:.75rem; color:var(--text-muted); }
.tech-foot span{ display:inline-flex; align-items:center; gap:6px; }
.tech-foot svg{ width:13px; height:13px; flex-shrink:0; }
.tech-card .ti-actions{ display:flex; gap:4px; }
.tech-card .ti-actions .btn-ghost{ padding:4px 8px; font-size:.75rem; }
.ti-form{ margin-top:14px; padding-top:14px; border-top:1px solid var(--card-border); display:grid; gap:10px; }
.ti-field{ display:flex; flex-direction:column; gap:4px; }
.ti-field span{ font-size:.75rem; color:var(--text-muted); font-weight:600; }
.ti-form .field-hint{ margin:0; }
/* Graphe temps de réponse (Phase F, uPlot) */
.nx-chart{ width:100%; margin-top:14px; min-height:60px; }
.nx-chart .uplot{ width:100%; font-family:var(--font-body); }
.chart-empty{ color:var(--text-muted); font-size:.8rem; text-align:center; padding:26px 4px; }
.resp-kpis{ display:flex; gap:30px; margin:2px 0 4px; }
.resp-kpi .k-val{ font-size:28px; }
.resp-kpi .kv{ margin:1px 0 0; }
.kv-row.stack .val code{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.badge-admin{ display:inline-flex; align-items:center; height:18px; margin-left:8px; padding:0 8px; border-radius:20px; font-size:.5625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--accent-tile); color:var(--accent); }
.susp{ display:inline-flex; align-items:center; margin-right:6px; color:var(--danger); }   /* admin au nom suspect (à gauche du nom) */
.susp svg{ width:14px; height:14px; }
.maint{ display:inline-flex; align-items:center; margin-right:6px; color:var(--ok); }        /* site maintenu (avant le drapeau) */
.maint svg{ width:14px; height:14px; }
.acc-id{ font-weight:700; color:var(--text-strong); }
.files{ display:flex; flex-direction:column; }
.file-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--card-border); }
.file-row:first-child{ padding-top:0; } .file-row:last-child{ border-bottom:none; padding-bottom:0; }
.file-row code{ font-family:var(--font-mono); font-size:.78125rem; color:var(--text-strong); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-chmod{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:7px; flex-shrink:0; }
.fr-chmod .bad{ color:var(--danger); font-style:normal; } .fr-chmod .motif{ color:var(--warn); font-style:normal; font-weight:700; }
.fr-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.fix-chmod{ height:26px; padding:0 10px; font-size:.72rem; }
/* Outil de correction des permissions (chmod par FTP) */
.chmod-tool{ display:flex; flex-direction:column; gap:6px; margin-top:14px; padding-top:13px; border-top:1px solid var(--card-border); }
.chmod-key{ width:100%; resize:vertical; font-family:var(--font-mono); font-size:.72rem; line-height:1.4; }
.chmod-msg:empty, .deploy-test-msg:empty{ display:none; }
.chmod-msg, .deploy-test-msg{ font-size:.78rem; }
.chmod-msg.ok, .deploy-test-msg.ok{ color:var(--ok); }
.chmod-msg.error, .deploy-test-msg.error{ color:var(--danger); }
.chmod-msg.muted, .deploy-test-msg.muted{ color:var(--text-muted); }
.deploy-test-msg{ margin-right:6px; }
/* Confinement (Phase D) */
.conf-sub{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin:16px 0 8px; display:flex; align-items:center; gap:7px; }
.conf-sub svg{ width:13px; height:13px; }
.conf-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 13px; border-radius:var(--radius); background:color-mix(in oklab, var(--danger) 9%, transparent); border:1px solid color-mix(in oklab, var(--danger) 26%, transparent); color:var(--danger); font-size:.8rem; font-weight:600; }
.conf-banner svg{ width:16px; height:16px; flex-shrink:0; }
.conf-banner span{ flex:1; min-width:12rem; }
.conf-key{ width:100%; resize:vertical; font-family:var(--font-mono); font-size:.72rem; line-height:1.4; margin-top:14px; }
.conf-msg:empty{ display:none; }
.conf-msg{ font-size:.78rem; margin-top:6px; display:block; }
.conf-msg.ok{ color:var(--ok); } .conf-msg.error{ color:var(--danger); } .conf-msg.muted{ color:var(--text-muted); }
.wf-stale{ color:var(--warn); font-weight:600; }

/* Réglages → E-mail (SMTP) */
.set-row{ display:flex; gap:16px; flex-wrap:wrap; }
.set-row .field-group{ flex:1; min-width:170px; }
.smtp-msg, .smtp-test-msg{ font-size:.82rem; }
.smtp-msg.ok, .smtp-test-msg.ok{ color:var(--ok); }
.smtp-msg.error, .smtp-test-msg.error{ color:var(--danger); }

/* Config : fichier imposé (verrouillé) + chmod optionnel */
.opt-list .wf-locked{ opacity:.92; }
.tag.imposed{ background:color-mix(in oklab, var(--accent) 14%, transparent); color:var(--accent); border:none; }
.wf-chk{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--text-muted); white-space:nowrap; }
/* Case à cocher stylée (remplace l'apparence native du navigateur) */
.chk{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-muted); cursor:pointer; user-select:none; white-space:nowrap; }
.chk input{ position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.chk .chk-box{ width:16px; height:16px; flex-shrink:0; border:1.5px solid var(--field-border); border-radius:4px;
  background:var(--field-bg); display:inline-grid; place-items:center; transition:background .15s, border-color .15s; }
.chk .chk-box::after{ content:''; width:4px; height:8px; margin-top:-1px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg); opacity:0; transition:opacity .12s; }
.chk:hover .chk-box{ border-color:var(--accent); }
.chk input:checked + .chk-box{ background:var(--accent); border-color:var(--accent); }
.chk input:checked + .chk-box::after{ opacity:1; }
.chk input:focus-visible + .chk-box{ outline:2px solid var(--accent); outline-offset:2px; }
.wf-hint{ font-size:.74rem; margin:6px 2px 0; }

/* Encart « Dossiers racine » (WordPress) */
.rootdirs{ display:flex; flex-direction:column; }
.rootdir-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--card-border); }
.rootdir-row:last-child{ border-bottom:none; padding-bottom:0; }
.rd-name{ display:flex; align-items:center; gap:8px; min-width:0; }
.rd-name code{ font-family:var(--font-mono); font-size:.8125rem; color:var(--text-strong); font-weight:700; }
.rd-ico{ width:14px; height:14px; flex-shrink:0; }
.rootdir-row.ok .rd-ico{ color:var(--ok); }
.rootdir-row.warn .rd-ico{ color:var(--danger); }
.rootdir-row.warn code{ color:var(--danger); }
.rootdir-row .fix-chmod, .rootdir-row .btn-secondary{ flex-shrink:0; }

/* Carte Comptes : validation des administrateurs (liste blanche) */
.accts{ display:flex; flex-direction:column; margin-top:6px; }
.acct-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--card-border); }
.acct-row:last-child{ border-bottom:none; padding-bottom:0; }
.acct-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.acct-top{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acct-id .acc-id{ font-family:var(--font-mono); font-weight:700; color:var(--text-strong); }
.acct-row .btn-secondary, .acct-row .btn-ghost{ flex-shrink:0; height:28px; padding:0 12px; font-size:.74rem; }
.acct-ctrl{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.acct-migrate{ margin-top:12px; padding:12px; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--card-bg-2); }
.acct-migrate .mig-from{ font-family:var(--font-mono); color:var(--text-strong); }
.an-rows{ display:flex; flex-direction:column; gap:8px; }
/* Analyse : repères temporels (rapide ⚡ / complète damier / prochaine horloge) + 1re alerte
   ouverte en bout (rouge/gras). Resserré sous le titre, un peu plus d'air avant le contenu. */
.an-times{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin:-8px 0 20px; }
.an-t{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.75rem; white-space:nowrap; }
.an-t svg{ width:13px; height:13px; flex-shrink:0; opacity:.85; }
.an-t.alert{ color:var(--danger); font-weight:700; }
.an-t.alert svg{ opacity:1; }
.an-t.run{ color:var(--accent); font-style:italic; }
.an-t.run svg{ opacity:1; animation:an-pulse 1.1s ease-in-out infinite; }
@keyframes an-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
.an-t.ina{ color:var(--warn); font-weight:600; }
.an-t.ina svg{ opacity:1; }
/* Analyse : groupes par catégorie, répartis en colonnes auto-équilibrées. */
.an-balanced{ columns:16rem; column-gap:var(--gap); }
.an-group{ break-inside:avoid; margin-bottom:16px; }
.an-group:last-child{ margin-bottom:0; }
.an-cat{ display:flex; align-items:center; gap:7px; font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin:0 0 8px; }
.an-cat .n{ color:var(--text); background:var(--icon-tile); border-radius:20px; padding:0 7px; font-size:.625rem; letter-spacing:0; }
.an-balanced .an-row{ margin-bottom:8px; }
.an-balanced .an-row:last-child{ margin-bottom:0; }
.an-row{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px 14px; border-radius:var(--radius); }
.an-row.warning{ background:color-mix(in oklab, var(--warn) 7%, transparent); border:1px solid color-mix(in oklab, var(--warn) 18%, transparent); }
.an-row.critical{ background:color-mix(in oklab, var(--danger) 8%, transparent); border:1px solid color-mix(in oklab, var(--danger) 20%, transparent); }
.an-row .msg{ font-family:var(--font-mono); font-size:.75rem; color:var(--text); line-height:1.5; }
.sev{ display:inline-flex; align-items:center; height:21px; padding:0 11px; border-radius:20px; font-size:.59375rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; flex-shrink:0; }
.sev.warning{ background:color-mix(in oklab, var(--warn) 18%, transparent); color:var(--warn); }
.sev.critical{ background:color-mix(in oklab, var(--danger) 18%, transparent); color:var(--danger); }
.an-ok{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:var(--radius); background:color-mix(in oklab, var(--ok) 8%, transparent); border:1px solid color-mix(in oklab, var(--ok) 22%, transparent); color:#2E8B66; font-size:.78125rem; font-weight:600; }
.an-ok svg{ width:16px; height:16px; flex-shrink:0; }
html:not([data-theme="light"]) .an-ok{ color:var(--ok); }
.how{ margin-top:14px; }
/* Résumé = action (déplier) → présenté comme un bouton, pas un lien. */
.how summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border:1px solid var(--field-border); border-radius:var(--radius); background:transparent; color:var(--text); font-size:.78125rem; font-weight:600; }
.how summary:hover{ border-color:var(--accent); color:var(--accent); }
.how summary::-webkit-details-marker{ display:none; }
.how p, .how ul{ color:var(--text-muted); font-size:.8125rem; margin:11px 0 0; line-height:1.5; }
}

/* ---- COMPAT : classes héritées (à migrer/retirer) -------- */
@layer compat {
/* Le champ de recherche topbar n'est PAS un input de formulaire : on annule le cadre,
   la hauteur et le padding propres de input[type=text] (couche components, qui l'emporte
   sur le reset de la couche shell). Sinon double bordure dans la pastille .tb-search +
   double trait de focus. La pastille .tb-search est le seul cadre ; son focus-within
   (bordure accent) est l'unique trait de focus. */
.tb-search input{ border:none; background:transparent; height:auto; padding:0; }
.opt-list{ list-style:none; margin:0; padding:0; }
.opt-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--card-border); font-size:.84375rem; }
.opt-list li:last-child{ border-bottom:none; }
#config-error{ color:var(--danger); }
.key-out{ white-space:pre-wrap; word-break:break-all; background:var(--field-bg); border:1px solid var(--danger); border-radius:var(--radius); padding:.6rem; font-size:.78rem; max-height:16rem; overflow:auto; }
.env-add input{ width:100%; }
.env-add{ gap:.5rem; align-items:center; } .env-add #new-key{ max-width:16rem; }
/* Desktop (vraie table) : fond léger sur les cellules + trait sur la 1re. En MOBILE (cartes),
   ces règles sont neutralisées → le fond et le trait sont portés par la carte (tr), une seule fois. */
@media (min-width:641px){
  tr.row-alert td{ background:color-mix(in oklab, var(--danger) 6%, transparent); }
  tr.row-critical td:first-child{ box-shadow:inset 3px 0 0 var(--danger); }
  tr.row-warning td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
}

/* ---- A11Y : focus clavier + mouvement réduit ------------- */
@layer a11y {
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
/* Recherche : un SEUL trait de focus = la bordure du cadre (.tb-search:focus-within).
   On supprime l'outline du champ ici, en couche a11y, sinon le :focus-visible global
   (couche postérieure) le rajoute → double trait. */
.tb-search input:focus-visible{ outline:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}
}

/* ---- Réglages → Santé (journal technique) ---------------- */
.health-filter{ margin-bottom:14px; }
.health-flt.active{ outline:2px solid var(--accent); outline-offset:1px; }
.health-group .hg-counts{ font-size:.8rem; font-weight:400; color:var(--muted); margin-left:8px; }
.health-row{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-top:1px solid var(--border); font-size:.9rem; }
.health-row:first-of-type{ border-top:0; }
.hl-ico{ flex:0 0 1.1em; }
.hl-when{ flex:0 0 9.5em; color:var(--muted); font-family:var(--font-mono); font-size:.82rem; }
.hl-src{ flex:0 0 5.5em; color:var(--muted); text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; }
.hl-msg{ flex:1 1 auto; }
.hl-count{ color:var(--muted); font-size:.8rem; }
.hl-detail{ display:block; color:var(--muted); font-size:.82rem; font-family:var(--font-mono); }
.hl-explain{ display:block; margin-top:4px; color:var(--text-muted); font-size:.82rem; line-height:1.45; }
.hl-error .hl-ico{ color:var(--danger); }
.hl-warning .hl-ico{ color:#d9920a; }
.hl-del{ flex:0 0 auto; align-self:flex-start; margin-left:8px; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:50%; background:transparent; color:var(--muted); font-size:.95rem; line-height:1; cursor:pointer; transition:all .15s; }
.hl-del:hover{ color:var(--danger); border-color:var(--danger); }
.hl-del:disabled{ opacity:.4; cursor:default; }