/* ═══════════════════════════════════════════════════════════════════
   NAV — barre fixe, liens répartis sur toute la largeur
   Dépend de : tokens.css, base.css

   Desktop : les 7 liens, d'Accueil à Contact, du bord gauche au bord
             droit, avec le même espace entre chacun.
   Mobile  : bouton menu à droite → liste plein écran.

   SOMMAIRE
   01. Barre
   02. Liens
   03. Bouton menu (mobile)
   04. Menu mobile
   05. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. BARRE ──────────────────────────────────────────────────────*/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  background: var(--c-bg);
  border-bottom: var(--bw-hair) solid var(--c-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ── 02. LIENS ──────────────────────────────────────────────────────
   space-between : le premier colle à gauche, le dernier à droite,
   et l'espace se répartit également entre tous.                   */
.nav-menu {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  position: relative;
  padding-block: var(--sp-2xs);
  font-size: var(--ts-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-wider);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) linear;
}

.nav-link:hover {
  color: var(--c-text);
}

/* Page courante — marquée par aria-current="page" dans le HTML */
.nav-link[aria-current='page'] {
  color: var(--c-text);
}

.nav-link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--bw-hair);
  background: currentColor;
}


/* ── 03. BOUTON MENU (mobile uniquement) ────────────────────────────*/
.nav-btn {
  display: none;          /* affiché sous 1024px, voir §05          */
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: var(--sp-3xs);
}

.nav-btn span {
  display: block;
  width: 24px;
  height: var(--bw-hair);
  background: var(--c-text);
}

/* Croix quand le menu est ouvert */
[data-nav='open'] .nav-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-nav='open'] .nav-btn span:nth-child(2) { opacity: 0; }
[data-nav='open'] .nav-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ── 04. MENU MOBILE ────────────────────────────────────────────────*/
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) var(--sp-xl);
  background: var(--c-bg);
}

[data-nav='open'] .menu-overlay { display: flex; }

.menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.menu-link {
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: var(--c-text);
}

.menu-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

.menu-socials a {
  font-size: var(--ts-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}


/* ── 05. RESPONSIVE ─────────────────────────────────────────────────
   Sous 1024px la liste ne tient plus en ligne : on bascule sur le
   bouton menu.                                                    */

@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .nav-btn  { display: flex; }
}

/* Le menu ouvert bloque le scroll de la page */
[data-nav='open'] body { overflow: hidden; }