/* Advigo — système visuel digital v4.0 « l'orbe annelé »
   Source produit : docs/design-system.md, dérivé de la charte graphique v4.
   Deux ciels : Jour (light, papier) et Nuit (dark, digital). Le parcours
   client et la page légale restent en Jour ; les surfaces pro (staff,
   dashboard, admin, hq) portent une bascule Jour/Nuit (assets/theme.js).
   brand.css est chargé APRÈS le Tailwind de chaque front : il peut donc
   remapper les utilitaires courants vers les jetons de thème. */

/* ─── PALETTE v4 (invariante) ──────────────────────────────────────────────── */
:root {
  --nuit:        #101A45;   /* socle, encre, ciel digital */
  --bleu-orbite: #2A6FDB;   /* liens, accent, statut occupé, bas de l'orbe */
  --vert:        #4ADE80;   /* action, cœur de l'orbe (texte SUR nuit) */
  --vert-deep:   #157A4D;   /* vert texte/CTA sur fond clair */
  --menthe:      #7EE8AC;   /* lueur, haut de l'orbe */
  --voile:       #F4F6FB;   /* ciel de jour, fonds clairs */
  --ambre:       #F59E0B;
  --rouge:       #DC2626;
  /* Deux rôles de police (passe 130). `--font-produit` est le texte,
     `--font-logo` le logotype et lui seul. Le défaut reste Plus Jakarta Sans
     partout ; le parcours client bascule son texte sur Inter, les surfaces pro
     suivront quand chacune sera reprise. Un seul endroit à changer. */
  --font-produit: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-logo:    'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  /* neutres teintés nuit */
  --n-700: #3A4266;
  --n-500: #6B7391;
  --n-400: #A7ADC4;
  --n-300: #D7DBE8;
  --n-200: #EEF0F7;
}

/* ─── THÈME JOUR (défaut) ───────────────────────────────────────────────────── */
:root, :root[data-theme='light'] {
  color-scheme: light;
  --bg:            var(--voile);
  --bg-glow:       transparent;
  --surface:       rgba(255, 255, 255, .66);
  --surface-solid: #FFFFFF;
  --surface-2:     rgba(255, 255, 255, .82);
  --panel:         rgba(255, 255, 255, .76);
  --ink:           var(--nuit);
  --ink-soft:      var(--n-700);
  --ink-mute:      var(--n-500);
  --line:          rgba(16, 26, 69, .09);
  --line-strong:   rgba(16, 26, 69, .16);
  --brand:         var(--vert-deep);   /* vert lisible sur clair */
  --brand-solid:   var(--vert-deep);
  --accent:        var(--bleu-orbite);
  --arc-1:         rgba(42, 111, 219, .18);
  --arc-2:         rgba(42, 111, 219, .10);
  --arc-3:         rgba(42, 111, 219, .06);
  --glass:         rgba(255, 255, 255, .66);
  --glass-hi:      inset 0 1.5px 0 rgba(255, 255, 255, .9);
  --shadow:        inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 12px 40px rgba(16, 26, 69, .08);
  --shadow-raised: 0 18px 48px rgba(16, 26, 69, .14);
  --focus-ring:    0 0 0 4px rgba(42, 111, 219, .22);
  --radius:        18px;
  --tap:           44px;
}

