/* ═══════════════════════════════════════════════════════════════
   Accueil, scène 5 : mon parcours, en film (js/rewind.js puis js/prologue.js), repris du site de Moncef Belkhayat
   et adapté à « Velours » : le plan de cinéma qui se rembobine (.rw__), puis la mosaïque de ma vie (.pro__).
   ═══════════════════════════════════════════════════════════════ */

/* l'année qui défile, comme un compteur */
.odo { display: block; height: 1em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; gap: 0; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.odo__strip span { display: block; height: 1.5em; line-height: 1; padding-top: .02em; text-align: center; }
.pw { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .05em; margin: -.12em 0 -.05em; }
.pw > span { display: inline-block; }

/* ═════════ Le plan de cinéma, puis le rembobinage ═════════ */
.rw { position: relative; }
.rw__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.rw__stage { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
/* le fond du studio, chaud, plus clair derrière moi */
.rw__bg { position: absolute; inset: 0; background: radial-gradient(95% 72% at 50% 34%, #f3eee7 0%, #e7e0d6 40%, #d4cabd 74%, #bfb4a6 100%); }
.rw__name { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); top: calc(var(--header) + .5svh); margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; line-height: .82; letter-spacing: .005em; color: var(--ink); text-align: center; }
.rw__l { display: block; overflow: hidden; padding-top: .06em; }
.rw__l > span { display: inline-block; white-space: nowrap; }
.rw__name.is-one { display: flex; justify-content: center; }
.rw__name.is-one .rw__l > span { font-size: inherit; }
.rw__man { position: absolute; z-index: 2; left: -100%; right: -100%; bottom: 0; margin: 0 auto; height: min(76svh, 150vw); width: auto; max-width: none; transform-origin: 50% 100%; }
.rw__veil { position: absolute; inset: 0; z-index: 6; background: var(--paper); pointer-events: none; }
.rw__strip { position: absolute; z-index: 1; top: 0; background: #0e0c0b; border-radius: 4px; }
.rw__strip::before, .rw__strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: calc(var(--side) * .4); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Crect x='0' y='4' width='10' height='8' rx='2' fill='%23f6f2ec'/%3E%3C/svg%3E") repeat-y; background-size: 100% calc(var(--side) * .64); }
.rw__strip::before { left: calc(var(--side) * .3); }
.rw__strip::after { right: calc(var(--side) * .3); }
.rw__frame { position: relative; margin: 0 auto; }
.rw__f { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background: #2a2522; }
.rw__f--blank { background: #fff; }
.rw__f--face { background-repeat: no-repeat; }
.rw__f--word { display: grid; place-items: center; container-type: inline-size; }
.rw__f--word b { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: 26cqi; line-height: 1; letter-spacing: 0; }
.rw__f--word small { position: absolute; left: 8%; bottom: 6%; font-size: 6.5cqi; font-weight: 700; letter-spacing: .1em; opacity: .75; }
.rw__f--word.is-red { background: var(--velvet); color: #fff; }
.rw__f--word.is-ink { background: #1a1614; color: #fff; }
.rw__f--word.is-paper { background: #f6f2ec; color: var(--ink); }
.rw__code { position: absolute; top: 50%; left: calc(var(--side) * -1); width: var(--side); transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .22em; color: #e8a33a; opacity: .85; white-space: nowrap; }
.rw__year { z-index: 3; -webkit-text-stroke-color: #fff; mix-blend-mode: difference; transition: none; }
.rw__rew { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--header) + 2svh + min(26vw, 18svh)); margin: 0; display: flex; justify-content: center; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--velvet); }
.rw__rew i { width: 0; height: 0; border-style: solid; border-width: 5px 7px 5px 0; border-color: transparent var(--velvet) transparent transparent; }
.rw__rew i:nth-child(2) { margin-right: 8px; }
.rw__end { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: transparent; }
.rw.is-static { height: 100vh; height: 100svh; }
.rw.is-preview .rw__sticky { position: fixed; inset: 0; z-index: 400; }
/* l'invitation à dérouler le film */
.rw__swipe { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0 auto; width: max-content; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 6px 12px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); -webkit-tap-highlight-color: transparent; }
.rw__swipe-cap { position: relative; width: 22px; height: 36px; border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 12px; box-shadow: 0 2px 16px rgba(0, 0, 0, .28); }
.rw__swipe-cap i { position: absolute; left: 50%; bottom: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rwswipe 1.7s cubic-bezier(.5, 0, .2, 1) infinite; }
.rw__swipe-t { font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
@keyframes rwswipe { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(-14px); opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }

/* ═════════ La mosaïque de ma vie ═════════ */
.pro { position: relative; background: var(--paper); }
.pro__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pro__gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.pro__year { position: absolute; z-index: 0; left: 50%; top: calc(var(--header) + 1svh); transform: translateX(-50%); display: flex; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: min(30vw, 20svh); line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--ink); pointer-events: none; transition: opacity .3s; }
.pro__year .odo__strip { transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.pro__lines { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 48svh; pointer-events: none; }
.pro__lines::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .94) 58%, rgba(255, 255, 255, 0) 100%); }
.pro__line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(40px + 2svh); visibility: hidden; }
.pro__line.is-on { visibility: visible; }
.pro__k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pro__k b { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: 1.8rem; letter-spacing: 0; color: var(--velvet); }
.pro__t { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 12vw, 6rem); line-height: .9; letter-spacing: .005em; max-width: 14ch; }
.pro__s { margin: 12px 0 0; max-width: 36ch; font-family: var(--text); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--ink); }
.pro__cr { margin: 12px 0 0; max-width: 60ch; font-size: .72rem; line-height: 1.45; color: var(--ink-3); }
.pro__line--end .pro__t { max-width: none; }
.pro__bar { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); pointer-events: none; }
.pro__bar i { position: relative; flex: 1; height: 2px; background: var(--rule); overflow: hidden; }
.pro__bar b { position: absolute; inset: 0; background: var(--velvet); transform-origin: left; transform: scaleX(0); }
.pro.is-preview .pro__sticky { position: fixed; inset: 0; z-index: 400; background: #fff; }
/* relais : le plan rembobiné → la mosaïque */
.pro--handoff { margin-top: -100vh; margin-top: -100svh; }
.pro--handoff .pro__sticky { visibility: hidden; }
.pro--handoff.is-live .pro__sticky, .pro.is-preview .pro__sticky { visibility: visible; }
/* la fin : la photo plein écran qui ouvre la page Parcours */
.pro__card { position: absolute; inset: 0; z-index: 5; visibility: hidden; opacity: 0; overflow: hidden; background: var(--night); color: #fff; }
.pro__card-img { position: absolute; left: 50%; top: 50%; width: max(100%, 100vh); width: max(100%, 100svh); aspect-ratio: 1; transform: translate(-50%, -50%); }
.pro__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro__card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 6, 5, .82) 0%, rgba(10, 6, 5, .25) 45%, rgba(10, 6, 5, 0) 70%); }
.pro__card-t { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: calc(44px + 5svh); }
.pro__card-k { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pro__card-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--velvet); }
.pro__card-h { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 13vw, 8rem); line-height: .86; max-width: 12ch; }
.pro__card-cta { margin: 24px 0 0; }
.pro__card-cta a { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 28px; background: var(--ivory); color: var(--night); text-decoration: none; font-size: .98rem; font-weight: 500; transition: background .4s var(--ease), color .4s var(--ease); }
.pro__card-cta a:hover { background: var(--velvet); color: #fff; }
.pro__card-cta i { font-style: normal; }
.pro__card-slash { position: absolute; z-index: 2; left: -20%; right: -20%; top: 54%; height: 12px; background: var(--velvet); transform: translateX(-110%) rotate(-12deg); }
/* sans WebGL 2, ou « réduire les animations » : les étapes l'une sous l'autre */
.pro.is-static { padding: clamp(80px, 11vw, 150px) 0; }
.pro.is-static .pro__sticky { position: relative; height: auto; overflow: visible; }
.pro.is-static .pro__gl, .pro.is-static .pro__year, .pro.is-static .pro__bar { display: none; }
.pro.is-static .pro__lines { position: relative; height: auto; display: grid; gap: 40px; padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.pro.is-static .pro__lines::before { display: none; }
.pro.is-static .pro__line { position: relative; left: auto; right: auto; bottom: auto; visibility: visible; }
.pro.is-static .pro__t { font-size: clamp(2.2rem, 7vw, 3.8rem); }

@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .rw__name { left: 4vw; right: 4vw; top: calc(var(--header) + 1svh); }
  .rw__man { height: 76svh; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .rw__rew { left: var(--gutter); right: auto; top: calc(var(--header) + 2svh + min(22vw, 30svh)); }
  .pro__year { left: var(--gutter); transform: none; font-size: min(22vw, 30svh); }
  .pro__lines { right: auto; width: 52vw; height: 60%; }
  .pro__lines::before { background: linear-gradient(to right, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, 0)); -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
  .pro__line { right: auto; width: min(560px, 40vw); bottom: calc(56px + 4svh); }
  .pro__bar { right: auto; width: min(560px, 40vw); bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rw__swipe-cap i { animation: none; } }