/* ==========================================================================
   Phonographe Urbain v3 — socle des thèmes (« l'habit »)
   --------------------------------------------------------------------------
   Le TTL porte le fait ; le thème porte l'habit. Ce socle ne contient aucune
   couleur : il mappe les variables d'un thème sur celles déjà utilisées par
   les pages du site (articles et accueil), pour qu'un thème s'applique sans
   réécrire le HTML.

   Contrat d'un thème (fichiers <theme>.css) :
     [data-theme="<thème>"]                       → variante sombre par défaut
     [data-theme="<thème>"][data-variant="light"] → variante claire
   Variables attendues : --th-bg, --th-surface, --th-surface-2, --th-border,
     --th-text, --th-muted, --th-accent, --th-accent-2, --th-title-font,
     --th-body-font, --th-radius, --th-tracking.
   ========================================================================== */

[data-theme] {
    /* ── Articles (jeu de variables historique) ────────────────────────── */
    --bg: var(--th-bg);
    --surface: var(--th-surface);
    --surface2: var(--th-surface-2);
    --border: var(--th-border);
    --text: var(--th-text);
    --muted: var(--th-muted);
    --red: var(--th-accent);
    --orange: var(--th-accent-2);
    --mono: var(--th-title-font);

    /* ── Accueil (second jeu de variables) ─────────────────────────────── */
    --color-primary: var(--th-bg);
    --color-secondary: var(--th-accent);
    --color-accent: var(--th-accent-2);
    --color-text: var(--th-text);
    --color-text-light: var(--th-muted);
    --color-bg: var(--th-bg);
    --color-white: var(--th-surface);

    background: var(--th-bg);
    color: var(--th-text);
}

[data-theme] body {
    background: var(--th-bg);
    color: var(--th-text);
    font-family: var(--th-body-font);
}

/* Titres : la signature principale d'un thème. */
[data-theme] h1,
[data-theme] h2,
[data-theme] h3,
[data-theme] .card-title,
[data-theme] .theme-title {
    font-family: var(--th-title-font);
    letter-spacing: var(--th-tracking, .5px);
    color: var(--th-accent);
}

/* Filet de signature sous les titres de section. */
[data-theme] .theme-rule {
    height: 2px;
    border: 0;
    background: linear-gradient(90deg, var(--th-accent), transparent 70%);
    margin: .6rem 0 1.2rem;
}

/* Étiquette (thème affiché). */
[data-theme] .theme-badge {
    display: inline-block;
    font-family: var(--th-title-font);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px 10px;
    border: 1px solid var(--th-accent);
    border-radius: var(--th-radius, 4px);
    color: var(--th-accent);
    background: color-mix(in srgb, var(--th-accent) 12%, transparent);
}