/* =====================================================================
   dark.css
 SOMMAIRE (repères rapides)
  1) Variables / reset / layout
  2) Header & navigation
  3) Sections (homepage / pages)
  4) Cards / products
  5) Forms / buttons
  6) Footer
  7) Utilitaires / animations
  8) Media queries
================================================================================
*/

:root{
  /* réglage fin */

  --dark-bg: #121212;          /* fond global */

  --dark-surface: #141417;     /* cartes / blocs */

  --dark-surface-2: #202632;   /* surfaces légèrement différentes si besoin */

  --dark-border: rgba(255,255,255,0.10);
  --dark-text: rgba(255,255,255,0.92);
  --dark-muted: rgba(255,255,255,0.72);
  --dark-faint: rgba(255,255,255,0.55);
}

/* Fond global */

html.theme-dark,
html.theme-dark body,
html.dark,
html.dark body{
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Unifier les fonds de sections/wrappers (corrige les différences de couleur) */

html.theme-dark main,
html.theme-dark section,
html.theme-dark .section,
html.theme-dark .page-width,
html.theme-dark .content-container,
html.theme-dark .gradient,
html.theme-dark .background-none,
html.theme-dark .background-secondary,
html.theme-dark .background-primary,
html.dark main,
html.dark section,
html.dark .section,
html.dark .page-width,
html.dark .content-container,
html.dark .gradient,
html.dark .background-none,
html.dark .background-secondary,
html.dark .background-primary{
  background: var(--dark-bg) !important;
}

/* Supprimer les overlays/pseudo-elements responsables des bandes */

html.theme-dark section::before,
html.theme-dark section::after,
html.theme-dark .section::before,
html.theme-dark .section::after,
html.theme-dark .gradient::before,
html.theme-dark .gradient::after,
html.dark section::before,
html.dark section::after,
html.dark .section::before,
html.dark .section::after,
html.dark .gradient::before,
html.dark .gradient::after{
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Bannière: enlever le rectangle gris, laisser le texte uniquement */

html.theme-dark .banner__box,
html.theme-dark .hero__box,
html.theme-dark .image-with-text__content,
html.theme-dark .slideshow__text-wrapper,
html.theme-dark .banner__content,
html.dark .banner__box,
html.dark .hero__box,
html.dark .image-with-text__content,
html.dark .slideshow__text-wrapper,
html.dark .banner__content{
  background: transparent !important;
  box-shadow: none !important;
}

/* Typo — blanc lisible (sans "cramer" tout en #fff pur) */

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6{
  color: var(--dark-text) !important;
}

html.theme-dark p,
html.theme-dark li,
html.theme-dark span,
html.theme-dark label,
html.theme-dark small,
html.theme-dark .rte,
html.theme-dark .rte * ,
html.theme-dark .rich-text,
html.theme-dark .rich-text * ,
html.dark p,
html.dark li,
html.dark span,
html.dark label,
html.dark small,
html.dark .rte,
html.dark .rte * ,
html.dark .rich-text,
html.dark .rich-text *{
  color: var(--dark-muted) !important;
}

/* Reprogrammation: forcer le texte plus blanc si certains restent trop sombres */

html.theme-dark body.reprogrammation h1,
html.theme-dark body.reprogrammation h2,
html.theme-dark body.reprogrammation h3,
html.theme-dark body.reprogrammation p,
html.theme-dark body.reprogrammation li,
html.dark body.reprogrammation h1,
html.dark body.reprogrammation h2,
html.dark body.reprogrammation h3,
html.dark body.reprogrammation p,
html.dark body.reprogrammation li{
  color: var(--dark-text) !important;
}

/* Cartes / blocs ("Pourquoi nous choisir ?", etc.) */

html.theme-dark .multicolumn-card,
html.theme-dark .card,
html.theme-dark .info-card,
html.theme-dark .multicolumn-card__info,
html.theme-dark .multicolumn-card__text,
html.dark .multicolumn-card,
html.dark .card,
html.dark .info-card,
html.dark .multicolumn-card__info,
html.dark .multicolumn-card__text{
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* FAQ */

html.theme-dark .faq,
html.theme-dark .accordion,
html.theme-dark .accordion-item,
html.theme-dark .accordion__content,
html.theme-dark details,
html.theme-dark summary,
html.dark .faq,
html.dark .accordion,
html.dark .accordion-item,
html.dark .accordion__content,
html.dark details,
html.dark summary{
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Navbar & liens: blanc (comme demandé) */

html.theme-dark header,
html.theme-dark nav,
html.dark header,
html.dark nav{
  background: var(--dark-bg) !important;
}

html.theme-dark nav a,
html.theme-dark header a,
html.theme-dark .header__menu-item,
html.theme-dark .list-menu__item,
html.dark nav a,
html.dark header a,
html.dark .header__menu-item,
html.dark .list-menu__item{
  color: var(--dark-text) !important;
}

html.theme-dark a,
html.dark a{
  color: var(--dark-text) !important;
}

/* Footer: liens en blanc */

html.theme-dark footer,
html.dark footer{
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}
html.theme-dark footer a,
html.dark footer a{
  color: var(--dark-text) !important;
}

/* Formulaires */

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select,
html.dark input,
html.dark textarea,
html.dark select{
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Boutons: garder la couleur d'origine, juste forcer le texte en blanc */

html.theme-dark .button,
html.theme-dark button,
html.theme-dark .btn,
html.theme-dark .whatsapp-button,
html.theme-dark .whatsapp,
html.dark .button,
html.dark button,
html.dark .btn,
html.dark .whatsapp-button,
html.dark .whatsapp{
  color: #ffffff !important;
}

/* IMPORTANT: ne pas toucher au background de .button--primary / .button--secondary
   pour conserver le vert d'origine (donc PAS de background ici). */

/* Séparateurs */

html.theme-dark hr,
html.theme-dark .divider,
html.dark hr,
html.dark .divider{
  border-color: rgba(255,255,255,0.08) !important;
}

/* Dark mode: cartes infos contact (Localisation / Email / Téléphone) */

html.theme-dark .ci--modern .ci-card{
  background:#141417 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.35) !important;
}
html.theme-dark .ci--modern .ci-title{
  color:rgba(245,245,247,.92) !important;
}
html.theme-dark .ci--modern .ci-value,
html.theme-dark .ci--modern .ci-value a{
  color:rgba(245,245,247,.95) !important;
}
html.theme-dark .ci--modern .ci-sub{
  color:rgba(235,235,238,.70) !important;
}

/* Dark mode: formulaire contact */

html.theme-dark #contact-form{
  color-scheme:dark;
  background:#141417 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.35) !important;
}
html.theme-dark #contact-form .form-note{
  color:rgba(235,235,238,.75) !important;
}
html.theme-dark #contact-form input,
html.theme-dark #contact-form textarea{
  background:#2a2a2f !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#f2f2f3 !important;
  box-shadow:none !important;
}
html.theme-dark #contact-form input:focus,
html.theme-dark #contact-form textarea:focus{
  outline:none !important;
  border-color:rgba(255,255,255,.28) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.08) !important;
}
html.theme-dark #contact-form input::placeholder,
html.theme-dark #contact-form textarea::placeholder{
  color:rgba(235,235,238,.45) !important;
}

