/* Le décor appartient au premier écran. La chaîne occupe le bas de la scène. */
[data-page="studio"] .lab-hero{
  padding:0;background:#09070e;
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),#48375247 0);
  background-size:calc(100% / 6) 100%;overflow:hidden;isolation:isolate;
}
.lab-hero .hero-grid{width:100%;max-width:none;padding:0;gap:0}
.lab-hero .hero-copy{
  z-index:1;width:min(100% - 36px,760px);max-width:none;margin:0 auto;
  padding:clamp(29px,4vw,56px) 0 clamp(21px,4vw,49px);text-align:center;
}
.lab-hero .hero-top{justify-content:center;font-size:10px;margin-bottom:8px;color:#d2afea}
.lab-hero .hero-top::before{width:6px;height:6px}
.lab-hero .vigie-svg{display:block;width:clamp(122px,14vw,196px);height:auto;margin:0 auto 12px;overflow:visible}
[data-page="studio"] .lab-hero h1{
  font:700 clamp(2.55rem,6.3vw,6.1rem)/.96 var(--font-display,system-ui,sans-serif);
  letter-spacing:-.078em;color:#f9f4eb;
}
.lab-hero h1 span{display:block}
.lab-hero h1 span+span{color:#e2d1f2}
.lab-hero .hero-sub{margin-top:15px;max-width:53ch;color:#d1c3dc}
.lab-hero .hero-actions{justify-content:center;gap:7px;margin-top:17px}
.lab-hero .hero-live{margin-top:13px}
.lab-hero .hero-live[hidden]{display:none}
.lab-hero .hero-grid>.factory{
  position:relative;width:100%;margin:0;border:0;box-shadow:none;background:transparent;
}
.lab-hero .factory-svg{width:100%;max-width:1580px;margin:0 auto}
.lab-hero .factory figcaption{
  width:min(100% - 36px,1230px);margin:0 auto;padding:10px 0 13px;
  border-top:1px solid #4e3b5c;color:#d4c2df;
}
.lab-hero .factory figcaption .pixel-motion{margin-left:auto}
.lab-hero .factory figcaption b{color:#d8f995}
.lab-side{
  pointer-events:none;position:absolute;z-index:0;bottom:32%;width:clamp(90px,16vw,245px);
  height:clamp(90px,12vw,190px);color:#bd93ed;opacity:.9;
}
.lab-side--left{left:0}.lab-side--right{right:0}
.lab-side svg{display:block;width:100%;height:100%}
.lab-side--right svg{transform:scaleX(-1)}
[data-pixel-motion] .lab-side-claw{animation:lab-side-gantry 11s steps(14,end) infinite}
[data-pixel-motion] .lab-side--right .lab-side-claw{animation-delay:-4s}
[data-pixel-motion] .lab-electric{animation:lab-electric 4.7s step-end infinite}
[data-pixel-motion] .lab-puff{animation:lab-steam 5.1s steps(7,end) infinite}
[data-pixel-motion="paused"] .lab-hero :is(.lab-side-claw,.lab-blink,.lab-blink-line){animation-play-state:paused}
@keyframes lab-side-gantry{0%,12%,86%,100%{transform:none}31%,61%{transform:translateY(34px)}}
@keyframes lab-electric{0%,48%,66%,100%{opacity:0}53%,62%{opacity:1}}
@media(max-width:700px){
  .lab-hero .hero-copy{padding-bottom:24px}
  .lab-hero .lab-side{opacity:.44;bottom:27%}
  .lab-hero .factory figcaption{font-size:.72rem}
  .lab-hero .factory figcaption .pixel-motion{margin-left:0}
}
@media(max-width:420px){.lab-hero .lab-side{display:none}}


/* Repères de montage et témoins de contact. Le cycle de la chaîne dure 18 s. */
.lab-grip-contact,.lab-drop-contact,.lab-bench-contact{opacity:0}
[data-pixel-motion] .lab-grip-contact{animation:lab-grip-contact 18s step-end infinite}
[data-pixel-motion] .lab-bench-contact{animation:lab-bench-contact 18s step-end infinite}
[data-pixel-motion] .lab-drop-contact{animation:lab-drop-contact 18s step-end infinite}
@keyframes lab-grip-contact{0%,17%,72%,100%{opacity:0}15%,70%{opacity:1}}
@keyframes lab-bench-contact{0%,53%,100%{opacity:0}51%{opacity:1}}
@keyframes lab-drop-contact{0%,96%,100%{opacity:0}93%{opacity:1}}

/* Les postes de l'illustration mènent aux mêmes étapes dans la page. */
.factory-stations{width:min(100% - 36px,1230px);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #503b5e}
.factory-stations a{display:flex;align-items:center;gap:7px;padding:9px 11px;min-width:0;color:#f6f0e9;background:#171020;font-size:clamp(.67rem,1.4vw,.85rem)}
.factory-stations a+a{border-left:1px solid #503b5e}
.factory-stations a:hover,.factory-stations a:focus-visible{background:#2a1b36;color:#d8f995}
.factory-stations a:focus-visible{outline:2px solid #d8f995;outline-offset:-2px}
.factory-stations b{font:600 10px var(--font-mono);color:#d8f995}
.lab-route{scroll-margin-top:72px}
.lab-route .lab-route-list a{grid-template-columns:auto minmax(0,1fr);align-content:start;gap:12px;padding:18px 13px}
.lab-route .route-icon{width:clamp(30px,3.5vw,44px);height:auto;background:#171020}
.route-copy{display:grid;align-content:start;gap:7px}
.lab-route .route-copy .route-action{display:inline-flex;gap:5px;align-items:center;color:var(--accent);font-weight:650;font-size:.78rem;margin-top:4px}
.lab-route a:is(:hover,:focus-visible) .route-action{text-decoration:underline}
@media(prefers-reduced-motion:no-preference){.lab-route a:is(:hover,:focus-visible) .route-part{animation:route-pixel .45s steps(1,end)}}
@keyframes route-pixel{0%,100%{transform:none}35%{transform:translateY(-3px)}65%{transform:translateY(1px)}}

/* Intro du Studio en deux colonnes, laboratoire dans le cadre du Guide. */
[data-page="studio"] .lab-hero--split{
  padding:clamp(37px,6.3vw,99px) 0;
  background-color:#0d0a13;
  background-image:linear-gradient(90deg,#bda0e010 1px,transparent 1px),linear-gradient(#bda0e010 1px,transparent 1px);
  background-size:24px 24px;
}
.lab-hero--split .hero-grid{
  max-width:1320px;padding-inline:clamp(18px,3vw,40px);margin:0 auto;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(25px,5vw,78px);
}
.lab-hero--split .hero-copy{width:100%;max-width:560px;margin:0;padding:0;text-align:left}
.lab-hero--split .hero-top,.lab-hero--split .hero-actions{justify-content:start}
.lab-hero--split .hero-sub{margin-inline:0}
.lab-hero--split h1 .pixel-title{width:min(100%,490px);margin-inline:0;filter:drop-shadow(0 0 20px #b1ef4940)}
[data-page="studio"] .lab-hero--split h1 .pixel-tagline{font-size:clamp(1.95rem,4.2vw,4.15rem);letter-spacing:-.06em;margin-top:16px;color:#f9f4eb}
.lab-hero--split .hero-grid>.factory{border:1px solid #574466;box-shadow:7px 7px 0 #2c1e3b;background:#0b0812}
.lab-hero--split .factory-stations,.lab-hero--split .factory figcaption{width:100%;padding-inline:10px}
.lab-hero--split .factory-stations{padding:0;border-inline:0}
.studio-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#eee8f0;border-bottom:1px solid #cdbed6}
.studio-products a{display:flex;justify-content:center;align-items:center;gap:10px;position:relative;min-height:84px;color:#211a2c;font:700 clamp(1rem,2.35vw,2rem)/1 var(--font-display,system-ui,sans-serif);letter-spacing:-.06em}
.studio-products a+a{border-left:1px solid #cdbed6}
.studio-products a:hover,.studio-products a:focus-visible{background:#e6f4c9}
.studio-products a:focus-visible{outline:2px solid #664286;outline-offset:-4px}
.studio-products a>span{position:absolute;right:8px;top:7px;color:#5d5266;font:10px var(--font-mono);letter-spacing:0}
.studio-products svg{flex:none;width:clamp(15px,2vw,24px)}
@media(max-width:830px){
  .lab-hero--split .hero-grid{grid-template-columns:minmax(0,1fr)}
  .lab-hero--split .hero-grid>.factory{max-width:690px}
}
@media(max-width:530px){
  .studio-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-products a{min-height:62px}
  .studio-products a:nth-child(3){border-left:0}
  .studio-products a:nth-child(n+3){border-top:1px solid #cdbed6}
}

/* Plein écran d'ouverture, puis cartouche de titre. */
[data-page="studio"] .lab-hero--stage{padding:0;background:#08060e}
.lab-hero--stage .hero-grid{padding:0;max-width:none;gap:0}
.lab-hero--stage .hero-grid>.factory{
  width:100%;max-width:none;margin:0;border:0;box-shadow:none;
  background-color:#09070e;
  background-image:linear-gradient(90deg,#30213958 1px,transparent 1px),linear-gradient(#30213958 1px,transparent 1px);
  background-size:24px 24px;
  background-position:center top;
}
.lab-hero--stage .factory-bar{padding-inline:clamp(15px,4vw,58px);background:#140e1c}
.lab-hero--stage .factory-svg{width:100%;max-width:none;height:min(74svh,850px);min-height:360px}
.lab-hero--stage .factory-stations,.lab-hero--stage .factory figcaption{width:min(100% - 36px,1230px)}
.lab-hero--stage .hero-copy{
  width:min(100% - 36px,1230px);max-width:none;padding:clamp(30px,5vw,73px) clamp(15px,4vw,56px);
  margin:22px auto clamp(22px,4vw,56px);text-align:left;border:1px solid #453453;
  background-color:#100b17;background-image:linear-gradient(90deg,#62477921 1px,transparent 1px),linear-gradient(#62477921 1px,transparent 1px);background-size:24px 24px;
}
.lab-hero--stage .hero-top,.lab-hero--stage .hero-actions{justify-content:start}
.lab-hero--stage .hero-sub{margin-inline:0}
.lab-hero--stage h1 .pixel-title{width:min(100%,540px);margin-inline:0;filter:drop-shadow(0 0 18px #b1ef494a)}
[data-page="studio"] .lab-hero--stage h1 .pixel-tagline{font-size:clamp(2.05rem,5vw,4.8rem);line-height:1;letter-spacing:-.065em;margin-top:12px;color:#f9f4eb}
[data-pixel-motion] .lab-delivery{animation:lab-delivery 6.8s steps(18,end) infinite}
[data-pixel-motion] .delivery-right{animation-delay:-3.1s;--delivery-distance:-109px}
@keyframes lab-delivery{0%,12%{opacity:0;transform:none}18%{opacity:1}74%{opacity:1;transform:translateX(var(--delivery-distance,109px))}84%,100%{opacity:0;transform:translateX(var(--delivery-distance,109px))}}
@media(max-width:720px){
  .lab-hero--stage .factory-svg{height:auto;min-height:0}
  .lab-hero--stage .hero-copy{margin-top:14px}
}

[data-pixel-motion] .wing-dragon{animation:wing-orbit 10s steps(5,end) infinite}
[data-pixel-motion] .wing-dragon-flap{animation:wing-flap .65s steps(1,end) infinite;transform-origin:19px 18px}
[data-pixel-motion] .wing-princess{animation:wing-princess 7.8s steps(1,end) infinite}
[data-pixel-motion] .wing-octopus{animation:wing-swim 6.2s steps(9,end) infinite}
[data-pixel-motion] .wing-tentacles{animation:wing-tentacles 2.6s steps(3,end) infinite}
[data-pixel-motion] .wing-duck{animation:wing-duck 5.6s steps(8,end) infinite}
[data-pixel-motion] .wing-liquid{animation:wing-wave 3.3s steps(5,end) infinite}
[data-pixel-motion] .wing-bubble{animation:wing-bubble 5s steps(19,end) infinite}
[data-pixel-motion] .bubble-2{animation-delay:-1.6s}
[data-pixel-motion] .bubble-3{animation-delay:-3.2s}
[data-pixel-motion] .bubble-4{animation-delay:-4.1s}
.wing-dragon{transform:translate(10px,130px)}
@keyframes wing-orbit{
  0%,100%{transform:translate(10px,130px);opacity:1}
  20%{transform:translate(38px,65px);opacity:1}
  43%{transform:translate(107px,63px);opacity:1}
  62%{transform:translate(133px,137px) scaleX(-1);opacity:.84}
  78%{transform:translate(110px,188px) scaleX(-1);opacity:.25}
  91%{transform:translate(35px,181px);opacity:.5}
}
@keyframes wing-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.48)}}
@keyframes wing-princess{0%,68%,100%{transform:none}72%,81%{transform:translateX(2px)}}
@keyframes wing-swim{0%,100%{transform:none}50%{transform:translate(4px,-10px)}}
@keyframes wing-tentacles{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes wing-duck{0%,100%{transform:none}40%{transform:translate(9px,-3px)}69%{transform:translate(4px,1px)}}
@keyframes wing-wave{0%,100%{transform:none}50%{transform:translateY(2px)}}
@keyframes wing-bubble{0%{opacity:0;transform:none}15%{opacity:.86}83%{opacity:.86}100%{opacity:0;transform:translate(4px,-145px)}}

/* Un seul canevas du laboratoire à la bande des produits. */
[data-page="studio"] .lab-hero--stage{
  --studio-outro-space:clamp(20px,3vw,44px);
  background:#100b18;
}
.lab-hero--stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,#a17eb630 1px,transparent 1px),linear-gradient(#a17eb630 1px,transparent 1px);
  background-size:24px 24px;background-position:center top;
  mask-image:linear-gradient(#000,transparent 86%);
}
.lab-hero--stage .hero-grid{padding-bottom:var(--studio-outro-space)}
.lab-hero--stage .hero-grid>.factory{background:transparent}
.lab-hero--stage .hero-copy{margin-bottom:0;border:0;background:transparent}
.lab-hero--stage+.studio-products{background:#eee8f0;border-top:2px solid #725786}

/* Plateau panoramique et lumière d'atelier. */
[data-page="studio"] .lab-hero--stage{
  background:
    radial-gradient(ellipse 57% 32% at 50% 19%,#30203e 0%,#160e22 57%,transparent 100%),
    linear-gradient(180deg,#08060d 0%,#130b1c 55%,#100b17 100%);
}
.lab-hero--stage::before{
  background-image:linear-gradient(90deg,#88699e26 1px,transparent 1px),linear-gradient(#88699e26 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,transparent 1%,#000 18%,#000 55%,transparent 86%);
}
.lab-hero--stage .factory-svg{width:100%;height:auto;max-width:none;min-height:0;aspect-ratio:1436/747}

.eye-pulse{opacity:0;stroke-width:3;stroke-dasharray:2 98;stroke-dashoffset:2}
@media(prefers-reduced-motion:no-preference){
  [data-pixel-motion="playing"] .eye-pulse{animation:eye-circuit-travel 5.4s linear var(--eye-pulse-delay) infinite}
  [data-pixel-motion="playing"] .eye-pulse:nth-child(4n){animation-duration:6.7s}
}
@keyframes eye-circuit-travel{0%,6%{stroke-dashoffset:2;opacity:0}12%,83%{opacity:1}90%,100%{stroke-dashoffset:-100;opacity:0}}

.sky-cloud{opacity:.14;pointer-events:none}
.sky-ufo-beam{opacity:.19}
@media(prefers-reduced-motion:no-preference){
  [data-pixel-motion="playing"] .cloud-west{animation:cloud-west 13s ease-in-out infinite alternate}
  [data-pixel-motion="playing"] .cloud-east{animation:cloud-east 16s ease-in-out -6s infinite alternate}
  [data-pixel-motion="playing"] .sky-bat{transform-origin:center;transform-box:fill-box;animation:sky-flap .68s steps(2,end) infinite}
  [data-pixel-motion="playing"] .sky-ufo-beam{animation:disco-shift 2.6s steps(3,end) infinite alternate}
  [data-pixel-motion="playing"] .tower-disco{animation:disco-shift 2.8s steps(3,end) infinite alternate}
  [data-pixel-motion="playing"] .wing-princess{animation:princess-dance 1.2s steps(2,end) infinite}
  [data-pixel-motion="playing"] .princess-bodice{animation:princess-costume 15s step-end infinite}
}
@keyframes cloud-west{from{transform:translate(-18px,0)}to{transform:translate(39px,9px)}}
@keyframes cloud-east{from{transform:translate(20px,7px)}to{transform:translate(-44px,-6px)}}
@keyframes sky-flap{50%{transform:scaleY(.55)}}
@keyframes disco-shift{from{opacity:.22}to{opacity:.78}}
@keyframes princess-dance{0%,100%{transform:none}25%{transform:translate(-2px,-2px)}65%{transform:translate(2px,-2px)}}
@keyframes princess-costume{0%,79%,88%,100%{opacity:1}80%,87%{opacity:0}}
.lab-hero--stage h1 .pixel-title{width:min(100%,690px)}