/* ========================================================
   GESTION DE L'AFFICHAGE SOLEIL / LUNE
======================================================== */

/* 1. PAR DÉFAUT (Mode Clair) :
   On affiche le soleil (ou la lune selon votre logique) et on masque l'autre */
#theme-toggle .icon-moon {
    display: none !important;
}

#theme-toggle .icon-sun {
    display: inline-block !important; /* ou flex */
}

/* 2. EN MODE SOMBRE (quand html a la classe .dark) :
   On inverse : on masque le soleil et on affiche la lune */
html.dark #theme-toggle .icon-sun {
    display: none !important;
}

html.dark #theme-toggle .icon-moon {
    display: inline-block !important; /* ou flex */
}
/* Nettoyage et forçage du bouton Toggle */
#theme-toggle {
    /* 1. Réinitialisation des styles du thème */
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 9999px !important; /* Style pilule */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;

    /* 2. Style en mode clair (Light) */
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Hover en mode clair */
#theme-toggle:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 3. Style en mode sombre (Dark) */
html.dark #theme-toggle {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* Hover en mode sombre */
html.dark #theme-toggle:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Si vous avez une icône SVG à l'intérieur */
#theme-toggle svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    display: block !important;
    pointer-events: none !important; /* Évite les bugs de clic sur le SVG */
}

/* 1. Écrase le fond de base et du body */
html.dark,
html.dark body {
    background-color: #121827 !important;
    color: #f3f4f6 !important;
}

/* 2. Écrase les conteneurs Elementor (Flexbox et anciennes sections) */
html.dark .elementor,
html.dark .elementor-section,
html.dark .e-con,
html.dark .e-con-inner,
html.dark .elementor-top-section {
    background-color: #121827 !important;
}

/* 3. Écrase les titres et paragraphes */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark p,
html.dark span,
html.dark .elementor-heading-title,
html.dark .elementor-widget-text-editor {
    color: #f3f4f6 !important;
}

/* Transition fluide lors du passage jour/nuit */
*, *::before, *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* Surcharge des variables globales Elementor */
html.dark {
    /* 1. Couleurs système Elementor */
    --e-global-color-primary: #FFFFFF;     /* Titres */
    --e-global-color-secondary: #CBD5E1;   /* Sous-titres */
    --e-global-color-text: #94A3B8;        /* Textes courants */
    --e-global-color-accent: #38BDF8;      /* Boutons / Accents */

    /* 2. Vos couleurs personnalisées Elementor (ajoutez leurs IDs ici) */
    --e-global-color-fond-page: #0B0F19;
    --e-global-color-carte: #161E2E;
    --e-global-color-bordure: #242F42;
}

/* Fond général de la page */
html.dark body {
    background-color: #0B0F19 !important;
}


/* Forcer le dark mode sur Elementor */
html.dark,
html.dark body,
html.dark main,
html.dark .elementor,
html.dark .elementor-section,
html.dark .e-con,
html.dark .e-con-inner {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* Forcer les textes et titres */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark .elementor-heading-title {
    color: #f8fafc !important;
}

/* Forcer les liens non-boutons */
html.dark a:not(.elementor-button) {
    color: #60a5fa !important;
}