/* ─── THÈME NUIT (bascule sur les surfaces pro) ─────────────────────────────── */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg:            var(--nuit);
  --bg-glow:       rgba(74, 222, 128, .18);
  --surface:       rgba(255, 255, 255, .07);
  --surface-solid: #16204D;
  --surface-2:     rgba(255, 255, 255, .10);
  --panel:         rgba(255, 255, 255, .08);
  --ink:           #FFFFFF;
  --ink-soft:      rgba(255, 255, 255, .78);
  --ink-mute:      rgba(255, 255, 255, .58);
  --line:          rgba(255, 255, 255, .14);
  --line-strong:   rgba(255, 255, 255, .22);
  --brand:         var(--vert);        /* vert vif lisible sur nuit */
  --brand-solid:   var(--vert);
  --accent:        #6FA0F0;
  --arc-1:         rgba(74, 222, 128, .24);
  --arc-2:         rgba(74, 222, 128, .13);
  --arc-3:         rgba(74, 222, 128, .07);
  --glass:         rgba(255, 255, 255, .07);
  --glass-hi:      inset 0 1.5px 0 rgba(255, 255, 255, .12);
  --shadow:        inset 0 1.5px 0 rgba(255, 255, 255, .12), 0 14px 44px rgba(0, 0, 0, .5);
  --shadow-raised: 0 20px 54px rgba(0, 0, 0, .6);
  --focus-ring:    0 0 0 4px rgba(74, 222, 128, .30);
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ─── SOCLE DE SURFACE ──────────────────────────────────────────────────────── */
body.advigo-surface {
  min-height: 100vh;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(72% 55% at 50% -12%, var(--bg-glow) 0%, transparent 62%),
    var(--bg) !important;
  font-family: var(--font-produit) !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.advigo-surface ::selection { color: var(--ink); background: rgba(74, 222, 128, .26); }

body.advigo-surface :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand) !important;
  outline-offset: 3px;
}
/* Les titres reçoivent le focus lors d'un changement d'écran pour être
   annoncés, mais ne sont pas des commandes interactives. */
body.advigo-surface :is(h1, h2)[tabindex='-1']:focus-visible { outline: none !important; }

body.advigo-surface :where(button, [role='button'], a) { -webkit-tap-highlight-color: transparent; }
body.advigo-surface button,
body.advigo-surface input,
body.advigo-surface select,
body.advigo-surface textarea { font-family: inherit; }
body.advigo-surface h1,
body.advigo-surface h2,
body.advigo-surface h3 { letter-spacing: -.02em; }
/* La charte fixe 12 px comme plancher de lecture, y compris pour les anciens
   utilitaires arbitraires restés dans les templates. */
body.advigo-surface :is(
  [class~='text-[9px]'], [class~='text-[10px]'], [class~='text-[10.5px]'],
  [class~='text-[11px]'], [class~='text-[11.5px]']
) { font-size: 12px !important; }

body.advigo-surface button:disabled,
body.advigo-surface [aria-disabled='true'] {
  cursor: not-allowed !important;
  opacity: .55;
  box-shadow: none !important;
}

/* Le motif d'orbite : lueur menthe ancrée en haut + un arc elliptique incliné
   à −18°, sous tout le contenu. Une seule lueur par écran (charte v4). */
body.advigo-surface::before {
  content: '';
  position: fixed;
  z-index: -2;
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  left: 48%;
  top: -360px;
  border-radius: 50%;
  background: var(--bg-glow);
  filter: blur(72px);
  pointer-events: none;
}
body.advigo-surface::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 1180px;
  height: 402px;
  right: -610px;
  top: -118px;
  transform: rotate(-18deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      transparent 0 30%,
      var(--arc-1) 30.15% 30.42%,
      transparent 30.58% 47%,
      var(--arc-2) 47.15% 47.42%,
      transparent 47.58% 69%,
      var(--arc-3) 69.15% 69.42%,
      transparent 69.58% 100%);
  pointer-events: none;
}

/* ─── LOGOTYPE « l'orbe annelé » ────────────────────────────────────────────── */
/* Markup : <span class="advigo-lockup"><span>advig</span><svg class="adv-orb">…</svg></span>
   Le mot est bas-de-casse, 700, interlettre −2 %. L'orbe est le « o » final. */
