/* 
 * Styles spécifiques pour les transitions de thème
 * Ce fichier aide à gérer l'affichage du thème et éviter les problèmes liés au cache
 */

/* Styles globaux de transition */
.theme-transitioning {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html.theme-transitioning * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Force du rafraîchissement du thème */
html:not(.theme-transitioning) {
    /* Aucune transition par défaut pour éviter les effets indésirables */
    transition: none !important;
}

/* Variables CSS pour le thème clair (par défaut) */
:root, html.light-theme {
    /* Variables existantes conservées pour compatibilité */
    transition: none;
}

/* Variables CSS pour le thème sombre - Appliqué à HTML */
html.dark-theme {
    /* Variables existantes conservées pour compatibilité */
    transition: none;
    background-color: var(--dark-bg, #121212) !important;
    color: var(--text-color-dark, #ffffff) !important;
}

/* S'assurer que le thème s'applique à la fois sur HTML et BODY */
html.dark-theme body {
    /* S'assurer que body a aussi le thème sombre même si le cache interfère */
    background-color: var(--dark-bg, #121212) !important;
    color: var(--text-color-dark, #ffffff) !important;
}

/* Prévention du "flash of unstyled content" */
html.dark-theme, 
html.dark-theme body {
    background-color: #121212 !important; /* Fallback si les variables CSS ne sont pas encore chargées */
}

/* Styles spécifiques pour la page calculateur */
html.calculator-page .theme-toggle {
    position: fixed !important;
    z-index: 2500 !important;
    transition: background-color 0.5s ease !important;
}

/* Styles pour le thème sombre sur la page d'accueil */
html.home-page.dark-theme {
    background-color: var(--dark-bg, #121212) !important;
}

/* Transition inter-page pour éviter les problèmes de thème */
.theme-reset {
    opacity: 0;
    transition: opacity 0.1s ease !important;
}

.theme-reset.theme-applied {
    opacity: 1;
}

@media (max-width: 768px) {
    html.calculator-page .theme-toggle {
        bottom: 80px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }
    
    html.calculator-page.dark-theme .theme-toggle {
        background-color: #ff6b6b !important; /* Couleur d'accent pour plus de visibilité */
    }
}

/* Support de la préférence système sombre/clair */
@media (prefers-color-scheme: dark) {
    /* Seulement si aucun thème n'est explicitement défini (première visite) */
    html:not(.light-theme):not(.dark-theme) {
        background-color: #121212;
    }
}

/* Correction pour le rendu direct en cas de problème de cache */
html.dark-theme:not(.theme-manager-initialized),
html.dark-theme:not(.theme-manager-initialized) body {
    /* Force les couleurs sans attendre que les variables CSS soient chargées */
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* Empêcher les transitions initiales */
html:not(.theme-manager-initialized) * {
    transition: none !important;
}

/* Forcer le thème sombre sur certains éléments spécifiques qui posent problème */
html.dark-theme .navbar,
html.dark-theme .hero,
html.dark-theme .footer,
html.dark-theme .background-gradient {
    background-color: var(--dark-bg, #121212) !important;
    color: var(--text-color-dark, #ffffff) !important;
}

/* Assurer la compatibilité avec l'ancien système de thème */
html.theme-initialized:not(.theme-manager-initialized) {
    /* Cette classe était utilisée par l'ancien système, désormais remplacée par theme-manager-initialized */
}

/* Marquer comme initialisé après le chargement complet */
html.theme-manager-initialized {
    /* Cette classe est ajoutée par le nouveau gestionnaire de thème une fois tout chargé */
}