/* Reprogrammation : texte blanc en mode sombre */

html.theme-dark .fxExact .fxExact__title,
html.theme-dark .fxExact .fxExact__text,
html.theme-dark .fxExact .fxExact__left,
html.theme-dark .fxExact .fxExact__right{
  color:rgba(245,245,247,.95) !important;
}
html.theme-dark .fxExact .fxExact__text{
  color:rgba(235,235,238,.86) !important;
}

/* Reprogrammation : pastille centrale (badge) sans fond blanc */

html.theme-dark .fxExact .fxExact__badge{
  background:#141417 !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}

/* Nos services cards: keep original blue fill on hover */

html.dark .nos-services-icons .card,
html.theme-dark .nos-services-icons .card{
  /* keep the exact light-mode hover behavior (background-position),
     but use a dark top instead of white */

  background: linear-gradient(#141417 55%, var(--accent) 45%) !important;
  background-size: 100% 220% !important;
  background-position: 0 6% !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

/* IMPORTANT: do NOT override hover background (we need the accent to appear) */

html.dark .nos-services-icons .card:hover,
html.theme-dark .nos-services-icons .card:hover{
  background-position: 0 100% !important;
  transform: translateY(-2px);
}

/* Headings readable when NOT hovered */

html.dark .nos-services-icons .card h3,
html.theme-dark .nos-services-icons .card h3{
  color: rgba(245,245,247,0.92) !important;
}

/* Reprogrammation: force all content text to white */

html.dark .fxExact,
html.theme-dark .fxExact{
  color: rgba(255,255,255,0.92) !important;
}
html.dark .fxExact :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,small,div),
html.theme-dark .fxExact :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,small,div){
  color: rgba(255,255,255,0.92) !important;
}

/* unification couleur (pourquoi nous choisir ?) */

html.theme-dark
.multicolumn.color-background-1,
html.theme-dark
.multicolumn.color-background-1 .page-width,
html.theme-dark
.multicolumn.color-background-1 .multicolumn-list,
html.theme-dark
.multicolumn.color-background-1 .multicolumn-list__item,
html.theme-dark
.multicolumn.color-background-1 .multicolumn-card {
  background: #121212 !important;
}

html.theme-dark .multicolumn-card.content-container{
  background: #121212 !important;
}
html.theme-dark .multicolumn-card__info{
  background: #121212 !important;
}
html.theme-dark .multicolumn-card.content-container:after{
  box-shadow: none !important;
}
html.theme-dark .multicolumn-card.content-container{
  border-color: rgba(255,255,255,0.06) !important;
}

/* ---------------------------------------------------------------------
   BLOC — DARK MODE — FAQ : icônes en blanc
--------------------------------------------------------------------- */

html.theme-dark .accordion .icon-question-mark,
html.theme-dark .accordion .icon-question-mark path,
html.theme-dark .accordion .icon-caret {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ---------------------------------------------------------------------
   BLOC — DARK MODE — Options Ethanol (FORCÉ)
--------------------------------------------------------------------- */

/* Texte visible à côté des checkbox */

html.theme-dark input[type="checkbox"] {
  accent-color: #ffffff;
}

/* Texte immédiatement après la checkbox */

html.theme-dark input[type="checkbox"] + * {
  color: #ffffff !important;
}

/* Texte contenu dans le même bloc que la checkbox */

html.theme-dark input[type="checkbox"] ~ * {
  color: #ffffff !important;
}

/* Sécurité : tout texte dans la zone options */

html.theme-dark [class*="option"],
html.theme-dark [class*="select"],
html.theme-dark [class*="choice"],
html.theme-dark [class*="ethanol"] {
  color: #ffffff !important;
}

/* =========================================
   DARK MODE — Pages produits : options "task"
   (ethanol / performance / boite / options)
   ========================================= */

html.theme-dark .task{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* Texte des options */

html.theme-dark .task .task__name{
  color: #fff !important;
}

/* Hover / focus => fond sombre (plus de blanc) */

html.theme-dark .task:hover,
html.theme-dark .task:focus,
html.theme-dark .task:focus-visible{
  background: #141417 !important;
  border-color: rgba(255,255,255,0.14) !important;
  outline: none !important;
}

/* Option sélectionnée => fond sombre */

html.theme-dark .task.task--selected{
  background: #141417 !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Le "pill" à droite */

html.theme-dark .task .pill{
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

html.theme-dark .task:hover .pill,
html.theme-dark .task.task--selected .pill{
  background: #357a21 !important;
}

/* ---------------------------------------------------------------------
   BLOC — DARK MODE — Suppression des contours options
--------------------------------------------------------------------- */

/* Suppression totale des bordures */

html.theme-dark .task{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover / sélection : fond sombre sans contour */

html.theme-dark .task:hover,
html.theme-dark .task:focus,
html.theme-dark .task:focus-visible,
html.theme-dark .task.task--selected{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #141417 !important;
}

/* =================================================
   DARK MODE — Cartes étapes (sélection auto)
   Rouge = active / Jaune = inactive
   ================================================= */

/* Base : supprimer contour blanc + style commun */

html.theme-dark .step-card,
html.theme-dark .process-card,
html.theme-dark .timeline-card,
html.theme-dark .feature-card,
html.theme-dark .card {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* NON sélectionnée (flèche jaune) => un peu plus clair */

html.theme-dark .step-card,
html.theme-dark .process-card,
html.theme-dark .timeline-card,
html.theme-dark .feature-card {
  background: #1b1b20 !important; /* légèrement plus clair que #141417 */

}

/* SÉLECTIONNÉE (flèche rouge)
   ⚠️ on cible plusieurs classes possibles d'état actif */

html.theme-dark .step-card.is-active,
html.theme-dark .step-card.active,
html.theme-dark .step-card.selected,
html.theme-dark .step-card--active,
html.theme-dark .process-card.is-active,
html.theme-dark .process-card.active,
html.theme-dark .process-card.selected,
html.theme-dark .process-card--active,
html.theme-dark .timeline-card.is-active,
html.theme-dark .timeline-card.active,
html.theme-dark .timeline-card.selected,
html.theme-dark .timeline-card--active,
html.theme-dark .feature-card.is-active,
html.theme-dark .feature-card.active,
html.theme-dark .feature-card.selected,
html.theme-dark .feature-card--active {
  background: #141417 !important;
}

/* Texte lisible */

html.theme-dark .step-card *,
html.theme-dark .process-card *,
html.theme-dark .timeline-card *,
html.theme-dark .feature-card * {
  color: #ffffff !important;
}

/* =========================================================
   PATCH 2026-01-21 — Sélections & Process cards (mode sombre)
   Objectifs:
   - Cartes "process-cards": actif = #141417, inactif légèrement plus clair, sans contour blanc
   - Sélecteurs .products .task: fond sombre au hover/sélection, texte blanc, pas de bordure
   ========================================================= */

/* ---------------------------------------------------------------------
   BLOC — Process cards (DIAGNOSTIC / REPROGRAMMATION / VERIFICATION)
--------------------------------------------------------------------- */

html.dark #process-cards.background-zone,
body.dark #process-cards.background-zone{
  /* Override des variables définies dans styles.css */

  --bg: #1b1b1f !important;        /* non sélectionné (un peu plus clair) */

  --bg-hover: #141417 !important;  /* sélectionné (.is-active) */

  --fg: rgba(255,255,255,0.92) !important;
  --fg-invert: #ffffff !important;
}

/* retire le contour clair du thème light */

html.dark #process-cards .box,
body.dark #process-cards .box{
  border: 0 !important;
  box-shadow: 0 8px 26px rgba(0,0,0,0.25) !important;
}

/* par sécurité: état actif ne doit pas réinjecter un border */

html.dark #process-cards .box.is-active,
body.dark #process-cards .box.is-active{
  border-color: transparent !important;
}

/* ---------------------------------------------------------------------
   BLOC — Pages options/ethanol/boite/performance: cartes de sélection (.products .task)
--------------------------------------------------------------------- */

html.dark .products,
body.dark .products{
  /* Le thème light utilise var(--sel) et var(--sel-border) */

  --sel: #141417 !important;
  --sel-border: transparent !important;
}

/* Base: fond sombre proche du background */

html.dark .products .task,
body.dark .products .task{
  background: rgba(255,255,255,0.04) !important;
  border: 0 !important;                 /* supprime le contour */

  box-shadow: none !important;          /* évite l'anneau bleu */

  color: rgba(255,255,255,0.92) !important;
}

/* Hover: un peu plus clair (mais toujours sombre) */

html.dark .products .task:hover,
body.dark .products .task:hover{
  background: rgba(255,255,255,0.06) !important;
}

/* Sélectionné: plus sombre (#141417) */

html.dark .products .task--selected,
body.dark .products .task--selected{
  background: #141417 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Texte du nom en blanc (y compris sur l'option sélectionnée) */

html.dark .products .task__name,
body.dark .products .task__name{
  color: rgba(255,255,255,0.96) !important;
}

/* Le "check" ne doit pas rester blanc criard */

html.dark .products .check,
body.dark .products .check{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Si sélectionné, garde un contraste sans repasser en bleu clair */

html.dark .products .task--selected .check,
body.dark .products .task--selected .check{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* (Optionnel) Supprime aussi l'effet "pill" trop clair en sombre */

html.dark .products .task--selected .pill,
body.dark .products .task--selected .pill{
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 0 !important;
}

/* =========================================================
   PATCH DARK MODE — Sélections (products) + Process cards
   ========================================================= */

/* -------------------------------
   1) PROCESS CARDS (#process-cards)
   - actif (auto) = #141417
   - non actif = un peu plus clair
   - supprimer contour blanc
---------------------------------*/

html.theme-dark #process-cards,
html.dark #process-cards{
  --bg: #2d2d2d;        /* cartes non actives (plus clair) */

  --bg-hover: #141417;  /* carte active (auto) */

  --fg: rgba(255,255,255,.92);
  --fg-invert: #fff;
}

html.theme-dark #process-cards .box,
html.dark #process-cards .box{
  border: 0 !important;                 /* supprime le contour blanc */

  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  background: var(--bg) !important;
}

html.theme-dark #process-cards .box.is-active,
html.dark #process-cards .box.is-active{
  background: var(--bg-hover) !important;
  border-color: transparent !important;
}

/* ---------------------------------------
   2) PRODUITS / OPTIONS (.products .task)
   - texte des options en blanc
   - au hover/selected : fond sombre proche du bg
   - supprimer contour / glow / border
----------------------------------------*/

html.theme-dark .products .task:hover,
html.dark .products .task:hover{
  background: rgba(255,255,255,.06) !important; /* hover : légèrement + clair */

}

/* Texte des options */

html.theme-dark .products .task__name,
html.dark .products .task__name{
  color: #fff !important;
}

/* Si certaines pages ont le texte dans un <label> ou <span> */

html.theme-dark .products .task label,
html.theme-dark .products .task span,
html.dark .products .task label,
html.dark .products .task span{
  color: #fff !important;
}

/* Case à cocher : garde lisible sur fond sombre */

html.theme-dark .products .check,
html.dark .products .check{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* MODE SOMBRE — remplace le fond #111624 (gradient de l'aside) par #141417 */

html.theme-dark .products .aside{
  background: #141418 !important; /* supprime le linear-gradient */

}

/* ---------------------------------------------------------------------
   BLOC — DARK MODALS (générique)
--------------------------------------------------------------------- */

html.theme-dark dialog,
html.theme-dark [role="dialog"],
html.theme-dark [aria-modal="true"],
html.theme-dark .modal,
html.theme-dark .modal-content,
html.theme-dark .modal__content,
html.theme-dark .popup,
html.theme-dark .popup-content,
html.theme-dark .ReactModal__Content,
html.theme-dark .swal2-popup{
  background: #141417 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

html.theme-dark .modal-backdrop,
html.theme-dark .overlay,
html.theme-dark .backdrop,
html.theme-dark .ReactModal__Overlay,
html.theme-dark .swal2-container{
  background: rgba(0,0,0,0.65) !important;
}

html.theme-dark dialog input,
html.theme-dark dialog select,
html.theme-dark dialog textarea,
html.theme-dark [role="dialog"] input,
html.theme-dark [role="dialog"] select,
html.theme-dark [role="dialog"] textarea,
html.theme-dark .modal input,
html.theme-dark .modal select,
html.theme-dark .modal textarea,
html.theme-dark .ReactModal__Content input,
html.theme-dark .ReactModal__Content select,
html.theme-dark .ReactModal__Content textarea{
  background: #1b1b20 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* =========================
   MODALES RÉSERVATION — DARK
   (calendrier + créneaux)
   ========================= */

html.theme-dark #booking-overlay .rsrv-head,
html.theme-dark #booking-overlay .rsrv-body,
html.theme-dark #booking-overlay .rsrv-actions,
html.theme-dark #booking-overlay-step2 .rsrv-head,
html.theme-dark #booking-overlay-step2 .rsrv-body,
html.theme-dark #booking-overlay-step2 .rsrv-actions{
  background:#141417 !important;
  border-color: rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* Calendrier : plus de zone blanche */

html.theme-dark #booking-overlay .rsrv-cal{
  background:#141417 !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

/* En-tête calendrier (mois + nav) */

html.theme-dark #booking-overlay .rsrv-month,
html.theme-dark #booking-overlay .rsrv-dow-item{
  color:#fff !important;
}

html.theme-dark #booking-overlay .rsrv-nav{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* Jours */

html.theme-dark #booking-overlay .rsrv-day{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}

html.theme-dark #booking-overlay .rsrv-day:hover{
  box-shadow: 0 0 0 2px rgba(108,92,231,.22) inset !important;
}

/* Garder la sélection en mauve (comme l’origine) */

html.theme-dark #booking-overlay .rsrv-day.is-selected{
  background:#6c5ce7 !important;
  border-color:#6c5ce7 !important;
  color:#fff !important;
}

/* Jours désactivés */

html.theme-dark #booking-overlay .rsrv-day.is-disabled{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.35) !important;
  opacity: 1 !important;
}

/* Timezone pill */

html.theme-dark #booking-overlay .rsrv-tz{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* Créneaux (heures) : passer en sombre */

html.theme-dark #booking-overlay .rsrv-slot{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* Créneau sélectionné : garder l’accent mauve */

html.theme-dark #booking-overlay .rsrv-slot.is-selected{
  border: 2px solid #6c5ce7 !important;
  background: rgba(108,92,231,.14) !important;
}

/* Scrollbar créneaux */

html.theme-dark #booking-overlay #rsrv-slots::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18) !important;
}
html.theme-dark #booking-overlay #rsrv-slots{
  scrollbar-color: rgba(255,255,255,.18) transparent !important;
}

