/* =========================================================
   Header premium + off-canvas 80% (right -> left) — CLEAN
   File: /assets/css/header.css
   ========================================================= */

:root{
  --hdr-bg:#fff;
  --hdr-line:#eee;
  --hdr-text:#111;
  --hdr-muted:#667085;
  --hdr-shadow:0 18px 48px rgba(16,24,40,.14);
  --hdr-shadow2:0 8px 22px rgba(16,24,40,.12);
}

/* =========================================================
   Base / Safety
   ========================================================= */
html{ scrollbar-gutter: stable; }
html, body{ overflow-x: hidden; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
  backdrop-filter: saturate(1.1) blur(6px);
  transform: none; /* avoid fixed issues if theme adds transforms */
}

/* =========================================================
   Top bar layout
   ========================================================= */
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
  padding:10px 16px;
}

/* Brand */
.nav__brand{display:flex;align-items:center;min-width:140px;}
.nav__logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--hdr-text);}
.nav__brandText{font-weight:850;letter-spacing:-.02em;font-size:1.02rem;}
.nav__logo img,
.custom-logo{height:38px;width:auto;display:block;}
.custom-logo-link{display:inline-flex;align-items:center;}

/* Search */
.nav__search{flex:1;display:flex;justify-content:center;}
.nav__search form{width:min(640px, 100%);display:flex;gap:10px;align-items:center;}
.nav__search input[type="search"],
.nav__search input[type="text"]{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:10px 14px;
  outline:none;
  background:#fff;
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}
.nav__search input:focus{
  border-color:#c7d2fe;
  box-shadow:0 0 0 4px rgba(99,102,241,.18);
}
.nav__search input::placeholder{color:#98a2b3;}

/* =========================================================
   Desktop menu + dropdown
   ========================================================= */
.nav__menu--desktop{display:flex;align-items:center;}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu > li{position:relative;}

.menu a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--hdr-text);
  font-weight:650;
  font-size:.95rem;
  transition:background .15s ease, transform .15s ease;
}
.menu a:hover{background:#f3f4f6;}
.menu a:active{transform:translateY(1px);}

.menu .sub-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  box-shadow:var(--hdr-shadow2);
  padding:8px;
  display:none;
  flex-direction:column;
  gap:4px;
  z-index:1000;
}
.menu .sub-menu a{
  width:100%;
  justify-content:space-between;
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
}
.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu{display:flex;}

.menu .sub-menu .sub-menu{
  left:calc(100% + 8px);
  top:-8px;
}

/* =========================================================
   Mobile toggle (burger)
   ========================================================= */
.nav__toggle{
  display:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}
.nav__toggle:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.18);}

.nav__burger{
  width:22px;height:16px;
  position:relative;
  display:block;
  border-radius:999px;
  box-shadow:0 7px 0 0 #111; /* middle line */
}
.nav__burger::before,
.nav__burger::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:2px;
  border-radius:999px;
  background:#111;
}
.nav__burger::before{top:3px;}
.nav__burger::after{top:11px;}

/* =========================================================
   Overlay + Offcanvas
   ========================================================= */
.nav__overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  background:rgba(0,0,0,.46);
  z-index:998;
  opacity:0;
  transition:opacity .20s ease;
}
@supports not (height: 100dvh){
  .nav__overlay{height:100vh;}
}

.nav__offcanvas{
  position:fixed;
  top:0;
  right:0;
  width:min(80vw, 420px);
  height:100dvh;
  max-height:100dvh;
  background:#fff;
  border-left:1px solid #eef2f7;
  box-shadow:var(--hdr-shadow);
  transform:translateX(110%);
  transition:transform .26s ease;
  z-index:999;
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
  will-change:transform;
}
@supports not (height: 100dvh){
  .nav__offcanvas{height:100vh;max-height:100vh;}
}

/* Open state */
body.nav-is-open .nav__overlay{opacity:1;}
body.nav-is-open .nav__offcanvas{transform:translateX(0);}

/* Offcanvas header */
.nav__offcanvasTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-bottom:1px solid #eef2f7;
}
.nav__offcanvasBrand{font-weight:850;letter-spacing:-.02em;}

.nav__close{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
}
.nav__close:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.18);}

/* Offcanvas body */
.nav__offcanvasBody{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.nav__search--mobile{justify-content:flex-start;margin-bottom:10px;}
.nav__search--mobile form{width:100%;}

/* =========================================================
   Mobile menu (accordion)
   ========================================================= */
.menu--mobile{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.menu--mobile > li{
  border:1px solid #eef2f7;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.menu--mobile a{
  width:100%;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:0;
  font-weight:750;
}

.menu--mobile .sub-menu{
  position:static;
  display:block;
  border:0;
  box-shadow:none;
  padding:0 10px 10px 10px;
  background:transparent;

  max-height:0;
  overflow:hidden;
  transition:max-height .22s ease;
}
.menu--mobile li.is-expanded > .sub-menu{max-height:900px;}

.menu--mobile .sub-menu a{
  border-radius:12px;
  background:#f8fafc;
  font-weight:650;
  padding:10px 12px;
}

/* Chevron button injected by JS */
.submenu-toggle{
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-left:6px;
  border-radius:999px;
  flex:0 0 auto;
}
.submenu-toggle:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.18);}

.submenu-toggle .chev{
  width:10px;height:10px;
  border-right:2px solid #111;
  border-bottom:2px solid #111;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.menu--mobile li.is-expanded > a .submenu-toggle .chev{transform:rotate(-135deg);}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .nav__search--desktop{display:none;}
  .nav__menu--desktop{display:none;}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;}
}

/* =========================================================
   Scroll lock (NO SHAKE) — requires JS sets --nav-lock-top
   ========================================================= */
/* =========================================================
   Scroll lock (STABLE) — no body fixed, no shake
   JS sets --nav-sbw (scrollbar width) on lock
   ========================================================= */
html.nav-lock,
body.nav-lock{
  overflow: hidden !important;
  height: 100% !important;
}

/* Compense la disparition de la scrollbar (desktop), 0 sur mobile */
body.nav-lock{
  padding-right: var(--nav-sbw, 0px);
  touch-action: none;
}

/* Empêche le “rubber band” derrière (support variable selon navigateur) */
html.nav-lock{
  overscroll-behavior: none;
}