/* ==========================================================================
   NOCTIS — atelier automobile
   Feuille de style principale (thème sombre éditorial)
   ========================================================================== */

/* --- 1. Variables & reset -------------------------------------------------- */

:root {
  --black: #0c0c0c;
  --black-2: #161616;
  --black-3: #1f1f1f;
  --red: #410306;
  --red-bright: #6d0509;
  --gold: #c5a064;
  --white: #f2f1ed;

  --line: rgba(242, 241, 237, 0.12);
  --line-soft: rgba(242, 241, 237, 0.06);
  --muted: rgba(242, 241, 237, 0.62);
  --muted-2: rgba(242, 241, 237, 0.4);

  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  --pad: clamp(1.15rem, 3.6vw, 4.5rem);
  --header-h: 5.5rem;
  --maxw: 1680px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.is-locked,
html.is-locked body {
  overflow: hidden;
  height: 100%;
}

/* Pendant la vidéo 0 (l'intro), rien d'autre que la phrase manifeste n'est à
   l'écran : le titre et le bas du hero n'arrivent qu'à la fin de la séquence,
   quand la phrase s'est effacée. Un seul bloc de texte à la fois. */
html.is-intro .hero__title-block,
html.is-intro .hero__foot {
  opacity: 0;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

::selection {
  background: var(--gold);
  color: var(--black);
}

:focus-visible {
  outline: 1px dashed var(--gold);
  outline-offset: 3px;
}

/* --- 2. Utilitaires ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  position: relative;
  padding-block: clamp(5rem, 12vh, 10rem);
}

.section--tight {
  padding-block: clamp(3.5rem, 8vh, 7rem);
}

.label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}

.label--gold {
  color: var(--gold);
}

.h-display,
.h-section,
.h-card {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.025em;
  line-height: 1.07;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.9rem, 8vw, 8.5rem);
}

.h-section {
  font-size: clamp(2.1rem, 5vw, 5.2rem);
}

.h-card {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
}

/* --- 2 bis. Le fantôme : la signature de tout le texte --------------------
   Rien, sur ce site, ne s'écrit en aplat. Trois paliers, une seule signature :

     --ghost-1  grands textes : écho net + diffusion + halo large ;
     --ghost-2  labels, petites capitales, serif courant, boutons, navigation ;
     --ghost-3  texte courant : un simple halo, pour que tout respire pareil.

   Les paliers sont des jetons : la bande claire les reprend à l'encre noire. */

:root {
  --ghost-echo-1: rgba(242, 241, 237, 0.34);
  --ghost-1:
    -0.016em -0.01em 0.03em var(--ghost-echo-1),
    0.012em 0.012em 0.05em rgba(242, 241, 237, 0.15),
    0 0 1.4em rgba(242, 241, 237, 0.09);
  --ghost-2:
    -0.013em -0.007em 0.024em rgba(242, 241, 237, 0.27),
    0.009em 0.009em 0.04em rgba(242, 241, 237, 0.12),
    0 0 1em rgba(242, 241, 237, 0.08);
  --ghost-3: 0 0 1.1em rgba(242, 241, 237, 0.055);
}

/* à la source : le texte courant hérite d'un halo discret, donc aucun texte
   n'est oublié, même celui qui n'est nommé nulle part. */
body {
  text-shadow: var(--ghost-3);
}

/* Palier 1 — les grands textes : titres, chiffres, citations, grands noms. */
.h-display,
.h-section,
.h-card,
.hero__statement,
.menu__list a,
.reveal__finale-mark,
.figure-stat strong,
.material__index,
.manifesto__lead,
.contact__detail a,
.contact__detail p,
.craft__step h3,
.material h3,
.step__body h3,
.service__body h3,
.rail__item figcaption strong,
.card__head h3,
.page-hero h1,
.prose h2,
.prose h3 {
  /* le grand texte n'est jamais un blanc plein : il garde une légère
     transparence, comme une encre qui hésite sur le noir */
  color: rgba(242, 241, 237, 0.94);
  text-shadow: var(--ghost-1);
}

/* Palier 2 — tout ce qui se lit en petites capitales, en serif courant ou
   dans un bouton : les repères, les libellés, la navigation, les formulaires. */
.label,
.label--gold,
.cta__eyebrow,
.hero__beat-eyebrow,
.card__tag,
.breadcrumb,
.breadcrumb a,
.logo-word,
.header__nav-label,
.menu__index,
.menu__foot-links a,
.panel__index,
.step__index,
.service__index,
.craft__step-num,
.figure-stat > span,
.rail__item figcaption,
.rail__item figcaption span,
.reveal__cue,
.footer__col h4,
.footer__col a,
.footer__bottom,
.field label,
.consent,
.form__note,
.card__specs,
.card__tag,
.btn,
.btn-link,
.hero__sub,
.lead,
.gallery figcaption {
  text-shadow: var(--ghost-2);
}

/* Les bandeaux défilants : mots creux (contour seul), donc pas d'écho décalé
   — sur un contour, il se lit comme un biseau. Un halo large et très doux
   suffit : le mot reste un fantôme, sans jamais devenir un relief. */
.marquee__track > span {
  text-shadow: 0 0 1.4em rgba(242, 241, 237, 0.06);
}

.ordinary--clair .ordinary__marquee .marquee__track > span {
  text-shadow: 0 0 1.4em rgba(12, 12, 12, 0.05);
}

/* Sur les fonds photographiques, le fantôme s'assombrit : le halo blanc y
   devient un voile. On garde une ombre portée pour la lisibilité. */
.hero__title,
.cta .h-display,
.reveal__finale-mark {
  text-shadow:
    0 1px 30px rgba(12, 12, 12, 0.72),
    -0.012em -0.008em 0.02em rgba(242, 241, 237, 0.2),
    0 0 1.4em rgba(242, 241, 237, 0.07);
}

/* Bande claire : la même signature, à l'encre noire. */
.ordinary--clair,
.page-hero--clair {
  --ghost-echo-1: rgba(12, 12, 12, 0.3);
  --ghost-1:
    -0.016em -0.01em 0.03em rgba(12, 12, 12, 0.3),
    0.012em 0.012em 0.05em rgba(12, 12, 12, 0.16),
    0 0 1.2em rgba(12, 12, 12, 0.09);
  --ghost-2:
    -0.013em -0.007em 0.024em rgba(12, 12, 12, 0.24),
    0 0 0.9em rgba(12, 12, 12, 0.08);
  --ghost-3: 0 0 1.1em rgba(12, 12, 12, 0.06);
  /* le texte courant de la bande claire reprend le halo à l'encre */
  text-shadow: var(--ghost-3);
}

.lead {
  font-size: clamp(1rem, 1.15vw, 1.3rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46rem;
}

.lead--center {
  margin-inline: auto;
  text-align: center;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--white);
  color: var(--black);
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --- 3. Boutons ----------------------------------------------------------- */

.btn {
  --btn-fg: var(--white);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 1.15rem 2.4rem;
  border: 1px solid rgba(242, 241, 237, 0.22);
  color: var(--btn-fg);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn > span {
  display: block;
  position: relative;
  overflow: hidden;
}

.btn > span > span {
  display: inline-block;
  transition: transform 0.55s var(--ease-out);
}

.btn > span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(115%);
  transition: transform 0.55s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  border-color: rgba(242, 241, 237, 0.55);
}

.btn:hover > span > span,
.btn:focus-visible > span > span {
  transform: translateY(-115%);
}

.btn:hover > span::after,
.btn:focus-visible > span::after {
  transform: translateY(0);
}

.btn--solid {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.btn--solid:hover {
  border-color: var(--gold);
  background: var(--gold);
}

.btn--ghost-light {
  border-color: rgba(242, 241, 237, 0.2);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.btn-link::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease);
}

.btn-link:hover {
  color: var(--white);
}

.btn-link:hover::after {
  width: 3.2rem;
}

/* --- 4. En-tête ----------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem var(--pad);
  transition: transform 0.6s var(--ease-out), background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 12, 0.96) 0%,
    rgba(12, 12, 12, 0.82) 52%,
    rgba(12, 12, 12, 0.34) 78%,
    rgba(12, 12, 12, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.header.is-scrolled::before {
  /* la page peut faire défiler un titre sous l'en-tête : le voile garde le
     logo et le menu lisibles dessus, sans jamais masquer le titre entier */
  backdrop-filter: blur(7px);
  opacity: 1;
}

/* Au-dessus de la bande claire, l'en-tête passe en noir (sinon il disparaît) */
.header.is-on-light::before {
  background: linear-gradient(to bottom, rgba(242, 241, 237, 0.94), rgba(242, 241, 237, 0));
}

.header.is-on-light .header__socials a,
.header.is-on-light .header__logo {
  color: var(--black);
}

.header.is-on-light .header__nav-label {
  color: rgba(12, 12, 12, 0.62);
}

.header.is-on-light .nav-trigger:hover .header__nav-label {
  color: var(--black);
}

.header.is-on-light .burger i {
  background: var(--black);
}

.header.is-hidden {
  transform: translateY(-115%);
}

.header__socials {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  z-index: 2;
}

.header__socials a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.header__socials a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.header__socials svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.header__logo {
  position: relative;
  z-index: 2;
  justify-self: center;
  display: block;
  color: var(--white);
}

.header__logo .logo-mark {
  width: 1.3rem;
  height: 1.6rem;
  margin-inline: auto;
}

.header__logo .logo-word {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-align: center;
}

.header__nav {
  position: relative;
  z-index: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.header__nav-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

.burger {
  display: grid;
  gap: 5px;
  width: 2.4rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

.burger i {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--white);
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease);
}

.burger:hover i:first-child {
  transform: translateY(-1px);
}

.burger:hover i:last-child {
  transform: translateY(1px);
}

.menu-open .burger i:first-child {
  transform: translateY(3.25px) rotate(38deg);
}

.menu-open .burger i:last-child {
  transform: translateY(-3.25px) rotate(-38deg);
}

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.nav-trigger:hover .header__nav-label {
  color: var(--white);
}

/* --- 5. Menu plein écran -------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--black-2);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-out);
  pointer-events: none;
}

.menu-open .menu {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.menu__body {
  display: grid;
  align-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 8rem var(--pad) 3rem;
}

.menu__list {
  display: grid;
  gap: clamp(0.4rem, 1.6vw, 1.2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu__list a {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color 0.4s var(--ease), transform 0.6s var(--ease-out);
}

.menu__list a:hover {
  color: var(--gold);
  transform: translateX(1.2rem);
}

.menu__list .menu__index {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--muted-2);
  margin-right: 1.2rem;
  vertical-align: 0.9rem;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem var(--pad) 2.5rem;
  border-top: 1px solid var(--line);
}

.menu__foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu__foot-links a:hover {
  color: var(--white);
}

.menu__socials {
  display: flex;
  gap: 1rem;
}

.menu__socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  color: var(--white);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.menu__socials a:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.menu__socials svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* --- 6. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  /* 100svh de rush (vidéo 1) + 100svh d'écran visible + la course du carré
     vidéo 2 : tant que celui-ci n'a pas rempli l'écran, la page ne descend
     pas plus bas (le bloc interne est épinglé). */
  height: 460svh;
  background: var(--black);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.hero__media,
.hero__media img,
.hero__media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media img {
  z-index: 0;
  transition: opacity 0.8s var(--ease);
}

/* Vidéo 1 : le canvas de la séquence d'images prend le relais dès que les
   premières images sont prêtes */
.hero__frames {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero__frames.is-ready {
  opacity: 1;
}

/* Vidéo 0 : le plan d'ouverture. Elle reste au-dessus du rush tant que
   l'intro n'a pas rendu la main ; elle s'efface ensuite (les deux images se
   raccordent, donc ce fondu est invisible), et ses images sont libérées. */
.hero__intro-frames {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
}

.hero__intro-frames.is-ready {
  opacity: 1;
}

.hero__intro-frames.is-done {
  opacity: 0;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}

/* Le rendu 2.5D remplace l'image fixe dès qu'il est prêt */
.hero__media.is-3d .hero__canvas {
  opacity: 1;
}

.hero__media.is-3d img {
  opacity: 0;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(12, 12, 12, 0) 35%, rgba(12, 12, 12, 0.65) 100%),
    linear-gradient(to bottom, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0) 30%, rgba(12, 12, 12, 0.35) 72%, rgba(12, 12, 12, 0.85) 100%);
  pointer-events: none;
}

/* Voile qui accompagne l'arrivée de la phrase manifeste (rush dans les voitures) */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(72% 58% at 50% 48%, rgba(12, 12, 12, 0.74) 0%, rgba(12, 12, 12, 0) 72%),
    linear-gradient(to bottom, rgba(12, 12, 12, 0.25), rgba(12, 12, 12, 0.35));
  pointer-events: none;
}

