/* Thème clair / sombre (Orkun 27/08). Toutes les pages : les utilitaires Tailwind `white` / `black`
   pointent sur --fg / --bg (voir tailwind.config), les couleurs de fond sur --page / --panel.
   Sombre = défaut (aspect d'origine). Clair = html.light (localStorage ng_theme, static/theme.js). */
:root { --fg: 255 255 255; --bg: 0 0 0; --page: #030303; --panel: #070707; --panel2: #0b0c0b; --panel2-rgb: 11 12 11; --panel3: #0f100f; --pitch: #0d1f12; color-scheme: dark; }
html.light { --fg: 24 24 27; --bg: 255 255 255; --page: #f3f2ee; --panel: #ffffff; --panel2: #faf9f6; --panel2-rgb: 250 249 246; --panel3: #ffffff; --pitch: #dff3e4; color-scheme: light; }
html.light body { background-color: var(--page); }
/* fond animé (UnicornStudio) : sombre uniquement */
html.light [data-us-project], html.light .saturate-0 { display: none !important; }
/* textes pastel prévus pour fond sombre -> nuances foncées sur fond clair */
html.light [class*="text-emerald-"] { color: #047857; }
html.light [class*="text-amber-"] { color: #b45309; }
html.light [class*="text-rose-"] { color: #be123c; }
html.light [class*="text-sky-"] { color: #0369a1; }
html.light [class*="text-yellow-"] { color: #a16207; }
html.light [class*="text-red-"] { color: #b91c1c; }
html.light [class*="text-violet-"] { color: #6d28d9; }
html.light [class*="text-\[\#ffb070\]"] { color: #c2410c; }
/* badges pastel + texte « black » (devenu blanc) : fond plus soutenu */
html.light .bg-violet-300 { background-color: #7c3aed; }
html.light .bg-rose-400, html.light .bg-rose-300 { background-color: #e11d48; }
html.light .bg-amber-400, html.light .bg-amber-300 { background-color: #d97706; }
html.light .bg-emerald-400, html.light .bg-emerald-300 { background-color: #059669; }
html.light .bg-etat-mouv { background-color: #16a34a; }
html.light .bg-etat-immi { background-color: #ea7c00; }
html.light .bg-etat-mort { background-color: #9ca3af; }
html.light .bg-etat-pause { background-color: #a1a1aa; }
html.light .score-glow { text-shadow: none; }
html.light .hero-accent { color: rgb(var(--fg) / .5); }
html.light img[src*="/brand/wordmark"] { filter: invert(1) hue-rotate(180deg); }
/* bouton bascule */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgb(var(--fg) / .15); color: rgb(var(--fg) / .7); background: transparent; cursor: pointer; transition: .15s; font-size: 14px; line-height: 1; flex: none; }
.theme-btn:hover { background: rgb(var(--fg) / .1); color: rgb(var(--fg)); }
.theme-btn .sun { display: none; } .theme-btn .moon { display: inline; }
html.light .theme-btn .sun { display: inline; } html.light .theme-btn .moon { display: none; }