/* Mise en page : la paillasse du labo comme scène d'ouverture (texte écrit sur le tableau, niveaux posés sur la paillasse), puis des bandes qui défilent sur le labo estompé en fond. */
:root{
  --ban-red:#FF6B74;
  --paper:#FEFEFE; --ice:#EEF2F8; --card:rgba(255,255,255,.9); --head:rgba(254,254,254,.9);
  --navy:#13234B; --ink:#1A2236; --muted:#56617C; --line:#D9E0EA;
  --phy:#1D5FD0; --phy-soft:#E6EEFC; --chi:#D21F2E; --chi-soft:#FCE9EA; --gold:#C9A23A;
  --band:#13234B; --band-fg:#F3F6FA; --band-muted:#AEB9D3;
  --bg-op:.16; --img-filter:none;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ban-red:#D21F2E;  --paper:#0B1330; --ice:#111C3E; --card:rgba(20,32,68,.9); --head:rgba(11,19,48,.9);
  --navy:#E8EDF7; --ink:#E4E9F4; --muted:#9DA9C5; --line:#26345C;
  --phy:#6FA2FF; --phy-soft:#16285A; --chi:#FF5C66; --chi-soft:#3A1830; --gold:#E0BC57;
  --band:#060C1E; --band-fg:#E6EBF5; --band-muted:#9AA6C2;
  --bg-op:.22; --img-filter:invert(.94) hue-rotate(180deg); color-scheme:dark}}
:root[data-theme="dark"]{
  --ban-red:#D21F2E;  --paper:#0B1330; --ice:#111C3E; --card:rgba(20,32,68,.9); --head:rgba(11,19,48,.9);
  --navy:#E8EDF7; --ink:#E4E9F4; --muted:#9DA9C5; --line:#26345C;
  --phy:#6FA2FF; --phy-soft:#16285A; --chi:#FF5C66; --chi-soft:#3A1830; --gold:#E0BC57;
  --band:#060C1E; --band-fg:#E6EBF5; --band-muted:#9AA6C2;
  --bg-op:.22; --img-filter:invert(.94) hue-rotate(180deg); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6}
/* le labo reste en fond, estompé, pendant tout le défilement */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("media/labo.webp") center bottom/cover no-repeat;opacity:var(--bg-op);filter:var(--img-filter)}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--phy);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);text-transform:uppercase;line-height:.95;margin:0;text-wrap:balance;letter-spacing:.01em;color:var(--navy)}
h2{font-size:clamp(2.4rem,6vw,3.6rem);font-weight:900}
h3{font-size:1.55rem;font-weight:800}
p{margin:0}
.eyebrow{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--chi)}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
section{padding-block:clamp(64px,9vw,104px)}
.sec-head{display:grid;gap:14px;margin-bottom:40px}

