/* Precision pass: system sequence, expertise interactions and material story. */

.sy__seq {
  position: relative;
  overflow: hidden;
}

.sy__seq-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sy__seq-labels i {
  position: absolute;
  bottom: 9.1%;
  min-width: clamp(34px, 3vw, 52px);
  padding: 0.12em 0.25em;
  color: #d8d3cb;
  background: #101010;
  font: 300 clamp(18px, 1.55vw, 28px) / 1 "Cormorant Garamond", serif;
  text-align: center;
  transform: translateX(-50%);
}

.sy__seq-labels i:nth-child(1) { left: 27.2%; }
.sy__seq-labels i:nth-child(2) { left: 58.6%; }
.sy__seq-labels i:nth-child(3) { left: 90%; }

.ex__tile {
  --mx: 50%;
  --my: 50%;
  opacity: 0;
  clip-path: inset(10% 0 10% 0);
  background-size: 104%;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 0.8s var(--ease),
    clip-path 1.05s var(--ease),
    transform 1.05s var(--ease),
    background-size 1.35s var(--ease);
}

.ex__tile:nth-child(2) { transition-delay: 0.1s; }
.ex__tile:nth-child(3) { transition-delay: 0.2s; }

.ex__tile.is-visible {
  opacity: 1;
  clip-path: inset(0);
  transform: translate3d(0, 0, 0);
}

.ex__tile::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(245, 242, 237, 0.19), transparent 31%),
    linear-gradient(110deg, transparent 28%, rgba(245, 242, 237, 0.08) 48%, transparent 68%);
  transform: translateX(-7%);
  transition: opacity 0.55s var(--ease), transform 0.9s var(--ease);
}

.ex__tile > * {
  z-index: 2;
}

.ex__tile h3 {
  transition: transform 0.65s var(--ease), letter-spacing 0.65s var(--ease);
}

.ex__tile h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 12px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ease);
}

.ex__tile:hover,
.ex__tile.is-open {
  background-size: 111%;
}

.ex__tile:hover::after,
.ex__tile.is-open::after {
  opacity: 1;
  transform: translateX(0);
}

.ex__tile:hover h3,
.ex__tile.is-open h3 {
  letter-spacing: 0.095em;
  transform: translateX(7px);
}

.ex__tile:hover h3::after,
.ex__tile.is-open h3::after {
  transform: scaleX(1);
}

.ex__tile .ex__n,
.ex__tile .ex__toggle {
  transition: transform 0.65s var(--ease), color 0.45s var(--ease);
}

.ex__tile:hover .ex__n,
.ex__tile.is-open .ex__n {
  color: var(--i);
  transform: translateY(-4px);
}

.ex__tile:hover .ex__toggle,
.ex__tile.is-open .ex__toggle {
  transform: translate(-5px, -5px);
}

.sv__visual {
  isolation: isolate;
  background: linear-gradient(135deg, #111 0 61%, #d8d2c8 61% 100%);
  overflow: hidden;
}

.sv__visual::before {
  content: "";
  position: absolute;
  inset: 7% 5%;
  z-index: 0;
  border: 1px solid rgba(245, 242, 237, 0.14);
  pointer-events: none;
}

.sv__ivory {
  inset: 7% 4% auto auto;
  width: 23%;
  height: 31%;
  background: #f5f2ed;
  box-shadow: 0 30px 80px rgba(10, 10, 10, 0.16);
}

.sv__fig {
  opacity: 0.38;
  filter: saturate(0.65) brightness(0.72);
  transform: translate3d(0, 12px, 0) scale(0.985);
  transition:
    opacity 0.7s var(--ease),
    transform 0.95s var(--ease),
    filter 0.8s var(--ease),
    box-shadow 0.8s var(--ease);
}

.sv__fig.is-active {
  z-index: 4;
  opacity: 1;
  filter: saturate(0.9) brightness(1.06);
  transform: translate3d(-10px, -13px, 0) scale(1.025);
  box-shadow: 0 34px 84px rgba(10, 10, 10, 0.38);
}

.sv__visual:hover .sv__fig.is-active {
  transform: translate3d(-15px, -18px, 0) scale(1.04);
}

.sv__material-meta {
  position: absolute;
  top: 11%;
  right: 5.5%;
  z-index: 6;
  width: min(210px, 28%);
  margin: 0;
  padding: 17px 18px 16px;
  color: #0a0a0a;
  background: rgba(245, 242, 237, 0.94);
  border: 1px solid rgba(10, 10, 10, 0.18);
  backdrop-filter: blur(10px);
}

.sv__material-meta span,
.sv__material-meta strong {
  display: block;
}

.sv__material-meta span {
  margin-bottom: 8px;
  font: 400 9px / 1.2 var(--sans);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.sv__material-meta strong {
  font: 400 clamp(18px, 1.6vw, 25px) / 1.05 var(--serif);
  letter-spacing: 0.02em;
}

.mt__visual {
  position: relative;
}

.mt__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.46));
  pointer-events: none;
}

.mt__visual-note {
  position: absolute;
  right: clamp(22px, 3vw, 44px);
  bottom: clamp(22px, 3vw, 42px);
  left: clamp(22px, 3vw, 44px);
  z-index: 2;
  padding: 20px 22px;
  color: #f5f2ed;
  background: rgba(10, 10, 10, 0.52);
  border: 1px solid rgba(245, 242, 237, 0.28);
  backdrop-filter: blur(12px);
}

