/* Menu mobile (≤ 800 px) : bouton hamburger dans le header + panneau plein écran.
   Partagé par toutes les pages ; les couleurs viennent des variables de chaque page
   (palette CIRCÉ, ou palette grise sur la page TONALIK). */
.menu-toggle,.mobile-menu{display:none}
@media(max-width:800px){
  .nav .links,.nav .book-top{display:none}
  .menu-toggle{position:relative;display:block;flex:none;width:44px;height:44px;margin-right:-2px;padding:0;border:1px solid #f7ede45c;border-radius:50%;background:transparent;color:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s,background-color .25s}
  .menu-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
  .menu-toggle[aria-expanded="true"]{border-color:var(--orange)}
  .menu-toggle__bar{position:absolute;top:calc(50% - .75px);left:calc(50% - 8px);width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
  .menu-toggle__bar:nth-child(1){transform:translateY(-5px)}
  .menu-toggle__bar:nth-child(3){transform:translateY(5px)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3){transform:rotate(-45deg)}

  .mobile-menu{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;padding:112px 20px calc(32px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--black);background:radial-gradient(ellipse 95% 45% at 50% 108%,color-mix(in srgb,var(--red) 24%,transparent),transparent 70%),var(--black);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  .mobile-menu.is-open{opacity:1;visibility:visible;transition:opacity .35s ease}
  .mobile-menu__nav{display:flex;flex-direction:column;border-top:1px solid #ffffff1a}
  .mobile-menu__nav a,.mobile-menu__cta{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1),color .2s}
  .mobile-menu__nav a{display:flex;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid #ffffff1a;color:var(--white);font-family:var(--sans);font-size:clamp(30px,9vw,40px);font-weight:800;line-height:1;letter-spacing:-.06em;text-transform:uppercase}
  .mobile-menu__nav a:active{color:var(--orange)}
  .mobile-menu__index{flex:none;min-width:20px;color:var(--orange);font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em}
  .mobile-menu__cta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;margin-top:32px;padding:0 22px;border-radius:30px;background:linear-gradient(110deg,var(--orange),var(--red));color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .mobile-menu__cta svg{display:block;width:15px;height:15px;flex:none}
  .tonalik-page .mobile-menu__cta{background:var(--white);color:var(--black)}
  .mobile-menu a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
  .mobile-menu.is-open .mobile-menu__nav a,.mobile-menu.is-open .mobile-menu__cta{opacity:1;transform:none}
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(1){transition-delay:.05s}
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(2){transition-delay:.1s}
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(3){transition-delay:.15s}
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(4){transition-delay:.2s}
  .mobile-menu.is-open .mobile-menu__cta{transition-delay:.26s}
  /* Blocage du scroll : uniquement sur body, dont l'overflow est reporté sur le viewport.
     Mettre aussi html en overflow:hidden ferait de body un conteneur de défilement :
     le header sticky (logo + X) se recalerait alors en haut du document, hors écran. */
  html.menu-open body{overflow:hidden}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
  .menu-toggle__bar,.mobile-menu__nav a,.mobile-menu__cta{transition:none}
  .mobile-menu__nav a,.mobile-menu__cta{transform:none}
}