/************************************************************
* IDEALCOM DARK MODE — CSS v1.2
* Plugin: idealcom-darkmode
* Version: 1.2.0
* Architecture: Tokens sémantiques internes + mapping Avada
* (c) 2026 Agence de communication Idealcom | Lausanne | Suisse
* https://www.idealcom.ch
* Proprietary - Usage, copying, modification or redistribution
* without explicit permission is prohibited.
************************************************************/

/* ════════════════════════════════════════════════════════════════════
     1. TOKENS INTERNES & MAPPING AVADA — Architecture v1.2
       
     Cette section définit les tokens sémantiques du plugin (--dm-*) 
     et leur mapping vers les variables Avada (--awb-*).
       
     Les valeurs par défaut ci-dessous sont des fallbacks.
     La configuration admin (PHP inline) surcharge ces valeurs.
     ════════════════════════════════════════════════════════════════════ */

:root {
/* Icônes disponibles en light mode */
--awb-icon-light:  #e5e7eb;
--awb-icon-dark:   #1b3153;
--dm-icon-dark:     #1b3153;         /* Nouveau token dm_icon_dark */
}

html.dark {
/* === TOKENS SÉMANTIQUES INTERNES === */

/* Backgrounds */
--dm-bg-base:          #07090e;
--dm-bg-alt:           #0b0d12;
--dm-bg-elevated:      #1e293b;       /* Ancien token, conservé pour rétrocompatibilité*/
--dm-bg-surface:       #1e293b;        /* Nouveau : fonds de surfaces élevées */
--dm-border-divider:    #2d3748;       /* Nouveau : séparateurs de menu dropdown */
--dm-bg-footer:        #040609;
--dm-bg-overlay:   rgba(11, 20, 33, 0.80);

/* Text Colors */
--dm-text-primary:       #cfd0d2;
--dm-text-light:         #eff0f0;
--dm-text-inverse:       #1b3153;

/* Titles */
--dm-title-primary:      #eff0f0;

/* Accents */
--dm-accent:             #38bdf8;
--dm-accent-hover:       #7dd3fc;

/* Borders */
--dm-border-default: #4b5563;

/* Icons */
--dm-icon-light:          #e5e7eb;



/* === MAPPING VERS VARIABLES AVADA === */

/* Color slots Avada */
--awb-color1: var(--dm-bg-base);
--awb-color2: var(--dm-bg-alt);
--awb-color3: var(--dm-bg-surface);       /* Refactoring : dm_bg_elevated → dm_bg_surface */
--awb-color4: var(--dm-text-primary);
--awb-color5: var(--dm-bg-submenu); /* submenu specific - peut être personnalisé */
--awb-color6: var(--dm-accent);
--awb-color7: var(--dm-accent-hover);
--awb-color8: var(--dm-text-primary);

/* Variables sémantiques Avada */
--awb-text-color:       var(--dm-text-primary);
--awb-form-label-color: var(--dm-text-primary);
--awb-text-dark:        var(--dm-text-primary);
--awb-text-light:       var(--dm-text-light);
--awb-title-color:      var(--dm-title-primary);
--awb-accent:           var(--dm-accent);
--awb-link-default:     var(--dm-accent);
--awb-link-hover:       var(--dm-accent-hover);
--awb-footer-bg:        var(--dm-bg-footer);
--awb-surface:          var(--dm-bg-surface);        /* Refactoring : dm_bg_elevated → dm_bg_surface */
--awb-gray-border:      var(--dm-border-default);

/* Backgrounds Avada — !important: surcharge inline styles Avada */
--bg_color:         var(--dm-bg-base) !important;
--content_bg_color: var(--dm-bg-base) !important;
--bg-color:         var(--dm-bg-base) !important;
--bg-color-overlay: none !important;

/* Boutons Avada — !important: surcharge inline vars */
--button_gradient_top_color:    var(--dm-accent) !important;
--button_gradient_bottom_color: var(--dm-accent) !important;
--button_text_color:            var(--dm-bg-base) !important;
--button_gradient_top_color_hover:    var(--dm-accent-hover) !important;
--button_gradient_bottom_color_hover: var(--dm-accent-hover) !important;
--button_text_color_hover:            var(--dm-bg-base) !important;

/* Live search */
--awb-live-results-link-color:   var(--dm-text-light) !important;
--awb-live-results-border-color: var(--dm-border-default) !important;
}


/* ════════════════════════════════════════════════════════════════════
     2. FOND & BODY
   Tokens utilisés: --dm-bg-base, --dm-text-primary
   ════════════════════════════════════════════════════════════════════ */
html.dark body,
html.dark #main,
html.dark #wrapper,
html.dark .fusion-body,
html.dark html body.custom-background {
  background-color: var(--dm-bg-base) !important; /* !important: surcharge Avada inline */
  background-image: none !important;
}