/* Boutons de la barre d’actions (Annuler / Suivant) */

html.theme-dark #booking-overlay .rsrv-actions :is(.button--tertiary, .rsrv-btn--ghost),
html.theme-dark #booking-overlay-step2 .rsrv-actions :is(.button--tertiary, .rsrv-btn--ghost){
  background: rgba(255,255,255,.06) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

/* ---------------------------------------------------------------------
   BLOC — MODALES — CALENDRIER & RÉCAPITULATIF (MODE SOMBRE)
--------------------------------------------------------------------- */

/* Fond global de la modale */

html.theme-dark .modal,
html.theme-dark .modal-content,
html.theme-dark .reservation-modal {
  background-color: #141417 !important;
  color: #ffffff !important;
}

/* ---------- HEADER BLANC DU CALENDRIER ---------- */

html.theme-dark .calendar-header,
html.theme-dark .calendar-top,
html.theme-dark .calendar__header,
html.theme-dark .calendar__month {
  background-color: #141417 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ---------- JOURS (Lu, Ma, Me…) ---------- */

html.theme-dark .calendar-weekdays,
html.theme-dark .calendar-weekdays span {
  background-color: #141417 !important;
  color: #cfcfcf !important;
}

/* ---------- CASES DU CALENDRIER ---------- */

html.theme-dark .calendar-day {
  background-color: #1b1c1f !important;
  color: #cfcfcf !important;
  border: none !important;
}

/* Jour sélectionné (mauve conservé) */

html.theme-dark .calendar-day.selected,
html.theme-dark .calendar-day.active {
  background-color: #6f6af8 !important;
  color: #ffffff !important;
}

/* ---------- HEURES (créneaux) ---------- */

html.theme-dark .time-slot,
html.theme-dark .time-item {
  background-color: #1b1c1f !important;
  color: #ffffff !important;
  border: none !important;
}

html.theme-dark .time-slot:hover,
html.theme-dark .time-item:hover {
  background-color: #22232a !important;
}

/* ---------- BLOC RÉCAPITULATIF ---------- */

html.theme-dark .recap,
html.theme-dark .recap-box,
html.theme-dark .summary,
html.theme-dark .summary-card {
  background-color: #141417 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Texte du récapitulatif */

html.theme-dark .recap *,
html.theme-dark .summary * {
  color: #ffffff !important;
}

/* Boutons */

html.theme-dark .modal button {
  background-color: #1b1c1f !important;
  color: #ffffff !important;
  border: none !important;
}

/* =========================
   MODALES RÉSERVATION — FIX “BLANC”
   (header calendrier + récapitulatif)
   ========================= */

/* 1) Haut du calendrier (vient de styles.css: .rsrv-cal__head { background:#fff }) */

html.theme-dark #booking-overlay .rsrv-cal__head,
body.theme-dark #booking-overlay .rsrv-cal__head,
html.theme-dark .rsrv-cal__head,
body.theme-dark .rsrv-cal__head{
  background:#141417 !important;
  color:#ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* 2) Récapitulatif (reservation.js met un fond clair en !important sur .rsrv-head #rsrv-summary) */

html.theme-dark #booking-overlay-step2 .rsrv-head #rsrv-summary,
body.theme-dark #booking-overlay-step2 .rsrv-head #rsrv-summary,
html.theme-dark #booking-overlay-step2 #rsrv-summary,
body.theme-dark #booking-overlay-step2 #rsrv-summary{
  background:#141417 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#ffffff !important;
}

/* Texte interne du récap en blanc */

html.theme-dark #booking-overlay-step2 #rsrv-summary *,
body.theme-dark #booking-overlay-step2 #rsrv-summary *{
  color:#ffffff !important;
}

/* 3) Colonne créneaux — enlever le fond du conteneur (le “rectangle”) */

html.theme-dark #booking-overlay .rsrv-slots,
html.theme-dark #booking-overlay #rsrv-slots{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ASIDE OFFRE (STAGE / PRIX) — MODE SOMBRE
   Cible le panneau latéral avec logo STAGE 1
   ========================================================= */

html.theme-dark .offer-aside,
html.theme-dark .pricing-aside,
html.theme-dark .product-aside,
html.theme-dark aside{
  background: #141417 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Texte dans l’aside */

html.theme-dark aside *{
  color: #ffffff !important;
}

/* Bouton "Réserver un créneau" (on garde ton style actuel) */

html.theme-dark aside .btn-primary{
  background: #356b7a !important;
  color: #fff !important;
}

/* Bouton "Contactez-nous" */

html.theme-dark aside .btn-secondary{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
}

html.theme-dark .search-page,
html.theme-dark .search-page h1,
html.theme-dark .search-query,
html.theme-dark .result,
html.theme-dark .result p,
html.theme-dark .empty {
  color: #ffffff;
}

html.theme-dark .result {
  background: #0f172a;
  border-color: rgba(255,255,255,.12);
}

html.theme-dark .badge {
  background: #1e293b;
  color: #e5e7eb;
}

html.theme-dark .search-bar input[type="search"] {
  background: #020617;
  color: #ffffff;
  border-color: rgba(255,255,255,.2);
}

html.theme-dark .search-bar input::placeholder {
  color: rgba(255,255,255,.6);
}

html.theme-dark #rg-avis-widget{
  color: rgba(255,255,255,0.92);
}
html.theme-dark #rg-avis-widget .rg-avis-text{ color: rgba(255,255,255,0.72); }
html.theme-dark #rg-avis-widget .rg-avis-item p{ color: rgba(255,255,255,0.85); }
html.theme-dark #rg-avis-widget .rg-avis-btn{
  color:#fff; border-color:#fff;
}
html.theme-dark #rg-avis-widget .rg-avis-btn:hover{
  background:#fff; color:#111;
}
html.theme-dark #rg-avis-widget .rg-avis-divider{
  border-color:#fff;
}
html.theme-dark #rg-avis-widget .rg-avis-btn:hover{
  color: #000 !important;
}

