/* ============================================================
   Cinematic scrub hero — "The living network"
   Engineering per 10K scrub-pipeline standard.
   ============================================================ */
html, body { overflow-x: hidden; overflow-x: clip; }

.scrub-hero {
  position: relative;
  height: 280vh; /* 1 combined beat + settle, generous plateau on the 180vh scroll range */
  padding-top: 20px; /* gap under the header at load, matching the stage's 20px side gutters */
  background: var(--bg); /* light gutter around the rounded stage, echoing the footer's floating-card treatment */
}
.scrub-stage {
  position: sticky;
  top: 95px; /* clears the sticky site header (75px) + a 20px gap */
  height: calc(100vh - 115px); /* 95px top gap + 20px bottom gap */
  margin: 0 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}

/* Layers */
.scrub-stage .poster {
  position: absolute; inset: 0;
  background-size: cover;
  /* Le logo du ministère colle au bord gauche du visuel (assets/img/hero-flyer-2026.webp) alors que le pavé de
     dates a de la marge à droite : un centrage strict coupait le logo sur les fenêtres moins larges que 16:9. */
  background-position: 20% center;
}
/* #heroVideo/.ring : plus utilisés sur l'accueil courant (hero devenu une image fixe), gardés
   pour index1.html (ancien accueil vidéo, conservé comme référence) qui réutilise ce même fichier. */
#heroVideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: transform;
  transform: translateZ(0);
}
.scrub-stage.video-ready #heroVideo { opacity: 1; }
.scrub-stage.video-failed #heroVideo { display: none; }
.scrub-stage .ring {
  position: absolute;
  right: 28px; bottom: 28px;
  width: 34px; height: 34px;
  color: rgba(255,255,255,.65);
  transform: rotate(-90deg);
  pointer-events: none;
}
.scrub-stage.video-ready .ring { display: none; }

/* Global base scrim */
.scrub-stage .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,12,24,0) 35%, rgba(10,12,24,.62) 100%);
}

/* Countdown card: flush against the stage's own top edge (no top radius,
   continuing the stage's straight top edge), rounded only on the bottom
   (the inward-facing side) — same logic as the flush left/right story cards. */
.hero-countdown {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 14px 10px 14px;
}
.hero-countdown .cd-box { min-width: 62px; text-align: center; padding: 0 8px; }
.hero-countdown .cd-box + .cd-box { border-left: 1px solid var(--line); }
.hero-countdown .cd-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.hero-countdown .cd-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 560px) {
  .hero-countdown { gap: 2px; padding: 10px 6px; }
  .hero-countdown .cd-box { min-width: 46px; padding: 0 4px; }
  .hero-countdown .cd-num { font-size: 1.1rem; }
  .hero-countdown .cd-label { font-size: .54rem; }
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.75);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: calc(1 - var(--cue-fade, 0));
}
.scroll-cue svg { width: 18px; height: 18px; animation: cue-bob 2.2s ease-in-out -1.2s infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Journey bands ---------- */
.band {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}
.band-inner {
  position: relative;
  max-width: 420px;
  padding: 0 clamp(24px, 6vw, 84px);
  text-shadow: var(--tshadow, 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8));
}
.band--left  { justify-content: flex-start; }
.band--right { justify-content: flex-end; }
.band--right .band-inner { text-align: right; }

/* Per-band scrim: an ellipse anchored on the band's own column */
.band::before {
  content: "";
  position: absolute;
  top: 14%; bottom: 14%;
  width: 56%;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 0));
  background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5,6,14,.62) 0%, rgba(5,6,14,.4) 46%, rgba(5,6,14,0) 76%);
}
.band--left::before  { left: -6%; }
.band--right::before { right: -6%; }

/* On the flyer-photo hero (index.html), the left/right cards are opaque white —
   this dark photo-legibility wash (meant for text sitting directly over video)
   has nothing left to serve and just smudges the flyer behind/around the card. */
.scrub-hero--flyer .band::before { display: none; }

.band-kicker {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 14px;
}
.band-line {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}

/* The story bands sit in a white card flush against the hero's own left/right edge:
   the outward-facing side stays square (continuing the hero's edge), only the
   inward-facing side is rounded. Each card enters from its OWN side of the frame
   (left card from the left, right card from the right), converging to its flush
   resting position as --k rises (transform+opacity only). */
.band--drift .band-inner {
  background: #fff;
  padding-top: 28px;
  padding-bottom: 28px;
  text-shadow: none;
}
/* Flyer-photo hero (index.html) only: the client's official navy instead of
   white, text flipped to light for contrast. index1.html's video-hero
   reference keeps the original white cards untouched. */
.scrub-hero--flyer .band--drift .band-inner { background: var(--ink); }
.scrub-hero--flyer .band--drift .band-kicker { color: var(--green); }
.scrub-hero--flyer .band--drift .band-line { color: #fff; }
.band--left.band--drift .band-inner {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  transform: translateX(calc((1 - var(--k, 0)) * -90px));
}
.band--right.band--drift .band-inner {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transform: translateX(calc((1 - var(--k, 0)) * 90px));
}
.band--sweep .band-inner {
  transform: translateX(calc((1 - var(--k, 0)) * -34px));
}
.band--sweep.band--right .band-inner {
  transform: translateX(calc((1 - var(--k, 0)) * 34px));
}
.band--bloom .band-inner {
  transform: scale(calc(.92 + .08 * var(--k, 0)));
}
.band--bloom .band-kicker { text-shadow: 0 0 calc(18px * var(--k, 0)) rgba(0,117,101,.8); }

/* The kicker's thread: a line that draws with --k */
.band-kicker::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(0,172,216,.7));
  transform-origin: left center;
  transform: scaleX(var(--k, 0));
}
.band--right .band-kicker::after { transform-origin: right center; }

