/* Séquence d'exploration — composant autonome.
   Les variables reprennent celles du site, avec des valeurs de repli. */
.xseq {
  --xs-ink: var(--ink, #16171a);
  --xs-paper: var(--paper, #f3f1ec);
  --xs-accent: var(--accent, #b4532a);
  --xs-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --xs-serif: var(--font-serif, "Fraunces", Georgia, serif);
  --xs-gutter: var(--gutter, clamp(16px, 3vw, 40px));
  position: relative;
  background: var(--xs-ink);
  color: var(--xs-paper);
}

/* ---- sans JS : trois vues empilées ---- */
.xseq__sticky { position: relative; }
.xseq__canvas, .xseq__rail, .xseq__frame, .xseq__loader, .xseq__marks { display: none; }
.xseq__static { display: grid; gap: 2px; }
.xseq__static figure { margin: 0; position: relative; }
.xseq__static img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.xseq__chapters { list-style: none; margin: 0; padding: var(--xs-gutter); display: grid; gap: 1.5rem; }

/* ---- avec JS : piste de scroll + cadre collant ---- */
.xseq.is-init { height: 440vh; }
.xseq.is-init .xseq__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.xseq.is-init .xseq__canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s ease;
}
.xseq.is-ready .xseq__canvas { opacity: 1; }

.xseq.is-init .xseq__static { display: block; position: absolute; inset: 0; }
.xseq.is-init .xseq__static figure {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
}
.xseq.is-init .xseq__static img { width: 100%; height: 100%; aspect-ratio: auto; }
/* pendant le chargement, la première vue sert d'affiche */
.xseq.is-init:not(.is-static):not(.is-ready) .xseq__static figure:first-child { opacity: 1; }
.xseq.is-ready .xseq__static { visibility: hidden; }
.xseq.is-static .xseq__static figure.is-active { opacity: 1; }

/* voile de lisibilité (encre, pas de dégradé coloré) */
.xseq.is-init .xseq__sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(22, 23, 26, .78) 0%, rgba(22, 23, 26, 0) 42%),
    linear-gradient(to bottom, rgba(22, 23, 26, .55) 0%, rgba(22, 23, 26, 0) 26%);
}

/* ---- en-tête ---- */
.xseq__head {
  position: relative; z-index: 2; padding: var(--xs-gutter);
}
.xseq.is-init .xseq__head { position: absolute; top: 0; left: 0; right: 0; padding-top: calc(var(--xs-gutter) + 56px); }
.xseq__kicker {
  font: 500 11px/1.4 var(--xs-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem;
  opacity: .8;
}
.xseq__title {
  font-family: var(--xs-serif); font-weight: 300; font-variation-settings: "opsz" 144;
  font-size: clamp(2rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.02em; margin: 0; max-width: 12ch;
}

/* ---- chapitres ---- */
.xseq__chapter .n { font: 500 11px var(--xs-mono); letter-spacing: .14em; color: var(--xs-accent); display: block; margin-bottom: .4rem; }
.xseq__chapter h3 { font-family: var(--xs-serif); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
.xseq__chapter p { margin: 0; max-width: 38ch; font-size: .95rem; line-height: 1.55; opacity: .85; }
.xseq.is-init .xseq__chapters { position: absolute; z-index: 2; left: 0; bottom: 0; padding: var(--xs-gutter); padding-bottom: calc(var(--xs-gutter) + 8px); display: block; width: min(560px, 100%); }
.xseq.is-init .xseq__chapter {
  position: absolute; left: var(--xs-gutter); bottom: calc(var(--xs-gutter) + 8px); right: var(--xs-gutter);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease;
}
.xseq.is-init .xseq__chapter.is-active { opacity: 1; transform: none; }

/* ---- rail de progression ---- */
.xseq.is-init .xseq__rail {
  display: block; position: absolute; z-index: 2; right: var(--xs-gutter); top: 50%;
  height: 38vh; width: 1px; transform: translateY(-50%); background: rgba(243, 241, 236, .25);
}
.xseq__bar { position: absolute; inset: 0; background: var(--xs-accent); transform-origin: top; transform: scaleY(0); }
.xseq__tick {
  position: absolute; right: 0; width: 9px; height: 1px; background: currentColor;
  font: 500 10px/1 var(--xs-mono); letter-spacing: .1em;
}
.xseq__tick span { position: absolute; right: 16px; top: -5px; opacity: .7; }

.xseq.is-init .xseq__frame {
  display: block; position: absolute; z-index: 2; right: var(--xs-gutter); bottom: calc(var(--xs-gutter) + 8px);
  font: 500 11px var(--xs-mono); letter-spacing: .12em; opacity: .85; font-variant-numeric: tabular-nums;
}
.xseq.is-init .xseq__loader {
  display: block; position: absolute; z-index: 2; right: var(--xs-gutter); top: calc(var(--xs-gutter) + 60px);
  font: 500 11px var(--xs-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8;
  transition: opacity .6s ease;
}
.xseq.is-complete .xseq__loader, .xseq.is-static .xseq__loader { opacity: 0; }

/* repères d'angle, comme sur un tirage de planche */
.xseq.is-init .xseq__marks { display: block; position: absolute; inset: 14px; z-index: 2; pointer-events: none; }
.xseq__marks i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(243, 241, 236, .6); }
.xseq__marks i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.xseq__marks i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.xseq__marks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.xseq__marks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 760px) {
  .xseq.is-init { height: 330vh; }
  .xseq.is-init .xseq__rail { height: 26vh; top: 42%; }
  .xseq__tick span { display: none; }
  .xseq.is-init .xseq__chapter p { font-size: .9rem; }
  .xseq.is-init .xseq__frame { bottom: auto; top: calc(var(--xs-gutter) + 22px); }
  .xseq.is-init .xseq__loader { top: calc(var(--xs-gutter) + 22px); right: auto; left: var(--xs-gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .xseq *, .xseq *::before, .xseq *::after { transition: none !important; }
}