/* ════════════════════════════════════════════════════════════════════════
   JOGGING · RAPPORT · direction par scènes · mini-séquence (desktop)
   Jost : voix graphique · Plex Mono : système · Newsreader : lecture (Voir plus)
   ════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Jost;src:url(../fonts/jost-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jost;src:url(../fonts/jost-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Mono;src:url(../fonts/PlexMono-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mono;src:url(../fonts/PlexMono-latin-ext.woff2) format('woff2');font-weight:400;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:News;src:url(../fonts/Newsreader-latin.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:News;src:url(../fonts/Newsreader-latin-ext.woff2) format('woff2');font-weight:200 800;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}

:root{
  --paper:#FAFAF8; --ink:#0A0A0A; --blue:#00B2DE; --studio:#E4E4E4; --red:#E8331C; --grey:#67625A;
  --m:48px;                                  /* marge d'écran */
  --ease:cubic-bezier(.2,.75,.2,1);          /* départ franc, arrivée douce */
  --t-ui:.2s; --t-text:.42s; --t-img:.58s; --t-field:.5s;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis:none;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Jost,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p,h1,h2,h3,h4,figure,ol,ul,blockquote{margin:0} ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}      /* jamais d'image ni de logo déformés */
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── système typographique ─────────────────────────────────────────── */
.mono{font-family:Mono,ui-monospace,monospace;font-size:12px;line-height:1.6;letter-spacing:.09em;text-transform:uppercase}
.mono-s{font-family:Mono,ui-monospace,monospace;font-size:13px;line-height:1.55;letter-spacing:.02em}
.jx{font-weight:600;letter-spacing:-.06em;line-height:.82}         /* chiffre-affiche */
.jl{font-weight:600;letter-spacing:-.045em;line-height:.9}          /* titre graphique */
.jm{font-weight:500;letter-spacing:-.02em;line-height:1.08}          /* question */
.js{font-weight:450;letter-spacing:-.005em;line-height:1.24}         /* phrase */
.nw{white-space:nowrap}

/* ── scènes ────────────────────────────────────────────────────────── */
main{position:relative}
.scene{position:relative;min-height:100vh;overflow:hidden}
.scene>*{position:absolute;z-index:2}
.on-paper{background:var(--paper)} .on-black{background:var(--ink);color:var(--paper)} .on-studio{background:var(--studio)}
.field-blue{background:var(--blue)} .field-studio{background:var(--studio)} .field-paper{background:var(--paper)}
.tag{display:inline-block;border:1px solid currentColor;padding:6px 9px 5px}
.frame{overflow:hidden}
.frame>img{width:100%;height:100%;object-fit:cover}

/* ── le fil : une seule ligne pour tout le rapport ───────────────── */
.fil{position:absolute;left:0;z-index:1;pointer-events:none;overflow:visible}
#fil-layer{opacity:0;transition:opacity .5s ease}
#fil-layer.on{opacity:1}

/* ── en-tête, rail, sommaire ───────────────────────────────────────── */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--m);
  background:var(--paper);color:var(--ink);transition:transform .45s var(--ease),background-color .4s,color .4s}
.hd[data-tone=dark]{background:var(--ink);color:var(--paper)}
.hd.is-away{transform:translateY(-100%)}
.hd-wm{width:118px;height:auto}
.hd-chap{overflow:hidden;height:20px;text-align:center}
.hd-chap span{display:block;transition:transform .28s var(--ease)}
.hd-chap.swap span{transform:translateY(-110%)}
.hd-som{justify-self:end}
.hd-som:hover,.vp-open:hover{color:var(--blue)}
.hd-flash{position:fixed;left:0;top:64px;height:3px;width:100%;background:var(--blue);z-index:49;transform:scaleX(0);transform-origin:left}
.hd-flash.go{animation:flash .6s var(--ease) forwards}
.hd.is-away+.hd-flash{top:0}
@keyframes flash{0%{transform:scaleX(0);transform-origin:left}55%{transform:scaleX(1);transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:9px;padding:8px 0 8px 40px;transition:opacity .4s}
.rail.hide{opacity:0;pointer-events:none}
.rail a,.rail span{position:relative;display:block;width:14px;height:2px;background:rgba(10,10,10,.22);font-size:0;text-decoration:none;transition:width .4s var(--ease),background .3s}
.rail a{background:rgba(10,10,10,.55)}
.rail a.on{width:28px;background:var(--blue)}
.rail a::after,.rail span::after{content:attr(data-n);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);font:11px/1 Mono,monospace;letter-spacing:.06em;color:var(--ink);opacity:0;transition:opacity .25s;white-space:nowrap}
.rail a.on::after{opacity:1;color:var(--blue)}
.rail:hover a::after,.rail:hover span::after{opacity:1}
.rail:hover span::after{opacity:.35}
.rail.dark a,.rail.dark span{background:rgba(250,250,248,.4)} .rail.dark a.on{background:var(--blue)}
.rail.dark a::after,.rail.dark span::after{color:var(--paper)}

.som{position:fixed;inset:0;z-index:60;background:var(--blue);color:var(--ink);padding:88px var(--m) clamp(24px,5vh,48px);display:grid;grid-template-columns:36vw 1fr;column-gap:4vw;overflow:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease),visibility 0s .45s;visibility:hidden}
.som.open{transition:clip-path .45s var(--ease),visibility 0s}
.som.open{clip-path:inset(0);visibility:visible}
.som-l{align-self:end;padding-bottom:6px}
.som-t{font-size:6.4vw;font-weight:600;letter-spacing:-.05em;line-height:.9;margin-bottom:22px}
.som ol{align-self:end}
.som li{border-top:1px solid rgba(10,10,10,.25);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .35s var(--ease)}
.som.open li{opacity:1;transform:none}
.som li a,.som li span{display:grid;grid-template-columns:60px 1fr;padding:clamp(6px,1.15vh,12px) 0;font-size:clamp(18px,2.9vh,30px);line-height:1.12;font-weight:500;letter-spacing:-.02em;text-decoration:none}
.som li span{opacity:.38}
.som li a:hover{padding-left:12px;transition:padding .3s var(--ease)}
.som li b{font-family:Mono,monospace;font-size:12px;font-weight:400;padding-top:.45em}
.som-x{position:absolute;right:var(--m);top:24px}

/* ── Voir plus ─────────────────────────────────────────────────────── */
.vp-open{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.vp-open::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:15px;letter-spacing:0;transition:background .25s}
.vp-open:hover::before{background:var(--blue)}
.vp{position:fixed;top:0;right:0;bottom:0;width:min(520px,40vw);z-index:70;background:var(--paper);color:var(--ink);transform:translateX(102%);transition:transform .42s var(--ease);
  box-shadow:-1px 0 0 rgba(10,10,10,.12);display:flex;flex-direction:column}
.vp.open{transform:none}
.vp-h{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;border-bottom:1px solid rgba(10,10,10,.12)}
.vp-b{overflow:auto;padding:26px 32px 48px}
.vp-sec+.vp-sec{margin-top:26px;padding-top:16px;border-top:1px solid rgba(10,10,10,.12)}
.vp-sec h3{font-family:Mono,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;color:var(--grey);margin-bottom:10px}
.vp-sec li{position:relative;padding-left:16px;font-size:16px;line-height:1.42;font-weight:420}
.vp-sec li+li{margin-top:8px}
.vp-sec li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--blue)}
.vp-sec p{font-size:18px;line-height:1.36;font-weight:500;letter-spacing:-.01em}
.vp-sec.src p{font-family:Mono,monospace;font-size:12px;line-height:1.55;font-weight:400;letter-spacing:.02em}
.vp-sec.src a{color:var(--ink);text-decoration-color:var(--blue);text-underline-offset:3px}
.vp-veil{position:fixed;inset:0;z-index:65;background:rgba(10,10,10,.24);opacity:0;pointer-events:none;transition:opacity .3s}
.vp-veil.open{opacity:1;pointer-events:auto}

/* ── vocabulaire de mouvement ─────────────────────────────────────── */
/* chaque élément se révèle dès qu'il entre dans l'écran (.in posé sur lui) ; --d reste court */
[data-a=mask-up]{clip-path:inset(100% 0 0 0)}
[data-a=mask-down]{clip-path:inset(0 0 100% 0)}
[data-a=wipe-l]{clip-path:inset(0 100% 0 0)}
[data-a=wipe-r]{clip-path:inset(0 0 0 100%)}
[data-a=rise]{opacity:0;transform:translateY(12px)}
[data-a=fade]{opacity:0}
[data-a=from-l]{opacity:0;transform:translateX(-2.4vw)}
[data-a=from-r]{opacity:0;transform:translateX(2.4vw)}
[data-a=num]{clip-path:inset(0 0 100% 0);transform:translateY(.1em)}
html [data-a]{transition:clip-path var(--t-img) var(--ease),opacity var(--t-text) var(--ease),transform var(--t-img) var(--ease);transition-delay:var(--d,0s)}
html [data-a=rise],html [data-a=fade]{transition-duration:var(--t-text)}
html [data-a=num]{transition-duration:.5s}
[data-a].in{clip-path:inset(-12% -2% -12% -2%);opacity:1;transform:none}
[data-a=mask-up].in,[data-a=mask-down].in,[data-a=wipe-l].in,[data-a=wipe-r].in{clip-path:inset(0)}
[data-zoom]{transform:scale(1.05);transition:transform .9s var(--ease)}
[data-zoom].in{transform:none}
img[data-zoom],figure img{will-change:transform}

/* ════ S01 · COUVERTURE ═══════════════════════════════════════════════ */
.s01{height:100vh;min-height:760px}
.s01-photo{left:0;top:0;width:64vw;height:100%}
.s01-photo img{object-position:50% 9%}
.s01-plate{left:64vw;top:0;width:36vw;height:44%;padding:56px var(--m) 0 44px}
.s01-plate img{width:300px;height:auto}
.s01-meta{margin-top:26px}
.s01-blue{left:64vw;top:44%;width:36vw;height:56%;padding:34px var(--m) 40px 44px;display:flex;flex-direction:column;justify-content:space-between}
.s01-blue ol li{display:grid;grid-template-columns:38px 1fr;font-size:clamp(14px,min(1.42vw,2.55vh),22px);line-height:1.3;font-weight:450;letter-spacing:-.01em}
.s01-blue ol li b{font-family:Mono,monospace;font-weight:400;font-size:11px;padding-top:5px}
.s01-blue ol a{text-decoration:none;display:contents}
.s01-blue ol a:hover span{text-decoration:underline;text-underline-offset:.2em}
.s01-blue ol li.s01-ax{margin-top:.55em}
.s01-scroll{left:44px;bottom:26px}

