/* ─────────────────────────────────────────────────────────────
   Le Temps des Rêves — v4
   Half-dome watch (the logo, animated) sticky in the foreground;
   a continuous sky-gradient cycles through four moments of the day
   in the background; minimal phase content scrolls past on the sides.
   ───────────────────────────────────────────────────────────── */
:root {
  --navy:        #0A1F38;
  --navy-deep:   #06152a;
  --navy-soft:   #122a48;
  --navy-twilight: #1f2546;
  --gold:        #C9A86A;
  --gold-deep:   #a3854f;
  --gold-light:  #e6c98a;
  --cream:       #F5E9D3;
  --cream-warm:  #FBEEC9;
  --rose:        #E9C4C4;
  --rose-deep:   #C99494;
  --bg:          #FAF6EF;
  --ink:         #1A2B47;

  /* Sky gradient stops — written by JS each frame */
  --sky-top: var(--navy-deep);
  --sky-mid: var(--navy);
  --sky-bot: var(--navy-soft);

  /* Text-on-current-sky tones — also written by JS */
  --on-sky:        #1A2B47;
  --on-sky-soft:   rgba(26, 43, 71, 0.78);
  --on-sky-accent: #C9A86A;
}

* { box-sizing: border-box; }
/* Fluid root font-size: every rem-based value rescales with the viewport
   so the whole page reads correctly from a 360px phone to a 4K display. */
html {
  font-size: clamp(13.5px, 0.55vw + 11px, 18px);
  scroll-behavior: auto;
  /* Deep navy fallback — sits behind the sky-layer (z-index:-1) so even
     when the sky is faded out (intro / contact / footer / transitions)
     the page never shows a white flash. */
  background: #06152a;
}
html, body {
  margin: 0; padding: 0;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  color: var(--on-sky);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; background: transparent; }

/* ── The sky — fixed full-viewport gradient, interpolates with scroll ── */
.sky-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    var(--sky-top)  0%,
    var(--sky-mid) 48%,
    var(--sky-bot) 100%);
  pointer-events: none;
}
/* a faint star-dust noise on the very top of the sky on night phases */
.sky-layer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,243,216,0.5), transparent 60%),
    radial-gradient(1px 1px at 28% 8%,  rgba(255,243,216,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 14%, rgba(255,243,216,0.55), transparent 60%),
    radial-gradient(1px 1px at 84% 22%, rgba(255,243,216,0.4), transparent 60%),
    radial-gradient(1px 1px at 92% 6%,  rgba(255,243,216,0.5), transparent 60%);
  opacity: var(--star-opacity, 0.5);
  transition: opacity 0.4s ease;
}

/* ── Brand mark (top-left) ─────────────────────────────────── */
.brand-mark {
  position: fixed;
  top: 32px; left: 48px;
  width: 150px;
  z-index: 60;
  mix-blend-mode: var(--brand-blend, multiply);
  filter: var(--brand-filter, none);
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
  /* Default at rest = top-left, scale 1. The dedicated intro section
     handles the hero moment now, so --intro-amt defaults to 0 here. */
  --brand-cx: 75px;
  --brand-cy: 75px;
  --brand-intro-scale: 2.4;
  transform:
    translate(
      calc((50vw - 48px - var(--brand-cx)) * var(--intro-amt, 0)),
      calc((50vh - 32px - var(--brand-cy)) * var(--intro-amt, 0))
    )
    scale(calc(1 + (var(--brand-intro-scale) - 1) * var(--intro-amt, 0)));
  transform-origin: 50% 50%;
  transition:
    filter 0.6s ease,
    opacity 0.6s ease,
    mix-blend-mode 0.6s ease;
}

/* ── Side progress dots ────────────────────────────────────── */
.progress {
  position: fixed;
  top: 50%; right: 36px;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center;
}
.progress .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--on-sky-soft);
  opacity: 0.45;
  transition: all 0.6s cubic-bezier(0.65,0,0.35,1);
  cursor: pointer;
}
.progress .dot.active {
  background: var(--on-sky-accent);
  opacity: 1;
  transform: scale(1.7);
  box-shadow: 0 0 12px currentColor;
}

