/* ZoneBlox — Correctif de navigation (chargé en dernier, surcharge le CSS inline).
   v2. Objectif : la barre de nav ne se chevauche/rogne JAMAIS, à toute largeur.
   Principe : la recherche disparaît tôt pour laisser la place aux 7 entrées ;
   en dessous, on bascule sur le menu burger. flex-wrap sert de filet de sécurité. */

header .nav{
  flex-wrap:wrap;
  height:auto;
  min-height:66px;
  row-gap:6px;
  padding:6px 0;
  gap:10px;
}
header .nav-links{
  flex-wrap:wrap;
  row-gap:4px;
  margin-left:4px;
  gap:2px;
  min-width:0;
}
header .nav-links a{white-space:nowrap;padding:8px 10px;font-size:.9rem;}

/* La recherche n'est pas essentielle : on la masque tôt pour éviter tout
   chevauchement des onglets sur les écrans intermédiaires. */
@media (max-width:1080px){
  header .nav-search{display:none;}
}

/* En dessous, la place manque pour 7 onglets : menu burger. */
@media (max-width:880px){
  header .nav-links{display:none;}
  header .burger{display:block;}
  header .nav{flex-wrap:nowrap;}
}

/* Menu mobile déroulant : lisible et cliquable */
@media (max-width:880px){
  header .mobile-menu{display:none;flex-direction:column;gap:4px;padding:10px 0 16px;border-top:1px solid var(--border,rgba(255,255,255,.10))}
  header .mobile-menu.open{display:flex}
}
header .mobile-menu a{padding:12px 10px;border-radius:10px;}
header .mobile-menu a:hover{background:var(--surface-2,#191c33);color:var(--text,#eef0ff);}

/* ---- menus déroulants par vertical (v3) ---- */
header .nav-item{position:relative;display:flex;align-items:center}
header .nav-caret{font-size:.55rem;margin-left:5px;opacity:.7}
header .nav-menu{position:absolute;top:100%;left:0;min-width:210px;background:var(--surface-2,#191c33);border:1px solid var(--border,rgba(255,255,255,.10));border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.15s;z-index:130;box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}
header .nav-item:hover .nav-menu,header .nav-item:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(2px)}
header .nav-links .nav-menu a{padding:9px 12px;border-radius:8px;color:var(--muted,#9aa0c6);font-size:.88rem;white-space:nowrap;font-weight:500;background:none}
header .nav-links .nav-menu a:hover{background:var(--surface,#121427);color:var(--text,#eef0ff)}
header .mob-group{display:block;color:#6f76a0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:12px 10px 4px}

/* sous-menus en accordéon quand le menu mobile (gabarit à <ul>) est ouvert */
@media (max-width:880px){
  header .nav-links.mobile-open .nav-item{display:block}
  header .nav-links.mobile-open .nav-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:2px 0 6px 16px;min-width:0}
}

/* ---- gabarit à <ul class="nav-inner"> : items collés au logo (fin de l'espace vide) ---- */
header .nav-inner{justify-content:flex-start}
header .nav-inner > .nav-links{margin-left:6px}
header .nav-inner > .nav-right{margin-left:auto}
/* menu mobile de ce gabarit, aligné sur le burger à ≤880px (comble la zone 768–880) */
@media (max-width:880px){
  header .nav-inner .nav-toggle{display:block}
  header .nav-inner .nav-links.mobile-open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:68px;left:0;right:0;background:var(--bg-primary,#0a0b16);padding:12px 20px 20px;border-bottom:1px solid var(--border,rgba(255,255,255,.1));z-index:200}
  header .nav-inner .nav-links.mobile-open a{padding:10px 0;font-size:1rem;width:100%}
}