/* ═══════════════════════════════════════════════════════════════ STUDIA SUP — SECTION SCROLL-SCRUB DE FILIÈRE Un écran pinné dont le scroll pilote video.currentTime image par image. Les 7 chapitres sont de vrais éléments du DOM par-dessus la vidéo : sélectionnables, lisibles par un lecteur d'écran, indexables. Palette : tokens du site + l'accent de la filière (--accent, posé par la classe fil-page--* sur ). ═══════════════════════════════════════════════════════════════ */ .sc { position: relative; background: var(--black); /* Le sélecteur « main section » du site impose 72px/24px de padding. L'écran pinné doit être plein cadre ; la carte de sortie reprend son propre padding plus bas. */ padding: 0; } /* Hauteur de défilement : 7 chapitres + une tenue de dernière frame. C'est elle qui donne sa course au scrub. */ .sc-piste { height: 450vh; } @media (max-width: 767px) { .sc-piste { height: 350vh; } } /* L'écran pinné. z-index bas : l'en-tête sticky du site (z 50) doit rester au-dessus quand GSAP passe cet élément en position fixed. */ .sc-ecran { position: relative; z-index: 1; height: 100vh; height: 100dvh; overflow: hidden; background: var(--black); } /* ── Vidéo ────────────────────────────────────────────────────── */ .sc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Voile de lisibilité : dense en bas à gauche, où vivent les chapitres */ .sc-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, rgb(11 18 14 / .88) 0%, rgb(11 18 14 / .62) 38%, rgb(11 18 14 / .16) 72%, transparent 100%), linear-gradient(to top, rgb(11 18 14 / .55) 0%, transparent 32%); } .sc-grain { position: absolute; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* ── Intro : titre de section + invite au scroll ──────────────── */ .sc-intro { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; transition: opacity .5s ease, transform .5s ease; } .sc-intro.is-out { opacity: 0; transform: translateY(-18px); pointer-events: none; } .sc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', var(--display); font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .sc-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: sc-ping 2.4s ease-out infinite; } @keyframes sc-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .sc-titre { font-family: 'Space Grotesk', var(--display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; margin: 0 0 22px; } /* Reveal mot à mot : un masque par mot, l'intérieur remonte */ .sc-titre .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .09em; margin-bottom: -.09em; } .sc-titre .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1) var(--d, 0ms); } .sc.is-pret .sc-titre .w > span { transform: translateY(0); } .sc-hint { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(247,249,248,.62); animation: sc-flotte 2.4s ease-in-out infinite; } .sc-hint svg { width: 15px; height: 15px; } @keyframes sc-flotte { 0%, 100% { transform: translateY(0); opacity: .62; } 50% { transform: translateY(5px); opacity: 1; } } /* ── Chapitres ────────────────────────────────────────────────── */ .sc-chapitres { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 0 clamp(20px, 5vw, 72px) clamp(72px, 12vh, 116px); pointer-events: none; } .sc-chap { position: absolute; bottom: clamp(72px, 12vh, 116px); left: clamp(20px, 5vw, 72px); right: clamp(20px, 5vw, 72px); max-width: 30rem; opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); } /* Un seul chapitre visible à la fois : le sortant remonte, l'entrant arrive du bas. */ .sc-chap.is-passe { opacity: 0; transform: translateY(-16px); } .sc-chap.is-actif { opacity: 1; transform: translateY(0); } .sc-chap__kicker { display: block; font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; font-size: 11px; letter-spacing: .15em; color: var(--accent); margin-bottom: 12px; } .sc-chap__titre { font-family: 'Space Grotesk', var(--display); font-weight: 700; font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px; } .sc-chap__txt { font-size: clamp(.92rem, 1.6vw, 1.05rem); line-height: 1.6; color: rgba(247,249,248,.65); margin: 0; max-width: 42ch; } /* ── Rail de progression (droite, centré) ─────────────────────── */ .sc-rail { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: 14px; transition: opacity .4s ease; } .sc-rail__compteur { font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; font-size: 11px; letter-spacing: .1em; color: rgba(247,249,248,.6); font-variant-numeric: tabular-nums; } .sc-rail__segments { display: grid; gap: 7px; } .sc-rail__seg { width: 2px; height: 22px; border-radius: 2px; background: rgba(255,255,255,.15); transition: background-color .35s ease, height .35s cubic-bezier(.16,1,.3,1); } .sc-rail__seg.is-actif { background: var(--accent); height: 34px; } .sc-rail__seg.is-passe { background: color-mix(in srgb, var(--accent) 45%, transparent); } /* ── Mini-timeline (bas droite) ───────────────────────────────── */ .sc-mini { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(24px, 4vh, 40px); z-index: 3; width: clamp(90px, 14vw, 160px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; transition: opacity .4s ease; } .sc-mini__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; } /* Toute l'UI de progression s'efface au dé-pin */ .sc-ui-out .sc-rail, .sc-ui-out .sc-mini { opacity: 0; } /* ── Bouton « passer l'expérience » ───────────────────────────── */ .sc-passer { position: absolute; top: clamp(16px, 3vh, 28px); right: clamp(16px, 3vw, 40px); z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); background: rgba(11,18,14,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(247,249,248,.75); font-size: .78rem; text-decoration: none; transition: border-color .3s ease, color .3s ease; } .sc-passer:hover { border-color: var(--accent); color: var(--white); } /* ── Carte CTA de sortie ──────────────────────────────────────── */ .sc-sortie { padding: clamp(56px, 9vh, 96px) 24px; } .sc-sortie__carte { max-width: 900px; margin: 0 auto; padding: clamp(28px, 5vw, 48px); border-radius: 24px; background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--accent) 22%, transparent); display: grid; justify-items: center; gap: 22px; text-align: center; } .sc-sortie__titre { font-family: 'Space Grotesk', var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.2rem); letter-spacing: -.02em; margin: 0; } .sc-sortie__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .sc-sortie__actions .fil-btn svg { width: 18px; height: 18px; } /* ── Repli : sans GSAP ou mouvement réduit ────────────────────── */ /* La piste retrouve une hauteur normale, la vidéo devient un lecteur classique et les 7 chapitres s'empilent en cartes. */ .sc.sc-statique .sc-piste { height: auto; } .sc.sc-statique .sc-ecran { height: auto; overflow: visible; } .sc.sc-statique .sc-video { position: relative; height: auto; aspect-ratio: 16 / 9; } .sc.sc-statique .sc-voile, .sc.sc-statique .sc-grain, .sc.sc-statique .sc-rail, .sc.sc-statique .sc-mini, .sc.sc-statique .sc-passer, .sc.sc-statique .sc-hint { display: none; } .sc.sc-statique .sc-intro { position: relative; inset: auto; padding: clamp(48px, 8vh, 88px) 24px 32px; } .sc.sc-statique .sc-titre .w > span { transform: none; } .sc.sc-statique .sc-chapitres { position: relative; padding: clamp(32px, 6vh, 56px) clamp(20px, 5vw, 48px); display: grid; gap: 18px; max-width: 1000px; margin: 0 auto; } @media (min-width: 768px) { .sc.sc-statique .sc-chapitres { grid-template-columns: repeat(2, 1fr); } } .sc.sc-statique .sc-chap { position: relative; inset: auto; max-width: none; opacity: 1; transform: none; padding: 22px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Le rail passe à l'horizontale, sous la navbar */ .sc-rail { right: auto; top: clamp(64px, 10vh, 88px); left: 20px; transform: none; flex-direction: row-reverse; gap: 10px; } .sc-rail__segments { grid-auto-flow: column; gap: 6px; } .sc-rail__seg { width: 18px; height: 2px; } .sc-rail__seg.is-actif { width: 28px; height: 2px; } .sc-chap { max-width: none; } .sc-mini { left: 20px; right: 20px; width: auto; } } @media (prefers-reduced-motion: reduce) { .sc-eyebrow__dot, .sc-hint { animation: none; } .sc-chap, .sc-intro, .sc-rail__seg { transition: none; } .sc-titre .w > span { transform: none; transition: none; } }