/* ============================================================================
   Cosmeek V2 — Navigation flottante (node 3122:19749)
   Une pastille de 220 × 44 encartée de 16 en haut à droite. À l'ouverture,
   la carte se déplie, puis les widgets viennent se greffer dessous l'un
   après l'autre.
   ========================================================================= */

.nav {
  position: fixed;
  inset-block-start: var(--nav-inset);
  inset-inline-end: var(--nav-inset);
  z-index: var(--z-overlay);
  inline-size: var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  /* La colonne occupe toujours sa hauteur dépliée : les widgets masqués ne
     doivent pas pour autant intercepter le pointeur. */
  pointer-events: none;
}

.nav > * {
  pointer-events: auto;
}

/* ── Carte de menu ──────────────────────────────────────────────────────── */
.nav__menu {
  background: var(--c-brown-light);
  backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  overflow: clip;
}

.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding: var(--sp-10) var(--sp-14);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav__mark {
  inline-size: 23.14px; /* cote exacte du symbole */
  block-size: 24px;
  color: var(--c-cream);
}

/* Logo : COSMEEK ↔ CSMK. Les sept lettres du logo complet de la maquette sont
   des vecteurs séparés ; le « short » est le même logo dont O, E, E ont été
   retirés. */
.nav__word {
  display: flex;
  align-items: center;
  block-size: 24px;
  color: var(--c-cream);
}

.nav__l {
  display: block;
  flex: none;
  inline-size: var(--w);
  block-size: 24px;
  overflow: hidden;
}

.nav__l svg {
  display: block;
}

/* Les trois lettres retirées (O, E, E) ne rétrécissent jamais et aucun volet ne
   les recouvre : c'est la lettre elle-même qui glisse vers la gauche et sort
   de sa case, dont le bord gauche fait office de masque fixe. Toutes ensemble.
   Une fois sorties, leur case se referme et C, S, M, K glissent d'un seul
   mouvement pour refermer l'écart. À l'ouverture c'est l'inverse : l'écart
   s'ouvre d'abord, puis les lettres rentrent par la gauche. */
.nav__l--x {
  /* Fermeture : la case attend que les lettres aient commencé à sortir. */
  transition: inline-size 0.28s cubic-bezier(0.65, 0, 0.35, 1) 0.12s;
}

.nav__l--x svg {
  transform: translate3d(0, 0, 0);
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav:not([data-full]) .nav__l--x {
  inline-size: 0;
}

.nav:not([data-full]) .nav__l--x svg {
  transform: translate3d(-105%, 0, 0);
}

/* Ouverture : la case s'ouvre tout de suite, les lettres rentrent ensuite. */
.nav[data-full] .nav__l--x {
  transition-delay: 0s;
}

.nav[data-full] .nav__l--x svg {
  transition-delay: 0.12s;
}

.nav__state {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--c-ink-inv-2);
}

/* Le signe bascule de + à − : c'est le seul écart visible entre les deux
   états de la maquette. Dessiné en deux traits plutôt qu'en caractère pour
   pouvoir l'animer : à l'ouverture le signe fait un demi-tour pendant que le
   trait vertical se résorbe dans l'horizontal ; à la fermeture, l'inverse. */
.nav__sign {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  transition: transform 360ms var(--e-inout);
}

.nav__sign::before,
.nav__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  block-size: 1px;
  margin-block-start: -0.5px;
  background: currentColor;
  transition:
    transform 360ms var(--e-inout),
    opacity 220ms var(--e-inout);
}

/* Le second trait est le vertical : un quart de tour au repos. */
.nav__sign::after {
  transform: rotate(90deg);
}

[data-open] .nav__sign {
  transform: rotate(180deg);
}

[data-open] .nav__sign::after {
  transform: rotate(0deg) scaleX(0);
  opacity: 0;
}

