/* ============================================================
   OSTIA — séquences cinématiques pilotées au scroll
   Chargé uniquement sur les pages qui embarquent une séquence
   (agent-vocal-ia, tarifs) ou la vidéo de hero (index).
   Mode statique (.ostia-seq-static) : reduced-motion, save-data,
   vieux navigateurs — poster fixe + étapes empilées lisibles.
   ============================================================ */

.ostia-seq {
  position: relative;
  height: 340vh;
  /* full-bleed même quand la section vit dans un conteneur centré */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ostia-seq-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Fondus d'entrée/sortie : la scène émerge du fond de page et s'y
   redissout — la transition entre sections devient un raccord cinéma. */
.ostia-seq-sticky::before,
.ostia-seq-sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18vh;
  z-index: 3;
  pointer-events: none;
}

.ostia-seq-sticky::before {
  top: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0));
}

.ostia-seq-sticky::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0));
}

/* HUD cinéma : compteur d'acte, coin haut droit */
.ostia-seq-hud {
  position: absolute;
  top: clamp(5.5rem, 10vh, 7.5rem);
  right: clamp(1.5rem, 4vw, 4rem);
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.ostia-seq-live .ostia-seq-hud {
  opacity: 1;
  transform: translateY(0);
}

.ostia-seq-hud::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0), rgba(52, 211, 153, 0.8));
}

.ostia-seq-hud-index {
  color: #34d399;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}

.ostia-seq-hud-total {
  color: rgba(148, 163, 184, 0.6);
}

.ostia-seq-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Contre-jour de famille : la scène ne retombe jamais au noir plat,
     même sur les frames les plus sombres de la séquence. */
  background:
    radial-gradient(72% 88% at 64% 46%, rgba(var(--ostia-scene-rgb, 52, 211, 153), 0.14), transparent 74%),
    linear-gradient(0deg, rgba(var(--ostia-scene-rgb, 52, 211, 153), 0.05), transparent 32%),
    linear-gradient(180deg, #050b16, #02060f);
}

/* Lentille optique : elle suit la progression de la sequence au lieu de
   tourner en boucle. Le point de lumiere se deplace avec la camera et le
   vignettage maintient le contraste du texte dans toutes les frames. */
.ostia-seq-media::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  background:
    radial-gradient(circle at var(--ostia-seq-light-x, 18%) 42%, rgba(94, 234, 212, 0.16), transparent 17%),
    radial-gradient(ellipse at 50% 50%, transparent 44%, rgba(2, 6, 23, 0.12) 74%, rgba(2, 6, 23, 0.52) 112%);
  opacity: var(--ostia-seq-optics, 0.72);
  transform: scale(1.04) translate3d(var(--ostia-seq-lens-x, 0px), var(--ostia-seq-lens-y, 0px), 0);
  pointer-events: none;
}

.ostia-seq-media img,
.ostia-seq-media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les frames sont générées sombres pour préserver le texte : on les
     réexpose au compositing plutôt que de laisser un écran noir. */
  filter: brightness(1.32) contrast(1.05) saturate(1.16);
}

.ostia-seq-media canvas {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ostia-seq-ready .ostia-seq-media canvas {
  opacity: 1;
}

/* Voile latéral pour asseoir la colonne de texte */
.ostia-seq-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.68) 0%, rgba(2, 6, 23, 0.26) 38%, rgba(2, 6, 23, 0) 60%);
  pointer-events: none;
}