html.dark body,
html.dark .fusion-body {
  color: var(--dm-text-primary);
}

html.dark .fusion-builder-row,
html.dark .fusion-fullwidth {
  color: var(--dm-text-primary);
}


/* ════════════════════════════════════════════════════════════════════
     3. TITRES — Architecture v1.1.1 Corrigée
       
   LOGIQUE :
     1. Règle globale : titres standard en dark mode (--dm-title-primary)
     2. Exceptions contextes : titres sur fonds sombres (--dm-text-light)
     3. Reset boutons : hérite couleur texte bouton
       
   CORRECTION CRITIQUE v1.1.1 :
     - Bug syntaxe ligne 139 corrigé : chaque h1-h6 a le préfixe "html.dark"
     - Suppression bloc html:not(.dark) dangereux (lignes 236-294)
     - !important réduit au strict nécessaire
     - Light mode retrouve automatiquement Avada natif
       
   Tokens utilisés: --dm-title-primary, --dm-text-light
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   RÈGLE GLOBALE : Titres standard en dark mode
   Applique --dm-title-primary par défaut sur tous les titres
   ───────────────────────────────────────────────────────────────────── */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: var(--dm-title-primary);
  background: none !important; /* !important: neutralise gradients Avada */
      -webkit-background-clip: unset !important;
  background-clip: unset !important;
      -webkit-text-fill-color: var(--dm-title-primary) !important; /* !important: surcharge Avada transparent */
}

/* ─────────────────────────────────────────────────────────────────────
   EXCEPTION : Composant .fusion-title Avada
   Surcharge la règle globale pour Avada Title Element
   ───────────────────────────────────────────────────────────────────── */