.mt__visual-note span,
.mt__visual-note strong {
  display: block;
}

.mt__visual-note span {
  margin-bottom: 9px;
  font: 400 9px / 1.3 var(--sans);
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.mt__visual-note strong {
  font: 300 clamp(20px, 2vw, 30px) / 1.08 var(--serif);
}

@media (max-width: 980px) {
  .ex__tile {
    background-size: cover;
  }

  .sv__ivory {
    width: 26%;
    height: 27%;
  }

  .sv__material-meta {
    width: min(190px, 34%);
  }
}

@media (max-width: 700px) {
  .sy__seq-labels i {
    bottom: 8.5%;
    min-width: 34px;
    font-size: 15px;
  }

  .sv__visual::before {
    inset: 6% 16px;
  }

  .sv__ivory {
    top: 6%;
    right: 16px;
    width: 30%;
    height: 25%;
  }

  .sv__material-meta {
    top: 8%;
    right: 24px;
    width: 42%;
    padding: 13px 14px;
  }

  .sv__caption {
    display: none;
  }

  .mt__visual-note {
    padding: 16px 17px;
  }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .ex__tile {
    opacity: 1;
    clip-path: none;
    transform: none;
    background-size: cover;
  }

  .ex__tile::after {
    display: none;
  }

  .sv__fig,
  .sv__fig.is-active,
  .sv__visual:hover .sv__fig.is-active {
    transform: none;
  }
}


/* ── Ajustements mobile du hero ────────────────────────────────────────────
   1. svh au lieu de dvh : sur téléphone, la barre d'adresse qui apparaît et
      disparaît change la valeur de dvh, ce qui faisait sauter la page pendant
      le défilement vers le haut. svh ne bouge jamais.
   2. Le hero dure 3 écrans au lieu de 4,8 : plus court au pouce.
   3. Le voile sombre était pensé pour le texte à gauche sur ordinateur. Sur
      téléphone, il assombrissait toute l'image. Il devient vertical, léger en
      haut, présent seulement derrière le texte.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  [data-scroll-scrub-band] { min-height: 300svh !important; }
  .scroll-scrub__stage { height: 100svh; }
  .scroll-scrub__chapter-pin { min-height: 100svh; }
  .scroll-scrub__video, .scroll-scrub__poster { object-fit: cover; object-position: 50% 50%; }

  .journey::after {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, .22) 0%,
      rgba(10, 10, 10, 0) 30%,
      rgba(10, 10, 10, .45) 70%,
      rgba(10, 10, 10, .82) 100%);
  }
  .journey .scroll-scrub__copy::before { inset: -1.5rem -1.25rem; }
  .journey .scroll-scrub__kicker { color: #dcd9d3; }
  .journey .scroll-scrub__title { color: #faf8f4; text-shadow: 0 2px 28px rgba(0, 0, 0, .5); }
  .journey .scroll-scrub__body { color: #e6e3dc; }
  .journey-cta { background: rgba(10, 10, 10, .55); }
}


/* ── Hero plus clair sur ordinateur ───────────────────────────────────────
   Le voile de gauche était à 82 % de noir : il mangeait le plan d'architecte.
   Il descend à 60 %, le centre s'éclaircit, et le texte gagne un peu de
   contraste pour rester parfaitement lisible par-dessus. */
@media (min-width: 861px) {
  .journey::after {
    background: linear-gradient(90deg,
      rgba(10, 10, 10, .42),
      rgba(10, 10, 10, 0) 48%,
      rgba(10, 10, 10, .18));
  }
  .journey .scroll-scrub__kicker { color: #dcd9d3; }
  .journey .scroll-scrub__title { color: #faf8f4; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
  .journey .scroll-scrub__body { color: #e6e3dc; }
}


/* ── Correctif : la page qui saute quand on change de sens sur téléphone ──
   Cause réelle : l'unité « dvh » suit la barre d'adresse de Safari/Chrome.
   Quand on défile vers le bas la barre se replie (100dvh grandit), quand on
   remonte elle réapparaît (100dvh rapetisse). Or le bloc de texte du hero est
   positionné avec « margin-top: -100dvh » : à chaque aller-retour, il se
   déplace de la hauteur de la barre. D'où l'impression que l'écran redescend
   puis remonte tout seul.
   On avait déjà passé la scène en « svh » (hauteur fixe, barre visible) mais
   pas le bloc de texte ni le bouton flottant : ils restaient en dvh et se
   décalaient l'un par rapport à l'autre. Tout passe en svh ici. */
.scroll-scrub__stage { height: 100svh; }
.scroll-scrub__story { margin-top: -100svh; }
.scroll-scrub__chapter-pin { min-height: 100svh; }
.status { min-height: 100svh; }
.journey-cta { top: calc(100svh - 88px); }

@media (max-width: 860px) {
  .journey-cta { top: calc(100svh - 72px); }
}

/* Même chose si l'appareil est réglé sur « réduire les animations » :
   la règle d'origine remettait du dvh sur les chapitres. */
@media (prefers-reduced-motion: reduce) {
  .scroll-scrub__chapter { min-height: 100svh !important; }
}