/* --- Vidéo 2 : fond texture noir puis carré qui s'ouvre -------------------
   Séquence du site de référence : à la fin du rush, le fond texture noir
   apparaît en fondu sous la phrase manifeste (qui reste affichée), puis un
   carré s'ouvre au centre et grandit au défilement jusqu'à occuper tout
   l'écran ; la vidéo 2 s'y joue alors normalement (aucun scrub : c'est ce
   qui provoquait les saccades). */

.hero__reveal-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(130% 110% at 50% 42%, #171717 0%, #0a0a0a 62%, #050505 100%);
  /* la couche reste peinte en permanence (mais invisible) : si elle
     n'apparaissait qu'au moment du fondu, le premier rendu provoquerait un
     décrochage d'une dizaine d'images */
  will-change: opacity;
  pointer-events: none;
}

.hero__reveal-texture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* Grain fin : donne au fond son aspect « texture » plutôt que aplat noir */
/* (le grain est incrusté dans noir-texture.jpg : le rendu d'un filtre SVG en
   mix-blend-mode coûtait ~90 ms au premier affichage du fondu) */

/* La fenêtre : plein cadre, découpée par clip-path (aucun redimensionnement
   du élément vidéo, donc aucun coût de décodage pendant l'animation). Elle
   passe au-dessus du texte, comme sur le site officiel. */