html.dark .fusion-title h1,
html.dark .fusion-title h2,
html.dark .fusion-title h3,
html.dark .fusion-title h4,
html.dark .fusion-title h5,
html.dark .fusion-title h6 {
  color: var(--dm-title-primary);
      -webkit-text-fill-color: var(--dm-title-primary);
  background: none !important;
      -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ─────────────────────────────────────────────────────────────────────
   EXCEPTION : Titres dans boutons Avada
   Les titres dans boutons héritent la couleur du texte bouton
   ───────────────────────────────────────────────────────────────────── */
html.dark .fusion-button h1,
html.dark .fusion-button h2,
html.dark .fusion-button h3,
html.dark .fusion-button h4,
html.dark .fusion-button h5,
html.dark .fusion-button h6 {
  color: inherit !important;
      -webkit-text-fill-color: inherit !important;
  background: none !important;
      -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ─────────────────────────────────────────────────────────────────────
   EXCEPTIONS : Titres sur fonds sombres en dark mode
       
   CONTEXTE :
   Ces éléments ont un fond sombre en light mode (footer, overlays, boxes).
   En dark mode, leurs titres doivent rester clairs (--dm-text-light)
   au lieu d'utiliser --dm-title-primary.
       
   TECHNIQUE :
   Spécificité CSS plus élevée (0,2,1) surcharge règle globale (0,1,1).
   Pas besoin de !important sur color grâce à la spécificité.
   ───────────────────────────────────────────────────────────────────── */

/* Footer principal */
html.dark .footer-main h1,
html.dark .footer-main h2,
html.dark .footer-main h3,
html.dark .footer-main h4,
html.dark .footer-main h5,
html.dark .footer-main h6 {
  color: var(--dm-text-light);
      -webkit-text-fill-color: var(--dm-text-light);
}

/* Footer custom Idealcom */
html.dark .idealcom-footer h1,
html.dark .idealcom-footer h2,
html.dark .idealcom-footer h3,
html.dark .idealcom-footer h4,
html.dark .idealcom-footer h5,
html.dark .idealcom-footer h6 {
  color: var(--dm-text-light);
      -webkit-text-fill-color: var(--dm-text-light);
}

/* Content boxes avec fond sombre */
html.dark .fusion-content-box-hover.dark-bg h1,
html.dark .fusion-content-box-hover.dark-bg h2,
html.dark .fusion-content-box-hover.dark-bg h3,
html.dark .fusion-content-box-hover.dark-bg h4,
html.dark .fusion-content-box-hover.dark-bg h5,
html.dark .fusion-content-box-hover.dark-bg h6,
html.dark .content-box-column.dark-bg h1,
html.dark .content-box-column.dark-bg h2,
html.dark .content-box-column.dark-bg h3,
html.dark .content-box-column.dark-bg h4,
html.dark .content-box-column.dark-bg h5,
html.dark .content-box-column.dark-bg h6 {
  color: var(--dm-text-light);
      -webkit-text-fill-color: var(--dm-text-light);
}

/* Classes utilitaires génériques */
html.dark .dark-bg h1,
html.dark .dark-bg h2,
html.dark .dark-bg h3,
html.dark .dark-bg h4,
html.dark .dark-bg h5,
html.dark .dark-bg h6,
html.dark .box-dark h1,
html.dark .box-dark h2,
html.dark .box-dark h3,
html.dark .box-dark h4,
html.dark .box-dark h5,
html.dark .box-dark h6,
html.dark .dark-surface h1,
html.dark .dark-surface h2,
html.dark .dark-surface h3,
html.dark .dark-surface h4,
html.dark .dark-surface h5,
html.dark .dark-surface h6 {
  color: var(--dm-text-light);
      -webkit-text-fill-color: var(--dm-text-light);
}

/* Hero overlay glassmorphism (classe utilitaire) */
html.dark .dark-mode-overlay h1,
html.dark .dark-mode-overlay h2,
html.dark .dark-mode-overlay h3,
html.dark .dark-mode-overlay h4,
html.dark .dark-mode-overlay h5,
html.dark .dark-mode-overlay h6 {
  color: var(--dm-text-light);
      -webkit-text-fill-color: var(--dm-text-light);
}

/* ════════════════════════════════════════════════════════════════════
     4. LIENS
   Tokens utilisés: --dm-accent, --dm-accent-hover
   ════════════════════════════════════════════════════════════════════ */
html.dark a {
  color: inherit;
}
html.dark a:active {
  color: var(--dm-accent) !important; /* !important: surcharge Avada active state */
}
html.dark .fusion-text a,
html.dark .fusion-builder-row a:not(.fusion-button):not(.awb-menu__main-a):not(.awb-menu__sub-a) {
  color: var(--dm-accent);
}
html.dark .fusion-text a:hover,
html.dark .fusion-builder-row a:not(.fusion-button):not(.awb-menu__main-a):not(.awb-menu__sub-a):hover {
  color: var(--dm-accent-hover);
}


/* ════════════════════════════════════════════════════════════════════
     5. BOUTONS
      Tokens utilisés: --dm-accent, --dm-accent-hover, --dm-bg-surface
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-button:hover {
    --button_gradient_top_color: var(--dm-accent-hover) !important;
    --button_gradient_bottom_color: var(--dm-accent-hover) !important;
    --button_border_color: var(--dm-accent-hover) !important;
}

/* Exception — bouton fond clair à inverser */
html.dark .btn-dark-invert.fusion-button {
  background-color: var(--dm-bg-surface) !important;    /* Refactoring : dm_bg_elevated → dm_bg_surface */
  border-color: var(--dm-bg-surface) !important;
}
html.dark .btn-dark-invert .fusion-button-text {
  color: var(--dm-accent) !important;
      -webkit-text-fill-color: var(--dm-accent) !important;
}

/* Fix boutons standard : texte sombre sur fond accent au hover */
html.dark .fusion-button:hover .fusion-button-text {
  color: var(--dm-bg-base) !important;
      -webkit-text-fill-color: var(--dm-bg-base) !important;
}

/* Boutons outline/transparents : texte accent au hover */
html.dark .btn-dark-outline.fusion-button:hover .fusion-button-text,
html.dark .titre-box-icon-home .fusion-button:hover .fusion-button-text {
  color: var(--button_accent_hover_color, var(--dm-accent)) !important;
      -webkit-text-fill-color: var(--button_accent_hover_color, var(--dm-accent)) !important;
}

/* Boutons formulaires (CF7, commentaires) : texte sombre sur fond accent au hover */
html.dark .wpcf7-submit:hover,
html.dark .wpcf7-form input[type="submit"]:hover,
html.dark .comment-form input[type="submit"]:hover,
html.dark input.button-default:hover {
  color: var(--dm-bg-base) !important;
  -webkit-text-fill-color: var(--dm-bg-base) !important;
}

/* ════════════════════════════════════════════════════════════════════
     6. SECTIONS ALTERNÉES
   Tokens utilisés: --dm-bg-alt
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-fullwidth.fusion-parallax-none,
html.dark .bg-gray,
html.dark .section-alt {
  background-color: var(--dm-bg-alt);
}


/* ════════════════════════════════════════════════════════════════════
     7. LOGO
   Switch logo light/dark selon mode
   ════════════════════════════════════════════════════════════════════ */
.logo-light,
span.logo-light { display: block !important; }

.logo-dark,
span.logo-dark { display: none !important; }

html.dark .logo-light,
html.dark span.logo-light { display: none !important; }

html.dark .logo-dark,
html.dark span.logo-dark { display: block !important; }

/* ════════════════════════════════════════════════════════════════════
     8. TOGGLE DARK MODE — ICÔNES LUNE / SOLEIL
        Tokens utilisés: --dm-icon-light, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
.darkmode-toggle {
  position: relative;
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transform: translateY(0px);
}

.darkmode-toggle .icon-moon,
.darkmode-toggle .icon-sun {
  position: absolute;
  top: -1px;
  left: 0;
  width: 1em;
  height: 1em;
  font-size: 21px;
  line-height: 1;
  text-align: center;
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
}

.darkmode-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: var(--dm-icon-dark);
}
.darkmode-toggle .icon-sun {
  opacity: 0;
  pointer-events: none;
  transform: rotate(-30deg) scale(.7);
}

.darkmode-toggle:hover .icon-moon,
.darkmode-toggle:hover .icon-sun {
  transform: scale(1.05);
}

.awb-off-canvas .darkmode-toggle .icon-moon,
.fusion-mobile-nav-holder .darkmode-toggle .icon-moon {
  color: var(--dm-icon-light) !important; /* !important: surcharge contexte off-canvas */
}

html.dark .darkmode-toggle .icon-moon {
  opacity: 0;
  pointer-events: none;
  transform: rotate(30deg) scale(.7);
}
html.dark .darkmode-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: var(--dm-accent) !important;
}