.advigo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: none;
  font-size: 27px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-logo);
}
.advigo-lockup > span:first-child {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -.02em;
}
.advigo-lockup .adv-orb {
  /* Proportions officielles : 66 × 53 pour un mot de 58 px. La taille doit
     être calculée sur le lockup, pas sur les 16 px hérités de la page. */
  width: 1.14em;
  height: .92em;
  margin-left: -.14em;
  overflow: visible;
  flex: none;
  transform: translateY(.08em);
}
.advigo-lockup.compact { font-size: 25px; }
.advigo-lockup.prominent { font-size: 34px; }
/* L'orbe s'allume seulement en Nuit ; net à l'impression et en Jour. */
:root[data-theme='dark'] .advigo-lockup .adv-orb { filter: drop-shadow(0 0 10px rgba(74, 222, 128, .45)); }
:root[data-theme='dark'] .advigo-lockup.prominent .adv-orb { filter: drop-shadow(0 0 13px rgba(74, 222, 128, .48)); }
/* En Nuit, la charte ouvre légèrement les extrémités blanches de l'anneau.
   Dégradés d'occlusion à 5 stops : extrémités, épaules, creux derrière l'orbe. */
:root[data-theme='dark'] .advigo-lockup [id$='RingBack'] stop:first-child,
:root[data-theme='dark'] .advigo-lockup [id$='RingBack'] stop:last-child { stop-opacity: .62; }
:root[data-theme='dark'] .advigo-lockup [id$='RingBack'] stop:nth-child(2),
:root[data-theme='dark'] .advigo-lockup [id$='RingBack'] stop:nth-child(4) { stop-opacity: .36; }
:root[data-theme='dark'] .advigo-lockup [id$='RingBack'] stop:nth-child(3) { stop-opacity: .16; }
:root[data-theme='dark'] .advigo-lockup [id$='RingFront'] stop:first-child,
:root[data-theme='dark'] .advigo-lockup [id$='RingFront'] stop:last-child { stop-opacity: .62; }
/* Les deux arcs portent leurs dégradés d'occlusion directement dans le SVG ;
   `currentColor` les fait passer automatiquement de Nuit à blanc. */

/* ─── VERRE, BOUTON, KICKER ─────────────────────────────────────────────────── */
.advigo-glass {
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
}

.advigo-primary {
  color: #08331E !important;
  background: var(--vert) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(74, 222, 128, .32) !important;
  font-weight: 800;
}
.advigo-primary:not(:disabled) { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.advigo-primary:not(:disabled):active { transform: translateY(1px) scale(.99); box-shadow: 0 4px 14px rgba(74, 222, 128, .26) !important; }

.advigo-kicker {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─── BASCULE JOUR / NUIT ───────────────────────────────────────────────────── */
.advigo-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.advigo-theme-toggle:hover { color: var(--ink); transform: translateY(-1px); }
.advigo-theme-toggle:active { transform: translateY(0) scale(.94); }
.advigo-theme-toggle svg { width: 18px; height: 18px; }
/* Icône soleil en Jour, lune en Nuit (l'une masque l'autre). */
.advigo-theme-toggle .ico-sun { display: none; }
.advigo-theme-toggle .ico-moon { display: block; }
:root[data-theme='dark'] .advigo-theme-toggle .ico-sun { display: block; }
:root[data-theme='dark'] .advigo-theme-toggle .ico-moon { display: none; }

/* ─── CONNEXION : écran commun à toutes les surfaces pro ───────────────────── */
/* Plein ciel, carte de verre centrée, lockup en tête, action verte. Aucune
   bascule Jour/Nuit avant la connexion : l'option n'existe qu'une fois dans
   l'app — l'écran d'accès est un moment de marque, un seul ciel à la fois. */
.advigo-login {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px 16px;
  background:
    radial-gradient(72% 55% at 50% -12%, var(--bg-glow) 0%, transparent 62%),
    var(--bg);
}
.advigo-login.hidden, .advigo-login[hidden] { display: none !important; }
.advigo-login__card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 32px 28px 28px;
  border-radius: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
}
.advigo-login__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  text-align: center;
}
.advigo-login__head .advigo-lockup { font-size: 34px; }
.advigo-login__hint {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-mute);
  text-wrap: pretty;
}
.advigo-login label {
  display: block;
  margin: 13px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.advigo-login input,
.advigo-login select {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
}
.advigo-login .advigo-inline-alert { margin-top: 10px; }
.advigo-login__submit {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  font-size: 15px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}
.advigo-login__err { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--rouge); }
.advigo-login__err.hidden { display: none; }

