/* ==========================================================================
   VTD BOT — MODE CLAIR
   ==========================================================================
   Chargé EN DERNIER, après toutes les autres feuilles. Ce n'est pas un détail :
   ces règles reprennent des sélecteurs déclarés ailleurs, à spécificité égale.
   À spécificité égale, c'est la DERNIÈRE déclarée qui gagne — chargée avant,
   cette feuille serait silencieusement sans effet.

   PRINCIPE. Le mode clair n'est pas le mode sombre inversé. La hiérarchie ne
   vient plus d'aplats gris plus ou moins clairs, mais de trois choses : le blanc
   franc des cartes, une bordure d'un cheveu, et une ombre presque invisible
   (5 à 16 % d'alpha, contre 52 à 82 % en sombre). Le fond de page est
   légèrement teinté d'indigo — jamais #FFFFFF pur, qui éblouit et efface les
   cartes — pour que la carte blanche FLOTTE au-dessus du papier.

   AUCUN JETON N'EST RENOMMÉ : seules les VALEURS changent. --slate-600 reste la
   couleur des paragraphes, --paper reste le fond des cartes. Tout le code qui
   écrit var(--slate-600) continue de fonctionner sans être touché.

   DEUX SÉLECTEURS, et c'est voulu :
     · :root[data-theme="light"]                 → choix explicite de la personne
     · @media (prefers-color-scheme: light)      → réglage du système,
       MAIS gardé par :root:not([data-theme="dark"]), sinon un système en clair
       écraserait le choix explicite « sombre ».
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;
  --amber-200:       #F2D7A4;
  --amber-400:       #FFB020;
  --amber-50:        #FFE4B7;
  --amber-500:       #A4560A;
  --amber-600:       #7E3F06;
  --band:            rgba(255, 255, 255, .72);
  --bg:              var(--canvas);
  --blue-100:        #93BDFF;
  --blue-200:        #A9C8F8;
  --blue-300:        #5E9AEE;
  --blue-400:        #0B5BD3;
  --blue-50:         #D8E9FF;
  --blue-500:        #2E8FFF;
  --blue-600:        #1B7AF0;
  --blue-700:        #1463CC;
  --blue-800:        #0F4D9E;
  --blue-900:        #0C3C7A;
  --border:          #C9C5DC;
  --border-2:        #948DAF;
  --brand:           var(--blue-500);
  --brand-on-dark:   #7FBEFF;
  --brand-text:      #0D57C9;
  --canvas:          #F4F5FA;
  --edge-light:      inset 0 1px 0 rgba(255,255,255,.30);
  --glow-lg:         0 36px 96px -30px rgba(46,143,255,.26);
  --glow-md:         0 18px 46px -18px rgba(46,143,255,.22);
  --glow-sm:         0 10px 26px -12px rgba(46,143,255,.24);
  --glow-violet:     0 18px 46px -18px rgba(124,92,245,.26);
  --glow-xs:         0 4px 14px -6px rgba(46,143,255,.26);
  --grad-dot:        linear-gradient(140deg, #1B7AF0, #7C5CF5);
  --green-100:       #6CCE97;
  --green-200:       #A8DEC0;
  --green-50:        #CCEFDE;
  --green-500:       #0E7A4B;
  --green-600:       #0A6B41;
  --green-700:       #07512F;
  --hover-veil:      rgba(20,19,42,.06);
  --info-50:         #C7EFF3;
  --info-500:        #0A6E78;
  --ink:             #14132A;
  --ink-on-dark:     #F5F4FA;
  --ink-soft:        #2B2942;
  --on-brand:        #FFFFFF;
  --page-base:       #F6F6FB;
  --paper:           #FFFFFF;
  --red:             var(--red-500);
  --red-100:         #F4A89B;
  --red-200:         #F2B3AA;
  --red-50:          #FCE1DC;
  --red-500:         #C62A1C;
  --red-600:         #B02318;
  --red-700:         #8A1710;
  --ring:            0 0 0 2px var(--blue-600), 0 0 0 5px rgba(46,143,255,.20);
  --scrim:           rgba(18,15,36,.38);
  --sel-bg:          rgba(46,143,255,.22);
  --sel-fg:          var(--ink);
  --sh-blue:         0 14px 34px -14px rgba(46,143,255,.34);
  --sh-glow:         0 0 0 4px rgba(46,143,255,.18);
  --sh-lg:           0 24px 56px -20px rgba(20,19,42,.18), 0 8px 18px -10px rgba(20,19,42,.10);
  --sh-md:           0 8px 24px -8px rgba(20,19,42,.12), 0 2px 6px -2px rgba(20,19,42,.07);
  --sh-sm:           0 1px 2px rgba(20,19,42,.05), 0 2px 6px rgba(20,19,42,.05);
  --sh-violet:       0 14px 34px -14px rgba(124,92,245,.30);
  --sh-xs:           0 1px 2px rgba(20,19,42,.05);
  --sheen:           none;
  --slate-100:       #EFEFF7;
  --slate-200:       #DCDAEA;
  --slate-300:       #8B87A6;
  --slate-400:       #6A6787;
  --slate-50:        #F7F7FC;
  --slate-500:       #5E5B7C;
  --slate-600:       #4A4767;
  --slate-700:       #322F4A;
  --surface:         var(--paper);
  --surface-2:       var(--slate-50);
  --topbar-bg:       rgba(255,255,255,.82);
  --violet-100:      #C3AEFF;
  --violet-400:      #5B34D6;
  --violet-50:       #EBE2FF;
  --violet-500:      #6640E6;
  --violet-600:      #4B2FB8;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --amber-200:       #F2D7A4;
    --amber-400:       #FFB020;
    --amber-50:        #FFE4B7;
    --amber-500:       #A4560A;
    --amber-600:       #7E3F06;
    --band:            rgba(255, 255, 255, .72);
    --bg:              var(--canvas);
    --blue-100:        #93BDFF;
    --blue-200:        #A9C8F8;
    --blue-300:        #5E9AEE;
    --blue-400:        #0B5BD3;
    --blue-50:         #D8E9FF;
    --blue-500:        #2E8FFF;
    --blue-600:        #1B7AF0;
    --blue-700:        #1463CC;
    --blue-800:        #0F4D9E;
    --blue-900:        #0C3C7A;
    --border:          #C9C5DC;
    --border-2:        #948DAF;
    --brand:           var(--blue-500);
    --brand-on-dark:   #7FBEFF;
    --brand-text:      #0D57C9;
    --canvas:          #F4F5FA;
    --edge-light:      inset 0 1px 0 rgba(255,255,255,.30);
    --glow-lg:         0 36px 96px -30px rgba(46,143,255,.26);
    --glow-md:         0 18px 46px -18px rgba(46,143,255,.22);
    --glow-sm:         0 10px 26px -12px rgba(46,143,255,.24);
    --glow-violet:     0 18px 46px -18px rgba(124,92,245,.26);
    --glow-xs:         0 4px 14px -6px rgba(46,143,255,.26);
    --grad-dot:        linear-gradient(140deg, #1B7AF0, #7C5CF5);
    --green-100:       #6CCE97;
    --green-200:       #A8DEC0;
    --green-50:        #CCEFDE;
    --green-500:       #0E7A4B;
    --green-600:       #0A6B41;
    --green-700:       #07512F;
    --hover-veil:      rgba(20,19,42,.06);
    --info-50:         #C7EFF3;
    --info-500:        #0A6E78;
    --ink:             #14132A;
    --ink-on-dark:     #F5F4FA;
    --ink-soft:        #2B2942;
    --on-brand:        #FFFFFF;
    --page-base:       #F6F6FB;
    --paper:           #FFFFFF;
    --red:             var(--red-500);
    --red-100:         #F4A89B;
    --red-200:         #F2B3AA;
    --red-50:          #FCE1DC;
    --red-500:         #C62A1C;
    --red-600:         #B02318;
    --red-700:         #8A1710;
    --ring:            0 0 0 2px var(--blue-600), 0 0 0 5px rgba(46,143,255,.20);
    --scrim:           rgba(18,15,36,.38);
    --sel-bg:          rgba(46,143,255,.22);
    --sel-fg:          var(--ink);
    --sh-blue:         0 14px 34px -14px rgba(46,143,255,.34);
    --sh-glow:         0 0 0 4px rgba(46,143,255,.18);
    --sh-lg:           0 24px 56px -20px rgba(20,19,42,.18), 0 8px 18px -10px rgba(20,19,42,.10);
    --sh-md:           0 8px 24px -8px rgba(20,19,42,.12), 0 2px 6px -2px rgba(20,19,42,.07);
    --sh-sm:           0 1px 2px rgba(20,19,42,.05), 0 2px 6px rgba(20,19,42,.05);
    --sh-violet:       0 14px 34px -14px rgba(124,92,245,.30);
    --sh-xs:           0 1px 2px rgba(20,19,42,.05);
    --sheen:           none;
    --slate-100:       #EFEFF7;
    --slate-200:       #DCDAEA;
    --slate-300:       #8B87A6;
    --slate-400:       #6A6787;
    --slate-50:        #F7F7FC;
    --slate-500:       #5E5B7C;
    --slate-600:       #4A4767;
    --slate-700:       #322F4A;
    --surface:         var(--paper);
    --surface-2:       var(--slate-50);
    --topbar-bg:       rgba(255,255,255,.82);
    --violet-100:      #C3AEFF;
    --violet-400:      #5B34D6;
    --violet-50:       #EBE2FF;
    --violet-500:      #6640E6;
    --violet-600:      #4B2FB8;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAPIER — mode clair. À coller dans styles/theme.css, juste après le bloc :root.
   Aucun jeton n'est renommé : seules les VALEURS s'inversent. Tout code qui écrit
   var(--slate-600) continue de marcher sans être touché.
   Rappel garde-fou : background-color et background-image restent DEUX propriétés
   distinctes, et jamais deux fois la même propriété dans un bloc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Les 10 jetons NOUVEAUX doivent aussi exister en sombre : à ajouter dans :root --- */
