/* =========================================================
   DESIGNER BY NATURE — 04. NAVIGATION
   Barre fixe très fine : marque à gauche, liens au centre, appel
   à l'action à droite. Transparente sur le hero, compactée et
   légèrement voilée dès que la page défile. Menu plein écran sous
   1024 px. Barre de progression posée sur son bord inférieur.
   ========================================================= */

/* Le header est fixe et le reste sur toute la page, sections
   épinglées comprises. Il porte en plus un voile permanent : sans lui,
   transparent sur la photographie du hero, ses liens s'effacent dès
   qu'ils passent sur une zone claire de l'image. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);

  /* Hauteur pilotée par une variable locale : l'état compact la réduit
     sans toucher au token global, que les ancres utilisent pour calculer
     leur décalage. Deux besoins distincts, deux variables. */
  --nav-h: var(--h-nav);
  height: var(--nav-h);

  display: flex;
  align-items: center;

  /* Contexte de couleur par défaut : la barre démarre sur le hero, donc
     en clair sur sombre. Elle s'inverse via .nav--clair au passage d'une
     section claire (classe posée par ScrollTrigger). */
  --nav-fg: var(--blanc-casse);
  --nav-rule: rgba(250, 248, 243, .22);
  --nav-fond: var(--brun);
  --nav-bordure: rgba(250, 248, 243, .12);

  color: var(--nav-fg);
  background-color: var(--nav-fond);
  border-bottom: var(--trait) solid var(--nav-bordure);
  isolation: isolate;

  transition:
    height var(--dur-moyen) var(--ease-sortie),
    background-color var(--dur-moyen) var(--ease-net),
    border-color var(--dur-moyen) var(--ease-net),
    color var(--dur-moyen) var(--ease-net);
}

/* La barre ne s'inverse plus au passage des sections claires : elle
   garde son brun d'un bout à l'autre de la page. La classe reste posée
   par le JavaScript — d'autres éléments pourraient s'en servir — mais
   elle ne change plus aucune couleur ici. */

/* ---------- ÉTAT COMPACT ---------- */
/* Dès que la page quitte le haut : la barre se resserre et prend un
   fond très légèrement voilé. Volontairement translucide plutôt
   qu'opaque — la photographie continue de vivre derrière. */

/* PAS DE FLOU D'ARRIÈRE-PLAN
   Un `backdrop-filter` sur une barre fixe oblige le navigateur à
   recomposer le flou contre le contenu qui défile derrière, à chaque
   image. Sur une page longue, c'est le coût le plus lourd de tout le
   site — et il se paie partout, pas seulement dans une section. Un
   fond dense donne le même service de lisibilité pour rien. */
/* Au défilement, la barre se resserre — c'est tout. Sa couleur ne
   bouge pas : un bandeau qui change de teinte en cours de route se
   fait remarquer pour lui-même, pas pour ce qu'il contient. */
.nav--compacte {
  --nav-h: calc(var(--h-nav) * .74);
  --nav-bordure: rgba(250, 248, 243, .18);
}

/* TROIS BLOCS, ET DE L'AIR ENTRE EUX
   La marque, les liens, le bouton. L'écart valait `--sp-6` — trente-deux
   pixels — ce qui suffisait tant que la marque tenait en douze
   caractères. « DESIGNER BY NATURE » en compte dix-huit : son point final
   doré arrivait à trente-deux pixels du premier lien, et les deux blocs
   se lisaient comme un seul.

   L'écart est porté à `--sp-8`. `space-between` distribue le reste, donc
   c'est un plancher, pas une valeur fixe : sur un grand écran les blocs
   s'écartent d'eux-mêmes, sur un écran serré ils ne descendent jamais en
   dessous de cette respiration. */
.nav__inner {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

/* ---------- MARQUE ---------- */

/* La marque non plus ne se comprime pas : c'est un logotype. */
.nav__marque {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: .25rem;
  line-height: 1;
}

/* « DESIGNER BY NATURE » TIENT SUR UNE LIGNE, TOUJOURS
   Le nom du studio compte dix-huit caractères, contre douze au nom qui
   l'a précédé : à l'ancien corps il se repliait sur deux lignes dès que
   la barre se resserrait, et un logotype qui passe à la ligne cesse
   d'être un logotype. Le corps descend d'environ deux points et
   `white-space: nowrap` interdit le repli — s'il manque de place, c'est
   la barre qui doit céder, pas la marque. */
.nav__nom {
  font-family: var(--display);
  font-size: clamp(1.125rem, .95rem + .62vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size var(--dur-moyen) var(--ease-sortie);
}

/* Le point final fait partie du logotype dans la maquette. */
.nav__nom::after {
  content: ".";
  color: var(--or);
}

.nav__baseline {
  font-size: .5625rem;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .72;

  /* Compactée, la baseline se replie au lieu de disparaître d'un coup :
     l'interlettrage large la rendrait sinon très visible en fondu. */
  max-height: 1rem;
  overflow: hidden;
  transition:
    max-height var(--dur-moyen) var(--ease-sortie),
    opacity var(--dur-court) var(--ease-net);
}

.nav--compacte .nav__nom { font-size: clamp(1.25rem, 1rem + .7vw, 1.5rem); }

.nav--compacte .nav__baseline {
  max-height: 0;
  opacity: 0;
}

/* ---------- LIENS ---------- */

/* Les liens sont le seul bloc élastique de la barre : ce sont eux qui
   cèdent quand la place manque, en resserrant leurs intervalles. */
.nav__liens {
  display: none;
  flex: 0 1 auto;
  align-items: center;
  gap: clamp(1.25rem, .4rem + 1.8vw, 2.5rem);
}

.nav__lien {
  position: relative;
  padding-block: .375rem;
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-court) var(--ease-net);
}

/* Filet fin qui se trace sous le lien. Il part par la droite et revient
   par la gauche : le trait ne se contente pas d'apparaître, il se dessine
   dans le sens de la lecture. */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--trait);
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s var(--ease-sortie);
}