.hero__reveal-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  overflow: hidden;
  background: rgba(242, 241, 237, 0.18);
  /* au repos : la fenêtre minuscule, peinte en permanence (l'image de la
     vidéo 2 est donc déjà décodée et composée quand le fondu commence) */
  clip-path: inset(414px 684px round 11px);
  will-change: clip-path, opacity;
  contain: paint;
  pointer-events: none;
}

.hero__reveal-poster,
.hero__reveal-frames {
  position: absolute;
  top: 1px;
  left: 1px;
  /* une <video> est un élément remplacé : il faut une taille explicite,
     sinon elle garde sa taille intrinsèque au lieu de remplir la fenêtre
     (même principe pour le canvas de la séquence d'images) */
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

.hero__reveal-poster {
  object-fit: cover;
  background: var(--black);
}

.hero__reveal-frames {
  display: block;
}

/* Textes flottants + fin de la vidéo 2 ------------------------------- */

.reveal__captions,
.reveal__scrim,
.reveal__finale {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reveal__cue {
  position: absolute;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.92);
  background: rgba(12, 12, 12, 0.42);
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(242, 241, 237, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal__cue.is-active {
  opacity: 1;
  transform: translateY(0);
}

.reveal__cue--tl { top: 1.5rem; left: 1.5rem; }
.reveal__cue--br { bottom: 1.5rem; right: 1.5rem; }
.reveal__cue--tr { top: 1.5rem; right: 1.5rem; }

.reveal__scrim {
  background: radial-gradient(90% 70% at 50% 50%, rgba(5, 5, 5, 0.74) 0%, rgba(6, 6, 6, 0.3) 62%, rgba(6, 6, 6, 0.88) 100%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.reveal__scrim.is-active {
  opacity: 1;
}

.reveal__finale {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal__finale.is-active {
  opacity: 1;
  transform: scale(1);
}

.reveal__finale-mark {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
}

.reveal__finale-sub {
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.9);
}

.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--header-h) + 2rem) var(--pad) clamp(2.5rem, 7vh, 5.5rem);
  text-align: center;
}

.hero__center {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  position: relative;
}

.hero__statement {
  max-width: 62rem;
  margin-inline: auto;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.6vw, 4.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 0 60px rgba(12, 12, 12, 0.75);
}

.hero__statement:empty {
  display: none;
}

/* La phrase manifeste et le titre occupent le même centre optique, mais ne
   sont jamais visibles en même temps : la chorégraphie (JS) fait sortir la
   phrase avant de faire entrer le titre. */
.hero__beat,
.hero__title-block {
  position: absolute;
  inset: auto 0 auto 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.hero__beat {
  /* La phrase n'existe que par la chorégraphie : sans JavaScript elle est
     masquée, plutôt que de se superposer au titre. */
  display: none;
}

html.gsap-ready .hero__beat {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
  opacity: 0;
}

.hero__beat-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Barre de progression de l'intro : elle suit la course de la caméra */
.hero__beat-bar {
  width: 10rem;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.hero__beat-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}

.hero__statement .word {
  display: inline-block;
  opacity: 1;
  will-change: opacity;
}

.hero__title {
  margin-inline: auto;
  max-width: 22ch;
}

.hero__foot {
  position: relative;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

.hero__sub {
  max-width: 42rem;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(242, 241, 237, 0.82);
  text-wrap: balance;
}

/* --- 7. Bandeaux défilants ------------------------------------------------ */


.marquee__track {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--speed, 42s) linear infinite;
}

.marquee__track--reverse {
  animation-direction: reverse;
}

.marquee__track > span {
  display: block;
  padding-inline: 0.35em;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6.4vw, 6.5rem);
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.marquee__track > span em {
  font-style: italic;
  color: var(--gold);
}

.marquee__track > span u {
  text-decoration: none;
  -webkit-text-stroke: 1px rgba(242, 241, 237, 0.4);
  color: transparent;
}

.marquee__track > span i {
  font-style: normal;
  color: var(--muted);
  font-size: 0.42em;
  letter-spacing: 0.3em;
  font-family: var(--font-body);
  text-transform: uppercase;
  vertical-align: 0.9em;
  padding-inline: 1.2rem;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.marquee__caption {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- 8. Galerie défilante ------------------------------------------------- */

.gallery {
  padding-block: clamp(4rem, 11vh, 8.5rem);
  background: var(--black);
}

.gallery__head {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 42rem;
  margin-bottom: clamp(2.75rem, 7vh, 4.75rem);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

.gallery__item {
  margin: 0;
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.gallery__item--wide {
  grid-column: span 12;
}

.gallery__item--portrait {
  grid-column: span 4;
}

.gallery__item--half {
  grid-column: span 6;
}

.gallery__media {
  position: relative;
  overflow: hidden;
  background: #101012;
}

.gallery__item--wide .gallery__media {
  aspect-ratio: 21 / 9;
}

.gallery__item--portrait .gallery__media {
  aspect-ratio: 4 / 5;
}

.gallery__item--half .gallery__media {
  aspect-ratio: 16 / 10;
}

.gallery__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 1.1s var(--ease-out), filter 0.8s var(--ease);
}

.gallery__item:hover .gallery__media img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.08);
}

.gallery figcaption {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.4s var(--ease);
}

.gallery__item:hover figcaption {
  color: var(--gold);
}

/* --- 9. Approche / marques ------------------------------------------------ */

.approach {
  border-top: 1px solid var(--line-soft);
}

.approach__head {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
}

.brands {
  position: relative;
  margin-block: clamp(3rem, 7vh, 5rem);
  padding-block: 2.25rem;
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.brands__track {
  display: flex;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
  align-items: center;
}

.brands__track span {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.42);
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}

.brands__track .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 0;
}

.brands__track .brand img {
  height: 2rem;
  width: auto;
  max-width: 6.5rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.52;
  transition: opacity 0.4s var(--ease);
}

.brands__track .brand img:hover {
  opacity: 1;
}

.brands__track span:hover {
  color: var(--white);
}

.approach__foot {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
}

/* --- 10. Panneaux empilés ------------------------------------------------- */

.panels {
  position: relative;
  background: var(--black);
}

.panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 8rem);
  background: var(--black);
}

.panel__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.panel__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black-2);
}