/* ── Scroll cue ─────────────────────────────────────────────── */
.scroll-cue {
  position: fixed;
  bottom: 2.5em; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  text-align: center;
  font-size: clamp(0.82rem, 0.5vw + 0.6rem, 1.05rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-indent: 0.5em;
  color: var(--on-sky-soft);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.scroll-cue.fade { opacity: 0; }
.scroll-cue .line {
  display: block;
  margin: 14px auto 0;
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, var(--on-sky-accent), transparent);
  animation: cueDrop 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0.2; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0) translateY(30px); opacity: 0; }
}

/* ── Autoplay toggle — bottom-left, OFF by default ────────── */
.autoplay-toggle {
  position: fixed;
  left: clamp(1em, 3vw, 2.2em);
  bottom: clamp(1.4em, 3vh, 2.2em);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.2em;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.82rem, 0.5vw + 0.62rem, 1rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  /* Bleu-nuit + or, visible sur fond clair ou sombre */
  color: var(--gold-light);
  background: rgba(10, 21, 42, 0.78);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(230,201,138,0.85);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.6);
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    opacity 0.6s ease,
    letter-spacing 0.4s ease;
}
.autoplay-toggle:hover,
.autoplay-toggle:focus-visible {
  background: var(--gold-light);
  color: var(--navy-deep);
  border-color: var(--gold-light);
  letter-spacing: 0.38em;
  outline: none;
}
.autoplay-toggle[aria-pressed="true"] {
  background: var(--gold-light);
  color: var(--navy-deep);
  border-color: var(--gold-light);
}
.autoplay-toggle[aria-pressed="true"]:hover {
  background: rgba(10, 21, 42, 0.78);
  color: var(--gold-light);
}
.autoplay-icon {
  display: inline-block;
  font-size: 0.85em;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  transform: translateY(0.05em);
}
body.in-contact .autoplay-toggle,
body.in-footer  .autoplay-toggle {
  opacity: 0;
  pointer-events: none;
}

/* ── Wrap-back curtain ─────────────────────────────────────── */
.wrap-curtain {
  position: fixed; inset: 0;
  background: var(--sky-top);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 200;
}
.wrap-curtain.on { opacity: 1; }


/* ──────────────────────────────────────────────────────────────
   Intro section — Étape 0 · Le Projet
   Full-bleed video with grey backdrop (same hue as the footer),
   so the brand can land on a neutral surface — no inverted logo.
   ────────────────────────────────────────────────────────────── */
.intro-section {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Start in the same deep navy as the midnight phase — no white flash
     if the video letterboxes or fails to load on a given codec. */
  background: #06152a;
  color: var(--cream);
}
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (not cover) so the full frame is visible on any aspect ratio —
     navy background absorbs the letterboxing on portrait viewports. */
  object-fit: contain;
  background: #06152a;
  display: block;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────
   THE WATCH (the logo, animated) — sticky foreground
   A half-dome navy sky + one morphing moon + stars + horizon
   clouds + three gold lance hands pivoting from the horizon.
   ────────────────────────────────────────────────────────────── */

.watch-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* body.in-intro / .in-contact / .in-footer fade this element away
     when we're outside the story — so the default can stay at 1. */
  opacity: var(--watch-alpha, 1);
}
.watch-stack {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 30px;
  /* Subtle lift — with the tall (220px) label-wrap below the watch, the
     stack is already top-heavy and centering it pure-50% would push it
     into the bottom quote/meta band. */
  transform: translateY(-4vh);
}
/* Only the watch itself morphs into a corner thumbnail; the label below
   stays centered so the title remains readable while the VR plays.
   Sizing is driven by a single --watch-w variable so every internal
   element (dome, hands, pivot) stays in proportion at any viewport. */
