/* Menu burger mobile partage ELP Territoires.
   Standard, sans framework. Au dessus de 768px : nav normale, ce fichier ne change rien.
   Sous 768px : la nav se replie derriere une icone burger qui ouvre/ferme un panneau. */

/* Bouton burger : masque par defaut (desktop), affiche seulement en mobile via media query */
.burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--brand);
  font-size:1.35rem;
  line-height:1;
  padding:0;
}
.burger:hover{background:var(--brand-soft)}
.burger:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

@media(max-width:768px){
  /* Affiche l'icone burger */
  .burger{display:inline-flex}

  /* Le conteneur de liens devient un panneau repliable.
     data-burger-panel est pose sur le groupe de liens de chaque page. */
  [data-burger-panel]{
    display:none;
    position:absolute;
    left:0;right:0;
    top:100%;
    flex-direction:column;
    gap:.25rem;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:.6rem 1rem 1rem;
    z-index:60;
  }
  /* Panneau ouvert (classe basculee par le JS) */
  [data-burger-panel].burger-open{display:flex}

  [data-burger-panel] a{
    padding:.7rem .2rem;
    font-size:1rem;
    font-weight:600;
    color:var(--ink-2);
    border-bottom:1px solid var(--bg-alt);
  }
  [data-burger-panel] a:last-child{border-bottom:none}
  [data-burger-panel] a:hover{color:var(--brand-2)}
}