/* ════════════════════════════════════════════════════════════════════
   SydePlay — Thème commun à toutes les pages
   ════════════════════════════════════════════════════════════════════
   Thème CLAIR par défaut (identité SydePlay). Le thème sombre est un
   choix de l'utilisateur (ou « système ») via <html data-theme="dark">.
   shell.css reprend la même palette (cohérence sur toutes les pages).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #FDDDEA;
  --surface:   #ffffff;
  --surface-2: #FCEBF1;
  --border:    rgba(74,39,33,0.10);
  --border-2:  rgba(74,39,33,0.18);
  --text:      #4A2721;
  --text-dim:  rgba(74,39,33,0.60);
  --text-mut:  rgba(74,39,33,0.38);
  --accent:    #FF7A58;
  --accent-bg: rgba(255,122,88,0.14);
  --purple:    #4A2721;
  --radius:    12px;
  --radius-lg: 16px;
  --font-size: 15px;   /* ajusté par la page Paramètres (12→18px) */
}

[data-theme="dark"] {
  --bg:        #1b1212;
  --surface:   #251a1a;
  --surface-2: #30201f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --text:      #FDE9F0;
  --text-dim:  rgba(255,255,255,0.55);
  --text-mut:  rgba(255,255,255,0.32);
  --accent:    #FF7A58;
  --accent-bg: rgba(255,122,88,0.16);
  --purple:    #4A2721;
}

* { box-sizing: border-box; }

/* L'attribut hidden doit TOUJOURS l'emporter, même sur display:flex/grid. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-size);
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
