:root{
  --bg:#0a0a0b; --glow:#1c1204; --pane:#0d0d10; --pane-2:#0b0b0e;
  --border:#2a2118; --border-soft:#1e1811; --border-active:#7a5326;
  --gold:#e9a63c; --gold-soft:#c98a34; --amber-dim:#8a6f49;
  --tan:#d9bd92; --tan-dim:#a2875f; --muted:#6f6656; --gutter:#463f34;
  --green:#84c95a; --green-soft:#5c8a3e; --green-dim:#2c3a22;
  --red:#d95f52; --rust:#bf551f; --text:#c9c3b6;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-theme="neon"]{
  --bg:#05060a; --glow:#08202e; --pane:#0a0c14; --pane-2:#070810;
  --border:#15233a; --border-soft:#0e1626; --border-active:#22d3ee;
  --gold:#22d3ee; --gold-soft:#0e9bb5; --amber-dim:#5b7a99;
  --tan:#e6f7ff; --tan-dim:#8fb3cc; --muted:#556a80; --gutter:#2a3a52;
  --green:#5efc82; --green-soft:#2fae66; --green-dim:#16351f;
  --red:#ff3d81; --rust:#ff3d81; --text:#c8d8e8;
}
html[data-theme="pastel"]{
  --bg:#181825; --glow:#2a2140; --pane:#1e1e2e; --pane-2:#181825;
  --border:#313244; --border-soft:#252536; --border-active:#89b4fa;
  --gold:#cba6f7; --gold-soft:#a98fd6; --amber-dim:#7f849c;
  --tan:#cdd6f4; --tan-dim:#a6adc8; --muted:#6c7086; --gutter:#45475a;
  --green:#a6e3a1; --green-soft:#74b56f; --green-dim:#16351f;
  --red:#f38ba8; --rust:#fab387; --text:#c6cff0;
}
#fxOverlay{position:fixed;inset:0;pointer-events:none;z-index:60}

html[data-crt="1"] #fxOverlay{animation:crtFlicker 5s steps(60) infinite;background:repeating-linear-gradient(90deg, rgba(255,0,0,.04) 0px, rgba(255,0,0,.04) 1px, rgba(0,255,0,.04) 1px, rgba(0,255,0,.04) 2px, rgba(0,0,255,.04) 2px, rgba(0,0,255,.04) 3px)}
html[data-crt="1"] #fxOverlay::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px)}
html[data-crt="1"] #fxOverlay::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(0,0,0,.38) 100%);
  box-shadow:inset 0 0 180px 50px rgba(0,0,0,.5)}
@keyframes crtFlicker{0%,100%{opacity:1}3%{opacity:.94}6%{opacity:1}47%{opacity:.97}50%{opacity:.9}53%{opacity:1}}
@media (prefers-reduced-motion:reduce){ html[data-crt="1"] #fxOverlay{animation:none} }

html[data-crt="1"] .fx-title{text-shadow:0 0 2px var(--gold), 0 0 6px var(--gold), 0 0 14px var(--gold-soft)}
html[data-crt="1"] label{text-shadow:0 0 2px var(--gold), 0 0 6px var(--gold-soft)}
html[data-crt="1"] .tseg.active{text-shadow:0 0 2px var(--gold), 0 0 6px var(--gold), 0 0 12px var(--gold-soft)}

html[data-theme="neon"] #fxOverlay{
  background: radial-gradient(60% 40% at 50% 30%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 70%);
}

