/* ═══════════════════════════════════════════════════════════════════════
   theme.css — deux registres Apolyte : nuit (data-theme="night") et crème
   (data-theme="creme", défaut). Une seule feuille + theme.js à inclure sur
   chaque page. Tokens issus du design system (DA/Apolyte Design System).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --night: #0D0E1A; --night-2: #131628; --cream: #F0EDE4; --cream-2: #E7E3D6;
  --gold-bright: #F5C842; --gold-deep: #D9AE2A; --gold-dark: #C49A1F;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* — Nuit (registre du site actuel) — */
:root, :root[data-theme="night"] {
  --bg: #0B0C18; --bg-soft: #11132a;
  --gold: #F5C842; --gold-soft: #d6ad3a;
  --ink: #E6E8F0; --ink-mute: #9ca0b2; --ink-dim: #787c93;
  --line: rgba(245, 200, 66, 0.22); --line-faint: rgba(230, 232, 240, 0.08);
  --grain-opacity: .5;
  /* fenêtres de démo */
  --w-bg: #0f1124; --w-panel: rgba(255,255,255,.025); --w-panel-2: rgba(255,255,255,.045); --w-hover: rgba(255,255,255,.03);
  --w-line: rgba(230,232,240,.08); --w-line-2: rgba(230,232,240,.18); --w-sunk: rgba(0,0,0,.2); --w-on-gold: #0b0c18;
  --w-map: #0c0e21; --w-float: rgba(15,17,36,.97); --w-dot: rgba(230,232,240,.14); --w-track: rgba(255,255,255,.08);
  --w-ok: #5fd39a; --w-warn: #f0a742; --w-info: #7aa2f7; --w-chrome: rgba(255,255,255,.02);
  --w-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35); --w-border: rgba(245,200,66,.18);
}
/* — Crème (DA classique) : appliqué à la fenêtre de démo (élément [data-theme-scope]), la page reste nuit — */
[data-theme="creme"] {
  --bg: #F0EDE4; --bg-soft: #E7E3D6;
  --gold: #C49A1F; --gold-soft: #D9AE2A;
  --ink: #0D0E1A; --ink-mute: #5c5a54; --ink-dim: #8a877f;
  --line: rgba(196, 154, 31, 0.35); --line-faint: rgba(13, 14, 26, 0.1);
  --grain-opacity: .35;
  --w-bg: #FBFAF6; --w-panel: rgba(13,14,26,.03); --w-panel-2: rgba(13,14,26,.055); --w-hover: rgba(13,14,26,.035);
  --w-line: rgba(13,14,26,.09); --w-line-2: rgba(13,14,26,.2); --w-sunk: rgba(13,14,26,.04); --w-on-gold: #0D0E1A;
  --w-map: #F1EEE6; --w-float: rgba(251,250,246,.98); --w-dot: rgba(13,14,26,.14); --w-track: rgba(13,14,26,.08);
  --w-ok: #1f8f5a; --w-warn: #b9741a; --w-info: #3457b2; --w-chrome: rgba(13,14,26,.025);
  --w-shadow: 0 30px 70px rgba(13,14,26,.16), 0 0 0 1px rgba(13,14,26,.04); --w-border: rgba(196,154,31,.35);
}
html, body { background: var(--bg); color: var(--ink); }
[data-theme] { color: var(--ink); transition: background-color .5s var(--ease), color .5s var(--ease); }
[data-theme="creme"] ::selection { background: var(--gold-bright); color: var(--night); }

/* — Bascule (pied de la barre latérale de chaque fenêtre) — */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 9px; border-radius: 8px; width: 100%;
  border: 1px solid var(--w-line-2); background: var(--w-panel); color: var(--ink-mute);
  font-family: var(--f-body, "DM Sans", sans-serif); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .5s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--gold); }
.theme-toggle svg { width: 13px; height: 13px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }