/* Dark mode global (activé via html[data-theme="dark"]) */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Tokens (ne dépendent pas d’Avada) */
  --dm-bg: #0b1115;
  /* Header + footer (aligné sur ton footer #111b21) */
  --dm-surface: #111b21;
  --dm-surface-2: #14222a;
  /* --dm-surface-3: #1e303a; */
  /* --dm-surface-3: #1c313d; */
  --dm-surface-3: #2c4452;
  --dm-text: #e7eef2;
  --dm-muted: #a9bac4;
  --dm-border: rgba(231, 238, 242, 0.14);
  --dm-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);

  /* Accent (on garde l’ADN Avada : teal + jaune) */
  --dm-accent: #3d8887;
  --dm-accent-2: #f9c53e;

  /*
   * Surcharges pragmatiques des variables Avada les plus utilisées dans ton thème enfant.
   * Objectif: faire basculer la plupart des backgrounds/textes sans multiplier les sélecteurs.
   */
  --awb-color1: var(--dm-bg);
  --awb-color2: var(--dm-surface-3);
  --awb-color3: var(--dm-surface-3);
  --awb-color8: var(--dm-text);
  --awb-custom_color_4: rgba(231, 238, 242, 0.20);

  /* On garde une base sombre, mais un poil plus claire pour les éléments “primary dark” */
  /* --awb-custom_color_9: #1b2d35; */
  --awb-custom_color_9: var(--dm-surface-3);
}

/* Base page */
html[data-theme="dark"] body,
html[data-theme="dark"] .fusion-body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #main {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

/* Surfaces (cards/blocs Avada courants) */
html[data-theme="dark"] .fusion-builder-row,
html[data-theme="dark"] .fusion-fullwidth,
html[data-theme="dark"] .fusion-post-cards,
html[data-theme="dark"] .fusion-post-cards-grid,
html[data-theme="dark"] .fusion-post-cards-wrapper {
  color: var(--dm-text);
}

/*
 * Hero section
 */
html[data-theme="dark"] #hero-section::before {
  opacity: 0;
  transform: translateX(-60px);
  animation: hero-statue-fade 1s ease-out 0.4s forwards;
}

@media screen and (max-width: 1199px) {
  html[data-theme="dark"] #hero-section::before {
    left: 50%;
    bottom: 0;
    width: 430px;
    height: 540px;
    transform: translateX(-50%);
    opacity: 0.5;
    animation: none;
  }
}

@keyframes hero-statue-fade {
  from {
      opacity: 0;
      transform: translateX(-60px);
  }
  to {
      opacity: 0.3;
      transform: translateX(0);
  }
}

/*
 * IMPORTANT: ne pas poser un fond sur *toutes* les colonnes/column-wrapper
 * sinon ça crée des aplats empilés. On limite les “surfaces” aux vrais blocs-card.
 */
html[data-theme="dark"] .post-slider-news .post-inner,
html[data-theme="dark"] .popular-post-inner {
  background-color: var(--dm-surface);
}
html[data-theme="dark"] .popular-post-content {
  background-color: var(--dm-surface);
}

/* Flèches slider actu : garder fond clair (sinon --awb-color1 devient sombre en dark mode) */
html[data-theme="dark"] .post-slider-news-next,
html[data-theme="dark"] .post-slider-news-prev {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Bordures / séparateurs */
html[data-theme="dark"] hr,
html[data-theme="dark"] .fusion-separator,
html[data-theme="dark"] .fusion-clearfix,
html[data-theme="dark"] .fusion-border-below-title,
html[data-theme="dark"] .fusion-border-below-title .fusion-title-sep,
html[data-theme="dark"] .fusion-title-sep-container {
  border-color: var(--dm-border) !important;
}

/* Typo : neutraliser les noirs “hérités” */
html[data-theme="dark"] #main p,
html[data-theme="dark"] #main li,
html[data-theme="dark"] #main .fusion-text,
html[data-theme="dark"] #main .fusion-widget-area,
html[data-theme="dark"] #main .fusion-widget-area * {
  color: var(--dm-text);
}

/*
 * Titres Avada : beaucoup utilisent --awb-text-color: var(--awb-color1) en inline.
 * Or en dark mode --awb-color1 est un fond sombre => le titre devient sombre.
 * On force donc la couleur du heading sur la couleur de texte claire du dark mode.
 */
