/* ─────────────────────────────────────────────────────────────────────────
   Dark mode Tramontania — surcharge des variables CSS du site.

   Le site est construit sur des variables (--bg, --text, --surface, --border,
   --text-soft...) : le mode sombre ne fait que les redéfinir. Les couleurs
   d'identité (--primary, --accent) sont conservées/adoucies pour le contraste.

   IMPORTANT : les sélecteurs utilisent `html[data-theme=...]` (spécificité
   supérieure à `:root` — même spécificité qu'un attribut seul, l'ordre du
   <style> inline des thèmes saisonniers l'emporterait sinon).

   Mécanique :
     - data-theme="sombre"  → sombre FORCÉ (choix du lecteur dans son profil).
     - data-theme="auto"    → suit la préférence de l'appareil
                              (@media prefers-color-scheme: dark).
     - data-theme="clair"   → toujours clair (surcharge même en appareil sombre).
   ───────────────────────────────────────────────────────────────────────── */

/* Palette sombre (fond bleu nuit, cartes légèrement éclaircies). */
html[data-theme="sombre"] {
    --bg: #0D1B2A;
    --text: #E8EEF5;
    --text-soft: #9AA8B8;
    --surface: #14263A;
    --border: #24394F;
    --secondary: #1A2F45;
    --accent: #4DA3FF;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --bg: #0D1B2A;
        --text: #E8EEF5;
        --text-soft: #9AA8B8;
        --surface: #14263A;
        --border: #24394F;
        --secondary: #1A2F45;
        --accent: #4DA3FF;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
        color-scheme: dark;
    }
}

/* Fond global : les templates posent parfois --bg sur :root via le thème
   saisonnier ; on force la page et le body à suivre les variables. */
html[data-theme="sombre"] body {
    background-color: var(--bg);
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] body {
        background-color: var(--bg);
        color: var(--text);
    }
}

/* ── Zones claires résiduelles fréquentes (les templates passent aux
   variables, ce bloc rattrape les oublis courants). ──────────────────────── */
html[data-theme="sombre"] :is(.compte-card, .article-card, .geoloc__item) {
    background-color: var(--surface);
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] :is(.compte-card, .article-card, .geoloc__item) {
        background-color: var(--surface);
        color: var(--text);
    }
}

/* Images et contenu éditorial : on garde leur éclat (pas de filtre sombre). */