:root {
  --page-base:     #0A0816;
  --on-brand:      #FFFFFF;      /* CONSTANT */
  --ink-on-dark:   #F5F4FA;      /* CONSTANT */
  --brand-on-dark: #7FBEFF;      /* CONSTANT */
  --amber-400:     #FFB020;      /* CONSTANT — l'ambre d'APLAT (étoiles, jauges) */
  --scrim:         rgba(18,15,36,.52);
  --hover-veil:    rgba(255,255,255,.08);
  --topbar-bg:     rgba(18,15,36,.82);
  --sel-bg:        rgba(46,143,255,.32);
  --sel-fg:        #FFFFFF;
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Marque — 50→400 s'inversent, 500→900 ne bougent pas (ils portent du blanc) */
  --blue-50: #D8E9FF;  --blue-100: #93BDFF; --blue-200: #A9C8F8; --blue-300: #5E9AEE;
  --blue-400: #0B5BD3;                      /* variante FONCÉE du texte de marque */
  --brand-text: #0D57C9;

  /* Encres & neutres — mêmes RÔLES, valeurs inversées */
  --ink: #14132A;       --ink-soft: #2B2942;
  --slate-700: #322F4A; --slate-600: #4A4767; --slate-500: #5E5B7C; --slate-400: #6A6787;
  --slate-300: #8B87A6; --slate-200: #DCDAEA; --slate-100: #EFEFF7; --slate-50: #F7F7FC;
  --paper: #FFFFFF;     --canvas: #F4F5FA;   --page-base: #F6F6FB;

  /* Sémantique */
  --green-500: #0E7A4B; --green-50: #CCEFDE; --green-100: #6CCE97; --green-200: #A8DEC0;
  --green-600: #0A6B41; --green-700: #07512F;
  --red-500: #C62A1C;   --red-50: #FCE1DC;   --red-100: #F4A89B;  --red-200: #F2B3AA;
  --red-600: #B02318;   --red-700: #8A1710;
  --amber-500: #A4560A; --amber-50: #FFE4B7; --amber-200: #F2D7A4; --amber-600: #7E3F06;
  --info-500: #0A6E78;  --info-50: #C7EFF3;
  --violet-500: #6640E6; --violet-50: #EBE2FF; --violet-100: #C3AEFF; --violet-400: #5B34D6;

  /* Surfaces & bordures — l'école PAPIER : un cheveu, pas un aplat */
  --band: rgba(255, 255, 255, .72);
  --border: #C9C5DC;  --border-2: #948DAF;
  --topbar-bg: rgba(255, 255, 255, .82);
  --scrim: rgba(18, 15, 36, .38);
  --hover-veil: rgba(20, 19, 42, .06);
  --sel-bg: rgba(46, 143, 255, .22);
  --sel-fg: var(--ink);

  /* Ombres — 5 à 18 % d'alpha, noir légèrement indigo */
  --sh-xs: 0 1px 2px rgba(20,19,42,.05);
  --sh-sm: 0 1px 2px rgba(20,19,42,.05), 0 2px 6px rgba(20,19,42,.05);
  --sh-md: 0 8px 24px -8px rgba(20,19,42,.12), 0 2px 6px -2px rgba(20,19,42,.07);
  --sh-lg: 0 24px 56px -20px rgba(20,19,42,.18), 0 8px 18px -10px rgba(20,19,42,.10);
  --sh-blue: 0 14px 34px -14px rgba(46,143,255,.34);
  --sh-violet: 0 14px 34px -14px rgba(124,92,245,.30);
  --glow-violet: 0 18px 46px -18px rgba(124,92,245,.26);
  --sh-glow: 0 0 0 4px rgba(46,143,255,.18);

  /* Lueurs — seulement sous les objets COLORÉS, alpha divisé par deux */
  --glow-xs: 0 4px 14px -6px rgba(46,143,255,.26);
  --glow-sm: 0 10px 26px -12px rgba(46,143,255,.24);
  --glow-md: 0 18px 46px -18px rgba(46,143,255,.22);
  --glow-lg: 0 36px 96px -30px rgba(46,143,255,.26);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.30);   /* reste BLANC : il sculpte les boutons de marque */

  /* Pastilles sans texte : le dégradé CLAIR doit s'assombrir (1,96:1 -> 4,13:1) */
  --grad-dot: linear-gradient(140deg, #1B7AF0, #7C5CF5);

  /* PAPIER : pas de voile. Le relief vient de la bordure et de l'ombre. */
  --sheen: none;

  /* Focus : un liseré PLEIN, pas un halo translucide (1,27:1 -> 4,13:1) */
  --ring: 0 0 0 2px var(--blue-600), 0 0 0 5px rgba(46,143,255,.20);
}

