@charset "UTF-8";
/* ==========================================================================
   nav-menu.css — le menu hamburger et son tiroir latéral.

   L'affordance hamburger est conservée (l'icône trois traits), mais elle
   n'ouvre plus le rideau plein écran du gabarit d'origine : un TIROIR glisse
   depuis la gauche. Icône et tiroir sont pilotés par initNav dans main.js
   (classe `is-open`).
   ========================================================================== */

/* --- Le bouton ------------------------------------------------------------- */

.c-burger {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 320;                 /* au-dessus du tiroir (300), sous la modale (500) */
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;                   /* révélé par main.js une fois la page prête */
  transition: opacity .8s ease;
}

.c-burger.is-loaded { opacity: 1; }

.c-burger__box {
  position: relative;
  display: block;
  width: 26px;
  height: 14px;
  margin: 0 auto;
}

/* La couleur des traits bascule selon le fond, et non par `mix-blend-mode` :
   le bouton porte un z-index, donc il forme un groupe isolé et la différence
   n'a rien de la page avec quoi se mélanger (elle reste blanche partout). Un
   simple basculement de classe, piloté au défilement (initNav), est prévisible.

   Par défaut : blanc, pour le hero sombre. */
.c-burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--vif), opacity var(--vif), background var(--vif);
}

/* Passé le hero, le bouton flotte sur le papier clair : traits en brun. */
.c-burger.is-on-light .c-burger__line {
  background: var(--ecorce);
}

/* Menu ouvert : la croix est toujours claire, par-dessus le tiroir sombre —
   quelle que soit la section derrière. Cette règle vient après, elle gagne. */
.c-burger.is-open .c-burger__line {
  background: #fff;
}

.c-burger__line:nth-child(1) { top: 0; }
.c-burger__line:nth-child(2) { top: 6px; }
.c-burger__line:nth-child(3) { top: 12px; }

/* Ouvert : les deux traits extrêmes se croisent, celui du milieu s'efface. */
.c-burger.is-open .c-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.c-burger.is-open .c-burger__line:nth-child(2) { opacity: 0; }
.c-burger.is-open .c-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Le voile -------------------------------------------------------------- */

.c-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--vif);
}

.c-menu__scrim[hidden] { display: none; }
.c-menu__scrim.is-open { opacity: 1; }

/* --- Le tiroir ------------------------------------------------------------- */

.c-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e5);
  width: min(360px, 82vw);
  height: 100%;
  padding: var(--e6) var(--e5);
  box-sizing: border-box;
  background: linear-gradient(150deg, var(--terre) 0%, var(--braise) 100%);
  box-shadow: var(--ombre-flottant);
  /* Fermé : hors champ à gauche. La courbe ample donne le glissé « qui se
     pose », la même que le reste du site. */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--ample), visibility 0s linear var(--menu-ferme, .5s);
}

.c-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--ample), visibility 0s;
}

/* --- Les liens ------------------------------------------------------------- */

.c-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-menu__item + .c-menu__item { margin-top: var(--e3); }

.c-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: var(--espacement-titre);
  color: var(--sable);
  text-decoration: none;
  transition: color var(--vif), transform var(--vif);
}

.c-menu__link:hover,
.c-menu__link:focus-visible {
  color: var(--blanc);
  transform: translateX(6px);
}

/* Le numéro de section, en laiton — usage décoratif, sur fond sombre : c'est
   exactement le cas où le laiton est autorisé (7:1 sur le brun). */
.c-menu__num {
  font-family: var(--sans);
  font-size: var(--t-petit);
  letter-spacing: var(--espacement-sur);
  color: var(--laiton);
}

/* --- Le pied du tiroir : contact et réseaux -------------------------------- */

.c-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid rgba(232, 205, 182, .22);   /* sable très dilué */
}

.c-menu__foot-link {
  font-family: var(--sans);
  font-size: var(--t-petit);
  letter-spacing: var(--espacement-sur);
  text-transform: uppercase;
  color: var(--sable);
  text-decoration: none;
  opacity: .8;
  transition: opacity var(--vif);
}

.c-menu__foot-link:hover,
.c-menu__foot-link:focus-visible { opacity: 1; }

/* Les liens et le numéro apparaissent en cascade quand le tiroir s'ouvre :
   chacun monte légèrement, décalé dans le temps. Un menu qui se remplit plutôt
   qu'un bloc qui surgit. */
.c-menu__item,
.c-menu__foot {
  opacity: 0;
  transform: translateY(12px);
}

.c-menu.is-open .c-menu__item,
.c-menu.is-open .c-menu__foot {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.c-menu.is-open .c-menu__item:nth-child(1) { transition-delay: .12s; }
.c-menu.is-open .c-menu__item:nth-child(2) { transition-delay: .18s; }
.c-menu.is-open .c-menu__item:nth-child(3) { transition-delay: .24s; }
.c-menu.is-open .c-menu__item:nth-child(4) { transition-delay: .30s; }
.c-menu.is-open .c-menu__item:nth-child(5) { transition-delay: .36s; }
.c-menu.is-open .c-menu__foot { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .c-burger__line,
  .c-menu,
  .c-menu__scrim,
  .c-menu__link,
  .c-menu__item,
  .c-menu__foot {
    transition-duration: .01ms;
    transition-delay: 0s;
  }
}