/* =======================================================
   © 2025 Pascal Evrard — Agence digitale Afondlacom'
   Fichier : /assets/css/header.css
   SECTION: HEADER v2 — mobile-first, sous-menus, search overlay, dark mode, nav centré
   ======================================================= */

/* ========== Tokens ========== */
:root{
  --container-w: 1400px;

  --header-bg:#ffffff;
  --ink:#111111;
  --accent:#f57d1b;
  --muted:#4b5563;

  --shadow:0 8px 24px rgba(0,0,0,.08);
  --z-header:10000;

  --search-visual-size: 140px;

  /* Couleurs sous-menus — suivent le thème */
  --menu-bg:#ffffff;
  --menu-text:#111111;
  --menu-border:#eeeeee;
  --menu-hover:#f6f6f6;
}
/* Overrides dark (compat .dark sur body et data-theme sur html) */
body.dark,
html[data-theme="dark"]{
  --menu-bg:#131a2b;
  --menu-text:#e5e7eb;
  --menu-border:rgba(255,255,255,.08);
  --menu-hover:rgba(255,255,255,.06);
}

*{ box-sizing:border-box }

/* ========== Base header ========== */
.site-header{
  position: sticky; top:0; z-index:var(--z-header);
  background: var(--header-bg);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; max-width:var(--container-w);
  margin:0 auto; padding:10px 16px;
}

/* ========== Logos ========== */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; justify-self:start; }
.brand-logo{ height:64px; width:auto; display:block; }
.brand-logo--dark{ display:none; }
@media (prefers-color-scheme: dark){
  .brand-logo--light{ display:none; }
  .brand-logo--dark{  display:block; }
}
body.dark .brand-logo--light{ display:none; }
body.dark .brand-logo--dark{  display:block; }

/* ========== Nav desktop ========== */
.main-nav{ display:none; justify-self:center; }
.main-nav .menu-level-1{
  list-style:none; margin:0; padding:0;
  display:flex; gap:28px; align-items:center; justify-content:center;
}
.main-nav .menu-level-1 > li{ position:relative; list-style:none; }
.main-nav a{ color:var(--ink); text-decoration:none; font:600 15px/1 Poppins,system-ui,Arial; }
.main-nav a:hover,
.main-nav .is-active > a{
  text-decoration: underline; text-underline-offset:6px;
  text-decoration-color: var(--accent);
}

/* Sous-menus (desktop) — styles de base (utilisent les variables de thème) */
.menu-level-2{
  position:absolute; top:100%; left:0; min-width:220px;
  background: var(--menu-bg); border:1px solid var(--menu-border);
  border-radius:12px; padding:8px; box-shadow:var(--shadow);
  display:none; color: var(--menu-text);
}
.menu-level-2 li{ list-style:none; }
.menu-level-2 a{
  display:block; padding:10px 12px; border-radius:8px;
  color: var(--menu-text); text-decoration:none; font:500 14px/1.1 Poppins;
}
.menu-level-2 a:hover{ background: var(--menu-hover); text-decoration:none; }
.menu-level-1 > li:focus-within > .menu-level-2,
.menu-level-1 > li:hover       > .menu-level-2{ display:block; }

