/* ═══════════════ RACELINK ACADEMY v3 — DARK ELEGANT DESIGN SYSTEM ═══════════════ */
:root{
  --bg:#030407; --bg2:#0A0C12; --bg3:#12151D;
  --surf:#14171F; --surf2:#1B1F29; --surf3:#242935;
  --raise:#2D3341; --line:#1F242E; --line2:#2E3542; --line3:#3D4552;
  --ink:#F7F8FA; --ink2:#DFE2E8; --sub:#9CA3AE; --faint:#5C6470; --dim:#3E4551;
  --red:#FF2230; --redSoft:#FF4855;
  --gold:#F4B740; --goldSoft:#FFCF6A;
  --grn:#34E08B; --blu:#5B8DEF; --vlt:#9B7DFF; --org:#FF8A3D;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#010203;color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;border:0;background:none;color:inherit;padding:0;cursor:pointer}
img{display:block}
h1,h2,h3,p{margin:0}
.disp{font-family:'Bebas Neue',sans-serif;letter-spacing:.008em;line-height:.9}
.mono{font-family:'DM Mono',monospace;font-feature-settings:"tnum"}
.eb{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.22em;font-size:9px;color:var(--faint);font-weight:500}
.sub{color:var(--sub)}.faint,.dim{color:var(--faint)}
.red{color:var(--red)}.gold{color:var(--gold)}.grn{color:var(--grn)}.blu{color:var(--blu)}.vlt{color:var(--vlt)}

/* ── Stage (desktop) ── */
#stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:56px;
  background:radial-gradient(1000px 600px at 50% -10%, rgba(255,34,48,.08), transparent 70%), #010203;padding:28px 16px}
.stage-side{max-width:300px;color:var(--sub);font-size:13.5px;line-height:1.65}
.stage-side .side-title{font-size:34px;color:var(--ink);margin-bottom:10px}
.stage-side ul{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.stage-side li i{width:20px;text-align:center;margin-right:6px}

/* ── Phone frame ── */
.phone{position:relative;width:400px;height:min(870px,94vh);background:var(--bg);
  border-radius:44px;border:1px solid var(--line2);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 8px #0b0d12, 0 0 0 9px #232833;
  background-image:radial-gradient(900px 380px at 50% -180px, rgba(255,34,48,.10), transparent 72%)}
@media (max-width:840px){
  #stage{padding:0}
  .stage-side{display:none}
  .phone{width:100%;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none}
}

/* ── Status bar / view / tab bar ── */
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 6px;font-size:11.5px;color:var(--ink);flex-shrink:0;font-family:'DM Mono',monospace}
.sb-icons{display:flex;gap:7px;font-size:10px;color:var(--sub)}
.view{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:24px;outline:none;position:relative}
.view::-webkit-scrollbar{display:none}
.tabbar{display:flex;flex-shrink:0;background:linear-gradient(180deg, rgba(10,12,18,.85), rgba(3,4,7,.98));
  backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:7px 6px calc(10px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--faint);transition:.18s var(--ease)}
.tab span{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tab .ic{font-size:16px;transition:.15s var(--ease)}
.tab.on{color:var(--red)}
.tab .tabdot{width:4px;height:4px;border-radius:50%;background:transparent;transition:.15s}
.tab.on .tabdot{background:var(--red);box-shadow:0 0 10px var(--red)}

/* ── Glass surfaces (signature) ── */
.glass{background:linear-gradient(180deg, rgba(28,32,42,.7), rgba(20,23,31,.55));
  border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 40px -24px rgba(0,0,0,.8);border-radius:18px}
.glass2{background:linear-gradient(180deg, rgba(36,41,53,.55), rgba(27,31,41,.4));
  border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(10px);border-radius:14px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -20px rgba(0,0,0,.9)}
.tintR{background:linear-gradient(180deg, rgba(255,34,48,.14), rgba(255,34,48,.06));border:1px solid rgba(255,34,48,.25)}
.tintGold{background:linear-gradient(180deg, rgba(244,183,64,.14), rgba(244,183,64,.05));border:1px solid rgba(244,183,64,.28)}
.tintGrn{background:linear-gradient(180deg, rgba(52,224,139,.14), rgba(52,224,139,.05));border:1px solid rgba(52,224,139,.26)}
.tintBlu{background:linear-gradient(180deg, rgba(91,141,239,.14), rgba(91,141,239,.05));border:1px solid rgba(91,141,239,.25)}
.tintVlt{background:linear-gradient(180deg, rgba(155,125,255,.14), rgba(155,125,255,.05));border:1px solid rgba(155,125,255,.25)}

/* corner ticks racing */
.tick{position:relative}
.tick::before,.tick::after{content:'';position:absolute;width:9px;height:9px;border-color:var(--red);border-style:solid;opacity:.9;pointer-events:none}
.tick::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.tick::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.tickG::before,.tickG::after{border-color:var(--gold)}

/* ── Chips / boutons ── */
.chip{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.chipM{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;font-weight:500}
.btnR{background:linear-gradient(180deg,#FF3341,#E8000D);color:#fff;font-weight:600;border-radius:13px;padding:13px 18px;font-size:13.5px;
  box-shadow:0 10px 30px -8px rgba(255,34,48,.55), 0 1px 0 rgba(255,255,255,.15) inset;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s var(--ease)}
.btnR:hover{filter:brightness(1.08)}
.btnR:active{transform:translateY(1px)}
.btnGold{background:linear-gradient(180deg,#FFCF6A,#E8A420);color:#0A0C12;font-weight:700;border-radius:13px;padding:13px 18px;font-size:13.5px;
  box-shadow:0 10px 30px -8px rgba(244,183,64,.5), 0 1px 0 rgba(255,255,255,.3) inset;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s var(--ease)}
.btnG{background:linear-gradient(180deg,rgba(45,51,65,.6),rgba(36,41,53,.5));border:1px solid var(--line2);color:var(--ink);
  font-weight:600;border-radius:13px;padding:13px 18px;font-size:13.5px;backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s var(--ease)}
.btnG:hover{border-color:var(--line3)}
.btnR:disabled,.btnG:disabled{opacity:.4;pointer-events:none}
.iconbtn{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  background:linear-gradient(180deg, rgba(28,32,42,.7), rgba(20,23,31,.55));border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(10px);transition:.15s}
.iconbtn:hover{border-color:var(--line3)}

/* pills filtres */
.pill{padding:7px 13px;border-radius:9px;font-size:11.5px;font-weight:600;cursor:pointer;transition:.14s;color:var(--sub);border:1px solid transparent;white-space:nowrap}
.pill.on{background:linear-gradient(180deg,rgba(45,51,65,.7),rgba(36,41,53,.5));color:var(--ink);border-color:var(--line2)}
.pills{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}

/* ── Meters glow ── */
.meter{height:6px;background:var(--raise);border-radius:4px;overflow:hidden;position:relative}
.meter>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FF2230,#FF5666);
  box-shadow:0 0 12px rgba(255,34,48,.35);transform-origin:left;animation:mfill .8s var(--ease) both}
.meter.mGold>i{background:linear-gradient(90deg,#F4B740,#FFD070);box-shadow:0 0 12px rgba(244,183,64,.35)}
.meter.mGrn>i{background:linear-gradient(90deg,#34E08B,#6DECAA);box-shadow:0 0 12px rgba(52,224,139,.35)}
.meter.mBlu>i{background:linear-gradient(90deg,#5B8DEF,#8BB0F5);box-shadow:0 0 12px rgba(91,141,239,.35)}
.meter.mVlt>i{background:linear-gradient(90deg,#9B7DFF,#B79EFF);box-shadow:0 0 12px rgba(155,125,255,.35)}
@keyframes mfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Covers / ambiance ── */
.cover{position:relative;overflow:hidden}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,4,7,.1) 0%,rgba(3,4,7,.35) 50%,rgba(3,4,7,.96) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.gridbg{background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:24px 24px}
.spot{position:absolute;pointer-events:none;filter:blur(4px);border-radius:50%}

/* ── Motion ── */
.fade{animation:fd .28s ease both}
@keyframes fd{from{opacity:0}to{opacity:1}}
.rev{animation:rv .55s var(--ease) both}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.glow{animation:gl 3.5s ease-in-out infinite}
@keyframes gl{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.row{transition:transform .12s var(--ease)}
.row:active{transform:scale(.985)}
.live{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pl 1.8s infinite;display:inline-block}
.live.liveG{background:var(--grn)}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,34,48,.6)}70%{box-shadow:0 0 0 8px rgba(255,34,48,0)}100%{box-shadow:0 0 0 0 rgba(255,34,48,0)}}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:sh 3.5s infinite}
@keyframes sh{to{left:100%}}

/* ── Ring progression ── */
.ring{position:relative;flex-shrink:0;display:inline-block}
.ring svg{transform:rotate(-90deg)}
.ring .ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring circle.p{animation:ringdraw 1s var(--ease) both}
@keyframes ringdraw{from{stroke-dashoffset:var(--c)}}

/* ── Streak heatmap (Duolingo/GitHub) ── */
.heat{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.heat i{display:block;width:100%;aspect-ratio:1;border-radius:3px;background:var(--surf2);border:1px solid var(--line)}
.heat i.l1{background:rgba(255,34,48,.15);border-color:rgba(255,34,48,.2)}
.heat i.l2{background:rgba(255,34,48,.35);border-color:rgba(255,34,48,.35)}
.heat i.l3{background:rgba(255,34,48,.6);border-color:rgba(255,34,48,.55);box-shadow:0 0 6px rgba(255,34,48,.3)}
.heat i.l4{background:linear-gradient(135deg,#FF2230,#F4B740);border-color:rgba(255,34,48,.7);box-shadow:0 0 8px rgba(255,34,48,.5)}
.heat i.today{outline:1.5px solid var(--ink);outline-offset:1.5px}

/* ── Leçons / programme ── */
.lesson{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;transition:.14s;cursor:pointer}
.lesson:hover{background:var(--surf2)}
.lesson.locked{opacity:.5;cursor:not-allowed}
.lstate{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.lstate.done{background:linear-gradient(180deg,#6DECAA,#2BBE73);color:#0A0C12;box-shadow:0 0 12px rgba(52,224,139,.35)}
.lstate.play{background:rgba(255,34,48,.14);color:var(--red);border:1px solid rgba(255,34,48,.35)}
.lstate.idle{background:var(--surf2);color:var(--faint);border:1px solid var(--line)}
.lstate.lock{background:var(--surf2);color:var(--faint)}

/* ── Player ── */
.player-visual{position:relative;height:250px;overflow:hidden;flex-shrink:0;background:#000}
.player-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.playbtn{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#FF3341,#E8000D);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 20px 50px -10px rgba(255,34,48,.7), 0 0 0 4px rgba(255,34,48,.15);transition:.18s var(--ease)}
.playbtn:hover{transform:scale(1.06)}
.timeline{height:4px;background:rgba(255,255,255,.18);border-radius:2px;overflow:visible;cursor:pointer;position:relative}
.timeline>i{display:block;height:100%;background:var(--red);border-radius:2px;box-shadow:0 0 8px rgba(255,34,48,.5);transition:width .2s linear}
.timeline .knob{position:absolute;top:-3px;width:10px;height:10px;border-radius:5px;background:#fff;box-shadow:0 0 0 3px rgba(255,34,48,.4);transform:translateX(-5px);transition:left .2s linear}

/* ── Quiz ── */
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 15px;border-radius:15px;
  background:var(--surf);border:1px solid var(--line);font-size:13.5px;font-weight:500;transition:.15s var(--ease)}
.qopt:hover{border-color:var(--line3)}
.qopt .qk{font-family:'Bebas Neue',sans-serif;font-size:15px;width:32px;height:32px;border-radius:10px;background:var(--surf2);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.qopt.good{border-color:var(--grn);background:rgba(52,224,139,.14);box-shadow:0 0 20px rgba(52,224,139,.15)}
.qopt.good .qk{background:var(--grn);color:#0A0C12}
.qopt.bad{border-color:rgba(255,34,48,.7);background:rgba(255,34,48,.14)}
.qopt.bad .qk{background:var(--red);color:#fff}
.qopt:disabled{cursor:default}
.qseg{flex:1;height:3px;border-radius:2px;background:var(--raise)}
.qseg.on{background:var(--red);box-shadow:0 0 6px rgba(255,34,48,.4)}

/* ── Podium leaderboard ── */
.podium{display:flex;align-items:flex-end;justify-content:space-around;gap:8px}
.podium .pstep{border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;position:relative;width:72px}

/* ── Onboarding ── */
.onboard{position:absolute;inset:0;background:var(--bg);z-index:80;display:flex;flex-direction:column;animation:fd .3s var(--ease)}
.ob-dots{display:flex;gap:7px;justify-content:center;align-items:center}
.ob-dot{width:6px;height:6px;border-radius:3px;background:var(--raise);transition:.3s var(--ease)}
.ob-dot.on{width:26px;background:var(--red);box-shadow:0 0 10px rgba(255,34,48,.5)}
.ob-goal{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 16px;border-radius:15px;
  background:var(--surf);border:1.5px solid var(--line);font-size:14px;font-weight:600;transition:.15s var(--ease)}
.ob-goal:hover{border-color:var(--line3)}
.ob-goal.sel{border-color:var(--red);background:rgba(255,34,48,.08)}
.ob-goal .gi{width:38px;height:38px;border-radius:12px;background:var(--surf2);display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0}
.ob-input{width:100%;background:var(--surf);border:1.5px solid var(--line);border-radius:15px;color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;padding:15px 16px;transition:.15s;outline:none}
.ob-input:focus{border-color:var(--red)}
.ob-input::placeholder{color:var(--faint);font-weight:400}
.rpm{display:flex;gap:2px;justify-content:center}
.rpm i{width:5px;height:12px;border-radius:1px;background:var(--raise);display:block}
.rpm i.on1{background:var(--grn);box-shadow:0 0 4px var(--grn)}
.rpm i.on2{background:var(--gold);box-shadow:0 0 4px var(--gold)}
.rpm i.on3{background:var(--red);box-shadow:0 0 6px var(--red)}

/* ── Guide interactif ── */
.tour-veil{position:absolute;inset:0;z-index:85;pointer-events:auto}
.tour-hole{position:absolute;border-radius:18px;box-shadow:0 0 0 4000px rgba(1,2,4,.85);transition:all .4s var(--ease);
  border:1.5px solid rgba(255,34,48,.65);animation:tpulse 2s infinite}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 4000px rgba(1,2,4,.85),0 0 0 0 rgba(255,34,48,.4)}50%{box-shadow:0 0 0 4000px rgba(1,2,4,.85),0 0 0 9px rgba(255,34,48,0)}}
.tour-card{position:absolute;left:18px;right:18px;background:var(--bg2);border:1px solid var(--line2);border-radius:20px;
  padding:18px;z-index:86;animation:rv .4s var(--ease);box-shadow:0 24px 60px -18px rgba(0,0,0,.9)}
.tour-step{width:30px;height:30px;border-radius:11px;background:rgba(255,34,48,.14);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:15px;flex-shrink:0}

/* ── Takeover (certification) ── */
.takeover{position:absolute;inset:0;background:var(--bg);z-index:70;display:flex;flex-direction:column;animation:fd .25s var(--ease);overflow-y:auto;scrollbar-width:none}
.takeover::-webkit-scrollbar{display:none}

/* ── Recherche ── */
.searchbar{display:flex;align-items:center;gap:10px;border-radius:14px;padding:11px 14px;
  background:linear-gradient(180deg, rgba(28,32,42,.7), rgba(20,23,31,.55));border:1px solid rgba(255,255,255,.06)}
.searchbar input{flex:1;background:none;border:0;color:var(--ink);font-family:inherit;font-size:13.5px;outline:none}
.searchbar input::placeholder{color:var(--faint)}

/* ── Toast / confetti / avatar / divers ── */
.toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--surf2);border:1px solid var(--line2);color:var(--ink);font-size:13px;font-weight:600;
  padding:11px 18px;border-radius:14px;z-index:60;transition:.3s var(--ease);display:flex;align-items:center;gap:8px;white-space:nowrap;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:absolute;top:-10px;width:8px;height:13px;border-radius:2px;z-index:75;pointer-events:none;animation:cfall linear both}
@keyframes cfall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
.av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Bebas Neue',sans-serif;color:#0A0C12}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.backbtn{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:linear-gradient(180deg, rgba(28,32,42,.75), rgba(20,23,31,.6));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);transition:.15s}
.hr{border:0;border-top:1px solid var(--line);margin:14px 0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}