/* =========================================
   NAVIGATION — partagée toutes pages
   ========================================= */

.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--gutter);
  z-index: 100;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
  will-change: transform;
  transition: color .5s ease, text-shadow .5s ease,
              transform .5s var(--ease-out);
}

/* Quand le fond derrière la nav est clair, on bascule en sombre */
.nav.is-dark {
  color: var(--ink);
  text-shadow: none;
}

.nav.is-dark .nav__logo svg { fill: var(--ink); }

/* ── Escamotage du header au scroll (landing uniquement) ──
   Scroll vers le bas : le header se retire par le haut. Scroll vers le haut :
   il revient. La classe est posée par initNavReveal(). */
body.nav-hidden .nav {
  transform: translateY(-100%);
}

.nav__logo {
  display: block;
  width: 38px;
  height: auto;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__logo:hover { transform: scale(1.15); }

/* Monochrome piloté par CSS : combiné au mix-blend-mode:difference de .nav,
   le logo prend l'inverse exact de la couleur du fond. */
.nav__logo svg {
  /* block : sans ca, le SVG est pose sur la ligne de texte et laisse ~6 px
     vides dessous ; la ligne du header se centrait alors 3 px trop bas par
     rapport au dessin du logo (et au bouton back, cale sur le dessin). */
  display: block;
  width: 100%;
  height: auto;
  fill: var(--white);
  transition: fill .5s ease;
  overflow: visible;
}

.nav__logo .logo__flower {
  transform-origin: 36% 62%;
}
.nav__logo:hover .logo__flower {
  animation: flowerSpin 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes flowerSpin {
  0%   { transform: rotate(0deg); }
  70%  { transform: rotate(370deg); }
  85%  { transform: rotate(353deg); }
  100% { transform: rotate(360deg); }
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: .9rem;
  letter-spacing: -0.01em;
}

.nav__year {
  font-feature-settings: "tnum";
  margin-right: 6vw;
  display: none;
}

/* Hover : léger grossissement + passage en graisse supérieure.
   .nav__link est un enfant flex de .nav__menu, donc déjà blockifié :
   transform s'y applique sans changer son display. */
/* Stolzl est une police statique : font-weight ne s'interpole pas, il bascule
   d'un fichier au suivant. 400→500 sautait dès 1% de la transition, d'où
   l'effet sec. 300→700 traverse 5 fichiers (300, 350, 400, 500, 700) : le
   contraste est bien plus marqué ET la montée se fait par paliers.
   Easing linear pour que ces paliers soient régulièrement espacés, et durée
   courte : l'escalier est parcouru en ~100ms, donc il se lit comme un
   épaississement franc et non comme une animation qui traîne. Le scale, lui,
   garde une courbe longue et souple. */
.nav__link {
  position: relative;
  padding: .25rem 0;
  font-weight: 300;
  transform-origin: center center;
  transition: transform .45s var(--ease-out),
              font-weight .2s linear;
}

.nav__link:hover {
  transform: scale(1.1);
  font-weight: 700;
}

/* Plus aucun trait sous les liens, ni au survol ni sur la page courante.
   La page courante se signale désormais par la graisse seule : 500 la
   distingue du 300 par défaut, et reste en dessous du 700 du survol pour que
   survoler le lien actif produise quand même un effet. */
.nav__link.is-active {
  font-weight: 500;
}

/* Page courante : le petit "15" en exposant, comme dans le logo. Hors flux
   (absolu) : il n'ecarte pas les liens voisins. */
.nav__link.is-active::after,
.nav-panel__link.is-active::after {
  content: "15";
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: .12em;
  /* Plancher de 9 px : a 7 px, le chiffre se brouillait sur les pages ou
     la nav est inversee (works, en mix-blend-mode) ou ombree (about). */
  font-size: max(9px, .62em);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  /* L'ombre floue de la nav (about, landing) noie un si petit texte */
  text-shadow: none;
}

.nav-panel__link { position: relative; align-self: flex-start; }
.nav-panel__link.is-active::after { top: .12em; font-size: .32em; }

.nav__link--icon { display: inline-flex; align-items: center; }

/* Responsive nav */
@media (max-width: 720px) {
  .nav__menu { gap: 1.25rem; font-size: .8rem; }
  .nav__year { display: none; }
}

/* ═══════════════════════════════════════════
   MIX-BLEND-MODE — Espace Works uniquement
   Pages works + projects + 3d + sketches
   + cinematic + TOUTES les pages projet
   #ffffff strict + text-shadow:none requis
   pour que difference = noir sur blanc

   La LANDING en est exclue : difference
   s'effondre dans les tons moyens (1:1 sur
   un ciel violet) et le voile sombre du hero
   ne ferait qu'aggraver le problème en
   rapprochant le fond du gris. Elle utilise
   le comportement par défaut de .nav :
   blanc sur la vidéo, puis .is-dark une fois
   sur la section contact blanche.
   ═══════════════════════════════════════════ */

/* Pages works principales */
body[data-page="works"] .nav,
body[data-page="projects"] .nav,
body[data-page="3d"] .nav,
body[data-page="lab"] .nav,
body[data-page="sketches"] .nav,
body[data-page="cinematic"] .nav,
/* Toutes les pages projet (project-medaillon, project-focus...) */
body[data-page^="project-"] .nav {
  mix-blend-mode: difference !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

body[data-page="works"] .nav .nav__logo svg,
body[data-page="projects"] .nav .nav__logo svg,
body[data-page="3d"] .nav .nav__logo svg,
body[data-page="lab"] .nav .nav__logo svg,
body[data-page="sketches"] .nav .nav__logo svg,
body[data-page="cinematic"] .nav .nav__logo svg,
body[data-page^="project-"] .nav .nav__logo svg {
  fill: #ffffff !important;
  transition: none !important;
}

/* is-dark ne doit PAS overrider le blanc (landing exclue : elle s'en sert
   justement pour passer en sombre sur la section contact) */
body[data-page="works"] .nav.is-dark,
body[data-page="projects"] .nav.is-dark,
body[data-page="3d"] .nav.is-dark,
body[data-page="lab"] .nav.is-dark,
body[data-page="sketches"] .nav.is-dark,
body[data-page="cinematic"] .nav.is-dark,
body[data-page^="project-"] .nav.is-dark {
  color: #ffffff !important;
  text-shadow: none !important;
}
body[data-page="works"] .nav.is-dark .nav__logo svg,
body[data-page="projects"] .nav.is-dark .nav__logo svg,
body[data-page="3d"] .nav.is-dark .nav__logo svg,
body[data-page="lab"] .nav.is-dark .nav__logo svg,
body[data-page="sketches"] .nav.is-dark .nav__logo svg,
body[data-page="cinematic"] .nav.is-dark .nav__logo svg,
body[data-page^="project-"] .nav.is-dark .nav__logo svg {
  fill: #ffffff !important;
}

/* ═══════════════════════════════════════════
   MENU BURGER — mobile (bouton et panneau crees par main.js)
   ═══════════════════════════════════════════ */
.nav__burger {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Deux traits qui se croisent en X a l'ouverture */
.nav__burger span {
  position: absolute;
  left: 5px;
  right: 5px;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease-out), top .45s var(--ease-out);
}
.nav__burger span:first-child { top: 12px; }
.nav__burger span:last-child  { top: 19px; }

body.nav-open .nav__burger span:first-child { top: 15.25px; transform: rotate(45deg); }
body.nav-open .nav__burger span:last-child  { top: 15.25px; transform: rotate(-45deg); }

/* Panneau plein ecran, sous la nav (le logo et la croix restent au-dessus) */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem var(--gutter) 2.5rem;
  background: #ffffff;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

body.nav-open .nav-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

.nav-panel__links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.nav-panel__link {
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 1.1;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .6s var(--ease-out);
}
.nav-panel__link.is-active { font-weight: 500; }

body.nav-open .nav-panel__link { opacity: 1; transform: none; }
body.nav-open .nav-panel__link:nth-child(2) { transition-delay: .05s; }
body.nav-open .nav-panel__link:nth-child(3) { transition-delay: .1s; }

.nav-panel .lang-selector { margin: 0; }
.nav-panel .lang-btn { font-size: .85rem; }

@media (max-width: 720px) {
  .nav__menu   { display: none; }
  .nav__burger { display: block; }
  .nav-panel   { display: flex; }
}

/* Menu ouvert : la nav repasse en encre sur le panneau blanc, quelle que
   soit la page (plus de mix-blend-mode, plus de blanc sur la video). Le
   double .nav.nav l'emporte sur les regles .is-dark des pages works. */
body.nav-open .nav.nav {
  mix-blend-mode: normal !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  transform: none;
}
body.nav-open .nav.nav .nav__logo svg { fill: var(--ink) !important; }

/* Le bouton back des pages works/projet passerait par-dessus le panneau */
body.nav-open .covers-back,
body.nav-open .project-back {
  opacity: 0;
  pointer-events: none;
}

/* ── Année cachée ── */
.nav__year { display: none; }

/* ── Ultra-wide ── */
@media (min-width: 2560px) {
  .nav {
    padding-left: calc((100vw - 2560px) / 2 + var(--gutter));
    padding-right: calc((100vw - 2560px) / 2 + var(--gutter));
  }
}