/* ============================================================
   Lumina theme — clair/sombre + contrôles (Phase 1 : home only)
   Chargé APRÈS system.css, uniquement sur les pages refondues.
   Le sombre = valeurs :root d'origine (system.css).
   Le clair = redéfinition des variables couleur ci-dessous.
   ============================================================ */

html[data-theme="light"] {
  /* Bases (navy → surfaces claires) */
  --navy-950: #f6f7fc;   /* fond de page */
  --navy-900: #ffffff;   /* cartes */
  --navy-800: #ffffff;
  --navy-700: #eef1f8;
  --navy-600: #e4e8f3;

  /* Texte (cool → foncé) */
  --cool-50:  #0f1530;   /* titres */
  --cool-200: #222a4d;   /* corps */
  --cool-300: #3c4570;
  --cool-400: #5a6390;
  --cool-500: #5f6890;   /* discret · AA sur fond clair */

  /* Accents (contrastés pour fond clair) */
  --accent-blue: #2f7fd0;
  --accent-blue-dark: #256bb8;
  --accent-purple: #7c5cf0;
  --accent-cyan: #0e9ab5;
  --success: #1f9d6b;
  --warn: #b8830a;
  --danger: #d23b48;

  /* Axes de recherche */
  --flux-marche: #b8830a;
  --flux-ia: #2f7fd0;
  --flux-neuro: #7c5cf0;

  /* Surfaces */
  --card-bg: #ffffff;
  --card-border: rgba(15,21,48,0.09);
  --card-border-hover: rgba(124,92,240,0.40);

  /* Ombres (douces pour fond clair) */
  --shadow-raised: 0 10px 30px -14px rgba(20,24,60,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-deep: 0 40px 100px -45px rgba(20,24,60,.25), 0 0 0 1px rgba(124,92,240,.14);
  --shadow-glow-blue: 0 0 40px rgba(47,127,208,.22);
  --shadow-glow-purple: 0 0 40px rgba(124,92,240,.22);
}

/* Atténue le grain (pensé pour le sombre) en clair */
html[data-theme="light"] body::before { opacity: .02; }

/* Modèle Lumina : DEUX zones sombres (hero + footer), tout le reste blanc.
   1) On masque le fond sombre GLOBAL (ambient) → le corps devient blanc. */
html[data-theme="light"] .ambient-bg,
html[data-theme="light"] .ambient-mesh { display: none !important; }

/* 2) Le HERO redevient une zone sombre autonome, avec texte clair. */
html[data-theme="light"].lum-home #main-content {
  background:
    radial-gradient(ellipse 90% 60% at 50% -5%, rgba(124,108,255,.16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 20%, rgba(91,163,232,.14), transparent 55%),
    #070b14;
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
  --card-border: rgba(255,255,255,.08);
}
/* Dans le hero sombre : pastille + bouton secondaire en version claire-sur-sombre */
html[data-theme="light"].lum-home #main-content .badge-lab {
  background: rgba(255,255,255,.06);
  border-color: rgba(167,139,250,.45);
  color: var(--cool-200);
}
html[data-theme="light"].lum-home #main-content .btn-secondary {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}

/* ============ Contrôles thème + langue (Lumina) ============ */
.lum-controls { display: flex; align-items: center; gap: 10px; }

.lum-theme, .lum-lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  border: 1px solid var(--card-border); background: var(--card-bg);
}
.lum-theme button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: none; background: none; color: var(--cool-400);
  border-radius: 999px; cursor: pointer; font-size: 15px;
  transition: background .15s, color .15s;
}
.lum-lang button {
  min-width: 30px; height: 30px; padding: 0 9px;
  border: none; background: none; color: var(--cool-400);
  border-radius: 999px; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  transition: background .15s, color .15s;
}
.lum-theme button:hover, .lum-lang button:hover { color: var(--cool-50); }
.lum-theme button.active, .lum-lang button.active {
  background: var(--accent-purple); color: #fff;
}

/* ============ Patches mode clair (artefacts pensés pour le sombre) ============ */
/* Pastilles "badge-lab" : sombres par défaut → claires sur sections claires,
   mais on les RE-pin en sombre dans le hero (qui reste sombre). */