.watch {
  /* clamp ensures: never narrower than 260px (smallest phones), never
     wider than 600px (wide desktops), otherwise track the smaller of
     78% of viewport width and 46% of viewport height ×1.75 (the watch's
     aspect ratio) so the watch always fits the screen vertically too
     AND leaves room below for the big label (title + subtitle) without
     overlapping the per-phase quote / meta. */
  --watch-w: clamp(260px, min(78vw, 46vh * 1.75), 600px);
  position: relative;
  width: var(--watch-w);
  aspect-ratio: 560 / 320;
  /* Pivot at the dome's horizon — 50% across, 87.5% down (280 / 320) */
  --pivot-x: 50%;
  --pivot-y: 87.5%;
  transform: translate(var(--watch-tx, 0vw), var(--watch-ty, 0vh)) scale(var(--watch-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: opacity 0.4s ease;
}

/* SVG dome takes the upper portion of the watch container */
.watch .dome-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* The hands are absolutely positioned with their bottom at the pivot.
   They rotate around their own bottom = the dome's horizon center.
   All metrics are fractions of --watch-w so they scale fluidly. */
.hands {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hand {
  position: absolute;
  left: var(--pivot-x);
  top: var(--pivot-y);
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}
.hand svg { display: block; width: 100%; height: 100%; }
.hand-hour {
  /* original: 14×175 on 560 watch → 0.025 × 0.3125 */
  width:  calc(var(--watch-w) * 0.025);
  height: calc(var(--watch-w) * 0.3125);
  margin-left: calc(var(--watch-w) * -0.0125);
  margin-top:  calc(var(--watch-w) * -0.268);
  transform-origin: 50% calc(var(--watch-w) * 0.268);
}
.hand-minute {
  /* original: 11×232 on 560 watch → 0.0196 × 0.4143 */
  width:  calc(var(--watch-w) * 0.0196);
  height: calc(var(--watch-w) * 0.4143);
  margin-left: calc(var(--watch-w) * -0.0098);
  margin-top:  calc(var(--watch-w) * -0.364);
  transform-origin: 50% calc(var(--watch-w) * 0.364);
}
.hand-second {
  /* original: 8×260 on 560 watch → 0.0143 × 0.4643 */
  width:  calc(var(--watch-w) * 0.0143);
  height: calc(var(--watch-w) * 0.4643);
  margin-left: calc(var(--watch-w) * -0.00715);
  margin-top:  calc(var(--watch-w) * -0.389);
  transform-origin: 50% calc(var(--watch-w) * 0.389);
  z-index: 4;
  filter: drop-shadow(0 0 3px rgba(201,168,106,0.35));
}

.pivot {
  position: absolute;
  left: var(--pivot-x);
  top: var(--pivot-y);
  /* original: 20×20 on 560 watch → 0.0357 */
  width:  calc(var(--watch-w) * 0.0357);
  height: calc(var(--watch-w) * 0.0357);
  margin: calc(var(--watch-w) * -0.0179) 0 0 calc(var(--watch-w) * -0.0179);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.2),
    0 2px 6px rgba(0,0,0,0.5),
    0 0 14px rgba(201,168,106,0.3);
  z-index: 5;
}
.pivot::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3d8, var(--gold-deep));
}

/* ── Label below the watch ───────────────────────────────── */
.watch-label-wrap {
  position: relative;
  width: min(1100px, 90vw);
  /* Tall enough to host a two-line title + subtitle without overflowing
     into the bottom quote/meta band, regardless of phase. Keeps the
     watch-stack height constant across phases so the dome doesn't jump
     between short-title and long-title phases. */
  min-height: 220px;
  text-align: center;
  pointer-events: none;
}
.watch-label {
  position: relative;
}