/* ─── ÉTATS PARTAGÉS (mêmes retours sur toutes les surfaces) ────────────────── */
.advigo-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.advigo-inline-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 12px; font-weight: 650; line-height: 1.45;
}
.advigo-inline-alert::before {
  content: ''; width: 8px; height: 8px; margin-top: 4px; flex: none;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(42, 111, 219, .12);
}
.advigo-inline-alert[data-tone='success']::before { background: var(--vert-deep); box-shadow: 0 0 0 4px rgba(21, 122, 77, .12); }
.advigo-inline-alert[data-tone='warning']::before { background: var(--ambre); box-shadow: 0 0 0 4px rgba(245, 158, 11, .14); }
.advigo-inline-alert[data-tone='error'] { color: #991b1b; background: rgba(254, 242, 242, .92); border-color: rgba(220, 38, 38, .18); }
.advigo-inline-alert[data-tone='error']::before { background: var(--rouge); box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
:root[data-theme='dark'] .advigo-inline-alert[data-tone='error'] { color: #FCA5A5; background: rgba(220, 38, 38, .14); }

.advigo-sync {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-mute); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.advigo-sync::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--n-400); }
.advigo-sync[data-state='ok']::before { background: var(--vert); box-shadow: 0 0 0 3px rgba(74, 222, 128, .14); }
.advigo-sync[data-state='loading']::before { background: var(--ambre); animation: advigo-pulse 1.1s ease-in-out infinite; }
.advigo-sync[data-state='error'] { color: var(--rouge); }
.advigo-sync[data-state='error']::before { background: var(--rouge); }

.advigo-skeleton {
  overflow: hidden; color: transparent !important;
  background: var(--surface-2) !important;
  border-color: transparent !important;
  animation: advigo-skeleton-pulse 1.1s ease-in-out infinite;
}

.advigo-empty-state {
  padding: clamp(24px, 5vw, 44px) 18px; text-align: center; color: var(--ink-mute);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.advigo-empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 14px; }

.advigo-toast {
  max-width: min(420px, calc(100vw - 24px));
  color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; background: rgba(16, 26, 69, .96);
  box-shadow: var(--shadow-raised); line-height: 1.4; white-space: normal;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.advigo-toast[data-tone='error'] { background: rgba(153, 27, 27, .96); }

@keyframes advigo-pulse { 50% { opacity: .42; transform: scale(.82); } }
@keyframes advigo-skeleton-pulse { 50% { opacity: .52; } }

/* ─── CHARGEMENT DE MARQUE : SATELLITE EN ORBITE AUTOUR DE L'ORBE ──────────── */
/* La géométrie ne tourne jamais : l'anneau reste à −18° et l'orbe reste fixe.
   Un seul point incandescent parcourt l'orbite en 2,8 s (animateMotion), avec
   la cinématique projetée d'une orbite réelle — rapide au passage devant et
   derrière, lent aux extrémités (keyPoints = abscisse curviligne à angle
   uniforme). Voilé derrière l'orbe (clip arrière), plein feu devant. */
.advigo-orb-loader {
  position: relative;
  display: grid;
  width: 176px;
  height: 142px;
  place-items: center;
  color: var(--nuit);
}
.advigo-orb-loader.compact { width: 140px; height: 114px; }
.advigo-orb-loader svg { width: 100%; height: 100%; overflow: visible; }
.advigo-orb-loader__orb {
  transform-box: fill-box;
  transform-origin: center;
}
.advigo-orb-loader__ring,
.advigo-orb-loader__sat {
  transition: opacity .38s ease;
}
/* Copies avant/arrière strictement identiques : l'occlusion vient de la
   planète elle-même qui masque le satellite, jamais d'une atténuation
   artificielle — aucun saut visible aux jonctions des clips. */
.advigo-orb-loader__sat {
  color: var(--bleu-orbite);
  filter: drop-shadow(0 0 1.2px currentColor) drop-shadow(0 0 4.5px rgba(42, 111, 219, .6));
}
.advigo-orb-loader__sat-core { fill: currentColor; }
:root[data-theme='dark'] .advigo-orb-loader { color: #fff; }
:root[data-theme='dark'] .advigo-orb-loader__sat {
  color: var(--menthe);
  filter: drop-shadow(0 0 1.2px currentColor) drop-shadow(0 0 4.5px rgba(126, 232, 172, .75));
}
.advigo-orb-loader.is-idle .advigo-orb-loader__sat { opacity: 0; }
.advigo-orb-loader.is-idle .advigo-orb-loader__ring { opacity: .58; }

/* ─── CHAMPS DE FORMULAIRE ──────────────────────────────────────────────────── */
body.advigo-surface input,
body.advigo-surface select,
body.advigo-surface textarea {
  color: var(--ink);
  background-color: var(--surface-2);
  border-color: var(--line-strong);
}
body.advigo-surface input::placeholder,
body.advigo-surface textarea::placeholder { color: var(--ink-mute); }
body.advigo-surface input:focus,
body.advigo-surface select:focus,
body.advigo-surface textarea:focus {
  outline: none !important;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
body.advigo-surface select option {
  color: var(--ink);
  background: var(--surface-solid);
}
/* Chrome peut repeindre les champs mémorisés en blanc : on conserve le ciel
   actif, notamment pour le PIN vendeur en mode Nuit. */
body.advigo-surface input:-webkit-autofill,
body.advigo-surface input:-webkit-autofill:hover,
body.advigo-surface input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--surface-solid) inset, var(--focus-ring) !important;
  transition: background-color 9999s ease-out 0s;
}
body.advigo-surface .field.err:focus {
  border-color: var(--rouge) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .20) !important;
}

/* Les tuiles d'icône du parcours client portent leur couleur en utilitaire ;
   la charte ne garde que l'héritage du trait, pour qu'une icône suive le texte
   de sa tuile sans qu'on l'y peigne deux fois. */
body[data-app='client'] .client-success-icon svg :is(path, circle) {
  stroke: currentColor !important;
}
body[data-app='client'] .client-success-icon svg circle[fill] {
  fill: currentColor !important;
  stroke: none !important;
}
body.advigo-surface [class*='from-gray-9'],
body.advigo-surface [class*='from-slate-8'] { background-color: var(--nuit) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   MODE NUIT — remap des utilitaires Tailwind sur les surfaces pro
   Les fronts staff/dashboard/admin/hq ont des classes en dur (bg-white,
   text-gray-*, border-gray-*). En Nuit, on les rebranche sur les jetons de
   thème. Le client et la page légale ne sont JAMAIS ciblés (Jour imposé).
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='bg-white'], [class~='bg-white/55'], [class~='bg-white/70'], [class~='bg-white/80'], [class~='bg-white/90'],
  [class~='bg-gray-50'], [class~='bg-gray-50/50'], [class~='bg-gray-50/60'], [class~='bg-gray-50/70'],
  [class~='bg-slate-50'], [class~='bg-gray-100'], [class~='bg-slate-100']) {
  background-color: var(--surface-solid) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='bg-gray-200'], [class~='bg-gray-200/70'], [class~='bg-gray-100/80']) {
  background-color: rgba(255, 255, 255, .10) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='text-gray-900'], [class~='text-gray-800'], [class~='text-slate-900'], [class~='text-black']) {
  color: var(--ink) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='text-gray-700'], [class~='text-gray-600']) {
  color: var(--ink-soft) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='text-gray-500'], [class~='text-gray-400']) {
  color: var(--ink-mute) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class*='border-gray-1'], [class*='border-gray-2'], [class*='border-gray-3'], [class~='border-slate-200'], [class~='divide-gray-100'], [class~='divide-gray-200']) {
  border-color: var(--line) !important;
}
/* tables denses en nuit */
:root[data-theme='dark'] :is([data-app='dashboard'], [data-app='hq']) table { background: rgba(255, 255, 255, .04) !important; }
:root[data-theme='dark'] :is([data-app='dashboard'], [data-app='hq']) :is(th, td) { border-color: var(--line) !important; }
/* pastilles vertes claires → verre menthe */
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
  [class~='bg-green-600/10'], [class~='bg-green-50'], [class~='bg-green-100']) {
  background-color: rgba(74, 222, 128, .16) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHROME PAR SURFACE — piloté par les jetons de thème (Jour ↔ Nuit)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Client : vitrine mobile, TOUJOURS en Jour (verre clair, une lueur menthe). */
body[data-app='client'] { color-scheme: light; }
body[data-app='client']::before { display: none; }
body[data-app='client'][data-screen='s-reco']::after { display: none; }
body[data-app='client'] .phone {
  background: rgba(244, 246, 251, .92) !important;
  border-color: rgba(16, 26, 69, .08) !important;
  box-shadow: 0 32px 90px rgba(16, 26, 69, .20) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  backdrop-filter: blur(30px) saturate(1.45);
}
body[data-app='client'] .client-topbar { padding-top: calc(1rem + env(safe-area-inset-top)) !important; }
body[data-app='client'] .client-topbar .advigo-lockup { font-size: 26px; }
body[data-app='client'] .q-opt,
body[data-app='client'] #r-card {
  background: rgba(255, 255, 255, .66) !important;
  border-color: rgba(16, 26, 69, .08) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 12px 40px rgba(16, 26, 69, .08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}
body[data-app='client'] .q-opt.picked {
  background: rgba(74, 222, 128, .12) !important;
  border-color: var(--vert-deep) !important;
}
body[data-app='client'] .q-opt { width: 100%; color: inherit; text-align: left; }
body[data-app='client'] .q-opt:active { transform: scale(.992); }
/* Le héros de l'accueil est le titre lui-même, dans un champ d'orbites
   léger : deux croissants d'arc fondus + le satellite, derrière le texte. */
body[data-app='client'] .client-network {
  position: absolute; z-index: 75;
  top: calc(60px + env(safe-area-inset-top)); left: 12px; right: 12px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
body[data-app='client'] .client-network.show { transform: none; opacity: 1; }

/* Staff : shell mobile à barre d'onglets (passe 57). Comme le dashboard et
   l'admin, la surface vendeur consomme désormais les jetons ci-dessus
   directement depuis son CSS compilé (frontend/build/staff.input.css) : plus
   aucun utilitaire Tailwind en dur à rattraper ici. brand.css ne garde que ce
   qui relève de la charte transverse. */
body[data-app='staff'] :is(.res-code-value, .day-value, .mission-timer) {
  font-variant-numeric: tabular-nums;
}

/* Dashboard : shell à menu vertical (passe 53). Le chrome et les composants
   vivent dans le CSS compilé du front (frontend/build/dashboard.input.css), qui
   consomme directement les jetons ci-dessus ; brand.css ne garde ici que ce qui
   relève de la charte transverse. */
body[data-app='dashboard'] .advigo-live-dot { background: var(--vert); }
/* Chiffres alignés : un KPI se lit en colonne, jamais en zigzag. */
body[data-app='dashboard'] :is(.stat-value, .hero-value, .decision-card-value, .funnel-step-count) {
  font-variant-numeric: tabular-nums;
}
/* Un aperçu d'affiche est déjà un objet papier : il reste en Jour, même
   lorsque le reste du dashboard est en Nuit. */
:root[data-theme='dark'] body[data-app='dashboard'] .qr-poster {
  color-scheme: light;
  color: #101A45 !important;
  background: #FFFFFF !important;
  border-color: rgba(16, 26, 69, .14) !important;
}
:root[data-theme='dark'] body[data-app='dashboard'] .qr-poster :is(.text-gray-900, .text-gray-800) { color: #101A45 !important; }
:root[data-theme='dark'] body[data-app='dashboard'] .qr-poster :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: #6B7391 !important; }
:root[data-theme='dark'] body[data-app='dashboard'] .qr-poster .adv-ring { stroke: #101A45; }
/* Le lockup pose sa propre encre : sur l'aperçu papier, il doit repasser en
   Nuit (sinon le mot « advig » est blanc sur blanc) et perdre sa lueur. */
body[data-app='dashboard'] .qr-poster .advigo-lockup { color: #101A45 !important; }
body[data-app='dashboard'] .qr-poster .advigo-lockup .adv-orb { filter: none !important; }

/* Admin : mêmes plans, panneaux métier plus opaques. */
body[data-app='admin'] header,
body[data-app='admin'] #login-view > div,
body[data-app='admin'] #guide-config,
body[data-app='admin'] #team-view,
body[data-app='admin'] #products-panel,
body[data-app='admin'] .modal-backdrop > div {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
}
body[data-app='admin'] #btn-guide-generate {
  color: var(--brand) !important;
  background: rgba(74, 222, 128, .10) !important;
  border-color: rgba(74, 222, 128, .28) !important;
}
body[data-app='admin'] .view-header { gap: 12px; }
body[data-app='admin'] header { padding-top: calc(.75rem + env(safe-area-inset-top)) !important; }
:root[data-theme='dark'] body[data-app='admin'] :is(.product-row, .team-row) {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
:root[data-theme='dark'] body[data-app='admin'] :is(.product-row, .team-row):hover {
  background: rgba(255, 255, 255, .13) !important;
  border-color: rgba(126, 232, 172, .34) !important;
}
:root[data-theme='dark'] body[data-app='admin'] .product-row.is-open {
  background: rgba(74, 222, 128, .12) !important;
  border-color: rgba(126, 232, 172, .38) !important;
}

/* Les quatre accès professionnels partagent désormais la même porte d'entrée. */
body[data-app='staff'] #login-view > div,
body[data-app='dashboard'] #login-screen > div,
body[data-app='admin'] #login-view > div,
body[data-app='hq'] #login .box {
  border-radius: 24px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-raised) !important;
}

/* HQ : back-office propriétaire. */
body[data-app='hq'] #login { background: transparent !important; }
body[data-app='hq'] #login .box { position: relative; }
body[data-app='hq'] #login .login-theme { position: absolute; top: 18px; right: 18px; }
body[data-app='hq'] #login .box,
body[data-app='hq'] header.top,
body[data-app='hq'] nav.tabs,
body[data-app='hq'] .kpi,
body[data-app='hq'] .card,
body[data-app='hq'] .modal {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
}
body[data-app='hq'] .kpi.accent {
  background: var(--vert) !important; color: #08331E !important;
  box-shadow: 0 8px 24px rgba(74, 222, 128, .32) !important;
}
body[data-app='hq'] table { background: var(--surface-2); }
/* HQ pilote son propre système de variables inline : en Nuit on le rebranche
   d'un bloc (texte, neutres, fonds) — tout son CSS suit automatiquement. */
:root[data-theme='dark'] body[data-app='hq'] {
  --ink: #FFFFFF;
  --muted: rgba(255, 255, 255, .60);
  --line: rgba(255, 255, 255, .14);
  --bg: #101A45;
  --card: #16204D;
  --slate-l: rgba(255, 255, 255, .08);
  --green: #4ADE80;
  --green-l: rgba(74, 222, 128, .18);
}
:root[data-theme='dark'] body[data-app='hq'] nav.tabs button.active { color: var(--vert); border-bottom-color: var(--vert); }
:root[data-theme='dark'] body[data-app='hq'] :is(tbody tr:hover, .action-item) {
  color: var(--ink);
  background: var(--surface-2) !important;
}

/* Les anciens utilitaires de hover ne connaissent pas les jetons Jour/Nuit.
   Ces états interactifs restent donc sur une élévation discrète du plan actif,
   sans flash blanc ni plongée noire. */
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
    [class~='hover:bg-gray-50'], [class~='hover:bg-gray-50/60'],
    [class~='hover:bg-gray-100'], [class~='hover:bg-gray-200'],
    [class~='hover:bg-gray-900/5'], [class~='hover:bg-white']
  ):hover {
    color: var(--ink) !important;
    background: var(--surface-2) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
    [class~='hover:text-gray-900'], [class~='hover:text-gray-700'], [class~='hover:text-gray-600']
):hover { color: var(--ink) !important; }
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) [class~='hover:border-green-600']:hover {
  border-color: var(--vert) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
    [class~='hover:border-gray-300'], [class~='hover:border-gray-400']
):hover { border-color: var(--line-strong) !important; }
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) [class~='hover:border-blue-400']:hover {
  border-color: var(--bleu-orbite) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) [class~='hover:text-green-700']:hover {
  color: var(--vert) !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) [class~='hover:text-red-600']:hover {
  color: #F87171 !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) [class~='hover:border-red-600']:hover {
  border-color: #F87171 !important;
}
:root[data-theme='dark'] :is([data-app='staff'], [data-app='dashboard'], [data-app='admin'], [data-app='hq']) :is(
    [class~='hover:bg-green-50'], [class~='hover:bg-green-600/5']
):hover { background: rgba(74, 222, 128, .14) !important; }
/* Page légale : même langage, Jour imposé, matière calme. */
body[data-app='legal'] { color-scheme: light; }
body[data-app='legal'] .essentiel,
body[data-app='legal'] .card,
body[data-app='legal'] table,
body[data-app='legal'] .back {
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 12px 40px rgba(16, 26, 69, .08);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}

