/* ══════════════════════════════════════
   STUDIO NOVA — landing
   Couches : decor / media / content / ui  (voir ARCHITECTURE.md)
   1. Intro pilotée au scroll (repris d'intro.html) : recul de caméra -> planète en rotation
      -> portfolio ; les textes du hero et de la trajectoire apparaissent par-dessus.
   2. Navigateur doré.   3. Scène finale : lever de soleil derrière l'horizon.
   ══════════════════════════════════════ */

/* ── Polices : hébergées dans fonts/ (aucun appel à Google Fonts) ── */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-400.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/lora-500.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/mulish-400.woff2') format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/mulish-500.woff2') format('woff2'); }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/great-vibes-400.woff2') format('woff2'); }

/* ── Tokens ── */
:root {
  --indigo: #242880;       /* Indigo Nova */
  --or: #d4af37;           /* Or Nova */
  --blanc: #f5f1e8;        /* Blanc cassé */
  --creme: #e0d4bf;        /* Crème (DA) — textes secondaires */
  --nuit: #03050f;         /* bleu nuit très profond : fonds spatiaux (bords des vidéos) */
  --dim: #8a8299;          /* libellés discrets (repris du portfolio) */

  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;   /* décoratif : quelques mots seulement */

  --gutter: clamp(24px, 6vw, 96px);
  --edge: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)));  /* bord du texte de .container */
  --header-h: 84px;

  --s: 1;                  /* échelle du cadre vidéo (px écran par px vidéo 1920x1080), calculée en JS */
  --planet: 0.9;           /* taille de la planète en fin d'intro : le cadre recule jusque-là pendant l'intro (js/intro-scroll.js) */
  --zoom: 1;               /* recul du cadre, de 1 à --planet, calculé en JS */
  --R: calc(256px * var(--s) * var(--planet));   /* rayon de la planète en fin d'intro */
  --carousel-scale: 1;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-gutter: stable;   /* la page ne bouge pas quand le défilement est figé (pause, fiche projet) */
  -webkit-text-size-adjust: 100%;
}

/* arrêt sur un moment clé (planète, navigateur doré : js/arret.js) : le défilement est figé, élan compris */
html.arret { overflow: hidden; }

body {
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--or);
  color: var(--nuit);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 4px;
}

/* ── Couches ── */
.scene { position: relative; isolation: isolate; }
.layer--decor { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

.decor--stars {
  background-color: var(--nuit);
  background-image: url('../images/landing/fond-etoile-1774.webp');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* après l'intro, le ciel du navigateur (z-index -2) rejoint le plan de la page : le fil
   d'Ariane (-1) passe entre le ciel et les textes, comme sur l'ancien site. La scène finale
   garde ses couches : son arrivée du fil est dessinée dans la scène (.ariane-arrivee). */
.scene--navigateur { isolation: auto; }

/* ── Fil d'Ariane (js/ariane.js) : filament d'or, petite étoile ; poussière d'or sur ordinateur.
      Il part de derrière la planète (.ariane-depart, dans l'intro) et continue dans la page
      sous l'intro (.ariane) : chaque partie est coupée à la fin de l'intro, elles se raccordent. ── */
.ariane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}

.ariane__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* au-dessus de la vidéo, sous les textes et la planète cliquable ; le disque de la planète le
   cache (même rayon --R que la planète en fin d'intro). Visible quand la planète tourne. */
.ariane-depart {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--R) - 1px), #000 calc(var(--R) + 1px));
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--R) - 1px), #000 calc(var(--R) + 1px));
}

.intro[data-state="PLANET_IDLE"] .ariane-depart { opacity: 1; transition-duration: 1.2s; }
.intro:has(.folder-card.is-open) .ariane-depart { opacity: 0; transition-duration: 0.4s; }   /* portfolio ouvert */

.ariane-depart__particules { position: absolute; top: 0; left: 0; }

.ariane-particules {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/* arrivée, dans la scène finale : au-dessus de la vidéo et de son voile, sous les textes. Le fil
   passe derrière le soleil : en fusion « screen », la lumière l'absorbe, et il s'efface dans la
   lueur (ellipse de 150 x 48 px de la vidéo autour du point lumineux, à l'échelle --sun-s). */
.ariane-arrivee {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse calc(150px * var(--sun-s, 1)) calc(48px * var(--sun-s, 1)) at var(--sun-x) var(--sun-y),
                                      transparent 40%, rgba(0, 0, 0, 0.6) 75%, #000 100%);
  mask-image: radial-gradient(ellipse calc(150px * var(--sun-s, 1)) calc(48px * var(--sun-s, 1)) at var(--sun-x) var(--sun-y),
                              transparent 40%, rgba(0, 0, 0, 0.6) 75%, #000 100%);
}

.ariane-arrivee__particules { position: absolute; top: 0; left: 0; }

/* ── Typographie ── */
.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw + 1rem, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--blanc);
  text-wrap: balance;
}

.text-body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.08rem);
  line-height: 1.8;
  color: var(--creme);
}
.text-center { text-align: center; }
.text-blanc  { color: var(--blanc); }
.text-creme  { color: var(--creme); }

/* ── Bouton doré ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  min-height: 52px;
  padding: 0.95em 1.9em;
  border: 1px solid var(--or);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn--gold { background: var(--or); color: var(--nuit); }

.btn--gold:hover {
  background: transparent;
  color: var(--or);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.18);
}

.btn__arrow { transition: transform 0.3s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn[aria-disabled="true"] { cursor: default; }

/* ── Bouton de verre doré brillant (validé dans labo/boutons.html, « Verre brillant ») ──
   Verre dépoli légèrement doré ; une lumière d'or fait sans cesse le tour de la tranche, un halo
   la suit sous le verre, un reflet glisse sur le texte ; ombre dorée lumineuse ; il bascule à
   l'appui. D'après les composants « GlassButton » et « ShinyButton » (shadcn), portés en CSS.
     <span class="bouton-verre-wrap">
       <a class="bouton-verre"><span class="bouton-verre__texte">
         <span class="bouton-verre__libelle">…</span> <span class="btn__arrow">→</span></span></a>
       <span class="bouton-verre__ombre"></span>
     </span>
   La même matière habille les cartes du carrousel (.carte-verre, plus bas). */
@property --verre-angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --verre-angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

