/* ==========================================================================
   theme.css — couleurs, polices et réglages de base communs à tout le site.
   Changer une couleur ici la change partout.
   ========================================================================== */
:root {
  --bg: #e9edf5;          /* fond de page */
  --dot: #cfd6e4;         /* trame de points du fond */
  --card: #ffffff;        /* fond des boîtes */
  --ink: #16161d;         /* texte principal */
  --dim: #5b5f6e;         /* texte secondaire */
  --edge: #16161d;        /* bordures */
  --shadow: #16161d;      /* ombres décalées */
  --pop: #ff4f7b;         /* couleur d'accent du site */

  --f-display: 'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --f-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* Version sombre (suit le réglage de l'appareil) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171923;
    --dot: #262a38;
    --card: #20232f;
    --ink: #f1f0ea;
    --dim: #a4a7b6;
    --edge: #3a3f52;
    --shadow: #07080c;
    --pop: #ff6a90;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--ink); }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pop); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}