/* Chabeb Learn · thème éditorial premium : bleu nuit, ivoire, accent orange. */
@font-face{font-family:Fraunces;font-weight:300 900;font-style:normal;font-display:swap;src:url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-weight:300 900;font-style:italic;font-display:swap;src:url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#0D1120; --bg2:#121830; --card:#151C34; --card2:#1C2442; --line:rgba(243,237,228,.12); --line2:rgba(243,237,228,.22);
  --ink:#F3EDE4; --muted:#A3ADC2; --faint:#6F7A95;
  --orange:#F08A4B; --orange-l:#F6B68C; --mint:#5CC2A6; --mint-l:#BFE6DA; --yellow:#F6C94C; --coral:#E86A5A;
  --code-bg:#090C18; --code-key:#F08A7E; --code-str:#BFE6DA; --code-num:#F6C94C; --code-com:#6F7A95;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(60% 50% at 85% 0%,rgba(240,138,75,.10),transparent 70%),radial-gradient(50% 40% at 0% 30%,rgba(92,194,166,.06),transparent 70%)}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;margin:0;font-variation-settings:"SOFT" 50,"WONK" 0}
h1 em,h2 em,h3 em{font-style:italic;color:var(--orange);font-weight:400}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;padding:15px 24px;font:600 16px/1 var(--sans);cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--orange);color:#1A0F08}
.btn.primary:hover{background:var(--orange-l)}
.btn.mint{background:var(--mint);color:#06231B}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

/* ---------- barre du haut ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{font:500 22px/1 var(--serif);letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand i{color:var(--orange);font-weight:400}
.nav{display:flex;align-items:center;gap:26px;font:500 14px/1 var(--sans)}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav .btn{padding:11px 18px;font-size:14px;color:var(--ink)}
@media (max-width:720px){.nav a:not(.btn){display:none}}
.who{font:500 13px/1 var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(36px,8vw,110px) clamp(40px,6vw,80px)}
.hero > *{min-width:0}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(46px,8.4vw,112px);margin-top:26px}
.hero .lede{margin-top:28px;font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* cube 3D : les trois rôles de la DSP2 */
.cube-stage{perspective:900px;display:grid;place-items:center;height:340px}
.cube{position:relative;width:180px;height:180px;transform-style:preserve-3d;animation:spin 22s linear infinite}
.cube > div{position:absolute;inset:0;display:grid;place-items:center;font:500 30px/1 var(--serif);font-style:italic;color:var(--ink);background:#151C34;border:1px solid var(--line2);backface-visibility:visible}
.cube small{display:block;font:500 11px/1.4 var(--mono);font-style:normal;color:var(--muted);text-align:center;margin-top:8px;letter-spacing:.04em}
.cube .f1{transform:translateZ(90px)}
.cube .f2{transform:rotateY(90deg) translateZ(90px)}
.cube .f3{transform:rotateY(180deg) translateZ(90px)}
.cube .f4{transform:rotateY(-90deg) translateZ(90px)}
.cube .f5{transform:rotateX(90deg) translateZ(90px);background:var(--orange);border-color:var(--orange)}
.cube .f6{transform:rotateX(-90deg) translateZ(90px)}
@media (max-width:900px){.cube-stage{height:230px}.cube{scale:.75}.hero .kicker{margin-top:0}}
@keyframes spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.cube-shadow{margin-inline:auto;width:200px;height:26px;margin-top:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}

/* bandeau de chiffres */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:26px 22px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font:400 clamp(34px,4vw,52px)/1 var(--serif)}
.stats b em{font-style:italic;color:var(--orange)}
.stats span{display:block;margin-top:10px;font:500 13px/1.3 var(--sans);color:var(--muted)}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0;padding-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.sec-head > *{min-width:0}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}
.sec h2{font-size:clamp(36px,5.4vw,68px);margin-top:18px}
.sec-head p{color:var(--muted);max-width:44ch;justify-self:end}
@media (max-width:820px){.sec-head p{justify-self:start}}

