/* Démonstration 3D : reprend les couleurs du thème actif. */
.atelier-hero__grid{grid-template-columns:.96fr 1.12fr;gap:42px;align-items:center}
.atelier-hero{padding-top:40px}
.atelier-hero h1{font-size:clamp(46px,4.75vw,70px)}
.atelier-lab{position:relative;margin:0 0 30px;min-width:0;border:1px solid var(--c-border);border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--c-surface) 76%,transparent),var(--c-bg));box-shadow:0 24px 80px -36px color-mix(in srgb,var(--c-cyan) 25%,transparent);overflow:hidden;isolation:isolate}
.atelier-lab::before{content:"";position:absolute;inset:0 12% auto;height:1px;background:linear-gradient(90deg,transparent,var(--c-cyan),var(--c-violet),transparent);z-index:2}
.atelier-lab__top{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 15px;gap:12px;font:10px var(--f-mono);letter-spacing:.15em;color:var(--c-muted)}
.atelier-lab__eyebrow{color:var(--c-text)}
.atelier-lab__edition{color:var(--c-cyan)}
.atelier-lab__modes{display:grid;grid-template-columns:1fr 1fr;margin:0 20px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-bg);padding:4px;position:relative;z-index:2}
.atelier-lab__modes button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:8px 10px;border:0;border-radius:5px;color:var(--c-muted);background:transparent;font:600 12px var(--f-body);cursor:pointer;transition:background .2s,color .2s}
.atelier-lab__modes button span{font:10px var(--f-mono);opacity:.65}
.atelier-lab__modes button[aria-pressed=true]{background:var(--c-cyan);color:var(--c-on-accent)}
.atelier-lab[data-mode=uv] .atelier-lab__modes button[aria-pressed=true]{background:linear-gradient(110deg,var(--c-cyan),color-mix(in srgb,var(--c-cyan) 45%,var(--c-violet)))}
.atelier-lab__stage{position:relative;height:350px;overflow:hidden;touch-action:pan-y}
.atelier-lab__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.atelier-lab.is-ready canvas{opacity:1}
.atelier-lab__halo{position:absolute;inset:12% 8% 0;background:radial-gradient(ellipse at 48% 54%,color-mix(in srgb,var(--c-cyan) 10%,transparent),transparent 64%),radial-gradient(ellipse at 68% 56%,color-mix(in srgb,var(--c-violet) 12%,transparent),transparent 66%);pointer-events:none}
.atelier-lab__fallback{position:absolute;inset:0;display:grid;place-items:center}
.atelier-lab__fallback img{height:100%;width:100%;object-fit:contain}
.atelier-lab.is-ready .atelier-lab__fallback{display:none}
.atelier-lab__cross{position:absolute;font:20px var(--f-mono);color:var(--c-border-strong);pointer-events:none}
.atelier-lab__cross--a{top:28px;left:22px}.atelier-lab__cross--b{bottom:24px;right:22px}
.atelier-lab__coordinate{position:absolute;left:24px;bottom:25px;color:var(--c-muted);font:9px var(--f-mono);letter-spacing:.15em;opacity:.7}
.atelier-lab__caption{padding:0 24px 17px}
.atelier-lab__steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--c-border);gap:15px}
.atelier-lab__steps button{display:flex;gap:8px;align-items:center;position:relative;border:0;background:transparent;text-align:left;padding:15px 0 11px;min-height:44px;color:var(--c-muted);font:500 12px var(--f-body);cursor:pointer}
.atelier-lab__steps button span{font:10px var(--f-mono);opacity:.65}
.atelier-lab__steps button::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:transparent;transition:background .25s}
.atelier-lab__steps button[aria-current=step]{color:var(--c-cyan)}
.atelier-lab__steps button[aria-current=step]::before{background:var(--c-cyan);box-shadow:0 0 15px color-mix(in srgb,var(--c-cyan) 40%,transparent)}
.atelier-lab__explanation{min-height:104px;padding-top:5px}
.atelier-lab__explanation h2{font:500 21px/1.25 var(--f-body);letter-spacing:-.03em;margin:0 0 8px;color:var(--c-text)}
.atelier-lab__explanation p{font-size:12px;line-height:1.65;color:var(--c-muted);margin:0;max-width:60ch}
.atelier-lab__controls{display:flex;align-items:center;gap:12px;margin-top:10px}
.atelier-lab__controls button{display:grid;place-items:center;min-width:44px;min-height:36px;padding:6px 10px;border:1px solid var(--c-border);border-radius:5px;color:var(--c-text);background:var(--c-surface);font:10px var(--f-mono);cursor:pointer}
.atelier-lab__controls button[data-lab-replay]{font:22px/1 var(--f-body);min-width:36px}
.atelier-lab__controls input{flex:1;min-width:25px;width:100%;height:30px;accent-color:var(--c-cyan);cursor:pointer;margin:0}
.atelier-lab__controls output{font:10px var(--f-mono);color:var(--c-cyan);width:30px;text-align:right}
.atelier-lab__note{font:9px/1.5 var(--f-mono);color:var(--c-muted);margin:10px 0 0;letter-spacing:.01em}
.atelier-lab button:focus-visible,.atelier-lab input:focus-visible{outline:2px solid var(--c-cyan);outline-offset:4px}
@media(min-width:1500px){.atelier-lab__stage{height:390px}}
@media(max-width:1050px){.atelier-hero__grid{gap:24px;grid-template-columns:.95fr 1.05fr}.atelier-lab__stage{height:310px}.atelier-lab__caption{padding-inline:17px}.atelier-lab__top{padding-inline:17px}.atelier-lab__modes{margin-inline:13px}.atelier-lab__modes button{font-size:11px;gap:5px}.atelier-lab__explanation{min-height:120px}.atelier-lab__steps{gap:8px}.atelier-lab__steps button{font-size:11px;gap:5px}}
@media(max-width:760px){.atelier-hero__grid{grid-template-columns:1fr;gap:28px}.atelier-hero{padding-top:30px}.atelier-hero h1{font-size:clamp(44px,10.5vw,66px)}.atelier-lab{width:100%;max-width:560px;margin:0 auto 4px}.atelier-lab__stage{height:320px}.atelier-lab__top{padding-top:17px}.atelier-lab__explanation{min-height:110px}.atelier-lab__explanation h2{font-size:20px}.atelier-lab__modes button{font-size:12px}.atelier-lab__caption{padding-inline:18px}.atelier-lab__steps button{font-size:12px}}
@media(max-width:380px){.atelier-lab__stage{height:280px}.atelier-lab__modes button{font-size:11px}.atelier-lab__top{font-size:9px}.atelier-lab__steps button{font-size:11px}.atelier-lab__explanation{min-height:124px}}
@media(prefers-reduced-motion:reduce){.atelier-lab *{transition:none!important}}
@media print{.atelier-lab{display:none}.atelier-hero__grid{display:block}}