/* ---------- Settle band ---------- */
.band--settle { justify-content: center; text-align: center; }
.band--settle::before {
  left: 50%; top: 4%; bottom: auto; height: 66%;
  width: 78%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(5,6,14,.66) 0%, rgba(5,6,14,.42) 48%, rgba(5,6,14,0) 76%);
}
.band--settle .band-inner { max-width: 860px; }

/* The settle title stays on screen for the whole hero, so on narrower landscape
   widths (small laptops, landscape tablets) it must not collide with the
   flush-edge story cards that appear alongside it: shrink both. */
@media (max-width: 1400px) {
  .band-inner { max-width: 320px; }
  .band--settle .band-inner { max-width: 520px; }
  .settle-title { font-size: clamp(1.8rem, 5vw, 3.2rem); }
}
@media (max-width: 1120px) {
  .band-inner { max-width: 260px; }
  .band--settle .band-inner { max-width: 400px; }
  .settle-title { font-size: clamp(1.5rem, 4.4vw, 2.4rem); }
  .settle-meta { font-size: .82rem; gap: 8px 16px; }
}
.settle-kicker {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 18px;
  opacity: var(--k, 0);
}
.settle-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -.01em;
  opacity: var(--k, 0);
  transform: translateY(calc((1 - var(--k, 0)) * 22px));
}
.settle-title .accent { color: var(--accent); }
.settle-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: #E4E9F5;
  font-weight: 600;
  font-size: .98rem;
  margin-bottom: 30px;
  opacity: var(--ks, 0);
  transform: translateY(calc((1 - var(--ks, 0)) * 16px));
}
.settle-meta span { display: inline-flex; align-items: center; gap: 8px; }
.settle-meta svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.settle-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  pointer-events: auto;
  opacity: var(--kb, 0);
  transform: translateY(calc((1 - var(--kb, 0)) * 14px));
}
.settle-ctas .btn { text-shadow: none; }

/* ---------- Static hero (phones, portrait, reduced motion) ---------- */
.static-hero {
  display: none;
  position: relative;
  min-height: 88vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 90px 24px;
  margin: 20px;
  border-radius: var(--radius-lg);
}
.static-hero .poster-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .85;
}
.static-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 80% at 50% 55%, rgba(8,10,22,.28) 0%, rgba(8,10,22,.78) 100%);
}
.static-hero .static-inner { position: relative; z-index: 1; max-width: 720px; }
.static-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  margin-bottom: 14px;
}
.static-hero h1 .accent { color: var(--accent); }
.static-hero p { color: #C7CFE2; font-size: 1.05rem; }
.static-hero .hero-ctas { justify-content: center; margin-top: 26px; }

/* Téléphone : le hero prend toute la largeur d'écran, sans marge ni coin arrondi (confort visuel demandé). */
@media (max-width: 720px) {
  .static-hero { margin: 0; border-radius: 0; }
}

/* The five static-hero gates (must match the JS GATES verbatim) */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .scrub-hero { display: none; }
  .static-hero { display: flex; }
}

/* Short-but-capable screens: keep the scrub, hide the small overlays */
@media (max-height: 560px) {
  .scroll-cue, .scrub-stage .ring { display: none; }
}

/* ---------- The signature thread below the hero ---------- */
.thread-svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 140px;
  width: 2px;
  overflow: visible;
  pointer-events: none;
}
.thread-svg line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset 1.1s ease;
}
.stats-band { position: relative; }
.stats-band.in .thread-svg line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
  .thread-svg line { stroke-dashoffset: 0; transition: none; }
}

/* ---------- Bandeau d'accueil : thème officiel, patronage, pays invité (débrief ACC-01/02/03/19) ---------- */
.settle-theme {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  color: #fff;
  margin: 0 auto 12px;
  max-width: 760px;
  opacity: var(--k, 0);
}
.settle-value, .settle-patron {
  color: #E4E9F5;
  margin: 0 auto 10px;
  max-width: 660px;
  opacity: var(--ks, 0);
  transform: translateY(calc((1 - var(--ks, 0)) * 16px));
}
.settle-value { font-size: .95rem; line-height: 1.5; }
.settle-patron { font-size: .82rem; letter-spacing: .02em; color: #C7CFE2; }
.settle-guest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 26px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none !important;
  pointer-events: auto;
  opacity: var(--ks, 0);
  transition: background-color .2s;
}
.settle-guest:hover { background: rgba(255,255,255,.22); }
.flag { width: 28px; height: 19px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.static-hero .settle-guest { opacity: 1; margin: 4px 0 8px; }
.static-hero .static-theme { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 10px; }
.static-hero .static-patron { font-size: .9rem; margin-bottom: 8px; }
@media (max-width: 1400px) {
  .band--settle .band-inner { max-width: 640px; }
  .settle-value, .settle-patron, .settle-theme { max-width: 600px; }
}
@media (max-width: 1120px) {
  .band--settle .band-inner { max-width: 440px; }
  .settle-value, .settle-patron, .settle-theme { max-width: 420px; }
}
@media (max-height: 800px) and (min-width: 721px) {
  .settle-value { display: none; }
  .settle-guest { margin-bottom: 18px; }
}