/* teaser + accès */
.access{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);align-items:start}
.access > *{min-width:0}
@media (max-width:960px){.access{grid-template-columns:1fr}}
.teaser{border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:#060912;aspect-ratio:16/9}
.teaser video{width:100%;height:100%}
.teaser-cap{margin-top:14px;font:500 13px/1 var(--mono);color:var(--faint)}

/* requête API (formulaire) : la signature Chabeb */
.req{background:var(--code-bg);border:1px solid var(--line2);border-radius:var(--r);padding:22px 24px 24px}
.req .dots{display:flex;gap:8px;margin-bottom:16px}
.req .dots i{width:11px;height:11px;border-radius:50%;background:var(--coral)}
.req .dots i:nth-child(2){background:var(--yellow)}.req .dots i:nth-child(3){background:var(--mint)}
.req pre{margin:0;font:500 14.5px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word}
.k{color:var(--code-key)}.s{color:var(--code-str)}.n{color:var(--code-num)}.c{color:var(--code-com)}
.verb{display:inline-block;background:var(--mint);color:#06231B;font:700 12px/1 var(--mono);padding:6px 9px;border-radius:6px;margin-right:8px;vertical-align:1px}
.field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 2px 2ch}
.field label{white-space:nowrap;font:500 14.5px/1 var(--mono)}
.field input{flex:1 1 180px;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(191,230,218,.3);color:var(--code-str);font:500 16px/1 var(--mono);padding:11px 12px;border-radius:10px}
.field input::placeholder{color:rgba(191,230,218,.4)}
.field input:focus{outline:none;border-color:var(--mint)}
.field .val{color:var(--code-str);font:500 14.5px/1.75 var(--mono);word-break:break-all}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font:400 14px/1.5 var(--sans);color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex:none}
.req .btn{width:100%;margin-top:18px}
.err{margin-top:12px;font:700 13px/1.4 var(--mono);color:#FFB4A8;min-height:1.4em}
.st{display:inline-block;background:var(--mint);color:#06231B;font:700 12px/1 var(--mono);padding:6px 9px;border-radius:6px}
.switch{margin-top:12px;background:none;border:0;color:var(--faint);font:500 13px/1 var(--mono);cursor:pointer;text-decoration:underline;padding:4px 0}
.hp{position:absolute;left:-9999px}
.req pre .ln{display:block}
.typing .ln{clip-path:inset(0 100% 0 0)}
.typing .ln.on{animation:type .55s steps(28,end) forwards}
@keyframes type{to{clip-path:inset(0 0 0 0)}}
.caret-on .field input{animation:caret 1s steps(1) 3}
@keyframes caret{50%{border-color:var(--mint);box-shadow:0 0 0 4px rgba(92,194,166,.22)}}
@media (prefers-reduced-motion:reduce){.typing .ln{clip-path:none}}

/* programme : liste éditoriale numérotée */
.eplist{border-top:1px solid var(--line)}
.eprow{display:grid;grid-template-columns:90px 1fr 220px;gap:clamp(16px,3vw,40px);align-items:center;padding-block:28px;border-bottom:1px solid var(--line);transition:opacity .6s,transform .6s}
.eprow > *{min-width:0}
.eprow .num{font:300 clamp(40px,5vw,64px)/1 var(--serif);color:var(--faint);transition:color .3s}
.eprow.bonus .num{font-style:italic}
.eprow:hover .num{color:var(--orange)}
.eprow .route{font:500 12px/1 var(--mono);color:var(--faint)}
.eprow h3{font-size:clamp(22px,2.4vw,30px);margin-top:10px}
.eprow p{color:var(--muted);font-size:15px;margin-top:8px;max-width:60ch}
.eprow .pic{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--bg2)}
.eprow .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.eprow:hover .pic img{transform:scale(1.04)}
.eprow .pic .dur{position:absolute;right:8px;bottom:8px;background:rgba(9,12,24,.82);padding:5px 8px;border-radius:6px}
.js .eprow.pre{opacity:0;transform:translateY(16px)}
@media (max-width:760px){.eprow{grid-template-columns:56px 1fr}.eprow .pic{grid-column:1/-1}}

/* auteur */
.me{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.me > *{min-width:0}
@media (max-width:760px){.me{grid-template-columns:1fr}}
.me img{width:100%;max-width:300px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);border:1px solid var(--line2);filter:saturate(.9)}
.me blockquote{margin:0;font:300 clamp(24px,2.8vw,36px)/1.25 var(--serif);font-style:italic;letter-spacing:-.01em}
.me blockquote em{color:var(--orange)}
.me h3{font:600 17px/1 var(--sans);letter-spacing:0;margin-top:28px}
.me .role{font:500 13px/1 var(--mono);color:var(--muted);margin-top:10px}
.me p.bio{margin-top:18px;color:var(--muted);max-width:62ch}
.me .btn{margin-top:24px;padding:12px 20px;font-size:15px}

/* appel final */
.cta{text-align:center;border-top:1px solid var(--line)}
.cta h2{font-size:clamp(40px,6.4vw,84px)}
.cta p{color:var(--muted);margin-top:18px}
.cta .btn{margin-top:30px}

footer{padding-block:28px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:var(--muted)}

/* ---------- espace formation ---------- */
.head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;padding-block:clamp(28px,5vw,64px) 12px}
.head h1{font-size:clamp(40px,6vw,76px);margin-top:18px}
.overall{min-width:min(100%,340px)}
.overall p{font:500 13px/1 var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.bar{height:6px;border-radius:99px;background:var(--card2);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .4s}
.resume{margin-top:16px;width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;padding-block:32px 80px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.thumb{position:relative;aspect-ratio:16/9;background:var(--bg2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.4)}
.thumb .prog i{display:block;height:100%;background:var(--orange)}
.body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.route{font:500 12px/1 var(--mono);color:var(--faint)}
.dur{font:500 12px/1 var(--mono);color:var(--muted)}
.card h3{font-size:24px}
.card p.d{color:var(--muted);font-size:15px;line-height:1.5}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font:600 12.5px/1 var(--sans)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.todo{background:var(--card2);color:var(--muted)}
.badge.doing{background:rgba(240,138,75,.14);color:var(--orange)}
.badge.done{background:rgba(92,194,166,.14);color:var(--mint)}
.badge.quiz{background:rgba(246,201,76,.12);color:var(--yellow)}

/* ---------- épisode ---------- */
.crumb{font:500 14px/1 var(--sans);color:var(--muted);text-decoration:none}
.crumb:hover{color:var(--ink)}
.ep-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding-block:clamp(20px,4vw,48px) 24px}
.ep-head h1{font-size:clamp(34px,5vw,64px);margin-top:16px}
.screen{border-radius:var(--r);overflow:hidden;background:#060912;aspect-ratio:16/9;border:1px solid var(--line2)}
.screen video{width:100%;height:100%}
.ep-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}
.ep-bar .btn{padding:11px 18px;font-size:14px}
.toggle.done{border-color:rgba(92,194,166,.4);color:var(--mint)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-block:32px 0}
.cols > *{min-width:0}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.panel h2{font-size:28px;display:flex;align-items:center;gap:10px}
.keys{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:16px;counter-reset:k}
.keys li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;counter-increment:k}
.keys li::before{content:counter(k,decimal-leading-zero);font:400 20px/1 var(--serif);font-style:italic;color:var(--orange)}
.keys li span{min-width:0}
textarea{width:100%;min-height:220px;margin-top:18px;resize:vertical;background:var(--code-bg);color:var(--ink);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;font:500 14.5px/1.6 var(--mono)}
textarea:focus{outline:none;border-color:var(--orange)}
.saved{margin-top:8px;font:500 12px/1 var(--mono);color:var(--faint);min-height:1em}