/* ════ S08 · 03 · LE SIGNAL ═══════════════════════════════════════════ */
.s08{height:122vh;min-height:1000px}
.s08-a{left:0;top:0;width:50vw;height:78%}
.s08-b{left:50vw;top:0;width:50vw;height:78%}
.s08-a img{object-position:50% 38%}
.s08-a,.s08-b{background:var(--paper)}
.s08-n1{left:38px;top:92px;font-size:9.6vw;color:var(--ink)}
.s08-c1{left:var(--m);top:calc(96px + 8.6vw)}
.s08-n2{left:calc(50vw + 40px);top:106px;font-size:6.4vw;color:var(--paper)}
.s08-c2{left:calc(50vw + 44px);top:calc(108px + 6vw);color:var(--paper)}
.s08-band{left:0;top:62%;width:100%;height:16%}
.s08-x{left:34px;top:calc(62% + 1.6%);font-size:10.4vw;color:var(--ink)}
.s08-band-r{right:var(--m);top:calc(62% + 2.4%);text-align:right;width:23vw}
.s08-foot{left:0;top:78%;width:100%;height:22%;display:grid;grid-template-columns:50vw 1fr;padding:34px var(--m) 0}
.s08-frein{grid-column:2;border-left:2px solid var(--red);padding-left:16px;font-size:22px;max-width:560px}
.s08-piste{grid-column:2;margin-top:22px;display:flex;gap:40px;align-items:flex-start}
.kv p:first-child{color:var(--grey)}
.kv p+p{margin-top:4px}

/* ════ S11 · 04 · LA DEMANDE DÉJÀ LÀ ══════════════════════════════════ */
.s11{height:106vh;min-height:860px}
.s11-studio{left:0;top:0;width:43vw;height:100%}
.s11-wordbox{left:0;top:0;width:24vw;height:100%}
.s11-word{position:absolute;left:4.2vw;top:94%;transform-origin:0 0;rotate:-90deg;font-size:17.4vw;font-weight:700;letter-spacing:-.05em;line-height:.8}
.s11-bag{left:10.5vw;top:17%;width:32vw}
.s11-label{left:20.5vw;top:88px;width:18vw}
.s11-price{left:20.5vw;bottom:44px;font-size:5vw;font-weight:500;letter-spacing:-.04em}
.s11-blue{left:43vw;top:0;width:57vw;height:52%}
.s11-n{left:calc(43vw + 26px);top:13%;font-size:min(16.4vw,27vh)}
.s11-s{left:calc(43vw + var(--m));bottom:calc(48% + 26px);width:48vw;font-size:min(1.8vw,3vh)}
.s11-lab{left:calc(43vw + var(--m));top:88px}
.s11-shelf{left:43vw;top:52%;width:57vw;height:26%}
.s11-bags{left:calc(43vw + 20px);top:52%;height:26%;display:flex}
.s11-bags img{height:100%;width:auto;margin-right:-1.5vw}
.s11-prices{left:calc(43vw + 38vw);top:62%}
.s11-foot{left:43vw;top:78%;width:57vw;height:22%;padding:28px var(--m) 0}
.s11-q{font-size:2.35vw;max-width:50vw}
.s11-kv{margin-top:18px;display:flex;gap:34px;align-items:flex-end}

/* ════ S14 · 05 · GAP × SUSHI CLUB ════════════════════════════════════ */
.s14{min-height:100vh;padding:184px 4vw 48px var(--m)}
.s14>.s14-main{position:relative;display:grid;grid-template-columns:1fr 75vw;column-gap:2vw}
.s14-lab{left:var(--m);top:84px}
.s14-poster{position:relative;grid-column:2;width:75vw;aspect-ratio:16/9;background:#111}
.s14-meca{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:18px}
.s14-meca li{font-size:1.66vw;font-weight:500;letter-spacing:-.02em;line-height:1.05;border-top:2px solid var(--ink);padding-top:10px}
.s14-tl{grid-column:2;display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-top:22px}
.s14-title{font-size:5.4vw}
.s14-fiche{text-align:right;white-space:nowrap}
.s14-foot{grid-column:2;margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.s14-foot .kv{flex:none}
.s14-q{font-size:2.2vw;max-width:42vw}
.s14-voice{margin-top:14px;max-width:38vw;font-size:max(15px,1.1vw);line-height:1.35;font-weight:450;color:#3d3a35}

/* ════ S17 · 06 · SUMMER '26 IN CRETE ═════════════════════════════════ */
.s17{height:112vh;min-height:900px}
.s17-poster{left:0;top:9vh;width:100vw;height:78vh}
.s17-lab{left:var(--m);top:calc(9vh + 26px);color:var(--paper)}
.s17-chap{right:var(--m);top:calc(9vh + 30px);color:var(--paper)}
.s17-title{left:40px;top:calc(9vh + 78vh - 11vw);font-size:9.3vw;color:var(--paper)}
.s17-meta{left:var(--m);top:calc(87vh + 30px)}
.s17-abs{right:var(--m);top:calc(87vh + 22px);display:flex;gap:26px}
.s17-abs li{font-size:1.36vw;font-weight:500;letter-spacing:-.01em}
.s17-s{left:var(--m);bottom:36px;font-size:1.9vw}

/* ── lecture vidéo ─────────────────────────────────────────────────── */
.play{position:absolute;z-index:3;display:flex;align-items:center;gap:16px;color:var(--paper)}
.play i{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--blue);transition:transform .45s var(--ease)}
.play i::after{content:"";margin-left:7px;border-left:24px solid var(--ink);border-top:15px solid transparent;border-bottom:15px solid transparent}
.play:hover i{transform:scale(1.08)}
.play-dark{color:var(--ink)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;opacity:0;transition:opacity .6s}
.vid iframe.ready{opacity:1}

/* ── préférence de mouvement réduit : tout est là, rien ne bouge ─── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-a],[data-zoom]{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .hd,.som,.vp{transition:none}
}
.on-black .vp-open::before{background:var(--paper);color:var(--ink)}

.chip{background:var(--paper);color:var(--ink);padding:4px 8px 3px}

/* ════ S12 · 04 · CONCEPT EXPLORATOIRE ═══════════════════════════════ */
.s12{height:100vh;min-height:820px}
.s12-field{left:0;top:0;width:100%;height:100%}
.s12-tag{left:var(--m);top:88px}
.s12-tag .tag{background:var(--paper)}
.s12-title{left:var(--m);top:140px;width:30vw;font-size:3.1vw}
.s12-card{left:36vw;top:13%;width:38vw;background:var(--paper);box-shadow:0 30px 60px -30px rgba(10,10,10,.35);display:grid;grid-template-columns:47% 1fr}
.s12-card .pic{background:var(--studio);aspect-ratio:4/5}
.s12-card .pic img{width:100%;height:100%;object-fit:contain}
.s12-card .info{padding:26px 24px 22px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.3}
.s12-card .brand{font-family:Mono,monospace;font-size:11px;letter-spacing:.09em}
.s12-card .name{font-size:19px;font-weight:500;letter-spacing:-.01em}
.s12-card .price{font-size:16px}
.s12-card .soldout{margin-top:6px;border:1px solid rgba(10,10,10,.3);color:rgba(10,10,10,.45);text-align:center;padding:11px 0;font-family:Mono,monospace;font-size:11px;letter-spacing:.12em}
.s12-card .notify{border:1.5px solid var(--ink);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.s12-card .notify b{font-weight:500}
.s12-card .notify span{font-family:Mono,monospace;font-size:10px;letter-spacing:.08em;color:var(--grey)}
.s12-alts{grid-column:1/-1;border-top:1px solid rgba(10,10,10,.12);padding:14px 20px 18px}
.s12-alts p{font-family:Mono,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}
.s12-alts ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s12-alts li{font-size:12px;line-height:1.3}
.s12-alts li img{background:var(--studio);width:100%;aspect-ratio:4/5;object-fit:contain;margin-bottom:6px}
.s12-steps{left:77vw;top:15%;width:19vw;display:flex;flex-direction:column;gap:26px}
.s12-steps li{border-top:2px solid var(--ink);padding-top:10px;font-size:1.45vw;font-weight:500;letter-spacing:-.015em;line-height:1.08}
.s12-steps li b{display:block;font-family:Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;margin-bottom:6px}
.s12-cond{left:var(--m);bottom:48px;width:30vw;background:var(--paper);padding:16px 18px 16px 18px;border-left:3px solid var(--red);font-size:1.2vw;line-height:1.3;font-weight:500}
.s12-cond small{display:block;margin-top:8px;font-family:Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--grey)}
.s12-kv{left:77vw;bottom:48px}
.badge{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font:10px/22px Mono,monospace;font-style:normal;text-align:center;letter-spacing:0}
.s12 .vp-open{color:var(--ink)}
.s12-steps li .mono-s{letter-spacing:.01em}
/* Annexe · page de démonstration, lecture longue */
.ax{max-width:1440px;margin:0 auto;padding:120px var(--m) 160px;display:grid;grid-template-columns:260px minmax(0,700px);gap:80px;justify-content:start}
.ax-nav{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:10px}
.ax-nav a{text-decoration:none;font-size:15px;font-weight:450}
.ax-nav a:hover{color:var(--blue)}
.ax-b{font-family:News,Georgia,serif;font-size:18px;line-height:1.56}
.ax-b section+section{margin-top:120px;padding-top:40px;border-top:2px solid var(--ink)}
.ax-b h2{font-family:Jost,sans-serif;font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:28px}
.ax-b h3{font-family:Mono,monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;margin:2.4em 0 .8em;padding-top:1em;border-top:1px solid rgba(10,10,10,.14)}
.ax-b h4{font-family:Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--grey);margin:1.6em 0 .6em}
.ax-b p+p,.ax-b p+ul,.ax-b ul+p,.ax-b p+ol,.ax-b ol+p,.ax-b p+.tbl,.ax-b .tbl+p,.ax-b blockquote+p,.ax-b p+blockquote{margin-top:.8em}
.ax-b ul,.ax-b ol{padding-left:1.2em;list-style:disc} .ax-b ol{list-style:decimal}
.ax-b blockquote{border-left:2px solid var(--blue);padding-left:18px;margin:1em 0}
.ax-b em{font-style:normal}
.ax-b code{font-family:Mono,monospace;font-size:.78em}
.ax-b .tbl{overflow-x:auto;margin:1em 0}
.ax-b table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.ax-b th{font-family:Mono,monospace;font-size:10.5px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;text-align:left;color:var(--grey);padding:0 12px 8px 0;vertical-align:bottom}
.ax-b td{border-top:1px solid rgba(10,10,10,.14);padding:9px 12px 9px 0;vertical-align:top}
.ax-hd{position:fixed;inset:0 0 auto 0;height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--m);background:var(--paper);z-index:50;border-bottom:1px solid rgba(10,10,10,.08)}
.ax-hd a{text-decoration:none}

