h1, h2,
 a, span,
button{
  font-family:"Gliker", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


h1, h2, h3, .h-hero, .h-sec, .h-mega, .word,
.reveal-words, .w-mask, .w, .sc-title, .idx-name, .cf-name{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}
.w-mask{ white-space:nowrap; }

    /* garde-fou : evite tout debordement du menu si le CSS externe tarde a charger */
    .nav-item{ position:relative; }
    .dropdown{ position:absolute; opacity:0; visibility:hidden; }
    .nav-item:hover > .dropdown,.nav-item.open > .dropdown{ opacity:1; visibility:visible; }
    .ddi svg{ width:18px; height:18px; }
    .caret{ width:13px; height:13px; }
    .theme-switch .ts-i{ width:14px; height:14px; }
    .burger span{ width:17px; height:2px; }

    .logo-box{ position:relative; }
.logo-box img{ display:block; transition:opacity .45s ease; }

/* Par défaut (thème clair) : on montre le logo clair, on cache le sombre */
.logo-box .logo-dark{ position:absolute; inset:0; margin:auto; opacity:0; pointer-events:none; }
.logo-box .logo-light{ opacity:1; }

/* Thème sombre : on inverse */
[data-theme="dark"] .logo-box .logo-light{ opacity:0; pointer-events:none; }
[data-theme="dark"] .logo-box .logo-dark{ opacity:1; }

/* le selecteur de langue est un petit formulaire GET : le curseur orange
   (.lang-knob) doit rester DERRIERE les libelles FR / EN */
.lang-switch{ position:relative; }
.lang-switch .lang-knob{ z-index:0; }
.lang-switch .lang-opt{ position:relative; z-index:2; cursor:pointer; background:transparent; }

/* ---------------------------------------------------------
   HEADER AU SCROLL — le topbar est fixed ; sans fond le
   contenu defile dessous et devient illisible.
   --------------------------------------------------------- */
html body header.topbar{
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
html body.is-scrolled header.topbar{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:rgba(11,11,13,.10);
  box-shadow:0 12px 34px -26px rgba(11,11,13,.6);
}
html[data-theme="dark"] body.is-scrolled header.topbar{
  background:rgba(10,10,12,.86);
  border-bottom-color:rgba(236,235,230,.14);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.9);
}

@media (max-width:768px){
  #mmenu{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  #mmenu .mm-nav{ overflow-y:auto; }
  #mmenu .mm-sub{
    max-height:0; overflow-y:auto; overflow-x:hidden;
    transition:max-height .5s cubic-bezier(.16,1,.3,1);
    -webkit-overflow-scrolling:touch;
  }
  #mmenu .mm-acc.open .mm-sub{ max-height:70vh; }
}


/* =====================================================================
   HEADER RESPONSIVE FIABLE — garde-fou local
   Empêche la version mobile d'apparaître sur desktop même si Tailwind
   ou style.css charge tardivement / contient une règle concurrente.
   ===================================================================== */
#mmenu{
  display:block;
  position:fixed;
  inset:0;
  z-index:10000;
  background:#fff;
  color:#0b0b0d;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(100%);
  transition:transform .36s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility .25s ease;
}
#mmenu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
[data-theme="dark"] #mmenu{
  background:#0a0a0c;
  color:#ecebe6;
}
body.syo-menu-open{ overflow:hidden !important; }

#mmenu .mm-head{
  min-height:76px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(11,11,13,.10);
}
[data-theme="dark"] #mmenu .mm-head{ border-bottom-color:rgba(236,235,230,.13); }
#mmenu .mm-logo{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  color:inherit;
}
#mmenu .mm-logo .logo-box{ width:42px; min-width:42px; }
#mmenu .mm-logo .logo-box img{ width:100%; height:auto; }
#mmenu .mm-logo .wm-ink{ font-size:12px; font-weight:800; white-space:nowrap; }
#mmenu .mm-x{
  width:44px;
  height:44px;
  min-width:44px;
  border:1px solid rgba(11,11,13,.12);
  border-radius:14px;
  display:grid;
  place-items:center;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
[data-theme="dark"] #mmenu .mm-x{ border-color:rgba(236,235,230,.16); }