/* quiz */
.quiz{margin-top:20px}
.quiz-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.quiz-head p{font:500 13px/1 var(--mono);color:var(--muted)}
.qitem{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.qitem h3{font:500 clamp(20px,2vw,24px)/1.3 var(--serif);letter-spacing:-.01em}
.qitem h3 small{display:block;font:500 12px/1 var(--mono);color:var(--faint);margin-bottom:10px;letter-spacing:0}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:12px;padding:14px 16px;font:400 15.5px/1.45 var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt b{font:500 13px/1.6 var(--mono);color:var(--faint);flex:none}
.opt:disabled{cursor:default}
.opt.ok{border-color:var(--mint);background:rgba(92,194,166,.10)}
.opt.ok b{color:var(--mint)}
.opt.ko{border-color:var(--coral);background:rgba(232,106,90,.10)}
.opt.ko b{color:var(--coral)}
.why{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--bg2);color:var(--muted);font-size:15px}
.why strong{color:var(--ink);font-weight:600}
.qres{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border-radius:14px;background:var(--bg2)}
.qres p{font:400 22px/1.3 var(--serif)}
.qres p em{color:var(--orange)}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:40px 80px}
.pn a{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-width:0;transition:border-color .2s}
.pn a:hover{border-color:var(--orange)}
.pn a.next{text-align:right}
.pn small{font:500 12px/1 var(--mono);color:var(--muted)}
.pn b{font:500 19px/1.3 var(--serif)}
@media (max-width:620px){.pn{grid-template-columns:1fr}.pn a.next{text-align:left}}