.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.55), rgba(12, 12, 12, 0) 55%);
}

.panel__copy {
  display: grid;
  gap: 1.35rem;
  align-content: center;
}

.panel__index {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--muted-2);
}

.panel__copy p {
  color: var(--muted);
  max-width: 34rem;
}

.panel:nth-child(2) {
  background: var(--black-2);
}

/* --- 11. Manifeste + services -------------------------------------------- */

.manifesto {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.manifesto__copy {
  display: grid;
  gap: 1.5rem;
}

.manifesto__lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 34rem;
}

.manifesto__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--black-2);
}

.manifesto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services {
  border-top: 1px solid var(--line-soft);
}

.services__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.services__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: grid;
  gap: 1.5rem;
}

.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding-block: clamp(1.35rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur) var(--ease);
}

.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(65, 3, 6, 0.5), rgba(65, 3, 6, 0));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.service:hover {
  padding-left: 1.25rem;
}

.service:hover::before {
  opacity: 1;
}

.service__index {
  position: relative;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--muted-2);
  padding-top: 0.6rem;
}

.service__body {
  position: relative;
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}

.service__body h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.service__body p {
  color: var(--muted);
  font-size: 0.95rem;
}

.service__body .btn-link {
  margin-top: 0.35rem;
}

/* --- 12. L'ordinaire s'arrête ici ---------------------------------------- */

.ordinary {
  position: relative;
  padding-block: clamp(4rem, 10vh, 9rem) 0;
  background: var(--black);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}

.ordinary__marquee {
  position: relative;
  overflow: hidden;
  opacity: 0.5;
}

.ordinary__marquee .marquee__track > span {
  font-size: clamp(4rem, 16vw, 16rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 241, 237, 0.28);
}

