:root{--navy:#071426;--navy2:#0b1f38;--blue:#3d7fca;--blue2:#84b7ec;--orange:#ff6b35;--green:#4fb887;--paper:#fffdf8;--ink:#10233c;--muted:#637285;--line:rgba(27,58,99,.16);--red:#d94747;--yellow:#f2c94c}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:#f4efe6;color:var(--ink);font-family:Calibri,"Segoe UI",Aptos,system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer}.experience{--scene:var(--blue);min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 7%,rgba(61,127,202,.12),transparent 29rem),linear-gradient(180deg,#f8fbff 0 43rem,#f4efe6 43rem 100%)}.ambient{position:absolute;inset:0 0 auto;height:48rem;pointer-events:none}.orb{position:absolute;border-radius:50%;opacity:.34;animation:drift 16s ease-in-out infinite alternate}.o1{width:24rem;height:24rem;top:4rem;right:-7rem;border:1px solid rgba(132,183,236,.25)}.o2{width:15rem;height:15rem;top:10rem;right:8rem;border:1px dashed rgba(255,107,53,.28)}.o3{width:6rem;height:6rem;top:29rem;left:8%;background:rgba(79,184,135,.12)}@keyframes drift{to{transform:translate(1rem,1.3rem) rotate(9deg)}}.topbar,.hero,.module-shell,.final-message,.refs,footer{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin-inline:auto}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(27,58,99,.12)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy2)}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(27,58,99,.18);background:linear-gradient(145deg,#e8f1fb,#fff0e8);font:italic 25px "Trebuchet MS",Calibri,sans-serif}.brand span:last-child{display:grid}.brand strong{font-size:14px;letter-spacing:.04em}.brand small{color:#66788c;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.topbar-actions{display:flex;gap:8px}.pill,.listen{min-height:40px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:var(--navy2);background:#fff;padding:0 15px}.hero{min-height:465px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);align-items:center;padding:54px 0 74px}.eyebrow{margin:0 0 16px;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1,.lesson-top h2,.final-message h2{font-family:"Trebuchet MS",Calibri,Arial,sans-serif;font-weight:500;letter-spacing:-.015em}.hero h1{max-width:760px;margin:0;font-size:clamp(52px,7vw,90px);line-height:.96}.hero h1 span,.final-message h2 span{color:var(--orange);font-style:italic}.hero-copy>p:not(.eyebrow){max-width:610px;margin:26px 0 0;color:#56687c;font-size:18px;line-height:1.65}.start,.nav{border:0;border-radius:999px;background:var(--scene);color:white;padding:14px 20px;font-weight:800;box-shadow:0 12px 25px rgba(0,0,0,.17)}.start{margin-top:28px}.hero-art{height:330px;position:relative;display:grid;place-items:center}.bottle{position:relative;width:120px;height:250px}.bottle .cap{position:absolute;left:42px;top:0;width:36px;height:18px;border-radius:5px 5px 2px 2px;background:#d7dde5;border:2px solid #8b96a6}.bottle .neck{position:absolute;left:39px;top:16px;width:42px;height:36px;background:linear-gradient(90deg,#d4d9df,#f4f6f8,#bdc5ce);border:2px solid #8b96a6}.bottle .body{position:absolute;top:46px;left:10px;width:100px;height:183px;border-radius:28px 28px 21px 21px;border:3px solid #9aa5b2;background:linear-gradient(90deg,#cdd4dc,#f7f8fa 45%,#b8c1cb);overflow:hidden;box-shadow:inset 0 0 0 8px rgba(255,255,255,.16),0 20px 35px rgba(0,0,0,.25)}.bottle .liquid{position:absolute;bottom:0;width:100%;height:72%;background:linear-gradient(#69aee9,#2d76bc);opacity:.78}.bottle .vapor{position:absolute;top:0;width:100%;height:28%;background:linear-gradient(rgba(132,183,236,.12),rgba(132,183,236,.34))}.bottle .foot{position:absolute;bottom:0;left:20px;width:80px;height:25px;border:3px solid #8994a2;border-top:0;border-radius:0 0 12px 12px}.tag{position:absolute;right:15px;bottom:52px;transform:rotate(5deg);display:grid;gap:2px;background:#f2eee2;color:var(--ink);padding:10px 14px;border-radius:5px;box-shadow:0 8px 18px rgba(0,0,0,.25);font-size:12px}.tag b{color:var(--orange)}.module-shell{display:grid;grid-template-columns:205px minmax(0,1fr);gap:26px;padding-bottom:90px}.stepper{align-self:start;display:grid;gap:7px;padding:14px;border-radius:22px;background:#fff;border:1px solid var(--line)}.stepper button{display:flex;align-items:center;gap:11px;border:0;border-radius:13px;background:transparent;color:#6b7b8d;padding:11px;text-align:left}.stepper button b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e8eef5;font-size:11px}.stepper button.active{background:#eef4fb;color:var(--navy2)}.stepper button.active b{background:var(--scene)}.lesson-card{color:var(--ink);background:var(--paper);border-radius:28px;box-shadow:0 25px 65px rgba(18,36,54,.18);padding:34px 38px}.lesson-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.lesson-top h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.02}.lesson-text{max-width:800px;color:var(--muted);font-size:18px;line-height:1.6}.voice-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.voice-controls .listen{background:var(--navy2);color:#fff}.speed{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}.speed button{border:0;background:transparent;width:36px;height:39px;color:var(--ink);font-weight:800}.speed span{min-width:56px;text-align:center;font-size:13px;font-weight:800}.interactive-zone{min-height:355px;margin-top:28px;padding:26px;border:1px solid var(--line);border-radius:22px;background:#f8f6ef;overflow:hidden}.lesson-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}.nav{margin:0;box-shadow:none}.nav.subtle{background:#e8edf2;color:var(--ink)}#status{color:var(--muted);font-size:13px;font-weight:700}.concept-grid,.choice-grid,.parts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card,.choice,.part{border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px}.card strong,.choice strong,.part strong{display:block;margin:5px 0 8px;font-size:19px}.card p,.choice p,.part p{margin:0;color:var(--muted);line-height:1.45}.choice{cursor:pointer;transition:.18s}.choice:hover{transform:translateY(-2px);border-color:rgba(61,127,202,.45)}.choice.good{outline:3px solid rgba(79,184,135,.25);border-color:var(--green)}.choice.bad{outline:3px solid rgba(217,71,71,.18);border-color:var(--red)}.label{display:inline-flex;border-radius:999px;padding:5px 9px;background:#e8f0f8;color:var(--blue);font-size:11px;font-weight:800}.label.orange{background:#fff0e8;color:var(--orange)}.label.green{background:#eaf7f1;color:#278362}.label.red{background:#fdecec;color:var(--red)}.diagram{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:28px}.mini-bottle-wrap{display:grid;place-items:center}.mini-bottle{transform:scale(.88);transform-origin:center}.callouts{display:grid;gap:10px}.callout{border-left:4px solid var(--blue);background:white;border-radius:0 14px 14px 0;padding:12px 15px}.scale-lab{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.scale{background:#202a33;border-radius:20px;padding:22px;color:#fff;text-align:center;box-shadow:inset 0 -12px 0 rgba(0,0,0,.14)}.scale-platform{height:28px;border-radius:8px;background:#aeb7c0;margin-bottom:18px}.display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:44px;background:#cfe8b8;color:#20331d;border-radius:10px;padding:12px}.calc{display:grid;gap:10px}.formula{font:700 22px ui-monospace,SFMono-Regular,monospace;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.calc input{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;font-size:17px}.feedback{min-height:26px;margin-top:10px;font-weight:700}.phase-demo{display:grid;grid-template-columns:1fr 1fr;gap:18px}.phase-card{background:white;border:1px solid var(--line);border-radius:18px;padding:18px}.tank{height:230px;width:120px;margin:10px auto 18px;border:3px solid #8f9aa8;border-radius:28px 28px 18px 18px;position:relative;overflow:hidden;background:#eef2f5}.tank .liq{position:absolute;bottom:0;width:100%;height:66%;background:#72b4e8}.tank .tube{position:absolute;top:20px;left:55px;width:8px;height:174px;border-radius:5px;background:#535e6b}.tank .tube.short{height:48px}.phase-card button{width:100%;border:0;border-radius:999px;padding:11px;background:var(--navy2);color:white;font-weight:800}.pressure-lab{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}.gauge{width:220px;height:120px;margin:auto;border-radius:220px 220px 0 0;background:conic-gradient(from 270deg at 50% 100%,#4fb887 0 35%,#f2c94c 35% 65%,#d94747 65% 100%);position:relative;overflow:hidden}.gauge:after{content:"";position:absolute;left:25px;right:25px;bottom:-1px;height:76px;border-radius:180px 180px 0 0;background:#f8f6ef}.needle{position:absolute;left:108px;bottom:0;width:4px;height:92px;background:#10233c;transform-origin:50% 100%;transform:rotate(var(--angle,-60deg));z-index:2;transition:transform .45s ease}.pressure-controls input{width:100%}.danger-scene{position:relative;height:260px;display:grid;place-items:center}.danger-scene.shake{animation:shake .18s linear 5}.danger-scene.boom:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#ffd166 9% 23%,#ff6b35 24% 44%,rgba(217,71,71,.25) 45% 65%,transparent 66%);animation:boom .8s ease-out both}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes boom{from{transform:scale(.1);opacity:1}to{transform:scale(1.7);opacity:0}}.a2l-bottle .body{background:linear-gradient(90deg,#6f747c,#c8cbd0 46%,#5f656d)}.a2l-bottle:after{content:"";position:absolute;left:29px;top:45px;width:62px;height:43px;border-radius:22px 22px 2px 2px;background:#d94747;opacity:.95}.quiz-q{font-size:23px;font-weight:800;margin:0 0 18px}.quiz-options{display:grid;gap:10px}.quiz-options button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;text-align:left;color:var(--ink)}.quiz-options button.good{border-color:var(--green);background:#edf8f2}.quiz-options button.bad{border-color:var(--red);background:#fdeeee}.quiz-score{text-align:center;padding:35px}.quiz-score b{font:500 72px "Trebuchet MS",Calibri,sans-serif;color:var(--blue)}.final-message{color:var(--ink);padding:65px 0 80px;text-align:center}.final-message>p{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.2em}.final-message h2{font-size:clamp(42px,5vw,68px);margin:12px auto 32px;max-width:850px}.pillars{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.pillars span,.pillars strong{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px}.pillars strong{background:var(--navy2);color:#fff}.refs{color:var(--ink);background:#fff;border-radius:24px;padding:28px 32px;margin-bottom:30px;box-shadow:0 20px 50px rgba(0,0,0,.12)}.refs h2{font-family:"Trebuchet MS",Calibri,sans-serif}.refs li{margin:10px 0;line-height:1.5}footer{min-height:80px;color:#536271;border-top:1px solid rgba(27,58,99,.12);display:flex;align-items:center;justify-content:space-between}footer button{border:0;background:transparent;color:var(--blue);font-weight:800}@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-art{display:none}.module-shell{grid-template-columns:1fr}.stepper{grid-template-columns:repeat(4,1fr);overflow:auto}.stepper button span{display:none}.lesson-top{display:grid}.voice-controls{justify-content:flex-start}.concept-grid,.choice-grid,.parts-grid,.scale-lab,.phase-demo,.pressure-lab,.diagram{grid-template-columns:1fr}.interactive-zone{padding:18px}.lesson-card{padding:24px 20px}.topbar-actions .pill:first-child{display:none}}

/* V4 — pédagogie visuelle */
.visual-stage{display:grid;gap:18px}.visual-stage h3{margin:0;font-family:"Trebuchet MS",Calibri,sans-serif;font-size:28px}.visual-stage .big-message{font-size:clamp(24px,4vw,46px);font-family:"Trebuchet MS",Calibri,sans-serif;text-align:center;margin:2px 0 8px;color:var(--navy2)}.visual-stage .big-message strong{color:var(--orange)}
.bottle-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}.bottle-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;text-align:center;position:relative}.bottle-card.selected{outline:4px solid rgba(79,184,135,.2);border-color:var(--green)}.bottle-card.wrong{outline:4px solid rgba(217,71,71,.15);border-color:var(--red)}.bottle-card button{border:0;border-radius:999px;background:var(--navy2);color:white;padding:9px 14px;font-weight:800}.bottle-caption{margin-top:8px;font-weight:800}.bottle-sub{font-size:12px;color:var(--muted)}
.tech-svg{width:100%;height:auto;max-height:315px;display:block}.svg-label{font:700 14px 'Segoe UI',sans-serif;fill:#10233c}.svg-small{font:700 11px 'Segoe UI',sans-serif;fill:#637285}.svg-red{fill:#d94747}.svg-blue{fill:#3d7fca}.svg-green{fill:#4fb887}.svg-orange{fill:#ff6b35}.svg-metal{fill:#d9dfe5;stroke:#7c8795;stroke-width:3}.svg-pipe{fill:none;stroke:#5b6570;stroke-width:8;stroke-linecap:round}.svg-liquid{fill:#4b9ad6;opacity:.85}.svg-vapor{fill:#dceefa}.pulse-arrow{animation:pulseArrow 1.1s ease-in-out infinite alternate}@keyframes pulseArrow{to{transform:translateX(8px)}}
.valve-showcase{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}.valve-legend{display:grid;gap:10px}.legend-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;border:1px solid var(--line);padding:12px}.dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto}.dot.red{background:#d94747}.dot.blue{background:#3d7fca}.dot.gray{background:#8f98a4}.legend-item strong{display:block}.legend-item span{display:block;color:var(--muted);font-size:13px}
.compare-pressure{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pressure-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.pressure-card h3{margin:0 0 6px}.pressure-card.good{border-top:5px solid var(--green)}.pressure-card.bad{border-top:5px solid var(--red)}.pressure-card .caption{font-weight:800;text-align:center;margin-top:8px}.danger-word{font:700 36px "Trebuchet MS",Calibri,sans-serif;fill:#d94747}.boom-fragment{opacity:0}.explode .boom-fragment{opacity:1;animation:fly .75s ease-out forwards}.explode .bottle-main{opacity:.15}.explode .flash{animation:flash .7s ease-out forwards}@keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@keyframes flash{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.3)}}
.process-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.process-strip div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;font-weight:800}.process-strip b{display:block;font-size:23px;color:var(--orange)}
@media(max-width:850px){.bottle-row,.compare-pressure,.valve-showcase,.process-strip{grid-template-columns:1fr}}


/* V5 — schéma bouteille en coupe : vapeur / liquide */
.flow-stage .bottle-cutaway{max-height:390px}.flow-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.flow-actions .vapor-btn{background:#3d7fca}.flow-actions .liquid-btn{background:#d94747}.phase-title{font:800 19px 'Segoe UI',sans-serif;letter-spacing:.06em}.vapor-title{fill:#2c6ead}.liquid-title{fill:#155f98}.blue-label{fill:#2d6fae}.red-label{fill:#b93838}.flow-path{fill:none;stroke:#9aa6b3;stroke-width:10;stroke-linecap:round}.flow-dot{opacity:0}.flow-vapor-active .vapor-inside,.flow-vapor-active .vapor-out{stroke:#3d7fca;stroke-dasharray:15 13;animation:flowDash .65s linear infinite}.flow-liquid-active .liquid-inside,.flow-liquid-active .liquid-out{stroke:#d94747;stroke-dasharray:15 13;animation:flowDash .65s linear infinite}.flow-vapor-active .vapor-dot{opacity:1;animation:vaporTravel 1.4s ease-in-out infinite}.flow-liquid-active .liquid-dot{opacity:1;animation:liquidTravel 1.7s ease-in-out infinite}@keyframes flowDash{to{stroke-dashoffset:-28}}@keyframes vaporTravel{0%{transform:translate(0,0)}45%{transform:translate(0,-77px)}100%{transform:translate(-155px,-77px)}}@keyframes liquidTravel{0%{transform:translate(0,0)}60%{transform:translate(0,-281px)}100%{transform:translate(155px,-281px)}}@media(max-width:650px){.flow-stage .bottle-cutaway{max-height:330px}.flow-actions{display:grid}.flow-actions .nav{width:100%}}