@media (hover: hover) {
  .advigo-primary:not(:disabled):hover {
    transform: translateY(-1px); filter: saturate(1.06);
    box-shadow: 0 11px 30px rgba(74, 222, 128, .36) !important;
  }
  body.advigo-surface :is(button, a)[class~='bg-green-600']:not(:disabled):hover,
  body.advigo-surface :is(button, a)[class~='bg-green-700']:not(:disabled):hover {
    filter: brightness(1.035) saturate(1.05);
  }
  body[data-app='client'] .q-opt:hover { border-color: rgba(74, 222, 128, .4) !important; }
}

@media (max-width: 640px) {
  body.advigo-surface::after { right: -720px; top: -132px; }
  body.advigo-surface::before {
    width: 120vw; height: 120vw; left: -10vw; top: -55vw; filter: blur(52px);
  }
  .advigo-lockup { font-size: 25px; }
  .advigo-lockup.compact { font-size: 24px; }
  .advigo-lockup.prominent { font-size: 32px; }
  body[data-app='client'] .client-topbar .advigo-lockup { font-size: 26px; }

  .advigo-glass,
  body[data-app='client'] .phone,
  body[data-app='dashboard'] .dash-topbar,
  body[data-app='dashboard'] .side,
  body[data-app='dashboard'] .card,
  body[data-app='dashboard'] .decision-card {
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
  body[data-app='admin'] .view-header { align-items: flex-start; }
  body[data-app='admin'] .view-header > :last-child { max-width: 100%; }
  body[data-app='admin'] header button,
  body[data-app='admin'] .modal-backdrop button,
  body[data-app='hq'] button { min-height: var(--tap); }
  body[data-app='hq'] header.top { align-items: flex-start; gap: 10px; padding: 13px 14px; }
  body[data-app='hq'] nav.tabs { overflow-x: auto; padding-inline: 8px; scrollbar-width: none; }
  body[data-app='hq'] nav.tabs::-webkit-scrollbar { display: none; }
  body[data-app='hq'] main { padding: 16px 12px 36px; }
  body[data-app='hq'] .card { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* Le satellite SMIL ignore les propriétés d'animation CSS : on le voile. */
  .advigo-orb-loader__sat { opacity: 0 !important; }
}

/* Impression : plein jour, aucune lueur ni verre (régime papier de la charte). */
@media print {
  :root, :root[data-theme='dark'] { color-scheme: light; }
  body.advigo-surface { color: #101A45 !important; background: #fff !important; }
  body.advigo-surface::before,
  body.advigo-surface::after { display: none; }
  .advigo-glass,
  body[data-app] :is(header, nav, .card, .kpi, .phone, .modal, .box, .essentiel, table) {
    background: #fff !important;
    color: #101A45 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-app='dashboard'] .qr-poster,
  body[data-app='dashboard'] .qr-poster * { color: #101A45 !important; }
  .advigo-lockup .adv-orb { filter: none !important; }
}