.ordinary__head {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  margin-top: clamp(-3rem, -4vw, -1rem);
}

.ordinary__railstrip {
  position: relative;
  margin-top: clamp(3rem, 7vh, 6rem);
}

.rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: 0 var(--pad) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail__item {
  position: relative;
  /* assez larges pour que le pan horizontal ait de l'ampleur (sinon la
     section ne bouge que de quelques pixels) */
  flex: 0 0 clamp(20rem, 42vw, 48rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--black-2);
  scroll-snap-align: center;
}

.rail__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rail__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.35rem;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.92), rgba(12, 12, 12, 0));
}

.rail__item figcaption strong {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;
}

.rail__item figcaption span {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .rail-sticky {
    position: relative;
    height: 100svh;
    display: grid;
    align-content: center;
    overflow: hidden;
  }

  .rail {
    overflow: visible;
    scroll-snap-type: none;
    padding-right: calc(var(--pad) * 2);
  }
}

/* --- 13. Cartes (réalisations / stock) ----------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.card {
  position: relative;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--black-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: rgba(12, 12, 12, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.card__head h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 400;
}

.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.card__text {
  color: var(--muted);
  font-size: 0.92rem;
}

/* --- 14. Appel à l'action ------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(6rem, 18vh, 14rem);
  border-top: 1px solid var(--line-soft);
}

.cta__bg {
  position: absolute;
  inset: 0;
  opacity: 0.42;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 50% 50%, rgba(12, 12, 12, 0.5), var(--black) 75%);
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2rem;
  justify-items: center;
}

.cta__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 15. Pied de page ----------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 7vh, 5rem) 2.5rem;
  font-size: 0.8rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(8rem, 0.6fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.footer__brand {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  max-width: 24rem;
}

.footer__brand .logo-mark {
  width: 1.15rem;
  height: 1.42rem;
}

.footer__brand p {
  color: var(--muted);
  line-height: 1.7;
}

.footer__col h4 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.25rem;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.footer__col a {
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

.footer__col a:hover {
  color: var(--white);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* La signature NevoLabs : le mot « POWERED BY » reste un repère discret,
   le logo se tient à côté, en blanc, et s'allume au survol. */
.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted-2);
  transition: color var(--dur) var(--ease);
}

.footer__credit > span {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.footer__credit img {
  width: clamp(6.5rem, 8vw, 8rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity var(--dur) var(--ease);
}

.footer__credit:hover,
.footer__credit:focus-visible {
  color: var(--white);
}

.footer__credit:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.footer__credit:hover img,
.footer__credit:focus-visible img {
  opacity: 1;
}

.footer__socials {
  display: flex;
  gap: 1rem;
}

.footer__socials a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.footer__socials svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.footer__socials a:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* --- 16. Pages intérieures ----------------------------------------------- */

.page-hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 62svh;
  padding: calc(var(--header-h) + 4rem) var(--pad) clamp(2.5rem, 6vh, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--black) 8%, rgba(12, 12, 12, 0.45) 60%, rgba(12, 12, 12, 0.75));
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem;
  max-width: 60rem;
}

.breadcrumb {
  display: flex;
  gap: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.breadcrumb a:hover {
  color: var(--white);
}

.prose {
  display: grid;
  gap: 1.5rem;
  max-width: 62rem;
}

.prose h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 400;
  margin-top: 1.5rem;
}

.prose h3 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 1rem;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose ul {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.1rem;
}

.prose a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 17. Formulaires ----------------------------------------------------- */

.form {
  display: grid;
  gap: 1.5rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.field {
  display: grid;
  gap: 0.6rem;
}

.field label {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 300;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.4rem, calc(100% - 6px) 1.4rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field select option {
  background: var(--black-2);
  color: var(--white);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(242, 241, 237, 0.28);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  cursor: pointer;
}

.consent input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.25rem 0 0;
  border: 1px solid rgba(242, 241, 237, 0.35);
  background: transparent;
  cursor: pointer;
}

.consent input::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold);
  transform: scale(0);
  transition: transform 0.25s var(--ease);
}

.consent input:checked {
  border-color: var(--gold);
}

.consent input:checked::after {
  transform: scale(1);
}

.consent a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__note {
  font-size: 0.75rem;
  color: var(--muted-2);
  max-width: 26rem;
}

.form__status {
  font-size: 0.85rem;
  color: var(--gold);
  min-height: 1.2rem;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.contact__details {
  display: grid;
  gap: 2rem;
}

.contact__detail {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.contact__detail span {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.contact__detail a,
.contact__detail p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: var(--white);
}

/* --- 19. Animations d'entrée --------------------------------------------- */

html.gsap-ready [data-anim="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
}

html.gsap-ready [data-anim="fade"] {
  opacity: 0;
}

html.gsap-ready [data-anim="stagger"] > * {
  opacity: 0;
}

/* Préloader des pages intérieures : le monogramme NOCTIS et une barre fine.
   (La page d'accueil n'en a plus : sa vidéo 0 joue le rôle d'ouverture, sur
   le média du hero, avec la phrase manifeste.) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: var(--black);
  transition: none;
}

.loader__inner {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.loader__inner .logo-mark {
  width: 1.9rem;
  height: 2.35rem;
  color: var(--white);
  animation: loader-pulse 1.8s var(--ease) infinite;
}

.loader__bar {
  width: 8rem;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.loader__bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--gold);
  animation: loader-slide 1.4s var(--ease) infinite;
}

@keyframes loader-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes loader-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

body.is-loaded .loader {
  display: none;
}

/* --- 19 bis. Progression de lecture --------------------------------------- */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 95;
  height: 2px;
  background: rgba(242, 241, 237, 0.07);
  pointer-events: none;
}

.scroll-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--gold), var(--red-bright));
  transform-origin: left center;
}

