:root{--bg:#f5f3ff;--card:#fff;--tx:#1d1740;--mut:#756f96;--bd:#e7e3fb;--pri:#7c5cff;--pri2:#5b3df5;--pink:#ff5c9a;--lime:#b6f23a;--ok:#22b86a;--ok2:#d9f7e7;--ko:#f0476a;--ko2:#ffe3e9;--sh:0 6px 20px rgba(80,50,200,.10)}
@media(prefers-color-scheme:dark){:root{--bg:#120f24;--card:#1d1938;--tx:#f3f0ff;--mut:#a39dc9;--bd:#2d2851;--ok2:#12382a;--ko2:#41192a;--sh:0 6px 20px rgba(0,0,0,.35)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#app{max-width:520px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 110px}
h1{font-size:28px;line-height:1.1;margin:0;letter-spacing:-.02em}h2{font-size:19px;margin:26px 0 10px}h3{margin:0 0 6px}
.sub{color:var(--mut);margin:4px 0}.small{font-size:13px;color:var(--mut)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chips{display:flex;gap:8px}.chip{background:var(--card);border:1px solid var(--bd);border-radius:99px;padding:7px 12px;font-weight:800;font-size:14px;box-shadow:var(--sh)}
/* cartes */
.card{background:var(--card);border:1px solid var(--bd);border-radius:24px;padding:16px;margin:12px 0;box-shadow:var(--sh)}
.hero{background:linear-gradient(135deg,#7c5cff 0%,#ff5c9a 100%);color:#fff;border:0;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:#ffffff22}
.hero h2{margin:0 0 4px;font-size:24px}.hero p{margin:0 0 14px;opacity:.92}
.dark{background:linear-gradient(135deg,#2b1f6b,#111033);color:#fff;border:0}
/* boutons */
.btn{display:block;width:100%;padding:15px 18px;border-radius:18px;background:var(--pri);color:#fff;font-weight:900;font-size:17px;text-align:center;box-shadow:0 4px 0 var(--pri2);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pri2)}
.btn.lime{background:var(--lime);color:#1d2a00;box-shadow:0 4px 0 #7fb81c}.btn.lime:active{box-shadow:0 1px 0 #7fb81c}
.btn.white{background:#fff;color:#4b2bd8;box-shadow:0 4px 0 #d8d0ff}
.btn.ghost{background:var(--card);color:var(--tx);border:2px solid var(--bd);box-shadow:0 4px 0 var(--bd)}
.btn.sm{padding:10px 14px;font-size:15px;display:inline-block;width:auto}
.btn:disabled{opacity:.4;pointer-events:none}
.link{color:var(--pri);font-weight:800;padding:6px 0;text-decoration:underline}
/* thèmes */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.th{background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:14px;text-align:left;box-shadow:var(--sh);display:flex;flex-direction:column;gap:6px;min-height:118px}
.th .ic{font-size:30px}.th b{font-size:15px;line-height:1.2}.th small{color:var(--mut)}
.pbar{height:8px;background:var(--bd);border-radius:9px;overflow:hidden}.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pink));border-radius:9px;transition:width .4s}
.item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:14px;margin:10px 0;box-shadow:var(--sh)}
.item .ic{font-size:28px;width:48px;height:48px;border-radius:16px;background:var(--bg);display:grid;place-items:center;flex:none}
.item b{display:block}.item small{color:var(--mut)}.item .go{margin-left:auto;color:var(--mut);font-size:22px}
.badge{font-size:12px;font-weight:800;padding:4px 9px;border-radius:99px;background:var(--bg);color:var(--mut);white-space:nowrap}.badge.g{background:var(--ok2);color:var(--ok)}
.warn{background:#fff6e0;border:1px solid #f1d58a;color:#5b4300;border-radius:18px;padding:12px 14px;font-size:14px;margin:12px 0}
@media(prefers-color-scheme:dark){.warn{background:#3a3115;border-color:#6d5a1f;color:#f5e3a8}}
/* prêt */
.chk{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:4px 0}.chk span:first-child{color:var(--mut)}
/* tab bar */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--bd);padding:8px 10px calc(8px + env(safe-area-inset-bottom));z-index:20}
#tabs button{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--mut);padding:6px 0;border-radius:14px}
#tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#tabs button.on{color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,transparent)}
body.inquiz #tabs{display:none}
/* quiz */
.qtop{display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--bg);padding:6px 0 10px;z-index:5}
.x{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--bd);font-size:18px;flex:none}
.seg{flex:1;height:12px;border-radius:9px;background:var(--bd);overflow:hidden}.seg i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pink));border-radius:9px;transition:width .35s}
.tmr{font-weight:900;min-width:34px;text-align:center;font-variant-numeric:tabular-nums}.tmr.low{color:var(--ko)}
.imgcard{background:var(--card);border:1px solid var(--bd);border-radius:24px;padding:12px;display:flex;justify-content:center;box-shadow:var(--sh);margin-bottom:6px}
.imgcard svg{width:170px;height:170px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}.imgcard svg.sc{width:min(300px,100%);height:auto;border-radius:16px;filter:none}.imgcard svg.wide{width:240px;height:120px;border-radius:12px;filter:none}
.cap{text-align:center;font-size:11px;color:var(--mut);margin-bottom:10px}
.qtx{font-size:21px;font-weight:900;line-height:1.25;margin:12px 0}
.ch{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:2px solid var(--bd);border-radius:18px;padding:13px;margin:10px 0;box-shadow:0 3px 0 var(--bd);font-weight:700;transition:.1s}
.ch .l{width:30px;height:30px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:14px;font-weight:900;flex:none}
.ch.sel{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 10%,var(--card));box-shadow:0 3px 0 var(--pri)}.ch.sel .l{background:var(--pri);color:#fff}
.ch.ok{border-color:var(--ok);background:var(--ok2);box-shadow:0 3px 0 var(--ok)}.ch.ok .l{background:var(--ok);color:#fff}
.ch.ko{border-color:var(--ko);background:var(--ko2);box-shadow:0 3px 0 var(--ko);animation:shake .3s}.ch.ko .l{background:var(--ko);color:#fff}
.ch.miss{border-style:dashed;border-color:var(--ok)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qbar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);z-index:30}
.qbar .in{max-width:520px;margin:0 auto}
.fb{border-radius:24px 24px 0 0;margin:-12px -16px 0;padding:16px 16px 6px}
.fb.ok{background:var(--ok2)}.fb.ko{background:var(--ko2)}
.fb .tt{font-size:20px;font-weight:900}.fb.ok .tt{color:var(--ok)}.fb.ko .tt{color:var(--ko)}
.fb .ex{max-height:34vh;overflow:auto;margin:6px 0 10px;font-size:15px;line-height:1.45}
.fbw{margin:-12px -16px 0;padding:0 16px 12px}
/* résultats */
.ring{width:150px;height:150px;border-radius:50%;margin:10px auto;display:grid;place-items:center;background:conic-gradient(var(--pri) var(--p),var(--bd) 0)}
.ring div{width:118px;height:118px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:34px;font-weight:900}
.center{text-align:center}
/* modal */
.modal{position:fixed;inset:0;background:#0007;display:flex;align-items:flex-end;justify-content:center;z-index:60}
.sheet{background:var(--card);width:100%;max-width:520px;border-radius:26px 26px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:up .25s}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.lk{display:block;width:100%;text-align:left;text-decoration:none;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:12px 14px;margin:8px 0}
.lk b{display:block}.lk small{color:var(--mut)}
select{width:100%;padding:12px;border-radius:14px;border:2px solid var(--bd);background:var(--bg);color:var(--tx);font:inherit;margin:4px 0 12px}
.set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.sw{width:50px;height:30px;border-radius:99px;background:var(--bd);position:relative;transition:.2s;flex:none}.sw:after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0004}.sw.on{background:var(--ok)}.sw.on:after{left:23px}
.foot{margin:28px 0 0;text-align:center;font-size:12px;color:var(--mut);line-height:1.6}.foot b{color:var(--tx)}
.course li{margin:8px 0;line-height:1.45}
.pop{animation:pop .35s}@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}

body.inquiz #app{padding-bottom:340px}

.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;font-weight:800;font-size:14px;line-height:1.2;text-align:left;border:2px solid var(--bd);background:var(--card);color:var(--tx);box-shadow:0 3px 0 var(--bd);transition:transform .08s,box-shadow .08s,filter .15s}
.pill:hover{filter:brightness(.97)}.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd)}
.pill span{font-size:16px}
.pill.listen{color:var(--pri2);border-color:color-mix(in srgb,var(--pri) 35%,var(--bd));box-shadow:0 3px 0 color-mix(in srgb,var(--pri) 35%,var(--bd))}
.pill.doubt{color:#7a4f00;background:#fff6e0;border-color:#f1d58a;box-shadow:0 3px 0 #f1d58a}
@media(prefers-color-scheme:dark){.pill.listen{color:#c9bcff}.pill.doubt{color:#f5e3a8;background:#3a3115;border-color:#6d5a1f;box-shadow:0 3px 0 #6d5a1f}}
.fb .pill{background:#fff;color:var(--tx)}.fb .pill.doubt{background:#fff6e0;color:#7a4f00}

.pills{justify-content:center}
.pill.back{padding:8px 14px 8px 10px;color:var(--tx)}.pill.back span{font-size:20px;line-height:1}
.legal{margin:18px 0 0;text-align:center;font-size:12px;line-height:1.5;color:var(--mut)}.legal .link{font-size:12px}
.steps{padding-left:20px;margin:8px 0}.steps li{margin:10px 0;line-height:1.45}
/* boutons centrés partout */
.btn,.pill,.x{justify-content:center;text-align:center}
.btn{display:flex;align-items:center}
.pill{margin-left:auto;margin-right:auto}.pills .pill{margin:0}
.link{text-align:center}
.legal .link,.warn .link{display:inline}
.cap,.legal,.foot{text-align:center}
.warn .pills,.card .pills{justify-content:center}

.copy{margin:2px 0 0;text-align:center;font-size:12px;font-weight:800;color:var(--mut)}
.item{flex-direction:column;text-align:center;gap:8px;justify-content:center}.item .go{display:none}.item .badge{margin:0 auto}
.th{align-items:center;text-align:center;justify-content:center}
.th .pbar{width:100%}
.hero .btn,.dark .btn{margin-left:auto;margin-right:auto}