.watch-label .title {
  font-family: 'Cormorant Garamond', serif;
  /* Capped tighter than before so long titles ("Formation présentielle
     & online") wrap to two lines but don't blow up the watch-stack
     height and push the dome off the top of the viewport. */
  font-size: clamp(2.4rem, 5vw + 0.5rem, 5rem);
  font-weight: 400;
  letter-spacing: 0.003em;
  line-height: 1.05;
  color: var(--on-sky);
  /* Tighter spacing between title and subtitle */
  margin: 0 0 0.3em 0;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(10,31,56,0.18);
  /* No transition on color — --on-sky is re-written by JS every rAF as
     the sky gradient lerps; an active CSS transition on color would
     re-fire on every frame and cause a visible scintillation. */
}
.watch-label .title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.watch-label .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 0.9vw + 0.75rem, 1.7rem);
  font-style: italic;
  color: var(--on-sky-accent);
  /* Tighter than the 0.7em original so the all-caps subtitle doesn't
     stretch across the viewport and bump into per-phase corner CTAs. */
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
  margin: 0;
  text-shadow: 0 1px 12px rgba(10,31,56,0.16);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.4s;
}
.watch-label.show .title .w {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.watch-label.show .subtitle {
  opacity: 1;
  transform: translateY(0);
  /* Tighter than the original 0.42em so the all-caps subtitle stays
     narrow enough to clear the per-phase corner CTAs even when the
     subtitle text is long (e.g. "Apprentissage incarné"). */
  letter-spacing: 0.22em;
}
.watch-label.hiding .title .w,
.watch-label.hiding .subtitle {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  filter: blur(6px) !important;
  letter-spacing: 0.55em !important;
  transition-duration: 0.55s !important;
  transition-delay: 0s !important;
}


/* ──────────────────────────────────────────────────────────────
   Story — 4 phases scroll past, the watch stays above
   ────────────────────────────────────────────────────────────── */
.story { position: relative; z-index: 1; }
.phase {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
}

/* Top eyebrow (small caption near the top of each phase) */
.phase-eyebrow {
  position: absolute;
  top: 7.5vh; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-size: clamp(0.9rem, 0.6vw + 0.65rem, 1.25rem);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  text-indent: 0.55em;
  color: var(--on-sky-accent);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -6px);
  text-shadow: 0 1px 12px rgba(10,31,56,0.16);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.phase.in .phase-eyebrow {
  opacity: 1;
  transform: translate(-50%, 0);
}
.phase-eyebrow .moonlet { width: 18px; height: 18px; }

/* Accent image-slot — sits to one side of the watch, optional.
   Phases 0/1/2 use top: 50% + translateY(-50%) for vertical centering,
   so the slide-in animation runs as opacity only. */
.phase-accent {
  position: absolute;
  z-index: 2;
  display: block;
  background: rgba(10,31,56,0.04);
  box-shadow:
    0 30px 80px -30px rgba(10,31,56,0.35),
    0 0 0 1px rgba(201,168,106,0.18);
  --slot-placeholder-color: var(--on-sky-accent);
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.15s;
}
.phase.in .phase-accent {
  opacity: 1;
}

/* Make .phase-accent work for either an <image-slot>, <video>, or <img> child */
.phase-accent.phase-video,
.phase-accent.phase-image {
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 30px 80px -30px rgba(10,31,56,0.45),
    0 0 0 1px rgba(201,168,106,0.2);
}
.phase-accent.phase-video video,
.phase-accent.phase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Phase III (formation) gets the round mask — "web call" vibe */
.phase[data-phase="2"] .phase-accent { border-radius: 50%; }
.phase[data-phase="2"] .phase-accent.phase-video,
.phase[data-phase="2"] .phase-accent.phase-image { border-radius: 50%; }
/* Phase IV (VR) — full-bleed background; no rounded frame */
.phase[data-phase="3"] .phase-accent.phase-video,
.phase[data-phase="3"] .phase-accent.phase-image {
  border-radius: 0;
  box-shadow: none;
  background: #06152a;
}
/* VR clip must be fully visible on every viewport — letterbox on navy
   rather than crop. Phases 0/1/2 keep `cover` for their tighter framing. */
.phase[data-phase="3"] .phase-accent.phase-video video,
.phase[data-phase="3"] .phase-accent.phase-image img {
  object-fit: contain;
}
/* Subtle gold corner brackets framing the VR video — disabled when full-bleed */
.phase[data-phase="3"] .phase-accent.phase-video::before,
.phase[data-phase="3"] .phase-accent.phase-image::before {
  /* (scrim is on the wrapper .phase-accent::before — leave as-is) */
}

/* per-phase placement of the accent slot.
   Accents are sized to fill the gutter beside the central watch on
   desktop — large enough to read as feature pieces, capped so they stay
   clear of the dome (watch ≤ 600px, centered → ~420px gutter per side at
   1440 viewport). */
/* Big "collage" accent pieces — accepted to overlap the dome's left/right
   edges so they read as feature artwork rather than corner decorations. */
.phase[data-phase="0"] .phase-accent {
  left: 3vw; top: 50%;
  width:  clamp(300px, 34vw, 500px);
  aspect-ratio: 1;
  height: auto;
  transform: translateY(-50%);
  border-radius: 50%;
}
.phase[data-phase="0"] .phase-accent.phase-video,
.phase[data-phase="0"] .phase-accent.phase-image { border-radius: 50%; }
/* Phase II — kit box on the right, tall portrait feature piece */
.phase[data-phase="1"] .phase-accent {
  right: 3vw; top: 50%;
  width:  clamp(300px, 28vw, 100%);
  height: clamp(440px, 70vh, 720px);
  transform: translateY(-50%);
}
/* Phase III — formation video, ROUND (web-call vibe), left side, big */
.phase[data-phase="2"] .phase-accent {
  left: 3vw; top: 50%;
  width:  clamp(300px, 34vw, 500px);
  aspect-ratio: 1;
  height: auto;
  transform: translateY(-50%);
}
/* Phase IV — VR video, FLAGSHIP — full-bleed background under the watch */
.phase[data-phase="3"] .phase-accent {
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; max-width: none;
  height: 100%; max-height: none;
  aspect-ratio: auto;
  z-index: 1;   /* behind watch (40) and content (5), in front of sky (-1) */
}
/* Soft alpha scrim so the twilight sky still reads through and the watch
   stays the focal point */
.phase[data-phase="3"] .phase-accent::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(22,28,55,0.18) 0%, rgba(22,28,55,0.55) 70%, rgba(10,15,40,0.78) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Drop the gold corner brackets — they made sense framing a video, not a bg */
.phase[data-phase="3"] .phase-accent::after { display: none; }

/* Quote */
.phase-quote {
  position: absolute;
  bottom: 8vh;
  z-index: 5;
  /* 17em (≈ half a desktop viewport) so the quote box never reaches
     across to the opposite-side meta caption */
  max-width: 17em;
  font-size: clamp(1.25rem, 1.3vw + 0.85rem, 2.1rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--on-sky);
  text-wrap: pretty;
  margin: 0;
  transform: translateY(10px);
  text-shadow: 0 1px 16px rgba(10,31,56,0.18);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1), transform 1.0s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.25s;
  opacity: 0;
}
.phase.in .phase-quote { opacity: 0.85; transform: translateY(0); }

