/* L’univers des clips : lumière de laboratoire, acier et verre. */
:root{--bg:#06111b;--bg2:#0b1b29;--panel:#102432;--panel2:#173344;--line:#49738a;--muted:#b1c7d4;--text:#f4f8fa;--lime:#d5e58d;--gold:#e2bd87;--red:#f5a4a1}
body{position:relative;isolation:isolate;background:#06111b;color:var(--text)}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-3;background-image:url('scenes/laboratoire.jpg');background-repeat:no-repeat;background-size:cover;background-position:center center;filter:saturate(.92) contrast(1.05)}
body::after{z-index:-2;background:linear-gradient(90deg,rgba(2,10,18,.88) 0%,rgba(3,14,24,.78) 38%,rgba(4,16,26,.58) 68%,rgba(2,11,19,.70) 100%),linear-gradient(0deg,rgba(2,10,17,.64),transparent 28%,transparent 70%,rgba(2,9,16,.35))}
body[data-scene="home"]::after{background:linear-gradient(90deg,rgba(2,9,17,.91) 0%,rgba(2,11,20,.78) 38%,rgba(2,12,20,.48) 68%,rgba(2,10,17,.60) 100%),linear-gradient(0deg,rgba(2,9,17,.63),transparent 35%,rgba(2,8,15,.24))}
body[data-scene="vault"]::before{background-image:url('scenes/coffre.jpg');background-position:center center}
body[data-scene="vault"]::after{background:linear-gradient(90deg,rgba(2,9,17,.92),rgba(2,10,18,.82) 43%,rgba(3,12,20,.70) 75%,rgba(2,9,17,.79)),linear-gradient(0deg,#06121dcc,transparent 48%)}
body[data-scene="metal"]::before,body[data-scene="done"]::before{background-image:url('scenes/echantillon.jpg');background-position:center center}
body[data-scene="metal"]::after,body[data-scene="done"]::after{background:linear-gradient(90deg,rgba(2,10,19,.89),rgba(3,13,23,.78) 42%,rgba(3,13,23,.62) 75%,rgba(2,10,17,.72)),linear-gradient(0deg,#06121dd9,transparent 46%)}
body[data-scene="teacher"]::after{background:linear-gradient(90deg,rgba(3,12,21,.93),rgba(3,12,21,.89)),linear-gradient(0deg,#06121dcc,transparent)}
.ambient{z-index:-1;opacity:.35;background-image:linear-gradient(#79b7d713 1px,transparent 1px),linear-gradient(90deg,#79b7d713 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(90deg,black,transparent 88%)}
.app-shell{z-index:1;max-width:1680px}
.topbar{border-color:#b7d7e242;backdrop-filter:blur(5px)}
.brand-mark{font-size:27px;text-shadow:0 0 18px #9cdcff55}
.brand-mark span{color:#9cdfff}
.brand-label,.top-caption,.footer{color:#bfd3dd}
.status-dot{background:#87d8f2;box-shadow:0 0 13px #5acfff}
.settings-button{border-radius:3px;background:linear-gradient(145deg,#42607677,#0b223299);border-color:#8eb8c866;color:#d8eaf0;box-shadow:inset 0 1px #fff2}
.settings-button:hover{color:#fff;border-color:#a4e2f2;box-shadow:0 0 18px #59c9e855}
.footer{border-color:#b7d7e242;text-shadow:0 1px 3px #000}
.eyebrow{color:#9fdef0;text-shadow:0 0 14px #4ab9e388}
.eyebrow .line,.tiny-line{background:#9bcad3a8}
.panel-top,.step-label,.device-heading,.card-kicker{color:#c6dde5}
.step-label{color:var(--gold)}
.hero-graphic{display:none}
.home-layout{grid-template-columns:minmax(0,1.1fr) minmax(365px,.9fr);gap:clamp(50px,8vw,145px)}
.hero{padding:30px 0 25px}
.hero::before{content:"";position:absolute;left:-25px;top:-20px;bottom:-20px;width:min(100%,650px);z-index:-1;background:radial-gradient(ellipse at 30% 50%,#02101ce0,transparent 70%);filter:blur(12px)}
.hero h1{font-size:clamp(59px,5.5vw,93px);line-height:.98;letter-spacing:-.075em;text-shadow:0 4px 28px #000c,0 0 50px #05121e}
.hero h1 em{color:#ebf7fc;text-shadow:0 2px 22px #58b9e666}
.title-period,.accent{color:#94d9ef}
.hero-text{color:#d3e3e9;font-size:19px;text-shadow:0 2px 12px #000}
.mission-statement{color:#fff;text-shadow:0 2px 10px #000;font-size:16px}
.mini-symbol{border-color:#91d9ef;color:#b0e7f5;background:#0b2d43aa;box-shadow:0 0 20px #66bfe46b}
.group-panel,.validation-card,.metal-card,.teacher-login,.config-card{background:linear-gradient(140deg,rgba(14,36,53,.91),rgba(7,22,35,.92));border:1px solid #83b4c366;box-shadow:0 25px 85px #0009,inset 0 1px #d7eff522;backdrop-filter:blur(14px)}
.group-panel{border-radius:3px;padding:clamp(29px,3.5vw,52px)}
.group-panel::before,.device-card::before{background:linear-gradient(90deg,#82d4ef,#e0eef4);box-shadow:0 0 22px #64d9f5}
.group-panel h2,.metal-card h2{color:#f6fbfd;text-shadow:0 3px 16px #0009}
.group-panel p,.metal-card p,.validation-card p,.teacher-head p,.password-panel p{color:#c1d4dc}
.group-button,.metal-option{background:linear-gradient(135deg,#274253aa,#0c2538cc);border-color:#719caf88;box-shadow:inset 0 1px #e2f5fb1c}
.group-button:hover:not(:disabled),.metal-option:hover{border-color:#afe6f7;background:#2e5367bb;box-shadow:inset 0 1px #e2f5fb33,0 0 18px #56bfe438}
.group-num,.arrow,.video-arrow,.panel-index,.config-number{color:#a9e3f2}
.video-button{color:#d8eaf0;border-color:#8db4c655}
.video-button:hover{color:#a9e3f2}
.play-icon{border-color:#a4d6e5;background:#17425a88;box-shadow:0 0 16px #77cbe855}
.stage-content{position:relative}
.stage-content::before{content:"";position:absolute;inset:-45px -55px -45px -30px;z-index:-1;background:radial-gradient(ellipse at 32% 50%,#04111dec,transparent 72%);filter:blur(16px)}
.stage-content h1{color:#f5fafc;text-shadow:0 4px 25px #000c}
.stage-content h1 em{color:#aadff0;text-shadow:0 0 25px #51b9df88}
.lead{color:#deedf1;text-shadow:0 2px 10px #000}
.stage-note{color:#b9d3db;border-color:#9dc5d766;background:#071b29a8;padding:20px 20px 20px 0}
.note-icon{border-color:#9dd4e5;color:#a3e4f2}
.device-card{background:linear-gradient(145deg,rgba(15,36,50,.96),rgba(5,18,31,.97));border:1px solid #91bfd077;box-shadow:0 30px 90px #000c,inset 0 1px #d8f4fa33;padding:20px}
.device-heading{padding:5px 5px 18px;color:#d5ebf1}
.device-led{color:#ff8e98;text-shadow:0 0 11px #fa556f}
.vault-art{height:315px;position:relative;background-image:linear-gradient(0deg,#07131a77,transparent 45%),url('scenes/coffre.jpg');background-size:cover;background-position:70% 43%;border:1px solid #a5c2ca55;box-shadow:inset 0 0 0 7px #07172366,inset 0 0 45px #0009,0 12px 25px #0007;overflow:hidden}
.vault-art::after{content:"COFFRE SCELLÉ";position:absolute;left:18px;bottom:16px;color:#e7f2f3;font-size:10px;letter-spacing:.2em;text-shadow:0 2px 5px #000;font-weight:700}
.vault-door{display:none}
.device-form{margin-top:18px;background:linear-gradient(140deg,#19364aaa,#0a2638cc);border-color:#8cb8ca88;box-shadow:inset 0 1px #fff2}
.device-form label,.validation-card label,.teacher-login label{color:#cee4eb}
.code-entry,.validation-card input,.teacher-login input,.config-card input,.config-card select,.password-panel input{background:#071c2bcc;border-color:#7ca8bb99;color:#f1f9fc;box-shadow:inset 0 2px 8px #0007}
.code-entry input{color:#bcefff;text-shadow:0 0 15px #74d6f599}
.code-entry input::placeholder{color:#95bac8}
.code-suffix{color:#b9d2dc}
.primary-button{background:linear-gradient(115deg,#c7e8ec,#a3d3e4);border-color:#a8dce9;color:#071f2e;box-shadow:inset 0 1px #fff9,0 7px 22px #07111a99}
.primary-button:hover{background:linear-gradient(115deg,#e0f5f6,#b8e5f1)}
.validation-card,.metal-card{border-radius:3px;position:relative;overflow:hidden}
.validation-card::before,.metal-card::before,.teacher-login::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#91d8f1,transparent);box-shadow:0 0 20px #71c7e9}
.validation-card::after{content:"";position:absolute;right:-85px;top:-85px;width:220px;height:220px;border:1px solid #8ad8ec38;border-radius:50%;box-shadow:0 0 0 28px #78c5df0a,0 0 0 55px #78c5df08;pointer-events:none}
.card-symbol{display:grid;place-items:center;width:76px;height:76px;border:1px solid #96d4e688;border-radius:50%;background:radial-gradient(circle,#246581bb,#0b2a3dbb 70%);color:#c4f0f6;text-shadow:0 0 15px #6cdaeb;box-shadow:0 0 30px #4dbce94f;font-size:42px}
.card-kicker{color:#a7e1ed}
.validation-card h2{color:#fff}
.card-foot .progress-track{background:#4f8397}
.progress-track i{background:#99dbe9;box-shadow:0 0 12px #75d2e9}
.metal-card{background:linear-gradient(140deg,rgba(12,32,48,.94),rgba(6,21,34,.96))}
.metal-option:has(input:checked){border-color:#b9ebf5;background:#24506a;box-shadow:0 0 18px #68d0ee55}
.metal-index{color:#9eddf1}
.metal-option:has(input:checked) .radio-look{background:#afe5f2;box-shadow:inset 0 0 0 2px #24506a,0 0 10px #99dcf5}
.completion{background:linear-gradient(135deg,#051622dd,#0b2a3bd9);border:1px solid #94bfd066;box-shadow:0 25px 90px #0008;padding:75px}
.completion h1 em{color:#a9e4f1}
.secondary-button{background:linear-gradient(135deg,#183649cc,#0b2637cc);border-color:#93c0cf;color:#e5f3f6}
.secondary-button:hover{border-color:#b9e9f4;color:#b9e9f4}
.teacher-area{position:relative}
.teacher-head h1,.teacher-login h1{color:#f6fbfd;text-shadow:0 4px 25px #0009}
.config-card{background:linear-gradient(145deg,rgba(18,44,62,.92),rgba(7,25,38,.95));border-color:#6e9caf77}
.config-heading,.code-preview{border-color:#93bfcc55}
.config-dot{color:#8eddf0;text-shadow:0 0 12px #67d3ef}
.config-card label,.password-panel label{color:#c2dce4}
.code-preview{color:#a8c7d2}
.code-preview strong{color:#b6e7f2;text-shadow:0 0 14px #6ac5e766}
.save-row{color:#c2d7df}
.password-panel{border-color:#92baca66;background:#061a28aa;padding:35px 25px 25px}
.modal-backdrop{background:#03101aee;backdrop-filter:blur(12px)}
.video-modal{background:#0b2232;border-color:#8dbdcc}
.video-empty{background:linear-gradient(#06182799,#061827cc),url('scenes/laboratoire.jpg') center/cover}
@media(max-width:760px){body::before{background-attachment:scroll;background-position:54% center}body::after{background:linear-gradient(180deg,#03111dda,#03111ddd)}body[data-scene="home"]::before{background-position:58% top}body[data-scene="vault"]::before{background-position:68% center}.home-layout{gap:0}.hero{padding:30px 0 10px}.hero::before{inset:-15px -20px;background:#041521ab;filter:blur(20px)}.hero h1{font-size:clamp(46px,10.5vw,72px)}.hero-text{font-size:17px}.group-panel{margin-top:28px}.stage-layout{padding-top:35px}.stage-content::before{inset:-20px;background:#03111fc4;filter:blur(18px)}.stage-content h1{font-size:clamp(51px,12vw,72px)}.stage-note{margin:30px 0}.device-card,.validation-card,.metal-card{width:100%}.password-panel{padding:28px 17px}.completion{padding:50px 25px}}
@media(max-width:430px){.vault-art{height:270px;background-position:70% center}.group-panel{padding:23px}.device-card{padding:14px}.code-entry input{font-size:30px}.hero h1{font-size:43px}.completion h1{font-size:55px}}
@media(max-width:760px){body[data-scene="home"]::before{background-position:78% center}body[data-scene="home"]::after{background:linear-gradient(180deg,#03111dd1,#03111dbd 38%,#03111dd9 77%,#03111ded)}}
@media(prefers-reduced-motion:no-preference){.device-led{animation:statusGlow 2.7s ease-in-out infinite}@keyframes statusGlow{50%{opacity:.65;text-shadow:0 0 4px #fa556f}}}