@keyframes verre-tour { from { --verre-angle-1: 0deg; } to { --verre-angle-1: 360deg; } }
@keyframes verre-reflet { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* Ces reflets tournent sur le fil principal du navigateur : chaque image redessine le bouton,
   même caché. Ils s'arrêtent donc quand on ne les voit pas : hors de l'écran (.verre-pause, posé
   par js/main.js), cartes du carrousel fermé, bandeau du portfolio masqué, bouton d'un texte animé
   pas encore apparu ou déjà parti. Sans eux, l'intro passait
   de ~15 à ~55 images/s sur un téléphone simulé. */
.verre-pause::before, .verre-pause::after,
.verre-pause *, .verre-pause *::before, .verre-pause *::after,
.folder-card:not(.is-open) .carte-verre::after,
.scene5__after:not(.is-visible) .bouton-verre-wrap *,
.scene5__after:not(.is-visible) .bouton-verre-wrap *::before,
.scene5__after:not(.is-visible) .bouton-verre-wrap *::after,
[data-reveal-group]:not(.is-revealed) .bouton-verre-wrap *,
[data-reveal-group]:not(.is-revealed) .bouton-verre-wrap *::before,
[data-reveal-group]:not(.is-revealed) .bouton-verre-wrap *::after,
[data-reveal-group].is-leaving .bouton-verre-wrap *,
[data-reveal-group].is-leaving .bouton-verre-wrap *::before,
[data-reveal-group].is-leaving .bouton-verre-wrap *::after { animation-play-state: paused; }

.bouton-verre-wrap {
  --anim-time: 0.4s;
  --anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --border-width: clamp(1px, 0.0625em, 4px);
  --tour: 3.6s;
  position: relative;
  z-index: 2;
  display: inline-block;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  transform-style: preserve-3d;
  transition: transform var(--anim-time) var(--anim-ease);
}

.bouton-verre-wrap:has(.bouton-verre:active) { transform: rotateX(25deg); }

.bouton-verre {
  position: relative;
  isolation: isolate;
  display: inline-block;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(-75deg, rgba(212, 175, 55, 0.07), rgba(245, 241, 232, 0.17), rgba(212, 175, 55, 0.07));
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  box-shadow:
    inset 0 0.125em 0.125em rgba(245, 241, 232, 0.1),
    inset 0 -0.125em 0.125em rgba(3, 5, 15, 0.5),
    0 0.25em 0.125em -0.125em rgba(212, 175, 55, 0.4),
    inset 0 0 0.1em 0.25em rgba(245, 241, 232, 0.05),
    0 0 1.4em rgba(212, 175, 55, 0.2);
  transition: all var(--anim-time) var(--anim-ease);
}

.bouton-verre:hover {
  -webkit-backdrop-filter: blur(0.01em);
  backdrop-filter: blur(0.01em);
  box-shadow:
    inset 0 0.125em 0.125em rgba(245, 241, 232, 0.12),
    inset 0 -0.125em 0.125em rgba(3, 5, 15, 0.5),
    0 0.15em 0.05em -0.1em rgba(212, 175, 55, 0.5),
    inset 0 0 0.05em 0.1em rgba(245, 241, 232, 0.12),
    0 0 2em rgba(212, 175, 55, 0.38);
  transform: scale(0.975);
}

.bouton-verre[aria-disabled="true"] { cursor: default; }

/* tranche : une lumière d'or qui tourne, sur un filet d'or léger */
.bouton-verre::after {
  content: '';
  position: absolute;
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  z-index: 1;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  padding: var(--border-width);
  box-sizing: border-box;
  border-radius: 9999px;
  background:
    conic-gradient(from var(--verre-angle-1) at 50% 50%,
      rgba(240, 212, 130, 0.3) 0%, rgba(240, 212, 130, 0.3) 58%,
      var(--or) 70%, #fff1c9 76%, var(--or) 82%,
      rgba(240, 212, 130, 0.3) 94%),
    linear-gradient(rgba(245, 241, 232, 0.18), rgba(245, 241, 232, 0.18));
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(245, 241, 232, 0.2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: verre-tour var(--tour) linear infinite;
}

/* halo doré qui suit la lumière, sous le verre */
.bouton-verre::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--verre-angle-1), transparent 0% 62%, rgba(212, 175, 55, 0.38) 76%, transparent 90%);
  filter: blur(8px);
  pointer-events: none;
  animation: verre-tour var(--tour) linear infinite;
}

.bouton-verre__texte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-height: 52px;
  padding: 0.95em 1.9em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(245, 241, 232, 0.94);
  text-shadow: 0 0.06em 0.12em rgba(3, 5, 15, 0.4);
  user-select: none;
  transition: all var(--anim-time) var(--anim-ease);
}

.bouton-verre:hover .bouton-verre__texte { text-shadow: 0.025em 0.025em 0.05em rgba(3, 5, 15, 0.3); }

.bouton-verre__texte .btn__arrow { color: var(--or); transition: transform 0.3s ease; }
.bouton-verre:hover .btn__arrow { transform: translateX(4px); }

/* reflet qui glisse sur le verre au survol */
.bouton-verre__texte::after {
  content: '';
  position: absolute;
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  z-index: 3;
  display: block;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  box-sizing: border-box;
  border-radius: 9999px;
  background: linear-gradient(var(--verre-angle-2), transparent 0%, rgba(255, 244, 214, 0.4) 40% 50%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  overflow: clip;
  transition: background-position calc(var(--anim-time) * 1.25) var(--anim-ease), --verre-angle-2 calc(var(--anim-time) * 1.25) var(--anim-ease);
}

.bouton-verre:hover .bouton-verre__texte::after { background-position: 25%; }
.bouton-verre:active .bouton-verre__texte::after { --verre-angle-2: -15deg; background-position: 50% 15%; }

/* reflet qui glisse sur le texte (son ombre est retirée : elle passerait par-dessus le dégradé) */
.bouton-verre__libelle {
  background: linear-gradient(110deg, rgba(245, 241, 232, 0.94) 40%, #fff6dc 50%, rgba(245, 241, 232, 0.94) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: verre-reflet var(--tour) linear infinite;
}

/* ombre dorée : un anneau d'or flouté décalé sous le bouton, et une lueur au sol */
.bouton-verre__ombre {
  --shadow-cutoff-fix: 2em;
  position: absolute;
  top: calc(0% - var(--shadow-cutoff-fix) / 2);
  left: calc(0% - var(--shadow-cutoff-fix) / 2);
  z-index: -1;
  width: calc(100% + var(--shadow-cutoff-fix));
  height: calc(100% + var(--shadow-cutoff-fix));
  border-radius: 9999px;
  filter: blur(clamp(2px, 0.125em, 12px));
  pointer-events: none;
  transition: filter var(--anim-time) var(--anim-ease);
}

.bouton-verre__ombre::after {
  content: '';
  position: absolute;
  top: calc(var(--shadow-cutoff-fix) - 0.5em);
  left: calc(var(--shadow-cutoff-fix) - 0.875em);
  width: calc(100% - var(--shadow-cutoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cutoff-fix) - 0.25em);
  padding: 0.16em;
  box-sizing: border-box;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(240, 212, 130, 0.75), rgba(212, 175, 55, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: all var(--anim-time) var(--anim-ease);
}

.bouton-verre__ombre::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 62%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0));
  filter: blur(6px);
  opacity: 0.75;
  transition: opacity var(--anim-time) var(--anim-ease);
}

.bouton-verre-wrap:has(.bouton-verre:hover) .bouton-verre__ombre { filter: blur(clamp(2px, 0.0625em, 6px)); }
.bouton-verre-wrap:has(.bouton-verre:hover) .bouton-verre__ombre::after { top: calc(var(--shadow-cutoff-fix) - 0.875em); }
.bouton-verre-wrap:has(.bouton-verre:hover) .bouton-verre__ombre::before { opacity: 1; }

.bouton-verre-wrap:has(.bouton-verre:active) .bouton-verre__ombre { filter: blur(clamp(2px, 0.125em, 12px)); }
.bouton-verre-wrap:has(.bouton-verre:active) .bouton-verre__ombre::after { top: calc(var(--shadow-cutoff-fix) - 0.5em); opacity: 0.75; }