/* --- 19 ter. L'atelier : les trois gestes, en séquence --------------------
   Trois gestes (film, polissage, contrôle) tenus dans un même plan de travail.
   Au défilement, la colonne des gestes s'allume geste par geste et le plan de
   travail change de cadrage ; la lumière rasante balaie la pièce à chaque
   passage, comme au contrôle final. Sans JavaScript ou en mouvement réduit :
   la liste et les trois plans s'empilent, simplement, dans l'ordre. */

.craft {
  position: relative;
  padding: clamp(4.5rem, 11vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
  border-top: 1px solid var(--line-soft);
}

.craft__head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.craft__head .lead {
  max-width: 44rem;
}

.craft__stage {
  display: grid;
  gap: clamp(2rem, 5vh, 3rem);
  padding-inline: var(--pad);
}

.craft__sticky {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-content: center;
}

/* La liste des gestes : la ligne au-dessus de chaque geste est la même que
   celle des sections ; elle s'éclaire quand le geste passe devant la caméra. */
.craft__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.craft__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  row-gap: 0.35rem;
  padding: 1.1rem 0 1.25rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-2);
  transition: color 0.7s var(--ease), border-color 0.7s var(--ease);
}

.craft__step:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.craft__step-num {
  grid-row: 1 / span 2;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: currentColor;
  padding-top: 0.55rem;
  transition: color 0.7s var(--ease);
}

.craft__step h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: currentColor;
  transition: color 0.7s var(--ease);
}

.craft__step p {
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  line-height: 1.6;
  max-width: 26rem;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.craft__step.is-active {
  color: var(--white);
  border-color: var(--line);
}

.craft__step.is-active h3 {
  color: var(--white);
}

.craft__step.is-active .craft__step-num {
  color: var(--gold);
}

.craft__step.is-active p {
  color: var(--muted);
  opacity: 1;
  transform: none;
}

/* Le plan de travail : trois cadrages dans la même fenêtre. */
.craft__deck {
  position: relative;
  display: grid;
  gap: clamp(0.7rem, 1.2vw, 1.1rem);
}

.craft__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black-2);
}

.craft__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.94);
  transition: filter 1s var(--ease), transform 1.5s var(--ease-out);
}

/* La lumière rasante : elle balaie le plan quand il devient le plan actif. */
.craft__frame::after {
  content: "";
  position: absolute;
  inset: -25% -45%;
  z-index: 1;
  background: linear-gradient(
    104deg,
    rgba(242, 241, 237, 0) 36%,
    rgba(242, 241, 237, 0.14) 46%,
    rgba(197, 160, 100, 0.16) 52%,
    rgba(242, 241, 237, 0) 64%
  );
  transform: translate3d(-70%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.craft__frame.is-active::after {
  animation: craft-sheen 1.6s var(--ease-out) 0.12s 1 both;
}

@keyframes craft-sheen {
  0% { transform: translate3d(-70%, 0, 0); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translate3d(70%, 0, 0); opacity: 0; }
}

/* Mode séquence : la colonne des gestes reste à l'écran pendant que le plan
   de travail change. Réservé aux écrans larges et aux navigateurs animés. */
@media (min-width: 1024px) {
  html.gsap-ready .craft {
    padding-bottom: 0;
  }

  /* En mode séquence, seul le geste en cours s'explique : les deux autres
     restent lisibles en titre, sans leur phrase. */
  html.gsap-ready .craft__step p {
    opacity: 0;
    transform: translateY(0.4rem);
  }

  html.gsap-ready .craft__step.is-active p {
    opacity: 1;
    transform: none;
  }

  html.gsap-ready .craft__stage {
    /* bloc (et non grille) : sinon le plan de travail s'étire sur toute la
       hauteur de la section et le sticky n'a plus rien à épingler */
    display: block;
    height: 250svh;
    padding-inline: 0;
  }

  html.gsap-ready .craft__sticky {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);
    align-items: center;
    height: 100svh;
    padding-inline: var(--pad);
  }

  html.gsap-ready .craft__deck {
    /* le plan de travail prend la hauteur de l'écran : c'est le sujet */
    aspect-ratio: auto;
    height: min(72svh, 42rem);
  }

  html.gsap-ready .craft__frame {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
  }

  html.gsap-ready .craft__frame.is-active {
    opacity: 1;
  }

  html.gsap-ready .craft__frame.is-active img {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }

  html.gsap-ready .craft__frame img {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft__frame.is-active::after {
    animation: none;
  }
}

/* --- 19 quater. Matières : accordéon horizontal --------------------------- */

.materials {
  padding: clamp(4rem, 10vh, 8rem) 0;
  border-top: 1px solid var(--line-soft);
}

.materials__head {
  display: grid;
  gap: 1.25rem;
  max-width: 62rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.materials__head .lead {
  max-width: 46rem;
}

.materials__list {
  display: flex;
  gap: clamp(0.6rem, 1vw, 1rem);
  padding: 0 var(--pad);
  margin: 0;
  list-style: none;
}

.material {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4.1;
  overflow: hidden;
  background: var(--black-2);
  transition: flex-grow 0.9s var(--ease-out);
}

.material img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.7s var(--ease), transform 1.3s var(--ease-out);
}

.material::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.94) 0%, rgba(12, 12, 12, 0.42) 46%, rgba(12, 12, 12, 0.06) 100%);
}