html.dark .awb-off-canvas .darkmode-toggle .icon-moon,
html.dark .awb-off-canvas .darkmode-toggle .icon-sun,
html.dark .fusion-mobile-nav-holder .darkmode-toggle .icon-moon,
html.dark .fusion-mobile-nav-holder .darkmode-toggle .icon-sun {
  color: var(--dm-icon-light) !important;
}

html.dark .fusion-text p .darkmode-toggle .icon-sun,
html.dark .fusion-text p .darkmode-toggle .icon-moon,
html.dark p .darkmode-toggle .icon-sun,
html.dark p .darkmode-toggle .icon-moon {
  color: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     9. ICÔNES — BURGER, TÉLÉPHONE, FB-ICON-ELEMENT
        Tokens utilisés: --dm-icon-light, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
.fa-phone,
.fa-phone-volume,
.glyphicon.fa-phone-volume {
  color: var(--dm-icon-dark) !important;
}
[class*="fb-icon-element"] {
      --awb-iconcolor:        var(--dm-icon-dark);
      --awb-iconcolor-hover: var(--dm-accent);
}

html.dark .fa-phone,
html.dark .fa-phone-volume,
html.dark .glyphicon.fa-phone-volume {
  color: var(--dm-icon-light) !important;
}
html.dark [class*="fb-icon-element"],
html.dark .fa-bars.fb-icon-element,
html.dark .fb-icon-element-2.fa-bars,
html.dark a.fb-icon-element.fa-bars {
  color: var(--dm-accent) !important;
    --awb-iconcolor:       var(--dm-accent) !important;
    --awb-iconcolor-hover: var(--dm-accent) !important;
}


/* ═════════════════════════════════════��══════════════════════════════
     10. MENU PRINCIPAL — desktop
   Tokens utilisés: --dm-text-primary, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-main-menu > ul > li > a,
html.dark .awb-menu.awb-menu_desktop .awb-menu__main-a {
  color: var(--dm-text-primary) !important; /* !important: surcharge Avada inline */
}
html.dark .fusion-main-menu > ul > li.current-menu-item > a,
html.dark .fusion-main-menu > ul > li:hover > a,
html.dark .awb-menu.awb-menu_desktop .awb-menu__main-li_current > .awb-menu__main-a,
html.dark .awb-menu.awb-menu_desktop .awb-menu__main-a:hover {
  color: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     11. HEADER BLUR (.header_blur_pc)
   Tokens utilisés: --dm-bg-overlay, --dm-bg-base
   ════════════════════════════════════════════════════════════════════ */
html.dark .header_blur_pc::before {
  background: var(--dm-bg-overlay);
  box-shadow:
    inset 0 0 0.5px 1px hsla(210, 50%, 100%, 0.05),
      0 2px 4px rgba(0, 10, 30, 0.15),
      4px 4px 8px rgba(0, 10, 40, 0.20),
      8px 8px 16px rgba(0, 20, 60, 0.25);
}
@media only screen and (max-width: 980px) {
  html.dark .header_blur_pc::before {
    background: rgba(7, 9, 14, 0.85); /* Opacité plus forte mobile */
    box-shadow: none !important;
      }
}


/* ════════════════════════════════════════════════════════════════════
       12. SOUS-MENUS DROPDOWN — desktop
    Tokens utilisés: --dm-border-divider, --dm-text-light, --dm-accent
    Note: --awb-color5 (var(--dm-bg-submenu)) utilisé pour submenu specific
     ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-main-menu .sub-menu,
html.dark .awb-menu .awb-submenu,
html.dark .awb-menu .awb-menu__sub-ul,
html.dark .fusion-megamenu-wrapper {
  background-color: var(--dm-bg-submenu) !important; /* Submenu specific - peut être personnalisé */
  border-color: var(--dm-border-divider) !important;
}