/* Quote alternates side-to-side so it sits opposite the accent slot */
.phase[data-phase="0"] .phase-quote { right: 6vw; }
.phase[data-phase="1"] .phase-quote { left: 6vw; }
.phase[data-phase="2"] .phase-quote { right: 6vw; }
.phase[data-phase="3"] .phase-quote { left: 6vw; }

/* Meta — corner footer */
.phase-meta {
  position: absolute;
  bottom: 8vh;
  z-index: 5;
  font-size: clamp(0.85rem, 0.55vw + 0.65rem, 1.15rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
  color: var(--on-sky-accent);
  opacity: 0;
  transform: translateY(8px);
  text-shadow: 0 1px 12px rgba(10,31,56,0.14);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1), transform 1.0s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.4s;
}
.phase.in .phase-meta { opacity: 0.85; transform: translateY(0); }
.phase[data-phase="0"] .phase-meta { left: 6vw; text-align: left; }
.phase[data-phase="1"] .phase-meta { right: 6vw; text-align: right; }
.phase[data-phase="2"] .phase-meta { left: 6vw; text-align: left; }
.phase[data-phase="3"] .phase-meta { right: 6vw; text-align: right; }
.phase-meta .rule {
  display: inline-block;
  width: 36px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.55;
}
/* Rule sits before text (phases I, III) → right margin pushes text away */
.phase-meta .rule + * { margin-left: 12px; }
.phase[data-phase="0"] .phase-meta .rule,
.phase[data-phase="2"] .phase-meta .rule { margin-right: 12px; }
/* Rule sits after text (phases II, IV) → left margin pulls it away from text */
.phase[data-phase="1"] .phase-meta .rule,
.phase[data-phase="3"] .phase-meta .rule { margin-left: 12px; }


/* ──────────────────────────────────────────────────────────────
   Footer — single image (provided by client)
   ────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 50;
  min-height: 100vh;
  background: #cfcfcf;   /* matches the grey background of the supplied image */
  color: #1A1A1A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.footer-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 3.2em);
  object-fit: contain;
}
.footer-copyright {
  margin: 0;
  padding: 1em 1.2em 1.4em;
  width: 100%;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.85rem, 0.45vw + 0.7rem, 1.05rem);
  color: #5b6478;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.footer-copyright a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-copyright a:hover,
.footer-copyright a:focus-visible {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
  outline: none;
}