html[data-theme="dark"] .fusion-title .fusion-title-heading,
html[data-theme="dark"] .fusion-title.fusion-title-text .fusion-title-heading {
  color: var(--dm-text) !important;
}

/* Muted */
html[data-theme="dark"] .fusion-meta,
html[data-theme="dark"] .fusion-post-meta,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .fusion-reading-box-container,
html[data-theme="dark"] small {
  color: var(--dm-muted);
}

/* Formulaires */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html[data-theme="dark"] ::placeholder {
  color: rgba(231, 238, 242, 0.65);
}

/* Menus texte en dégradé : passer le “noir” en texte clair */
html[data-theme="dark"] .gradient-menu ul.fusion-menu > li.menu-item > a {
  background-image: linear-gradient(270deg, var(--dm-text) 0%, var(--dm-text) 100%);
}

html[data-theme="dark"] .gradient-menu ul.fusion-menu > li.menu-item > a:hover,
html[data-theme="dark"] .gradient-menu ul.fusion-menu > li.menu-item.current-menu-item > a {
  background-image: linear-gradient(270deg, var(--dm-accent) 0%, var(--dm-text) 100%);
}

/* Titres dégradés : en dark mode, limiter à 2 verts (clair -> foncé) */
html[data-theme="dark"] .gradient-title {
  background-image: linear-gradient(90deg, var(--awb-color5, #3d8887) 0%, var(--awb-custom_color_2, #f9c53e) 100%);
}

/* Éléments de ton thème enfant qui posent le plus souvent souci en dark */
html[data-theme="dark"] .footer-credits {
  color: var(--dm-text) !important;
}

/* Colonnes "paper divider" (mobile) : versions noires en dark mode */
@media screen and (max-width: 767px) {
  html[data-theme="dark"] .col-paper .fusion-column-wrapper::before {
    background-image: url("../images/divider-paper-xs-top-black.png") !important;
  }
  html[data-theme="dark"] .col-paper .fusion-column-wrapper::after {
    background-image: url("../images/divider-paper-xs-bottom-black.png") !important;
  }
}

/* FAQ : bloc sombre + titre/texte blancs */

html[data-theme="dark"] .fusion-faq-shortcode .fusion-panel {
  overflow: hidden;
}

html[data-theme="dark"] .fusion-faq-shortcode .panel-heading,
html[data-theme="dark"] .fusion-faq-shortcode .panel-title,
html[data-theme="dark"] .fusion-faq-shortcode .panel-title > a,
html[data-theme="dark"] .fusion-faq-shortcode .fusion-toggle-heading {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html[data-theme="dark"] .fusion-faq-shortcode .panel-collapse,
html[data-theme="dark"] .fusion-faq-shortcode .panel-body,
html[data-theme="dark"] .fusion-faq-shortcode .toggle-content,
html[data-theme="dark"] .fusion-faq-shortcode .post-content,
html[data-theme="dark"] .fusion-faq-shortcode .panel-body p,
html[data-theme="dark"] .fusion-faq-shortcode .panel-body li {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html[data-theme="dark"] .fusion-filters .fusion-filter.fusion-active a {
  color: var(--dm-accent-2);
  border-color: var(--dm-accent-2);
}

/* Boutons "blog blanc" : garder le style clair, et hover texte blanc */
html[data-theme="dark"] .btn-blog-white,
html[data-theme="dark"] .btn-blog-white * {
  color: #0b1115 !important;
  -webkit-text-fill-color: #0b1115;
}
html[data-theme="dark"] .btn-blog-white:hover,
html[data-theme="dark"] .btn-blog-white:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* CTA posts (post-cta / popular-post-cta) : garder le style de base (bouton clair) */
html[data-theme="dark"] .post-slider-news .post-cta,
html[data-theme="dark"] .post-slider-news .post-cta *,
html[data-theme="dark"] .popular-post-cta,
html[data-theme="dark"] .popular-post-cta * {
  color: #0b1115 !important;
  -webkit-text-fill-color: #0b1115;
}

/* CTA posts : au hover, le texte doit être blanc (comme en light) */
html[data-theme="dark"] .post-slider-news .post-cta:hover,
html[data-theme="dark"] .post-slider-news .post-cta:hover *,
html[data-theme="dark"] .popular-post-cta:hover,
html[data-theme="dark"] .popular-post-cta:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* Badge populaire : fond blanc comme en light (var(--awb-color1) est sombre en dark) */
html[data-theme="dark"] .popular-post-badge,
html[data-theme="dark"] .post-badge {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Tags accueil : garder le style d'origine (bouton clair + texte sombre), et hover texte blanc */
html[data-theme="dark"] .tags-accueil .tag-btn,
html[data-theme="dark"] .tags-accueil .tag-btn * {
  color: #0b1115 !important;
  -webkit-text-fill-color: #0b1115;
}
html[data-theme="dark"] .tags-accueil .tag-btn:hover .tag-btn-text,
html[data-theme="dark"] .tags-accueil .tag-btn:hover .tag-btn-text *,
html[data-theme="dark"] .tags-accueil-toggle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* Bouton défaut Avada : texte blanc en normal + hover */
html[data-theme="dark"] .fusion-button-default,
html[data-theme="dark"] .fusion-button-default * {
  color: #ffffff !important;
}

/* Header / menus Avada (éviter des fonds blancs restants) */
html[data-theme="dark"] .fusion-tb-header,
html[data-theme="dark"] .fusion-tb-header .fusion-fullwidth.fusion-sticky-container,
html[data-theme="dark"] .fusion-header-wrapper,
html[data-theme="dark"] .fusion-header-v1,
html[data-theme="dark"] .fusion-header-v2,
html[data-theme="dark"] .fusion-header-v3,
html[data-theme="dark"] .fusion-header-v4,
html[data-theme="dark"] .fusion-header-v5,
html[data-theme="dark"] .fusion-header-v6,
html[data-theme="dark"] .fusion-header-v7,
html[data-theme="dark"] .fusion-header-v8 {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}

html[data-theme="dark"] .fusion-tb-header .fusion-text {
  color: var(--dm-text) !important;
}

html[data-theme="dark"] .fusion-main-menu > ul > li > a,
html[data-theme="dark"] .fusion-main-menu > ul > li > a * {
  color: var(--dm-text) !important;
}

/* Dropdowns (Avada) */
html[data-theme="dark"] .fusion-main-menu .sub-menu,
html[data-theme="dark"] .fusion-main-menu .sub-menu li,
html[data-theme="dark"] .fusion-main-menu .sub-menu a {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* Menu mobile (AWB) : forcer intitulés blancs (normal + hover + actifs)
   IMPORTANT: en mobile le menu peut être rendu hors de .fusion-tb-header (off-canvas/side-menu). */
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle {
  --awb-active-color: #fff !important;
  --awb-active-bg: var(--dm-surface-2) !important;
  --awb-bg: var(--dm-surface) !important;
}

html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item span.awb-menu__main-background-default {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-right: 0;
  border-left: 0;
}

html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle a.awb-menu__main-a,
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle a.awb-menu__main-a .menu-text {
  color: #fff !important;
}

html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item:hover > a.awb-menu__main-a,
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item:hover > a.awb-menu__main-a .menu-text,
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item.current-menu-item > a.awb-menu__main-a .menu-text,
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item.current_page_item > a.awb-menu__main-a .menu-text,
html[data-theme="dark"] .off-canvas-content nav.awb-menu_mobile-toggle li.menu-item.current-menu-ancestor > a.awb-menu__main-a .menu-text {
  color: #fff !important;
}

html[data-theme="dark"] a.burger-menu {
  background-color: var(--dm-surface-2) !important;
}

/* Footer (éviter fonds clairs sur widgets) */
html[data-theme="dark"] .fusion-footer,
html[data-theme="dark"] .fusion-footer-widget-area,
html[data-theme="dark"] .fusion-footer-copyright-area {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}

/* Séparateurs divider-paper : URLs réécrites en JS vers .../themes/Avada-Child-Theme/images/*-black.png */

/* ToTop : conserver ton gradient mais assurer contraste de l’icône */
html[data-theme="dark"] #toTop,
html[data-theme="dark"] #toTop.fusion-to-top-active {
  color: var(--dm-text) !important;
}