/* écrans tactiles : le reflet du verre reste à sa place */
@media (hover: none) and (pointer: coarse) {
  .bouton-verre .bouton-verre__texte::after,
  .bouton-verre:active .bouton-verre__texte::after { --verre-angle-2: -45deg; }
}

/* petite taille (fiche projet : « Fermer », « Projet suivant ») */
.bouton-verre-wrap--petit { font-size: 0.78rem; }
.bouton-verre-wrap--petit .bouton-verre__texte { min-height: 40px; padding: 0.7em 1.4em; }

/* Bleu nuit (boutons de la fiche projet) : le même verre brillant, teinté d'indigo Nova ; la
   lumière qui fait le tour, son halo et l'ombre sont bleus au lieu d'être dorés. */
.bouton-verre-wrap--nuit .bouton-verre {
  background: linear-gradient(-75deg, rgba(8, 10, 40, 0.82), rgba(26, 30, 96, 0.7), rgba(8, 10, 40, 0.82));
  box-shadow:
    inset 0 0.125em 0.125em rgba(170, 180, 255, 0.08),
    inset 0 -0.125em 0.125em rgba(3, 5, 15, 0.6),
    0 0.25em 0.125em -0.125em rgba(36, 40, 128, 0.55),
    inset 0 0 0.1em 0.25em rgba(170, 180, 255, 0.04),
    0 0 1.4em rgba(36, 40, 128, 0.45);
}

.bouton-verre-wrap--nuit .bouton-verre:hover {
  box-shadow:
    inset 0 0.125em 0.125em rgba(170, 180, 255, 0.1),
    inset 0 -0.125em 0.125em rgba(3, 5, 15, 0.6),
    0 0.15em 0.05em -0.1em rgba(44, 50, 160, 0.65),
    inset 0 0 0.05em 0.1em rgba(170, 180, 255, 0.08),
    0 0 2em rgba(44, 50, 160, 0.6);
}

.bouton-verre-wrap--nuit .bouton-verre::after {
  background:
    conic-gradient(from var(--verre-angle-1) at 50% 50%,
      rgba(60, 68, 170, 0.35) 0%, rgba(60, 68, 170, 0.35) 58%,
      #2a3396 70%, #8f99ff 76%, #2a3396 82%,
      rgba(60, 68, 170, 0.35) 94%),
    linear-gradient(rgba(140, 150, 230, 0.1), rgba(140, 150, 230, 0.1));
}

.bouton-verre-wrap--nuit .bouton-verre::before {
  background: conic-gradient(from var(--verre-angle-1), transparent 0% 62%, rgba(36, 44, 150, 0.5) 76%, transparent 90%);
}

.bouton-verre-wrap--nuit .bouton-verre__libelle {
  background-image: linear-gradient(110deg, rgba(245, 241, 232, 0.94) 40%, #cdd2f7 50%, rgba(245, 241, 232, 0.94) 60%);
}

.bouton-verre-wrap--nuit .btn__arrow { color: #8c96f0; }

.bouton-verre-wrap--nuit .bouton-verre__ombre::after {
  background: linear-gradient(180deg, rgba(56, 64, 170, 0.6), rgba(24, 28, 100, 0.4));
}

.bouton-verre-wrap--nuit .bouton-verre__ombre::before {
  background: radial-gradient(closest-side, rgba(36, 40, 140, 0.6), rgba(36, 40, 140, 0));
}

/* ══════════════════════════════════════
   Textes : apparition « lumière d'étoile », disparition « vers la profondeur »
   Les mots sont découpés par js/text-motion.js. Un groupe [data-reveal-group] reçoit
   .is-revealed (apparition) puis .is-leaving (disparition).
   ══════════════════════════════════════ */
.reveal-word { display: inline-block; }

[data-reveal-group] .reveal-word,
[data-reveal-group] [data-reveal-item] {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 0.32em, 0) scale(0.985);
  transition:
    opacity 0.9s var(--ease-out),
    filter 1.2s var(--ease-out),
    transform 1.3s var(--ease-out),
    text-shadow 1.8s ease-out;
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}

/* la lettre s'allume avec un halo, qui s'éteint quand elle se pose */
[data-reveal-group] .reveal-word {
  text-shadow: 0 0 18px rgba(245, 241, 232, 0.75), 0 0 2px rgba(255, 255, 255, 0.9);
}

[data-reveal-group].is-revealed .reveal-word,
[data-reveal-group].is-revealed [data-reveal-item] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

[data-reveal-group].is-revealed .reveal-word {
  text-shadow: 0 0 0 rgba(245, 241, 232, 0), 0 0 0 rgba(255, 255, 255, 0);
}

/* disparition : le texte recule dans la profondeur, comme la caméra */
[data-reveal-group].is-leaving .reveal-word,
[data-reveal-group].is-leaving [data-reveal-item] {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, -0.1em, 0) scale(0.94);
  text-shadow: 0 0 0 rgba(245, 241, 232, 0);
  transition:
    opacity 0.55s ease,
    filter 0.65s ease,
    transform 0.8s var(--ease-out),
    text-shadow 0.3s ease;
  transition-delay: calc((var(--count, 0) - var(--i, 0)) * 16ms);
}

/* ══ En-tête ══ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: linear-gradient(to bottom, rgba(3, 5, 15, 0.78) 0%, rgba(3, 5, 15, 0) 100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: auto; height: 38px; }

.site-nav__list {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  transition: color 0.25s ease;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="true"] { color: var(--blanc); }

.site-nav__link:hover::after,
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle { display: none; }

/* ══════════════════════════════════════
   1. INTRO — vidéo pilotée au scroll (repris d'intro.css)
   ══════════════════════════════════════ */
.intro {
  position: relative;
  /* 300vh pilotent l'intro, puis 100vh où la planète tourne (DWELL), + la hauteur de l'écran */
  height: 500vh;
}

/* cible du lien « Réalisations » : au milieu de la zone où la planète tourne (là où l'aimant de
   js/intro-scroll.js ramène la page) */
.intro__anchor {
  position: absolute;
  top: 350vh;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: calc(-1 * var(--header-h));   /* annule la marge de l'en-tête : on arrive bien après la fin de l'intro */
}

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

/* cadre 16:9 commun aux deux vidéos : couvre l'écran, sauf sur écran portrait où il est
   réduit pour que la planète et son anneau restent entiers (voir --s). Pendant l'intro il
   recule un peu plus que la caméra (--zoom, de 1 à --planet) ; ses bords, alors à l'écran, se
   fondent dans le bleu nuit de la page (--fade : 0 au début, 6 % en fin d'intro). */
.intro__frame {
  --fade: calc((1 - var(--zoom)) * 60%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1920px * var(--s));
  height: calc(1080px * var(--s));
  transform: translate(-50%, -50%) scale(var(--zoom));
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-composite: intersect;
}

.intro__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--nuit);
}

.intro__idle { opacity: 0; transition: opacity 0.25s ease; }
.intro__idle.is-on { opacity: 1; transition: none; }

/* lisibilité des textes à gauche + fondu vers la section suivante */
.intro__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 5, 15, 0.5) 0%, rgba(3, 5, 15, 0.16) 36%, rgba(3, 5, 15, 0) 56%),
    linear-gradient(to bottom, rgba(3, 5, 15, 0) 84%, var(--nuit) 100%);
}