.ostia-seq-copy {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ostia-seq-copy-inner {
  max-width: 26rem;
  transform: translate3d(0, var(--ostia-seq-copy-y, 0px), 0);
  transition: transform 0.14s linear;
}

.ostia-seq-eyebrow {
  margin: 0 0 1.1rem;
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.ostia-seq-steps {
  display: grid;
}

/* Le beat sortant s'efface vite (0.24s) pendant que l'entrant attend un
   temps (0.12s) puis monte en cascade via ses enfants : les deux textes
   ne se superposent jamais à l'écran. Le mouvement d'entrée est porté
   par la cascade index → h3 → p, pas par le conteneur. */
.ostia-seq-step {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}

.ostia-seq-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.12s;
}

/* Mise en scène interne du beat actif : titre puis texte en cascade */
.ostia-seq-step h3,
.ostia-seq-step p,
.ostia-seq-step-index {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ostia-seq-step.is-active .ostia-seq-step-index {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.ostia-seq-step.is-active h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.14s;
}

.ostia-seq-step.is-active p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.26s;
}

.ostia-seq-static .ostia-seq-step h3,
.ostia-seq-static .ostia-seq-step p,
.ostia-seq-static .ostia-seq-step-index {
  opacity: 1;
  transform: none;
}

.ostia-seq-step-index {
  display: block;
  color: rgba(148, 163, 184, 0.75);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  margin-bottom: 0.7rem;
}

.ostia-seq-step h3 {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1.12;
}

.ostia-seq-step p {
  margin: 0;
  color: #cbd5e1;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 24rem;
}

.ostia-seq-progress {
  position: relative;
  margin-top: 2.2rem;
  width: 11rem;
  height: 2px;
  background: rgba(148, 163, 184, 0.22);
  border-radius: 999px;
}

.ostia-seq-progress-tick {
  position: absolute;
  top: -2.5px;
  width: 1px;
  height: 7px;
  background: rgba(148, 163, 184, 0.55);
  text-decoration: none;
}

.ostia-seq-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34d399, #5eead4);
  border-radius: inherit;
}

.ostia-seq-live .ostia-seq-copy-inner {
  filter: drop-shadow(0 24px 48px rgba(2, 6, 23, 0.24));
}

/* ---------- Mode statique : tout reste lisible sans animation ---------- */
.ostia-seq-static {
  height: auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.ostia-seq-static .ostia-seq-sticky {
  position: relative;
  height: auto;
  overflow: visible;
}

.ostia-seq-static .ostia-seq-media {
  position: absolute;
}

.ostia-seq-static .ostia-seq-media canvas {
  display: none;
}

.ostia-seq-static .ostia-seq-steps {
  display: grid;
  gap: 2rem;
}

.ostia-seq-static .ostia-seq-step {
  grid-area: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ostia-seq-static .ostia-seq-progress {
  display: none;
}

.ostia-seq-static .ostia-seq-hud {
  display: none;
}

.ostia-seq-static .ostia-seq-sticky::before,
.ostia-seq-static .ostia-seq-sticky::after {
  display: none;
}

/* ---------- Mobile : média plein cadre, texte posé en bas ---------- */
@media (max-width: 767px) {
  .ostia-seq {
    height: 300vh;
  }

  .ostia-seq-sticky {
    align-items: flex-end;
  }

  .ostia-seq-media img,
  .ostia-seq-media canvas {
    object-position: 50% 32%;
  }

  .ostia-seq-media::after {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.25) 30%, rgba(2, 6, 23, 0.88) 78%);
  }

  .ostia-seq-copy {
    padding-bottom: 3.2rem;
  }

  /* Le HUD d'acte frôle la nav sur petit écran : on le retire. */
  .ostia-seq-hud {
    display: none;
  }

  .ostia-seq-step p {
    font-size: 0.95rem;
  }
}

/* ============================================================
   Vidéo ambiante de hero (home) — couche décorative sous les
   calques existants. Poster en dégradé de secours, la vidéo est
   injectée par JS seulement si le contexte l'autorise.
   ============================================================ */
.ostia-hero-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Le hero qui héberge la couche vidéo devient son propre contexte de
   positionnement — évite un style inline sur chaque gabarit injecté. */
section:has(> .ostia-hero-motion),
article:has(> .ostia-hero-motion) {
  position: relative;
}