.material__index,
.material h3,
.material p {
  position: absolute;
  z-index: 2;
}

.material__index {
  top: 1.25rem;
  left: 1.4rem;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: var(--gold);
}

.material h3 {
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.35rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.7vw, 1.7rem);
  font-weight: 400;
  transition: bottom 0.7s var(--ease);
}

.material p {
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.35rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(242, 241, 237, 0.78);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

/* au survol, la carte ouverte prend la place et la matière se révèle */
.materials__list:hover .material {
  flex-grow: 0.86;
}

.materials__list .material:hover,
.materials__list .material:focus-within {
  flex-grow: 2.7;
}

.material:hover img,
.material:focus-within img {
  opacity: 0.92;
  transform: scale(1.04);
}

.material:hover h3,
.material:focus-within h3 {
  bottom: 6.6rem;
}

.material:hover p,
.material:focus-within p {
  opacity: 1;
  transform: none;
}

/* --- 19 quinquies. Méthode : étapes face à l'introduction ----------------- */

.process {
  padding: clamp(4rem, 10vh, 9rem) 0;
  border-top: 1px solid var(--line-soft);
}

.process__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.process__intro {
  position: sticky;
  top: clamp(6rem, 18vh, 11rem);
  display: grid;
  gap: 1.25rem;
}

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

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.6rem, 4vh, 2.8rem) 0;
  border-top: 1px solid var(--line-soft);
  /* sans JavaScript, aucune étape ne serait « activée » : on ne grise donc
     les étapes que lorsque la chorégraphie est disponible */
  opacity: 1;
  transition: opacity 0.7s var(--ease);
}

html.gsap-ready .step {
  opacity: 0.5;
}

.step:last-child {
  border-bottom: 1px solid var(--line-soft);
}

html.gsap-ready .step.is-active {
  opacity: 1;
}

.step__index {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1;
  color: rgba(242, 241, 237, 0.3);
  transition: color 0.6s var(--ease);
}

html.gsap-ready .step.is-active .step__index {
  color: var(--gold);
}

.step__body h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 400;
}

.step__body p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
}

/* --- 19 sexies. L'atelier en chiffres ------------------------------------- */

.figures {
  padding: clamp(3rem, 8vh, 6rem) 0;
  border-top: 1px solid var(--line-soft);
}

.figures__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.figure-stat {
  display: grid;
  gap: 0.6rem;
}

.figure-stat strong {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
}

.figure-stat > span {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- 19 septies. La bande claire -----------------------------------------
   Une seule section claire du site : « L'ordinaire s'arrête ici ». La rupture
   de l'ordinaire devient littérale — c'est le temps de respiration de la page. */

.ordinary--clair {
  background: var(--white);
  color: var(--black);
  border-top: 0;
  /* le mot fantôme de la bande claire passe sous l'en-tête : on lui laisse
     la hauteur de l'en-tête pour qu'il ne s'y accroche pas */
  padding-top: clamp(7rem, 16vh, 12rem);
}

.ordinary--clair .h-section,
.ordinary--clair .h-display {
  color: var(--black);
}

.ordinary--clair .lead {
  color: rgba(12, 12, 12, 0.72);
}

.ordinary--clair .ordinary__marquee {
  opacity: 0.8;
}

.ordinary--clair .ordinary__marquee .marquee__track > span {
  -webkit-text-stroke: 1.2px rgba(12, 12, 12, 0.48);
}

/* Sur la bande claire, le mot italique du bandeau doit passer à l'encre :
   en gris clair il disparaissait sur le fond ivoire. */
.ordinary--clair .ordinary__marquee .marquee__track > span i {
  color: rgba(12, 12, 12, 0.42);
}

.ordinary--clair .ordinary__head {
  margin-top: clamp(0.75rem, 2vh, 1.75rem);
}

.ordinary--clair .rail__item {
  background: var(--black-2);
}

/* --- 19 octies. Micro-interactions sur les visuels ----------------------- */

.rail__item img,
.manifesto__media img,
.panel__media img {
  transition: transform 1.3s var(--ease-out), filter 0.8s var(--ease);
}

.rail__item:hover img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* --- 19 nonies. Une composition par section ------------------------------
   Le même volet image/texte répété d'un bout à l'autre fait un site qui se
   lit comme un gabarit. Chaque section prend donc sa propre composition :
   volet classique, volet inversé, bande pleine largeur, fiche. */

/* Bande pleine largeur : le visuel occupe l'écran, le texte se pose dessus. */
.band {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(86svh, 52rem);
  overflow: hidden;
  background: var(--black-2);
  border-top: 1px solid var(--line-soft);
}

.band__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transform: scale(1.02);
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 12, 12, 0.95) 3%,
    rgba(12, 12, 12, 0.62) 38%,
    rgba(12, 12, 12, 0.16) 76%,
    rgba(12, 12, 12, 0.08) 100%
  );
  pointer-events: none;
}

.band__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-block: clamp(3.5rem, 10vh, 7rem);
}

.band__copy .h-section {
  max-width: 24ch;
}

.band__copy .lead {
  max-width: 38rem;
  color: rgba(242, 241, 237, 0.78);
}

/* Volet inversé (intention) : le texte passe devant, le visuel respire en
   portrait. */
.panel:nth-child(2) .panel__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
}

.panel:nth-child(2) .panel__media {
  order: 2;
  aspect-ratio: 3 / 4;
}

.panel:nth-child(2) .panel__copy {
  order: 1;
}

/* Fiche (cohérence) : la bande visuelle passe au-dessus, la copie se range
   en deux colonnes, l'idée à gauche et sa définition à droite. */