/* En-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--head);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:40px;height:40px;flex:none}
.logo b{font-family:var(--f-display);font-weight:900;font-size:1.7rem;letter-spacing:.02em;color:var(--navy)}
.logo b span{color:var(--chi)}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
nav a{display:block;padding:8px 12px;font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;text-decoration:none;color:var(--muted);border-radius:6px}
nav a:hover{color:var(--navy);background:var(--ice)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:6px;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn-main{background:var(--navy);color:var(--paper)}
.btn-main:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:var(--paper)}
nav .btn{padding:9px 16px;color:var(--paper)}
nav .btn:hover{background:var(--navy);color:var(--paper)}
.menu{display:none}
@media (max-width:900px){
  nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:8px 14px;border:2px solid var(--navy);border-radius:6px;color:var(--navy)}
  .menu summary::-webkit-details-marker{display:none}
  .menu ul{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--line);border-radius:8px;list-style:none;margin:0;padding:8px;min-width:220px;box-shadow:0 12px 30px rgba(10,20,50,.18)}
  .menu a{display:block;padding:10px 12px;text-decoration:none;font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
}

/* Scène d'ouverture : le labo vu depuis la place de l'élève */
.scene-out{background:var(--paper);border-bottom:6px solid var(--navy);padding:0}
.scene{position:relative;margin-inline:auto;width:min(100%, calc((100svh - 64px) * 1672 / 941));aspect-ratio:1672/941;container-type:inline-size;max-width:100%}
.scene>img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:var(--img-filter)}
.board{position:absolute;left:29.6%;top:16.8%;width:48.8%;height:28%;display:grid;align-content:center;justify-items:center;text-align:center;gap:1.1cqw;padding:1cqw 3cqw}
.fr{display:inline-flex;align-items:center;gap:.7cqw;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:1.05cqw;color:var(--navy)}
.fr svg{width:2cqw;height:1.35cqw;border-radius:2px;flex:none}
.board h1{font-size:4.1cqw;font-weight:900}
.board h1 em{font-style:normal;color:var(--chi)}
.board h1 i{font-style:normal;color:var(--phy)}
.board p.sous{font-size:1.2cqw;color:var(--muted);max-width:52ch;line-height:1.45}
/* points interactifs sur le matériel */
.spot{position:absolute;display:flex;align-items:center;gap:.6cqw;text-decoration:none;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1.05cqw;padding:.35cqw .9cqw .35cqw .5cqw;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 18px rgba(10,20,50,.12);transition:transform .2s}
.spot:hover{transform:translateY(-3px)}
.spot::before{content:"";width:.9cqw;height:.9cqw;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%{box-shadow:0 0 0 1.2cqw transparent}100%{box-shadow:0 0 0 0 transparent}}
.spot-chi{left:9%;top:56.5%;color:var(--chi)}
.spot-phy{left:73%;top:52.5%;color:var(--phy)}
/* les niveaux posés sur la paillasse */
.desk{position:absolute;left:2.5%;right:2.5%;top:78%;display:grid;grid-template-columns:auto repeat(4,1fr);gap:1.2cqw;align-items:center}
.desk .lab{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:1.3cqw;line-height:1.2;max-width:7ch;color:var(--muted);padding-right:.5cqw}
.lvl{display:grid;gap:.3cqw;text-decoration:none;text-align:left;padding:1.3cqw 1.7cqw;border-radius:.8cqw;background:var(--card);border:1px solid var(--line);border-left:.6cqw solid var(--navy);box-shadow:0 1cqw 2cqw rgba(10,20,50,.12);cursor:pointer;font:inherit;color:var(--navy);transition:transform .2s,border-color .2s}
.lvl:hover{transform:translateY(-.4cqw);border-left-color:var(--chi)}
.lvl b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:2.7cqw;line-height:.95}
.lvl small{font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.15cqw;color:var(--muted)}
.scene-mob{display:none}
@media (max-width:760px){
  .scene{width:100%}
  .board,.desk,.spot{display:none}
  .scene-mob{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-block:28px 36px}
  .scene-mob .fr{display:flex;line-height:1.3}
  .scene-mob h1{font-size:clamp(2.6rem,12vw,3.6rem);font-weight:900}
  .scene-mob h1 em{font-style:normal;color:var(--chi)}
  .scene-mob h1 i{font-style:normal;color:var(--phy)}
  .scene-mob .fr{font-size:.8rem;gap:8px}.scene-mob .fr svg{width:22px;height:15px}
  .mob-lv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mob-lv .lvl{padding:16px 16px;border-left-width:6px;border-radius:10px;gap:4px}
  .mob-lv .lvl b{font-size:clamp(1.25rem,6.2vw,1.7rem)}.mob-lv .lvl small{font-size:.85rem}
}