/* Les freres suivants passent au-dessus du calque video sans avoir
   besoin de classes utilitaires (Tailwind precompile incomplet). */
.ostia-hero-motion ~ * {
  position: relative;
  z-index: 2;
}

.ostia-hero-motion video,
.ostia-hero-motion img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.ostia-hero-motion video {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ostia-hero-motion.is-playing video {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .ostia-seq-media canvas,
  .ostia-hero-motion video {
    display: none !important;
  }

  .ostia-seq-media::before {
    transform: none !important;
  }

  .ostia-seq-copy-inner {
    transform: none !important;
    transition: none !important;
  }
}

/* Garde-fou de cascade : le shell limite les copies standard a 30rem,
   tandis que le film a besoin de deux vraies colonnes (titre + contexte).
   Sans cette exception, le titre venait recouvrir le paragraphe. */
.ostia-seq-cinematic .ostia-seq-copy-inner {
  max-width: none !important;
}

/* ============================================================
   HOME — récit photographique en quatre actes
   De vrais plans raster remplacent le vocabulaire radar des anciennes
   frames. Le scroll orchestre uniquement coupe, caméra et typographie.
   ============================================================ */

.ostia-seq-cinematic {
  height: var(--ostia-seq-height, 406vh);
  background: #020617;
}

.ostia-seq-cinematic .ostia-seq-sticky {
  isolation: isolate;
}

.ostia-seq-cinematic .ostia-seq-media {
  background: #020617;
}

/* Le poster et le canvas historiques restent le fallback sans JS, puis
   sortent du plan dès que le moteur cinématique est prêt. */
.ostia-seq-cinematic.ostia-seq-ready .ostia-seq-media > img,
.ostia-seq-cinematic.ostia-seq-ready .ostia-seq-media > canvas {
  opacity: 0;
  visibility: hidden;
}

.ostia-cinema-acts,
.ostia-cinema-acts::before,
.ostia-cinema-acts::after {
  position: absolute;
  inset: 0;
}

.ostia-cinema-acts {
  z-index: 1;
  overflow: hidden;
  background: #020617;
}

.ostia-cinema-acts::before {
  content: "";
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.96) 0%, rgba(2, 6, 23, 0.7) 29%, rgba(2, 6, 23, 0.12) 64%, rgba(2, 6, 23, 0.28) 100%),
    radial-gradient(circle at 72% 50%, transparent 0 14%, rgba(2, 6, 23, 0.15) 48%, rgba(2, 6, 23, 0.52) 100%);
  pointer-events: none;
}

.ostia-cinema-acts::after {
  content: "";
  z-index: 4;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), transparent 20%, transparent 76%, rgba(2, 6, 23, 0.9));
  pointer-events: none;
}

.ostia-seq-media .ostia-cinema-act {
  --ostia-act-opacity: 0;
  --ostia-act-x: 0%;
  --ostia-act-y: 0%;
  --ostia-act-scale: 1.075;
  z-index: 1;
  opacity: var(--ostia-act-opacity);
  visibility: visible;
  filter: saturate(0.9) contrast(1.06) brightness(0.8);
  transform: translate3d(var(--ostia-act-x), var(--ostia-act-y), 0) scale(var(--ostia-act-scale));
  transform-origin: 70% 50%;
  will-change: transform, opacity;
}

.ostia-cinema-optics {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(90deg, transparent 0 69%, rgba(94, 234, 212, 0.24) 69.08%, transparent 69.2%),
    linear-gradient(180deg, transparent 0 53%, rgba(94, 234, 212, 0.14) 53.08%, transparent 53.2%);
  opacity: 0.22;
  mask-image: radial-gradient(circle at 69% 53%, #000 0 10%, transparent 36%);
  -webkit-mask-image: radial-gradient(circle at 69% 53%, #000 0 10%, transparent 36%);
  pointer-events: none;
}

.ostia-seq-cinematic .ostia-seq-media::before {
  z-index: 6;
  opacity: 0.45;
}

.ostia-seq-cinematic .ostia-seq-media::after {
  z-index: 7;
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.36), transparent 48%);
}

