/* Dark theme overrides - loaded after all.css, scoped under body.dark-theme */

/* Palette : ardoise foncee (pas de noir pur) */
:root {
    --dt-bg: #2c2d2f;
    --dt-surface: #404244;
    --dt-surface-hover: #272f38;
    --dt-border: #333c46;
    --dt-text: #e4e6eb;
    --dt-text-muted: #9aa0a6;
    --dt-brand: #b10e0f;
}

body.dark-theme {
    background-color: var(--dt-bg);
    color: var(--dt-text);
}

body.dark-theme a:link,
body.dark-theme a:visited {
    color: var(--dt-text);
}

/* Contenu principal / blocs blancs */
body.dark-theme .wrapper,
body.dark-theme .main {
    background-color: var(--dt-bg);
}

body.dark-theme .grey_bg,
body.dark-theme .black_box{
    background-color: var(--dt-surface);
}

.paginationEmission .active {
    background-color: var(--dt-surface);
}
.paginationEmission a:hover {
    background-color: var(--dt-bg);
}
/* Header / megamenu - la section "UPD 2023 TEMP" plus bas dans all.css
   repasse le menu en fond blanc / texte noir, donc on doit recouvrir
   les memes selecteurs ici (avec !important la ou all.css en met). */
body.dark-theme .header-container,
body.dark-theme .megamenu_container,
body.dark-theme .megamenu_dark_bar,
body.dark-theme .megamenu>li,
body.dark-theme .megamenu_dark_bar .megamenu>li:hover,
body.dark-theme .megamenu_dark_bar .megamenu>li.active {
    background-color: var(--dt-bg);
}

body.dark-theme .megamenu_dark_bar .megamenu>li>a,
body.dark-theme .megamenu>li.elhov,
body.dark-theme .megamenu_dark_bar .megamenu>li:hover>a {
    background-color: var(--dt-bg);
    color: var(--dt-text);
    text-shadow: none;
}

body.dark-theme .megamenu>li.megamenu_searchform {
    background-color: var(--dt-bg) !important;
}

/* Dropdown "Emissions" */
body.dark-theme .megamenu_light .megamenu li .dropdown_container,
body.dark-theme .megamenu_light .megamenu li .dropdown_fullwidth,
body.dark-theme .megamenu_light .megamenu li .dropdown_flyout li ul {
    background-color: var(--dt-surface);
    color: var(--dt-text);
}

body.dark-theme .megamenu_light .megamenu li ul li,
body.dark-theme .megamenu_light .megamenu li ol li,
body.dark-theme .megamenu_light .megamenu>li>div a,
body.dark-theme .megamenu_light .megamenu p,
body.dark-theme .megamenu_light .megamenu h1,
body.dark-theme .megamenu_light .megamenu h2,
body.dark-theme .megamenu_light .megamenu h3,
body.dark-theme .megamenu_light .megamenu h4,
body.dark-theme .megamenu_light .megamenu h5,
body.dark-theme .megamenu_light .megamenu h6 {
    background-color: var(--dt-surface);
    color: var(--dt-text);
    text-shadow: none;
    border-color: var(--dt-border);
}

body.dark-theme .megamenu_light .megamenu li ul li:hover,
body.dark-theme .megamenu_light .megamenu li ol li:hover {
    background-color: var(--dt-surface-hover);
}

/* Logo : le fichier actuel est un .jpg avec fond blanc.
   En attendant le .png transparent, on neutralise le carre blanc. */
body.dark-theme #logo img,
body.dark-theme #logoMob img {
    background-color: var(--dt-text);
    border-radius: 4px;
    padding: 2px;
}

/* Champ de recherche : on garde un fond clair pour que l'icone loupe
   (image sombre) et le texte/placeholder restent lisibles. */
body.dark-theme #keywords {
    background-color: #ededed;
    color: #333;
    border-color: var(--dt-border);
}

body.dark-theme #keywords::placeholder {
    color: #6b6b6b;
    opacity: 1;
}

/* Titres de section : le fond blanc.gif sert a masquer la ligne
   rouge derriere le texte (design clair). En dark on le remplace
   par le fond de la page pour eviter un rectangle blanc. */

body.dark-theme #segments h3,
body.dark-theme h3  {
    background: var(--dt-bg);
}

/* Vignettes de videos (accueil, listes) */
body.dark-theme .bloc1_listeVideo .titreElement_Video {
    color: var(--dt-text);
}

body.dark-theme .bloc1_listeVideo .MeoElement_Video {
    color: var(--dt-text-muted);
}

/* Horaire : le wrapper n'a pas de fond propre, il se fond dans le body.
   On le distingue un peu du reste de la page. */
body.dark-theme .horaire-container {
    background-color: var(--dt-surface);
    box-shadow: 3px 2px 20px 0 rgba(0, 0, 0, .5);
}

/* Horaire emission (page emission.group) : le .mobContent a un fond
   clair (#f3f3f3) avec texte noir en dur, illisible sur fond sombre. */
body.dark-theme .bloc_horaireEmission .mobContent {
    background-color: var(--dt-bg);
    color: var(--dt-text);
}

body.dark-theme .bloc_horaireEmission .mobContent li,
body.dark-theme .bloc_horaireEmission .mobContent li span.jour,
body.dark-theme .bloc_horaireEmission .mobContent li span.heure {
    color: var(--dt-text);
}

body.dark-theme .bloc_horaireEmission .mobContent a {
    color: var(--dt-text);
}

/* .MEO_saison est gris fonce (#595959), illisible sur fond sombre */
body.dark-theme .MEO_saison {
    color: var(--dt-text-muted);
}

/* .adresse garde son fond clair (#E7E7E7) meme en dark : le texte et
   les liens doivent rester sombres pour rester lisibles dessus. */
body.dark-theme .adresse,
body.dark-theme .adresse a:link,
body.dark-theme .adresse a:visited {
    color: #333;
}

/* Listes zebrees (horaire, recherche, emissions disponibles) */
body.dark-theme .horaire_list ul li:nth-child(even),
body.dark-theme .emission_dispo ul li:nth-child(even),
body.dark-theme .bloc_horaireEmission ul li:nth-child(even),
body.dark-theme .recherche li:nth-child(even),
body.dark-theme .jour_horaire ul li {
    background-color: var(--dt-surface);
}

body.dark-theme .horaire_list a,
body.dark-theme .emission_dispo a {
    color: var(--dt-text-muted);
}

/* Footer */
body.dark-theme .footer-container {
    background-color: var(--dt-bg) !important;
    border-top-color: var(--dt-border);
    border-bottom-color: var(--dt-border);
}

body.dark-theme .footer-container a,
body.dark-theme .footMenu a,
body.dark-theme .foot-coord h3,
body.dark-theme .foot-coord p,
body.dark-theme .foot-coord li {
    color: var(--dt-text-muted);
}

body.dark-theme .footer-container a:hover,
body.dark-theme .footMenu a:hover {
    color: var(--dt-text);
}

/* Carre gris pale = .copyright-container (image de fond + bg #525151) */
body.dark-theme .copyright-container {
    background-color: var(--dt-bg);
    background-image: none;
}

body.dark-theme .copyright,
body.dark-theme .copyright-container a {
    color: var(--dt-text-muted);
}

body.dark-theme .copyright a:hover {
    color: var(--dt-text);
}