/* --- Le fond RÉEL de la page (surcharge de theme.css:170-171) --------------- */
:root[data-theme="light"] {                  /* 0,2,0 > html 0,0,1 : l'ordre est indifférent */
  background-color: var(--page-base);
  background-image: linear-gradient(180deg, #EDEFF9 0%, #F4F5FA 44%, #FBFBFE 100%);
}

/* --- Les aurores : en clair un voile ne « lève » plus la page, il la teinte --- */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(42% 48% at 24% 34%, rgba(46,143,255,.05), transparent 68%),
    radial-gradient(38% 44% at 72% 16%, rgba(155,92,245,.05), transparent 66%);
}
:root[data-theme="light"] body::after {
  background:
    radial-gradient(40% 46% at 70% 60%, rgba(124,92,245,.05), transparent 66%),
    radial-gradient(34% 40% at 22% 76%, rgba(90,169,255,.04), transparent 64%);
}

/* --- Sélection, ascenseurs : à tokeniser une fois pour les deux thèmes ------- */
::selection { background: var(--sel-bg); color: var(--sel-fg); }

/* --- Coupure des transitions pendant la bascule (sinon .lp-header transition:all .3s) --- */
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important; animation-duration: .01ms !important;
}

/* --- Filet d'impression (le thème est forcé en JS sur beforeprint) ----------- */
@media print {
  html { background-color: #FFFFFF; background-image: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LES QUATRE ÎLOTS VOLONTAIREMENT SOMBRES — contexte de jetons LOCAL.
   Le vrai danger n'est pas la tache sombre : c'est --ink devenu noir posé sur
   un fond resté noir. On re-déclare les jetons, on ne fige pas sept valeurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Vitrine « App VTD BOT » + maquettes iPhone (app.css:549-658) */
/* La scène était restée SOMBRE en mode clair : des iPhone noirs sur un fond noir,
   donc deux téléphones qu'on ne distingue plus. Ici l'objet sombre, c'est le
   TÉLÉPHONE — pas le décor. La scène devient donc un fond de studio clair, et les
   châssis s'y détachent comme sur une photo produit.
   Conséquence directe : les légendes (« Sur ton écran d'accueil ») doivent
   repasser en texte SOMBRE — d'où l'absence de contexte sombre ici, contrairement
   au terminal Sniper juste en dessous. */
:root[data-theme="light"] .app-showcase {
  background: linear-gradient(160deg, #EDF0FA 0%, #E3E8F7 52%, #DEE7FB 100%);
}
/* Les cartes de notification flottantes, elles, RESTENT sombres : ce sont des
   notifications iOS. Elles reçoivent donc leur propre contexte sombre, sinon
   leur texte deviendrait noir sur leur fond noir. */
:root[data-theme="light"] .glass-chip {
  background: rgba(24, 21, 44, .82);
  --ink: var(--ink-on-dark); --ink-soft: #E3E1EF;
  --slate-700: #D0CDE4; --slate-600: #C4C0DC; --slate-500: #A3A0C6;
  --blue-400: var(--brand-on-dark);
}
/* 2. Bande Sniper + fenêtre de terminal (landing.css:232-249) */
:root[data-theme="light"] .lp-autobuy {
  --ink: #F5F4FA; --slate-700: #D0CDE4; --slate-600: #AFABCE; --slate-500: #A3A0C6;
  --slate-200: #393659; --blue-400: var(--brand-on-dark); --border: #C9C5DC;
}
/* 3. Couvertures d'article (content.css:15-46) : plaques indigo, texte constant */
:root[data-theme="light"] .article-thumb,
:root[data-theme="light"] .article-featured-thumb { --ink: var(--ink-on-dark); }
/* 4. Visionneuse de photo (app.css:306-308) : un letterbox clair délaverait la photo */
:root[data-theme="light"] .detail-thumb.has-photo { background: #0A0816; }


/* ═══════════════════════════════════════════════════════════════════════════
   styles/app.css — les 18 vraies fuites (les 78 valeurs de la vitrine iPhone et
   les 31 invariants sur dégradé de marque ne bougent pas)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Topbar : à tokeniser dans les DEUX thèmes (app.css:37) */
.topbar { background: var(--topbar-bg); }
.lp-header.scrolled { background: var(--topbar-bg); }
:root[data-theme="light"] .lp-header.scrolled { backdrop-filter: saturate(1.1) blur(14px); }

/* Bandeaux d'état — les valeurs en dur deviennent des jetons qui existent déjà */
.demo-banner    { border-color: var(--amber-200); color: var(--amber-600); }
.demo-banner-x  { color: var(--amber-600); }
.demo-banner-x:hover, .ext-banner-x:hover { background: var(--hover-veil); }
.locked-banner svg { color: var(--red-500); }
:root[data-theme="light"] .locked-banner {
  background-image: linear-gradient(120deg, var(--amber-50), var(--red-50));
  border-color: var(--red-200);            /* BUG corrigé : la bordure était BLEUE sur un bandeau ambre/rouge */
}
.maint-banner        { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
.maint-banner strong { color: var(--green-700); }
.maint-banner-x      { color: var(--green-600); opacity: 1; }   /* jamais d'opacité sur une couleur FONCÉE */
.maint-banner-x:hover{ background: var(--hover-veil); }
.veille-hint         { background: var(--blue-50); border-color: var(--blue-100); }
.ac-gap              { color: var(--green-700); }
.lca-val.c-green     { color: var(--green-600); }
.lca-gap.is-good     { color: var(--green-700); background: var(--green-100); }
.lca-gap.is-bad      { color: var(--red-600);   background: var(--red-100); }

/* Replis de var() figés sur l'ANCIENNE palette : code mort, invisible au garde-fou */
.locked-overlay-card   { border-color: var(--border); box-shadow: var(--sh-lg); }
.locked-overlay-card p { color: var(--slate-600); }
.locked-alerts-note    { background: var(--slate-100); border-color: var(--border); color: var(--slate-600); }

/* Ombres calibrées pour du sombre */
.bell-badge { box-shadow: var(--sh-xs); }
.user-menu  { box-shadow: var(--sh-lg); }
.seg.active { box-shadow: var(--sh-xs); }
.side-scrim, .app-shell.nav-open .side-scrim { background: var(--scrim); }
:root[data-theme="light"] .thread-unread { box-shadow: 0 0 8px 1px rgba(46,143,255,.32); }
.meter-mark.price { background: var(--paper); }

/* Deux pastilles blanches qui s'évaporent sur une carte blanche
   (js/pages/dashboard.js:73, stats.js:49, autobuy.js:67 — à inverser dans le JS) */
:root[data-theme="light"] .promo-cta .statcard-ic,
:root[data-theme="light"] .card > .statcard-ic {
  background: var(--blue-600); color: var(--on-brand);
}

/* Le flou de paywall cache MOINS sur fond clair : du texte foncé flouté garde
   des formes de mots reconnaissables là où du texte clair se dissout. */
:root[data-theme="light"] .locked-blurred > *:not(.locked-overlay) { filter: blur(10px); }
:root[data-theme="light"] .locked-block > *:not(.locked-block-cta) { filter: blur(8px); }
:root[data-theme="light"] .locked-alerts input[type="checkbox"] { opacity: .55; }

/* Liseré CLAIR autour de la scène sombre : sur page blanche, sans lui, elle paraît
   découpée au couteau (app.css:549, où 5 % de sombre sur du sombre ne fait rien) */
:root[data-theme="light"] .app-showcase { box-shadow: inset 0 0 0 1px rgba(20,19,42,.07); }


/* ═══════════════════════════════════════════════════════════════════════════
   styles/landing.css
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .hero-glow          { background: radial-gradient(closest-side, rgba(46,143,255,.10), transparent 70%); }
:root[data-theme="light"] .hero-visual::before{ background: radial-gradient(closest-side, rgba(46,143,255,.10), transparent 70%); }
:root[data-theme="light"] .lp-hero::after     { background: radial-gradient(closest-side, rgba(124,92,245,.09), transparent 70%); }
:root[data-theme="light"] .live-pill          { box-shadow: 0 0 16px -6px rgba(14,122,75,.26); }
:root[data-theme="light"] .radar-scan::before,
:root[data-theme="light"] .radar-scan::after  { border-color: rgba(46,143,255,.30); }
:root[data-theme="light"] .radar-blip         { box-shadow: 0 0 10px 2px rgba(46,143,255,.38); --pulse-c: rgba(46,143,255,.28); }
:root[data-theme="light"] .reco-row::after    { box-shadow: 0 6px 18px rgba(46,143,255,.12); }
:root[data-theme="light"] .d-alert-dot        { --pulse-c: rgba(10,110,120,.30); }  /* était un bleu qui n'est ni la marque ni la couleur du point */
.d-meter { background-image: linear-gradient(90deg, var(--green-500), var(--amber-400), var(--red-500)); }
.d-meter-dot { background: #FFFFFF; }         /* un bouton de contrôle est blanc dans les deux thèmes */
:root[data-theme="light"] .stat-num { background-image: linear-gradient(120deg, var(--blue-700), var(--violet-600)); }
:root[data-theme="light"] .how-grid::before { background-image: repeating-linear-gradient(90deg, var(--blue-300) 0 8px, transparent 8px 16px); }
:root[data-theme="light"] .lp-mobile-panel  { box-shadow: -14px 0 44px rgba(20,19,42,.18); }
.lp-mobile-scrim { background: var(--scrim); }
/* La lueur par currentColor s'alourdit brutalement quand currentColor devient foncé */
:root[data-theme="light"] .feat-ic { box-shadow: 0 8px 22px -16px currentColor, var(--edge-light); }
:root[data-theme="light"] .statcard-ic { box-shadow: 0 6px 18px -14px currentColor; }
/* Le seul vrai « liquid glass » de la page doit être INVERSÉ, pas densifié :
   blanc sur rgba(22,24,32,.42) posé sur une capture devenue blanche = 2,68:1 */
:root[data-theme="light"] .sc-overlay-cta {
  color: var(--ink);
  background: rgba(255,255,255,.66);
  border-color: rgba(20,19,42,.12);
  box-shadow: 0 12px 34px rgba(20,19,42,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(20,19,42,.06);
  backdrop-filter: saturate(1.2) blur(16px);
}
:root[data-theme="light"] .sc-overlay-cta svg    { color: currentColor; }
:root[data-theme="light"] .sc-overlay-cta:hover  { background: rgba(255,255,255,.82); }


/* ═══════════════════════════════════════════════════════════════════════════
   styles/components.css — 9 valeurs en dur qui sont la recopie d'un jeton existant
   ═══════════════════════════════════════════════════════════════════════════ */
.badge-green  { color: var(--green-600); }
.badge-red    { color: var(--red-600); }
.badge-amber  { color: var(--amber-600); }
.badge-teal   { background: var(--info-50); color: var(--info-500); }
.score        { color: var(--green-600); }
.score.mid    { color: var(--amber-600); }
.score.low    { color: var(--red-600); }
.btn-danger-soft:hover { background: var(--red-100); }
.btn-white    { --fg: #141226; }               /* #121517 était l'ancienne palette */
.modal-overlay{ background: var(--scrim); }
.input::placeholder, .textarea::placeholder { color: var(--slate-500); }  /* 12-13px = texte courant */
/* BUG DUR : --bg passe à #fff alors que --fg reste var(--canvas), lui aussi clair.
   Le libellé disparaît au survol. Un jeton, et les deux thèmes sont justes. */
:root { --btn-ink-hover: #FFFFFF; }
:root[data-theme="light"] { --btn-ink-hover: #05040E; }
.btn-dark:hover { --bg: var(--btn-ink-hover); }
/* Lueurs à retirer sous les surfaces BLANCHES (les garder sous les colorées) */
:root[data-theme="light"] {
  /* Blanc sur #2E8FFF plafonne à 3,24:1, et le libellé fait 16,3 px gras — il
     n'a donc PAS droit au seuil « grand texte ». En clair, rien n'oblige à
     partir du bleu vif : on démarre à --blue-700, qui donne 5,7:1. */
  /* Plus besoin d'assombrir ici : le dégradé de base est désormais électrique
     ET conforme. La marque est donc identique dans les deux thèmes. */
}
:root[data-theme="light"] .btn-primary:hover { box-shadow: 0 10px 24px -10px rgba(46,143,255,.38), var(--edge-light); }
:root[data-theme="light"] .card-hover:hover  { box-shadow: var(--sh-lg); }
:root[data-theme="light"] .lang-pop          { box-shadow: var(--sh-lg); }
:root[data-theme="light"] .bsel-opt.bsel-active:not(.bsel-sel) { background: var(--slate-100); }
:root[data-theme="light"] .segmented         { background: var(--slate-200); }
/* Le remplissage doit se FONCER vers la droite dans les deux thèmes */
.progress > span { background-image: linear-gradient(90deg, var(--blue-500), var(--blue-700)); }
/* Chevron du <select> natif : couleur encodée dans un data-URI, invisible au garde-fou */
:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A6787' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════════════
   styles/auth.css — 5 valeurs, toutes des recopies de jetons
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-brand .brand-name span { color: var(--brand-text); }   /* le jeton existait, inutilisé */
.auth-error { color: var(--red-600); border-color: var(--red-200); }
.auth-note  { color: var(--blue-400); }
.auth-sep, .auth-legal, .auth-trust { color: var(--slate-500); }
.auth-trust svg { color: var(--green-500); }
:root[data-theme="light"] .auth-bg {
  background:
    radial-gradient(600px 400px at 50% -10%, rgba(46,143,255,.07), transparent 60%),
    radial-gradient(500px 400px at 90% 110%, rgba(46,143,255,.05), transparent 60%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   styles/content.css — les 9 verdicts du calculateur sont des jetons recopiés
   ═══════════════════════════════════════════════════════════════════════════ */
.calc-good { background: var(--green-50); color: var(--green-600); border-color: var(--green-200); }
.calc-warn { background: var(--amber-50); color: var(--amber-600); border-color: var(--amber-200); }
.calc-bad  { background: var(--red-50);   color: var(--red-600);   border-color: var(--red-200); }
.breadcrumb svg   { color: var(--slate-400); }   /* pictogramme : 3:1, --slate-300 n'y suffit pas */
.toc-link::before { color: var(--blue-400); }    /* .92rem/800 = texte : 4,5:1, --blue-500 échoue */
.calc-input:focus-within { box-shadow: 0 0 0 3px rgba(46,143,255,.30); }  /* un anneau « presque le fond » n'existe pas */
:root[data-theme="light"] .tl-dot { box-shadow: 0 0 0 1px var(--border-2), 0 0 8px 1px rgba(20,99,204,.24); }
.formation-list li::before { color: #1463CC; }   /* 4,13 -> 5,70:1, défaut indépendant du thème */
:root[data-theme="light"] .formation-title .hl {
  background-image: linear-gradient(transparent 58%, rgba(255,255,255,.20) 58%);   /* 2,55 -> 3,05:1 */
}


/* ═══════════════════════════════════════════════════════════════════════════
   index.html — dans le PREMIER <style> (blocs SÉPARÉS : css_doublons.py surveille
   `background`). Le repli @media couvre le cas « JavaScript désactivé » : c'est le
   seul cas où data-theme n'est pas posé, et le contenu servi alors est .ssr-home,
   dont les couleurs sont ici et non dans les jetons.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #bootSplash { background: #F6F6FB; }
html[data-theme="light"] .bs-name    { color: #14132A; }
html[data-theme="light"] .bs-name span { color: #0B5BD3; }
html[data-theme="light"] .bs-bar     { background: #E3E1EF; }
html[data-theme="light"] .bs-bar i   { background: linear-gradient(90deg, #2E8FFF, #1463CC); }
html[data-theme="light"] .ssr-home   { background: #F6F6FB; color: #4A4767; }
html[data-theme="light"] .ssr-nav .ssr-brand,
html[data-theme="light"] .ssr-home h1,
html[data-theme="light"] .ssr-home h2,
html[data-theme="light"] .ssr-home strong,
html[data-theme="light"] .ssr-foot-t { color: #14132A; }
html[data-theme="light"] .ssr-home h3 { color: #2B2942; }
html[data-theme="light"] .ssr-lead    { color: #4A4767; }
html[data-theme="light"] .ssr-links a,
html[data-theme="light"] .ssr-foot-col a { color: #4A4767; }
html[data-theme="light"] .ssr-nav .ssr-brand span,
html[data-theme="light"] .ssr-cta a,
html[data-theme="light"] .ssr-home a  { color: #0B5BD3; }
html[data-theme="light"] .ssr-boot,
html[data-theme="light"] .ssr-foot-bottom { color: #5E5B7C; }
html[data-theme="light"] .ssr-footer  { border-top-color: #E3E1EF; }
html[data-theme="light"] .bs-mark     { background: linear-gradient(135deg, #7FBEFF, #2E8FFF 42%, #7C5CF5); }

@media (prefers-color-scheme: light) {
  /* Sans JS, data-theme n'existe pas : on couvre le fond et le bloc SEO. */
  html:not([data-theme="dark"]) { background-color: #F6F6FB;
    background-image: linear-gradient(180deg, #EDEFF9 0%, #F4F5FA 44%, #FBFBFE 100%); }
  html:not([data-theme="dark"]) .ssr-home { background: #F6F6FB; color: #4A4767; }
  html:not([data-theme="dark"]) .ssr-home h1,
  html:not([data-theme="dark"]) .ssr-home h2,
  html:not([data-theme="dark"]) .ssr-home strong { color: #14132A; }
  html:not([data-theme="dark"]) .ssr-home a { color: #0B5BD3; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Le bouton lui-même — aucun sélecteur nouveau n'est nécessaire, il réutilise
   .lang-btn pour former une PAIRE avec le sélecteur de langue.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-btn svg { color: currentColor; }      /* l'icône hérite, elle ne porte aucun hexa */
.theme-btn.compact .theme-lab { display: none; }
@media (max-width: 400px) { .topbar-right .theme-btn { padding: 8px 9px; } }

/* Icône indigo (voir --indigo-ic dans theme.css) : foncée sur tuile claire, 5,84:1. */
:root[data-theme="light"] { --indigo-ic: #3F3BE0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --indigo-ic: #3F3BE0; }
}