.ostia-seq-cinematic .ostia-seq-copy {
  z-index: 8;
}

.ostia-seq-cinematic .ostia-seq-copy-inner {
  max-width: 31rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-left: 1px solid rgba(94, 234, 212, 0.34);
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.64), transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ostia-seq-cinematic .ostia-seq-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(167, 243, 208, 0.9);
}

.ostia-seq-cinematic .ostia-seq-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

.ostia-seq-cinematic .ostia-seq-step {
  transform: translate3d(0, 24px, 0);
  clip-path: inset(0 0 24% 0);
  filter: blur(3px);
  transition:
    opacity 0.65s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.65s ease;
}

.ostia-seq-cinematic .ostia-seq-step.is-active {
  clip-path: inset(0);
  filter: none;
}

.ostia-seq-cinematic .ostia-seq-step h3 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 4.5vw, 4.7rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.ostia-seq-cinematic .ostia-seq-step p {
  color: rgba(226, 232, 240, 0.8);
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
}

.ostia-seq-cinematic .ostia-seq-progress {
  width: min(18rem, 62vw);
  background: rgba(226, 232, 240, 0.14);
}

.ostia-seq-cinematic .ostia-seq-progress i {
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.44);
}

.ostia-cinema-hud {
  display: grid;
  grid-template-columns: auto auto 3.5rem minmax(8rem, auto);
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.16em;
}

.ostia-cinema-hud::before {
  display: none;
}

.ostia-cinema-hud-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
  color: rgba(226, 232, 240, 0.38);
  letter-spacing: 0.28em;
}

.ostia-cinema-hud > i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.72), transparent);
}

.ostia-cinema-hud-status {
  color: rgba(226, 232, 240, 0.72);
  white-space: nowrap;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-cinema-act {
  display: none;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-cinema-act:last-child {
  display: block;
  opacity: 0.5;
  transform: scale(1.04);
}

@media (max-width: 767px) {
  .ostia-seq-cinematic {
    height: 330vh;
  }

  .ostia-seq-media .ostia-cinema-act {
    object-position: 70% 50%;
    transform-origin: 70% 50%;
  }

  .ostia-cinema-acts::before {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.24) 10%, rgba(2, 6, 23, 0.3) 43%, rgba(2, 6, 23, 0.97) 82%);
  }

  .ostia-cinema-hud,
  .ostia-cinema-optics {
    display: none;
  }

  .ostia-seq-cinematic .ostia-seq-copy {
    padding: 0 1.15rem 2.2rem;
  }

  .ostia-seq-cinematic .ostia-seq-copy-inner {
    padding: 1.2rem 0 0 1.15rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ostia-seq-cinematic .ostia-seq-step h3 {
    max-width: 11ch;
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ostia-seq-media .ostia-cinema-act,
  .ostia-seq-cinematic .ostia-seq-step {
    transition: none !important;
    will-change: auto;
  }
}

/* ============================================================
   OSTIA — plan narratif "du bruit au signal" (2026-07-02)
   Remplace par defaut les suites radar par un plate 3D art-directe.
   Le JS ne fait varier que cinq custom properties : toute la mise en
   scene reste composable en CSS et le fallback statique reste complet.
   ============================================================ */

.ostia-seq-cinematic {
  --ostia-seq-progress: 0;
  --ostia-seq-pan: 6%;
  --ostia-seq-lift: 0.9%;
  --ostia-seq-zoom: 1.045;
  --ostia-seq-focus: 18%;
  height: var(--ostia-seq-height, 436vh);
  background: #01040b;
  border-block: 1px solid rgba(94, 234, 212, 0.08);
}

.ostia-seq-cinematic .ostia-seq-sticky {
  isolation: isolate;
  background:
    radial-gradient(100% 80% at 50% 50%, rgba(6, 78, 79, 0.12), transparent 70%),
    #01040b;
}

.ostia-seq-cinematic .ostia-seq-media {
  overflow: hidden;
  background: #01040b;
}

/* L'ancien poster et le canvas de frames restent dans le DOM comme
   filet historique, mais ne peignent plus en mode plate. */
.ostia-seq-cinematic .ostia-seq-media > img,
.ostia-seq-cinematic .ostia-seq-media > canvas {
  opacity: 0 !important;
  visibility: hidden;
}

.ostia-seq-plate {
  position: absolute;
  inset: -3%;
  display: block;
  transform-origin: 50% 52%;
  transform:
    scale(var(--ostia-seq-zoom))
    translate3d(var(--ostia-seq-pan), var(--ostia-seq-lift), 0);
  will-change: transform;
}

.ostia-seq-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.88) contrast(1.08) brightness(0.72);
}