.planet-dim {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1400px * var(--s));
  height: calc(760px * var(--s));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 5, 15, 0.95) 55%, rgba(3, 5, 15, 0) 100%);
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}

/* ── Textes posés sur l'intro ── */
.intro-copy { position: absolute; z-index: 4; }

/* hero : à gauche, la planète entre par l'angle inférieur droit */
.intro-copy--hero {
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-44%);
}

.hero__title {
  max-width: 13.5em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 3.6vw + 1rem, 5rem);
  line-height: 1.07;
  letter-spacing: -0.012em;
  color: var(--blanc);
}

.hero__line { display: block; text-wrap: balance; }

/* sous-titre : même style que l'ancienne deuxième ligne du titre, un peu plus petit (il est plus long) */
.hero__subtext {
  max-width: 30em;
  margin-top: 0.9em;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 0.9vw + 0.8rem, 1.6rem);
  line-height: 1.45;
  color: var(--creme);
  text-wrap: pretty;
}

.hero__actions { margin-top: clamp(32px, 5vh, 52px); }

/* trajectoire : titre en haut à gauche (l'anneau monte de la gauche vers la droite et laisse
   ce coin libre) */
.intro-copy--title {
  left: var(--edge);
  top: calc(var(--header-h) + 7vh);
  width: min(30rem, calc(50vw - 0.72 * var(--R) - var(--edge) - 24px));   /* s'arrête avant le limbe haut-gauche */
}

.intro-copy--title .section-title {
  font-size: clamp(1.7rem, 1.6vw + 0.9rem, 2.45rem);   /* « Votre message existe. » tient sur une ligne */
  line-height: 1.16;
}

.intro-copy--title .section-subtitle {
  margin-top: 1em;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.08rem);
  line-height: 1.6;
  color: var(--creme);
  text-wrap: pretty;
}

/* ── Étapes : une constellation horizontale — chaque étoile s'allume, de gauche à droite,
      et la trajectoire se trace jusqu'à la suivante.
      Tout est piloté par --t, la progression de la vidéo du navigateur (0 -> 1, mise à jour
      par js/browser-video.js, un peu plus vite que la vidéo) : la dernière étape est nette
      peu avant la dernière image de la vidéo.
      Étape k : apparaît de --a à --a + 0,12 ; sa trajectoire part à --b et atteint l'étoile
      suivante au moment où celle-ci s'allume. Le texte de chaque étape part avec son étoile
      mais se pose plus vite qu'elle (--texte : +10 %). ── */
.process {
  --gap: clamp(16px, 3vw, 48px);
  --t: 0;
  --texte: 1.1;            /* vitesse du texte par rapport aux étoiles et aux trajectoires */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 30px;
  list-style: none;
  text-align: center;
}

.process__step {
  --p: clamp(0, (var(--t) - var(--a)) / 0.12, 1);
  --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));           /* progression adoucie : étoile et trajectoire */
  --pt: clamp(0, (var(--t) - var(--a)) / (0.12 / var(--texte)), 1);
  --et: calc(var(--pt) * var(--pt) * (3 - 2 * var(--pt)));       /* … et texte : part avec son étoile, se pose 10 % plus vite */
  position: relative;
  display: grid;
  align-content: start;    /* textes alignés d'une colonne à l'autre, quelle que soit leur longueur */
  justify-items: center;
  gap: 4px;
  padding-top: 28px;
}

/* l'étoile et sa trajectoire, puis le texte, sortent d'un léger flou en se posant */
.process__step::before,
.process__step::after {
  opacity: var(--e);
  filter: blur(calc((1 - var(--e)) * 10px));
  translate: 0 calc((1 - var(--e)) * 0.32em);
}

.process__name,
.process__text {
  opacity: var(--et);
  filter: blur(calc((1 - var(--et)) * 10px));
  transform: translate3d(0, calc((1 - var(--et)) * 0.32em), 0) scale(calc(0.985 + 0.015 * var(--et)));
}

.process__step:nth-child(1) { --a: 0.04; --b: 0.10; }
.process__step:nth-child(2) { --a: 0.32; --b: 0.38; }
.process__step:nth-child(3) { --a: 0.60; --b: 0.66; }
.process__step:nth-child(4) { --a: 0.88; --b: 1; }

/* le texte s'allume avec un halo qui s'éteint en se posant */
.process__name,
.process__text {
  text-shadow: 0 0 calc((1 - var(--et)) * 18px) rgba(245, 241, 232, calc((1 - var(--et)) * 0.75));
}

/* l'étoile */
.process__step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12), 0 0 14px rgba(212, 175, 55, 0.85);
}

/* la trajectoire jusqu'à l'étoile suivante */
.process__step::after {
  content: '';
  position: absolute;
  top: 3px;
  left: calc(50% + 12px);
  width: calc(100% + var(--gap) - 24px);
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.65), rgba(212, 175, 55, 0.25));
  transform: scaleX(clamp(0, (var(--t) - var(--b)) / 0.22, 1));
  transform-origin: left;
}

.process__step:last-child::after { display: none; }

.process__name {
  font-size: min(1.126rem, 1.794vw);   /* −40 % puis +30 % (à l’origine min(1.443rem, 2.3vw)) ; « VISIBILITÉ » garde sa place entre ses voisins sur tablette */
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}

/* ce qui se passe concrètement à l'étape, en une phrase courte ; lignes équilibrées (pas de mot
   seul en fin de phrase) */
.process__text {
  font-family: var(--font-serif);
  font-style: italic;
  text-wrap: balance;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.1rem);
  color: var(--creme);
}

/* ══ Planète cliquable -> portfolio (composant repris de l'ancienne scène 5) ══ */
.planet-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.planet-stage.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

/* le disque de la planète (diamètre 512 px dans la vidéo 1920x1080), centré comme elle */
.planet-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2 * var(--R));
  height: calc(2 * var(--R));
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Indication « click », agrandie (×1,6) autour de la pointe de sa flèche. Sa pointe est un peu
   plus près de la planète qu'avant (top -34 %, left 80 %) pour que le dessin reste sous le menu.
   translate : le dessin (centré à 57 % de l'image, large de 78 %) se décale vers la droite de 15 %
   de sa largeur à ×2 : 0,4 × (0,57 − 0,2) + 0,3 × 0,78 ≈ 0,38 × --w.
   --d : sur écran bas, le dessin descend juste assez pour rester sous le menu (son haut est à
   0,065 × sa largeur au-dessus de l'image) et glisse le long du bord de la planète. */
.planet-click-hint {
  --w: max(64px, calc(223px * var(--s) * var(--planet)));
  --d: max(0px, calc(var(--header-h) + 8px + 0.065 * var(--w) - 50svh + 1.44 * var(--R)));
  position: absolute;
  top: calc(-22% + var(--d));
  left: calc(72% + 1.23 * var(--d));
  width: var(--w);
  height: auto;
  scale: 1.6;
  translate: calc(0.38 * var(--w)) 0;
  transform-origin: 20% 79%;
  display: block;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.75;
  transition: opacity 500ms ease;
}

.planet-click-hint.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

.planet-click-hint img { display: block; width: 100%; height: auto; }

/* libellé de l'indication : la flèche part de lui. Sa taille suit celle du dessin (--w) ; sa
   couleur est celle de la flèche dessinée. Il commence juste après le bout de la queue (x 59 %,
   y 32-35 % de l'image) : sinon la queue entrait dans le « E » d'« Explorer ». */
.planet-click-hint__libelle {
  position: absolute;
  left: 63%;
  top: 40%;
  transform: translate(0, -50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: max(9px, calc(0.07 * var(--w)));
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: #fbd354;
}

.folder-card {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 200ms ease, box-shadow 300ms ease;
}

.folder-card:active { transform: scale(0.97); }

/* clavier et lecteurs d'écran : bouton sous le disque, qui ouvre et ferme le carrousel ; la souris
   passe par .folder-card, juste au-dessus. Même contour de focus que le disque (labo/) */
.planet-toggle {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

.folder-card:focus-visible,
.planet-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.85), 0 0 32px rgba(212, 175, 55, 0.35);
}

.folder-wrapper {
  position: absolute;
  inset: 0;
  perspective: 770px;
  transform-style: preserve-3d;
  scale: var(--carousel-scale);
}

.folder-projects {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 20;
}

.folder-project-card {
  position: absolute;
  width: 400px;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.9);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4), 0 20px 60px rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  backface-visibility: hidden;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.folder-project-card img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(1.15) contrast(1.1);
}