html.dark .awb-off-canvas .awb-submenu,
html.dark .awb-off-canvas .awb-menu__sub-ul {
  background-color: transparent !important;
}

html.dark .fusion-main-menu .sub-menu a,
html.dark .awb-menu .awb-menu__sub-a,
html.dark .fusion-megamenu-wrapper a {
  color: var(--dm-text-light) !important;
}
html.dark .fusion-main-menu .sub-menu a:hover,
html.dark .awb-menu .awb-menu__sub-a:hover,
html.dark .fusion-megamenu-wrapper a:hover {
  color: var(--dm-accent) !important;
}

html.dark .fusion-main-menu .sub-menu .current-menu-item > a,
html.dark .fusion-main-menu .sub-menu .current-menu-ancestor > a,
html.dark .awb-menu .awb-menu__sub-a.awb-active,
html.dark .awb-menu .awb-menu__sub-a[aria-current="page"] {
  color: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     13. MENU MOBILE — icônes X + carets
        Tokens utilisés: --dm-icon-light
   CORRECTION : règles restreintes aux contextes .awb-off-canvas et
   .fusion-mobile-nav-holder pour une portée précise et défensive.
   ════════════════════════════════════════════════════════════════════ */
html.dark .awb-off-canvas .off-canvas-close.awb-icon-close,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_mobile,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_click,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_main,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_needs-spacing,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_mobile::before,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_click::before,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_main::before,
html.dark .awb-off-canvas .awb-menu__open-nav-submenu_needs-spacing::before,
html.dark .fusion-mobile-nav-holder .off-canvas-close.awb-icon-close,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_mobile,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_click,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_main,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_needs-spacing,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_mobile::before,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_click::before,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_main::before,
html.dark .fusion-mobile-nav-holder .awb-menu__open-nav-submenu_needs-spacing::before {
  color: var(--dm-icon-light) !important;
  border-color: var(--dm-icon-light) !important;
}


/* ════════════════════════════════════════════════════════════════════
     14. OFF CANVAS / MENU MOBILE — fond + liens
   Tokens utilisés: --dm-bg-base, --dm-text-light, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
html.dark .awb-off-canvas,
html.dark .fusion-off-canvas,
html.dark .awb-off-canvas-wrap,
html.dark .fusion-mobile-nav-holder,
html.dark .fusion-mobile-menu-design-modern,
html.dark .fusion-mobile-menu-design-classic {
  background-color: var(--dm-bg-base) !important;
  color: var(--dm-text-light) !important;
}
html.dark .fusion-mobile-nav-holder a,
html.dark .fusion-mobile-nav-item a,
html.dark .awb-off-canvas a {
  color: var(--dm-text-light) !important;
}
html.dark .fusion-mobile-nav-holder a:hover,
html.dark .fusion-mobile-nav-item a:hover,
html.dark .awb-off-canvas a:hover {
  color: var(--dm-accent) !important;
}
html.dark .fusion-mobile-nav-holder li,
html.dark .awb-off-canvas .menu-item {
  border-color: var(--dm-text-light) !important;
}


/* ════════════════════════════════════════════════════════════════════
     15. FOOTER
   Tokens utilisés: --dm-bg-footer, --dm-text-light, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
html.dark .footer-main {
  background-color: var(--dm-bg-footer) !important;
  color: var(--dm-text-light) !important;
  border-top: 0;
}
html.dark .footer-main,
html.dark .footer-main p,
html.dark .footer-main a,
html.dark .footer-main span,
html.dark .footer-main li {
  color: var(--dm-text-light) !important;
}
html.dark .footer-main a:hover {
  color: var(--dm-accent) !important;
}

/* Classe .idealcom-footer — footer avec dégradé custom */
html.dark .idealcom-footer,
html.dark .idealcom-footer .fusion-fullwidth {
  background: var(--dm-bg-footer) !important;
  background-image: none !important;
}

/* Chevrons menu footer dark mode */
html.dark .footer-main .glyphicon,
html.dark .footer-main .fa-angle-right,
html.dark .idealcom-footer .glyphicon,
html.dark .idealcom-footer .fa-angle-right {
  color: var(--dm-text-light) !important;
}

/* ════════════════════════════════════════════════════════════════════
     16. ACCORDÉONS / FAQ / TOGGLES
   Logique :
      - repos      : texte standard
      - hover      : accent hover
      - active : accent principal
   Tokens utilisés:
      --dm-bg-base, --dm-border-default, --dm-text-primary,
      --dm-accent-hover, --dm-accent
   ════════════════════════════════════════════════════════════════════ */

html.dark .fusion-accordian .panel,
html.dark .fusion-toggle .panel {
  background-color: var(--dm-bg-base, var(--awb-color1)) !important;
  border-color: var(--dm-border-default, var(--awb-gray-border)) !important;
}

/* Repos */
html.dark .fusion-accordian .panel-title a,
html.dark .fusion-toggle .panel-title a,
html.dark .fusion-accordian .panel-body,
html.dark .fa-plus-circle:before,
html.dark .fa-minus-circle:before {
  color: var(--dm-text-light, var(--awb-text-light)) !important;
      -webkit-text-fill-color: var(--dm-text-light, var(--awb-text-light)) !important;
}

/* Hover titre */
html.dark .fusion-accordian .panel-title a:hover,
html.dark .fusion-toggle .panel-title a:hover,
html.dark .fusion-accordian .panel-title a:focus,
html.dark .fusion-toggle .panel-title a:focus {
  color: var(--dm-accent, var(--awb-accent)) !important;
      -webkit-text-fill-color: var(--dm-accent, var(--awb-accent)) !important;
}

/* Active / ouvert titre */
html.dark .fusion-accordian .panel-title a.active,
html.dark .fusion-toggle .panel-title a.active,
html.dark .fusion-accordian .panel-title .active-toggle,
html.dark .fusion-toggle .panel-title .active-toggle {
  color: var(--dm-accent, var(--awb-accent)) !important;
      -webkit-text-fill-color: var(--dm-accent, var(--awb-accent)) !important;
}

/* Icônes panel : on garde la logique ancienne qui fonctionnait */
html.dark .fusion-toggle-icon-wrapper .fa-fusion-box,
html.dark .fusion-accordian .fa-fusion-box,
html.dark .fusion-toggle .panel-title a.active .fa-fusion-box,
html.dark .fusion-accordian .panel-title a.active .fa-fusion-box,
html.dark .fusion-toggle-icon-wrapper .active-icon.fa-fusion-box {
  color: var(--dm-accent, var(--awb-accent)) !important;
  border-color: var(--dm-accent, var(--awb-accent)) !important;
}


/* ════════════════════════════════════════════════════════════════════
     17. FORMULAIRES
   Tokens utilisés: --dm-bg-alt, --dm-icon-light, --dm-border-default,
                        --dm-text-primary, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark textarea,
html.dark select {
  background-color: var(--dm-bg-alt);
  color: var(--dm-icon-light);
  border: 1px solid var(--dm-border-default);
}
html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark .fusion-form-input::placeholder,
html.dark input.fusion-form-input::placeholder,
html.dark textarea.fusion-form-input::placeholder {
  color: var(--dm-text-primary) !important;
  opacity: 1;
}
html.dark input[type="checkbox"] {
  accent-color: var(--dm-accent);
}

/* Checkbox Avada Fusion Form — carré coché en dark mode */
html.dark .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label:after {
    background: var(--dm-accent) !important;
}

/* Checkbox Avada — cadre ::before au hover/focus en dark mode */
html.dark .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:hover + label::before,
html.dark .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:focus + label::before {
    border-color: var(--dm-accent) !important;
}

html.dark .fusion-form-label,
html.dark .fusion-form-element-required,
html.dark .fusion-form-notice,
html.dark .fusion-form-privacy-text,
html.dark .fusion-form-element-description,
html.dark .fusion-form-form-wrapper .fusion-form-field.fusion-form-label-above .label,
html.dark .fusion-form-form-wrapper .fusion-form-field.fusion-form-label-above label {
  color: var(--dm-text-primary) !important;
}
html.dark .fusion-form .fusion-form-check-label,
html.dark .fusion-form .fusion-form-check-label span,
html.dark .fusion-form .fusion-form-field .fusion-form-checkbox label {
  color: var(--dm-icon-light) !important;
}
html.dark .fusion-li-icon.awb-icon-check {
  color: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     18. LIVE SEARCH AJAX
   Tokens utilisés: --dm-text-light, --dm-border-default, --dm-text-primary,
                       --dm-icon-light, --dm-bg-base, --dm-accent
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-search-form,
html.dark .fusion-search-form-content,
html.dark .fusion-search-field {
  background-color: transparent !important;
}
html.dark .fusion-search-form input[type="search"] {
  background-color: transparent !important;
  color: var(--dm-text-light) !important;
  border: 1px solid var(--dm-border-default) !important;
}
html.dark .fusion-search-form input[type="search"]::placeholder {
  color: var(--dm-text-primary) !important;
  opacity: 1;
}
html.dark .fusion-search-submit {
  background-color: transparent !important;
  color: var(--dm-icon-light) !important;
}
html.dark .fusion-search-results-wrapper,
html.dark .fusion-search-results {
  background-color: var(--dm-bg-base) !important;
  color: var(--dm-text-light) !important;
  border: 1px solid var(--dm-border-default) !important;
}
html.dark .fusion-search-post-title,
html.dark .fusion-search-result {
  color: var(--dm-text-light) !important;
}
html.dark .fusion-search-results-wrapper {
  border-color: transparent !important;
}
html.dark .fusion-search-post-type {
  color: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     19. WIDGET IDEALGPT
   Tokens utilisés: --dm-bg-alt, --dm-bg-surface, --dm-icon-light,
                       --dm-border-default, --dm-text-inverse, --dm-accent, 
                       --dm-accent-hover, --dm-text-light
   ════════════════════════════════════════════════════════════════════ */
html.dark .ideal-gpt-wrapper,
html.dark .ideal-gpt-wrapper iframe {
  background-color: var(--dm-bg-alt);
  color: var(--dm-icon-light);
}
html.dark .ideal-gpt-wrapper iframe {
  background-color: var(--dm-bg-surface);     /* Refactoring : dm_bg_elevated → dm_bg_surface */
}
html.dark .ideal-gpt-wrapper textarea {
  background-color: var(--dm-bg-surface);       /* Refactoring : dm_bg_elevated → dm_bg_surface */
  color: var(--dm-icon-light);
}

/* Champ de saisie — fond clair conservé (exception design) */
html.dark .igpt-input-wrapper textarea,
html.dark textarea#igpt-input,
html.dark textarea.igpt-input,
html.dark textarea.igpt-input:focus {
  background-color: unset !important;
  color: var(--dm-text-inverse) !important;
}
html.dark textarea#igpt-input::placeholder,
html.dark textarea.igpt-input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}

/* Bubble */
html.dark .igpt-bubble,
html.dark #igpt-bubble {
  background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-hover)) !important;
}
html.dark .igpt-bubble-icon,
html.dark #igpt-bubble-icon {
  color: var(--dm-text-light) !important;
}
html.dark .igpt-bubble svg {
  fill: var(--dm-text-light) !important;
}