.rv{width:100%;height:100%;overflow:hidden}
.rv>img{width:100%;height:100%;object-fit:cover}
.s08-a .rv>img{object-position:50% 38%}

/* ════════════════════════════ BLOC 2 · 01 · 02 · 07 · 08 ═══════════════════════════════ */
[data-a=slide]{opacity:0;transform:translateX(var(--from,8vw))}
[data-a=slide].in{clip-path:none}
[data-a=grow]{transform:scaleX(0);transform-origin:left center}
html [data-a=grow]{transition:transform .55s var(--ease);transition-delay:var(--d,0s)}
[data-a=grow].in{transform:none}
[data-a=draw]{clip-path:inset(0 100% 0 0)}
html [data-a=draw]{transition:clip-path .75s cubic-bezier(.45,.05,.3,1);transition-delay:var(--d,0s)}
[data-a=draw].in{clip-path:inset(-5% -5% -5% -5%)}
.lab{left:var(--m);top:88px}
.chip-l{background:var(--paper);color:var(--ink);padding:5px 9px 4px;display:inline-block}
.q{font-weight:500;letter-spacing:-.02em;line-height:1.08}
.kv-row{display:flex;gap:34px;align-items:flex-end}

/* ── S03 · 01 · un univers plus large qu'une boutique ── */
.s03{height:112vh;min-height:900px}
.s03-sig{left:var(--m);top:124px;font-size:3.4vw}
.s03-sig small{display:block;margin-top:10px;font-family:Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.s03-strip{left:var(--m);top:31%;height:41vh;display:flex;gap:18px;will-change:transform}
.s03-tile{position:relative;height:100%;flex:none;overflow:hidden}
.s03-tile img{height:100%;width:auto}
.s03-tile .t{position:absolute;left:12px;bottom:12px}
.s03-type{display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px}
.s03-type b{font-size:2.3vw;font-weight:600;letter-spacing:-.03em;line-height:1}
.s03-type p{font-size:1.15vw;line-height:1.3;font-weight:450}
.s03-data{left:var(--m);top:calc(31% + 41vh + 22px)}
.s03-foot{left:var(--m);right:var(--m);bottom:48px;display:flex;justify-content:space-between;align-items:flex-end}
.s03-q{font-size:2.3vw;max-width:48vw}

/* ── S04 · 01 · repérer tôt, sur une ligne de temps ── */
.s04{height:100vh;min-height:820px}
.s04-h{left:var(--m);top:124px;font-size:5.2vw;font-weight:600;letter-spacing:-.04em;line-height:.95}
.s04-s{left:var(--m);top:calc(124px + 6.4vw);width:46vw;font-size:1.7vw}
.s04-axis{left:8vw;top:60%;width:80vw;height:2px;background:var(--ink)}
.s04-prize{left:86.6vw;top:calc(60% - 36px);text-align:center;width:3vw}
.s04-prize::after{content:"";display:block;width:2px;height:24px;background:var(--blue);margin:6px auto 0}
.s04-tick{top:calc(60% - 26px)}
.s04-item{width:8.4vw}
.s04-item img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--studio)}
.s04-item p{margin:8px 0;white-space:nowrap}
.s04-item.r p{direction:rtl;text-align:right} .s04-item.r p span{direction:ltr;unicode-bidi:embed}
.s04-item::after{content:"";position:absolute;left:50%;width:1px;background:var(--ink)}
.s04-up{bottom:calc(40% + 30px)} .s04-up::after{top:100%;height:30px}
.s04-dn{top:calc(60% + 30px)} .s04-dn::after{bottom:100%;height:30px}
.s04-dot{width:12px;height:12px;border-radius:50%;background:var(--blue);top:calc(60% - 5px)}
.s04-foot{left:var(--m);right:var(--m);bottom:44px;display:flex;justify-content:space-between;align-items:flex-end}

/* ── S05 · 02 · trois tranches de prix ── */

/* ── S06 · 02 · une pratique commune, sur un axe ── */
.s06{height:92vh;min-height:760px}
.s06-t{left:var(--m);top:110px;width:54vw;font-size:2.6vw}
.s06-axis{left:6vw;top:62%;width:88vw;height:2px;background:var(--ink)}
.s06-tk{top:calc(62% + 14px)}
.s06-m{top:calc(62% - 7px);width:0}
.s06-m i{position:absolute;left:-8px;top:0;width:16px;height:16px;border-radius:50%;background:var(--blue)}
.s06-m .up{position:absolute;left:-2vw;bottom:34px;width:16vw}
.s06-m .dn{position:absolute;left:-2vw;top:30px;width:16vw}
.s06-m b{display:block;font-size:3.6vw;font-weight:600;letter-spacing:-.04em;line-height:1}
.s06-foot{left:var(--m);right:var(--m);bottom:44px;display:flex;justify-content:space-between;align-items:flex-end}

/* ── S07 · 02 · signer / annoncer ── */
.s07{height:104vh;min-height:860px}
.s07-w{left:0;font-size:13.5vw;font-weight:600;letter-spacing:-.055em;line-height:.9;white-space:nowrap;will-change:transform}
.s07-w1{top:15%} .s07-w2{top:47%}
.s07-n{right:var(--m);display:flex;gap:26px;align-items:flex-end}
.s07-n1{top:calc(15% + 3vw)} .s07-n2{top:calc(47% + 3vw)}
.s07-n div{background:var(--paper);padding:12px 14px 10px;min-width:12vw}
.s07-n div img{height:22px;width:auto;display:block;margin-bottom:10px}
.s07-n div b{display:block;font-size:3.2vw;font-weight:600;letter-spacing:-.04em;line-height:1}
.s07-foot{left:var(--m);right:var(--m);bottom:44px;display:grid;grid-template-columns:1fr auto;gap:4vw;align-items:end}
.s07-s{font-size:1.7vw}

/* ── S20 · 07 · une image presque seule ── */
.s20{height:100vh;min-height:780px}
.s20-img{left:0;top:0;width:100%;height:100%}
.s20-lab{left:var(--m);top:88px}
.s20-panel{left:var(--m);bottom:48px;width:40vw;background:var(--paper);padding:26px 28px 22px}
.s20-panel .q{font-size:2.8vw}
.s20-panel ul{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:16px}

/* ── S21 · 07 · l'archive ── */
.s21{height:122vh;min-height:1000px}
.s21-lab{left:var(--m);top:88px;color:var(--paper)}
.s21-row{left:0;white-space:nowrap;font-size:4.4vw;font-weight:500;letter-spacing:-.03em;color:#7d786f;will-change:transform}
.s21-row span{margin-right:3vw} .s21-row .ev{color:var(--blue)}
.s21-r1{top:15%} .s21-r2{top:28%} .s21-r3{top:41%}
.s21-key{left:var(--m);top:62%;width:52vw;color:var(--paper)}
.s21-key .q{font-size:4.2vw}
.s21-key p+p{margin-top:14px}
.s21-ev{left:61vw;top:58%;width:31vw;background:var(--paper);padding:10px 10px 8px}
.s21-ev img{width:100%}
.s21-kv{left:var(--m);bottom:56px;color:var(--paper)}
.s21-kv .kv p:first-child{color:#a39e95}

/* ── S22 · 07 · événement ou série ── */
.s22{height:104vh;min-height:860px}
.s22-cap{left:44vw;top:0;width:56vw;height:60%}
.s22-cap img{object-position:50% 45%}
.s22-doc{left:6vw;top:15%;width:34vw}
.s22-q{left:var(--m);top:64%;font-size:3.8vw}
.s22-kv{left:var(--m);bottom:48px}
.s22-ref{left:60vw;top:65%;width:32vw;border-top:2px solid var(--ink);padding-top:16px}
.s22-ref img{width:80px;height:auto;margin:14px 0 12px}
.s22-ref .quote{font-size:2.2vw;font-weight:500;letter-spacing:-.02em;line-height:1.05}

/* ── S23 · 08 · Axel Arigato : la rue ── */
.s23{height:auto;min-height:max(880px,106vh,calc((50vh + 6.4vw + 96px + max(140px,620px - 34vw)) / .78))}
.s23-lab{left:var(--m);top:88px}
.s23-logo{left:var(--m);top:130px;width:230px}
.s23-band{left:0;top:22%;width:100%;height:50vh}
.s23-band img{object-position:50% 50%}
.s23-sneaker{right:6vw;top:48%;width:19vw}
.s23-data{left:var(--m);top:calc(22% + 50vh + 30px);display:flex;align-items:flex-end;gap:22px}
.s23-data b{font-size:8vw;font-weight:600;letter-spacing:-.05em;line-height:.8}
.s23-data p{font-size:1.6vw;line-height:1.2;max-width:26vw;padding-bottom:6px}
.s23-foot .kv{flex:none}
.s23-foot{left:var(--m);top:calc(22% + 50vh + 30px + 6.4vw + 26px);right:30vw;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.s23-q{font-size:2.6vw}

/* ── S24 · 08 · SPUNGE : l'objet ── */
.s24{height:100vh;min-height:800px}
.s24-img{left:0;top:0;width:100%;height:100%}
.s24-img::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(10,10,10,.78) 0,rgba(10,10,10,.35) 32%,rgba(10,10,10,0) 52%)}
.s24-lab{left:var(--m);top:88px}
.s24-logo{left:var(--m);top:130px;background:var(--paper);padding:14px 18px}
.s24-logo img{width:130px;height:auto}
.s24-circle{left:57vw;top:24%;width:36vw;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff}
.s24-circle img{width:100%;height:100%;object-fit:cover;will-change:transform}
.s24-foot{left:var(--m);bottom:48px;width:46vw;color:var(--paper)}
.s24-q{font-size:2.5vw}
.s24-fiche{margin-top:18px;background:var(--paper);color:var(--ink);padding:12px 16px 10px;display:inline-block}

/* ── S25 · 08 · Franck Pellegrino : la lettre ── */

@media (prefers-reduced-motion: reduce){.s03-strip{right:var(--m);overflow-x:auto}}

/* ════════════════════════════ BLOC 3 · 03 · 05 · 06 · 09 · 10 ═══════════════════════════════
   Scènes en flux : la composition suit le contenu, jamais la hauteur de l'écran. */
.scene.flow{height:auto;min-height:100vh;padding:150px var(--m) 56px}
.scene.flow>*{position:relative}
.scene.flow>.lab{position:absolute;left:var(--m);top:88px}
.on-blue{background:var(--blue);color:var(--ink)}
.on-blue .kv p:first-child{color:rgba(10,10,10,.66)}
.on-blue .vp-open:hover{color:var(--paper)}
[data-a=strike]{position:relative;display:inline-block}
[data-a=strike]::after{content:"";position:absolute;left:-3px;right:-3px;top:55%;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease) var(--d,0s)}
[data-a=strike].in{clip-path:none}
[data-a=strike].in::after{transform:none}
[data-py]{will-change:transform}

