/* ===== Mobile nav FIX: liens toujours cliquables ===== */

#menuBackdrop { display:none; }

@media (max-width: 768px){

  /* IMPORTANT: le header crée un "stacking context" (z-index).
     Si le backdrop a un z-index plus haut que le header, il bloque les clics.
     On force donc le header au-dessus du backdrop sur mobile. */
  header{
    z-index: 100000 !important;
  }

  /* Bouton hamburger */
  #menuToggle, .menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:0;
    color:inherit;
    cursor:pointer;
    padding:10px 12px;
    border-radius:12px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Menu fermé par défaut */
  #navLinks, .nav-links{
    display:none !important;
  }

  /* Menu ouvert */
  #navLinks.open, .nav-links.open{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;

    position:fixed !important;
    top:72px !important;
    left:12px !important;
    right:12px !important;

    padding:12px !important;
    border-radius:16px !important;

    /* IMPORTANT: au-dessus de tout */
    z-index: 99999 !important;

    background: rgba(10,0,21,.92) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,240,255,.20) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;

    /* IMPORTANT: cliquable */
    pointer-events: auto !important;
  }

  /* Liens cliquables */
  #navLinks.open a, .nav-links.open a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:12px 14px !important;
    border-radius:14px !important;
    text-decoration:none !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(0,240,255,.16) !important;

    font-size:16px !important;
    line-height:1.1 !important;

    /* IMPORTANT */
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Backdrop derrière le menu */
  #menuBackdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index: 99998 !important; /* juste sous le menu */
    background: rgba(0,0,0,.35);
    pointer-events: auto;
  }
  #menuBackdrop.show{ display:block; }

  body.nav-open{ overflow:hidden; }
}