/* scroll-sequence.css — à adapter aux variables du site (couleurs, polices, --sseq-top = hauteur de l'en-tête fixe).
   Par défaut (sans JS / réduire les animations) : section classique, étapes en liste, image finale.
   .is-live (ajouté par le JS) : section haute, visuel collant, images pilotées par le défilement. */
/* Valeurs neutres par défaut : les remplacer par la charte du client (fond = couleur exacte des images si illustration). */
.sseq{--sseq-top:0px;--sseq-bg:#fff;--sseq-accent:#222;--sseq-dot:#d0d0d0;background:var(--sseq-bg);padding:clamp(4rem,9vw,7rem) 0}
.sseq-grid{display:grid;gap:2.5rem;align-items:center;width:min(100% - 2.5rem,1180px);margin-inline:auto}
.sseq-grid>*{min-width:0}
.sseq-steps{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:st}
.sseq-step{counter-increment:st;margin-bottom:1.6rem}
.sseq-step h3{display:flex;align-items:baseline;gap:.8rem;margin:0 0 .5rem}
.sseq-step h3::before{content:counter(st,decimal-leading-zero);font-size:.85rem;font-weight:600;color:var(--sseq-accent)}
.sseq-visual{position:relative;width:100%;aspect-ratio:var(--sseq-ratio,1);justify-self:center;border-radius:var(--sseq-radius,0);overflow:hidden}
.sseq-visual canvas,.sseq-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--sseq-fit,cover)}
.sseq-visual canvas{display:none}
.sseq-progress{display:none}
@media (min-width:900px){.sseq-grid{grid-template-columns:var(--sseq-cols,1fr 1fr);gap:4rem}}

.sseq.is-live{height:var(--sseq-length,500vh);padding:0}
.sseq.is-live .sseq-sticky{position:sticky;top:var(--sseq-top);height:calc(100vh - var(--sseq-top));height:calc(100svh - var(--sseq-top));display:flex;align-items:center;overflow:hidden}
.sseq.is-live .sseq-visual canvas{display:block}
.sseq.is-live .sseq-fallback{display:none}
.sseq.is-live .sseq-steps{position:relative;min-height:var(--sseq-text-h,15rem)}
.sseq.is-live .sseq-step{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.2,1);pointer-events:none}
.sseq.is-live .sseq-step.is-active{opacity:1;transform:none;pointer-events:auto}
.sseq.is-live .sseq-progress{display:flex;flex-direction:column;gap:.7rem;position:absolute;right:clamp(.8rem,3vw,2.5rem);top:50%;transform:translateY(-50%)}
.sseq-progress span{width:8px;height:8px;border-radius:50%;background:var(--sseq-dot);transition:background .3s,transform .3s}
.sseq-progress span.on{background:var(--sseq-accent);transform:scale(1.4)}
@media (max-width:899px){
  .sseq.is-live{height:var(--sseq-length-m,560vh)}
  .sseq.is-live .sseq-grid{gap:.6rem;align-content:center}
  .sseq.is-live .sseq-visual{order:-1;width:min(100%,var(--sseq-visual-m,48svh))}
  .sseq.is-live .sseq-steps{min-height:var(--sseq-text-h-m,13.5rem);margin-top:.6rem}
  .sseq.is-live .sseq-step p{font-size:.95rem;line-height:1.6}
  .sseq.is-live .sseq-progress{right:.5rem}
}

.sseq{--sseq-top:78px;--sseq-bg:#171717;--sseq-accent:#d6a72b;--sseq-dot:#3a3a3a;--sseq-length:520vh;--sseq-length-m:560vh;--sseq-ratio:1;--sseq-cols:1fr 1fr;--sseq-fit:contain;color:#fff}
.sseq .eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;color:#f1cf62;letter-spacing:.03em}
.sseq h2{color:#fff;margin-top:8px}
.sseq-step h3{font-size:30px;color:#fff}
.sseq-step h3::before{font-size:18px;color:#d6a72b;font-family:"Barlow Condensed",sans-serif}
.sseq-step p{color:#cfcfcf;font-size:18px;max-width:46ch}
.sseq-step .btn{margin-top:18px}
.sseq.is-live .sseq-steps{min-height:16rem}
@media(max-width:640px){.sseq{--sseq-top:66px}.sseq-step h3{font-size:24px}}