.folder-project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

/* Carte en verre doré brillant (validée dans labo/portfolio.html, « Verre brillant ») : l'image
   est posée dans un cadre de verre ; une lumière d'or fait sans cesse le tour du cadre, un reflet
   glisse sur l'image au survol, lueur dorée autour. Pas de flou d'arrière-plan : il se rend mal
   dans le carrousel en 3D. Mêmes angles que le bouton de verre (--verre-angle-1/2, plus haut). */
.folder-project-card.carte-verre {
  --border-width: 1.5px;
  padding: 8px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(-75deg, rgba(212, 175, 55, 0.1), rgba(245, 241, 232, 0.2), rgba(212, 175, 55, 0.1));
  box-shadow:
    inset 0 1px 1px rgba(245, 241, 232, 0.18),
    inset 0 -2px 2px rgba(3, 5, 15, 0.4),
    0 0 36px rgba(212, 175, 55, 0.38),
    0 26px 60px -22px rgba(212, 175, 55, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.55);
}

.folder-project-card.carte-verre img { border-radius: 13px; }

.folder-project-card.carte-verre::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-radius: 13px;
  background: linear-gradient(var(--verre-angle-2), transparent 0%, rgba(255, 244, 214, 0.22) 40% 50%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.folder-project-card.carte-verre:hover::before { background-position: 25%; }

/* tranche : remplace le voile sombre de la carte */
.folder-project-card.carte-verre::after {
  inset: 0;
  z-index: 2;
  padding: var(--border-width);
  border-radius: inherit;
  background:
    conic-gradient(from var(--verre-angle-1) at 50% 50%,
      rgba(240, 212, 130, 0.3) 0%, rgba(240, 212, 130, 0.3) 58%,
      var(--or) 70%, #fff1c9 76%, var(--or) 82%,
      rgba(240, 212, 130, 0.3) 94%),
    linear-gradient(rgba(245, 241, 232, 0.18), rgba(245, 241, 232, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: verre-tour 6s linear infinite;
}

.folder-card.is-open .folder-project-card {
  opacity: 1;
  pointer-events: auto;
}

/* carte atteinte au clavier : contour blanc, distinct de sa bordure dorée */
.folder-project-card:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 4px;
}

.folder-title,
.folder-count {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  pointer-events: none;
}

.folder-title {
  top: calc(100% + 14px);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--blanc);
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.folder-card.is-open .folder-title {
  opacity: 1;
  transform: translate(-50%, 4px);
}

.folder-count {
  top: calc(100% + 14px + 1.9rem);
  font-size: 0.85rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 300ms ease 100ms;
}

.folder-card.is-open .folder-count { opacity: 1; }

/* portfolio ouvert : texte en haut, chiffres en bas (le titre et les étapes s'effacent). Fermé, le
   bandeau est aussi masqué (visibility, une fois son fondu fini, comme .planet-stage) : invisible,
   son bouton « Témoignage » ne doit ni recevoir le focus ni être lu par les lecteurs d'écran */
.scene5__after {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 400ms ease 100ms, transform 400ms ease 100ms, visibility 0s linear 500ms;
  pointer-events: none;
}

.scene5__after.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 400ms ease 100ms, transform 400ms ease 100ms;
}

/* Engagements du bas, même principe que le texte du haut : 15 % plus près du bord, plus compacts
   (chiffre plus petit, sans l'interligne du texte courant), devant les cartes avec le même halo */
.scene5__metrics {
  position: absolute;
  left: 50%;
  bottom: calc(5vh * 0.85);
  text-shadow: 0 0 14px rgba(3, 5, 15, 0.95), 0 1px 3px rgba(3, 5, 15, 0.9);
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 92vw;
}

/* Texte du haut, 15 % plus haut qu'avant, devant les cartes : il reste lisible quand une carte
   passe derrière (z-index au-dessus de .planet-wrapper, halo sombre autour des lettres). Le bloc
   laisse passer les clics vers les cartes (pointer-events de .scene5__after). */
.scene5__after { z-index: 3; }

.scene5__copy {
  position: absolute;
  left: 50%;
  top: calc((var(--header-h) + 2vh) * 0.85);
  transform: translateX(-50%);
  width: min(90vw, 860px);
  text-shadow: 0 0 14px rgba(3, 5, 15, 0.95), 0 1px 3px rgba(3, 5, 15, 0.9);
}

/* titre plus petit que les autres titres de section : il ne doit pas descendre sur le carrousel */
.scene5__titre {
  margin-bottom: 0.3em;
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.2rem);
}

.scene5__copy .text-body {
  font-size: clamp(0.88rem, 0.3vw + 0.8rem, 1rem);
  line-height: 1.6;
}

.metric { text-align: center; }

.metric__number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--or);
  margin-bottom: 4px;
}

/* cœur : à la hauteur des chiffres, posé sur la même ligne de base */
.metric__coeur {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.04em;
  fill: currentColor;
}

/* « Témoignage » : bouton de verre bleu nuit, comme « Fermer » de la fiche projet. Il occupe la
   hauteur d'un libellé et déborde vers le bas : le bandeau ne grandit pas, les chiffres restent où
   ils sont. Cliquable seulement quand le bandeau est affiché (.scene5__after laisse passer les clics). */
.metric__bouton {
  display: block;
  width: fit-content;
  margin: 2px auto -18px;
  text-shadow: none;
}

.metric__bouton .bouton-verre__texte { min-height: 34px; padding: 0.55em 1.3em; }

.scene5__after.is-visible .metric__bouton { pointer-events: auto; }

