/* 1. Définis les variables par défaut en haut de ton fichier */
:root {
    --bg-color: #1a0f1f;
    --card-bg: #2a1a2f;
    --text-color: #ffffff;
    --accent-color: #a24fff;
    --accent-gradient: linear-gradient(135deg, #ff7a45 0%, #5b1678 100%);
}

/* 2. Les variantes de thèmes (écrasent les variables ci-dessus) */
body.theme-neon {
    --bg-color: #0d0221;
    --card-bg: #1a0826;
    --accent-color: #00ff88;
    --accent-gradient: linear-gradient(135deg, #00ff88 0%, #602080 100%);
}

body.theme-stealth {
    --bg-color: #050505;
    --card-bg: #111111;
    --accent-color: #ffffff;
    --accent-gradient: linear-gradient(135deg, #333 0%, #000 100%);
}

/* 3. APPLIQUE LES VARIABLES à ta structure existante */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

header, .hero {
    background: var(--accent-gradient);
}

.jouer-card, .actu-card, .modal-content {
    background-color: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.1);
}

.cta-button {
    background: var(--accent-gradient);
}