.nav__lien:hover::after,
.nav__lien:focus-visible::after,
.nav__lien[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__lien[aria-current="true"] { color: var(--or); }

/* ---------- APPEL À L'ACTION ---------- */

/* LE BOUTON NE SE LAISSE PAS COMPRIMER
   Il est dans une barre en flex, donc rétractable par défaut, et il porte
   `overflow: hidden` pour son remplissage animé. Les deux ensemble
   coupaient le texte en silence : « Parlons de votre projet » réclame
   214 px, la barre lui en concédait 188, et la fin du mot disparaissait
   sans aucun signe. Il garde maintenant sa largeur naturelle — c'est aux
   liens, qui ont de la marge entre eux, d'absorber le manque de place. */
.nav__cta {
  position: relative;
  display: none;
  flex: 0 0 auto;
  align-items: center;
  padding: .875rem 1.5rem;
  border: var(--trait) solid var(--nav-rule);
  color: var(--nav-fg);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition:
    color var(--dur-court) var(--ease-net),
    border-color var(--dur-court) var(--ease-net),
    padding var(--dur-moyen) var(--ease-sortie);
}

/* Remplissage qui monte, même geste que les boutons du site. */
.nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--or);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .42s var(--ease-sortie);
}

.nav__cta > * { position: relative; z-index: 1; }

.nav__cta:hover::before,
.nav__cta:focus-visible::before { transform: scaleY(1); }

.nav__cta:hover,
.nav__cta:focus-visible {
  color: var(--noir);
  border-color: var(--or);
}

.nav--compacte .nav__cta { padding-block: .75rem; }

/* ---------- BOUTON MENU ---------- */
/* Deux traits fins. Il ouvre, rien de plus : la fermeture est portée par
   la croix du panneau. */

.nav__burger {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  color: var(--nav-fg);
  margin-right: calc(var(--sp-3) * -1);
}

.nav__burger-trait {
  display: block;
  width: 1.5rem;
  height: var(--trait);
  background-color: currentColor;
  transition:
    transform var(--dur-court) var(--ease-net),
    width var(--dur-court) var(--ease-net);
}

/* Le second trait est plus court au repos : un détail qui se remarque
   à peine mais qui distingue le bouton d'un burger générique. */
.nav__burger-trait:last-child { width: 1rem; }

.nav__burger:hover .nav__burger-trait:last-child { width: 1.5rem; }

/* Le bouton disparaît quand le panneau est ouvert : c'est la croix, dans
   le panneau, qui ferme. Il n'a donc plus à figurer deux états. */
.nav__burger[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* ---------- MENU PLEIN ÉCRAN ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ivoire);

  /* Fermé : retiré du flux ET de l'ordre de tabulation. Sans cela, un
     panneau simplement transparent reste atteignable au clavier. */
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dur-moyen) var(--ease-net),
    visibility 0s linear var(--dur-moyen);
}

.menu[data-ouvert="true"] {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--dur-moyen) var(--ease-net),
    visibility 0s;
}

/* Voile sombre. Séparé du panneau pour que GSAP puisse le faire monter
   indépendamment du contenu — le fond arrive avant les liens. */
.menu__fond {
  position: absolute;
  inset: 0;
  background-color: var(--noir);
  background-image:
    radial-gradient(48rem 32rem at 82% 8%, rgba(182, 154, 104, .16), transparent 62%),
    radial-gradient(40rem 30rem at 6% 96%, rgba(48, 40, 32, .8), transparent 60%);
}

.menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: calc(var(--h-nav) + var(--sp-6)) var(--marge) var(--sp-8);
  overflow-y: auto;
}

.menu__liens {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.6vw, 1rem);
}

.menu__lien {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  line-height: 1;
  transition: color var(--dur-court) var(--ease-net);
}