/* en bloc : son interligne est le sien, pas celui (plus grand) du texte courant */
.metric__label {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.fragment {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(6px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
}

.fragment.is-visible {
  opacity: 1;
  transform: translateY(-6px);
  filter: blur(0);
}

/* ══════════════════════════════════════
   Fiche projet (validée dans labo/portfolio.html) — js/fiche-projet.js, contenu js/projets.js
   Fenêtre plein écran (<dialog>) ouverte au clic sur une fenêtre du carrousel : l'image du projet
   à gauche, son récit à droite, sur des panneaux de verre doré ; boutons de verre bleu nuit.
   Les blocs apparaissent l'un après l'autre (--i), comme les textes de la landing.
   ══════════════════════════════════════ */
html.fiche-ouverte { overflow: hidden; }   /* la page ne défile plus derrière la fiche */

/* panneau de verre : la matière du bouton de verre, pour une grande surface */
.verre {
  --border-width: 1px;
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  background: linear-gradient(-75deg, rgba(212, 175, 55, 0.04), rgba(245, 241, 232, 0.08), rgba(212, 175, 55, 0.04));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 1px rgba(245, 241, 232, 0.1),
    inset 0 -2px 2px rgba(3, 5, 15, 0.4),
    0 24px 60px -24px rgba(212, 175, 55, 0.45),
    0 0 70px rgba(212, 175, 55, 0.12);
  transition: box-shadow 0.6s ease;
}

.verre::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--border-width);
  border-radius: inherit;
  background:
    conic-gradient(from var(--verre-angle-1) at 50% 50%,
      rgba(240, 212, 130, 0.85) 0%, transparent 6% 40%, rgba(240, 212, 130, 0.85) 50%, transparent 60% 94%, rgba(240, 212, 130, 0.85) 100%),
    linear-gradient(rgba(245, 241, 232, 0.16), rgba(245, 241, 232, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  transition: --verre-angle-1 1.2s ease;
}

.verre:hover::after { --verre-angle-1: -125deg; }
.verre:hover { box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.12), inset 0 -2px 2px rgba(3, 5, 15, 0.4), 0 24px 60px -20px rgba(212, 175, 55, 0.55), 0 0 90px rgba(212, 175, 55, 0.18); }

/* panneau brillant : une lumière d'or fait le tour de la tranche, un halo doré la suit */
.verre--brillant::after {
  background:
    conic-gradient(from var(--verre-angle-1) at 50% 50%,
      rgba(240, 212, 130, 0.3) 0%, rgba(240, 212, 130, 0.3) 58%,
      var(--or) 70%, #fff1c9 76%, var(--or) 82%,
      rgba(240, 212, 130, 0.3) 94%),
    linear-gradient(rgba(245, 241, 232, 0.18), rgba(245, 241, 232, 0.18));
  animation: verre-tour 6s linear infinite;
}

.verre--brillant::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--verre-angle-1), transparent 0% 62%, rgba(212, 175, 55, 0.45) 76%, transparent 90%);
  filter: blur(14px);
  pointer-events: none;
  animation: verre-tour 6s linear infinite;
}

.projet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blanc);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.projet::backdrop {
  background: rgba(3, 5, 15, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.projet__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  min-height: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: calc(var(--header-h) + 2vh) var(--gutter) 6vh;
}

.projet__media { padding: 10px; }

.projet__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.projet__recit { padding: clamp(24px, 3vw, 44px); }

.projet__eyebrow {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or);
}

.projet__titre { margin-top: 14px; font-size: clamp(1.9rem, 1.4vw + 1.1rem, 2.75rem); }
.projet__resume { margin-top: 18px; }

/* ce que le studio a fait : la constellation des étapes, à la verticale */
.projet__etapes {
  margin-top: clamp(24px, 4vh, 36px);
  list-style: none;
}

.projet__etape {
  position: relative;
  padding-left: 26px;
}

.projet__etape + .projet__etape { margin-top: 14px; }

.projet__etape::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12), 0 0 10px rgba(212, 175, 55, 0.7);
}

/* trajectoire jusqu'à l'étape suivante */
.projet__etape:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: calc(0.62em + 12px);
  bottom: calc(-14px - 0.4em);
  width: 1px;
  background: linear-gradient(rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0.2));
}

.projet__etape-nom {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.projet__etape-texte {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.5;
  color: var(--creme);
}

.projet__resultat {
  margin-top: clamp(24px, 4vh, 36px);
  padding-top: 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
}

.projet__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(28px, 5vh, 44px);
}

/* « Fermer » : dans le coin du panneau du récit ; sur mobile, dans celui de l'image (js) */
.projet__fermer {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.projet__recit:has(> .projet__fermer) .projet__eyebrow { padding-right: 7.5rem; }

/* apparition : chaque bloc sort d'un léger flou, l'un après l'autre */
@keyframes projet-in {
  from { opacity: 0; filter: blur(8px); transform: translate3d(0, 14px, 0); }
}

.projet.is-entering [style*="--i"] {
  animation: projet-in 0.9s var(--ease-out) both;
  animation-delay: calc(var(--i) * 80ms + 60ms);
}

/* tablette et mobile : image au-dessus du récit */
@media (max-width: 900px) {
  .projet__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
  }
}

/* Témoignage (js/temoignage.js) : la fenêtre de la fiche projet, un seul panneau, centré */
.temoignage .projet__inner {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  align-items: center;
}

.temoignage__panneau { margin: 0; }

/* texte justifié ; la césure (langue de la page : fr), là où le navigateur la fait, réduit les
   blancs entre les mots. Sur téléphone, colonne trop étroite : aligné à gauche (plus bas). */
.temoignage__texte {
  margin-top: 18px;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
  line-height: 1.7;
  color: var(--creme);
}

.temoignage__texte p + p { margin-top: 0.9em; }

/* signature : prénom en serif, rôle en petites capitales dorées, sous un filet doré */
.temoignage__auteur {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(22px, 3.5vh, 32px);
  padding-top: 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--blanc);
}

/* photo : ronde, cerclée d'or comme les points des étapes */
.temoignage__photo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px rgba(212, 175, 55, 0.75), 0 0 0 5px rgba(212, 175, 55, 0.1), 0 0 18px rgba(212, 175, 55, 0.35);
}

.temoignage__nom span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

@media (max-width: 900px) {
  .temoignage .projet__inner { align-items: center; }
}

@media (max-width: 560px) {
  .temoignage__texte { text-align: left; }
}

/* ══════════════════════════════════════
   2. PROCESSUS ET NAVIGATEUR DORÉ (sous la planète)
   ══════════════════════════════════════ */
.scene--navigateur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 8vh, 96px);
  min-height: 100vh;
  padding-block: clamp(96px, 14vh, 160px) 10vh;
}

.navigateur__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 8vh, 96px);
}

.navigateur__inner .process { width: 100%; max-width: 1000px; }

/* titre de la section, au-dessus des étapes */
.navigateur__intro {
  max-width: 40rem;
  text-align: center;
}

.navigateur__titre { font-size: clamp(1.36rem, 1.28vw + 0.72rem, 2.32rem); }   /* −20 % (était clamp(1.7rem, 1.6vw + 0.9rem, 2.9rem)) */

/* Flèche des étapes vers le navigateur : un trait de 3 px et une pointe, du même or que les
   trajectoires entre les étapes (.process__step::after), centrée à l'écran. Elle se trace vers le
   bas quand la section apparaît, et sa pointe s'allume au bout. Le trait s'arrête dans le creux
   de la pointe (4 px avant le bas) : il ne dépasse pas. */
.navigateur__fleche {
  --or-trait: rgba(212, 175, 55, 0.65);
  position: relative;
  width: 3px;
  height: clamp(40px, 6vh, 64px);
  margin-block: calc(clamp(48px, 8vh, 96px) * -0.45);
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(212, 175, 55, 0.25), var(--or-trait) calc(100% - 4px), transparent calc(100% - 4px));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease-out) 0.35s;
}