/* Optique tres retenue : une zone de mise au point accompagne la camera,
   puis trois fines caustiques signalent la matiere du verre. Aucun radar,
   compteur technique ou pluie de particules. */
.ostia-seq-optics {
  position: absolute;
  inset: -8%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(32rem 24rem at var(--ostia-seq-focus) 52%, rgba(45, 212, 164, 0.15), transparent 68%),
    linear-gradient(104deg, rgba(0, 0, 0, 0.2) 12%, transparent 42%, rgba(5, 10, 22, 0.42) 92%);
  mix-blend-mode: screen;
}

.ostia-seq-optics i {
  position: absolute;
  top: -10%;
  left: var(--ostia-seq-focus);
  width: 1px;
  height: 120%;
  display: block;
  background: linear-gradient(180deg, transparent 8%, rgba(103, 232, 249, 0.35) 46%, rgba(52, 211, 153, 0.08) 70%, transparent 94%);
  box-shadow: 0 0 28px rgba(45, 212, 164, 0.22);
  opacity: 0.34;
  transform: rotate(8deg);
}

.ostia-seq-optics i:nth-child(2) {
  margin-left: 7vw;
  opacity: 0.16;
  transform: rotate(8deg) scaleX(2);
}

.ostia-seq-optics i:nth-child(3) {
  margin-left: -8vw;
  opacity: 0.1;
  transform: rotate(8deg) scaleX(3);
}

.ostia-seq-cinematic .ostia-seq-media::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(1, 4, 11, 0.86) 0%, rgba(1, 4, 11, 0.08) 24%, rgba(1, 4, 11, 0.02) 60%, rgba(1, 4, 11, 0.9) 100%),
    linear-gradient(90deg, rgba(1, 4, 11, 0.9) 0%, rgba(1, 4, 11, 0.42) 35%, rgba(1, 4, 11, 0.04) 67%, rgba(1, 4, 11, 0.22) 100%);
}

.ostia-seq-cinematic.is-seq-resolved .ostia-seq-media::after {
  background:
    linear-gradient(180deg, rgba(1, 4, 11, 0.84) 0%, rgba(1, 4, 11, 0.04) 26%, rgba(1, 4, 11, 0.02) 62%, rgba(1, 4, 11, 0.9) 100%),
    linear-gradient(90deg, rgba(1, 4, 11, 0.82) 0%, rgba(1, 4, 11, 0.32) 38%, rgba(1, 4, 11, 0) 72%);
}

.ostia-seq-cinematic .ostia-seq-copy {
  z-index: 5;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  width: min(1440px, 100%);
  padding: 0 clamp(1.5rem, 5vw, 5.5rem) clamp(5.4rem, 12vh, 8rem);
}

.ostia-seq-cinematic .ostia-seq-copy-inner {
  width: min(36rem, 82vw);
  max-width: 36rem;
}