/* Choisir son niveau */
.panel-niv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,32px);box-shadow:0 20px 50px rgba(10,20,50,.08)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tab{font:inherit;cursor:pointer;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.15rem;padding:12px 22px;border-radius:99px;border:2px solid var(--line);background:transparent;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.tab span{opacity:.7;font-weight:500;margin-left:4px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.col{min-width:0;display:grid;gap:14px;align-content:start}
.col-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:4px solid currentColor}
.col-h h3{color:inherit;font-size:2rem}
.col-h small{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.85rem}
.c-phy{color:var(--phy)} .c-chi{color:var(--chi)}
.theme{display:grid;gap:12px;margin-top:8px}
.sous{display:grid;gap:6px}
.sous h5{margin:2px 0 0;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--muted)}
.theme h4{margin:6px 0 0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1.05;color:var(--navy);text-wrap:balance}
.sim{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:10px 14px;border-radius:8px;text-decoration:none;color:var(--ink);background:var(--ice);border:1px solid transparent;transition:border-color .15s,transform .15s}
.sim:hover{border-color:currentColor;transform:translateX(3px)}
.c-phy .sim:hover{border-color:var(--phy)} .c-chi .sim:hover{border-color:var(--chi)}
.sim b{font-weight:600;line-height:1.3;min-width:0}
.sim small{grid-column:1;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--muted)}
.acc{grid-row:1/3;grid-column:2;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:3px 8px;border-radius:4px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.acc.free{border-color:var(--gold);color:var(--gold)}
.vide{color:var(--muted);font-style:italic;padding:10px 0}
@media (max-width:760px){.cols{grid-template-columns:1fr}}

/* Le concept */
.manif{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,40px);align-items:center;padding:clamp(22px,4vw,40px);border-radius:14px;background:var(--card);border:1px solid var(--line);margin-bottom:48px}
.manif .eq{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,7vw,4.4rem);line-height:.9;color:var(--navy);text-transform:uppercase}
.manif .eq em{font-style:normal;color:var(--chi)}
.manif p{font-size:1.15rem;color:var(--ink);max-width:56ch}
.manif p+p{margin-top:10px;color:var(--muted)}
@media (max-width:760px){.manif{grid-template-columns:1fr}}
.pour{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:4px solid var(--navy)}
.pour article{padding:26px 24px 8px 0;display:grid;gap:12px;align-content:start;min-width:0}
.pour article+article{padding-left:24px;border-left:1px solid var(--line)}
.pour .qui{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--chi)}
.pour ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pour li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--ink)}
.pour li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:50%;border:2px solid var(--phy)}
@media (max-width:820px){.pour{grid-template-columns:1fr}.pour article+article{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.demo{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:clamp(24px,5vw,56px);align-items:center;margin-top:64px}
.demo video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;display:block;background:var(--navy);box-shadow:0 24px 50px rgba(10,20,50,.25)}
.demo .txt{display:grid;gap:16px;min-width:0}
.niv3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.niv3 div{padding:12px 14px;border-radius:8px;background:var(--card);border:1px solid var(--line);display:grid;gap:2px}
.niv3 b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.3rem;color:var(--navy)}
.niv3 span{font-size:.9rem;color:var(--muted);line-height:1.35}
@media (max-width:700px){.demo{grid-template-columns:1fr}.demo video{max-width:260px;margin-inline:auto}.niv3{grid-template-columns:1fr}}

