/* ============================================================
   VARIABLES — BOUTON ET MODE SOMBRE
   Modifiez ces valeurs pour personnaliser l'apparence du mode nuit
   ============================================================ */
:root {
    /* Couleurs du mode sombre */
    --mode-sombre-fond-page: black;           /* Fond principal de la page */
    --mode-sombre-fond-elements: #222;        /* Fond du footer et du bouton Linktree */
    --mode-sombre-fond-badges: black;         /* Fond des icônes et badges de date */
    --mode-sombre-couleur-texte: white;       /* Couleur de tous les textes */
    --mode-sombre-couleur-bordures: white;    /* Couleur des contours et bordures */
}

/* ==== BOUTON MODE NUIT ==== */
.theme-toggle {
    position: fixed;
    top: 4rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Icône animée lors de la rotation */
.theme-icon {
    transition: transform 0.5s ease;
}

.theme-toggle.rotating .theme-icon {
    transform: rotate(360deg);
}


/* ============================================================
   MODE SOMBRE (body.dark-mode)
   Ces styles s'activent automatiquement quand le visiteur
   clique sur le bouton lune/soleil
   ============================================================ */

/* Fond et texte de toute la page */
body.dark-mode {
    background: var(--mode-sombre-fond-page);
    color: var(--mode-sombre-couleur-texte);
}

/* Titres */
body.dark-mode #page-title,
body.dark-mode #specificProject__title {
    color: var(--mode-sombre-couleur-texte);
}

/* Footer et bouton Linktree */
body.dark-mode footer,
body.dark-mode #linktree-link {
    background-color: var(--mode-sombre-fond-elements);
    color: var(--mode-sombre-couleur-texte);
}

/* Bordures des cartes, du projet choisi et des médias */
body.dark-mode .project__article,
body.dark-mode #specificProject,
body.dark-mode #specificProject__iframe,
body.dark-mode #specificProject__iframe-short,
body.dark-mode #specificProject__video,
body.dark-mode #specificProject__image,
body.dark-mode #specificProject__thumbnail,
body.dark-mode #specificProject__date,
body.dark-mode #linktree-link {
    border-color: var(--mode-sombre-couleur-bordures);
}

/* Fond du projet choisi (fenêtre de détail d'un projet) */
body.dark-mode #specificProject {
    background-color: var(--mode-sombre-fond-page);
}

/* Fond des icônes de cartes et des badges de date */
body.dark-mode .project__icon,
body.dark-mode .project__date,
body.dark-mode #specificProject__date {
    background-color: var(--mode-sombre-fond-badges);
}

/* Bouton lune/soleil en mode sombre */
body.dark-mode #theme-toggle {
    border: 2px solid var(--mode-sombre-couleur-bordures);
}