.steps{list-style:none;display:grid;gap:2px;border-top:1px solid var(--stage-line)}
.steps li{display:grid;grid-template-columns:28px 1fr;padding:10px 0;border-bottom:1px solid var(--stage-line);color:var(--stage-muted);transition:color .4s var(--ease)}
.steps li b{font-weight:400}
.steps li.on{color:var(--stage-ink)}
.spec-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--stage-muted);margin:34px 0 12px}
.spec-k:first-child{margin-top:0}
.pal{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.pal li{width:96px}
.pal i{display:block;height:54px;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.pal span{display:block;margin-top:6px;font-size:11px!important;color:var(--stage-muted)}
.credits{margin-top:28px;border-top:1px solid var(--stage-line)}
.credits div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:12px 0;border-bottom:1px solid var(--stage-line)}
.credits dt{color:var(--stage-muted)}
.credits dd{margin:0}
@media (max-width:560px){.credits div{grid-template-columns:1fr;gap:2px}}
.foot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--stage-line)}
.foot a{text-decoration:none}


/* ===== La Tech pour toutes ===== */
:root{--stage:#0f0019;--stage-ink:#efeaf5;--stage-muted:#9a8fae;--stage-line:rgba(239,234,245,.14);--studio:#ece9f0;
  --tv:#6000bc;--tr:#f571b7;--tm:#ed3491;--tg:linear-gradient(182.6deg,#6000bc 4%,#f571b7 92%)}
html{background:var(--stage)}
/* ===== V2 ===== Langage de mouvement : une courbe (--ease), trois durées (.5 s, .9 s, 1.6 s).
   Introductions jouées une fois ; rien ne se rejoue au défilement ; un seul élément lié au défilement (la dérive des supports). */
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* Ouverture */
.hero2{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--stage);color:var(--stage-ink)}
.hero2-sym{position:absolute;left:calc(var(--gutter) - 3vw);top:50%;width:min(54vw,82vh,820px);aspect-ratio:100/78;transform:translateY(-54%)}
.hs{display:block;width:100%;height:100%;overflow:visible}
.hs .rules line{stroke:rgba(245,113,183,.22);stroke-width:.16;transform-box:fill-box;transform-origin:left;stroke-linecap:round}
.hero2-title{position:absolute;right:var(--gutter-r);top:46%;transform:translateY(-50%);width:min(38vw,620px);z-index:3}
.hero2-title .kick{color:var(--stage-muted);margin:0 0 22px}
.hero2-title h1{font-size:clamp(60px,7.4vw,128px);font-weight:500;letter-spacing:-.05em;line-height:.88;padding-bottom:.04em;margin:0 0 0 -.03em}
.hero2-title .desc{margin:28px 0 0;font-size:clamp(17px,1.45vw,22px);line-height:1.38;color:var(--stage-muted)}
.hero2 .hero-meta{z-index:3;right:var(--gutter-r)}
.hero2 .hero-meta dt{color:var(--stage-muted)}
.js .hero2 .sym{clip-path:inset(0 100% 0 0)}
.js .hero2 .rules line{transform:scaleX(0)}
.js .hero2 .pills{opacity:0}
.hero2.go .sym{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease-io) .15s}
.hero2.go .rules line{transform:none;transition:transform 1.6s var(--ease) calc(.95s + var(--k) * 45ms)}
.hero2.go .pills{animation:cursor 1.2s steps(1) 1.5s 2 both}
@keyframes cursor{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@media (min-width:861px) and (max-width:1180px){.hero2-sym{width:min(46vw,82vh)}.hero2-title{width:40vw}.hero2-title h1{font-size:clamp(52px,6.6vw,84px)}}
@media (max-width:860px){
  .hero2{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))}
  .hero2-title{order:1;position:static;transform:none;width:auto;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero2-title h1{font-size:clamp(56px,16vw,96px)}
  .hero2-sym{order:2;position:relative;left:-12vw;top:auto;transform:none;height:auto;width:118vw;margin:28px 0 10px}
  .hero2 .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}
}