/* =========================================================
   ZONE D’INTERVENTION – MODE SOMBRE
   (à placer tout en bas de dark.css)
========================================================= */

/* Fond général des blocs de la page */

html.dark .zone-infographie,
html.theme-dark .zone-infographie{
  background:transparent;
}

/* Cartes / bulles département */

html.dark .zone-infographie .bubble,
html.theme-dark .zone-infographie .bubble{
  background:#12151c;
  color:#e6e8ee;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* Titres des bulles */

html.dark .zone-infographie .bubble h3,
html.theme-dark .zone-infographie .bubble h3{
  color:#ffffff;
}

/* Texte des bulles */

html.dark .zone-infographie .bubble p,
html.theme-dark .zone-infographie .bubble p{
  color:#cfd3dc;
}

/* Bloc notice / info (ex : frais de déplacement) */

html.dark .notice-bubble,
html.theme-dark .notice-bubble{
  background:#10131a;
  color:#cfd3dc;
  border-left:4px solid #3b82f6; /* bleu discret */

  box-shadow:0 16px 36px rgba(0,0,0,.6);
}

/* Liens dans les notices */

html.dark .notice-bubble a,
html.theme-dark .notice-bubble a{
  color:#60a5fa;
}

/* Message CTRL + molette (map) */

html.dark .zone-zoom-hint,
html.theme-dark .zone-zoom-hint{
  background:rgba(18,21,28,.92);
  color:#e6e8ee;
  box-shadow:0 20px 40px rgba(0,0,0,.7);
}

/* Carte Leaflet – fond cohérent dark */

html.dark .zone-map-wrapper .leaflet-container,
html.theme-dark .zone-map-wrapper .leaflet-container{
  background:#0b0e14;
}

/* Boutons éventuels sous la map */

html.dark .zone-map-wrapper .btn,
html.theme-dark .zone-map-wrapper .btn{
  background:#1e293b;
  color:#e6e8ee;
  border-color:rgba(255,255,255,.08);
}
html.dark .zone-map-wrapper .btn:hover,
html.theme-dark .zone-map-wrapper .btn:hover{
  background:#273449;
}

html.theme-dark .notice-highlight,
html.dark .notice-highlight{
  background: linear-gradient(
    135deg,
    rgba(59,130,246,0.12),
    rgba(59,130,246,0.04)
  ); /* bleu discret, pro */

  color: rgba(245,245,247,0.95);
  border-left: 4px solid #3b82f6;

  padding: 14px 18px;
  border-radius: 10px;

  font-weight: 600;
  line-height: 1.5;

  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* Mise en valeur du prix */

html.theme-dark .notice-highlight strong,
html.dark .notice-highlight strong{
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   BLOC — DARK MODE — LEAFLET (surcharge le light de styles.css)
--------------------------------------------------------------------- */

html.theme-dark .zone-map-wrapper .leaflet-container,
html.dark .zone-map-wrapper .leaflet-container{
  background:#0f1115 !important;
}

html.theme-dark .zone-map-wrapper .leaflet-control-attribution,
html.dark .zone-map-wrapper .leaflet-control-attribution{
  display:none !important;
}

/* Marker */

html.theme-dark .zone-map-wrapper .leaflet-marker-icon,
html.dark .zone-map-wrapper .leaflet-marker-icon{
  border-radius:50% !important;
  background:#0f1115 !important;
  box-shadow:
    0 0 0 6px rgba(88,230,223,.25),
    0 6px 18px rgba(0,0,0,.75) !important;
}

/* Popup sombre */

html.theme-dark .zone-map-wrapper .leaflet-popup-content-wrapper,
html.theme-dark .zone-map-wrapper .leaflet-popup-tip,
html.dark .zone-map-wrapper .leaflet-popup-content-wrapper,
html.dark .zone-map-wrapper .leaflet-popup-tip{
  background:#0f1115 !important;
  color:#ffffff !important;
  border-radius:10px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.6) !important;
}

html.theme-dark .zone-map-wrapper .leaflet-popup-content,
html.dark .zone-map-wrapper .leaflet-popup-content{
  margin:0 !important;
  padding:12px 16px !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

html.theme-dark .zone-map-wrapper .leaflet-popup-close-button,
html.dark .zone-map-wrapper .leaflet-popup-close-button{
  color:#9aa0a6 !important;
}
html.theme-dark .zone-map-wrapper .leaflet-popup-close-button:hover,
html.dark .zone-map-wrapper .leaflet-popup-close-button:hover{
  color:#ffffff !important;
}

/* Label sombre */

html.theme-dark .zone-map-wrapper .zone-label,
html.dark .zone-map-wrapper .zone-label{
  background:rgba(15,17,21,.95) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  border-radius:6px !important;
  padding:6px 10px !important;
  font-size:12px !important;
}

/* Zoom + / - (ne pas hériter de filtres globaux) */

html.theme-dark .zone-map-wrapper .leaflet-control-zoom,
html.theme-dark .zone-map-wrapper .leaflet-bar,
html.dark .zone-map-wrapper .leaflet-control-zoom,
html.dark .zone-map-wrapper .leaflet-bar{
  filter:none !important;
  mix-blend-mode:normal !important;
}

html.theme-dark .zone-map-wrapper .leaflet-control-zoom a,
html.theme-dark .zone-map-wrapper .leaflet-bar a,
html.dark .zone-map-wrapper .leaflet-control-zoom a,
html.dark .zone-map-wrapper .leaflet-bar a{
  background:#ffffff !important;
  color:#000000 !important;
  border:none !important;
  text-decoration:none !important;
  opacity:1 !important;
}

html.theme-dark .zone-map-wrapper .leaflet-control-zoom a span,
html.dark .zone-map-wrapper .leaflet-control-zoom a span{
  color:#000000 !important;
}

html.theme-dark .zone-map-wrapper .leaflet-control-zoom a:first-child,
html.dark .zone-map-wrapper .leaflet-control-zoom a:first-child{
  border-bottom:1px solid #d0d0d0 !important;
}

/* ---------------------------------------------------------------------
   BLOC — FIX: bulles d'erreur du formulaire (tooltip-error) en mode sombre
--------------------------------------------------------------------- */

html.theme-dark #contact-form .tooltip-error,
html.theme-dark #contact-form .tooltip-error *{
  color: #111 !important; /* texte noir lisible sur fond blanc */

}

/* On garde l'icône en blanc (sinon elle passe noire aussi) */

html.theme-dark #contact-form .tooltip-error .tip-icon{
  color: #fff !important;
}

/* =========================================================
   ZONE D’INTERVENTION – MODE SOMBRE
========================================================= */

/* Fond général des blocs de la page */

html.dark .zone-infographie,
html.theme-dark .zone-infographie{
  background:transparent;
}

/* Cartes / bulles département */

html.dark .zone-infographie .bubble,
html.theme-dark .zone-infographie .bubble{
  background:#12151c;
  color:#e6e8ee;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* Titres des bulles */

html.dark .zone-infographie .bubble h3,
html.theme-dark .zone-infographie .bubble h3{
  color:#ffffff;
}

/* Texte des bulles */

html.dark .zone-infographie .bubble p,
html.theme-dark .zone-infographie .bubble p{
  color:#cfd3dc;
}

/* Bloc notice / info (ex : frais de déplacement) */

html.dark .notice-bubble,
html.theme-dark .notice-bubble{
  background:#10131a;
  color:#cfd3dc;
  border-left:4px solid #3b82f6; /* bleu discret */

  box-shadow:0 16px 36px rgba(0,0,0,.6);
}

/* Liens dans les notices */

html.dark .notice-bubble a,
html.theme-dark .notice-bubble a{
  color:#60a5fa;
}

/* Message CTRL + molette (map) */

html.dark .zone-zoom-hint,
html.theme-dark .zone-zoom-hint{
  background:rgba(18,21,28,.92);
  color:#e6e8ee;
  box-shadow:0 20px 40px rgba(0,0,0,.7);
}

/* Carte Leaflet – fond cohérent dark */

html.dark .zone-map-wrapper .leaflet-container,
html.theme-dark .zone-map-wrapper .leaflet-container{
  background:#0b0e14;
}

/* Boutons éventuels sous la map */

html.dark .zone-map-wrapper .btn,
html.theme-dark .zone-map-wrapper .btn{
  background:#1e293b;
  color:#e6e8ee;
  border-color:rgba(255,255,255,.08);
}
html.dark .zone-map-wrapper .btn:hover,
html.theme-dark .zone-map-wrapper .btn:hover{
  background:#273449;
}

html.theme-dark .notice-highlight,
html.dark .notice-highlight{
  background: linear-gradient(
    135deg,
    rgba(59,130,246,0.12),
    rgba(59,130,246,0.04)
  ); /* bleu discret, pro */

  color: rgba(245,245,247,0.95);
  border-left: 4px solid #3b82f6;

  padding: 14px 18px;
  border-radius: 10px;

  font-weight: 600;
  line-height: 1.5;

  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* Mise en valeur du prix */

html.theme-dark .notice-highlight strong,
html.dark .notice-highlight strong{
  color: #ffffff;
}

/* (Leaflet : styles du mockup map déplacés / centralisés dans mockup.css) */

/* ---------------------------------------------------------------------
   BLOC — FIX: bulles d'erreur du formulaire (tooltip-error) en mode sombre
--------------------------------------------------------------------- */

html.theme-dark #contact-form .tooltip-error,
html.theme-dark #contact-form .tooltip-error *{
  color: #111 !important; /* texte noir lisible sur fond blanc */

}

/* On garde l'icône en blanc (sinon elle passe noire aussi) */

html.theme-dark #contact-form .tooltip-error .tip-icon{
  color: #fff !important;
}

/* =========================================
   FIX FINAL — DEST MARKER (MODE SOMBRE)
   Supprime le rond + halo Leaflet
========================================= */

html.theme-dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern,
html.dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern,
html.theme-dark .zone-map-wrapper .leaflet-div-icon.dest-pin-modern,
html.dark .zone-map-wrapper .leaflet-div-icon.dest-pin-modern{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}

/* sécurité absolue : pseudo-éléments */
html.theme-dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern::before,
html.theme-dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern::after,
html.dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern::before,
html.dark .zone-map-wrapper .leaflet-marker-icon.dest-pin-modern::after{
  content: none !important;
  display: none !important;
}




/* =========================================================
   DARK THEME — Selection (surlignage texte)
   Correspondance: corrige la sélection illisible en thème sombre
   Scope: uniquement quand <html class="theme-dark">
========================================================= */

/* Chrome / Edge / Safari */
html.theme-dark ::selection{
  background: rgba(108, 92, 231, 0.55); /* violet lisible */
  color: #ffffff;
}

/* Firefox */
html.theme-dark ::-moz-selection{
  background: rgba(108, 92, 231, 0.55);
  color: #ffffff;
}

/* Optionnel (utile si tu sélectionnes du texte dans les champs) */
html.theme-dark input::selection,
html.theme-dark textarea::selection{
  background: rgba(108, 92, 231, 0.55);
  color: #ffffff;
}
html.theme-dark input::-moz-selection,
html.theme-dark textarea::-moz-selection{
  background: rgba(108, 92, 231, 0.55);
  color: #ffffff;
}


/* Mobile menu active item indicator */

html.theme-dark .menu-drawer__menu-item[aria-current="page"],
html.theme-dark .menu-drawer__menu-item--active {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
}

/* Mini marqueur vertical à gauche (équivalent thème clair) */
html.theme-dark .menu-drawer__menu-item[aria-current="page"]::before,
html.theme-dark .menu-drawer__menu-item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 2px;
  background: #4f9cff; /* bleu visible sur fond sombre */
}

