/* =========================================================
   THÈMES PREMIUM (BASÉS SUR LES LOGOS IMPACT 361)
   ========================================================= */

/* --- THÈME 1 : CLAIR (Logo 1 - Fond Blanc) --- */
:root {
    --bg-color: #ffffff;           /* Blanc pur */
    --text-color: #000000;         /* Noir intense (comme le texte IMPACT du logo 1) */
    --text-muted: #555555;         /* Gris élégant pour les sous-titres */
    --primary-color: #E60000;      /* Rouge IMPACT (Boutons et accents) */
    --primary-hover: #cc0000;      /* Rouge légèrement plus sombre au survol */
    --header-bg: #ffffff;          /* Header blanc */
    --btn-text: #ffffff;           /* Texte des boutons en blanc */
}

/* --- THÈME 2 : SOMBRE (Logo 2 - Fond Noir) --- */
[data-theme="dark"] {
    --bg-color: #000000;           /* Noir absolu (Pitch Black) comme le logo 2 */
    --text-color: #ffffff;         /* Blanc pur pour un contraste maximal */
    --text-muted: #aaaaaa;
    --primary-color: #E60000;      /* Rouge IMPACT */
    --primary-hover: #ff1a1a;      /* Rouge plus vif au survol sur fond noir */
    --header-bg: #000000;          /* Header noir absolu */
    --btn-text: #ffffff;
}

/* --- THÈME 3 : ROUGE (Logo 3 - Fond Rouge) --- */
[data-theme="red"] {
    --bg-color: #E60000;           /* Fond 100% Rouge IMPACT comme le logo 3 */
    --text-color: #ffffff;         /* Texte blanc pur */
    --text-muted: #ffcccc;         /* Blanc cassé/rosé pour les textes secondaires */
    --primary-color: #000000;      /* Boutons noirs (comme le "361" du logo 3) */
    --primary-hover: #222222;      /* Bouton légèrement gris foncé au survol */
    --header-bg: #cc0000;          /* Header rouge foncé pour bien séparer du fond */
    --btn-text: #ffffff;           /* Texte des boutons en blanc */
}