/* 01 · Logo */
.lg2{padding:clamp(100px,12vw,200px) 0 clamp(80px,10vw,160px);background:#f3f0f6}
.lg2 .txt{margin-bottom:clamp(56px,7vw,110px)}
.build{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(min(100%,22em),1fr);gap:clamp(32px,4vw,80px);align-items:center}
@media (max-width:1180px){.build{grid-template-columns:1fr}}
.build-stage{position:relative;aspect-ratio:16/9;background:#fff;border-radius:4px;display:grid;place-items:center;
  background-image:linear-gradient(rgba(96,0,188,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(96,0,188,.06) 1px,transparent 1px);background-size:3.2% 5.7%;background-position:center}
.lb{width:76%;overflow:visible}
.lb .tr path{stroke:#3b1c82;stroke-width:.22;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0}
.lb .ln{transform-box:fill-box}
.build-steps{list-style:none;border-top:1px solid var(--line)}
.build-steps li{display:grid;grid-template-columns:36px 1fr;padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);transition:color .5s var(--ease)}
.build-steps li b{font-weight:400}
.build-steps li.on{color:var(--ink)}
.replay2{position:absolute;right:14px;bottom:14px;border:1px solid var(--line);background:rgba(255,255,255,.8);border-radius:99px;padding:8px 14px;min-height:36px;cursor:pointer;font-size:11px!important}
/* état final par défaut (sans JS, mouvement réduit) */
.js .lb.ready .fl,.js .lb.ready .ey,.js .lb.ready .pl{opacity:0}
.js .lb.ready .ln{transform:translateY(115%)}
.lb.play .tr path{animation:trace 1.7s var(--ease-io) both}
.lb.play .tr path:nth-child(n+2){animation-duration:.6s;animation-delay:1.05s}
.lb.play .fl{animation:fillin .9s var(--ease) 1.25s both}
.lb.play .ey{animation:fillin .7s var(--ease) 1.9s both}
.lb.play .pl{animation:fillin .01s 2.1s both,cursor 1.1s steps(1) 2.1s 2}
.lb.play .ln{animation:rise .8s var(--ease) both;animation-delay:calc(2.25s + var(--l) * .11s)}
@keyframes trace{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fillin{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(115%)}to{transform:none}}
.versions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,96px)}
.versions figure{margin:0}
.versions .v{aspect-ratio:4/3;border-radius:4px;display:grid;place-items:center}
.versions .v img{width:56%;height:auto}
.versions figcaption{margin-top:10px;color:var(--muted)}
@media (max-width:860px){.versions{grid-template-columns:1fr}}