/* ── Panneau de liens ───────────────────────────────────────────────────
   `grid-template-rows` de 0fr à 1fr : le seul moyen d'animer une hauteur
   automatique sans la mesurer en JS. La carte flotte au-dessus de la page,
   ce dépliage ne provoque aucun report de mise en page ailleurs. */
.nav__panel {
  display: grid;
  grid-template-rows: 1fr; /* état final par défaut : sans JS, tout est ouvert */
  transition: grid-template-rows var(--d-acc) var(--e-inout);
}

.js .nav__panel {
  grid-template-rows: 0fr;
}

.js [data-open] .nav__panel {
  grid-template-rows: 1fr;
}

.nav__panel > div {
  overflow: hidden;
}

.nav__links {
  /* 12 sous l'en-tête, puis cinq lignes de 33 : 44 + 12 + 165 = 221. */
  padding-block-start: var(--sp-12);
  margin: 0;
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding-block: var(--sp-10);
  padding-inline-start: var(--sp-12);
  border-block-start: 1px solid var(--c-border-inv);
  font-size: 11px;
  color: var(--c-cream);
  text-decoration: none;
}

/* Au repos : numéro en gris label, libellé à 80 %. Au survol (ou au clavier) :
   numéro en crème, libellé à 100 %. La page courante (`aria-current`) reste
   éteinte, numéro comme libellé, et ne réagit plus au survol : c'est le
   repère « vous êtes ici » (maquette 3587:46188). */
.nav__num {
  color: var(--c-ink-inv-3);
  transition: color var(--d-micro) var(--e-inout);
}

.nav__label {
  opacity: 0.8;
  transition: opacity var(--d-micro) var(--e-inout);
}

.nav__link:hover .nav__num,
.nav__link:focus-visible .nav__num {
  color: var(--c-cream);
}

.nav__link:hover .nav__label,
.nav__link:focus-visible .nav__label {
  opacity: 1;
}

.nav__link[aria-current="page"] {
  cursor: default;
}

.nav__link[aria-current="page"] .nav__num,
.nav__link[aria-current="page"]:hover .nav__num,
.nav__link[aria-current="page"]:focus-visible .nav__num {
  color: var(--c-ink-inv-3);
}

.nav__link[aria-current="page"] .nav__label,
.nav__link[aria-current="page"]:hover .nav__label,
.nav__link[aria-current="page"]:focus-visible .nav__label {
  color: var(--c-ink-inv-3);
  opacity: 1;
}

/* ── Widgets ────────────────────────────────────────────────────────────
   État final par défaut : sans JS, la navigation est simplement dépliée.
   C'est `html.js` qui autorise l'état masqué. */
.js .nav__widget {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(0.94);
  transform-origin: 50% 0;
  pointer-events: none;
  /* Fermeture : les widgets partent d'abord, du bas vers le haut. */
  transition:
    opacity var(--d-micro) var(--e-inout),
    transform var(--d-micro) var(--e-inout);
  transition-delay: calc((2 - var(--i, 0)) * 40ms);
}

.js [data-open] .nav__widget {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--d-micro) var(--e-inout),
    transform var(--d-enter) var(--e-snap);
  transition-delay: calc(var(--d-nav-lead) + var(--i, 0) * var(--stagger));
}

/* ── Widget « projets livrés » ──────────────────────────────────────────── */
.nav__stat {
  display: grid;
  /* Hauteur donnée par la maquette. Le libellé n'y est pas rogné — seul le
     chiffre l'est — et c'est la répartition qui absorbe le reste : la reprendre
     en `gap` fixe donnerait 60 au lieu de 62. */
  block-size: 62px;
  align-content: space-between;
  padding: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--c-cream-deep);
  color: var(--c-brown);
}

.nav__stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__live {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav__dot {
  position: relative;
  inline-size: var(--sp-4);
  block-size: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* Halo : un anneau de même teinte qui s'élargit en s'éteignant, sans fin.
   Il est hors flux (pseudo-élément absolu) et n'anime que transform et
   opacity : aucun report de mise en page, la pastille garde ses 4 px. */
.nav__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-orange);
  opacity: 0;
  animation: nav-halo 1800ms var(--e-out) infinite;
}

