/* ============================================================
   Le menu passe en burger a TOUTES les largeurs
   09/11/2026
   ------------------------------------------------------------
   Chargee en dernier sur les six pages, apres mobile.css.

   Demande de Thomas, appel du 09/11, en reference au site d'Ismael :
   « au lieu d'avoir tous les onglets ecrits en haut, t'as comme sur le
   telephone le menu hamburger. Et quand t'appuies dessus, ca fait la meme
   chose que sur mobile. »

   CE QUI BLOQUAIT. Le burger et son calque plein ecran existaient deja,
   mais enfermes dans @media (max-width: 1200px), sur DEUX fichiers :
     pages.css     lignes 668-688   le calque, sa position, son fond
     studio-sections.css 222-237    la typographie et l'animation d'entree
   Au-dessus de 1200px, aucune de ces regles ne s'appliquait : les onglets
   reprenaient leur place et le burger disparaissait.

   On ne touche pas a ces deux fichiers, edites ailleurs. On redeclare ici
   sans condition de largeur. En dessous de 1200px les regles font doublon
   avec l'original, sans effet de bord : elles sont identiques.

   Pour tout annuler : retirer le <link> des six pages et supprimer ce
   fichier. Le menu reprend son comportement a 1200px.
   ============================================================ */

/* --- La bascule --------------------------------------------------------
   Les onglets ne s'affichent plus jamais deplies dans la barre, le burger
   devient la seule porte d'entree du menu. */
.nav-links{
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  flex-direction: column;
  gap: 0;
  background: var(--night);
  border-bottom: 1px solid rgba(194, 168, 120, 0.35);
  padding: 4.2rem 0 1.25rem;
  z-index: 99;
}

.nav-burger{
  display: inline-flex;
}

/* --- Le calque ouvert --------------------------------------------------
   Repris de studio-sections.css, libere de sa media query. */
.nav-links.is-open{
  display: flex;
  inset: 0;
  min-block-size: 100svh;
  justify-content: center;
  padding: 7rem var(--gutter) 3rem;
  background: rgba(8, 9, 10, 0.94);
  backdrop-filter: blur(24px);
}

/* Le corps monte avec la largeur mais reste plafonne : sur un ecran de
   1600px, un clamp en 6vw donnerait des capitales de 96px, soit plus que
   le titre du hero. Le menu doit rester un menu. */
.nav-links.is-open a{
  padding: 0.85rem var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(2rem);
  animation: navRise 0.8s both var(--studio-ease);
}

.nav-links.is-open a:nth-child(2){ animation-delay: 0.06s; }
.nav-links.is-open a:nth-child(3){ animation-delay: 0.12s; }
.nav-links.is-open a:nth-child(4){ animation-delay: 0.18s; }
.nav-links.is-open a:nth-child(5){ animation-delay: 0.24s; }

/* Au-dela d'une certaine largeur, un menu pleine largeur eparpille les
   cinq entrees sur un ecran vide. On les ramene sur la gouttiere du site,
   alignees a gauche comme le hero. */
@media (min-width: 1201px){
  .nav-links.is-open{
    align-items: flex-start;
    padding-inline: max(var(--gutter), calc((100vw - var(--maxw, 1440px)) / 2 + var(--gutter)));
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-links.is-open a{ animation: none; opacity: 1; transform: none; }
}