/* 03 · Site */
.web2{padding:clamp(100px,12vw,200px) 0 clamp(80px,9vw,140px);background:var(--studio)}
.web2 .txt{margin-bottom:clamp(40px,5vw,72px)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:rgba(18,19,20,.06);margin-bottom:20px}
.seg button{border:0;background:none;border-radius:99px;padding:10px 18px;min-height:40px;cursor:pointer;font:inherit;font-size:12px!important;color:var(--muted);transition:background .4s var(--ease),color .4s var(--ease)}
.seg button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(18,19,20,.12)}
.stage-web{position:relative;padding:clamp(28px,4vw,72px);border-radius:6px;overflow:hidden;
  background:linear-gradient(182.6deg,#6000bc 4%,#f571b7 92%)}
.stage-web::before{content:"";position:absolute;inset:-10%;background:url(img/wave-a.svg) center/150% auto no-repeat;opacity:.35;pointer-events:none}
.browser{position:relative;width:84%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 60px 120px -40px rgba(19,0,38,.6),0 0 0 1px rgba(255,255,255,.08)}
.browser .bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f4f2f6}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#d8d3de}
.browser .bar span{margin-left:14px;font-size:11px!important;color:var(--muted)}
.vp{position:relative;overflow:hidden}
.vp iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.browser .vp{aspect-ratio:1440/860}
.vp .orig{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:#fff}
.vp .orig img{width:100%;height:auto}
.phone{position:absolute;right:clamp(20px,4vw,72px);bottom:clamp(24px,3vw,48px);width:clamp(200px,17vw,280px);padding:9px;border-radius:42px;background:#14101a;box-shadow:0 50px 100px -30px rgba(19,0,38,.7);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.phone .vp{aspect-ratio:390/844;border-radius:33px}
.phone-tag{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:center;color:#fff;font-size:11px!important;opacity:.8;display:none}
.stage-web.orig .phone{opacity:0;transform:translateY(24px);pointer-events:none}
.dev-note{margin-top:20px;max-width:62em}
.review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(64px,8vw,120px)}
.review .spec-k{color:var(--muted)}
.rv{list-style:none;border-top:1px solid var(--line)}
.rv li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.92em}
.rv-new li b{display:block;font-weight:500;color:var(--ink)}
.pal2{list-style:none;display:grid;gap:8px}
.pal2 li{display:flex;align-items:center;gap:12px}
.pal2 i{width:44px;height:28px;border-radius:4px;background:var(--c)}
.kit2 .type-a{font-family:"Jost","Futura PT",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(30px,2.6vw,44px);line-height:.95;margin:24px 0 10px;color:#3b1c82}
@media (max-width:1100px){.review{grid-template-columns:1fr}}
@media (max-width:860px){
  .stage-web{padding:24px 16px 40px}
  .browser{display:none}.seg{display:none}
  .phone{position:relative;right:auto;bottom:auto;margin:0 auto;width:min(290px,76vw)}
}

/* 04 · Depuis */
.since{padding:clamp(100px,12vw,180px) 0 clamp(80px,10vw,140px)}

/* Révélations au défilement : une fois, jamais rejouées */
.js .rv-in{opacity:0;transform:translateY(28px)}
.rv-in.seen{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .rv-in{opacity:1;transform:none}}

/* 02 · Supports : changements d'échelle, du monumental au détail */
.sp{padding:clamp(100px,12vw,200px) 0 clamp(80px,10vw,160px);background:#f7f5f9;overflow:hidden}
.sp .txt{margin-bottom:clamp(56px,7vw,110px)}
.sp figure{margin:0}
.sp figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;color:var(--muted);font-size:11px!important}
.sp img{display:block;width:100%;height:auto}
.sp-bleed-in{overflow:hidden;background:linear-gradient(#ebe6f1,#ddd5e8);padding:clamp(40px,7vw,120px) clamp(16px,6vw,110px)}
.sp-bleed-in img{will-change:transform;box-shadow:0 50px 90px -50px rgba(59,28,130,.55)}
.sp-print{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);margin-top:clamp(80px,10vw,160px);align-items:start}
.sp-col{display:grid;gap:clamp(20px,3vw,48px);padding-top:clamp(0px,12vw,180px)}
.paper{background:#fff;box-shadow:0 1px 0 rgba(18,19,20,.04),0 40px 80px -40px rgba(59,28,130,.35)}
.sp-band{margin-top:clamp(80px,10vw,160px);padding:clamp(64px,8vw,120px) 0;background:linear-gradient(#2a0b5c,#130026);color:var(--stage-ink)}
.sp-band .spec-k{color:var(--stage-muted);margin:0 0 28px}
.brac{display:grid;gap:clamp(14px,2vw,28px)}
.brac img{border-radius:3px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.brac img:nth-child(2){margin-left:6%;width:94%}
.brac img:nth-child(3){margin-left:12%;width:88%}
.cap2{margin-top:24px;font-size:11px!important}
.sp-goods{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:clamp(20px,3vw,48px);margin-top:clamp(80px,10vw,160px)}
.sp-n{grid-column:1;grid-row:1}
.sp-t{grid-column:2;grid-row:1 / span 2}
.sp-s{grid-column:1;grid-row:2;width:min(100%,440px);justify-self:end}
.stk{background:#e9e3f1;padding:12% 14%;border-radius:4px}
.stk img{filter:drop-shadow(0 10px 18px rgba(59,28,130,.25))}
.sp-screen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(80px,10vw,160px)}
.scr{padding:clamp(10px,1.2vw,18px);background:#14101a;border-radius:clamp(8px,1vw,14px);box-shadow:0 60px 120px -50px rgba(19,0,38,.6)}
.scr img{border-radius:3px}
.sp-w{width:min(100%,760px);justify-self:end}
@media (max-width:860px){
  .sp-print,.sp-goods{grid-template-columns:1fr}
  .sp-col{padding-top:0}
  .sp-n,.sp-t,.sp-s{grid-column:1;grid-row:auto}
  .sp-s{justify-self:stretch;width:100%}
  .brac img:nth-child(n){margin-left:0;width:100%}
}

/* 01 · Avant / après et principe de construction */
.ab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 clamp(64px,8vw,120px)}
.ab figure{margin:0}
.ab img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 30px 60px -36px rgba(59,28,130,.4)}
.ab figcaption{margin-top:10px;color:var(--muted);font-size:11px!important}
.ab-note{grid-column:1 / -1;color:var(--muted);margin-top:6px;max-width:48em}
.concept{margin:clamp(56px,7vw,100px) 0 0 auto;width:min(100%,820px)}
.concept img{display:block;width:100%;height:auto;border-radius:4px}
.concept figcaption{margin-top:10px;color:var(--muted);font-size:11px!important}
.versions{grid-template-columns:repeat(4,minmax(0,1fr))}
.versions .v img{width:62%}
@media (max-width:1000px){.versions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab{grid-template-columns:1fr}.versions{gap:10px}.versions figcaption{font-size:10px!important}}
@media (prefers-reduced-motion:reduce){
  .js .hero2 .sym,.hero2.go .sym{clip-path:none;transition:none}
  .js .hero2 .rules line,.hero2.go .rules line{transform:none;transition:none}
  .js .hero2 .pills{opacity:1;animation:none}
}