/* 42 Alumni · étude de cas. Habillage portfolio commun : Geist, monochrome (papier clair, scène sombre).
   Les couleurs de la marque n'apparaissent que dans les pièces montrées.
   Idée propre au projet : le décalage de couches (glitch du logotype, surimpression de la collection), qui se remet en place.
   V2.2 : lookbook avec fiches techniques, photos vivantes, ambassadeurs en recto verso, ebook. V2.1 : le fichier rencontre son objet, campagne d'été, newsletter par rubriques, fin en boucle. V2 : logotype évolutif, pin's en volume, Summer Club de la recherche au blason. */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/geist-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/geist-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(fonts/geist-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inconsolata";font-weight:200 900;font-stretch:50% 200%;font-display:swap;src:url(fonts/inconsolata-var.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
:root{
  color-scheme:only light;
  --paper:#ececea; --ink:#121314; --muted:#5d5f64; --line:rgba(18,19,20,.14);
  --stage:#0b0c0d; --stage-ink:#ebebe8; --stage-muted:#9a9da3; --stage-line:rgba(235,235,232,.14);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.23,1,.32,1);
  --frame:1920px;
  --gutter:max(20px, env(safe-area-inset-left, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --sec:clamp(96px, 12vw, 200px);
}
@media (min-width:861px){:root{--gutter:max(48px, calc((100vw - var(--frame)) / 2 + 48px));--gutter-r:max(64px, calc((100vw - var(--frame)) / 2 + 64px))}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px, 10px + .45vw, 20px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:clamp(12px, 9px + .22vw, 14px);letter-spacing:.01em;line-height:1.45}
.muted{color:var(--muted)}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block}
section[data-cs-theme=dark]{background:var(--stage);color:var(--stage-ink)}
section[data-cs-theme=dark] .muted{color:var(--stage-muted)}
figure{margin:0}
figcaption,.cap{margin-top:12px;color:var(--muted)}
[data-cs-theme=dark] figcaption,[data-cs-theme=dark] .cap{color:var(--stage-muted)}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter-r) 18px var(--gutter);color:#fff;mix-blend-mode:difference;pointer-events:none;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.cs-on .top{transform:translateY(-110%)}
.top a{pointer-events:auto;text-decoration:none}
.top .name{font-weight:500;font-size:15px;letter-spacing:-.01em}
.top nav{display:flex;gap:28px;font-size:14px}
@media (max-width:560px){.top nav{gap:16px;font-size:13px}}

/* Titres de chapitre (même système que les autres études) */
.chap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(40px,6vw,88px)}
.chap-n{display:flex;align-items:center;gap:12px;color:var(--muted)}
[data-cs-theme=dark] .chap-n{color:var(--stage-muted)}
.chap-n i{display:block;width:32px;height:1.5px;background:currentColor}
.chap h2{font-weight:500;font-size:clamp(36px, 18px + 3.6vw, 88px);line-height:1;letter-spacing:-.035em;max-width:14ch}
.txt{display:grid;gap:1em;max-width:36em}
.lede{font-size:clamp(19px, 13px + .7vw, 26px);line-height:1.4;letter-spacing:-.012em}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
@media (min-width:1180px){.pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.pair.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
section{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}


/* ── Ouverture : logotype évolutif, couches qui se décalent, bande de pixels issue de la collection ── */
.hero{min-height:100svh;display:grid;grid-template-rows:1fr auto auto auto;padding-top:calc(78px + env(safe-area-inset-top,0px));padding-bottom:0;overflow:hidden;position:relative}
.hero-stage{position:relative;display:grid;place-items:center;align-content:center;gap:clamp(18px,3vh,36px);padding:clamp(12px,4vh,56px) 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-lg{margin:0;display:grid;place-items:center;font-size:inherit}
.lg{width:min(1500px, 96vw);height:auto;overflow:visible;display:block}
.lg .ly{mix-blend-mode:screen}
.lg .ly-c,.lg .ly-sc{fill:#00e5d4}.lg .ly-m,.lg .ly-sm{fill:#ff2d8a}.lg .ly-w{fill:#ebebe8}
.lg .e,.lg .n{opacity:0}
.lg-states{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lg-states button{height:34px;padding:0 14px;border-radius:999px;color:var(--stage-muted);box-shadow:0 0 0 1px var(--stage-line) inset;transition:color .25s ease,background-color .25s ease}
.lg-states button span{margin-left:10px;opacity:.6}
.lg-states button[aria-pressed=true]{color:var(--stage);background:var(--stage-ink)}
.lg-states button:hover{color:var(--stage-ink)}
.lg-states button[aria-pressed=true]:hover{color:var(--stage)}
/* Même hiérarchie que les autres études : surtitre, nom du projet, descriptif, puis métadonnées en pied et invitation à défiler */
.hero-title{position:relative;z-index:2}
.hero-title .kick{color:var(--stage-muted);margin-bottom:18px}
.hero .desc{color:rgba(235,235,232,.74);font-size:clamp(17px,1.45vw,22px);line-height:1.38;letter-spacing:-.01em;max-width:34em}
.hero-bot{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:24px;padding-top:clamp(28px,4vh,48px);padding-bottom:clamp(20px,3vh,32px)}
.hero-meta{display:grid;grid-template-columns:.6fr .6fr 1fr 1.3fr;gap:24px;flex:1;max-width:1180px}
.hero-meta dt{color:var(--stage-muted);margin-bottom:4px}
.hero-meta dd{font-size:15px;line-height:1.35;color:rgba(235,235,232,.86)}
.hero-cue{display:flex;align-items:center;gap:12px;color:var(--stage-muted);white-space:nowrap}
.hero-cue i{position:relative;display:block;width:1px;height:28px;background:var(--stage-line);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:#fff;animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:translateY(-14px)}100%{transform:translateY(30px)}}
@media (max-width:860px){.hero-meta{grid-template-columns:1fr 1fr;gap:10px 16px}.hero-meta dd{font-size:14px}.hero-cue{display:none}.br-w{display:none}}
.px{display:block;width:100%;height:clamp(56px,9vh,96px);pointer-events:none;image-rendering:pixelated}

/* ── 01 · La collection ── */
.ov{display:grid;gap:18px;max-width:800px}
.ov-stage{position:relative;aspect-ratio:3/2;background:#000;border-radius:4px;overflow:hidden}
.ov-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .24s var(--ease-out)}
.ov-stage img.on{opacity:1}
.ov-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ov-ctl button{height:36px;padding:0 14px;border-radius:999px;box-shadow:0 0 0 1px var(--stage-line) inset;color:var(--stage-muted);transition:color .2s ease,background-color .2s ease}
.ov-ctl button[aria-pressed=true]{color:var(--stage);background:var(--stage-ink)}
.ov-ctl button:hover{color:var(--stage-ink)}
.ov-ctl button[aria-pressed=true]:hover{color:var(--stage)}
.ov-ctl .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.bleed{width:100%}
.worn{margin-top:clamp(72px,8vw,140px);overflow:hidden}
.worn .pl img{width:100%;height:min(82svh,60vw);object-fit:cover}
.worn figcaption{margin-top:14px}
.pl{will-change:transform}

/* ── Lookbook : photo, puis fiche (visuel à plat, couleurs du fichier, placement) ── */
.lb{display:grid;gap:clamp(88px,9vw,150px);margin-top:clamp(88px,9vw,150px)}
.lb-k{margin-bottom:calc(-1 * clamp(56px,6vw,110px))}
.live{position:relative;overflow:hidden;background:#111}
.live-img,.live-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.live.gl-on .live-img{visibility:hidden}
.lb-tjc{display:grid;gap:clamp(28px,4vw,72px);align-items:end}
.lb-tjc .live{aspect-ratio:2000/2769;max-height:100svh}
@media (min-width:1000px){.lb-tjc{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.lb-tjc .lb-ph{margin-left:calc(-1 * var(--gutter))}}
.lb-side{display:grid;gap:clamp(40px,5vw,80px);align-content:end}
.tech{display:grid;gap:18px;padding-top:20px;border-top:1px solid var(--stage-line)}
.tech-art{background:var(--bg,#f4f4f2);border-radius:3px;padding:clamp(20px,3vw,40px);display:grid;place-items:center}
.tech-art img{width:100%;max-height:340px;object-fit:contain}
.tech-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.tech-spec dt{color:var(--stage-muted);margin-bottom:2px}
.tech-sw{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--stage-muted)}
.tech-sw i{display:inline-block;width:14px;height:14px;border-radius:2px;margin-right:8px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(235,235,232,.18) inset}
.lb-wt{display:grid;gap:clamp(28px,4vw,56px)}
.lb-wt-head{max-width:36em}
.lb-wt-scene{position:relative}
.lb-ph.wide{margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter))}
.lb-ph.wide .live{aspect-ratio:3000/1937;max-height:84svh}
.wt-flat{position:absolute;left:clamp(0px,3vw,48px);bottom:-14%;width:clamp(150px,22vw,380px);z-index:2}
.wt-flat img{border-radius:3px}
.tech-row{grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,8vw,120px)}
@media (min-width:900px){.tech-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;margin-left:calc(22vw + 40px);margin-top:28px}}
.lb-tr{display:grid;gap:clamp(20px,3vw,40px);align-items:end}
@media (min-width:1000px){.lb-tr{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.lb-tr .tr-art{grid-column:1;grid-row:2}.lb-tr .tr-ph{grid-column:2;grid-row:1 / span 2}.lb-tr-txt{grid-column:1;grid-row:1;align-self:start}}
.lb-tr-txt{display:grid;gap:24px}
.tr-art{max-width:560px}
.tr-frame{position:relative;border-radius:3px;overflow:hidden;container-type:inline-size}
.tr-code{position:absolute;inset:0;background:#4b3a9d;color:#fff;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out);
  font-family:"Inconsolata",var(--mono);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75}
.tr-code.on{opacity:1}
.tr-code p{position:absolute;left:15.76%;white-space:pre;line-height:1;font-size:5.19cqw;letter-spacing:.182em}
.tr-code .w{color:#ec209b}
.tr-ph img{width:100%;border-radius:3px}
.lb-acc{display:grid;gap:clamp(28px,4vw,56px)}
.lb-acc-head{max-width:36em}
.acc-dip{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.acc-dip img{width:100%;height:100%;object-fit:cover;border-radius:3px}
@media (min-width:760px){.acc-dip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.acc-dip figure:first-child img{aspect-ratio:3/4}.acc-dip figure:last-child img{aspect-ratio:3/2}}
.acc-low{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
@media (min-width:900px){.acc-low{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.acc-key img{border-radius:3px}
.acc-towel{display:grid;gap:18px}
.acc-towel img{border-radius:3px}
.lb-acc .cap{margin-top:-12px}

/* ── 01 bis · La séparation : quatre films d'encre qui se remettent en registre ── */
.sep{display:grid;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(72px,9vw,150px)}
@media (min-width:1000px){.sep{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.sep-txt{display:grid;gap:18px;align-content:start}
.sep-legend{list-style:none;display:grid;gap:8px;margin-top:8px;color:var(--stage-muted)}
.sep-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:12px;vertical-align:-1px}
.sep-stage{perspective:2000px;display:grid;place-items:center;min-height:clamp(480px,78vh,860px)}
.sep-stack{position:relative;width:min(400px,62vw,44vh);aspect-ratio:3/4;transform-style:preserve-3d;
  will-change:transform}
.plate{position:absolute;inset:0}
.plate .pf{position:absolute;inset:0;background:rgba(235,235,232,.045);box-shadow:0 0 0 1px rgba(235,235,232,.28);opacity:0}
.plate img{position:relative;width:100%;height:100%;display:block}
.plate span{position:absolute;left:calc(100% + 14px);top:0;white-space:nowrap;color:var(--stage-muted);opacity:0}
@media (max-width:640px){.plate span{left:auto;right:4px;top:4px;font-size:10px}}

/* ── 02 · Pin's en volume ── */
.pins{position:relative;padding:0;background:var(--stage);color:var(--stage-ink)}
.pins-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.pins-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.pins-fallback{position:absolute;left:50%;top:50%;width:min(900px,86vw);transform:translate(-50%,-50%);display:none}
.no-gl .pins-fallback{display:block}
.pins-copy{position:relative;z-index:2;margin-top:-100svh;min-height:200svh;display:grid;align-content:space-between;padding-top:var(--sec);padding-bottom:22svh;pointer-events:none}
.pins-copy .chap{margin-bottom:0}
.pins-note{max-width:19em;text-shadow:0 2px 18px rgba(11,12,13,.9)}
.pins-note.mono{max-width:26em;margin-top:-12svh}
.reduce .pins-copy,.no-gl .pins-copy{min-height:100svh}

/* ── 03 · Summer Camp 2024 : un écran, sans animation ── */
#summer{padding-top:clamp(80px,9vw,150px);padding-bottom:clamp(80px,9vw,150px)}
.sc{display:grid;gap:clamp(20px,2.4vw,40px);align-items:start}
@media (min-width:1000px){.sc{grid-template-columns:minmax(0,3.4fr) minmax(0,4fr) minmax(0,4.6fr)}}
.sc-a{display:grid;gap:22px}
.sc-a .chap{margin-bottom:8px}
.sc h2{font-weight:500;font-size:clamp(34px, 16px + 2.6vw, 64px);line-height:1;letter-spacing:-.035em}
.sc-logo{background:#fff;border-radius:4px;padding:8% 12%;max-width:300px}
.sc-std img{border-radius:3px}
.sc-book{display:grid;gap:12px}
.sc-book img{border-radius:2px}

/* ── 04 · Summer Club 2026 : changement de saison ── */
.club{padding-top:var(--sec);padding-bottom:var(--sec);background:#fff;color:#1b2a6b}
.club .chap-n{color:#e23a8f}
.club .muted,.club .cap,.club figcaption{color:#5b6390}
.club-in{margin-bottom:clamp(24px,4vw,56px)}
/* Pas de découpe sur le conteneur du motif : la section coupe seulement au bord de l'écran, et le texte passe au-dessus des pictos */
.club{overflow-x:clip}
.club .wrap{position:relative;z-index:2}
.motif-wrap{display:grid;place-items:center;padding:clamp(8px,3vw,40px) 0;position:relative;z-index:1}
.motif{position:relative;width:min(1100px,100vw,94vh);aspect-ratio:1}
.motif .mo{position:absolute;height:auto;will-change:transform}
.motif-cap{margin-top:8px}
.crest{display:grid;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(72px,9vw,150px)}
@media (min-width:900px){.crest{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}
.crest-img{display:grid;place-items:center;padding:clamp(28px,5vw,80px) 6%;background:#fff3f8;border-radius:4px}
.crest-img img{width:min(100%,600px);mix-blend-mode:multiply}
.crest-side{display:grid;gap:clamp(36px,5vw,72px)}
.contact-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;padding:16px;border-radius:4px;box-shadow:0 0 0 1px rgba(27,42,107,.14) inset}
.contact-row img{width:100%;height:auto;max-height:120px;object-fit:contain;opacity:.55;filter:grayscale(.2)}
.contact-row img:last-child{opacity:1;filter:none;outline:2px solid #e23a8f;outline-offset:6px;border-radius:2px}
.camp{margin-top:clamp(80px,9vw,150px)}
.camp-txt{margin-bottom:clamp(28px,4vw,56px)}
.camp-dip{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
@media (min-width:760px){.camp-dip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
.camp-still img{width:100%}
.camp-tote{position:relative;min-height:62vw}
@media (min-width:760px){.camp-tote{min-height:0}}
.camp-tote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%}

/* ── 05 · Newsletter ── */
.aotw{display:grid;gap:clamp(36px,5vw,80px);align-items:center;margin:clamp(72px,9vw,150px) 0 clamp(40px,5vw,72px)}
@media (min-width:900px){.aotw{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.aotw-s{justify-self:center;width:min(600px,100%)}
.aotw-f{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,0,0,.35),0 0 0 1px var(--line)}
.aotw-b{display:grid;gap:18px;padding:22px}
.aotw-i{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
.aotw-i img{border-radius:3px}
.aotw-i span{display:grid;gap:9px}
.aotw-i i{display:block;height:7px;border-radius:4px;background:#e4e4e0}
.nl{display:grid;gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(72px,8vw,130px)}
@media (min-width:900px){.nl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.rubs{display:grid;gap:10px;max-width:600px}
.rubs img{width:100%;border-radius:3px}
.rdv{display:grid;gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(72px,8vw,130px)}
@media (min-width:1000px){.rdv{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.night img{border-radius:3px}
.rdv-r{display:grid;gap:clamp(28px,3vw,48px)}
.banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:700px){.banners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1300px){.banners{grid-template-columns:repeat(4,minmax(0,1fr))}}
.banners figure{max-width:320px}
.banners img{width:100%;border-radius:2px}
.banners figcaption{margin-top:6px}
.maps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (min-width:700px){.maps{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1200px){.maps{grid-template-columns:repeat(8,minmax(0,1fr))}}
.maps img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;transform-origin:50% 100%}

/* ── 06 · Ambassadeurs : le badge (reflet en boucle), puis les médaillons qui se retournent sur les portraits ── */
.amb{display:grid;gap:clamp(36px,5vw,96px);align-items:center}
@media (min-width:1000px){.amb{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.amb-badge{max-width:320px;justify-self:center;perspective:900px}
.badge{position:relative}
.badge img{width:100%}
.badge::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,245,215,.9) 48%,rgba(255,255,255,1) 50%,rgba(255,230,180,.8) 53%,transparent 62%) 0 0/300% 100% no-repeat;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.loop .badge{animation:tilt 7s cubic-bezier(.45,0,.55,1) infinite}
.loop .badge::after{animation:sweep 7s cubic-bezier(.45,0,.55,1) infinite}
.amb-badge:not(.on) .badge,.amb-badge:not(.on) .badge::after{animation-play-state:paused}
@keyframes sweep{0%,62%{background-position:100% 0;opacity:0}66%{opacity:1}84%{opacity:1}88%,100%{background-position:0 0;opacity:0}}
@keyframes tilt{0%,100%{transform:rotateY(-2deg) rotateX(1deg)}50%{transform:rotateY(2deg) rotateX(-1deg)}}
.amb-r{display:grid;gap:clamp(24px,3vw,40px)}
.amb-r .lede{max-width:28em}
.meds{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.4vw,22px)}
@media (max-width:640px){.meds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.med{position:relative;aspect-ratio:1;perspective:800px}
/* Retournement en deux temps (sans backface-visibility, peu fiable sous Safari) : le badge pivote jusqu'à la tranche, le portrait repart de la tranche */
.med-f,.med-b{position:absolute;inset:0;border-radius:50%}
.med-f{display:grid;place-items:center;background:#17181c;box-shadow:0 0 0 1px var(--stage-line) inset;transition:transform .28s cubic-bezier(.55,0,1,.45),opacity 0s linear .28s}
.med-f img{width:44%}
.med-b{transform:rotateY(-90deg);opacity:0;transition:transform .34s cubic-bezier(0,.55,.45,1) .28s,opacity 0s linear .28s}
.med-b img{width:100%;height:100%;border-radius:50%}
.med.flip .med-f{transform:rotateY(90deg);opacity:0}
.med.flip .med-b{transform:none;opacity:1}
.js .meds.arm .med{opacity:0;transform:translateY(16px) scale(.96)}
.js .meds.arm .med.in{opacity:1;transform:none;transition:opacity .4s ease-out,transform .6s cubic-bezier(.22,1,.36,1)}

/* ── Témoignages : l'ebook, de la couverture au détail typographique ── */
.tm{margin-top:clamp(96px,10vw,170px);display:grid;gap:clamp(40px,5vw,80px)}
.tm-lead{display:grid;gap:clamp(28px,4vw,72px);align-items:end}
@media (min-width:900px){.tm-lead{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.tm-cv{max-width:420px}
.tm-cv img,.tm-spreads img,.tm-d img{border-radius:2px}
.tm-spreads{display:grid;gap:16px}
@media (min-width:900px){.tm-spreads{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tm-det{display:grid;gap:clamp(20px,3vw,48px);align-items:end}
.tm-d{max-width:720px}
@media (min-width:900px){.tm-det{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.tm-det p{max-width:22em}
.tm-strip img{width:min(100%,1800px);margin:0 auto}

/* ── Fin : le logotype se remet en registre ── */
.end{padding-top:clamp(80px,10vw,160px)}
.end-lg{display:grid;place-items:center;padding:0 0 clamp(56px,7vw,110px)}
.lg2{width:min(1100px,88vw);height:auto;overflow:visible}
.lg2 .e2{mix-blend-mode:screen}.lg2 .e2-c{fill:#00e5d4}.lg2 .e2-m{fill:#ff2d8a}.lg2 .e2-w{fill:#ebebe8}
.end h2{font-weight:500;font-size:clamp(32px, 16px + 3vw, 72px);letter-spacing:-.035em;line-height:1;max-width:16ch}
.credits{display:grid;gap:12px 28px;margin-top:48px;border-top:1px solid var(--stage-line);padding-top:24px}
@media (min-width:900px){.credits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.credits dt{color:var(--stage-muted)}

/* Apparitions : titres et quelques ensembles seulement */
.js .reveal-lines .line>span{transform:translateY(105%)}
.js .reveal-lines.in .line>span{transform:none;transition:transform .9s var(--ease)}
.js .reveal-lines.in .line:nth-child(2)>span{transition-delay:.08s}
.js .reveal-lines.in{animation:reg 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes reg{0%{text-shadow:-.06em .02em 0 rgba(0,229,212,.85),.07em -.02em 0 rgba(255,45,138,.85)}
  12%{text-shadow:.04em 0 0 rgba(0,229,212,.85),-.05em .01em 0 rgba(255,45,138,.85)}
  100%{text-shadow:0 0 0 rgba(0,229,212,0),0 0 0 rgba(255,45,138,0)}}
.js .maps.arm img{transform:translateY(14px) scale(.92);opacity:0}
.js .maps.in img{transform:none;opacity:1;transition:transform .7s var(--ease),opacity .4s ease;transition-delay:calc(var(--i) * 40ms)}
@media (prefers-reduced-motion:reduce){
  .js .reveal-lines .line>span,.js .maps.arm img{transform:none!important;opacity:1!important;transition:none!important}
  .js .reveal-lines.in{animation:none}
  .ov-stage img{transition:none}
  .med-f,.med-b{transition:none}
  .hero-cue i::after{animation:none;transform:translateY(8px)}
}
/* Motif sur mobile : même composition recadrée en portrait (positions calculées au build), pour occuper l'écran */
@media (max-width:700px){.motif{width:100vw;aspect-ratio:.56}.motif .mo{left:var(--ml)!important;top:var(--mt)!important;width:var(--mw)!important}}
/* Apparition des visuels : jamais d'un coup. Chaque bloc attend que son image soit décodée, puis monte en fondu (une fois). */
.js .rv{opacity:0;transform:translateY(28px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.23,1,.32,1) var(--d,0s),transform 1.1s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.live-gl{opacity:0;transition:opacity .6s ease-out}
.live.gl-on .live-gl{opacity:1}
.live.gl-on .live-img{visibility:visible}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none}.js .rv.in{transition:opacity .6s ease-out}}