.ostia-seq-cinematic .ostia-seq-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  color: rgba(167, 243, 208, 0.94);
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.34em;
}

.ostia-seq-cinematic .ostia-seq-eyebrow::before {
  content: "";
  width: 2.8rem;
  height: 1px;
  background: linear-gradient(90deg, #34d399, transparent);
}

.ostia-seq-cinematic .ostia-seq-step {
  display: block;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 2.2rem, 0);
  clip-path: inset(0 0 18% 0);
  transition:
    opacity 0.72s ease,
    filter 0.72s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ostia-seq-cinematic .ostia-seq-step.is-past {
  transform: translate3d(0, -2.2rem, 0);
  clip-path: inset(18% 0 0 0);
}

.ostia-seq-cinematic .ostia-seq-step.is-active {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
}

.ostia-seq-cinematic .ostia-seq-step-index {
  display: block;
  margin: 0 0 1rem;
  color: rgba(110, 231, 183, 0.88);
  font-size: 0.67rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ostia-seq-cinematic .ostia-seq-step h3 {
  margin: 0;
  max-width: 11ch;
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.6rem, 4.8vw, 4.9rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.065em;
  text-wrap: balance;
  text-shadow: 0 8px 35px rgba(0, 0, 0, 0.48);
}

.ostia-seq-cinematic .ostia-seq-step p {
  margin: 1.2rem 0 0.35rem;
  max-width: 32rem;
  color: rgba(226, 232, 240, 0.88);
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.68;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}

/* Les sous-elements n'ont plus leur propre cascade : une seule entree de
   plan est plus calme et plus cinematographique que trois fades successifs. */
.ostia-seq-cinematic .ostia-seq-step h3,
.ostia-seq-cinematic .ostia-seq-step p,
.ostia-seq-cinematic .ostia-seq-step-index,
.ostia-seq-cinematic .ostia-seq-step.is-active h3,
.ostia-seq-cinematic .ostia-seq-step.is-active p,
.ostia-seq-cinematic .ostia-seq-step.is-active .ostia-seq-step-index {
  opacity: 1;
  transform: none;
  transition: none;
}

.ostia-seq-cinematic .ostia-seq-progress {
  width: min(36rem, 54vw);
  height: 1px;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  background: rgba(226, 232, 240, 0.18);
}

.ostia-seq-cinematic .ostia-seq-progress i {
  box-shadow: 0 0 20px rgba(45, 212, 164, 0.62);
}

.ostia-seq-cinematic .ostia-seq-hud {
  z-index: 6;
  top: clamp(6.4rem, 12vh, 8.6rem);
  color: rgba(203, 213, 225, 0.62);
}

.ostia-seq-hud-editorial .ostia-seq-hud-label {
  font-size: 0.6rem;
  letter-spacing: 0.36em;
}

/* ---------- Fallback statique / economie de donnees ---------- */
.ostia-seq-cinematic.ostia-seq-static {
  height: auto;
  min-height: 100vh;
  padding: 0;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-sticky {
  min-height: 100vh;
  overflow: hidden;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-copy {
  padding-block: clamp(7rem, 12vw, 11rem);
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-copy-inner {
  width: 100%;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 70rem;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-step {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  background: rgba(2, 6, 15, 0.83);
  filter: none;
  clip-path: none;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-step h3 {
  margin-top: 1.8rem;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.ostia-seq-cinematic.ostia-seq-static .ostia-seq-step p {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .ostia-seq-cinematic {
    height: var(--ostia-seq-height, 402vh);
  }

  .ostia-seq-cinematic .ostia-seq-plate {
    inset: -2% -54%;
    transform:
      scale(var(--ostia-seq-zoom))
      translate3d(var(--ostia-seq-pan), var(--ostia-seq-lift), 0);
  }

  .ostia-seq-cinematic .ostia-seq-plate img {
    object-position: 50% 44%;
    filter: saturate(0.86) contrast(1.08) brightness(0.64);
  }

  .ostia-seq-cinematic .ostia-seq-media::after,
  .ostia-seq-cinematic.is-seq-resolved .ostia-seq-media::after {
    background:
      linear-gradient(180deg, rgba(1, 4, 11, 0.74) 0%, rgba(1, 4, 11, 0.02) 34%, rgba(1, 4, 11, 0.7) 64%, rgba(1, 4, 11, 0.98) 100%),
      linear-gradient(90deg, rgba(1, 4, 11, 0.26), transparent 54%, rgba(1, 4, 11, 0.16));
  }

  .ostia-seq-cinematic .ostia-seq-copy {
    align-items: flex-end;
    padding: 0 1.25rem 4.4rem;
  }

  .ostia-seq-cinematic .ostia-seq-copy-inner {
    width: 100%;
    max-width: 34rem;
  }

  .ostia-seq-cinematic .ostia-seq-step {
    display: block;
  }

  .ostia-seq-cinematic .ostia-seq-step-index {
    margin-bottom: 0.9rem;
  }

  .ostia-seq-cinematic .ostia-seq-step h3 {
    max-width: 12ch;
    font-size: clamp(2.1rem, 10.8vw, 3.5rem);
    line-height: 0.96;
  }

  .ostia-seq-cinematic .ostia-seq-step p {
    margin-top: 1rem;
    max-width: 32rem;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .ostia-seq-cinematic .ostia-seq-progress {
    width: 100%;
    margin-top: 1.6rem;
  }

  .ostia-seq-cinematic.ostia-seq-static .ostia-seq-sticky {
    min-height: auto;
  }

  .ostia-seq-cinematic.ostia-seq-static .ostia-seq-copy {
    padding-block: 6rem;
  }

  .ostia-seq-cinematic.ostia-seq-static .ostia-seq-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ostia-seq-cinematic .ostia-seq-plate {
    transform: none !important;
    will-change: auto;
  }

  .ostia-seq-cinematic .ostia-seq-step,
  .ostia-seq-cinematic .ostia-seq-media::after {
    transition: none !important;
  }
}

/* Transition de plan nette : le flou intermediaire lisait comme un defaut
   de rendu dans les captures et n'apportait aucune information. */
.ostia-seq-cinematic .ostia-seq-step,
.ostia-seq-cinematic .ostia-seq-step.is-past,
.ostia-seq-cinematic .ostia-seq-step.is-active {
  filter: none !important;
}

.ostia-seq-cinematic .ostia-cinema-act {
  filter: saturate(0.88) contrast(1.06) brightness(0.82) !important;
}

.ostia-seq-cinematic .ostia-seq-copy-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   FINAL CUT — raccords nets entre les actes.
   Le flou de sortie donnait une sensation de mise au point ratee et
   pouvait laisser l'ancien intertitre lisible pendant la coupe. Une
   transition courte en opacite/deplacement garde le montage fluide tout
   en synchronisant plus franchement image, titre et compteur.
   ============================================================ */
.ostia-seq-cinematic .ostia-seq-step,
.ostia-seq-cinematic .ostia-seq-step:not(.is-active) {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  filter: none !important;
  transform: translate3d(0, 0.9rem, 0) !important;
  clip-path: inset(0 0 8% 0);
  transition:
    opacity 0.28s ease,
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.46s;
}

.ostia-seq-cinematic .ostia-seq-step.is-past {
  transform: translate3d(0, -0.9rem, 0) !important;
  clip-path: inset(8% 0 0 0);
}

.ostia-seq-cinematic .ostia-seq-step.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  filter: none !important;
  transform: none !important;
  clip-path: inset(0);
  transition-delay: 0.06s, 0.06s, 0.06s, 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ostia-seq-cinematic .ostia-seq-step,
  .ostia-seq-cinematic .ostia-seq-step:not(.is-active) {
    transition: none !important;
  }
}