/* drawer */
[data-mobile-drawer].is-open { display:block; }

/* ===== Drawer premium ===== */
[data-mobile-drawer]{
  display:block;               /* on garde dans le flow, on anime l'opacité */
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

[data-mobile-drawer] .bg-black\/50{
  opacity:0;
  transition:opacity .22s ease;
}

[data-mobile-drawer] .n8-drawer-panel{
  transform:translateX(18px);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

[data-mobile-drawer].is-open{
  opacity:1;
  pointer-events:auto;
}

[data-mobile-drawer].is-open .bg-black\/50{
  opacity:1;
}

[data-mobile-drawer].is-open .n8-drawer-panel{
  transform:translateX(0);
}

/* Option: blur subtil derrière (si tu veux) */
@supports (backdrop-filter: blur(10px)){
  [data-mobile-drawer] .bg-black\/50{
    backdrop-filter: blur(6px);
  }
}



/* ouvert */
.n8-mobile-menu li.is-open > .sub-menu{
  opacity:1;
  transform:translateY(0);
}

/* petit “pop” sur les items quand ça s’ouvre */
.n8-mobile-menu li.is-open > .sub-menu > li{
  animation:n8Pop .22s ease both;
}

@keyframes n8Pop{
  from{ transform:translateY(-4px); opacity:.6; }
  to{ transform:translateY(0); opacity:1; }
}

/* fond du lien parent (niveau 1) */
.n8-mobile-menu > li > a{
  background:#0f5270;
  color: #fff;
}
.n8-mobile-menu > li > .n8-toggle svg{
  color: #fff;
}
.n8-mobile-menu > li.is-open > .n8-toggle svg{
  color:#fff;
}

/* Parent (niveau 1) ouvert : pas de radius en bas */
.n8-mobile-menu > li.is-open{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.n8-mobile-menu > li.is-open > a{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#open-menu-mobile { background: #0f5270; color: #ffffff; }
#close-menu-mobile { background: #e8584f; color: #ffffff; }
/* menu mobile */
.n8-mobile-menu a{
  display:flex;
  padding:10px 12px;
  border-radius:12px;
  color:#0f172a;
  font-weight:700;
}
.n8-mobile-menu a:hover{  }

/* sous-menus fermés par défaut */
.n8-mobile-menu .sub-menu{
  margin:6px 0 0 10px;
  padding-left:10px;
  border-left:2px solid #0f5270;
  max-height: 100% !important;
}

/* état ouvert */
.n8-mobile-menu .is-open > .sub-menu{ display:block; }

/* petit style des enfants */
.n8-mobile-menu .sub-menu a{
  font-weight:600;
  color:#334155;
  padding:8px;
}
/* 1) on coupe le mega desktop sur mobile */
@media (max-width: 767px){
  #site-nav .mega-panel{ display:none !important; }
}

/* Drawer visible */
[data-mobile-drawer].is-open{ display:block; }

/* Base menu */
.n8-mobile-menu,
.n8-mobile-menu .sub-menu{
  list-style:none;
  margin:0;
  padding:0;
}

.n8-mobile-menu > li{
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.n8-mobile-menu a{
  display:block;
  padding:12px 44px 12px 12px; /* place pour le bouton chevron à droite */
  font-weight:800;
  color:#0f5270;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.02em;
}

.n8-mobile-menu li li > a{
  text-transform:none;
  font-weight:700;
  font-size:14px;
  letter-spacing:0;
  color:#334155;
}

/* Sous-menus */
.n8-mobile-menu .sub-menu{
  display:none;
  background:#f8fafc;
  padding: 10px;
}

.n8-mobile-menu li.is-open > .sub-menu{ display:block; }

/* Indentation / niveaux */
.n8-mobile-menu .sub-menu a{ padding-left:0; }
.n8-mobile-menu .sub-menu .sub-menu a{ padding-left:28px; }

/* Labels (tes items "menu-label" utilisés comme titres) */
.n8-mobile-menu .sub-menu .sub-menu .menu-label > a{
  background:transparent; font-weight: 700; color: #e8584f;
}
.n8-mobile-menu .menu-label{
  margin-left: 0;
}
/* Bouton chevron injecté en JS */
.n8-mobile-menu .n8-toggle{
  position:absolute;
  right:10px;
  top:5px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.n8-mobile-menu .n8-toggle svg{
  width:18px;
  height:18px;
  transition:transform .18s ease;
  color:#0f172a;
}

.n8-mobile-menu li.is-open > .n8-toggle svg{
  transform:rotate(180deg);
}

/* Pour bien placer le bouton dans le li */
.n8-mobile-menu li.menu-item-has-children{
  position:relative;
}


/* 2e niveau : .sub-menu > li > .sub-menu */
.n8-mobile-menu .sub-menu .sub-menu{
  background:#ffffff;          /* fond différent */
  border-left: solid 2px #e8584f ;
  margin:15px 0 15px 0;
  padding:6px 0;
}

/* liens du 2e niveau (optionnel) */
.n8-mobile-menu .sub-menu .sub-menu a{
  font-size:13px;
}

/* ===== Stagger top-level à l'ouverture (7 parents) ===== */
[data-mobile-drawer] .n8-mobile-menu > li{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .38s ease,
    transform .55s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

[data-mobile-drawer].is-open .n8-mobile-menu > li{
  opacity:1;
  transform:translateY(0);
  transition-delay: var(--d, 0ms);
}

/* Pas de stagger sur les sous-menus */
[data-mobile-drawer] .n8-mobile-menu .sub-menu > li{
  opacity:1;
  transform:none;
  transition:none;
}