/* When we leave the story (intro / contact / footer), fade out the
   sticky watch & sky chrome so each surface reads as its own document. */
.watch-overlay, .scroll-cue, .progress, .sky-layer, .brand-mark {
  transition: opacity 0.6s ease;
}
body.in-intro   .watch-overlay,
body.in-intro   .scroll-cue,
body.in-intro   .progress,
body.in-intro   .sky-layer,
body.in-intro   .brand-mark,
body.in-contact .watch-overlay,
body.in-contact .scroll-cue,
body.in-contact .progress,
body.in-contact .sky-layer,
body.in-contact .brand-mark,
body.in-footer  .watch-overlay,
body.in-footer  .scroll-cue,
body.in-footer  .progress,
body.in-footer  .sky-layer,
body.in-footer  .brand-mark {
  opacity: 0 !important;
  pointer-events: none;
}
.footer-logo {
  width: 260px;
  height: auto;
  margin-bottom: 32px;
  mix-blend-mode: multiply;
}
.footer-credits {
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  color: #2c3a52;
  margin-bottom: 8px;
}
.footer-credits .credit { display: block; text-align: center; line-height: 1.25; }
.footer-credits .credit .role,
.footer-credits .credit .who { display: block; }
.footer-credits .credit .role {
  font-size: 17px;
  color: #5b6478;
  margin-bottom: 4px;
}
.footer-credits .credit .role::after { content: " :"; }
.footer-credits .credit .who {
  font-size: 22px;
  font-weight: 500;
  color: #1A2B47;
}
.footer-copy {
  margin: 12px 0 48px;
  font-size: 17px;
  color: #5b6478;
}
.footer-funders-label {
  margin: 0 0 24px;
  font-size: 19px;
  color: #2c3a52;
}
.footer-funders-label::after { content: " :"; opacity: 0.6; }
.footer-funders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 100%;
  align-items: center;
  justify-items: center;
  margin-top: 8px;
}

/* Region Bourgogne Franche-Comté */
.funder-region {
  display: inline-grid;
  grid-template-columns: 10px auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.05em;
  color: #1A1A1A;
  line-height: 1;
}
.funder-region span { white-space: nowrap; }
.funder-region .funder-tick {
  width: 8px; height: 8px;
  background: #F5C518;
}

/* AER */
.funder-aer { display: grid; justify-items: center; gap: 6px; text-align: center; }
.funder-aer svg { width: 180px; height: 64px; display: block; }
.funder-aer .funder-sub {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: #555;
  line-height: 1.25;
}

/* BPI France */
.funder-bpi { display: grid; justify-items: center; gap: 4px; text-align: center; }
.funder-bpi svg { width: 220px; height: 50px; display: block; }
.funder-bpi .funder-sub {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: #555;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .footer-funders { grid-template-columns: 1fr; gap: 36px; }
  .funder-region { justify-items: center; padding-left: 0; }
  .funder-region .funder-tick { display: none; }
}


/* ──────────────────────────────────────────────────────────────
   Phase CTA — buttons + VR contact panel
   ────────────────────────────────────────────────────────────── */
.phase-cta {
  position: absolute;
  /* sit above the watch overlay (z-index 40) so the gold-bordered button
     stays clean when the phase scrolls past the fixed watch+label band */
  z-index: 50;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1.1s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.55s;
  pointer-events: none;
}
.phase.in .phase-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Phase I / III CTAs sit on the same side as their quote, just above it.
   The horizontal offset is tighter (3vw) than the inner content (6vw)
   so the button hugs the edge and clears the centered watch subtitle. */
.phase-cta-left  { left: 3vw;  bottom: 22vh; }
.phase-cta-right { right: 3vw; bottom: 22vh; text-align: right; }

/* The gold-outline link — used everywhere a CTA appears */
.cta-link {
  display: inline-block;
  padding: 0.85em 1.9em;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 0.55vw + 0.7rem, 1.25rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em;
  /* Bleu-nuit fond + écriture or pour rester lisible sur tous les ciels */
  color: var(--gold-light);
  background: rgba(10, 21, 42, 0.72);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  border: 1px solid rgba(230, 201, 138, 0.85);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,0.55);
  transition:
    background 0.45s ease,
    color 0.45s ease,
    letter-spacing 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}