/* Texte un peu plus contrasté pour l’item actif */
html.theme-dark .menu-drawer__menu-item[aria-current="page"],
html.theme-dark .menu-drawer__menu-item--active {
  color: #ffffff;
  font-weight: 600;
}



/* =========================================================
   FAQ — Question ouverte (DARK MODE) — accentué
   Correspondance : bloc FAQ développé / ouvert
========================================================= */

/* Conteneur FAQ ouvert */
html.theme-dark .accordion details[open],
html.dark .accordion details[open]{
  background: rgb(20, 20, 23, 0.35) !important;
  border-radius: 12px;
  padding: 8px 0;
  overflow: hidden; /* force le fond à suivre les arrondis sur tout le bloc */
}

/* Si un enfant "prend le dessus" (très fréquent), on le force aussi */
html.theme-dark .accordion details[open] > * ,
html.dark .accordion details[open] > * {
  background: transparent !important; /* évite qu’un inner masque ton fond */
}

/* Question (summary) quand ouverte */
html.theme-dark .accordion details[open] > summary,
html.dark .accordion details[open] > summary{
  color: #ffffff;
  font-weight: 600;
}

/* Mini marqueur visuel à gauche (cohérent avec ton menu) */
html.theme-dark .accordion details[open]::before,
html.dark .accordion details[open]::before{
  content: "";
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 18%;
  width: 1px;
  border-radius: 2px;
  background: #4f9cff;
}

/* Important pour positionner le marqueur */
html.theme-dark .accordion details,
html.dark .accordion details{
  position: relative;
}










/* ============================
   PROMO BAR – DARK MODE
============================ */

html.theme-dark #promo-bar{
  background: #121212; 
  color: #ffffff;
}

/* le texte animé hérite bien de la couleur */
html.theme-dark #promo-bar span{
  color: inherit;
}