/* ═══════════════════════════════════════════════════════════════════════════
   NAV MOBILE — Elio 🎨, 15/08/2026.
   Bug audit : sous 720px, les liens secondaires du header (Sources / Blog /
   sélecteur de langue) passaient en display:none SANS AUCUN REPLI — impossible
   de les atteindre sur mobile. Composant partagé pour tous les headers qui en
   ont besoin (accueil.css ET objectifs.css) : `.menu-mobile` entoure les liens
   concernés, `.menu-btn` est le bouton hamburger qui les révèle en panneau.
   Jetons Étal uniquement (var(--…)), aucune couleur en dur. ══════════════════ */

/* Bureau : transparent, ne change RIEN à la mise en page existante — les
   liens restent des enfants directs du flex .nav-liens. */
.menu-mobile{display:contents}

.menu-btn{
  display:none;min-width:44px;min-height:44px;flex:none;
  border-radius:var(--r-md);border:1.5px solid var(--border-fort);
  background:var(--surface);color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;position:relative;
}
.menu-btn:hover{background:var(--surface-2)}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menu-btn .barres{
  position:absolute;width:18px;height:2px;border-radius:1px;background:currentColor;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.menu-btn .barres::before,.menu-btn .barres::after{
  content:'';position:absolute;left:0;width:18px;height:2px;border-radius:1px;
  background:currentColor;transition:transform .18s var(--ease);
}
.menu-btn .barres::before{top:-6px}
.menu-btn .barres::after{top:6px}
.menu-btn[aria-expanded="true"] .barres{background:transparent}
.menu-btn[aria-expanded="true"] .barres::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .barres::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:720px){
  .nav-liens{position:relative}
  .menu-btn{display:inline-flex}
  .menu-mobile{
    display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
    flex-direction:column;gap:2px;background:var(--surface);
    border:1.5px solid var(--border-fort);border-radius:var(--r-md);
    box-shadow:var(--shadow);padding:8px;z-index:5;
  }
  .menu-mobile[data-open]{display:flex}
  .menu-mobile a{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .menu-btn .barres,.menu-btn .barres::before,.menu-btn .barres::after{transition:none}
}