@keyframes nav-halo {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(4.5);
    opacity: 0;
  }
}

.nav__count {
  font-size: var(--fs-stat);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-box: trim-both cap alphabetic;
}

/* ── Widget de contact ──────────────────────────────────────────────────── */
.nav__contact {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: 136px;
  padding: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--c-orange);
  color: var(--c-cream);
  text-decoration: none;
}

.nav__logo {
  inline-size: 81.48px; /* cote exacte du logotype */
  block-size: 18px;
  color: var(--c-cream);
}

/* Deux pastilles de 7, en haut à droite et en bas à droite du cartouche. */
.nav__contact::before,
.nav__contact::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--sp-12);
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-pill);
  background: var(--c-orange-deep);
}

.nav__contact::before {
  inset-block-start: var(--sp-12);
}

.nav__contact::after {
  inset-block-end: var(--sp-12);
}

.nav__who {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav__portrait {
  position: relative;
  flex: 0 0 auto;
  inline-size: 56px;
  block-size: 56px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xs);
  background: #e6e6e6;
}

.nav__portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--e-spring);
}

/* Léger zoom du portrait au survol, comme sur le CTA de la hero. */
.nav__contact:hover .nav__portrait img,
.nav__contact:focus-visible .nav__portrait img {
  transform: scale(1.1);
  transition-duration: 0.9s;
}

/* Teinte orange : shader au survol (js/cta-shader.js) ; sans lui, un simple
   fondu CSS. */
.nav__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-orange);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.4s var(--e-out);
}

.nav__portrait.has-shader::after {
  display: none;
}

.nav__contact:hover .nav__portrait::after,
.nav__contact:focus-visible .nav__portrait::after {
  opacity: 0;
}

/* Au survol, la carte vire à une teinte 10 % plus sombre. La couleur a sa propre
   transition, sans le retard d'échelonnage de l'ouverture du menu. */
.nav__contact,
.js .nav__contact,
.js [data-open] .nav__contact {
  transition-property: opacity, transform, background-color;
}

.js .nav__contact {
  transition-duration: var(--d-micro), var(--d-micro), 0.4s;
  transition-delay: calc((2 - var(--i, 0)) * 40ms), calc((2 - var(--i, 0)) * 40ms), 0s;
}

.js [data-open] .nav__contact {
  transition-duration: var(--d-micro), var(--d-enter), 0.4s;
  transition-delay:
    calc(var(--d-nav-lead) + var(--i, 0) * var(--stagger)),
    calc(var(--d-nav-lead) + var(--i, 0) * var(--stagger)),
    0s;
}

.nav__contact:hover,
.nav__contact:focus-visible {
  background: color-mix(in srgb, var(--c-orange), black 10%);
}

.nav__contact-name {
  font-size: var(--fs-sm);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-text);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  transition: color var(--d-micro) var(--e-inout);
}

.nav__contact-name span {
  display: block;
  color: var(--c-orange-deep);
  transition: color var(--d-micro) var(--e-inout);
}

/* Au survol : « Cliquez ici » passe en blanc plein, le nom en blanc estompé. */
.nav__contact:hover .nav__contact-name,
.nav__contact:focus-visible .nav__contact-name {
  color: rgb(255 255 255 / 0.6);
}

.nav__contact:hover .nav__contact-name span,
.nav__contact:focus-visible .nav__contact-name span {
  color: var(--c-white);
}

/* ── Rangée basse : portrait d'équipe + pitch ───────────────────────────── */
.nav__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  block-size: 136px;
}

.nav__shot {
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--r-md);
  object-fit: cover;
}