/* ========== Icônes & burger ========== */
.right-actions{ display:flex; align-items:center; gap:16px; justify-self:end; }
.icon-btn{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:transparent; border:1px solid transparent; color:var(--ink); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:focus{ outline:2px solid #000; outline-offset:2px; }

.burger{ display:inline-flex; width:36px; height:36px; flex-direction:column; justify-content:center; gap:5px; background:transparent; border:0; padding:0; }
.burger span{ display:block; height:2px; width:22px; background:var(--ink); border-radius:2px; }

/* ========== Panel mobile ========== */
.mobile-panel{
  position:fixed; inset:0 auto 0 0; width:min(86%, 360px);
  background:#fff; box-shadow:var(--shadow);
  transform:translateX(-100%); transition:transform .28s ease;
  display:flex; flex-direction:column; height:100dvh; max-height:100dvh; padding-bottom:env(safe-area-inset-bottom);
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.panel-title{ font:700 18px/1 Poppins; }
.panel-close{ font-size:26px; line-height:1; background:transparent; border:0; padding:6px 10px; }

.panel-nav{ padding:10px 8px; flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.panel-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.panel-menu > li{ list-style:none; }
.panel-menu > li a,
.panel-menu > li .accordion{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px; border-radius:12px;
  color:#111; text-decoration:none; font:600 15px/1.1 Poppins; background:#fff; border:0; width:100%;
}
.panel-menu > li a:hover{ background:#f3f4f6; }
.panel-menu > li.has-children .submenu-list{ display:none; padding-left:8px; margin:4px 0 8px; list-style:none; max-height:60vh; overflow:auto; -webkit-overflow-scrolling:touch; }
.panel-menu > li.has-children[aria-expanded="true"] .submenu-list{ display:block; }
.panel-menu > li .accordion svg{ width:18px; height:18px; transition:transform .2s; }
.panel-menu > li .accordion[aria-expanded="true"] svg{ transform:rotate(180deg); }

.panel-contact{ display:grid; gap:10px; padding:10px 16px; }
.btn-primary{ display:block; text-align:center; padding:12px 14px; border-radius:12px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 6px 14px rgba(245,125,27,.22); }
.btn-outline{ display:block; text-align:center; padding:10px 14px; border-radius:12px; border:1px solid #ddd; color:#111; text-decoration:none; }

.panel-lang{ margin-top:auto; padding:12px 16px; display:flex; gap:8px; border-top:1px solid #eee; }
.lang-btn{ padding:8px 10px; border-radius:999px; border:1px solid #ddd; background:#fff; }

/* Backdrop mobile */
.panel-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); display:none; }
.mobile-open .mobile-panel{ transform:translateX(0); }
.mobile-open .panel-backdrop{ display:block; }

/* Tiret sous-cats (mobile) */
.panel-menu .submenu-list a{ position:relative; padding-left:18px; }
.panel-menu .submenu-list a::before{ content:"–"; position:absolute; left:6px; top:50%; transform:translateY(-50%); color:var(--muted); opacity:.9; }

/* Scrollbars discrets */
.panel-nav::-webkit-scrollbar,
.panel-menu .submenu-list::-webkit-scrollbar{ width:6px; }
.panel-nav::-webkit-scrollbar-thumb,
.panel-menu .submenu-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:999px; }
body.dark .panel-nav::-webkit-scrollbar-thumb,
body.dark .panel-menu .submenu-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }

/* Croix orange */
.mobile-panel .panel-close{
  color: var(--accent) !important; background:transparent; border:0;
  -webkit-tap-highlight-color:transparent; transition:background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mobile-panel .panel-close:hover{ background:rgba(245,125,27,.12); }
.mobile-panel .panel-close:focus{ outline:none; box-shadow:0 0 0 3px rgba(245,125,27,.35); }

/* ========== Search overlay — version unifiée (desktop + mobile) ========== */
/* Fermé par défaut ; s’ouvre quand <body> a .search-open */
[hidden]{ display:none !important; }

.search-overlay{
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  z-index: calc(var(--z-header) + 10);
  pointer-events: none;
  background: rgba(255,255,255,.96);              /* base light */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--ink);
}
.search-open .search-overlay{
  display: grid; pointer-events: auto;
}

/* Pile d’éléments (logo lotus + champ + bouton) */
.search-stack{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  width:min(720px, 92%);
  padding: 16px;
}

/* Visuel (lotus) */
.search-visual{
  display:grid; place-items:center;
  width: var(--search-visual-size); height: var(--search-visual-size);
  line-height:0; color: var(--ink);
}
.search-visual svg{ width:100%; height:100%; display:block; }
.search-visual svg [fill]:not([fill="none"]){ fill: currentColor !important; }
.search-visual object{ width:100%; height:100%; display:block; pointer-events:none; }

/* Rotation lotus */
@keyframes lotusSpin360 { to { transform: rotate(360deg); } }
.search-visual .spin{ will-change:transform; transform-origin:50% 50%; animation:lotusSpin360 24s linear infinite; animation-play-state:paused; }
.search-open .search-visual .spin{ animation-play-state:running; }
@media (prefers-reduced-motion: reduce){ .search-visual .spin{ animation:none !important; } }

/* Formulaire */
.search-overlay .search-form{ display:flex; gap:8px; width:100%; }
.search-overlay input[type="search"]{
  flex:1; padding:14px 16px; border-radius:12px;
  border:1px solid #ddd; font-size:16px;
  transition:border-color .2s ease, box-shadow .2s ease;
  background:#fff; color:#0d1321;
}
.search-overlay input[type="search"]:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,125,27,.18); outline:none;
}
.search-overlay button[type="submit"]{
  padding:14px 18px; border-radius:12px; border:0;
  background: var(--accent); color:#fff; font-weight:700;
  box-shadow: 0 6px 14px rgba(245,125,27,.22);
  transition: transform .06s, box-shadow .2s, filter .15s, background-color .15s;
}
.search-overlay button[type="submit"]:hover{ filter:brightness(.98); box-shadow:0 8px 20px rgba(245,125,27,.28); }
.search-overlay button[type="submit"]:active{ transform:translateY(1px); box-shadow:0 4px 10px rgba(245,125,27,.20); }

/* Bouton fermer */
.search-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;
  display:grid; place-items:center;
  font-size:28px; background:transparent; border:0; border-radius:999px;
  color:#111; transition:background-color .15s, color .15s, box-shadow .15s;
}
.search-close:hover{ background:rgba(0,0,0,.06); }
.search-close:focus{ outline:none; box-shadow:0 0 0 3px rgba(17,17,17,.25); }

/* Thème sombre (desktop + mobile) */
body.dark .search-overlay,
html[data-theme="dark"] .search-overlay{
  background:#0f1220;              /* fond nuit opaque */
  backdrop-filter:none; -webkit-backdrop-filter:none;
  color:#e5e7eb;
}
body.dark .search-overlay input[type="search"],
html[data-theme="dark"] .search-overlay input[type="search"]{
  background:#0f1220; border-color:rgba(255,255,255,.18); color:#e5e7eb;
}
body.dark .search-overlay button[type="submit"],
html[data-theme="dark"] .search-overlay button[type="submit"]{
  background:#e5e7eb; color:#0f1220;
}
body.dark .search-overlay .search-close,
html[data-theme="dark"] .search-overlay .search-close{
  color:#ffffff;
}
body.dark .search-overlay .search-visual svg,
body.dark .search-overlay .search-visual object,
body.dark .search-overlay .search-visual img,
html[data-theme="dark"] .search-overlay .search-visual svg,
html[data-theme="dark"] .search-overlay .search-visual object,
html[data-theme="dark"] .search-overlay .search-visual img{
  filter: brightness(0) invert(1); /* lotus blanc en dark */
}

/* Mobile : plein écran + exigences du mode jour */
@media (max-width:1023.98px){
  .search-overlay{
    height: 100vh; height: 100dvh; min-height: 100vh;
    overflow:auto; overscroll-behavior:contain;
    z-index: 999999 !important;
  }
  body.search-open{ overflow:hidden; }  /* bloque le scroll derrière */

  /* MODE JOUR — demandes exactes */
  body:not(.dark).search-open .search-overlay,
  html:not([data-theme="dark"]).search-open .search-overlay{
    background:#ffffff !important;  /* fond blanc plein écran */
    color:#0d1321 !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  body:not(.dark).search-open .search-overlay .search-close,
  html:not([data-theme="dark"]).search-open .search-overlay .search-close{
    color:#0d1321 !important;       /* croix #0d1321 */
  }
  body:not(.dark).search-open .search-overlay input[type="search"],
  html:not([data-theme="dark"]).search-open .search-overlay input[type="search"]{
    background:#ffffff !important;  /* fond champ blanc */
    border:2px solid #f57d1b !important; /* bordure orange */
    color:#0d1321 !important;
    box-shadow:none !important;
  }
  body:not(.dark).search-open .search-overlay button[type="submit"],
  html:not([data-theme="dark"]).search-open .search-overlay button[type="submit"]{
    background:#f57d1b !important;  /* bouton orange */
    color:#ffffff !important;       /* lettres blanches */
    border:0 !important;
  }
}

/* ========== Thème clair/sombre global ========== */
body{ background:#ffffff; color:#0d1321; }
body.dark{ background:#0d1321; color:#f3f4f6; }
body.dark a{ color:#e5e7eb; } body.dark a:hover{ color:#ffffff; }

/* Forçage “clair” au scroll pour éviter l’intermittence observée */
body:not(.dark) .site-header.is-scrolled{
  background: var(--header-bg) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
body.dark .site-header{ background:#0f1220; border-bottom-color:rgba(255,255,255,.08); }
body.dark .icon-btn{ color:#e5e7eb; }
body.dark .main-nav a{ color:#e5e7eb; }

/* ========== Desktop ≥1024px ========== */
@media (min-width:1024px){
  .burger{ display:none; }
  .mobile-panel,.panel-backdrop{ display:none; }
  .header-inner{ padding:12px 24px; }
  .main-nav{ display:block; margin:0; }
  .right-actions{ gap:16px; }
}

/* ========== Typo globale (menu) ========== */
:root{ --font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.main-nav a,
.panel-menu > li > a,
.panel-menu .accordion span,
.panel-menu .submenu-list a{
  font-family: var(--font-ui) !important; font-weight: 600; text-transform:none !important; font-synthesis:none;
}
.menu-level-2 a{ font-family: var(--font-ui) !important; font-weight:500; text-transform:none !important; font-synthesis:none; }

/* ========== Home : header overlay au-dessus de la vidéo ========== */
.is-home .site-header{
  position: fixed !important; top:0; left:0; right:0;
  background: transparent !important; border-bottom-color: transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  z-index: var(--z-header) !important; pointer-events:auto !important;
}
.is-home .site-header .header-inner{
  max-width:none !important; width:100% !important; padding-left:60px !important; padding-right:60px !important;
}

/* Home : contrastes avant scroll (sur vidéo) + position 44px */
.is-home .site-header:not(.is-scrolled) .main-nav a{ color:#fff !important; }
.is-home .site-header:not(.is-scrolled) .icon-btn{ color:#fff !important; }
.is-home .site-header:not(.is-scrolled) .burger span{ background:#fff !important; }
.is-home .site-header:not(.is-scrolled) .brand-logo--light{ display:none !important; }
.is-home .site-header:not(.is-scrolled) .brand-logo--dark{  display:block !important; }
.is-home .site-header:not(.is-scrolled) .header-inner{
  padding-top:44px !important;
  padding-bottom:12px !important;
}

/* Scroll : header plein */
.site-header.is-scrolled{
  position: sticky !important; top:0;
  background: var(--header-bg) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
.site-header.is-scrolled .main-nav a,
.site-header.is-scrolled .icon-btn{ color: var(--ink) !important; }
.site-header.is-scrolled .burger span{ background: var(--ink) !important; }

/* Scroll + Dark */
body.dark .site-header.is-scrolled{
  background:#0f1220 !important; border-bottom-color: rgba(255,255,255,.08) !important;
}
body.dark .site-header.is-scrolled .main-nav a,
body.dark .site-header.is-scrolled .icon-btn{ color:#e5e7eb !important; }
body.dark .site-header.is-scrolled .burger span{ background:#e5e7eb !important; }

/* Fix logo en Dark + Home + Scrolled */
body.dark.is-home .site-header.is-scrolled .brand-logo--light{ display:none !important; }
body.dark.is-home .site-header.is-scrolled .brand-logo--dark{  display:block !important; }

/* ========== Sous-menus : AVANT SCROLL (alignés sur le thème via variables) ========== */
body.is-home .site-header:not(.is-scrolled) .menu-level-2{
  background: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  color: var(--menu-text) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
body.is-home .site-header:not(.is-scrolled) .menu-level-2 a{
  color: var(--menu-text) !important;
}
body.is-home .site-header:not(.is-scrolled) .menu-level-2 a:hover{
  background: var(--menu-hover) !important;
}

/* ========== Sous-menus : APRÈS SCROLL (mêmes variables → cohérence) ========== */
.site-header.is-scrolled .menu-level-2{
  background: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  color: var(--menu-text) !important;
}
.site-header.is-scrolled .menu-level-2 a{
  color: var(--menu-text) !important;
}
.site-header.is-scrolled .menu-level-2 a:hover{
  background: var(--menu-hover) !important;
}

/* ========== Focus visibles ========== */
.is-home .site-header:not(.is-scrolled) .icon-btn:focus,
.is-home .site-header:not(.is-scrolled) .icon-btn:focus-visible,
.is-home .site-header:not(.is-scrolled) .burger:focus,
.is-home .site-header:not(.is-scrolled) .burger:focus-visible{
  outline:2px solid #fff !important; outline-offset:2px !important; box-shadow:none !important;
}
.icon-btn:focus{ outline:2px solid #000; outline-offset:2px; }
.site-header.is-scrolled .icon-btn:focus{ box-shadow:0 0 0 3px rgba(17,17,17,.25) !important; outline:none; }

/* ========== Z-index sûrs ========== */
.site-header{ z-index: var(--z-header) !important; }

/* ========== Sous-menu toggle visibilité ========== */
/* Desktop : bouton invisible (hover/focus suffisent) */
@media (min-width:1024px){
  .menu-level-1 > li.has-children > .submenu-toggle{
    position:absolute; inset:auto 0 0 auto;
    width:16px; height:16px;
    opacity:0; pointer-events:none;
    border:0; background:transparent;
  }
}
/* Mobile : bouton visible et cliquable */
@media (max-width:1023.98px){
  .menu-level-1 > li.has-children > .submenu-toggle{
    position:static;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    border:0; background:transparent; color:inherit; opacity:1; pointer-events:auto;
  }
  .menu-level-1 > li.has-children > .submenu-toggle::before{
    content:"▾"; font-size:14px; line-height:1;
  }
}

/* ========== Priorités d’overlays & clics (mobile) ========== */
.search-overlay{ z-index: calc(var(--z-header) + 10) !important; pointer-events: none; }
.search-open .search-overlay{ pointer-events: auto; }
.site-header{ z-index: var(--z-header) !important; pointer-events: auto; }
.hero-overlay{ pointer-events: none !important; }
.hero-overlay .hero-inner, .hero-overlay .hero-inner *{ pointer-events: auto; }
.panel-backdrop{ z-index: calc(var(--z-header) + 12) !important; }
.mobile-panel  { z-index: calc(var(--z-header) + 13) !important; }
a, button, .btn-cta, .icon-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ========== Mobile fix: header qui “descend” après re-scroll (home) ========== */
@media (max-width:1023.98px){
  .is-home .site-header,
  .is-home .site-header.is-scrolled{
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    transform: translateY(0) !important;
  }
  .is-home .site-header.is-scrolled{
    background: var(--header-bg) !important;
    border-bottom-color: rgba(0,0,0,.06) !important;
  }
  body.dark .is-home .site-header.is-scrolled{
    background:#0f1220 !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
}

/* ========== Mobile : logos corrects selon l’état ========== */
@media (max-width:1023.98px){
  /* Light + scrolled : logo noir */
  body:not(.dark) .is-home .site-header.is-scrolled .brand-logo--light{ display:block !important; }
  body:not(.dark) .is-home .site-header.is-scrolled .brand-logo--dark{  display:none  !important; }

  /* Avant scroll (sur vidéo) : logo blanc */
  body:not(.dark) .is-home .site-header:not(.is-scrolled) .brand-logo--light{ display:none  !important; }
  body:not(.dark) .is-home .site-header:not(.is-scrolled) .brand-logo--dark{  display:block !important; }
}

/* ========== Mobile : aligner header sur les rails du hero + micro-marge logo ========== */
@media (max-width:1023.98px){
  .is-home .site-header .header-inner{
    max-width: var(--container-w);
    margin: 0 auto;
    padding-left: 20px !important;     /* mêmes rails que le texte du slider */
    padding-right: 20px !important;
  }
  .is-home .site-header .brand{ justify-self:start; margin-left: 10px !important; }
  .is-home .site-header .right-actions{ justify-self:end; margin-right: 0 !important; }
  .is-home .site-header .burger{ margin-right: 0 !important; }
}
/* ====== SEARCH — OVERRIDE FINAL (DARK) ====== */
/* Cible : page de recherche ouverte en mode sombre.
   Effets demandés :
   - Fond de l’overlay : #0d1321
   - Croix "×" : blanche
   - Lotus tournant : blanc
   - Champ : fond sombre, BORDURE ORANGE (#f57d1b), texte clair
   - Bouton : orange (#f57d1b) avec lettres blanches
   Remarque : pas de media query pour éviter tout raté de breakpoint mobile. */

:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay{
  background:#0d1321 !important;
  color:#e5e7eb !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index: 999999 !important; /* au-dessus de tout */
}

/* Croix de fermeture */
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay .search-close{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Lotus (quel que soit le type d’asset) → blanc */
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay .search-visual svg,
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay .search-visual object,
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay .search-visual img{
  filter: brightness(0) invert(1) !important;
}

/* Champ : on conserve la bordure orange */
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay input[type="search"]{
  background:#0d1321 !important;
  border:2px solid #f57d1b !important;
  color:#e5e7eb !important;
  box-shadow:none !important;
}
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay input[type="search"]::placeholder{
  color:rgba(229,231,235,.65) !important;
  opacity:1;
}

/* Bouton : orange + texte blanc */
:is(body.dark, html.dark, html[data-theme="dark"]).search-open .search-overlay button[type="submit"]{
  background:#f57d1b !important;
  color:#ffffff !important;
  border:0 !important;
}
/* ====== SEARCH SNAPSHOT THEME (supra-spécifique, gagne la cascade) ====== */

/* MOBILE — plein écran stable (au cas où) */
@media (max-width:1023.98px){
  .search-open .search-overlay{
    position:fixed; inset:0; height:100dvh; min-height:100vh;
    display:grid; overscroll-behavior:contain; z-index:999999;
  }
  body.search-open{ overflow:hidden; }
}

/* -------- LIGHT snapshot -------- */
.search-open.search-light .search-overlay{
  background:#ffffff !important; color:#0d1321 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.search-open.search-light .search-overlay .search-close{
  color:#0d1321 !important; -webkit-text-fill-color:#0d1321 !important;
}
.search-open.search-light .search-overlay input[type="search"]{
  background:#ffffff !important; border:2px solid #f57d1b !important;
  color:#0d1321 !important; box-shadow:none !important;
}
.search-open.search-light .search-overlay input[type="search"]::placeholder{
  color:rgba(13,19,33,.6) !important; opacity:1;
}
.search-open.search-light .search-overlay button[type="submit"]{
  background:#f57d1b !important; color:#ffffff !important; border:0 !important;
}
/* lotus reste sombre en light (pas de filtre) */
.search-open.search-light .search-overlay .search-visual svg,
.search-open.search-light .search-overlay .search-visual object,
.search-open.search-light .search-overlay .search-visual img{
  filter:none !important;
}

/* -------- DARK snapshot -------- */
.search-open.search-dark .search-overlay{
  background:#0d1321 !important; color:#e5e7eb !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.search-open.search-dark .search-overlay .search-close{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
/* Tu souhaites garder la bordure orange et bouton orange en dark */
.search-open.search-dark .search-overlay input[type="search"]{
  background:#0d1321 !important; border:2px solid #f57d1b !important;
  color:#e5e7eb !important; box-shadow:none !important;
}
.search-open.search-dark .search-overlay input[type="search"]::placeholder{
  color:rgba(229,231,235,.60) !important; opacity:1;
}
.search-open.search-dark .search-overlay button[type="submit"]{
  background:#f57d1b !important; color:#ffffff !important; border:0 !important;
}
/* lotus blanc en dark */
.search-open.search-dark .search-overlay .search-visual svg,
.search-open.search-dark .search-overlay .search-visual object,
.search-open.search-dark .search-overlay .search-visual img{
  filter: brightness(0) invert(1) !important;
}
/* ===== Mobile panel — réactivation dark robuste ===== */
/* Couvre body.dark, html.dark et html[data-theme="dark"] */
@media (max-width:1023.98px){
  :is(body.dark, html.dark, html[data-theme="dark"]) .mobile-panel{
    background:#0f1220 !important;
    color:#e5e7eb !important;
  }
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-head{
    border-bottom-color: rgba(255,255,255,.10) !important;
  }

  /* Liens de 1er niveau / boutons d’accordéon */
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li a,
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li .accordion{
    background: transparent !important;
    color:#e5e7eb !important;
    border-color: transparent !important;
  }
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li a:hover,
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li .accordion:hover{
    background: rgba(255,255,255,.06) !important;
  }
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li .accordion svg{
    fill:#e5e7eb !important; stroke:#e5e7eb !important;
  }

  /* Sous-listes */
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-menu > li.has-children .submenu-list{
    border-left:1px solid rgba(255,255,255,.10) !important;
  }

  /* Boutons pied de panneau */
  :is(body.dark, html.dark, html[data-theme="dark"]) .btn-outline{
    border-color: rgba(255,255,255,.20) !important;
    color:#e5e7eb !important;
    background: transparent !important;
  }
  :is(body.dark, html.dark, html[data-theme="dark"]) .lang-btn{
    background: transparent !important;
    border-color: rgba(255,255,255,.20) !important;
    color:#e5e7eb !important;
  }

  /* Backdrop */
  :is(body.dark, html.dark, html[data-theme="dark"]) .panel-backdrop{
    background: rgba(0,0,0,.5) !important;
  }
}
/* === LOGO — mobile, light, scrolled === */
@media (max-width:1023.98px){
  :is(body:not(.dark)) .site-header.is-scrolled .brand .brand-logo--light{
    display:block !important; visibility:visible !important; opacity:1 !important;
  }
  :is(body:not(.dark)) .site-header.is-scrolled .brand .brand-logo--dark{
    display:none !important; visibility:hidden !important; opacity:0 !important;
  }
  /* Avant scroll (overlay vidéo) : on garde la version blanche */
  :is(body:not(.dark)).is-home .site-header:not(.is-scrolled) .brand .brand-logo--light{ display:none !important; }
  :is(body:not(.dark)).is-home .site-header:not(.is-scrolled) .brand .brand-logo--dark{  display:block !important; }
}
/* ===== MENU PRINCIPAL (NIVEAU 1) — Capitalisation par mot ===== */
/* Remplace les anciennes règles "lowercase + ::first-letter" */
.main-nav .menu-level-1 > li > a{
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize !important;   /* → Accueil, Yogatime Sxm, ... */
  text-decoration: none !important;
  transition: color .18s ease;
}

/* États : orange au hover/sélection (sans souligné) */
.main-nav .menu-level-1 > li > a:hover,
.main-nav .menu-level-1 > li.is-active > a,
.main-nav .menu-level-1 > li.current-menu-item > a,
.main-nav .menu-level-1 > li.current_page_item > a{
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Flèche plus petite, centrée, pointes arrondies (suit currentColor) */
@media (min-width:1024px){
  .main-nav .menu-level-1 > li.has-children > a{
    position: relative;
    padding-right: 16px;
  }
  .main-nav .menu-level-1 > li.has-children > a::after{
    content:"";
    position:absolute; top:50%; right:2px;
    width:7px; height:7px;
    border:2px solid currentColor; border-top:0; border-left:0;
    border-radius:2.5px;                   /* pointes arrondies */
    transform:translateY(-50%) rotate(45deg);
    opacity:.9; transition:opacity .18s, transform .18s, color .18s;
  }
  .main-nav .menu-level-1 > li.has-children:hover > a::after,
  .main-nav .menu-level-1 > li.has-children.is-active > a::after{
    opacity:1; transform:translateY(-48%) rotate(45deg);
  }
}

/* Neutralise tout souligné résiduel (niveau 1 uniquement) */
.main-nav .menu-level-1 > li > a,
.main-nav .menu-level-1 > li > a:hover,
.main-nav .menu-level-1 > li.is-active > a{
  text-decoration:none !important;
  text-underline-offset:0 !important;
  text-decoration-color:transparent !important;
}
/* Menu niveau 1 : pas de transformation CSS, on laisse le JS formater le texte */
.main-nav .menu-level-1 > li > a{
  text-transform: none !important;
}
/* ===== MENU NIVEAU 1 — hover & actif ORANGE ===== */

/* Couleur de base (suit le thème) */
.main-nav .menu-level-1 > li > a{
  color: var(--ink);
  text-decoration: none !important;
  transition: color .18s ease;
}
body.dark .main-nav .menu-level-1 > li > a{ color:#e5e7eb; }

/* Hover + actif = orange (niveau 1 seulement) */
.main-nav .menu-level-1 > li > a:hover,
.main-nav .menu-level-1 > li.is-active > a,
.main-nav .menu-level-1 > li.current-menu-item > a,
.main-nav .menu-level-1 > li.current_page_item > a{
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Home overlay (header transparent) : base blanche, mais hover/actif orange */
.is-home .site-header:not(.is-scrolled) .main-nav .menu-level-1 > li > a{
  color:#fff !important;
}
.is-home .site-header:not(.is-scrolled) .main-nav .menu-level-1 > li > a:hover,
.is-home .site-header:not(.is-scrolled) .main-nav .menu-level-1 > li.is-active > a,
.is-home .site-header:not(.is-scrolled) .main-nav .menu-level-1 > li.current-menu-item > a,
.is-home .site-header:not(.is-scrolled) .main-nav .menu-level-1 > li.current_page_item > a{
  color: var(--accent) !important;
}

/* Flèche des items avec sous-menu suit toujours la couleur (donc orange au hover/actif) */
@media (min-width:1024px){
  .main-nav .menu-level-1 > li.has-children > a::after{
    border-color: currentColor;  /* rien d’autre à faire, elle devient orange toute seule */
  }
}
/* ===== MENU NIVEAU 1 — flèche SVG nette (chevron arrondi) ===== */
@media (min-width:1024px){
  .main-nav .menu-level-1 > li.has-children > a{
    position: relative;
    padding-right: 18px; /* place pour l’icône */
  }
  .main-nav .menu-level-1 > li.has-children > a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 10px;                /* taille petite et nette */
    height: 10px;
    transform: translateY(-50%); 
    opacity: .9;
    /* on s’assure d’écraser l’ancienne flèche en bordures */
    border: 0 !important;
    border-radius: 0 !important;

    /* Icône SVG (chevron down arrondi) via mask → suit currentColor */
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;

    transition: transform .18s ease, opacity .18s ease;
  }

  /* Légère mise en évidence au hover/actif */
  .main-nav .menu-level-1 > li.has-children:hover > a::after,
  .main-nav .menu-level-1 > li.has-children.is-active > a::after{
    transform: translateY(-46%); /* petit nudge vers le bas */
    opacity: 1;
  }
}
/* ===== MENU NIVEAU 1 — chevron SVG 16px, centré, +5px d'écart ===== */
@media (min-width:1024px){
  .main-nav .menu-level-1 > li.has-children > a{
    position: relative;
    padding-right: 21px;       /* 16px (icône) + 5px (écart) */
    display: inline-block;     /* ancre mesurable pour le centrage vertical */
  }
  .main-nav .menu-level-1 > li.has-children > a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;                  /* collé au bord droit du lien */
    width: 16px;
    height: 16px;
    transform: translateY(-50%);   /* parfaitement centré sur la ligne du texte */
    opacity: .95;

    /* on s’assure d’écraser d’éventuels anciens styles */
    border: 0 !important;
    border-radius: 0 !important;

    /* Icône chevron down arrondi (masque SVG) qui suit currentColor */
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
  <path d="M6 9l6 6 6-6" stroke="black" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
    mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
  <path d="M6 9l6 6 6-6" stroke="black" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;

    pointer-events: none;       /* ne bloque jamais le clic sur le lien */
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Légère mise en évidence au hover/actif (couleur déjà gérée par currentColor) */
  .main-nav .menu-level-1 > li.has-children:hover > a::after,
  .main-nav .menu-level-1 > li.has-children.is-active > a::after{
    opacity: 1;
    transform: translateY(-50%) translateY(1px);
  }
}
/* ===== Back to top (desktop) ===== */
:root{ --z-header: 10000; } /* au cas où, fallback */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: #f57d1b;
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(245,125,27,.35);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, filter .15s ease;
  z-index: calc(var(--z-header) + 10); /* > header/menus */
}
.back-to-top svg{ display:block }

.back-to-top:hover{ filter: brightness(.98); box-shadow: 0 14px 30px rgba(245,125,27,.45); }
.back-to-top:active{ transform: translateY(9px); }
.back-to-top:focus{ outline: none; box-shadow: 0 0 0 3px rgba(245,125,27,.35), 0 10px 24px rgba(245,125,27,.35); }

/* Visible après scroll */
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mode dark : on garde l’orange identitaire */
body.dark .back-to-top{ background:#f57d1b; color:#fff; }

/* Desktop only */
@media (max-width:1023.98px){
  .back-to-top{ display: none !important; }
}