/* 42 Treasure Hunt 2025 · étude de cas, V2. Habillage portfolio commun (Geist, monochrome, grille 36em) repris de Global Games.
   Idée propre au projet : la page est la carte. Le tracé en pointillés de l'emblème part du X et traverse les compositions jusqu'au billet.
   Le monde graphique de la présentation (dégradé pastel, titres italiques en dégradé, code vert) est recomposé dans la page, pas collé en image. */
@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:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
/* Jost italique : remplaçant libre de Futura, la police de la présentation */
@font-face{font-family:"Jost";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/jost-italic-var-latin.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);
  --pink:#e83a8d; --cyan:#22b5b8; --code:#c1ffc0; --deep:#1f3a4d;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --futura:"Jost","Futura PT",Futura,ui-sans-serif,sans-serif;
  --ease:cubic-bezier(.22,1,.36,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));
}
@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{position:relative;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;text-align:inherit}
: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)}
.muted-d{color:var(--stage-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)}
figure{margin:0}
figcaption{margin-top:14px}

.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}

.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-bottom:clamp(40px,5vw,80px)}
.chap-n{grid-column:1/3;display:flex;align-items:center;gap:10px;padding-top:.9em;color:var(--muted)}
.chap-d .chap-n{color:var(--stage-muted)}
.chap-n i{display:block;width:10px;height:10px;background:currentColor}
.chap h2{grid-column:3/12;font-size:clamp(38px,5.4vw,92px);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
@media (max-width:860px){.chap{display:block}.chap-n{padding:0 0 18px}.chap h2{font-size:clamp(34px,9vw,52px)}}
.txt{margin-left:calc((100% + 24px) / 12 * 2);max-width:36em}
.txt p+p{margin-top:1em}
.lede{font-size:clamp(19px,1.5vw,26px);line-height:1.38;letter-spacing:-.012em;max-width:30em}
@media (max-width:860px){.txt{margin-left:0}}
.proc-k{display:flex;gap:12px;align-items:baseline;margin-bottom:18px;color:var(--muted)}
[data-cs-theme=dark] .proc-k{color:var(--stage-muted)}
.proc-k span{display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid currentColor;font-size:11px}

/* Le tracé : canevas fixe à la taille de l'écran, au-dessus des sections, sous l'en-tête */
.trail-cv{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:30}

/* Monde de la présentation : dégradé pastel, titres en Futura italique et dégradé rose → turquoise */
.pastel{position:relative;overflow:hidden;color:var(--deep);
  background:radial-gradient(90% 80% at 0% 100%,#efcce0 0%,rgba(239,204,224,0) 62%),radial-gradient(70% 70% at 100% 100%,#dcf4f6 0%,rgba(220,244,246,0) 70%),linear-gradient(165deg,#cbd7e5 0%,#deebf4 55%,#e2eef3 100%)}
.th-title{font-family:var(--futura);font-style:italic;font-weight:500;letter-spacing:-.035em;line-height:.95;
  background:linear-gradient(90deg,#f07cb4 0%,#c98bbf 38%,#7aa6c2 64%,#3ab8bf 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .06em 0}
.th-it{font-family:var(--futura);font-style:italic;font-weight:400;letter-spacing:-.02em}
.ov-42{position:absolute;left:clamp(18px,3.2%,48px);bottom:clamp(16px,4%,44px);width:clamp(30px,3.2vw,52px);height:auto;color:#121314}

/* ---------- Ouverture ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;background:#08090a!important;color:#fff;overflow:hidden}
.hero-stage{position:absolute;top:0;bottom:0;right:var(--gutter-r);left:calc(var(--gutter) + min(40vw,600px) + 2vw);display:grid;place-items:center}
.emb3{position:relative;width:min(100%,calc((100svh - 220px) * 1.1),900px);aspect-ratio:893.06/810}
.emb3 .lyw,.emb3 .ly{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.emb3.live .dash{animation:dw 5.2s linear infinite;animation-delay:calc(var(--k) * 38ms)}
@keyframes dw{0%,100%{opacity:1}3%{opacity:.18}8%{opacity:1}}
.ly-gc,.ly-gp{opacity:0}
.emb3 .dash{opacity:1}
.hero-title{position:absolute;left:var(--gutter);top:46%;transform:translateY(-50%);max-width:min(40vw,600px);z-index:4}
.hero-title .kick{color:rgba(255,255,255,.56);margin:0 0 22px}
.hero-title h1{font-size:clamp(64px,8.6vw,150px);font-weight:500;letter-spacing:-.05em;line-height:.88;padding-bottom:.04em;margin:0 0 0 -.03em}
.hero-title .desc{margin:28px 0 0;font-size:clamp(17px,1.45vw,22px);line-height:1.38;color:rgba(255,255,255,.74);letter-spacing:-.01em}
.hero-meta{position:absolute;left:var(--gutter);right:calc(var(--gutter-r) + 180px);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:.5fr .5fr 1fr 1.4fr;gap:24px;margin:0;color:rgba(255,255,255,.86);z-index:4}
.hero-meta dt{color:rgba(255,255,255,.5);margin-bottom:4px}
.hero-meta dd{margin:0;font-size:15px;line-height:1.35}
.hero-cue{position:absolute;right:var(--gutter-r);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.56);z-index:4}
.hero-cue i{position:relative;display:block;width:1px;height:28px;background:rgba(255,255,255,.18);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(-12px)}100%{transform:translateY(28px)}}
@media (max-width:860px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:calc(84px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-title{order:1;position:static;transform:none;max-width:none;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero-title .kick{margin-bottom:14px}
  .hero-title h1{font-size:clamp(64px,19vw,104px)}
  .hero-title .desc{margin-top:16px;font-size:16px}
  .hero-stage{order:2;position:relative;left:auto;right:auto;width:100%;margin:28px 0;padding:0 calc(var(--gutter-r) + 24px) 0 calc(var(--gutter) + 24px)}
  .emb3{width:100%}
  .hero-meta{order:3;position:static;margin-top:auto;padding:0 var(--gutter-r) 0 var(--gutter);grid-template-columns:1fr 1fr;gap:10px 16px}
  .hero-meta dd{font-size:14px}
  .hero-cue{display:none}
}

/* ---------- 01 Le défi : la slide d'ouverture recomposée ---------- */
.defi{padding-top:clamp(110px,12vw,200px);padding-bottom:clamp(80px,9vw,160px)}
.ov{margin-top:clamp(64px,7vw,120px)}
.ov-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(20px,3vw,56px);align-items:center;
  aspect-ratio:16/9;padding:clamp(28px,5%,96px) clamp(24px,4.5%,88px) clamp(28px,5%,96px) clamp(28px,5.5%,110px)}
.ov-bin{position:absolute;right:0;bottom:0;width:62%;height:48%;color:rgba(31,58,77,.07);font-size:clamp(11px,1.1vw,19px);line-height:1.5;letter-spacing:.5em;
  overflow:hidden;white-space:pre;-webkit-mask-image:linear-gradient(to top left,#000 30%,transparent 80%);mask-image:linear-gradient(to top left,#000 30%,transparent 80%)}
.ov-intro{position:relative}
.ov-intro .th-title{font-size:clamp(34px,4.4vw,84px);margin-bottom:.12em}
.ov-pts{list-style:none;font-size:clamp(17px,2.05vw,39px);line-height:1.22;color:#1d5568}
.ov-pts li{position:relative;padding-left:1.15em}
.ov-pts li::before{content:"";position:absolute;left:.18em;top:.52em;width:.24em;height:.24em;border-radius:50%;background:#1e2f3d}
.lb{list-style:none;position:relative;display:grid;gap:clamp(4px,.55vw,10px);font-size:clamp(9px,.98vw,18px)}
.lb li{display:grid;grid-template-columns:2.6em minmax(0,1fr) minmax(0,.9fr) minmax(0,1.25fr);align-items:stretch;height:2.85em;text-transform:uppercase;font-weight:500;color:#2d3b4f}
.lb-r{display:grid;place-items:center;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.1));border-top:1px solid rgba(160,175,190,.4);border-bottom:1px solid rgba(160,175,190,.4)}
.lb-r img{height:2.3em;width:auto;mix-blend-mode:multiply}
.lb-r b{font-weight:400;font-size:1.55em;color:transparent;-webkit-text-stroke:1px #6d7b8c}
.lb-id,.lb-c{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border-top:1px solid rgba(160,175,190,.4);border-bottom:1px solid rgba(160,175,190,.4)}
.lb-id i{display:block;height:.62em;width:calc(5.6em * var(--w,1));border-radius:2px;background:rgba(45,59,79,.22)}
.lb-c{justify-content:center;padding-right:.6em;white-space:nowrap}
.lb-s{position:relative;display:flex;align-items:center;gap:1.6em;padding-left:1.9em;
  background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(231,163,205,.55));clip-path:polygon(.9em 0,100% 0,calc(100% - .9em) 100%,0 100%);margin-left:-.4em}
.lb-s::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.22em;background:var(--pink);transform:skewX(-11deg);transform-origin:0 100%}
.lb-l{white-space:nowrap}
.stars{display:inline-block;height:1.15em;width:calc(1.18em * var(--n));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2321b3b0' d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1L1.7 9.2l7.2-.8z'/%3E%3C/svg%3E") 0 50%/1.18em 1.15em repeat-x}
@media (max-width:860px){
  .ov{padding-left:0;padding-right:0}
  .ov figcaption{padding:0 var(--gutter-r) 0 var(--gutter)}
  .ov-panel{grid-template-columns:1fr;aspect-ratio:auto;padding:44px var(--gutter-r) 84px var(--gutter);gap:36px}
  .ov-pts{font-size:clamp(20px,5.6vw,26px)}
  .lb{font-size:clamp(10.5px,2.9vw,14px)}
  .ov-bin{width:100%;height:40%}
}

/* ---------- 02 L'emblème ---------- */
.emb-sec{padding-top:clamp(110px,12vw,200px);padding-bottom:clamp(90px,10vw,170px)}
/* A · Pistes : six cellules côte à côte, même hauteur d'emblème, animées en boucle */
.pst{margin-top:clamp(64px,7vw,120px)}
.pst-txt{max-width:36em;margin-left:calc((100% + 24px) / 12 * 2)}
.code{font-size:.9em;color:var(--cyan);white-space:nowrap}
.pv-row{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,28px);margin-top:clamp(40px,5vw,80px)}
.pv-cell figure{display:flex;flex-direction:column;height:100%}
.pv-art{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border-top:1px solid var(--stage-line);padding:9% 1% 3%}
.pv-art svg{width:100%;height:100%;overflow:visible}
.pv-in1{position:relative;height:100%;aspect-ratio:666/769;max-width:100%}
.pv-in1 img{position:absolute;max-width:none}
.pv-base{inset:0;width:100%;height:100%}
.pv-x{left:59.3%;top:45.25%;width:12.16%;height:auto}
.pv-cell figcaption{display:flex;gap:10px;align-items:baseline;margin-top:14px;color:var(--stage-muted);font-size:12px;line-height:1.4}
.pv-cell figcaption b{font-weight:400;color:var(--stage-ink)}
.pv-in1 img{will-change:transform}
@media (max-width:1100px){.pv-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}}
@media (max-width:860px){.pst-txt{margin-left:0}}
@media (max-width:560px){.pv-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;row-gap:28px}}
/* B · Anatomie */
.anat{margin-top:clamp(90px,10vw,170px)}
.anat-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(24em,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.anat-art{position:relative;max-width:720px;width:100%;justify-self:center}
.anat-art .emb{width:100%;height:auto;overflow:visible}
.anat-art .emb>*{transition:opacity .45s var(--ease),transform .7s var(--ease)}
.anat-art.focus .emb>*{opacity:.14}
.anat-art.focus[data-on=frame] .fc,.anat-art.focus[data-on=frame] .fp,
.anat-art.focus[data-on=hat] .hat,.anat-art.focus[data-on=hat] .n42,
.anat-art.focus[data-on=strap] .strap,.anat-art.focus[data-on=strap] .sk,
.anat-art.focus[data-on=trail] .trail,.anat-art.focus[data-on=trail] .x{opacity:1}
/* le coffre s'ouvre en deux plans pour montrer le décalage, puis se referme */
.anat-art.focus[data-on=frame] .fc{transform:translate(-14px,10px)}
.anat-art.focus[data-on=frame] .fp{transform:translate(14px,-10px)}
.anat-list{list-style:none;border-top:1px solid var(--stage-line)}
.anat-list li{border-bottom:1px solid var(--stage-line)}
.anat-list button{display:block;width:100%;padding:20px 0;color:var(--stage-muted);transition:color .35s var(--ease);max-width:30em;line-height:1.5}
.anat-list button span{display:block;color:var(--stage-ink);margin-bottom:6px}
.anat-list button[aria-pressed=true]{color:var(--stage-ink)}
.anat-list button[aria-pressed=true] span{color:var(--cyan)}
.anat-hint{margin-top:16px}
@media (hover:none){.anat-hint::after{content:""}}
@media (max-width:1180px){.anat-grid{grid-template-columns:1fr}.anat-art{max-width:520px}}
/* C · Winner */
.win{display:grid;grid-template-columns:minmax(0,1fr) minmax(27em,1fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(90px,10vw,170px)}
.win-art{max-width:460px;width:100%;justify-self:center}
.win-art .lock{width:100%;height:auto;overflow:visible}
.win-txt{max-width:30em}
.sw{list-style:none;display:flex;gap:28px;margin-top:32px;color:var(--stage-muted)}
.sw i{display:block;width:44px;height:44px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (max-width:1180px){.win{grid-template-columns:1fr}.win-art{max-width:340px}.win-txt{max-width:36em}}

/* ---------- 03 Les cercles : un gabarit, sept contenus ---------- */
.cercles{padding-top:clamp(110px,12vw,200px);padding-bottom:0}
.cer{margin-top:clamp(56px,6vw,104px)}
.cer-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:clamp(16px,2vw,28px);overflow-x:auto;scrollbar-width:none}
.cer-tabs button{position:relative;flex:1 0 auto;min-width:64px;min-height:48px;padding:10px 14px 14px;color:var(--muted);text-align:left;display:flex;flex-direction:column;gap:2px;transition:color .3s var(--ease)}
.cer-tabs button b{font-weight:400}
.cer-tabs button small{font-size:11px;opacity:.8;white-space:nowrap}
.cer-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:0 50%}
.cer-tabs button[aria-selected=true]{color:var(--ink)}
.cer-tabs button[aria-selected=true]::after{transform:scaleX(var(--p,1))}
.cer-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,72px);align-items:center;aspect-ratio:2.25/1;padding:clamp(28px,4%,80px) clamp(24px,4.5%,88px) clamp(56px,6%,100px) clamp(28px,5.5%,110px)}
.cer-t{font-size:clamp(40px,6.4vw,124px);display:flex;gap:.22em}
.cer-t span:last-child{display:inline-block;min-width:.62em}
.cer-dl{margin-top:.3em;font-size:clamp(18px,2.05vw,39px);line-height:1.24;color:#1d5568}
.cer-dl div{display:flex;gap:.3em}
.cer-dl dd{margin:0}
.cer-code{align-self:center;background:var(--code);color:#2f7c5a;font-family:var(--mono);font-size:clamp(9px,.82vw,14px);line-height:1.6;padding:1.4em 1.6em;white-space:pre-wrap;word-break:break-all;min-height:11.2em;
  box-shadow:0 0 0 1px rgba(47,124,90,.12);overflow:hidden}
.cer-cap{margin-top:14px}
@media (max-width:860px){
  .cer{padding-left:0;padding-right:0}
  .cer-tabs,.cer-cap{margin-left:var(--gutter);margin-right:var(--gutter-r)}
  .cer-tabs button{min-width:56px;padding:10px 10px 12px}
  .cer-tabs button small{display:none}
  .cer-card{grid-template-columns:1fr;aspect-ratio:auto;padding:36px var(--gutter-r) 76px var(--gutter);gap:24px}
  .cer-code{font-size:11px;min-height:9.6em}
}
/* Motif : trois bandes qui glissent en sens contraire */
.motif{margin-top:clamp(110px,12vw,200px);padding-bottom:clamp(90px,10vw,170px);overflow:hidden}
.motif-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;margin-bottom:clamp(32px,4vw,56px)}
.motif-head p:last-child{max-width:30em}
.bands{display:grid;gap:0}
.band{height:clamp(120px,15vw,250px);overflow:hidden;position:relative}
.band-in{position:absolute;top:0;bottom:0;left:-25%;width:150%;will-change:transform}
.pat{display:block;width:100%;height:100%}
@media (max-width:860px){.motif-head{grid-template-columns:1fr}.band{height:120px}}

/* ---------- 04 Le trésor ---------- */
.tresor{padding-top:clamp(110px,12vw,200px);padding-bottom:0}
/* A · 42 Airlines, sur le violet du talon */
.air{margin-top:clamp(64px,7vw,120px);background:linear-gradient(120deg,#3b2a8f 0%,#6b2fa0 52%,#c02e95 100%);color:#fff}
.air-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(20em,1fr);gap:clamp(32px,5vw,96px);align-items:center;align-content:center;min-height:min(82vh,760px);padding-top:clamp(72px,8vw,140px);padding-bottom:clamp(72px,8vw,140px)}
.air-logo{width:100%;height:auto;display:block;overflow:visible;fill:#fff}
.air-logo path{transform-box:fill-box}
.air-txt{max-width:28em}
.air .proc-k{color:rgba(255,255,255,.72)}
@media (max-width:1000px){.air-stage{grid-template-columns:1fr;min-height:0}}
/* B · Évolution du billet : un cadre, cinq états */
.evo{display:grid;grid-template-columns:minmax(20em,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(90px,10vw,170px)}
.evo-txt{max-width:30em}
.evo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.evo-tabs button{display:flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--stage-line);border-radius:2px;color:var(--stage-muted);transition:color .3s var(--ease),border-color .3s var(--ease)}
.evo-tabs button span{font-size:12px}
.evo-tabs button[aria-selected=true]{color:var(--stage-ink);border-color:var(--stage-ink)}
.evo-frame{position:relative;aspect-ratio:2400/958;background:#16171a}
.evo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.evo-frame img.on{opacity:1}
@media (max-width:1180px){.evo{grid-template-columns:1fr}}
/* C · Travelling : canevas collant, images rendues en 3D */
.trv{position:relative;height:260vh;margin-top:clamp(90px,10vw,170px)}
.trv-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#141416}
.trv-cv,.trv-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trv-still{display:none}
.trv-lab{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:baseline;color:rgba(255,255,255,.8);pointer-events:none}
.trv-lab .proc-k{margin:0;color:rgba(255,255,255,.8)}
.xring{position:absolute;left:0;top:0;width:clamp(44px,4vw,64px);height:clamp(44px,4vw,64px);margin:calc(clamp(44px,4vw,64px) / -2) 0 0 calc(clamp(44px,4vw,64px) / -2);border:2px solid var(--cyan);border-radius:50%;opacity:0;transform:scale(.4);pointer-events:none}
.xring.hit{animation:ring 1.4s var(--ease) forwards}
@keyframes ring{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@media (max-width:860px){.trv{height:170vh}.trv-pin{height:auto;top:calc(50svh - 28vw);aspect-ratio:16/9}.trv-lab{bottom:10px}}
.st .trv{height:auto}.st .trv-pin{position:relative;height:auto;aspect-ratio:16/9}.st .trv-cv{display:none}.st .trv-still{display:block}

/* ---------- Fin ---------- */
.end{padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(60px,8vw,120px)}
.end-t{font-size:clamp(28px,3.4vw,56px);line-height:1.05;font-weight:500;letter-spacing:-.03em;max-width:22ch}
.end-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;max-width:1200px}
@media (max-width:860px){.end-grid{grid-template-columns:1fr}}
.next{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(80px,10vw,160px);padding-top:24px;border-top:1px solid var(--line)}
.next a{display:flex;gap:16px;align-items:baseline;text-decoration:none;font-size:clamp(28px,3.4vw,56px);font-weight:500;letter-spacing:-.03em}
.next .u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.next a:hover .u,.next a:focus-visible .u{background-size:100% 1px}

/* Version fixe (mouvement réduit ou sans bibliothèque) : tout est visible, rien n'est collant */
@media (prefers-reduced-motion:reduce){.hero-cue i::after{animation:none}}