.panel:nth-child(3) .panel__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}

.panel:nth-child(3) .panel__media {
  aspect-ratio: 21 / 9;
}

.panel:nth-child(3) .panel__copy {
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-content: start;
}

.panel:nth-child(3) .panel__copy h3 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.panel:nth-child(3) .panel__copy p,
.panel:nth-child(3) .panel__copy .btn-link {
  grid-column: 2;
}

/* Stock : le volet s'inverse (visuel à droite) pour ne pas répéter le
   manifeste juste au-dessus. */
#stock .manifesto__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
}

#stock .manifesto__media {
  order: 2;
  aspect-ratio: 4 / 3;
}

#stock .manifesto__copy {
  order: 1;
}

/* L'atelier en chiffres : des filets verticaux plutôt que quatre blocs
   posés côte à côte. */
.figure-stat {
  padding-left: clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--line-soft);
}

/* --- 20. Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
  /* la méthode passe en un seul bloc */
  .process__wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  /* une colonne pour tous les volets, quelle que soit leur composition */
  .panel:nth-child(2) .panel__grid,
  .panel:nth-child(3) .panel__grid,
  #stock .manifesto__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel:nth-child(2) .panel__media {
    order: 0;
    aspect-ratio: 4 / 3;
  }

  .panel:nth-child(2) .panel__copy {
    order: 0;
  }

  .panel:nth-child(3) .panel__media {
    aspect-ratio: 16 / 9;
  }

  .panel:nth-child(3) .panel__copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel:nth-child(3) .panel__copy h3 {
    grid-column: 1;
    grid-row: auto;
  }

  .panel:nth-child(3) .panel__copy p,
  .panel:nth-child(3) .panel__copy .btn-link {
    grid-column: 1;
  }

  #stock .manifesto__media,
  #stock .manifesto__copy {
    order: 0;
  }

  .process__intro {
    position: static;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }

  .contact__grid,
  .manifesto__grid,
  .services__grid,
  .panel__grid {
    grid-template-columns: 1fr;
  }

  .services__intro {
    position: static;
  }

  .manifesto__media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 4.5rem;
  }

  /* la bande garde sa respiration sans manger tout l'écran */
  .band {
    min-height: 68svh;
  }

  .band__copy {
    gap: 1.15rem;
    padding-block: 3rem 3.5rem;
  }

  .craft__step h3 {
    font-size: 1.35rem;
  }

  /* la matière devient un rail horizontal */

  .materials__list {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  .materials__list::-webkit-scrollbar {
    display: none;
  }

  .material {
    flex: 0 0 74vw;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 3.5rem 1.4rem 1.35rem;
  }

  .material p {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
  }

  .material h3,
  .material:hover h3,
  .material:focus-within h3 {
    position: relative;
    inset: auto;
  }

  .materials__list .material,
  .materials__list .material:hover,
  .materials__list .material:focus-within {
    flex-grow: 0;
  }

  .figures__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .gallery__item--portrait {
    grid-column: span 12;
  }

  .gallery__item--half {
    grid-column: span 6;
  }

  .gallery__item--wide {
    grid-column: span 12;
  }

  .header {
    grid-template-columns: auto 1fr auto;
    padding: 1rem var(--pad);
  }

  .header__socials {
    gap: 0.6rem;
  }

  .header__socials a {
    width: 1.6rem;
    height: 1.6rem;
  }

  .header__nav-label {
    display: none;
  }

  .header__logo .logo-mark {
    width: 1.1rem;
    height: 1.36rem;
  }

  .header__logo .logo-word {
    font-size: 0.6rem;
    letter-spacing: 0.42em;
  }

  .hero {
    height: 400svh;
  }

  .hero__inner {
    padding-bottom: 2.5rem;
  }

  .hero__statement {
    font-size: clamp(1.35rem, 5.4vw, 2rem);
  }

  .marquee__track > span {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }

  .ordinary__marquee .marquee__track > span {
    font-size: clamp(3.4rem, 20vw, 7rem);
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    justify-content: flex-start;
  }

  .footer__credit img {
    width: 6.25rem;
  }

  .menu__list a {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }


  .panel {
    position: relative;
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Mouvement réduit : l'intro et la séquence du carré ne se jouent pas, et
     les deux messages du hero sont simplement empilés l'un sous l'autre —
     aucune superposition, aucun texte masqué. */
  html.is-intro .hero__title-block,
  html.is-intro .hero__foot {
    opacity: 1;
  }

  .hero__center {
    gap: clamp(1.75rem, 5vh, 3rem);
  }

  .hero__beat,
  .hero__title-block {
    position: static;
    transform: none;
    opacity: 1;
  }

  .hero__beat {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
  }

  /* la phrase reste un appui, pas un second titre : elle cède le poids
     visuel au titre pour que la composition respire */
  .hero__beat .hero__statement {
    font-size: clamp(1.3rem, 3vw, 2.2rem);
    opacity: 0.86;
  }

  .hero__statement .word {
    opacity: 1;
  }

  .hero {
    height: auto;
  }

  .hero__sticky {
    position: relative;
    height: 100svh;
  }

  .hero__title-block {
    opacity: 1;
  }

  /* la séquence d'ouverture de la vidéo 2 est un effet de défilement :
     elle ne se joue pas, la page se contente du rush et de la phrase */
  .hero__reveal-texture,
  .hero__reveal-frame {
    display: none;
  }

  /* la vidéo 0 ne se joue pas : le hero se contente de son image fixe */
  .hero__intro-frames {
    display: none;
  }

  .panel {
    position: relative;
  }
}