.menu__index {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--or);
  transition: opacity var(--dur-court) var(--ease-net);
}

/* Chaque intitulé vit dans son propre masque : le mot monte depuis le
   bas plutôt que d'apparaître en fondu. Le masque est déjà en place
   dans le balisage, l'animation n'a rien à créer à l'ouverture. */
.menu__masque {
  display: block;
  overflow: hidden;
  padding-block: .08em;
}

.menu__mot {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.2rem + 8vw, 4.5rem);
  font-weight: 400;
  letter-spacing: var(--ls-titre);
  text-transform: uppercase;
  line-height: 1.06;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.menu__lien:hover { color: var(--or); }
.menu__lien:hover .menu__mot { transform: translateX(.5rem); }

/* ---------- PIED DU MENU ---------- */

.menu__pied {
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: var(--trait) solid rgba(244, 240, 232, .14);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.menu__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 1rem 1.5rem;
  border: var(--trait) solid var(--or);
  color: var(--or);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  transition:
    background-color var(--dur-court) var(--ease-net),
    color var(--dur-court) var(--ease-net);
}

.menu__cta:hover,
.menu__cta:focus-visible {
  background-color: var(--or);
  color: var(--noir);
}

.menu__contact,
/* Le lieu, là où figurait un numéro de téléphone. La plaquette n'en
   donne aucun : plutôt qu'un vide, le menu dit d'où travaille le studio. */
.menu__lieu {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.menu__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.menu__contact { color: var(--beige); }
.menu__reseaux { color: var(--muted, #A79E90); }

/* ---------- PROGRESSION DU DÉFILEMENT ---------- */
/* Posée sur le bord inférieur de la barre : elle suit sa hauteur quand
   celle-ci se compacte, sans calcul de position à maintenir. */

.progression {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  pointer-events: none;
}

.progression__barre {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- RESPONSIVE ---------- */

/* LA BARRE DÉPLOYÉE DEMANDE 1 340 PX, PAS 1 024
   Elle porte trois blocs incompressibles : le logotype « DESIGNER BY
   NATURE » (236 px), huit liens (707 px), et le bouton (216 px). Avec
   deux respirations et les marges du site, cela fait environ 1 340 px.
   Le seuil était à 1 024 : les trois blocs y réclamaient 1 255 px pour
   936 disponibles, et le navigateur réglait le conflit en comprimant le
   bouton — dont le texte, sous `overflow: hidden`, se coupait en
   silence.

   Le seuil passe à 84rem. En dessous, c'est le menu plein écran qui
   prend le relais — le même sur tous les écrans, avec les huit liens.
   L'autre solution aurait été de retirer des liens de la barre, donc de
   la faire diverger du menu : c'est exactement ce qu'on cherche à
   éviter. */
@media (min-width: 84rem) {
  .nav__liens { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .menu { display: none; }
}

/* ÉCRANS COURTS : LE MENU SE RESSERRE PLUTÔT QUE DE DÉBORDER
   Le seuil valait 40rem — 640 px — tant que le menu comptait six liens.
   À huit, il déborde bien avant : sur un téléphone de 812 px de haut, le
   pied du menu passait huit pixels sous le bord de l'écran. Le seuil est
   donc porté à 52rem, la hauteur en dessous de laquelle huit lignes de
   titre ne tiennent plus avec leur pied. Au-delà, rien ne change. */
@media (max-height: 52rem) {
  .menu__inner { justify-content: flex-start; }
  .menu__mot { font-size: clamp(1.75rem, 1rem + 5vw, 2.75rem); }
  .menu__pied { margin-top: var(--sp-7); }
}

/* ---------- CROIX DE FERMETURE ---------- */
/* Posée dans le panneau, en haut à droite. Le bouton de la barre ouvre,
   la croix ferme : deux gestes distincts, deux boutons distincts. Un
   seul contrôle qui change de sens selon son état oblige à comprendre
   son état avant de le toucher. */

.menu__fermer {
  position: absolute;
  top: calc(var(--h-nav) / 2);
  right: var(--marge);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--trait) solid rgba(244, 240, 232, .22);
  border-radius: var(--rayon-rond);
  color: var(--ivoire);
  transition:
    border-color var(--dur-court) var(--ease-net),
    background-color var(--dur-court) var(--ease-net),
    color var(--dur-court) var(--ease-net);
}

.menu__fermer:hover,
.menu__fermer:focus-visible {
  border-color: var(--or);
  background-color: var(--or);
  color: var(--noir);
}

.menu__croix {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
}

.menu__croix span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--trait);
  background-color: currentColor;
}

.menu__croix span:first-child { transform: rotate(45deg); }
.menu__croix span:last-child  { transform: rotate(-45deg); }

/* Au bureau le menu n_existe pas, la croix non plus. */
@media (min-width: 84rem) { .menu__fermer { display: none; } }