.cta-link:hover,
.cta-link:focus-visible {
  background: var(--gold-light);
  color: var(--navy-deep);
  border-color: var(--gold-light);
  letter-spacing: 0.38em;
  box-shadow: 0 12px 32px -10px rgba(201,168,106,0.55);
  outline: none;
}

/* ── Phase IV — cue pointing to the contact section below ── */
.phase-cta-cue {
  position: absolute;
  bottom: 3.5vh; left: 50%;
  z-index: 6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  font-size: clamp(0.92rem, 0.7vw + 0.7rem, 1.2rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
  color: var(--on-sky-accent);
  text-decoration: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 1.0s cubic-bezier(0.16,1,0.3,1),
    transform 1.0s cubic-bezier(0.16,1,0.3,1),
    letter-spacing 0.45s ease;
  transition-delay: 0.75s;
}
.phase.in .phase-cta-cue { opacity: 0.95; transform: translate(-50%, 0); }
.phase-cta-cue:hover,
.phase-cta-cue:focus-visible {
  letter-spacing: 0.5em;
  outline: none;
}
.cue-arrow {
  font-size: 1.6em;
  line-height: 1;
  animation: cueArrowDrop 2.4s ease-in-out infinite;
}
@keyframes cueArrowDrop {
  0%   { transform: translateY(-2px); opacity: 0.5; }
  50%  { transform: translateY(4px);  opacity: 1; }
  100% { transform: translateY(-2px); opacity: 0.5; }
}

/* ── Dedicated contact section — bleu nuit ──────────────── */
.contact-section {
  position: relative;
  z-index: 50;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(8vh, 12vh, 14vh) clamp(20px, 6vw, 64px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(28, 58, 98, 0.55), transparent 60%),
    linear-gradient(180deg, #06152a 0%, #0A1F38 55%, #08182f 100%);
  color: var(--cream);
  scroll-margin-top: 0;
}
/* a faint star-dust echo so the section ties back to the night sky */
.contact-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255,243,216,0.45), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,243,216,0.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 28%, rgba(255,243,216,0.55), transparent 60%),
    radial-gradient(1px 1px at 32% 8%,  rgba(255,243,216,0.4),  transparent 60%);
  pointer-events: none;
}
.contact-inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  text-align: center;
}
.contact-eyebrow {
  margin: 0 0 clamp(2em, 4vh, 3em);
  font-size: clamp(0.88rem, 0.7vw + 0.55rem, 1.15rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.85;
}
.contact-title {
  margin: 0 0 0.35em;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.8vw + 0.5rem, 5rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--cream);
}
.contact-date {
  display: inline-block;
  color: var(--gold-light);
  font-style: italic;
  white-space: nowrap;
}
.contact-date sup { font-size: 0.55em; vertical-align: 0.5em; }
.contact-tagline {
  margin: 0 auto clamp(1.6em, 3.5vh, 2.4em);
  max-width: 32em;
  font-size: clamp(1.15rem, 1.2vw + 0.75rem, 1.6rem);
  font-style: italic;
  color: rgba(245,233,211,0.82);
  line-height: 1.4;
}