.navigateur__fleche::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--or-trait);
  border-bottom: 3px solid var(--or-trait);
  border-bottom-right-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -2.4px) rotate(45deg);
  transition: opacity 0.4s ease 1s;
}

.is-revealed .navigateur__fleche { transform: scaleY(1); }
.is-revealed .navigateur__fleche::after { opacity: 1; }

.is-leaving .navigateur__fleche,
.is-leaving .navigateur__fleche::after { transition-delay: 0s; transition-duration: 0.4s; }

/* fusion « screen » sur l'élément animé lui-même : le fond noir de l'animation disparaît
   (posée sur l'image, l'animation de flou l'isolerait du ciel étoilé) */
.browser { display: grid; width: min(518px, 69.7vw); }
.browser > * { grid-area: 1 / 1; }

.trajectoire__browser { translate: 0 -10%; mix-blend-mode: screen; }   /* remontée de 10 % de sa hauteur */

.browser__media {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.72) brightness(0.9) contrast(1.12); /* ramène le jaune vers l'Or Nova */
}

.browser__media,
.browser__occlusion canvas {
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 52%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 60% at 50% 52%, #000 72%, transparent 100%);
}

/* silhouette de la vidéo, juste dessous : noire là où la vidéo montre quelque chose (luminosité
   au-delà de 1 à 5 %), blanche sur son fond noir. En « multiply », elle cache ce qui passe
   derrière la vidéo (fil d'Ariane, ciel) et laisse le reste intact. Recopiée par js/browser-video.js. */
.browser__occlusion { translate: 0 -10%; mix-blend-mode: multiply; }

.browser__occlusion canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1) brightness(16.7) contrast(1.5) invert(1);
}

.browser__video { aspect-ratio: 1280 / 854; background: #000; }
.browser__still { display: none; }

/* le navigateur se condense : il arrive d'un peu plus loin, flou, et se met au point */
.scene--navigateur [data-reveal-item] {
  transform: translate3d(0, 4vh, 0) scale(0.94);
  filter: blur(14px);
  transition-duration: 1.4s, 1.8s, 1.8s, 0s;
}

/* ══════════════════════════════════════
   3. SCÈNE FINALE — lever de soleil derrière l'horizon (js/horizon.js)
   La scène se fige (sticky) pendant que le scroll fait lever le soleil, puis reste sur la
   dernière image. --sun-x / --sun-y : position du soleil à l'écran (point (640, 423) de la
   vidéo 1280x720 qui couvre la scène), recalculée par js/horizon.js ; les textes se placent
   au-dessus et le fil d'Ariane s'y pose. --veil : voile du haut, qui fond la scène dans le ciel
   du navigateur pendant qu'elle arrive et s'efface une fois qu'elle est figée.
   ══════════════════════════════════════ */
.scene--horizon {
  --run: 180vh;            /* scroll qui fait lever le soleil (+ la hauteur de l'écran) */
  --sun-x: 50%;
  --sun-y: calc(50% + 0.0875 * max(100svh, 56.25vw));
  --veil: 1;
  height: calc(100vh + var(--run));
  /* le lien « Contact » mène à l'état final : soleil levé, texte et bouton affichés */
  scroll-margin-top: calc(-1 * (var(--header-h) + var(--run)));
}

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

.horizon__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--nuit);
}

.horizon__video,
.horizon__still img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.horizon__still { display: none; }

.horizon__veil {
  position: absolute;
  inset: 0 0 auto 0;
  height: 32%;
  background: linear-gradient(to bottom, var(--nuit) 0%, rgba(3, 5, 15, 0.55) 45%, rgba(3, 5, 15, 0) 100%);
  opacity: var(--veil);
}

/* textes : centrés dans le ciel, entre l'en-tête et l'horizon */
.horizon__content {
  position: absolute;
  inset: var(--header-h) 0 calc(100% - var(--sun-y) + clamp(40px, 9vh, 104px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.horizon__eyebrow {
  margin-right: -0.32em;   /* l'espacement après la dernière lettre décentrerait la ligne */
  margin-bottom: clamp(14px, 2.4vh, 26px);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--or);
}

.horizon__title {
  max-width: 15em;
  font-size: clamp(2.2rem, 2.6vw + 1.1rem, 4.25rem);
  line-height: 1.1;
}

.horizon__actions { margin-top: clamp(28px, 4.8vh, 48px); }

/* ══ Tablette ══ */
@media (max-width: 1024px) {
  .intro-copy--title { width: min(22rem, calc(50vw - var(--R) - var(--edge) - 24px)); }
}

/* ══ Écrans portrait (téléphones, tablettes) : textes au-dessus et au-dessous de la scène ══ */
@media (orientation: portrait) {
  .intro__frame {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  }

  .intro__shade { background: linear-gradient(to bottom, rgba(3, 5, 15, 0) 86%, var(--nuit) 100%); }

  .intro-copy--hero { top: calc(var(--header-h) + 6vh); transform: none; }

  .intro-copy--title {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) + 4vh);
    width: auto;
    text-align: center;
  }


  .scene5__metrics { width: 92vw; flex-wrap: wrap; gap: 10px 28px; }
  /* bandeau sur deux lignes : le bouton « Témoignage » prend sa hauteur, il ne déborde pas sur le « 0 » */
  .metric__bouton { margin-bottom: 0; }
}

/* ══ Mobile ══ */
@media (max-width: 760px) {
  :root { --header-h: 68px; }

  .site-header__logo img { height: 30px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--creme);
    font: 500 0.74rem/1 var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s ease;
  }

  .nav-toggle__icon { position: relative; transform: translateY(-3px); }
  .nav-toggle__icon::before { content: ''; position: absolute; top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon { transform: translateY(0) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(-6px) rotate(-90deg); }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    padding: 12px var(--gutter) 28px;
    background: rgba(10, 12, 42, 0.96);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__link { display: block; padding: 14px 0; font-size: 0.82rem; }
  .site-nav__link::after { display: none; }

  .hero__title { font-size: clamp(2.15rem, 8.6vw, 2.9rem); }
  .hero__subtext { font-size: clamp(1rem, 4.2vw, 1.25rem); }
  .intro-copy--title .section-title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }

  .metric__number { font-size: 1.8rem; }
  .metric__label { font-size: 0.72rem; }

  .process__name { font-size: min(1.004rem, 1.872vw); letter-spacing: 0.18em; }

  .ag-trait { stroke-width: 1px; }          /* fil d'Ariane encore plus fin sur petit écran */
  .ag-trait-halo { stroke-width: 3px; }
  .process__text { font-size: 0.9rem; line-height: 1.35; }

  .horizon__eyebrow { margin-right: -0.28em; font-size: 0.72rem; letter-spacing: 0.28em; }
  .horizon__title { font-size: clamp(1.9rem, 7.4vw, 2.6rem); }
}

/* téléphone tenu droit : titre et sous-titre ensemble descendaient jusqu'à la planète et à
   « Explorer nos projets » (écran court). Le titre reste en haut, le sous-titre passe sous le
   disque (centré à 50svh, rayon --R), là où l'écran est vide. */