/* ════════════════════════════════════════════════════════════════════
     20. POSTCARDS & PORTFOLIO
   Tokens utilisés: --dm-text-light
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-post-card-title a,
html.dark .fusion-post-card-content,
html.dark .fusion-portfolio-content h2 a,
html.dark .fusion-portfolio-content p,
html.dark .fusion-postcard-title a {
  color: var(--dm-text-light) !important;
}


/* ════════════════════════════════════════════════════════════════════
     21. LISTES & ICON LISTS
   Tokens utilisés: --dm-text-primary
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-li-item-content,
html.dark .fusion-icon-list-item,
html.dark .fusion-icon-list-item .fusion-li-item-content {
  color: var(--dm-text-primary) !important;
}

/* Checklist Avada — icônes fa-check en dark mode */
html.dark .fusion-checklist .fusion-li-icon,
html.dark ul.fusion-checklist .fusion-li-icon {
    color: var(--dm-accent) !important;
     --awb-iconcolor: var(--dm-accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
     22. FUSION TEXT BLOCS
   Tokens utilisés: --dm-text-primary
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-text,
html.dark .fusion-text p,
html.dark .fusion-text li {
  color: var(--dm-text-primary) !important;
}


/* ════════════════════════════════════════════════════════════════════
     23. TABS AVADA
   Tokens utilisés: --dm-accent, --dm-text-light, --dm-text-primary, --dm-bg-surface
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-tabs .nav > ul > li.active,
html.dark .fusion-tabs .nav > ul > li.active > a {
    --awb-active-border-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
}
html.dark .fusion-tabs .nav > ul > li.active > a,
html.dark .fusion-tabs .nav > ul > li.active > a h4,
html.dark .fusion-tabs .nav > ul > li.active > a .fusion-tab-heading {
  color: var(--dm-text-light) !important;
  background-color: transparent !important;
}
html.dark .fusion-tabs .nav > ul > li > a,
html.dark .fusion-tabs .nav > ul > li > a h4,
html.dark .fusion-tabs .nav > ul > li > a .fusion-tab-heading {
  color: var(--dm-text-primary) !important;
  background-color: transparent !important;
}
html.dark .fusion-tabs .nav > ul > li:hover > a,
html.dark .fusion-tabs .nav > ul > li:hover > a h4,
html.dark .fusion-tabs .nav > ul > li:hover > a .fusion-tab-heading {
  color: var(--dm-accent) !important;
}
html.dark .fusion-tabs .tab-content {
  background-color: var(--dm-bg-surface) !important;    /* Refactoring : dm_bg_elevated → dm_bg_surface */
  color: var(--dm-text-primary) !important;
}


/* ════════════════════════════════════════════════════════════════════
     24. TABLES
   Tokens utilisés: --dm-border-default, --dm-text-primary, --dm-text-light, --dm-bg-surface
   ════════════════════════════════════════════════════════════════════ */
html.dark table th,
html.dark table td {
  border-color: var(--dm-border-default) !important;
  color: var(--dm-text-primary) !important;
}
html.dark table th {
  color: var(--dm-text-light) !important;
  background-color: var(--dm-bg-surface) !important;      /* Refactoring : dm_bg_elevated → dm_bg_surface */
}


/* ════════════════════════════════════════════════════════════════════
     25. CONTENT BOXES
   Tokens utilisés: --dm-text-primary
   ════════════════════════════════════════════════════════════════════ */
html.dark .fusion-content-box-hover .content-container,
html.dark .fusion-content-box-hover .content-container p,
html.dark .fusion-content-box-hover .content-container a,
html.dark .content-box-column .content-container,
html.dark .content-box-column .content-container p,
html.dark .content-box-column .content-container span {
  color: var(--dm-text-primary) !important;
}
html.dark .fusion-content-box-hover .content-container .fusion-button .fusion-button-text,
html.dark .content-box-column .content-container .fusion-button .fusion-button-text {
  color: inherit !important;
}


/* Fix background content-wrapper-background mobile — surcharge inline styles Avada */
html.dark .fusion-content-boxes .content-wrapper-background,
html.dark .fusion-content-box-hover .content-wrapper-background,
html.dark .content-box-column .content-wrapper-background {
    background-color: var(--dm-bg-alt) !important;
}


/* ════════════════════════════════════════════════════════════════════
       26. CLASSES UTILITAIRES — Builder Avada
       
   Classes réutilisables pour exceptions contextuelles.
   À utiliser dans le builder Avada via "CSS Class Name".
   ════════════════════════════════════════════════════════════════════ */

/* .bg-white-dark — Force fond blanc sur images/galeries en dark mode */
html.dark .bg-white-dark .fusion-image-wrapper,
html.dark .bg-white-dark .fusion-image-wrapper img {
  background-color: #f6f6f6 !important;
}

html.dark .gallery-white-bg .fusion-gallery-image,
html.dark .bg-white-dark .fusion-gallery-image {
  background-color: #f6f6f6 !important;
}

/* .dark-mode-overlay — Overlay glassmorphism pour sections hero sur fond image */
html.dark .dark-mode-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
      135deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.25) 100%
      ) !important;
  z-index: 5 !important;
  pointer-events: none;
  backdrop-filter: blur(var(--dm-hero-blur, 0px));
      -webkit-backdrop-filter: blur(var(--dm-hero-blur, 0px));
}

