:root {
    /* Palette des Ténèbres (Inspirée de tes dessins) */
    --couleur-fond-sombre: #1A1A2E;
    /* Bleu-Gris très foncé, moody */
    --couleur-texte-principal: #FFFFFF;

    /* Palette de la Résilience (Inspirée du logo) */
    --couleur-accent-primaire: #FF7F50;
    /* Orange Vif/Ambre (pour les boutons) */
    --couleur-accent-secondaire: #8B458E;
    /* Violet Aubergine (pour les liens/survol) */

    /* Couleurs du Mode Clair (que nous allons définir plus tard) */
    --couleur-fond-clair: #F5F5F5;
    --couleur-texte-clair: #333333;
}

/* La classe .light-mode sera ajoutée au BODY par du JavaScript plus tard. */
.light-mode {
    /* Surcharge du Fond et Texte */
    --couleur-fond-sombre: #F5F5F5;
    /* Devient un gris très clair */
    --couleur-texte-principal: #333333;
    /* Devient un noir doux */

    /* Surcharge des Accents (pour que le violet soit moins agressif sur fond clair) */
    --couleur-accent-secondaire: #9A5B9C;
    /* Violet légèrement adapté */
    /* L'accent Orange (#FF7F50) reste le même pour une cohérence forte */
}

/* * ----------------------------------------
 * Style du Bouton de Bascule (esthétique)
 * ----------------------------------------
 */
#mode-toggle {
    display: block;
    /* Pour le centrer si besoin */
    margin: 10px auto;
    padding: 8px 15px;
    border: 2px solid var(--couleur-accent-primaire);
    background-color: transparent;
    color: var(--couleur-texte-principal);
    cursor: pointer;
    font-weight: bold;
}

/* Changement de couleur au survol du bouton (mode sombre) */
#mode-toggle:hover {
    background-color: var(--couleur-accent-primaire);
    color: var(--couleur-fond-sombre);
    /* Le texte devient de la couleur du fond sombre */
}

/* Changement de couleur au survol du bouton (mode clair) */
.light-mode #mode-toggle:hover {
    background-color: var(--couleur-accent-primaire);
    color: var(--couleur-fond-sombre);
    /* Le texte devient de la couleur du fond clair */
}

/* * ----------------------------------------
 * Styles de base (Mode Sombre par défaut)
 * ----------------------------------------
 */

body {
    /* Utilisation des variables pour le fond et le texte */
    background-color: var(--couleur-fond-sombre);
    color: var(--couleur-texte-principal);
    font-family: sans-serif;
    /* Remplacer par une police de ton choix plus tard */
    line-height: 1.6;
    margin: 0;
    /* Enlever la marge par défaut du navigateur */
}

/* Style du menu de navigation */
nav ul {
    list-style: none;
    /* Enlève les points des listes */
    padding: 0;
    text-align: center;
}

nav li {
    display: inline;
    /* Affiche les liens du menu sur la même ligne */
    margin: 0 15px;
}

nav a {
    color: var(--couleur-accent-secondaire);
    /* Liens en Violet Aubergine */
    text-decoration: none;
    font-weight: bold;
}

/* Style des titres pour qu'ils ressortent */
h1,
h2 {
    color: var(--couleur-accent-primaire);
    /* Titres en Orange Ambre */
    text-align: center;
    padding-top: 20px;
}