@media (orientation: portrait) and (max-width: 760px) {
  .intro-copy--title { top: calc(var(--header-h) + 2svh); }
  .intro-copy--title .section-title { font-size: clamp(1.4rem, 6.4vw, 2.1rem); }
  /* pas la place à droite de la queue : le libellé passe au-dessus d'elle (son bas à 29 % de l'image) */
  .planet-click-hint__libelle { left: 60%; top: 29%; transform: translate(-50%, -100%); }

  /* bandeau du portfolio sur une seule ligne, en trois colonnes égales : sur deux lignes, il
     montait jusqu'à « Choisissez un projet pour l'ouvrir » */
  .scene5__metrics { flex-wrap: nowrap; gap: 10px; }
  .metric { flex: 1 1 0; min-width: 0; }
  .metric__label { font-size: 0.66rem; letter-spacing: 0.08em; text-wrap: balance; }
  .metric__bouton { font-size: 0.86rem; }
  .metric__bouton .bouton-verre__texte { min-height: 30px; padding: 0.5em 1.05em; }

  .intro-copy--title .section-subtitle {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50svh + var(--R) + 28px - var(--header-h) - 2svh);
    margin-top: 0;
  }
}

/* petits téléphones : deux lignes de deux étapes */
@media (max-width: 560px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__name { font-size: min(1.004rem, 3.744vw); }
  .process__step:nth-child(2n)::after { display: none; }
}

/* très petits écrans : le libellé des boutons « premier regard » (sur une ligne) doit tenir */
@media (max-width: 400px) {
  .bouton-verre-wrap:not(.bouton-verre-wrap--petit) { font-size: 0.82rem; }
  .bouton-verre-wrap:not(.bouton-verre-wrap--petit) .bouton-verre__texte {
    gap: 0.5em;
    padding-inline: 1.2em;
    letter-spacing: 0.02em;
  }
}

/* écrans bas (téléphone à l'horizontale) : peu de ciel au-dessus de l'horizon */
@media (orientation: landscape) and (max-height: 540px) {
  .horizon__content { bottom: calc(100% - var(--sun-y) + 16px); }
  .horizon__eyebrow { margin-bottom: 8px; font-size: 0.68rem; }
  .horizon__title { font-size: clamp(1.35rem, 4.6vh + 0.5rem, 2rem); }
  .horizon__actions { margin-top: 14px; }
  .horizon__actions .btn { min-height: 44px; padding-block: 0.7em; }
}

/* ── Écrans tactiles (téléphones, tablettes) : les textes apparaissent par fondu et léger glissement,
      sans flou ni halo. Flou et halo se recalculent à chaque image pour chaque mot : trop lourd pour
      un téléphone, et c'est ce qui faisait ramer les apparitions de texte. ── */
@media (hover: none) and (pointer: coarse) {
  [data-reveal-group] .reveal-word,
  [data-reveal-group] [data-reveal-item],
  [data-reveal-group].is-leaving .reveal-word,
  [data-reveal-group].is-leaving [data-reveal-item],
  .fragment,
  .process__step::before,
  .process__step::after,
  .process__name,
  .process__text {
    filter: none;
    text-shadow: none;
  }
  [data-reveal-group] .reveal-word,
  [data-reveal-group] [data-reveal-item] {
    transition-property: opacity, transform;
  }
  .fragment { transition-property: opacity, transform; }

  /* fil d'Ariane : sans halo flouté, sans lueur autour de l'étoile ni fondu sur les bords. Ces
     effets SVG sont recalculés sur toute la hauteur du fil à chaque image où l'étoile avance : sur
     iPhone, c'est ce qui faisait ramer la page dès la planète */
  .ag-trait-halo { display: none; }
  .ag-star { filter: none; }
  .ariane__fil > g { mask: none; }

  /* scène finale : deux images en fondu au lieu de la vidéo pilotée par le scroll (js/horizon.js),
     qui peut ne jamais s'afficher sur iPhone ; la vidéo ne garde que son affiche (soleil couché) */
  .horizon--images .horizon__still { display: block; opacity: var(--lever, 0); }
}

/* ── prefers-reduced-motion : pas de flou ni de déplacement, simple fondu ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal-group] .reveal-word,
  [data-reveal-group] [data-reveal-item],
  [data-reveal-group].is-leaving .reveal-word,
  [data-reveal-group].is-leaving [data-reveal-item] {
    filter: none !important;
    transform: none !important;
    text-shadow: none !important;
    transition: opacity 0.2s linear !important;
    transition-delay: 0s !important;
  }

  .process { --t: 1; }   /* sans vidéo : étapes affichées d'emblée */

  /* flèche du navigateur : affichée d'emblée */
  .navigateur__fleche { transform: none; transition: none; }
  .navigateur__fleche::after { opacity: 1; transition: none; }

  /* verre doré : lumière et reflets immobiles, pas de bascule */
  .bouton-verre::after,
  .bouton-verre::before,
  .bouton-verre__libelle,
  .folder-project-card.carte-verre::after,
  .verre--brillant::after,
  .verre--brillant::before,
  .projet.is-entering [style*="--i"] { animation: none; }
  .verre::after { transition: none; }
  .bouton-verre-wrap:has(.bouton-verre:active) { transform: none; }

  .browser__video { display: none; }
  .browser__still { display: block; }

  /* scène finale : une seule image, soleil levé, sans scroll piloté */
  .scene--horizon { height: auto; scroll-margin-top: calc(-1 * var(--header-h)); }
  .horizon__sticky { position: relative; }
  .horizon__video { display: none; }
  .horizon__still { display: block; }
}

/* ── Pages légales : mentions-legales.html, confidentialite.html ── */
.page-legale {
  max-width: 820px;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 120px;
}
.page-legale__maj { margin: 12px 0 48px; color: var(--dim); font-size: 0.85rem; }
.page-legale h2 {
  margin: 48px 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--blanc);
}
.page-legale h3 {
  margin: 28px 0 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--blanc);
}
.page-legale p,
.page-legale li { color: var(--creme); line-height: 1.8; }
.page-legale p + p { margin-top: 1em; }
.page-legale ul { margin: 8px 0 0; padding-left: 1.2em; }
.page-legale a { color: var(--or); text-underline-offset: 3px; }

/* ── Pied de page : landing (bas de l'écran final) et pages légales ── */
.site-footer {
  padding-block: 18px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--creme);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  list-style: none;
}
/* soulignement discret ; zone de clic d'au moins 24 px de haut */
.site-footer a {
  display: inline-block;
  padding-block: 4px;
  color: var(--creme);
  text-decoration-color: rgba(224, 212, 191, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.site-footer a:hover { color: var(--or); text-decoration-color: currentColor; }
.site-footer a[aria-current="page"] { color: var(--or); }

/* landing : sur le bas de l'écran final de #portail, sans allonger la page ; le dégradé bleu nuit
   garde le texte lisible sur les lumières de la planète */
.site-footer--scene {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding-top: 56px;
  background: linear-gradient(to top, rgba(3, 5, 15, 0.9) 0%, rgba(3, 5, 15, 0.6) 55%, rgba(3, 5, 15, 0) 100%);
}

/* pages légales : à la suite du texte, sous un filet doré */
.page-legale + .site-footer { border-top: 1px solid rgba(212, 175, 55, 0.22); }

@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer__links { justify-content: center; gap: 0 20px; }
}