#mmenu .mm-nav{
  height:calc(100dvh - 156px);
  padding:12px 16px 24px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#mmenu .mm-link{
  width:100%;
  min-height:52px;
  padding:13px 4px;
  border:0;
  border-bottom:1px solid rgba(11,11,13,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:transparent;
  color:inherit;
  text-align:left;
  text-decoration:none;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}
[data-theme="dark"] #mmenu .mm-link{ border-bottom-color:rgba(236,235,230,.11); }
#mmenu .mm-caret{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  transition:transform .25s ease, background .25s ease;
}
#mmenu .mm-acc.open .mm-caret{ transform:rotate(180deg); }
#mmenu .mm-sub{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 0 0 12px;
  transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .2s ease, padding .2s ease;
}
#mmenu .mm-acc.open .mm-sub{
  max-height:52vh;
  overflow-y:auto;
  opacity:1;
  padding-top:7px;
  padding-bottom:7px;
}
#mmenu .mm-sublink{
  display:block;
  padding:11px 12px;
  margin:3px 0;
  border-radius:11px;
  color:inherit;
  text-decoration:none;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
  background:rgba(245,115,35,.055);
}
#mmenu .mm-sublink:active{ background:rgba(245,115,35,.14); }
#mmenu .mm-foot{
  height:80px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid rgba(11,11,13,.10);
  background:inherit;
}
[data-theme="dark"] #mmenu .mm-foot{ border-top-color:rgba(236,235,230,.13); }
#mmenu .mm-foot .mm-cta{
  margin-left:auto;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}

/* Le bouton burger reste lisible et possède une vraie zone tactile. */
#menuBtn.burger{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:13px;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:transparent;
  cursor:pointer;
}
#menuBtn.burger span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .25s ease, opacity .2s ease;
}
#menuBtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#menuBtn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#menuBtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* MOBILE + TABLETTE : navigation principale desktop totalement masquée. */
@media (max-width:1023.98px){
  header.topbar{ padding-left:16px !important; padding-right:16px !important; }
  header.topbar .mainnav{ display:none !important; }
  #menuBtn.burger{ display:flex !important; }
  header.topbar .cta-nav{ display:none !important; }
  header.topbar .logo-wrap .wm-ink{ display:none !important; }
  header.topbar .logo-box{ width:46px; }
  header.topbar .logo-box img{ width:100%; height:auto; }
}

/* Petit mobile : on garde uniquement logo + burger dans la barre supérieure.
   Langue et thème restent accessibles dans le panneau mobile. */
@media (max-width:639.98px){
  header.topbar [data-lang-switch],
  header.topbar [data-theme-toggle]{ display:none !important; }
  #mmenu .mm-logo .wm-ink{ display:none; }
  #mmenu .mm-head{ min-height:68px; }
  #mmenu .mm-nav{ height:calc(100dvh - 148px); }
  #mmenu .mm-foot{ height:80px; }
}

/* DESKTOP : le menu mobile est impossible à afficher et le menu horizontal
   reste visible indépendamment des utilitaires Tailwind. */
@media (min-width:1024px){
  #mmenu,
  #mmenu.is-open{ display:none !important; }
  header.topbar .mainnav{
    display:flex !important;
    align-items:center;
    gap:4px;
  }
  #menuBtn.burger{ display:none !important; }
  header.topbar .nav-link{ white-space:nowrap; }
  header.topbar .nav-item{ position:relative; }
  header.topbar .dropdown{
    z-index:1000;
    top:calc(100% + 12px);
  }
  header.topbar .nav-item:hover > .dropdown,
  header.topbar .nav-item.open > .dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

/* Desktop intermédiaire : évite que la barre déborde entre 1024 et 1250px. */
@media (min-width:1024px) and (max-width:1249.98px){
  header.topbar{ padding-left:18px !important; padding-right:18px !important; }
  header.topbar .mainnav{ gap:0; }
  header.topbar .nav-link{ padding-left:8px !important; padding-right:8px !important; font-size:13px !important; }
  header.topbar .logo-wrap .wm-ink{ display:none !important; }
  header.topbar .cta-nav{ display:none !important; }
}