/* Menu mobile : sous 860 px, les liens de la barre sont masqués et le bouton « Menu » les ouvre en plein écran */
.nav__burger, .menu { display: none; }

@media (max-width: 860px) {
  .nav__links { margin-left: auto; }

  .nav__burger {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    min-height: 32px; margin-left: 14px; padding: 0 0 0 4px;
    background: none; border: 0; cursor: pointer; color: inherit;
    font: 600 11px/1 "Archivo", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__burger::before { content: ""; position: absolute; inset: -10px -10px -10px -8px; } /* zone de toucher agrandie */
  .nav__burger i { position: relative; width: 22px; height: 8px; }
  .nav__burger i::before, .nav__burger i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: top .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .nav__burger i::before { top: 0; }
  .nav__burger i::after { top: 6.5px; }
  .menu-open .nav__burger i::before { top: 3.25px; transform: rotate(45deg); }
  .menu-open .nav__burger i::after { top: 3.25px; transform: rotate(-45deg); }

  /* Menu ouvert : la barre repasse en clair, même au-dessus des sections blanches de l'accueil */
  html.menu-open .nav { color: #fff; }
  html.menu-open .nav .nav__cta { background: #f4f4f1; color: #0a0a0a; }

  .menu {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 49;
    padding: 96px var(--gutter, 16px) calc(28px + env(safe-area-inset-bottom));
    background: #0a0a0a; color: #f4f4f1;
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
  }
  .menu-open .menu { visibility: visible; opacity: 1; transition: opacity .3s; }

  .menu__links { display: flex; flex-direction: column; border-top: 1px solid rgba(244, 244, 241, .14); }
  .menu__links a {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 0 16px; border-bottom: 1px solid rgba(244, 244, 241, .14);
    font-weight: 800; font-stretch: 125%; text-transform: uppercase;
    font-size: clamp(30px, 9.5vw, 52px); line-height: 1; letter-spacing: -.01em;
    /* Entrée ligne par ligne, comme les textes des scènes */
    clip-path: inset(100% 0 0 0); transform: translateY(.45em);
    transition: clip-path .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .menu-open .menu__links a { clip-path: inset(0 0 0 0); transform: none; transition-delay: calc(60ms + var(--i, 0) * 45ms); }
  .menu__links a::after { content: "→"; margin-left: auto; align-self: center; font-size: .5em; font-weight: 300; opacity: .45; }
  .menu__links b {
    min-width: 24px; padding-top: 3px;
    color: #e3241b; font-size: 12px; font-weight: 600; font-stretch: 100%; letter-spacing: .1em;
  }
  .menu__links a[aria-current] span { box-shadow: inset 0 -.1em 0 #e3241b; }

  .menu__foot { display: grid; gap: 22px; margin-top: 36px; font-size: 13px; line-height: 1.5; color: rgba(244, 244, 241, .58); }
  .menu__tel {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 20px; background: #f4f4f1; color: #0a0a0a;
    font-size: 13px; font-weight: 600;
  }
  .menu__tel span { font-weight: 800; font-stretch: 125%; font-size: 15px; }
  .menu__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .menu__row a { color: #f4f4f1; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .menu__links a, .menu-open .menu__links a { clip-path: none; transform: none; transition: none; }
}