/* @mostajs/geo — thème partagé des pages de démo. Author: Dr Hamid MADANI <drmdh@msn.com>
 *
 * Chargé APRÈS le <style> inline de chaque page → surcharge les variables communes.
 * Par DÉFAUT : SOMBRE (dark). CLAIR via <html data-theme="light">. Le choix est piloté
 * par theme.js (Sombre / Clair / Auto-système), persisté en localStorage.
 *
 * On surcharge les variables communes (--bg, --card, --txt, --muted) ET la couleur du
 * BANDEAU (header/menu) via --header-bg, pour que le bandeau suive aussi le thème. */

:root {                       /* SOMBRE — défaut (= rendu original des pages) */
  --bg:    #0f172a;
  --card:  #1e293b;
  --txt:   #e2e8f0;
  --muted: #94a3b8;
  --header-bg: #020617;
  color-scheme: dark;
}
:root[data-theme="light"] {   /* CLAIR */
  --bg:    #f8fafc;
  --card:  #ffffff;
  --txt:   #0f172a;
  --muted: #475569;
  --header-bg: #e6edf6;
  color-scheme: light;
}

/* Le bandeau (header) suit le thème (les pages le codent souvent en #020617 en dur). */
header { background: var(--header-bg) !important; }
header, header * { border-color: color-mix(in srgb, var(--txt) 14%, transparent); }

/* Sélecteur de thème flottant (injecté par theme.js). */
#theme-switch {
  position: fixed; right: 12px; bottom: 12px; z-index: 99999;
  display: flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--txt);
  border: 1px solid color-mix(in srgb, var(--txt) 18%, transparent);
  border-radius: 999px; padding: 6px 10px; font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); font-family: system-ui, sans-serif;
}
#theme-switch label { color: var(--muted); }
#theme-switch select {
  font: inherit; border: 1px solid color-mix(in srgb, var(--txt) 25%, transparent);
  border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--txt);
}