html[data-theme="light"] .badge-lab {
  background: rgba(124,92,240,.07);
  border-color: rgba(124,92,240,.28);
  color: var(--cool-300);
}
html[data-theme="light"] .badge-lab-blue { border-color: rgba(47,127,208,.30); }
html[data-theme="light"] .badge-lab-purple { border-color: rgba(124,92,240,.30); }
/* Bouton secondaire : fond sombre → carte blanche bordée en clair */
html[data-theme="light"] .btn-secondary {
  background: #fff;
  border-color: rgba(124,92,240,.30);
  color: var(--cool-50);
}
html[data-theme="light"] .btn-secondary:hover {
  background: #f3f0ff;
  border-color: rgba(124,92,240,.55);
}

html[data-theme="light"] .nav-shell {
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--card-border);
}
/* Logo : le picto reste sur fond sombre en mode clair (comme en mode nuit) → net, pas délavé. */
html[data-theme="light"] .nav-shell a[href="/"] > div:first-child {
  background: radial-gradient(circle, rgba(167,139,250,.40), rgba(91,163,232,.14)), #0f1530 !important;
  border-color: rgba(167,139,250,.45) !important;
}
/* 3) Le FOOTER est la 2e zone sombre, avec texte clair. */
html[data-theme="light"] .footer-shell {
  background: #070b14;
  border-top: 1px solid rgba(255,255,255,.08);
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
  --card-border: rgba(255,255,255,.08);
}

/* ============ Cohérence des panneaux du milieu (corps blanc) ============ */
/* Panneau "AVANT" : fond sombre translucide → surface claire neutre. */
html[data-theme="light"] .control-panel-suber {
  background: #eef0f6;
  border-color: rgba(233,79,92,.20);
  opacity: 1;
}
/* Barre "TRIPLE FLUX" : touche sombre NETTE dans les deux modes (fond plein + texte clair). */
.lum-fluxbar {
  background: #0a0e1f;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .lum-fluxbar {
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
}
/* Carte "aversion à la perte" (graphe ×2,25 + citation Kahneman) : sombre dans les
   deux modes (touche sombre), contenu re-coloré pour rester parfaitement lisible. */
html[data-theme="light"] .neu-card:has(.loss-chart) {
  background: #0a0e1f;
  border-color: rgba(255,255,255,.08);
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
  --success: #52C77A;
  --danger: #ff8089;
  --accent-purple: #A78BFA;
  --card-border: rgba(255,255,255,.08);
}

/* Alignement des titres dans les ensembles de cartes (même hauteur de bloc titre). */
.viz-card h3{ min-height: 3.2em; }

/* Zones à fond sombre "en dur" (barres de filtres sticky Études/Biais, bandes inline) :
   elles restent sombres dans les deux modes → on force un texte clair pour qu'elles
   soient des "touches sombres" nettes et lisibles, jamais délavées. */
html[data-theme="light"] [style*="rgba(7,11,20"] {
  background: #0a0e1f !important;             /* même navy plein que la barre FLUX */
  border-color: rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
  --card-border: rgba(255,255,255,.10);
}
/* Pastilles de filtre dans ces barres sombres : texte clair forcé (lisible). */
html[data-theme="light"] [style*="rgba(7,11,20"] .filter-decade-btn,
html[data-theme="light"] [style*="rgba(7,11,20"] .filter-btn {
  color: #cbd2db !important;
  border-color: rgba(255,255,255,.14) !important;
}
html[data-theme="light"] [style*="rgba(7,11,20"] .filter-decade-btn.active,
html[data-theme="light"] [style*="rgba(7,11,20"] .filter-btn.active {
  color: #ffffff !important;
}

/* ============ Hero sombre sur TOUTES les pages (comme la home) ============
   La section qui porte le H1 devient la zone sombre haute (taggée par lumina.js),
   le fil d'ariane y est glissé pour une bande pleine largeur. Mode clair uniquement :
   en mode sombre la page est déjà entièrement sombre. */
html[data-theme="light"] .lum-hero {
  background:
    radial-gradient(ellipse 90% 60% at 50% -5%, rgba(124,108,255,.16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 20%, rgba(91,163,232,.14), transparent 55%),
    #070b14;
  --cool-50:  #F5F7FB;
  --cool-200: #E4E7EC;
  --cool-300: #CBD2DB;
  --cool-400: #98A2B3;
  --cool-500: #9aa7bd;
  --card-border: rgba(255,255,255,.08);
}
/* Pastille + bouton secondaire en version claire-sur-sombre dans le hero. */
html[data-theme="light"] .lum-hero .badge-lab {
  background: rgba(255,255,255,.06);
  border-color: rgba(167,139,250,.45);
  color: var(--cool-200);
}
html[data-theme="light"] .lum-hero .btn-secondary {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}