/* ============================================================
   Survival Zone — menu mobile commun (avec /js/mobile-nav.js)

   Sous 860 px, les liens de la barre (.nav-links) laissent la place
   à un bouton hamburger qui ouvre un menu plein écran. Sans JavaScript,
   les liens restent affichés sur une ligne défilante : la navigation
   n'est jamais perdue et la page ne déborde pas.
   ============================================================ */

.nav-hamburger, .nav-mobile-menu { display: none; }

@media (max-width: 860px) {
  /* Repli sans JavaScript : la ligne de liens défile au lieu d'élargir la page */
  .nav-links {
    min-width: 0; flex: 0 1 auto;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* JavaScript actif : hamburger à la place des liens.
   (scripting: enabled) évite tout clignotement au chargement ; html.mnav,
   posé par le script, couvre les navigateurs qui ne connaissent pas cette requête. */
@media (max-width: 860px) and (scripting: enabled) {
  .nav-links, nav > .nav-cta, nav > .nav-back { display: none !important; }
}
@media (max-width: 860px) {
  html.mnav .nav-links, html.mnav nav > .nav-cta, html.mnav nav > .nav-back { display: none !important; }

  .nav-hamburger {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; min-width: 44px; min-height: 44px; margin-right: -10px; padding: 0;
    cursor: pointer; background: none; border: none; flex-shrink: 0;
  }
  .nav-hamburger span {
    width: 24px; height: 2px; background: var(--cream, #f0ede8);
    display: block; transition: transform 0.3s, opacity 0.3s;
    border-radius: 2px;
  }
  .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; width: 16px; }
  .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  .nav-mobile-menu {
    position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(12, 12, 12, 0.97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    flex-direction: column; align-items: center; justify-content: safe center;
    gap: 28px; padding: 32px 24px; overflow-y: auto; overscroll-behavior: contain;
    animation: mnavFadeIn 0.2s ease;
  }
  .nav-mobile-menu.open { display: flex; }
  .nav-mobile-menu .nav-link {
    font-family: 'Bebas Neue','Bebas fb', sans-serif; font-size: 32px; line-height: 1.1;
    letter-spacing: 0.1em; color: var(--cream, #f0ede8);
    text-decoration: none; transition: color 0.2s;
  }
  .nav-mobile-menu .nav-link:hover,
  .nav-mobile-menu .nav-link[aria-current="page"] { color: var(--orange, #D4621A); }
  .nav-mobile-menu .nav-cta {
    margin-top: 8px; padding: 14px 40px;
    font-family: 'Oswald','Oswald fb', sans-serif; font-size: 14px;
    letter-spacing: 0.2em; text-transform: uppercase;
    background: var(--orange, #D4621A); color: #fff;
    text-decoration: none; border-radius: 2px;
  }

  /* Barres <header class="top"> (blog, avis, boutique) : marges réduites */
  header.top { padding: 14px 16px; }

  /* Le fond ne défile pas pendant que le menu est ouvert */
  html.mnav-open, html.mnav-open body { overflow: hidden; }
}

@keyframes mnavFadeIn { from { opacity: 0; } to { opacity: 1; } }