.nav__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-cream-deep);
  color: var(--c-brown);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* Le disque (56 px) est centré sous le libellé, dont la hauteur est réservée
   sur deux lignes (voir `.nav__pitch-label`) : il ne bouge pas quand le
   libellé passe à une seule (« Pause »). Son anneau
   de progression déborde de 6 px (4 d'air + 2 de trait) et tient dans la
   carte. L'anneau se remplit avec `--progress` (0 → 100), posé par
   js/pitch.js d'après la position dans l'audio : un repère de durée. */
.nav__disc {
  --ring-gap: var(--sp-4);
  --ring-w: var(--sp-2);
  position: relative;
  align-self: center;
  margin-block: auto;
  display: grid;
  place-items: center;
  inline-size: var(--sp-56);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--c-brown-light);
  color: var(--c-cream-deep);
}

.nav__disc::before {
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--ring-gap) + var(--ring-w)));
  border-radius: inherit;
  background: conic-gradient(
    var(--c-orange) calc(var(--progress, 0) * 1%),
    rgb(var(--c-brown-rgb) / 0.14) 0
  );
  /* Évide le centre : il ne reste que l'anneau. */
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring-w)),
    #000 calc(100% - var(--ring-w) + 0.5px)
  );
  pointer-events: none;
}

.nav__disc {
  transition:
    background-color var(--d-micro) var(--e-inout),
    transform var(--d-micro) var(--e-inout);
}

.nav__pitch:hover .nav__disc,
.nav__pitch:focus-visible .nav__disc {
  transform: scale(1.04);
}

.nav__pitch[aria-pressed="true"] .nav__disc {
  background: var(--c-orange);
}

.nav__pitch:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

/* Les sept traits de l'onde. Au repos : les hauteurs de la maquette
   (`--rest`, part de la hauteur maximale). En lecture, js/pitch.js pose
   `--level` (0 → 1) d'après le spectre ; le trait ne descend jamais sous
   son repos, pour que le motif reste lisible dans les creux. */
.nav__wave {
  inline-size: var(--sp-40);
  block-size: var(--sp-40);
  fill: currentColor;
  overflow: visible;
}

.nav__wave rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(var(--level, var(--rest)));
}

/* ── Petits écrans ──────────────────────────────────────────────────────
   La colonne ne tiendrait pas : elle passe en panneau plein cadre, ancré au
   même coin, et défile si la hauteur manque. */
@media (width < 560px) {
  .nav {
    inline-size: min(var(--nav-w), calc(100vw - 2 * var(--nav-inset)));
    max-block-size: calc(100svh - 2 * var(--nav-inset));
    overflow-y: auto;
    scrollbar-width: none;
  }
}

/* Le libellé du pitch est rogné sur la capitale : c'est ce qui fait tenir
   12 + 21 + 12 + 80 + 12 dans les 136 de la carte. */
.nav__pitch-label {
  text-box: trim-both cap alphabetic;
  /* Deux lignes rognées sur la capitale : 7 px de capitale + 12 d'interligne.
     Le libellé tient sur deux lignes au repos, sur une en lecture ; la
     hauteur réservée garde le disque immobile. */
  min-block-size: 19px;
}

/* ── Mouvement réduit ───────────────────────────────────────────────────
   Les widgets ne se greffent plus : ils sont là ou ils n'y sont pas. La
   cascade disparaît, le dépliage du panneau devient instantané. L'effet de
   proximité sur le titre, lui, ne s'arme pas du tout (voir hero-type.js). */
@media (prefers-reduced-motion: reduce) {
  .nav__l--x,
  .nav__l--x svg,
  .nav__sign,
  .nav__sign::before,
  .nav__sign::after {
    transition: none;
  }

  .nav__dot::before {
    animation: none;
  }

  .nav__disc {
    transition: none;
  }

  .js .nav__widget {
    transform: none;
    transition:
      opacity 120ms linear,
      transform 0ms;
    transition-delay: 0ms;
  }

  .js [data-open] .nav__widget {
    transform: none;
    transition:
      opacity 120ms linear,
      transform 0ms;
    transition-delay: 0ms;
  }

  .nav__panel {
    transition: none;
  }
}