/* Titres sur overlay hero — couleur accent */
html.dark .dark-mode-overlay h2.fusion-title-heading,
html.dark .dark-mode-overlay h3.fusion-title-heading {
  color: var(--dm-accent) !important;
      -webkit-text-fill-color: var(--dm-accent) !important;
  background: none !important;
  background-clip: unset !important;
}

/* .dark-mode-overlay-mobile — Titres hero mobile avec couleur de token --dm-icon-dark */
html.dark .dark-mode-overlay-mobile h2.fusion-title-heading,
html.dark .dark-mode-overlay-mobile h3.fusion-title-heading {
    color: var(--dm-icon-dark) !important;
     -webkit-text-fill-color: var(--dm-icon-dark) !important;
    background: none !important;
    background-clip: unset !important;
}

/* ════════════════════════════════════════════════════════════════════
     27. FILTRE COULEUR DARK MODE — Lottie, Bookly, éléments externes
   Classe Avada Builder : "dark-mode-filter-color" ou "lottie-container"
   ════════════════════════════════════════════════════════════════════ */
html.dark .dark-mode-filter-color,
html.dark .lottie-container {
  filter:
    hue-rotate(var(--dm-filter-hue, 0deg))
    brightness(var(--dm-filter-brightness, 1))
    contrast(var(--dm-filter-contrast, 1))
    saturate(var(--dm-filter-saturate, 1));
  transition: filter 0.3s ease;
}

/* ════════════════════════════════════════════════════════════════════
     28. CONTENT BOX ICONS HOME
   Classe Avada Builder : "titre-box-icon-home"
   ════════════════════════════════════════════════════════════════════ */
.titre-box-icon-home h3 {
  font-family: "Lato", Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--awb-text-color) !important;
  text-transform: none !important;
  line-height: 1.2em;
}

.titre-box-icon-home h3,
.titre-box-icon-home h3 a {
  color: var(--awb-color8) !important;
}

.titre-box-icon-home h3:hover,
.titre-box-icon-home h3 a:hover {
  color: var(--awb-color8) !important;
}

html.dark .titre-box-icon-home h3 {
  background: none !important;
      -webkit-background-clip: unset !important;
  background-clip: unset !important;
      -webkit-text-fill-color: var(--awb-text-color) !important;
  color: var(--awb-text-color) !important;
}

html.dark .titre-box-icon-home img {
  filter: brightness(0) invert(1) opacity(0.8);
}