/* ── Contact form ─────────────────────────────────────────── */
.contact-form {
  display: grid;
  gap: 0.9em;
  text-align: left;
  font-size: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em;
}
.form-field {
  display: grid;
  gap: 0.35em;
}
.form-label {
  font-size: 0.72em;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.85;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1em;
  color: var(--cream);
  background: rgba(6, 21, 42, 0.5);
  border: 1px solid rgba(201,168,106,0.32);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--gold-light);
  background: rgba(6, 21, 42, 0.7);
}
.contact-form textarea { min-height: 5.5em; max-height: 16em; }
.cta-link-submit {
  justify-self: center;
  margin-top: 0.4em;
  color: var(--gold-light);
  border-color: rgba(230,201,138,0.7);
  background: transparent;
}
.cta-link-submit:hover,
.cta-link-submit:focus-visible {
  background: var(--gold-light);
  color: var(--navy-deep);
}
.form-status {
  margin: 0.3em 0 0;
  min-height: 1.2em;
  font-size: 0.85em;
  font-style: italic;
  color: var(--gold-light);
  opacity: 0.85;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Bottom-of-section content — keep meta, quote and CTAs clear of
   the bottom-left "Lecture auto" toggle. On phases 0 & 2 the meta
   sits on the LEFT (same side as the toggle), so we push it higher
   to avoid the collision visible at narrow widths.
   ────────────────────────────────────────────────────────────── */
/* Lift the meta caption above the autoplay toggle at all desktop widths.
   Quote stays at its original 8vh and is narrowed via max-width (above)
   so it doesn't reach across the page into the meta's column. */
.phase-meta {
  bottom: max(10vh, 6em);
}

/* ──────────────────────────────────────────────────────────────
   Responsive — tablet portrait and phones (≤ 1023px)
   The watch itself already scales via its --watch-w clamp; the only
   thing this query does is move the side-accent into a stacked layout
   above the watch so it doesn't share horizontal space with the dome.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .brand-mark { left: 18px; top: 18px; width: 80px; }
  .brand-mark { --brand-cx: 40px; --brand-cy: 40px; --brand-intro-scale: 1.9; }

  .progress { right: 14px; }

  /* Watch a touch smaller on tablet/phone so the stacked accent fits above
     and the label has breathing room below. The clamp() in .watch already
     covers most of the work — this just tightens the upper bound. */
  .watch {
    --watch-w: clamp(240px, min(72vw, 34vh * 1.75), 520px);
  }
  /* Reset the desktop translate-Y — on tablet/phone the watch lives in
     a vertical stack with an accent above and labels below; centering it
     naturally gives every band breathing room. */
  .watch-stack { transform: none; }

  /* Single-column layout: eyebrow, meta-caption, accent, watch, label,
     then quote at the bottom. Meta lives near the top here (next to the
     eyebrow) so it doesn't fight the quote or the autoplay toggle. */
  .phase-eyebrow {
    top: 4vh;
  }
  .phase-quote {
    left: 22px !important; right: 22px !important;
    max-width: none;
    /* sit above the bottom-left autoplay toggle (≈ 3vh + ~3em tall) */
    bottom: max(9vh, 7em);
    text-align: center;
  }
  .phase-meta  {
    left: 22px !important; right: 22px !important;
    text-align: center !important;
    /* re-anchor to the top, just under the eyebrow */
    top: 8.5vh !important;
    bottom: auto !important;
  }
  /* hide the leading rule on the meta when it's a top-aligned caption */
  .phase-meta .rule { display: none; }
  .phase-meta .rule + * { margin-left: 0; }

  .phase-cta-left,
  .phase-cta-right {
    left: 22px !important; right: 22px !important;
    bottom: 18vh;
    text-align: center;
  }

  /* Accent videos — restack ABOVE the watch (not behind it), BELOW the
     eyebrow/meta. Phase IV (VR) keeps its full-bleed behaviour, untouched. */
  .phase[data-phase="0"] .phase-accent,
  .phase[data-phase="1"] .phase-accent,
  .phase[data-phase="2"] .phase-accent {
    left: 50% !important; right: auto !important;
    top: 13vh !important; bottom: auto !important;
    transform: translateX(-50%);
    width:  min(40vw, 200px) !important;
    height: min(40vw, 200px) !important;
    aspect-ratio: 1;
  }
  /* Phase II (kit) — portrait crop, a touch taller */
  .phase[data-phase="1"] .phase-accent {
    width:  min(32vw, 170px) !important;
    height: min(48vw, 240px) !important;
    aspect-ratio: auto;
    border-radius: 4px;
  }

  /* Contact form — single column on phone */
  .form-row { grid-template-columns: 1fr; }
}

/* Very narrow viewports — keep at least the floor sane */
@media (max-width: 420px) {
  .scroll-cue { bottom: 1.6em; letter-spacing: 0.4em; }
  .phase-eyebrow { letter-spacing: 0.4em; gap: 0.7em; }
  /* Tighter again — leave room for the stacked accent + watch + label */
  .watch { --watch-w: clamp(220px, 82vw, 360px); }
  .phase[data-phase="0"] .phase-accent,
  .phase[data-phase="1"] .phase-accent,
  .phase[data-phase="2"] .phase-accent {
    top: 8vh !important;
    width:  min(48vw, 200px) !important;
    height: min(48vw, 200px) !important;
  }
  .phase[data-phase="1"] .phase-accent {
    width:  min(40vw, 180px) !important;
    height: min(60vw, 260px) !important;
  }
}