/* ── S09 · 03 · ce qui change en même temps ── */
.s09-h{font-size:5.6vw;max-width:72vw}
.s09-vars{display:grid;grid-template-columns:repeat(5,1fr);gap:0 2vw;margin-top:6vh;border-top:2px solid var(--ink)}
.s09-vars li{padding-top:14px}
.s09-vars b{display:block;color:var(--grey);margin-bottom:8px}
.s09-vars span{display:block;font-size:1.75vw;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.s09-vars small{display:block;margin-top:10px;color:#3d3a35;max-width:17vw}
.s09-six{margin-top:5vh;font-size:1.5vw;font-weight:500;letter-spacing:-.01em;line-height:1.25;border-left:3px solid var(--red);padding-left:16px;max-width:54vw}
.s09-band{margin:9vh calc(-1*var(--m)) 0;padding:10vh var(--m) 11vh;display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;align-items:start}
.s09-k{color:#a39e95;margin-bottom:22px}
.s09-pair{display:flex;gap:4vw}
.s09-pair b{display:block;font-size:7.4vw;color:var(--paper)}
.s09-pair p{margin-top:16px;color:#d4cfc6;max-width:19vw}
.s09-ref{margin-top:26px;color:#a39e95}
.s09-s{margin-top:6vh;font-size:2.15vw;max-width:40vw;color:var(--paper)}
.s09-sheet{background:var(--paper);color:var(--ink);padding:26px 28px 26px}
.s09-sheet .s09-k{color:var(--grey)}
.s09-sheet ol li{position:relative;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(10,10,10,.14);padding:10px 0 9px 26px;font-size:15px;line-height:1.3}
.s09-sheet ol li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:12px;border:1.5px solid var(--ink);transition:background-color .2s var(--ease)}
.s09-sheet.in ol li::before{background:var(--blue)}
.s09-sheet ol li:nth-child(2)::before{transition-delay:.3s}.s09-sheet ol li:nth-child(1)::before{transition-delay:.25s}.s09-sheet ol li:nth-child(3)::before{transition-delay:.35s}.s09-sheet ol li:nth-child(4)::before{transition-delay:.4s}
.s09-sheet ol li:nth-child(5)::before{transition-delay:.45s}.s09-sheet ol li:nth-child(6)::before{transition-delay:.5s}.s09-sheet ol li:nth-child(7)::before{transition-delay:.55s}.s09-sheet ol li:nth-child(8)::before{transition-delay:.6s}
.s09-sheet i{font-style:normal;font-family:Mono,monospace;font-size:12px;letter-spacing:.04em;color:var(--grey);white-space:nowrap}
.s09-note{margin-top:22px;font-size:1.7vw;border-top:2px solid var(--ink);padding-top:16px}
.s09-foot{margin-top:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}

/* ── S13 · 05 · « dix » ── */
.s13{height:100vh;min-height:680px}
.s13-img{left:0;top:0;width:100%;height:100%}
.s13-img img{object-position:42% 50%}
.s13-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 38%,rgba(10,10,10,.86) 100%)}
.s13-lab{left:var(--m);top:88px;color:var(--paper)}
.s13-cap{right:var(--m);top:84px}
.s13-q{left:var(--m);bottom:56px;width:min(66vw,1120px);font-size:3.3vw;color:var(--paper)}

/* ── S15 · 05 · le matériau, et ce qu'on ne copie pas ── */
.s15-grid{display:grid;grid-template-columns:30vw 1fr;gap:4vw;align-items:start}
.s15-h{font-size:5vw}
.s15-rule{margin-top:30px;font-size:1.45vw;max-width:26vw}
.s15-list li{display:grid;grid-template-columns:1fr 1fr;gap:2vw;align-items:baseline;border-top:1px solid rgba(10,10,10,.16);padding:13px 0 12px}
.s15-list li:last-child{border-bottom:1px solid rgba(10,10,10,.16)}
.s15-list span{font-size:1.55vw;font-weight:500;letter-spacing:-.015em;line-height:1.12}
.s15-list em{font-style:normal;color:var(--grey);font-size:10px;margin-left:8px;vertical-align:.35em;border:1px solid currentColor;padding:2px 5px 1px;white-space:nowrap}
.s15-list i{font-style:normal;color:#3d3a35}
.s15-copy{margin-top:10vh;display:grid;grid-template-columns:30vw 1fr;gap:1.6vw 4vw;align-items:center}
.s15-no{font-size:3.4vw;font-weight:600;letter-spacing:-.04em;line-height:1;border-left:4px solid var(--red);padding-left:20px}
.s15-strike{display:flex;flex-wrap:wrap;gap:6px 2.4vw}
.s15-strike li{font-size:2.4vw;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#5d5850}
.s15-meca{grid-column:2;font-size:1.45vw}
.s15-foot{margin-top:8vh;display:flex;justify-content:flex-end}

/* ── S16 · 06 · la question, sur un lieu de Jogging ── */
.s16{height:100vh;min-height:720px}
.s16-img{left:38vw;top:0;width:62vw;height:100%}
.s16-img img{object-position:55% 50%}
.s16-lab{left:var(--m);top:88px}
.s16-cap{left:calc(38vw + 24px);bottom:22px;background:var(--paper);padding:5px 9px 4px}
.s16-q{left:var(--m);top:clamp(150px,30%,300px);width:31vw;font-size:2.7vw}
.s16-s{left:var(--m);bottom:56px;width:28vw;font-size:max(15px,1.15vw)}

/* ── S18 · 06 · Marseille, mais celle de Jogging ── */
.s18-h{font-size:5vw}
.s18-not{margin-top:16px;color:var(--grey)}
.s18-seq{height:41vw;margin-top:7vh}
.s18-seq>figure{position:absolute}
.s18-seq .frame{overflow:hidden}
.s18-seq img{width:100%;height:auto}
.s18-seq figcaption{margin-top:10px}
.s18-a{left:0;top:3vw;width:24vw}
.s18-b{left:28vw;top:0;width:44vw}
.s18-c{left:calc(100% - 20vw);top:9vw;width:20vw}
.s18-low{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:5vh;align-items:end}
.s18-list li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid rgba(10,10,10,.16);padding:10px 0 9px}
.s18-list li:last-child{border-bottom:1px solid rgba(10,10,10,.16)}
.s18-list span{font-size:1.4vw;font-weight:500;letter-spacing:-.01em}
.s18-list i{font-style:normal;color:var(--grey);text-align:right}
.s18-s{font-size:2.3vw}

/* ── S19 · 06 · le langage qui existe déjà ── */
.s19-top{display:grid;grid-template-columns:auto 1fr;gap:4vw;align-items:end}
.s19-hex{font-size:9.4vw}
.s19-hs{font-size:1.45vw;max-width:34vw;padding-bottom:1.3vw}
.s19-objs{display:grid;grid-template-columns:repeat(4,17vw);gap:1.4vw;justify-content:end;margin-top:6vh}
.s19-objs figure{background:var(--studio)}
.s19-objs img{width:100%;aspect-ratio:4/5;object-fit:cover}
.s19-objs figcaption{background:var(--paper);padding:8px 10px 7px}
.s19-pistes{margin-top:8vh}
.s19-k{margin-bottom:16px}
.s19-pistes ol{display:grid;grid-template-columns:repeat(5,1fr);gap:2vw;border-top:2px solid var(--ink)}
.s19-pistes li{padding-top:12px}
.s19-pistes b{display:block;font-size:2.4vw;font-weight:600;letter-spacing:-.03em;line-height:1}
.s19-pistes i{display:block;font-style:normal;margin-top:8px}
.s19-foot{margin-top:7vh;display:flex;justify-content:flex-end}

/* ── S26 · 09 · un signal n'est pas une preuve ── */
.s26-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2vw 4vw;flex-wrap:wrap}
.s26-h{font-size:6vw}
.s26-path{color:var(--grey);padding-bottom:1vw}
.s26-path i{font-style:normal;color:var(--ink)}
.s26-steps{margin-top:10vh}
.s26-steps li{display:grid;grid-template-columns:8vw 16vw 25vw 1fr;gap:2vw;align-items:baseline;border-top:1px solid rgba(10,10,10,.16);padding:22px 1.4vw 20px 0}
.s26-steps li.l2{margin-left:4vw}.s26-steps li.l3{margin-left:8vw}.s26-steps li.l4{margin-left:12vw}
.s26-steps b{color:var(--grey)}
.s26-steps .n{font-size:2vw;font-weight:600;letter-spacing:-.03em;line-height:1}
.s26-steps .qq{font-size:1.35vw;font-weight:450;line-height:1.2}
.s26-steps i{font-style:normal;color:#3d3a35}
.s26-steps li.l3{background:var(--blue);border-top-color:var(--blue);padding-left:1.4vw;margin-left:calc(8vw - 1.4vw)}
.s26-steps li.l3 b,.s26-steps li.l3 i{color:var(--ink)}
.s26-low{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:10vh;align-items:start}
.s26-ex p.mono{color:var(--grey);margin-bottom:12px}
.s26-ex-a{font-size:1.9vw;font-weight:500;letter-spacing:-.02em;line-height:1.12;margin-bottom:16px}
.s26-ex-b,.s26-ex-c{font-size:1.2vw;line-height:1.3;display:grid;grid-template-columns:11vw 1fr;gap:1vw;align-items:baseline;padding:8px 0}
.s26-ex-b{border-top:1px solid rgba(10,10,10,.16)}
.s26-ex-c{border-top:1px solid rgba(10,10,10,.16);box-shadow:inset 3px 0 0 var(--red);padding-left:12px}
.s26-ex span.mono{color:var(--grey)}
.s26-notes p{font-size:max(15px,1.25vw);line-height:1.35;font-weight:450;max-width:36vw}
.s26-notes p+p{margin-top:16px}

/* ── S27 · 09 · public / interne ── */
.s27-h{font-size:5vw}
.s27-m{margin-top:7vh}
.s27-row{position:relative;z-index:1;display:grid;grid-template-columns:14vw 25vw 1fr;border-top:1px solid rgba(10,10,10,.16)}
.s27-row>*{padding:18px 1.6vw 17px}
.s27-row>b{padding-left:0;color:var(--grey)}
.s27-row .pub{font-size:max(14px,1.15vw);line-height:1.3;color:#3d3a35}
.s27-row .pub.nil{color:#a8a39b;font-size:1.8vw;line-height:1}
.s27-row .int{font-size:1.45vw;font-weight:500;letter-spacing:-.01em;line-height:1.22}
.s27-hd{border-top:0}
.s27-hd>span{padding-top:0;padding-bottom:12px}
.s27-in-h{padding-top:14px!important}
.s27-hd .mono{color:var(--grey)} .s27-hd .s27-in-h{color:var(--ink)}
.s27-field{position:absolute!important;z-index:0;top:0;bottom:0;left:39vw;right:calc(-1*var(--m))}
.s27-low{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;margin-top:9vh;align-items:end}
.s27-cav{border-left:3px solid var(--red);padding-left:20px}
.s27-cav .mono{color:var(--grey)}
.s27-cav-t{font-size:2.1vw;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:10px 0 14px}
.s27-cav .mono-s{max-width:40vw}
.s27-side .js{font-size:max(15px,1.3vw);margin-bottom:24px}

/* ── S28 · 10 · cinq pistes ── */
.s28-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2vw 4vw}
.s28-h{font-size:5vw}
.s28-sub{color:var(--grey);padding-bottom:.8vw}
.s28-cols,.s28-pistes dl{display:grid;grid-template-columns:22vw 21vw 19vw 1fr}
.s28-cols{grid-template-columns:16vw 22vw 21vw 19vw 1fr;margin-top:8vh;color:var(--grey)}
.s28-cols span{padding:0 1.4vw 12px}
.s28-cols span:first-child{padding-left:0}
.s28-cols span:nth-child(3){color:var(--ink)}
.s28-cols .stop{color:var(--ink)}
.s28-wrap{position:relative}
.s28-q-field{position:absolute!important;z-index:0;top:0;bottom:0;left:38vw;width:21vw}
.s28-pistes{position:relative;z-index:1}
.s28-pistes>li{display:grid;grid-template-columns:16vw 1fr;border-top:1px solid rgba(10,10,10,.2)}
.s28-pistes>li:last-child{border-bottom:1px solid rgba(10,10,10,.2)}
.s28-pistes h3{margin:0;padding:20px 0 22px;font-weight:inherit}
.s28-pistes h3 b{display:block;font-size:5.6vw;font-weight:600;letter-spacing:-.05em;line-height:.8}
.s28-pistes h3 span{display:block;margin-top:12px;font-family:Mono,monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.s28-pistes dl{margin:0}
.s28-pistes dl>div{padding:22px 1.4vw 24px}
.s28-pistes dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.s28-pistes dd{margin:0;font-size:max(14px,1.1vw);line-height:1.32;font-weight:420}
.s28-pistes .qc dd{font-size:1.36vw;font-weight:500;letter-spacing:-.012em;line-height:1.18}
.s28-pistes .sc dd{border-left:3px solid var(--red);padding-left:12px}
.s28-foot{margin-top:6vh;display:flex;justify-content:space-between;align-items:flex-end;gap:5vw}
.s28-foot .js{font-size:max(15px,1.3vw);max-width:58vw}

/* ── S29 · 10 · pour finir ── */
.scene.flow.s29{padding:0 0 44px}
.s29-blue{padding:15vh var(--m) 15vh}
.s29-blue>.mono{max-width:46vw}
.s29-qs{margin-top:6vh}
.s29-qs li{display:grid;grid-template-columns:6vw 1fr;border-top:1px solid rgba(10,10,10,.28);padding:3.2vh 0 3.4vh}
.s29-qs li:last-child{border-bottom:1px solid rgba(10,10,10,.28)}
.s29-qs b{padding-top:.9vw}
.s29-qs span{font-size:3.3vw;font-weight:500;letter-spacing:-.025em;line-height:1.06;max-width:72vw}
.s29-end{padding:20vh var(--m) 19vh}
.s29-last{font-size:3.9vw;max-width:90vw}
.s29-last span{display:block;font-size:1.95em;letter-spacing:-.035em;line-height:1;margin-top:.12em}
.s29-colo{display:grid;grid-template-columns:auto 1fr auto;gap:4vw;align-items:end;padding:0 var(--m)}
.s29-wm{width:220px}
.s29-meta .mono-s{margin-top:8px;max-width:46vw;color:var(--grey)}
.s29-nav{display:flex;flex-direction:column;gap:10px;text-align:right}
.s29-nav a{text-decoration:none}
.s29-nav a:hover{color:var(--blue)}
@media (prefers-reduced-motion: reduce){[data-a=strike]::after{transform:none!important;transition:none!important}.s09-sheet ol li::before{background:var(--blue)}}

/* ════════════════════════════ RESPONSIVE · tablette ≤ 1024 · mobile ≤ 640 ═══════════════════════════════
   Pas une version comprimée du desktop : chaque scène passe en flux, recompose ses images et garde sa hiérarchie. */
@media (max-width: 1024px){
  :root{--m:28px}
  html{scroll-padding-top:56px}
  .scene{height:auto!important;min-height:0!important;padding:76px var(--m) 60px}
  .scene>*{position:relative;inset:auto;z-index:2}
  .scene.flow{padding:76px var(--m) 60px}
  .scene>.lab,.scene.flow>.lab{position:relative;left:auto;top:auto;margin-bottom:18px}
  [data-drift],[data-py],[data-scale]{transform:none!important}
  .rail{display:none}
  .hd{height:56px;grid-template-columns:auto 1fr auto;gap:18px}
  .hd-wm{width:96px}
  .hd-chap{text-align:left;font-size:11px}
  .hd-flash{top:56px}
  .hd.is-away+.hd-flash{top:0}
  .kv-row{flex-wrap:wrap;gap:16px 30px}
  .mono-s{font-size:13px}
  .vp{width:100%;max-width:600px}
  .vp-h{padding:18px 24px}.vp-b{padding:22px 24px 48px}
  .play i{width:68px;height:68px}.play i::after{border-left-width:19px;border-top-width:12px;border-bottom-width:12px;margin-left:6px}
  .som{grid-template-columns:1fr;padding:76px var(--m) 32px;align-content:start;row-gap:28px}
  .som-l{align-self:start}
  .som-t{font-size:clamp(44px,10vw,76px)}
  .som ol{align-self:start}
  .som li a,.som li span{grid-template-columns:44px 1fr;font-size:clamp(19px,3.2vw,26px);padding:10px 0}

  /* S01 · couverture */
  .scene.s01{padding:0}
  .s01-photo{width:100%;height:min(62svh,860px);min-height:400px}
  .s01-photo img{object-position:50% 10%}
  .s01-plate{width:100%;height:auto;padding:30px var(--m) 30px}
  .s01-plate img{width:clamp(190px,34vw,290px)}
  .s01-meta{margin-top:18px}
  .s01-blue{width:100%;height:auto;display:block;padding:26px var(--m) 34px}
  .s01-blue ol{margin-top:16px}
  .s01-blue ol li{font-size:clamp(17px,2.7vw,22px);padding:3px 0}

  /* S03 */
  .s03-sig{font-size:clamp(26px,5.6vw,44px)}
  .s03-strip{height:auto;margin:30px calc(-1*var(--m)) 0;padding:0 var(--m);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .s03-strip::-webkit-scrollbar{display:none}
  .s03-tile{height:clamp(280px,58vw,460px);scroll-snap-align:start}
  .s03-type[style]{width:clamp(240px,52vw,380px)!important}
  .s03-type b{font-size:clamp(24px,4.4vw,34px)}
  .s03-type p{font-size:15px}
  .s03-data{margin-top:14px}
  .s03-foot{display:block;margin-top:44px}
  .s03-q{font-size:clamp(23px,4.4vw,34px);max-width:none;margin-bottom:22px}

  /* S04 · la ligne devient une rangée de trois */
  .s04{display:grid;grid-template-columns:repeat(3,1fr);column-gap:14px;align-items:start}
  .s04>*{grid-column:1/-1}
  .s04-h{font-size:clamp(34px,8.4vw,64px);line-height:1}
  .s04-s{width:auto;font-size:clamp(18px,3.2vw,24px);margin:16px 0 30px}
  .s04-axis,.s04-prize,.s04-tick,.s04-dot{display:none}
  .s04 .s04-item{grid-column:auto;left:auto!important;width:auto;display:flex;flex-direction:column}
  .s04 .s04-up{flex-direction:column-reverse;justify-content:flex-end}
  .s04-item::after{display:none}
  .s04-item p{white-space:normal;margin:10px 0 0}
  .s04-item.r p{direction:ltr;text-align:left}
  .s04-foot{display:block;margin-top:36px}
  .s04-foot .kv-row{margin-top:18px}

  /* S05 */

  /* S06 · l'axe devient trois barres */
  .s06-t{width:auto;font-size:clamp(24px,5vw,40px)}
  .s06-axis,.s06-tk{display:none}
  .s06 .s06-m{left:auto!important;width:auto;margin-top:28px;padding-top:14px;border-top:1px solid rgba(10,10,10,.16);display:grid;grid-template-columns:1fr auto;align-items:end}
  .s06-m i{display:none}
  .s06-m .up,.s06-m .dn{position:static;width:auto}
  .s06-m::after{content:"";grid-column:1/-1;height:10px;margin-top:12px;width:calc(var(--v)*1%);background:var(--blue)}
  .s06-m b{font-size:clamp(34px,8vw,56px)}
  .s06-m .dn img{margin-top:8px!important}
  .s06-foot{display:block;margin-top:40px}
  .s06-foot .q{font-size:clamp(20px,3.8vw,28px)!important;max-width:none!important;margin-bottom:14px}

  /* S07 */
  .s07{display:flex;flex-direction:column}
  .s07 .field-blue{position:absolute;inset:0}
  .s07-w{font-size:clamp(64px,17vw,150px);order:1}
  .s07-n1{order:2;margin:12px 0 30px}
  .s07-w2{order:3}
  .s07-n2{order:4;margin:12px 0 10px}
  .s07-n{flex-wrap:wrap;gap:12px}
  .s07-n div{min-width:0;flex:1}
  .s07-n div b{font-size:clamp(30px,7vw,48px)}
  .s07-foot{order:5;display:block;margin-top:36px}
  .s07-s{font-size:clamp(19px,3.4vw,26px);margin-bottom:18px}

  /* S08 · le diptyque garde ses chiffres posés sur les images */
  .scene.s08{padding:0;display:grid;grid-template-columns:1fr 1fr}
  .s08>*{grid-column:auto}
  .s08-a,.s08-b{width:auto;height:auto;aspect-ratio:3/4}
  .s08-a{grid-area:1/1}.s08-b{grid-area:1/2}
  .s08-n1{grid-area:1/1;align-self:start;margin:62px 0 0 12px;font-size:12.2vw}
  .s08-c1{grid-area:1/1;align-self:end;margin:0 10px 12px 12px}
  .s08-c1 .chip{display:inline;line-height:1.9;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .s08-n2{grid-area:1/2;align-self:start;margin:70px 0 0 12px;font-size:7.6vw}
  .s08-c2{grid-area:1/2;align-self:end;margin:0 10px 12px 12px}
  .s08-band{grid-area:2/1/3/3;width:auto;height:auto}
  .s08-x{grid-area:2/1/3/3;margin:18px var(--m) 14px;font-size:clamp(46px,12.6vw,110px);white-space:normal}
  .s08-band-r{grid-area:3/1/4/3;width:auto;text-align:left;margin:14px var(--m) 0}
  .s08-foot{grid-area:4/1/5/3;width:auto;height:auto;display:block;padding:26px var(--m) 56px}
  .s08-frein{max-width:none;font-size:clamp(19px,3.4vw,24px)}
  .s08-piste{flex-wrap:wrap;gap:16px 30px}

  /* S09 */
  .s09-h{font-size:clamp(36px,9vw,72px);max-width:none}
  .s09-vars{grid-template-columns:repeat(3,1fr);gap:22px 18px}
  .s09-vars span{font-size:clamp(18px,3vw,24px)}
  .s09-vars small{max-width:none}
  .s09-six{font-size:clamp(17px,2.8vw,22px);max-width:none}
  .s09-band{grid-template-columns:1fr;gap:44px;margin:56px calc(-1*var(--m)) 0;padding:52px var(--m) 56px}
  .s09-pair b{font-size:clamp(44px,12vw,92px)}
  .s09-pair p{max-width:none}
  .s09-s{font-size:clamp(21px,3.8vw,30px);max-width:none}
  .s09-note{font-size:clamp(19px,3.2vw,26px)}
  .s09-sheet ol li{font-size:14px}

  /* S11 · trois bandes superposées : l'objet, le chiffre, l'étagère */
  .scene.s11{padding:0;display:grid;grid-template-columns:1fr}
  .s11>*{grid-column:1}
  .s11-studio{grid-row:1;width:auto;height:auto}
  .s11-wordbox{grid-row:1;width:auto;height:auto;overflow:hidden;align-self:start;padding-top:74px}
  .s11-word{position:relative;left:auto;top:auto;rotate:0deg;font-size:21.6vw;padding-left:calc(var(--m) - .04em);line-height:.86}
  .s11-bag{grid-row:1;width:min(64vw,520px);justify-self:center;margin:calc(74px + 12vw) 0 128px}
  .s11-label{grid-row:1;width:auto;align-self:end;margin:0 var(--m) 104px}
  .s11-price{grid-row:1;align-self:end;justify-self:start;margin:0 var(--m) 26px;font-size:clamp(36px,9vw,64px)}
  .s11-blue{grid-row:2;width:auto;height:auto}
  .s11-lab{grid-row:2;align-self:start;margin:26px var(--m) 0}
  .s11-n{grid-row:2;align-self:start;margin:58px var(--m) 0 calc(var(--m) - .06em);font-size:clamp(84px,25vw,200px)}
  .s11-s{grid-row:2;align-self:start;width:auto;margin:calc(66px + clamp(84px,25vw,200px) * .9) var(--m) 34px;font-size:clamp(18px,3.2vw,24px)}
  .s11-shelf{grid-row:3;width:auto;height:auto}
  .s11-bags{grid-row:3;height:auto;justify-content:center;padding:22px 0 56px;display:flex}
  .s11-bags img{height:clamp(130px,34vw,280px);margin-right:-2vw}
  .s11-prices{grid-row:3;align-self:end;justify-self:center;margin:0 0 16px;text-align:center}
  .s11-foot{grid-row:4;width:auto;height:auto;padding:30px var(--m) 60px}
  .s11-q{font-size:clamp(22px,4.2vw,32px);max-width:none}
  .s11-kv{flex-wrap:wrap;gap:16px 30px}

  /* S12 · concept exploratoire */
  .s12{padding-top:76px}
  .s12-field{position:absolute!important;inset:0!important}
  .s12-title{width:auto;font-size:clamp(26px,5.6vw,42px);margin-top:4px}
  .s12-card{width:100%;max-width:640px;margin-top:26px}
  .s12-steps{width:auto;margin-top:30px;gap:18px}
  .s12-steps li{font-size:clamp(18px,3.2vw,24px)}
  .s12-cond{width:auto;max-width:640px;margin-top:26px;font-size:clamp(16px,2.8vw,20px)}
  .s12-kv{margin-top:20px}
  .s12-card .notify{flex-wrap:wrap;gap:2px 8px}

  /* S13 */
  .scene.s13{padding:0;display:grid}
  .s13>*{grid-column:1}
  .s13-img{grid-row:1;width:auto;height:auto;aspect-ratio:4/5;max-height:88svh}
  .s13-img::after{background:linear-gradient(180deg,rgba(10,10,10,.35) 0,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 60%,rgba(10,10,10,.9) 100%)}
  .s13-lab{grid-row:1;align-self:start;margin:70px var(--m) 0}
  .s13-cap{grid-row:1;align-self:end;justify-self:start;margin:0 var(--m) 18px}
  .s13-q{grid-row:2;width:auto;padding:28px var(--m) 64px;font-size:clamp(24px,5.2vw,40px)}

  /* S14 · Gap */
  .s14{padding:92px var(--m) 60px}
  .s14-lab{margin-bottom:20px}
  .s14>.s14-main{grid-template-columns:1fr}
  .s14-poster{grid-column:1;grid-row:1;width:100%}
  .s14 .play{left:16px!important;bottom:16px!important}
  .s14-tl{grid-column:1;grid-row:2;flex-wrap:wrap;gap:6px 20px;margin-top:18px}
  .s14-title{font-size:clamp(40px,10vw,76px);white-space:normal}
  .s14-fiche{text-align:left}
  .s14-meca{grid-column:1;grid-row:3;flex-direction:row;flex-wrap:wrap;gap:10px 14px;margin-top:22px}
  .s14-meca li{font-size:15px;border-top:0;border:1.5px solid var(--ink);padding:6px 10px 5px}
  .s14-foot{grid-column:1;grid-row:4;grid-template-columns:1fr;gap:24px;margin-top:34px}
  .s14-q{font-size:clamp(23px,4.4vw,34px);max-width:none}
  .s14-voice{max-width:none;font-size:16px}

  /* S15 */
  .s15-grid,.s15-copy{grid-template-columns:1fr;gap:26px}
  .s15-h{font-size:clamp(38px,9vw,70px)}
  .s15-rule{font-size:clamp(17px,2.8vw,22px);max-width:none;margin-top:16px}
  .s15-list li{grid-template-columns:1fr;gap:4px}
  .s15-list span{font-size:clamp(18px,3.2vw,24px)}
  .s15-copy{margin-top:56px}
  .s15-no{font-size:clamp(34px,7.6vw,56px)}
  .s15-strike li{font-size:clamp(22px,4.6vw,34px)}
  .s15-meca{grid-column:1;font-size:clamp(17px,2.8vw,22px)}
  .s15-foot{justify-content:flex-start;margin-top:44px}

  /* S16 */
  .s16{display:flex;flex-direction:column}
  .s16-lab{order:0}
  .s16-q{order:1;width:auto;font-size:clamp(26px,5.8vw,44px);margin-bottom:26px}
  .s16-img{order:2;width:auto;height:auto;aspect-ratio:4/5;max-height:80svh;margin:0 calc(-1*var(--m))}
  .s16-cap{order:3;left:auto;bottom:auto;align-self:flex-start;margin-top:12px;padding:0;background:none}
  .s16-s{order:4;width:auto;font-size:17px;margin-top:22px}

  /* S17 · ALD */
  .scene.s17{padding:0 0 56px;display:flex;flex-direction:column}
  .s17-poster{order:1;width:100%;height:auto;aspect-ratio:16/9;margin-top:56px}
  .s17 .play{left:16px!important;top:auto!important;bottom:16px}
  .s17-lab{order:0;position:absolute!important;top:66px!important;left:var(--m)!important;z-index:5}
  .s17-chap{order:0;align-self:flex-end;margin:22px var(--m) 0}
  .s17-title{order:2;font-size:clamp(40px,11vw,84px);color:var(--paper);white-space:normal;margin:22px var(--m) 0}
  .s17-meta{order:3;margin:12px var(--m) 0}
  .s17-abs{order:4;flex-direction:column;gap:6px;margin:26px var(--m) 0}
  .s17-abs li{font-size:clamp(18px,3.2vw,24px)}
  .s17-s[style]{order:5;width:auto!important;flex-wrap:wrap;gap:18px;margin:30px var(--m) 0;font-size:clamp(19px,3.6vw,26px)}

  /* S18 */
  .s18-h{font-size:clamp(36px,8.6vw,66px)}
  .s18-seq{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:32px}
  .s18-seq>figure{position:relative;left:auto;top:auto;width:auto}
  .s18-b{grid-column:1/-1;grid-row:1}
  .s18-low{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .s18-list span{font-size:clamp(17px,2.8vw,22px)}
  .s18-s{font-size:clamp(21px,4vw,30px)}

  /* S19 */
  .s19-top{grid-template-columns:1fr;gap:12px}
  .s19-hex{font-size:clamp(56px,16vw,130px)}
  .s19-hs{font-size:clamp(17px,2.8vw,22px);max-width:none}
  .s19-objs{grid-template-columns:repeat(4,1fr);justify-content:stretch;gap:12px;margin-top:32px}
  .s19-pistes ol{grid-template-columns:repeat(3,1fr);gap:18px}
  .s19-pistes b{font-size:clamp(20px,3.6vw,28px)}
  .s19-foot{justify-content:flex-start;margin-top:40px}

  /* S20 */
  .scene.s20{padding:0;display:grid}
  .s20>*{grid-column:1}
  .s20-img{grid-row:1;width:auto;height:auto;aspect-ratio:4/3}
  .s20-lab{grid-row:1;align-self:start;margin:66px var(--m) 0}
  .s20-panel{grid-row:2;width:auto;margin:-48px 14px 56px;box-shadow:0 20px 40px -24px rgba(10,10,10,.35)}
  .s20-panel .q{font-size:clamp(26px,5.6vw,40px)}

  /* S21 */
  .s21{display:flex;flex-direction:column;padding-top:96px}
  .s21-row{white-space:normal;font-size:clamp(24px,5.4vw,40px);line-height:1.12}
  .s21-row span{margin-right:.5em}
  .s21-row+.s21-row{margin-top:.2em}
  .s21-key{width:auto;margin-top:44px}
  .s21-key .q{font-size:clamp(34px,8vw,60px)}
  .s21-key .q[style]{font-size:clamp(18px,3.2vw,24px)!important}
  .s21-ev{width:auto;max-width:560px;margin-top:30px}
  .s21-kv{margin-top:30px}

  /* S22 */
  .s22{display:flex;flex-direction:column}
  .s22-cap{order:1;width:auto;height:auto;aspect-ratio:17/11;margin:0 calc(-1*var(--m))}
  .s22-doc{order:2;width:auto;margin-top:28px}
  .s22-q{order:3;font-size:clamp(32px,7.6vw,58px);margin-top:36px}
  .s22-ref{order:4;width:auto;margin-top:30px}
  .s22-ref .quote{font-size:clamp(22px,4.4vw,34px)}
  .s22-kv{order:5;margin-top:30px}

  /* S23 */
  .s23{display:flex;flex-direction:column}
  .s23-logo{width:200px;margin-top:10px}
  .s23-band{width:auto;height:auto;aspect-ratio:16/10;margin:30px calc(-1*var(--m)) 0}
  .s23-sneaker{align-self:flex-end;width:40vw;max-width:300px;margin-top:-16vw;margin-right:4px}
  .s23-data{margin-top:22px}
  .s23-data b{font-size:clamp(70px,20vw,150px)}
  .s23-data p{font-size:clamp(18px,3.2vw,24px);max-width:none}
  .s23-foot{display:block;margin-top:30px}
  .s23-q{font-size:clamp(24px,5vw,38px);margin-bottom:20px}

  /* S24 */
  .scene.s24{padding:0;display:grid}
  .s24>*{grid-column:1}
  .s24-img{grid-row:1;width:auto;height:auto;aspect-ratio:4/5;max-height:90svh}
  .s24-img img{object-position:30% 50%}
  .s24-img::after{background:linear-gradient(180deg,rgba(10,10,10,.3) 0,rgba(10,10,10,0) 30%)}
  .s24-lab{grid-row:1;align-self:start;margin:66px var(--m) 0}
  .s24-logo{grid-row:1;align-self:start;justify-self:start;margin:100px var(--m) 0}
  .s24-logo img{width:96px}
  .s24-circle{grid-row:1;align-self:end;justify-self:end;width:46vw;max-width:360px;margin:0 16px -14vw 0}
  .s24-foot{grid-row:2;width:auto;padding:calc(14vw + 26px) var(--m) 60px}
  .s24-q{font-size:clamp(24px,5.2vw,40px)}

  /* S25 */

  /* S26 */
  .s26-h{font-size:clamp(38px,9.4vw,74px)}
  .s26-steps{margin-top:40px}
  .s26-steps li{grid-template-columns:1fr;gap:6px;padding:18px 16px 18px 0}
  .s26-steps li.l2{margin-left:12px}.s26-steps li.l3{margin-left:10px;padding-left:14px}.s26-steps li.l4{margin-left:36px}
  .s26-steps .n{font-size:clamp(22px,4.4vw,32px)}
  .s26-steps .qq{font-size:clamp(17px,2.8vw,21px)}
  .s26-low{grid-template-columns:1fr;gap:34px;margin-top:48px}
  .s26-ex-a{font-size:clamp(21px,3.8vw,28px)}
  .s26-ex-b,.s26-ex-c{grid-template-columns:1fr;gap:2px;font-size:17px}
  .s26-notes p{font-size:17px;max-width:none}

  /* S27 · chaque niveau : public, puis interne en bleu */
  .s27-h{font-size:clamp(34px,8vw,62px)}
  .s27-m{margin-top:34px}
  .s27-hd,.s27-field{display:none!important}
  .s27-row{grid-template-columns:1fr;padding:16px 0 0}
  .s27-row>*{padding:0}
  .s27-row>b{margin-bottom:8px}
  .s27-row .pub{font-size:15px;padding-bottom:10px}
  .s27-row .pub::before{content:"Public · ";font-family:Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .s27-row .pub.nil{font-size:15px}
  .s27-row .int{background:var(--blue);padding:12px 14px 13px;margin:0 calc(-1*var(--m)) 18px;padding-left:var(--m);padding-right:var(--m);font-size:clamp(17px,3vw,22px)}
  .s27-row .int::before{content:"Uniquement en interne";display:block;font-family:Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
  .s27-low{grid-template-columns:1fr;gap:34px;margin-top:40px}
  .s27-cav-t{font-size:clamp(21px,4vw,30px)}
  .s27-cav .mono-s{max-width:none}

  /* S28 · chaque piste en quatre temps */
  .s28-h{font-size:clamp(36px,8.4vw,64px)}
  .s28-cols,.s28-q-field{display:none!important}
  .s28-wrap{margin-top:34px}
  .s28-pistes>li{grid-template-columns:1fr;padding:22px 0 26px}
  .s28-pistes h3{display:flex;align-items:baseline;gap:14px;padding:0 0 16px}
  .s28-pistes h3 b{font-size:clamp(52px,12vw,90px)}
  .s28-pistes h3 span{margin:0}
  .s28-pistes dl{grid-template-columns:1fr 1fr;gap:0}
  .s28-pistes dl>div{padding:12px 16px 14px 0;border-top:1px solid rgba(10,10,10,.12)}
  .s28-pistes dt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-family:Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
  .s28-pistes dd{font-size:16px}
  .s28-pistes .qc{background:var(--blue);padding-left:14px!important}
  .s28-pistes .qc dt{color:var(--ink)}
  .s28-pistes .qc dd{font-size:clamp(18px,3vw,22px)}
  .s28-pistes .sc{padding-left:0}
  .s28-foot{display:block;margin-top:34px}
  .s28-foot .js{max-width:none;font-size:17px;margin-bottom:18px}

  /* S29 */
  .scene.flow.s29{padding:0 0 44px}
  .s29-blue{padding:84px var(--m) 60px}
  .s29-blue>.mono{max-width:none}
  .s29-qs li{grid-template-columns:1fr;gap:8px;padding:22px 0 24px}
  .s29-qs span{font-size:clamp(25px,5.2vw,40px);max-width:none}
  .s29-end{padding:90px var(--m) 110px}
  .s29-last{font-size:clamp(21px,4.4vw,34px)}
  .s29-colo{grid-template-columns:1fr;gap:22px}
  .s29-wm{width:190px}
  .s29-meta .mono-s{max-width:none}
  .s29-nav{text-align:left}

  /* Annexe */
  .ax{grid-template-columns:minmax(0,1fr);gap:40px;padding:96px var(--m) 120px}
  .ax-nav{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
  .ax-nav p{grid-column:1/-1}
  .ax-b h2{font-size:clamp(30px,6vw,44px)}
  .ax-hd{padding:0 var(--m);height:56px}
}

@media (max-width: 640px){
  :root{--m:20px}
  .scene,.scene.flow{padding:72px var(--m) 52px}
  .hd-chap{display:none}
  .hd{grid-template-columns:1fr auto}
  .mono{font-size:11px}
  .mono-s{font-size:12.5px}
  .vp{max-width:none}
  .som li a,.som li span{font-size:19px;grid-template-columns:36px 1fr}
  .s01-photo{height:66svh}
  .s04{column-gap:10px}
  .s04-item p{font-size:10px;letter-spacing:.04em}
  .s07-n{gap:8px}
  .s07-n div{padding:9px 10px 8px}
  .s07-n div img{height:16px}
  .s08-n1{margin-top:58px;font-size:12.6vw}
  .s08-n2{margin-top:64px;font-size:8vw}
  .s08-c1,.s08-c2{font-size:9.5px;letter-spacing:.04em;margin:0 6px 8px 8px}
  .s08-c2{color:var(--paper)}
  .s09-vars{grid-template-columns:1fr;gap:16px}
  .s09-vars li{display:grid;grid-template-columns:34px 1fr;padding-top:12px}
  .s09-vars b{grid-row:1/3;margin:3px 0 0}
  .s09-pair{flex-direction:column;gap:26px}
  .s09-sheet{padding:18px 16px}
  .s09-sheet ol li{flex-direction:column;gap:2px;font-size:14px}
  .s11-bags img{height:30vw}
  .s18-seq{grid-template-columns:1fr 1fr;gap:18px 10px}
  .s18-list li{flex-direction:column;align-items:flex-start;gap:2px}
  .s18-list i{text-align:left}
  .s19-objs{grid-template-columns:1fr 1fr}
  .s19-pistes ol{grid-template-columns:1fr;gap:0}
  .s19-pistes li{display:grid;grid-template-columns:40% 1fr;align-items:baseline;border-bottom:1px solid rgba(10,10,10,.2);padding:10px 0}
  .s19-pistes i{margin:0}
  .s22-ref img{width:80px}
  .s23-sneaker{width:44vw;margin-top:-20vw}
  .s24-circle{width:52vw;margin-bottom:-18vw}
  .s24-foot{padding-top:calc(18vw + 26px)}
  .s28-pistes dl{grid-template-columns:1fr}
  .s28-pistes dl>div{padding-right:0}
  .s29-wm{width:170px}
  .ax-nav{grid-template-columns:1fr}
}

/* écran étroit : la bande de S03 défile à la main, ses tuiles ne peuvent pas attendre d'être « vues » */
@media (max-width: 1024px){
  .s03-strip [data-a]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ════════════════════════ CLÔTURE · Allan Joseph et lecture marketing ════════════════════════ */
/* « Pourquoi ça peut compter » : une ligne courte, jamais une promesse */
.why{font-size:max(14px,1.02vw);line-height:1.36;font-weight:450;max-width:44vw;margin-top:12px;border-left:3px solid var(--blue);padding-left:12px}
.why b{display:block;font-weight:400;color:var(--grey);margin-bottom:3px}
.on-black .why b{color:#a39e95}



/* S09 · la question de marketing */
.s09-foot{display:grid;grid-template-columns:1fr auto auto;gap:4vw;align-items:end}
.s09-why .q{font-size:1.9vw;max-width:52vw}
.s09-why .why{max-width:52vw}

/* S11 · l'intention */
.s11-s .why{margin-top:10px;max-width:46vw;border-left-color:var(--ink)}
.s11-s .why b{display:inline;margin-right:8px;color:rgba(10,10,10,.62)}

/* S12 · le parcours */
.s12-path{left:var(--m);top:calc(140px + 3.1vw * 3.5 + 18px);width:30vw;line-height:2}
.s12-path i{font-style:normal;color:var(--ink)}
.s12-path b{font-weight:400;background:var(--paper);padding:2px 6px 1px}

/* S15 · la preuve que le format existe */
.s15-proof{margin-top:22px;max-width:26vw;border-left:3px solid var(--blue);padding-left:12px;color:#3d3a35}
.s15-proof b{display:block;font-weight:400;color:var(--grey);margin-bottom:3px}
.s15-foot{justify-content:space-between;align-items:flex-end;gap:5vw}

/* S20 · avant, pendant, après */
.s20-life{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;color:var(--ink)}
.s20-life span{border-top:2px solid var(--blue);padding-top:4px}

/* S28 · la raison d'être sous chaque lettre */
.s28-pistes h3 em{display:block;margin-top:8px;font-style:normal;font-size:max(13px,.95vw);line-height:1.25;color:var(--grey);max-width:13vw}

@media (max-width:1024px){
  .why{max-width:none;font-size:15px}
  .s09-foot{grid-template-columns:1fr;gap:20px}
  .s09-why .q{font-size:clamp(19px,3.6vw,26px);max-width:none}
  .s09-why .why{max-width:none}
  .s11-s .why{max-width:none}
  .s12-path{width:auto;top:auto;left:auto;margin-top:10px}
  .s15-proof{max-width:none}
  .s15-foot{display:block}
  .s15-foot .why{margin-bottom:22px}
  .s28-pistes h3 em{max-width:none;margin:0 0 0 auto;text-align:right}
}
@media (max-width:640px){
}


/* ════════════════════════ CLÔTURE 2 · quatre multimarques, et une collaboration ════════════════════════ */
/* S05 · quatre façons d'occuper le multimarque (relevé homogène du 21/09) */
.s05-t{font-size:4.4vw;max-width:80vw}
.s05-m{margin-top:6vh}
.s05-hd,.s05-row{display:grid;grid-template-columns:18vw 1fr 10vw 8vw 12vw;column-gap:2vw;align-items:center}
.s05-hd{color:var(--grey);padding-bottom:10px;align-items:end}
.s05-hd span:nth-child(2){grid-column:2/4}
.s05-hd span:nth-child(n+4){text-align:right}
.s05-row{border-top:1px solid rgba(10,10,10,.14);padding:2.2vh 0 2vh}
.s05-row:last-child{border-bottom:1px solid rgba(10,10,10,.14)}
.s05-logo img{height:auto;display:block}
.s05-logo .mono-s{margin-top:8px;color:var(--grey);font-size:12px;line-height:1.35}
.s05-bar{height:14px;background:var(--blue)}
.s05-p{font-size:3.6vw;font-weight:600;letter-spacing:-.045em;line-height:1;text-align:right}
.s05-n{font-size:2vw;font-weight:500;letter-spacing:-.02em;text-align:right}
.s05-c{font-size:2vw;font-weight:500;letter-spacing:-.02em;text-align:right;line-height:1}
.s05-c small{display:block;font-family:Mono,monospace;font-size:10.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-top:6px}
.s05-c0 b{font-weight:600;color:var(--blue);font-size:1.3em}
.s05-foot{margin-top:5vh;display:grid;grid-template-columns:1.2fr 1fr;gap:5vw;align-items:end}
.s05-q{font-size:2.5vw}
.s05-s{margin-top:12px;font-size:max(15px,1.15vw);max-width:46vw}
.s05-side .mono-s{color:var(--grey)}
.s05-side .mono-s+.mono-s{margin-top:10px}
.s05-side .vp-open{margin-top:16px}

/* S06 · Allan Joseph, dans le même système : une autre pratique, pas un point sur l'axe */
.s06-aj{right:var(--m);top:112px;width:27vw;border:1.5px dashed rgba(10,10,10,.45);padding:14px 16px 12px}
.s06-aj img{width:124px;height:auto;margin-bottom:10px}
.s06-aj-t{font-size:max(15px,1.2vw);font-weight:500;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.s06-aj .mono-s{color:var(--grey)}

/* S07 · compteur masqué */
.s07-mask{background:transparent!important;border:1.5px dashed rgba(10,10,10,.55)}
.s07-mask b{font-size:1.25vw!important;font-weight:500!important;letter-spacing:0!important;line-height:1.1!important;padding-top:.5vw}

/* S25 · Franck Pellegrino, une question de collaboration */
.s25-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4vw}
.s25-name{font-size:5.4vw}
.s25-fields{margin-top:12px;color:var(--grey)}
.s25-sig{width:12vw;height:auto}
.s25-k{margin-top:5vh;color:var(--grey)}
.s25-prec{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;margin-top:14px}
.s25-prec .frame{aspect-ratio:4/5;background:var(--studio)}
.s25-prec .frame img{width:100%;height:100%;object-fit:cover}
.s25-prec figcaption{margin-top:10px}
.s25-prec figcaption b{display:block;font-size:max(16px,1.3vw);font-weight:600;letter-spacing:-.02em}
.s25-prec figcaption .mono-s{display:block;margin-top:4px;color:#3d3a35}
.s25-also{margin-top:16px;color:var(--grey)}
.s25-low{display:grid;grid-template-columns:1.2fr 1fr;gap:5vw;margin-top:6vh;align-items:start}
.s25-q{font-size:2.6vw}
.s25-fk{margin-top:22px;color:var(--grey)}
.s25-formats{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:10px}
.s25-formats li{font-size:max(15px,1.2vw);font-weight:500;border:1.5px solid var(--ink);padding:6px 12px 5px}
.s25-side .why{max-width:none;margin-top:18px}
.s25-side .vp-open{margin-top:18px}
.s25-src{margin-top:5vh;color:var(--grey)}

@media (max-width:1024px){
  .s05-t{font-size:clamp(30px,7.4vw,56px)}
  .s05-m{margin-top:26px}
  .s05-hd{display:none}
  .s05-row{grid-template-columns:1fr auto;row-gap:10px;padding:16px 0}
  .s05-logo{grid-column:1;grid-row:1}
  .s05-p{grid-column:2;grid-row:1;font-size:clamp(34px,8vw,56px)}
  .s05-bar{grid-column:1/-1;grid-row:2;height:10px}
  .s05-n,.s05-c{grid-row:3;text-align:left;font-size:16px}
  .s05-n{grid-column:1}.s05-c{grid-column:2;text-align:right}
  .s05-n::before{content:"maisons · ";font-family:Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .s05-c::before{content:"en commun avec Jogging · ";font-family:Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .s05-c small{display:inline;margin-left:6px}
  .s05-hd+.s05-row .s05-c::before{content:""}
  .s05-foot{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .s05-q{font-size:clamp(21px,4vw,30px)}
  .s05-s{max-width:none;font-size:16px}
  .s06-aj{width:auto;top:auto;right:auto;margin-top:30px}
  .s06-aj-t{font-size:17px}
  .s07-mask b{font-size:16px!important}
  .s25-head{grid-template-columns:1fr auto;gap:16px}
  .s25-name{font-size:clamp(34px,9vw,64px)}
  .s25-sig{width:clamp(70px,18vw,120px)}
  .s25-prec{grid-template-columns:repeat(3,1fr);gap:10px}
  .s25-low{grid-template-columns:1fr;gap:26px;margin-top:34px}
  .s25-q{font-size:clamp(23px,4.6vw,34px)}
  .s25-formats li{font-size:15px}
}
@media (max-width:640px){
  .s05-hd+.s05-row .s05-c{display:none}
  .s05-n{grid-column:1/-1;grid-row:3}
  .s05-c{grid-column:1/-1;grid-row:4;text-align:left}
  .s05-row{row-gap:8px}
  .s25-prec{grid-template-columns:1fr 1fr}
  .s25-prec figure:first-child{grid-column:1/-1}
  .s25-prec figure:first-child .frame{aspect-ratio:4/3}
}

/* Portátil con ventana estrecha (1025–1300 px): el pie de 07 se apila y el de 08 gana ancho,
   para que ni la palabra «Annoncer» ni el borde inferior de la escena tapen texto. */
@media (min-width:1025px) and (max-width:1300px){
  .s07-w{font-size:12vw}
  .s07-foot{grid-template-columns:1fr;gap:20px}
  .s07-s{max-width:62vw}
  .s08-foot{grid-template-columns:22vw 1fr}
  .s08-x{font-size:9.2vw}
}