html[data-theme="neon"] .fx-title{text-shadow:0 0 2px var(--gold), 0 0 8px var(--gold), 0 0 18px var(--gold-soft)}
html[data-theme="neon"] .card{border-color:var(--border-active);box-shadow:0 12px 30px -22px #000, 0 0 24px color-mix(in srgb, var(--gold) 25%, transparent)}
html[data-theme="neon"] .tseg.active{border-color:var(--gold);box-shadow:0 0 12px color-mix(in srgb, var(--gold) 35%, transparent)}
html[data-theme="neon"] li:hover{border:1px solid var(--border-active);box-shadow:0 0 14px color-mix(in srgb, var(--gold) 25%, transparent)}
html[data-theme="neon"] button:hover, html[data-theme="neon"] .btn:hover{border:1px solid var(--gold);box-shadow:0 0 12px color-mix(in srgb, var(--gold) 35%, transparent)}

@keyframes neonBreathe{
  0%,100%{text-shadow:0 0 2px var(--gold), 0 0 8px var(--gold), 0 0 18px var(--gold-soft)}
  50%{text-shadow:0 0 3px var(--gold), 0 0 12px var(--gold), 0 0 26px var(--gold-soft)}
}
html[data-theme="neon"] .fx-title{animation:neonBreathe 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  html[data-theme="neon"] .fx-title{animation:none}
}

html[data-theme="pastel"] #fxOverlay{
  background:
    repeating-radial-gradient(circle at 0 0, color-mix(in srgb, var(--tan) 6%, transparent) 0, transparent 2px),
    repeating-radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--gold) 5%, transparent) 0, transparent 2px);
  background-size: 6px 6px, 6px 6px;
}

html[data-theme="gruvbox"] #fxOverlay{
  background: radial-gradient(150% 130% at 50% 50%, transparent 75%, color-mix(in srgb, var(--bg) 35%, transparent) 100%);
}

/* ============================================================
   Thème "Couleurs" — 5e thème principal, palettes V0.5 intactes.
   Vocabulaire V0.5 (bg/surface/ink/muted/line/accent/accent-weak/
   grid-line/danger/shadow) conservé tel quel, aucune valeur
   dérivée. 5 équivalences ajoutées pour que la nav partagée
   suive la palette. Les variables sans équivalent V0.5 (pane-2,
   border-soft, border-active, gold-soft, amber-dim, tan, gutter,
   green*, rust, glow, mono) restent en héritage depuis le :root
   ci-dessus (= gruvbox).
   ============================================================ */
html[data-theme="couleurs"]{
  --bg:#eef2f7;
  --surface:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e9f0;
  --accent:#4f46e5;
  --accent-weak:#eef2ff;
  --grid-line:rgba(79,70,229,.16);
  --danger:#ef4444;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);

  --pane:var(--surface);
  --text:var(--ink);
  --border:var(--line);
  --gold:var(--accent);
  --tan-dim:var(--muted);
}

html[data-theme="couleurs"][data-variant="sombre"]{
  --bg:#0b1220;
  --surface:#141d30;
  --ink:#e6ebf5;
  --muted:#8a96ad;
  --line:#26324c;
  --accent:#818cf8;
  --accent-weak:#1f2742;
  --grid-line:rgba(129,140,248,.22);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);

  --pane:var(--surface);
  --text:var(--ink);
  --border:var(--line);
  --gold:var(--accent);
  --tan-dim:var(--muted);
}

html[data-theme="couleurs"][data-variant="ocean"]{
  --bg:#eef6f8;
  --surface:#ffffff;
  --ink:#0c2b32;
  --muted:#5b7b82;
  --line:#d7e7ea;
  --accent:#0891b2;
  --accent-weak:#e0f4f8;
  --grid-line:rgba(8,145,178,.16);

  --pane:var(--surface);
  --text:var(--ink);
  --border:var(--line);
  --gold:var(--accent);
  --tan-dim:var(--muted);
}

html[data-theme="couleurs"][data-variant="ambre"]{
  --bg:#faf4ec;
  --surface:#fffdfa;
  --ink:#3a2a12;
  --muted:#8a745a;
  --line:#eee0cf;
  --accent:#d97706;
  --accent-weak:#fdf0dd;
  --grid-line:rgba(217,119,6,.16);

  --pane:var(--surface);
  --text:var(--ink);
  --border:var(--line);
  --gold:var(--accent);
  --tan-dim:var(--muted);
}

html[data-theme="couleurs"][data-variant="foret"]{
  --bg:#eef4ee;
  --surface:#ffffff;
  --ink:#14271a;
  --muted:#5c7663;
  --line:#d9e6dc;
  --accent:#16a34a;
  --accent-weak:#e2f4e8;
  --grid-line:rgba(22,163,74,.16);

  --pane:var(--surface);
  --text:var(--ink);
  --border:var(--line);
  --gold:var(--accent);
  --tan-dim:var(--muted);
}