/* Cartes (bande sombre) */
.band{background:var(--band);color:var(--band-fg)}
.band h2,.band h3{color:var(--band-fg)}
.band .lead{color:var(--band-muted)}
.band .eyebrow{color:var(--gold)}
.cartes{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.fan{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin-inline:auto}
.fan>div{position:absolute;width:46%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));transition:transform .35s}
.fan img,.carte-ex img{display:block;width:100%;height:auto;border-radius:6px}
.fan .c1{left:29%;top:2%;z-index:2}
.fan .c2{left:2%;top:16%;transform:rotate(-10deg)}
.fan .c3{right:2%;top:18%;transform:rotate(9deg);z-index:3}
.fan:hover .c2{transform:rotate(-14deg) translateX(-8px)}
.fan:hover .c3{transform:rotate(13deg) translateX(8px)}
.types{display:grid;gap:14px;margin-top:26px}
.types div{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--gold)}
.types b{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem}
.types span{color:var(--band-muted)}
.comp{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.comp li{font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;padding:5px 12px;border:1px solid rgba(255,255,255,.22);border-radius:99px;color:var(--band-fg)}
@media (max-width:820px){.cartes{grid-template-columns:1fr}}

/* Tarifs */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;display:grid;gap:14px;align-content:start;min-width:0}
.form.feat{border:2px solid var(--navy)}
.tag{justify-self:start;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;padding:4px 10px;border-radius:4px;background:var(--ice);color:var(--muted)}
.feat .tag{background:var(--navy);color:var(--paper)}
.form ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.form li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.form li::before{content:"";width:12px;height:12px;margin-top:7px;background:var(--chi);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.form .who{font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
@media (max-width:820px){.forms{grid-template-columns:1fr}}

/* À propos */
.apropos{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:clamp(22px,4vw,40px);border-radius:14px;background:var(--card);border:1px solid var(--line)}
.apropos .facts{display:grid;gap:18px}
.facts div{display:grid;gap:2px}
.facts span{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--muted)}
.facts b{font-size:1.1rem;color:var(--navy)}
@media (max-width:820px){.apropos{grid-template-columns:1fr}}

footer{background:var(--band);color:var(--band-muted);padding-block:36px;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer .flogo{display:flex;align-items:center;gap:10px}
footer .flogo img{width:36px;height:36px}
footer b{font-family:var(--f-display);font-weight:900;font-size:1.4rem;color:var(--band-fg);letter-spacing:.04em}
footer a{color:var(--band-fg)}

/* Le concept : compétences */
.gagne{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:clamp(24px,5vw,56px);align-items:center;margin-top:64px}
.carte-ex{margin:0;filter:drop-shadow(0 24px 36px rgba(10,20,50,.3));max-width:280px;width:100%;margin-inline:auto}
.gagne .txt{display:grid;gap:16px;min-width:0}
.comp6{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.comp6 li{padding:12px 14px;border-radius:8px;background:var(--card);border:1px solid var(--line);display:grid;gap:2px;min-width:0}
.comp6 b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.2rem;color:var(--navy)}
.comp6 span{font-size:.9rem;color:var(--muted);line-height:1.35}
@media (max-width:900px){.comp6{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.gagne{grid-template-columns:1fr}.carte-ex{max-width:240px}}

/* Tarifs : bandeau gratuit */
.gratuit{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px 28px;margin-bottom:24px;border-radius:12px;background:var(--navy);color:var(--paper)}
.gratuit p{font-size:1.15rem;line-height:1.5;max-width:62ch}
.gratuit b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:1.8rem;display:block;margin-bottom:6px;line-height:1;color:var(--ban-red)}
.gratuit .btn{background:var(--paper);color:var(--navy)}
@media (max-width:700px){.gratuit{grid-template-columns:1fr}}

/* Créer un compte */
.compte{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.cform{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:14px;min-width:0}
.cform label{display:grid;gap:6px;font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--muted)}
.cform input{font:inherit;font-size:1rem;padding:11px 12px;border:1px solid var(--line);border-radius:6px;background:var(--ice);color:var(--ink);width:100%}
.cform .btn{justify-self:start}
.cform .btn-main:hover{background:var(--navy)}
.ok{padding:14px;border-radius:6px;background:var(--ice);border:1px solid var(--line);font-size:.95rem}
.compte .why{display:grid;gap:12px;margin-top:22px;padding:0;list-style:none}
.compte .why li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--muted)}
.compte .why li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:50%;border:2px solid var(--chi)}
@media (max-width:820px){.compte{grid-template-columns:1fr}}

/* Tampon « Gratuit » */
.h-tampon{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.tampon{display:inline-block;font-family:var(--f-display);font-weight:900;font-size:.62em;letter-spacing:.08em;line-height:1;color:var(--chi);border:5px solid var(--chi);outline:2px solid var(--chi);outline-offset:4px;border-radius:8px;padding:.12em .35em .08em;transform:rotate(-9deg);opacity:.88;
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.7) 70%,#000 85%);mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.7) 70%,#000 85%)}