/* La Tech pour toutes · V3. Chaque famille de supports a sa mise en scène :
   l'écran dans le noir de la salle, l'accueil à hauteur d'œil, les imprimés en papier, les objets posés à plat. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lede2{font-size:clamp(19px,1.6vw,26px);line-height:1.34;letter-spacing:-.012em;max-width:30em;margin:0}

/* 01 · Logo : la construction occupe toute la largeur, la couleur se change sur la scène */
.lg3{padding:clamp(100px,12vw,200px) 0 clamp(80px,10vw,150px);background:#f3f0f6}
.lg3 .txt{margin-bottom:clamp(48px,6vw,96px)}
.lb-stage{--g1:#d10254;--g2:#3b1c82;--wm:#3b1c82;--gl:rgba(96,0,188,.06);position:relative;height:min(86vh,58vw);min-height:420px;display:grid;place-items:center;background:#fff;transition:background .7s var(--ease);overflow:hidden}
.lb-stage[data-cw="2024"]{--g1:#ec3491;--g2:#6000bc;--wm:#6000bc}
.lb-stage[data-cw="blanc"]{--g1:#fff;--g2:#fff;--wm:#fff;--gl:rgba(255,255,255,.06);background:#1d0a3a}
.lb-stage[data-cw="noir"]{--g1:#121314;--g2:#121314;--wm:#121314;--gl:rgba(18,19,20,.06)}
.lb-grid{position:absolute;inset:0;background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:calc(100% / 36) calc(100% / 20);background-position:center}
.lb-stage .lb{position:relative;width:min(70%,1180px)}
.lb-stage .lb stop:first-child{stop-color:var(--g1);transition:stop-color .7s var(--ease)}
.lb-stage .lb stop:last-child{stop-color:var(--g2);transition:stop-color .7s var(--ease)}
.lb-stage .lb .wm{fill:var(--wm);transition:fill .7s var(--ease)}
.lb-stage .lb .tr path{stroke:var(--wm)}
.lb-ui{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,28px);display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.cw{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:rgba(18,19,20,.06)}
.lb-stage[data-cw="blanc"] .cw{background:rgba(255,255,255,.1)}
.cw button{border:0;background:none;border-radius:99px;padding:10px 16px;min-height:40px;cursor:pointer;font:inherit;font-size:12px!important;color:#5d5866;transition:background .4s var(--ease),color .4s var(--ease)}
.lb-stage[data-cw="blanc"] .cw button{color:rgba(255,255,255,.7)}
.cw button[aria-checked=true]{background:#fff;color:#121314;box-shadow:0 1px 3px rgba(18,19,20,.14)}
.cw button:focus-visible,.lb-ui .replay2:focus-visible{outline:2px solid #6000bc;outline-offset:2px}
.cw-note{font-size:11px!important;color:#6f6a78;margin:0}
.lb-stage[data-cw="blanc"] .cw-note{color:rgba(255,255,255,.65)}
.lb-ui .replay2{position:static;margin-left:auto}
.build-steps3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 0;padding:0}
.build-steps3 li{display:grid;grid-template-columns:36px 1fr;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);transition:color .5s var(--ease),border-color .5s var(--ease)}
.build-steps3 li b{font-weight:400}
.build-steps3 li.on{color:var(--ink);border-top-color:var(--ink)}
.macro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(72px,9vw,150px)}
.macro figure{margin:0}
.macro figure:nth-child(1){grid-column:1/5}
.macro figure:nth-child(2){grid-column:5/9;margin-top:clamp(40px,6vw,110px)}
.macro figure:nth-child(3){grid-column:9/13;margin-top:clamp(80px,12vw,220px)}
.macro svg{display:block;width:100%;aspect-ratio:4/5;background:#fff;border-radius:3px}
.macro figcaption{display:grid;gap:4px;margin-top:14px}
.macro figcaption span:first-child{color:var(--ink)}
.macro figcaption span:last-child{color:var(--muted)}

/* 02 · L'écran, dans le noir de la salle */
.sp3-head{background:#120a1f;color:var(--stage-ink);padding:clamp(100px,12vw,200px) 0 clamp(80px,10vw,150px)}
.sp3-head .txt{margin-bottom:clamp(56px,7vw,110px)}
.sp3-head .lede{color:var(--stage-ink)}
.room{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px}
.room figure{margin:0}
.room-scr{grid-column:1/13}
.room-frame{position:relative;padding:clamp(6px,.7vw,12px);background:#050307;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 160px -40px rgba(140,70,255,.35)}
.room-frame .scr-anim{border-radius:2px}
.room figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11px!important}
.room-before{grid-column:1/4;display:grid;grid-template-columns:1fr;opacity:.9}
.room-before img{width:100%;height:auto;border-radius:3px;outline:1px solid rgba(255,255,255,.08)}
.room-before figcaption{display:grid;gap:2px;justify-content:start}

/* L'accueil et les objets : deux scènes en volume, avec une image fixe de secours */
.space{background:#ddd6dc;padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,70px)}
.objects{background:#eadcea;padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,70px)}
.space-txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:clamp(8px,2vw,24px);position:relative;z-index:2}
.space-txt>*{grid-column:3/11}
.space .spec-k,.objects .spec-k,.prints .spec-k,.online .spec-k{color:var(--muted)}
.gl-scene{position:relative;overflow:hidden;margin:0;aspect-ratio:16/10;max-height:92vh;width:100%;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.gl-scene canvas{display:block;width:100%;height:100%}
.gl-fallback{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gl-scene.no-gl canvas,.gl-scene.no-gl .marks{display:none}
.gl-scene.no-gl .gl-fallback{display:block}
.marks span{position:absolute;left:0;top:0;margin:-52px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:14px;font-size:11px!important;color:#2b2631;white-space:nowrap;pointer-events:none;will-change:transform}
.marks span b{font-weight:400;background:rgba(250,248,252,.92);padding:3px 7px;border-radius:3px;box-shadow:0 1px 2px rgba(43,38,49,.12)}
.marks span.r{translate:-100% 0;align-items:flex-end}
.marks span.r i{margin:0 7px 0 0}
.marks span i{order:2;width:1px;height:26px;margin-left:7px;background:#2b2631}
.js .marks span{opacity:0;transition:opacity .8s var(--ease)}
.js .stand.marked .marks span{opacity:1}
.js .stand.marked .marks span:nth-child(2){transition-delay:.15s}
.js .stand.marked .marks span:nth-child(3){transition-delay:.3s}
.gl-note{margin-top:14px;font-size:11px!important}
.kit-legend{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:20px 0 0;padding-top:0;font-size:11px!important;color:#4a4552}
.kit-legend li{border-top:1px solid rgba(43,38,49,.2);padding-top:12px}

/* Les imprimés : du papier, des formats qui se recouvrent */
.prints{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:clamp(100px,12vw,190px);padding-bottom:clamp(60px,8vw,120px);background:#f3f0f6}
.prints figure,.online figure{margin:0}
.prints img,.online img{display:block;width:100%;height:auto}
.prints figcaption,.online figcaption{margin-top:12px;font-size:11px!important;color:var(--muted)}
.pr-txt{grid-column:1/5;grid-row:1;align-self:start}
.pr-a22{grid-column:6/10;grid-row:1/3;margin-top:clamp(20px,3vw,48px)!important}
.pr-a23{grid-column:8/13;grid-row:1/4;margin-top:clamp(120px,14vw,240px)!important;position:relative;z-index:2}
.pr-badge{grid-column:2/5;grid-row:3;align-self:end;margin-bottom:clamp(20px,4vw,60px)!important}
.pr-a22 img,.pr-a23 img,.pr-badge img{box-shadow:0 1px 2px rgba(30,15,50,.12),0 30px 60px -28px rgba(30,15,50,.4)}
.pr-a22 img{filter:saturate(.96)}
.online{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-bottom:clamp(100px,12vw,190px);background:#f3f0f6}
.online>.spec-k{grid-column:1/13;margin:0 0 24px}
.on-eb{grid-column:1/9;grid-row:2}
.on-rs{grid-column:8/12;grid-row:2;margin-top:clamp(80px,10vw,180px)!important;position:relative;z-index:2}
.on-eb img,.on-rs img{border-radius:3px;box-shadow:0 30px 60px -30px rgba(30,15,50,.35)}

/* 03 · Le site : une seule version, en trois vues */
.web3{padding:clamp(100px,12vw,200px) 0 clamp(80px,9vw,140px);background:var(--studio)}
.web3 .txt{margin-bottom:clamp(48px,6vw,96px)}
.views{position:relative;padding-bottom:clamp(40px,6vw,100px)}
.views .browser{width:72%;border-radius:12px;box-shadow:0 60px 120px -50px rgba(19,0,38,.45),0 0 0 1px rgba(19,0,38,.06)}
.views .phone{position:absolute;padding:9px;border-radius:40px;background:#14101a;box-shadow:0 50px 100px -30px rgba(19,0,38,.55);width:clamp(180px,16vw,270px)}
.views .phone .vp{aspect-ratio:390/844;border-radius:31px}
.views .ph1{right:calc(var(--gutter-r) + 13%);bottom:-2%}
.views .ph2{right:var(--gutter-r);top:8%}
.web3 .dev-note{margin-top:28px;max-width:62em}

/* 04 · Le système */
.sys{padding:clamp(100px,12vw,190px) 0;background:#fff}
.sys-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px}
.principles{grid-column:3/13;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.principles li{border-top:1px solid var(--ink);padding-top:16px}
.principles b{display:block;font-weight:400;color:var(--muted);margin-bottom:12px}
.principles p{margin:0;font-size:clamp(17px,1.3vw,21px);line-height:1.38;letter-spacing:-.01em}
.sys-pal{grid-column:3/8}
.sys-pal .spec-k{color:var(--muted)}
.pal3{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.pal3 li{display:flex;align-items:center;gap:10px;font-size:11px}
.pal3 i{width:40px;height:40px;border-radius:50%;background:var(--c)}
.sys-type{grid-column:8/13;align-self:end}
.sys-type .type-a{font-family:"Jost","Futura PT",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(36px,4vw,72px);line-height:.92;margin:0 0 14px;color:#6000bc;letter-spacing:-.01em}

@media (max-width:1100px){
  .principles,.sys-pal,.sys-type{grid-column:1/13}
  .principles{grid-template-columns:1fr}
  .kit-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .build-steps3{grid-template-columns:1fr;gap:0}
  .build-steps3 li{padding:14px 0}
  .macro figure:nth-child(n){grid-column:1/13;margin-top:40px}
  .macro figure:first-child{margin-top:0}
  .macro svg{aspect-ratio:5/4}
  .room-before{grid-column:1/9}
  .space-txt>*{grid-column:1/13}
  .pr-txt{grid-column:1/13;grid-row:1;margin-bottom:32px}
  .pr-a22{grid-column:1/10;grid-row:2;margin-top:0!important}
  .pr-a23{grid-column:4/13;grid-row:3;margin-top:-30%!important}
  .pr-badge{grid-column:1/7;grid-row:4;margin:40px 0 0!important}
  .on-eb{grid-column:1/13}
  .on-rs{grid-column:4/13;grid-row:3;margin-top:28px!important}
  .online>.spec-k{grid-row:1}
}
@media (max-width:760px){
  .lb-stage{height:auto;aspect-ratio:4/5;min-height:0}
  .lb-stage .lb{width:84%;margin-top:-18%}
  .lb-ui{flex-direction:column;align-items:flex-start;gap:10px}
  .lb-ui .replay2{position:absolute;right:var(--gutter-r);bottom:0}
  .cw{flex-wrap:wrap;border-radius:20px}
  .cw button{padding:10px 12px}
  .gl-scene{aspect-ratio:1/1}
  .marks{display:none}
  .kit-legend{grid-template-columns:1fr;gap:0}
  .kit-legend li{padding:10px 0}
  .views{display:flex;gap:4vw;justify-content:center}
  .views .browser{display:none}
  .views .phone{position:relative;right:auto;top:auto;bottom:auto;width:44vw;padding:6px;border-radius:30px}
  .views .phone .vp{border-radius:25px}
  .views .ph2{margin-top:12vw}
}
@media (prefers-reduced-motion:reduce){
  .lb-stage,.lb-stage .lb stop,.lb-stage .lb .wm,.js .marks span{transition:none}
}

/* Ouverture : retouches légères, lignes plus fines, symbole un peu moins massif */
.hs .rules line{stroke:rgba(245,113,183,.18);stroke-width:.11}
@media (min-width:1181px){.hero2-sym{width:min(51vw,78vh,780px)}}