:root{--mint:#e6f9ea;--mint-2:#c8f2d1;--mint-3:#5fe07a;--deep:#171717;--green:#09c82c;--green2:#09c82c;--ink:#171717;--muted:#737373;--card:#fff;--line:#e5e5e5;--bad:#cf4c55;--badbg:#fff1f2;--good:#06801e;--goodbg:#e6f9ea;--warn:#b97813;--shadow:0 14px 40px rgba(0,0,0,.10);--r:24px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Geist","Geist Fallback","Geist Fallback Android",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#f9f9f9}button{font:inherit}button:focus-visible{outline:3px solid rgba(0,0,0,.28);outline-offset:3px}.app{min-height:100dvh}.hidden{display:none!important}
.icon{width:22px;height:22px;display:block}.icon-sm{width:18px;height:18px}.topbar{position:sticky;top:0;z-index:40;background:rgba(9,200,44,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(9,200,44,.8)}.topbar-inner{max-width:920px;margin:auto;height:68px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:-.02em}.brand-mark{width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,var(--mint),#e6f9ea);display:grid;place-items:center;border:1px solid #e5e5e5}.brand small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.01em}.icon-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--deep);display:grid;place-items:center;cursor:pointer;transition:.2s}.icon-btn:active{transform:scale(.95)}
.home{overflow:hidden}.hero{position:relative;min-height:260px;background:linear-gradient(165deg,#e6f9ea 0%,#c8f2d1 58%,#c8f2d1 100%);border-bottom-left-radius:36px;border-bottom-right-radius:36px;overflow:hidden}.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.42)}.hero:before{width:220px;height:220px;right:-70px;top:-65px}.hero:after{width:130px;height:130px;left:-42px;bottom:-55px}.hero-inner{max-width:920px;margin:auto;padding:36px 20px 64px;position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px}.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.85);font-size:12px;font-weight:800;color:#06801e}.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.02;margin:13px 0 12px;letter-spacing:-.045em;color:#171717}.hero p{margin:0;max-width:580px;color:#737373;line-height:1.55;font-size:15px}.hero-art{height:170px;display:grid;place-items:center}.hero-art svg{width:min(100%,270px);height:auto;filter:drop-shadow(0 20px 28px rgba(0,0,0,.12))}
.content{max-width:920px;margin:-28px auto 0;padding:0 18px 56px;position:relative;z-index:5}.journey-card{background:#fff;border:1px solid rgba(9,200,44,.9);border-radius:28px;box-shadow:var(--shadow);padding:22px}.journey-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px}.journey-head h2{font-size:20px;margin:0 0 6px;letter-spacing:-.025em}.journey-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.progress-badge{flex:none;padding:8px 10px;border-radius:12px;background:#e6f9ea;color:var(--green2);font-size:12px;font-weight:850}.path{position:relative;padding:8px 0 4px}.path-line{position:absolute;left:31px;top:35px;bottom:35px;width:4px;border-radius:9px;background:linear-gradient(var(--mint-3),#eaeaea);z-index:0}.level{position:relative;z-index:1;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 8px;border-radius:20px;cursor:pointer;transition:.22s}.level+ .level{margin-top:9px}.level:hover{background:#fafafa}.node{width:56px;height:56px;border-radius:19px;display:grid;place-items:center;background:#fff;border:2px solid #e5e5e5;color:#737373;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.07);position:relative}.level.current .node{background:linear-gradient(145deg,var(--mint-2),#e6f9ea);border-color:#09c82c;color:#06801e;animation:pulseNode 2.3s infinite}.level.done .node{background:#09c82c;color:white;border-color:#09c82c}.level.locked{cursor:not-allowed;opacity:.62}.td-level .node{font-size:13px;letter-spacing:-.02em}.td-level.current .node{background:linear-gradient(145deg,#e6f9ea,#f9f9f9)}.level-info strong{display:block;font-size:15px;margin-bottom:4px}.level-info span{font-size:12.5px;color:var(--muted);line-height:1.35}.level-score{font-size:12px;font-weight:850;color:#06801e;background:#e6f9ea;border-radius:11px;padding:7px 9px}.lock{width:18px;height:18px;color:#737373}@keyframes pulseNode{0%,100%{box-shadow:0 0 0 0 rgba(9,200,44,.18),0 6px 18px rgba(0,0,0,.08);transform:translateY(0)}50%{box-shadow:0 0 0 10px rgba(9,200,44,0),0 8px 20px rgba(0,0,0,.12);transform:translateY(-2px)}}
.source-note{margin-top:14px;padding:14px 15px;border-radius:18px;background:#f9f9f9;border:1px solid #e7e7e7;display:flex;gap:11px;color:#737373;font-size:12.5px;line-height:1.5}.source-note svg{flex:none;color:#06801e;margin-top:1px}
.play{min-height:100dvh;background:#fafafa}.game-head{position:sticky;top:0;z-index:50;background:rgba(9,200,44,.92);backdrop-filter:blur(13px);border-bottom:1px solid #e8e8e8}.game-head-inner{max-width:900px;margin:auto;padding:10px 15px 12px}.game-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.back-btn{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#06801e;font-weight:800;padding:9px 4px;cursor:pointer}.stats{display:flex;justify-content:flex-end;align-items:center;gap:10px}.timer,.streak{height:38px;padding:0 11px;border:1px solid #e5e5e5;background:#fff;border-radius:13px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:850}.timer.low{color:#b56c0b;border-color:#f0d3a6;background:#fff9ee}.timer.critical{color:#bd3540;border-color:#efb8bd;background:#fff4f5;animation:timerPulse 1s infinite}@keyframes timerPulse{50%{transform:scale(1.035)}}.hearts{display:flex;gap:4px}.heart{width:24px;height:24px;color:#e55c67;transition:.4s}.heart.lost{color:#e5e5e5;transform:scale(.84);opacity:.55}.heart.breaking{animation:heartBreak .42s}@keyframes heartBreak{30%{transform:scale(1.28) rotate(-5deg)}60%{transform:scale(.8) rotate(5deg)}}.progress-row{margin-top:10px;display:flex;align-items:center;gap:10px}.progress-track{flex:1;height:8px;border-radius:99px;background:#e8e8e8;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#09c82c,#09c82c);border-radius:inherit;transition:width .35s cubic-bezier(.22,.8,.28,1)}.progress-label{min-width:74px;text-align:right;font-size:11.5px;color:#737373;font-weight:800}
.game-main{max-width:820px;margin:auto;padding:24px 16px 120px}.q-card{background:#fff;border:1px solid #e5e5e5;border-radius:28px;box-shadow:0 16px 42px rgba(0,0,0,.08);padding:clamp(18px,4vw,30px);transform:translateX(0);opacity:1}.q-card.exit{animation:slideOut .28s cubic-bezier(.4,0,.8,.2) both}.q-card.enter{animation:slideIn .36s cubic-bezier(.18,.82,.22,1) both}@keyframes slideOut{to{transform:translateX(-36px);opacity:0}}@keyframes slideIn{from{transform:translateX(38px);opacity:0}to{transform:none;opacity:1}}.q-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.q-chapter{font-size:12px;font-weight:850;color:#06801e;background:#e6f9ea;border-radius:999px;padding:7px 10px}.q-number{font-size:12px;color:#737373;font-weight:800}.question{font-size:clamp(18px,4vw,24px);line-height:1.45;letter-spacing:-.015em;margin:0 0 18px;color:#171717}.options{display:grid;gap:10px}.option{width:100%;text-align:left;border:1.5px solid #e5e5e5;background:#fff;border-radius:18px;padding:14px 15px;display:grid;grid-template-columns:36px 1fr 22px;gap:11px;align-items:center;min-height:58px;color:#171717;cursor:pointer;transition:.16s}.option:hover{border-color:#5fe07a;background:#fefefe}.option:active{transform:scale(.99)}.letter{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#f3f3f3;color:#737373;font-weight:900}.choice-mark{width:20px;height:20px;border-radius:7px;border:1.5px solid #e5e5e5;display:grid;place-items:center;color:transparent}.option.selected{border-color:#09c82c;background:#e6f9ea}.option.selected .letter{background:#e6f9ea;color:#06801e}.option.selected .choice-mark{background:#09c82c;border-color:#09c82c;color:white}.option.correct{border-color:#09c82c;background:var(--goodbg)}.option.correct .choice-mark{background:var(--good);border-color:var(--good);color:#fff}.option.wrong{border-color:#df7279;background:var(--badbg);animation:shake .35s}.option.wrong .choice-mark{background:var(--bad);border-color:var(--bad);color:#fff}@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}.action-row{display:grid;grid-template-columns:52px 68px 1fr;gap:10px;margin-top:18px}.speak-btn,.eliminate-btn{border-radius:17px;border:1px solid #e5e5e5;background:#fbfbfb;color:#06801e;display:grid;place-items:center;cursor:pointer;transition:.18s}.speak-btn{width:52px}.eliminate-btn{width:68px;grid-template-columns:1fr auto;gap:3px;padding:0 9px;position:relative}.eliminate-btn:active,.speak-btn:active{transform:scale(.96)}.eliminate-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.eliminate-count{min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#09c82c;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:950;line-height:1}.option.eliminating{pointer-events:none;animation:eliminateOption .28s ease forwards}.option.eliminated{display:none!important}@keyframes eliminateOption{to{opacity:0;transform:translateX(18px) scale(.97);max-height:0;min-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}}.primary{height:54px;border:0;border-radius:17px;background:linear-gradient(180deg,#09c82c,#09c82c);color:white;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 9px 22px rgba(9,200,44,.23);transition:.18s}.primary:disabled{background:#e5e5e5;color:#737373;box-shadow:none;cursor:not-allowed}.primary:not(:disabled):active{transform:translateY(1px) scale(.995)}
.feedback{margin-top:16px;border-radius:20px;padding:15px 16px;display:none;border:1px solid}.feedback.show{display:block;animation:fadeUp .25s both}.feedback.good{background:#e6f9ea;border-color:#e5e5e5}.feedback.bad{background:#fff4f4;border-color:#efc4c7}.feedback-title{font-weight:950;display:flex;gap:8px;align-items:center;margin-bottom:7px}.feedback.good .feedback-title{color:#06801e}.feedback.bad .feedback-title{color:#b94049}.feedback p{margin:0;color:#737373;font-size:13.5px;line-height:1.55}.source-mini{margin-top:9px!important;font-size:11.5px!important;color:#737373!important}.particles{position:fixed;pointer-events:none;inset:0;overflow:hidden;z-index:100}.particle{position:absolute;width:7px;height:7px;border-radius:2px;background:#09c82c;animation:burst .65s ease-out forwards}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(150deg);opacity:0}}
.result{min-height:100dvh;background:linear-gradient(#e6f9ea,#fbfbfb);padding:38px 16px 60px;display:grid;place-items:center}.result-card{width:min(100%,620px);background:#fff;border:1px solid #e5e5e5;border-radius:30px;box-shadow:var(--shadow);padding:28px;text-align:center}.medal{width:92px;height:92px;margin:0 auto 15px;border-radius:29px;background:linear-gradient(145deg,#e6f9ea,#e6f9ea);display:grid;place-items:center;color:#06801e}.result h2{margin:0;font-size:28px;letter-spacing:-.035em}.result-sub{color:var(--muted);margin:7px 0 22px}.score-big{font-size:58px;line-height:1;font-weight:950;letter-spacing:-.06em;color:#06801e}.stars{display:flex;justify-content:center;gap:6px;margin:12px 0 20px;color:#e2b63f}.star.off{color:#e5e5e5}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.result-stat{padding:13px 8px;border:1px solid #e6e6e6;background:#fbfbfb;border-radius:17px}.result-stat strong{display:block;font-size:20px}.result-stat span{font-size:11.5px;color:#737373}.unlock-msg{display:none;margin:12px 0;padding:13px;border-radius:16px;background:#e6f9ea;color:#06801e;font-weight:850}.unlock-msg.show{display:block;animation:unlockGlow .9s ease}@keyframes unlockGlow{0%{box-shadow:0 0 0 0 rgba(9,200,44,.5);transform:scale(.96)}60%{box-shadow:0 0 0 13px rgba(9,200,44,0);transform:scale(1.02)}100%{transform:scale(1)}}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.secondary{height:52px;border-radius:17px;border:1px solid #e5e5e5;background:#fff;color:#06801e;font-weight:850;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.42);display:grid;place-items:end center;z-index:200;padding:14px}.modal-card{width:min(100%,480px);background:#fff;border-radius:25px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.18);animation:modalIn .24s}@keyframes modalIn{from{transform:translateY(20px);opacity:0}}.modal-card h3{margin:0 0 7px}.modal-card p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.5}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.settings-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid #f0f0f0}.switch{width:48px;height:28px;border:0;border-radius:99px;background:#e5e5e5;padding:3px;cursor:pointer}.switch span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.12);transition:.2s}.switch.on{background:#06801e}.switch.on span{transform:translateX(20px)}
@media(max-width:680px){.hero-inner{grid-template-columns:1fr;padding-top:28px}.hero-art{display:none}.content{margin-top:-35px}.journey-card{padding:18px 14px}.level{grid-template-columns:58px 1fr auto;gap:10px}.node{width:50px;height:50px;border-radius:17px}.path-line{left:28px}.topbar-inner{height:62px}.brand small{display:none}.game-main{padding-top:16px}.q-card{border-radius:23px}.game-row{grid-template-columns:auto 1fr}.stats{grid-column:1/-1;justify-content:space-between}.game-row>.spacer{display:none}.result-card{padding:22px 18px}.result-actions{grid-template-columns:1fr}.modal{place-items:end center}.modal-card{border-bottom-left-radius:18px;border-bottom-right-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Compact mobile game + polished learning path */
.level{border:1px solid transparent}.level.current{background:linear-gradient(135deg,#e6f9ea,#fefefe);border-color:#e5e5e5;box-shadow:0 8px 24px rgba(0,0,0,.07)}.level.done{background:linear-gradient(135deg,#fefefe,#f9f9f9)}.level:nth-child(even):not(.locked){margin-left:22px}.level-score{display:flex;align-items:center;justify-content:center;min-width:58px}.level.current .level-score{background:#e6f9ea;color:#06801e}.level.done .level-score{background:#e6f9ea}.path-line{background:linear-gradient(#09c82c 0 50%,#e6e6e6 50% 100%)}
.stage-bridge{margin:16px 0 2px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#e6f9ea,#e6f9ea);border:1px solid #e5e5e5;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;text-align:left;animation:bridgeIn .48s cubic-bezier(.18,.84,.26,1) both}.stage-bridge .bridge-node{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;color:#06801e;font-weight:950;box-shadow:0 7px 18px rgba(0,0,0,.12)}.stage-bridge strong{display:block;color:#06801e;font-size:14px;margin-bottom:2px}.stage-bridge span{font-size:12px;color:#737373}.next-stage span{display:inline-block;margin-left:7px;transition:transform .2s}.next-stage:hover span{transform:translateX(3px)}@keyframes bridgeIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){
  .game-head-inner{padding:6px 10px 7px}.game-row{display:flex;gap:7px}.back-btn{font-size:12px;padding:5px 2px}.stats{margin-left:auto;gap:5px}.timer,.streak{height:31px;padding:0 7px;border-radius:10px;font-size:11.5px}.hearts{gap:2px}.heart{width:19px;height:19px}.progress-row{margin-top:6px;gap:7px}.progress-track{height:6px}.progress-label{min-width:62px;font-size:10px}
  .game-main{padding:10px 10px 82px;max-width:560px}.q-card{border-radius:20px;padding:13px 12px 14px;box-shadow:0 9px 26px rgba(0,0,0,.065)}.q-meta{margin-bottom:9px;gap:7px}.q-chapter{font-size:10.5px;padding:5px 8px;max-width:66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-number{font-size:10.5px}.question{font-size:16px;line-height:1.34;margin-bottom:11px}.options{gap:7px}.option{border-radius:14px;padding:9px 10px;grid-template-columns:30px 1fr 18px;gap:8px;min-height:46px;font-size:12.5px;line-height:1.3}.letter{width:28px;height:28px;border-radius:9px;font-size:12px}.choice-mark{width:18px;height:18px;border-radius:6px}.action-row{position:sticky;bottom:calc(6px + env(safe-area-inset-bottom));z-index:12;margin-top:11px;grid-template-columns:45px 60px 1fr;gap:7px;padding:6px;background:rgba(9,200,44,.94);backdrop-filter:blur(10px);border:1px solid #e6e6e6;border-radius:16px}.speak-btn{width:45px;border-radius:12px}.eliminate-btn{width:60px;border-radius:12px;padding:0 7px}.eliminate-count{min-width:19px;height:19px;font-size:10px}.primary{height:46px;border-radius:12px;font-size:13.5px}.feedback{margin-top:9px;padding:11px 12px;border-radius:15px}.feedback-title{margin-bottom:4px;font-size:13px}.feedback p{font-size:12px;line-height:1.45;margin:0}.level:nth-child(even):not(.locked){margin-left:10px}
}
@media(max-width:380px){.timer,.streak{padding:0 5px}.game-head .icon-sm{width:15px;height:15px}.back-btn{gap:3px}.option{font-size:12px;padding:8px}.question{font-size:15.5px}.q-card{padding:11px 10px 12px}}


/* Home compact premium mobile journey */
.home{background:linear-gradient(180deg,#fbfbfb 0,#f8f8f8 100%);min-height:100dvh;overflow-x:hidden}
.home .topbar{background:rgba(9,200,44,.94);border-bottom:1px solid rgba(9,200,44,.72)}
.home .topbar-inner{height:60px;max-width:760px;padding:0 16px}
.home .brand-mark{width:36px;height:36px;border-radius:12px;box-shadow:0 7px 18px rgba(0,0,0,.10)}
.home .brand{font-size:14px}.home .brand small{font-size:10px}
.home .icon-btn{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.88)}
.home .hero{min-height:112px;border-radius:0;background:linear-gradient(145deg,#e6f9ea 0%,#e6f9ea 52%,#c8f2d1 100%);overflow:hidden}
.home .hero:before{width:180px;height:180px;right:-64px;top:-78px;background:rgba(255,255,255,.46)}
.home .hero:after{width:110px;height:110px;left:-34px;bottom:-66px;background:rgba(255,255,255,.42)}
.home .hero-inner{max-width:760px;display:flex;justify-content:center;align-items:center;text-align:center;padding:29px 18px 31px}
.home .hero-art,.home .eyebrow,.home .hero p{display:none!important}
.home .hero h1{margin:0 auto;font-size:clamp(26px,7vw,36px);line-height:1.08;letter-spacing:-.035em;color:#171717;font-weight:900;text-align:center}
.home .hero h1:before{content:none!important;display:none!important}
.home .content{max-width:760px;margin:-14px auto 0;padding:0 14px calc(28px + env(safe-area-inset-bottom));z-index:5}
.home .journey-card{background:rgba(255,255,255,.88);border:1px solid rgba(9,200,44,.88);border-radius:24px;box-shadow:0 15px 44px rgba(0,0,0,.09);padding:16px 12px 14px;backdrop-filter:blur(12px)}
.home .journey-head{align-items:center;margin:0 3px 12px;padding:0 2px}
.home .journey-head h2{font-size:15px;margin:0;font-weight:900;color:#171717;letter-spacing:-.015em}
.home .journey-head p{display:none}
.home .progress-badge{font-size:10.5px;font-weight:850;padding:6px 9px;border-radius:999px;background:#f2f2f2;color:#06801e;border:1px solid #e6e6e6}
.home .path{padding:0;position:relative}
.home .path-line{left:28px;top:38px;bottom:38px;width:3px;background:linear-gradient(180deg,#09c82c 0%,#e5e5e5 48%,#ebebeb 100%);box-shadow:none}
.home .level{min-height:70px;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:9px 9px 9px 4px;border:1px solid transparent;border-radius:19px;background:transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.home .level+.level{margin-top:7px}
.home .level:hover{background:#fafafa}
.home .level:active:not(.locked){transform:scale(.992)}
.home .level.current{background:linear-gradient(135deg,#e6f9ea,#e6f9ea);border-color:#e5e5e5;box-shadow:0 10px 24px rgba(0,0,0,.10)}
.home .level.done{background:#fefefe;border-color:#eaeaea}
.home .level.locked{opacity:1;cursor:not-allowed}
.home .node{width:48px;height:48px;border-radius:50%;border:1.5px solid #e5e5e5;background:#fff;color:#737373;font-size:16px;box-shadow:0 5px 14px rgba(0,0,0,.07)}
.home .level.current .node{background:linear-gradient(145deg,#c8f2d1,#fafafa);border-color:#09c82c;color:#06801e;box-shadow:0 0 0 6px rgba(9,200,44,.09),0 8px 18px rgba(0,0,0,.12);animation:pulseNode 2.5s infinite}
.home .level.done .node{background:#06801e;color:#fff;border-color:#06801e;box-shadow:0 7px 16px rgba(0,0,0,.20)}
.home .level.locked .node{background:#fcfcfc;color:#737373;border-color:#e9e9e9;box-shadow:none}
.home .level-info{min-width:0}
.home .step-label{display:block;margin-bottom:2px;font-size:10.5px;font-weight:850;color:#737373;letter-spacing:.015em}
.home .level.current .step-label{color:#06801e}
.home .level-info strong{display:block;margin:0;font-size:14px;line-height:1.22;font-weight:850;color:#171717;letter-spacing:-.01em;white-space:normal}.home .qcm-count{margin-top:4px;font-size:11px;line-height:1.2;font-weight:750;color:#737373}
.home .level.locked .level-info strong{color:#737373}
.home .level-info span:not(.step-label){display:none!important}
.home .level-score{min-width:42px;min-height:38px;display:grid;place-items:center;padding:0 10px;border-radius:13px;background:#f5f5f5;color:#737373;font-size:11px;font-weight:900;border:1px solid #e8e8e8;box-shadow:none}
.home .level.current .level-score{min-width:92px;background:linear-gradient(180deg,#06801e,#06801e);border-color:#06801e;color:white;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.home .level.current .level-score:before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;margin-right:7px}
.home .level.current .level-score{grid-auto-flow:column;gap:0}
.home .level.done .level-score{background:#f3f3f3;color:#06801e;border-color:#e5e5e5}
.home .level.locked .level-score{width:42px;min-width:42px;padding:0;background:#fcfcfc;color:#737373;border-color:#eaeaea}
.home .level-score .lock{width:19px;height:19px}
.home .source-note{display:none!important}
@media(max-width:680px){
  .home .hero-inner{padding:23px 17px 29px}
  .home .content{margin-top:-17px;padding-left:12px;padding-right:12px}
  .home .journey-card{padding:14px 9px 12px;border-radius:22px}
  .home .level{min-height:66px;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;padding:8px 7px 8px 3px;border-radius:17px}
  .home .node{width:46px;height:46px;font-size:15px}
  .home .path-line{left:26px;top:35px;bottom:35px}
  .home .level-info strong{font-size:13.4px}
  .home .level.current .level-score{min-width:86px;font-size:10.8px}
}
@media(max-width:390px){
  .home .hero{min-height:106px}
  .home .hero h1{font-size:25px}
  .home .journey-card{padding-left:8px;padding-right:8px}
  .home .level{min-height:63px;grid-template-columns:46px minmax(0,1fr) auto;gap:9px}
  .home .node{width:42px;height:42px}
  .home .path-line{left:24px}
  .home .level-info strong{font-size:12.8px}
  .home .level.current .level-score{min-width:80px;height:36px;padding:0 8px}
}

/* Bright green theme + premium stage transitions */
.primary{background:linear-gradient(180deg,#09c82c 0%,#09c82c 58%,#09c82c 100%);box-shadow:0 10px 25px rgba(9,200,44,.24)}
.primary:not(:disabled):hover{filter:saturate(1.04) brightness(1.015)}
.progress-fill{background:linear-gradient(90deg,#5fe07a,#09c82c)}
.level.current .level-score{background:#09c82c!important;color:#fff!important;box-shadow:0 8px 22px rgba(9,200,44,.22)}
.level.done .node{background:#09c82c;border-color:#09c82c}
.path-line{background:linear-gradient(#09c82c,#e5e5e5)}
.q-chapter{color:#06801e;background:#e6f9ea}
.option.selected{border-color:#09c82c;background:#e6f9ea}
.option.selected .letter{background:#e6f9ea;color:#06801e}
.option.selected .choice-mark{background:#09c82c;border-color:#09c82c}
.speak-btn{color:#06801e;border-color:#e5e5e5;background:#fafafa}
.stage-transition{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(9,200,44,.88);backdrop-filter:blur(15px);opacity:0;transition:opacity .26s ease;overflow:hidden}
.stage-transition.show{opacity:1}.stage-transition.leaving{opacity:0}
.stage-transition-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(9,200,44,.24) 0%,rgba(9,200,44,.08) 46%,rgba(9,200,44,0) 72%);animation:stageGlow 1.15s ease-in-out infinite alternate}
.stage-transition-card{position:relative;z-index:2;width:min(88vw,390px);text-align:center;padding:29px 24px 25px;border:1px solid rgba(9,200,44,.22);border-radius:30px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(0,0,0,.16);animation:stageCardIn .55s cubic-bezier(.2,.9,.2,1) both}
.stage-transition-kicker{font-size:10px;font-weight:950;letter-spacing:.16em;color:#06801e;margin-bottom:13px}
.stage-transition-node{width:74px;height:74px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#09c82c,#09c82c);color:#fff;font-size:30px;font-weight:950;box-shadow:0 15px 36px rgba(9,200,44,.3);animation:stageNodePop .62s .08s cubic-bezier(.18,1.35,.28,1) both}
.stage-transition-card h2{margin:0;color:#171717;font-size:20px;line-height:1.25;letter-spacing:-.025em}
.stage-transition-track{height:5px;margin:20px auto 0;border-radius:99px;background:#eeeeee;overflow:hidden;max-width:210px}.stage-transition-track span{display:block;height:100%;width:44%;border-radius:inherit;background:#09c82c;animation:stageSweep .85s ease-in-out infinite}
@keyframes stageCardIn{from{transform:translateY(20px) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes stageNodePop{from{transform:scale(.45) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes stageGlow{from{transform:scale(.9)}to{transform:scale(1.08)}}
@keyframes stageSweep{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
@media(prefers-reduced-motion:reduce){.stage-transition-card,.stage-transition-node,.stage-transition-glow,.stage-transition-track span{animation:none!important}.stage-transition{transition:none}}


/* Examens blancs */
.exam-section{margin-top:18px;background:#fff;border:1px solid rgba(9,200,44,.9);border-radius:28px;box-shadow:var(--shadow);padding:20px}
.exam-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.exam-section-head h2{margin:2px 0 0;font-size:20px;letter-spacing:-.025em}
.exam-kicker{display:block;color:#06801e;font-size:10px;font-weight:950;letter-spacing:.14em}
.exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.exam-card{position:relative;border:1px solid #e5e5e5;background:linear-gradient(180deg,#fff,#fbfbfb);border-radius:20px;padding:16px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;cursor:pointer;transition:.2s;overflow:hidden}
.exam-card:before{content:"";position:absolute;width:86px;height:86px;border-radius:50%;right:-30px;top:-36px;background:radial-gradient(circle,rgba(9,200,44,.18),rgba(9,200,44,0) 68%)}
.exam-card:hover{transform:translateY(-2px);border-color:#e5e5e5;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.exam-card:active{transform:scale(.99)}
.exam-card.disabled{cursor:not-allowed;opacity:.62;background:#fcfcfc}
.exam-card.disabled:hover{transform:none;box-shadow:none;border-color:#e5e5e5}
.exam-card-top{position:relative;z-index:1}
.exam-card h3{margin:0 0 5px;font-size:16px;letter-spacing:-.015em;color:#171717}
.exam-card .exam-session{font-size:12px;color:#737373;font-weight:700}
.exam-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.exam-card-status{font-size:11px;color:#7a897f;font-weight:800}
.exam-start{height:38px;padding:0 13px;border:0;border-radius:12px;background:#09c82c;color:#fff;font-size:12px;font-weight:900;display:inline-flex;align-items:center;gap:7px;box-shadow:0 7px 18px rgba(9,200,44,.2)}
.exam-card.disabled .exam-start{background:#f0f0f0;color:#89968e;box-shadow:none}
.exam-statements{display:grid;gap:8px;margin:-4px 0 16px;padding:12px;border-radius:17px;background:#fafafa;border:1px solid #e6e6e6}
.exam-statement{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;font-size:13px;line-height:1.42;color:#525252}
.exam-statement .s-letter{font-weight:950;color:#06801e;text-transform:lowercase}
.play.exam-mode .q-chapter{background:#e6f9ea;color:#06801e}
.play.exam-mode .option{grid-template-columns:36px 1fr 22px}
.play.exam-mode .hearts{gap:2px}.play.exam-mode .heart{width:20px;height:20px}
.play.exam-mode .stats{gap:6px}.play.exam-mode .timer,.play.exam-mode .streak{padding:0 8px}
.exam-card-best{font-weight:950;color:#06801e}
@media(max-width:760px){.exam-grid{grid-template-columns:1fr}.exam-card{min-height:104px}.exam-section{padding:15px 12px;border-radius:22px}.exam-card{padding:14px}}
@media(max-width:390px){.play.exam-mode .heart{width:18px;height:18px}.play.exam-mode .stats{gap:4px}.play.exam-mode .timer,.play.exam-mode .streak{font-size:11.5px;padding:0 6px}.exam-statements{padding:10px}.exam-statement{font-size:12.3px}}


/* Parcours unifié Test 1 → Test 17 */
.home{
  background:
    radial-gradient(circle at 14% 8%,rgba(9,200,44,.08),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(9,200,44,.10),transparent 26%),
    linear-gradient(180deg,#fcfcfc 0%,#f8f8f8 100%);
}
.home .hero{
  background:
    radial-gradient(circle at 50% -20%,rgba(255,255,255,.92),transparent 52%),
    linear-gradient(145deg,#e6f9ea 0%,#e6f9ea 58%,#c8f2d1 100%);
}
.home .journey-card{
  border-color:rgba(9,200,44,.9);
  box-shadow:0 18px 50px rgba(0,0,0,.10);
}
.home .path-line{
  left:27px;
  top:34px;
  bottom:34px;
  width:4px;
  background:linear-gradient(180deg,#09c82c 0%,#5fe07a 42%,#e5e5e5 100%);
  box-shadow:0 0 0 4px rgba(9,200,44,.035);
}
.home .unified-test{
  min-height:74px;
  margin-left:0!important;
  padding:10px 10px 10px 5px;
  border:1px solid #e8e8e8;
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:0 5px 16px rgba(0,0,0,.045);
  overflow:hidden;
  position:relative;
}
.home .unified-test+.unified-test{margin-top:8px}
.home .unified-test::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:3px;
  background:transparent;
  transition:.22s ease;
}
.home .unified-test:hover:not(.locked){
  transform:translateY(-2px);
  border-color:#e5e5e5;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.09);
}
.home .unified-test.current{
  background:linear-gradient(135deg,#f9f9f9,#e6f9ea);
  border-color:#5fe07a;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.home .unified-test.current::after{background:#09c82c}
.home .unified-test.done::after{background:#06801e}
.home .unified-test .node{
  width:48px;height:48px;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#f9f9f9);
  border-color:#e5e5e5;
  color:#737373;
  box-shadow:0 6px 16px rgba(0,0,0,.07);
}
.home .unified-test.current .node{
  border-radius:16px;
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
  border-color:#09c82c;
  box-shadow:0 0 0 6px rgba(9,200,44,.09),0 10px 24px rgba(0,0,0,.22);
}
.home .unified-test.done .node{
  border-radius:16px;
  background:linear-gradient(145deg,#06801e,#06801e);
}
.home .unified-test .step-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#737373;
}
.home .unified-test .level-info strong{
  font-size:14.2px;
  line-height:1.22;
}
.home .unified-test .qcm-count{
  display:inline-flex;
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:#f5f5f5;
  color:#737373;
  font-size:10.5px;
  font-weight:850;
}
.home .unified-test.current .qcm-count{background:#e6f9ea;color:#06801e}
.home .unified-test .level-score{
  min-width:58px;
  height:38px;
  border-radius:13px;
}
.home .unified-test.current .level-score{
  min-width:86px;
  background:linear-gradient(180deg,#09c82c,#09c82c);
  border-color:#09c82c;
  box-shadow:0 8px 19px rgba(0,0,0,.21);
}

/* Transition immersive entre tous les tests */
.stage-transition{
  background:
    radial-gradient(circle at 50% 45%,rgba(9,200,44,.96),rgba(9,200,44,.90) 46%,rgba(9,200,44,.88) 100%);
  backdrop-filter:blur(18px);
  transition:opacity .30s ease;
}
.stage-transition-glow{
  width:390px;height:390px;
  background:radial-gradient(circle,rgba(9,200,44,.25) 0%,rgba(9,200,44,.09) 43%,rgba(9,200,44,0) 72%);
  animation:stageGlowPro 1.25s ease-in-out infinite alternate;
}
.stage-transition-glow::before,
.stage-transition-glow::after{
  content:"";
  position:absolute;
  inset:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(9,200,44,.18);
}
.stage-transition-glow::before{width:240px;height:240px;animation:ringPulse 1.5s ease-in-out infinite}
.stage-transition-glow::after{width:315px;height:315px;animation:ringPulse 1.5s .25s ease-in-out infinite}
.stage-transition-card{
  padding:31px 25px 27px;
  border-radius:32px;
  border:1px solid rgba(9,200,44,.30);
  background:rgba(255,255,255,.95);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  transform-origin:center;
  overflow:hidden;
}
.stage-transition-card::before{
  content:"";
  position:absolute;
  top:0;left:18%;right:18%;
  height:3px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,transparent,#09c82c,transparent);
}
.stage-transition-kicker{
  font-size:10.5px;
  letter-spacing:.18em;
  color:#06801e;
  margin-bottom:14px;
}
.stage-transition-node{
  width:82px;height:82px;
  border-radius:25px;
  background:linear-gradient(145deg,#09c82c,#09c82c);
  font-size:32px;
  box-shadow:0 16px 38px rgba(9,200,44,.33),inset 0 1px 0 rgba(255,255,255,.35);
}
.stage-transition-card h2{
  font-size:21px;
  color:#171717;
  margin-top:2px;
}
.stage-transition-track{
  height:6px;
  max-width:230px;
  margin-top:22px;
  background:#eeeeee;
}
.stage-transition-track span{
  width:38%;
  background:linear-gradient(90deg,#5fe07a,#09c82c);
  box-shadow:0 0 12px rgba(9,200,44,.28);
  animation:stageSweepPro .95s cubic-bezier(.35,.05,.25,1) infinite;
}
.stage-transition.show .stage-transition-card{animation:stageCardPro .62s cubic-bezier(.16,1,.3,1) both}
.stage-transition.leaving .stage-transition-card{animation:stageCardOut .30s ease both}
@keyframes stageCardPro{
  from{opacity:0;transform:translateY(24px) scale(.92)}
  62%{opacity:1;transform:translateY(-3px) scale(1.015)}
  to{opacity:1;transform:none}
}
@keyframes stageCardOut{to{opacity:0;transform:translateY(-14px) scale(.97)}}
@keyframes stageGlowPro{from{transform:scale(.92);opacity:.72}to{transform:scale(1.08);opacity:1}}
@keyframes ringPulse{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes stageSweepPro{from{transform:translateX(-110%)}to{transform:translateX(360%)}}

@media(max-width:600px){
  .home .unified-test{
    min-height:68px;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:9px;
    padding:8px 7px 8px 4px;
    border-radius:17px;
  }
  .home .unified-test .node{width:44px;height:44px;border-radius:14px;font-size:14px}
  .home .unified-test .level-info strong{font-size:13.4px}
  .home .unified-test .qcm-count{font-size:10px;margin-top:4px}
  .home .unified-test .level-score{min-width:52px;height:35px;padding:0 8px;font-size:10.5px}
  .home .unified-test.current .level-score{min-width:80px}
  .home .path-line{left:25px}
  .stage-transition-card{width:min(90vw,360px);padding:27px 20px 24px;border-radius:28px}
  .stage-transition-node{width:72px;height:72px;border-radius:22px;font-size:28px}
  .stage-transition-card h2{font-size:19px}
}


/* Correction visuelle des réponses après validation */
.option.correct,
.option.selected.correct{
  border-color:#09c82c!important;
  background:#e6f9ea!important;
  color:#171717!important;
}
.option.correct .letter,
.option.selected.correct .letter{
  background:#e6f9ea!important;
  color:#06801e!important;
}
.option.correct .choice-mark,
.option.selected.correct .choice-mark{
  background:#06801e!important;
  border-color:#06801e!important;
  color:#fff!important;
}
.option.wrong,
.option.selected.wrong{
  border-color:#ef6972!important;
  background:#fff0f1!important;
  color:#5f252b!important;
}
.option.wrong .letter,
.option.selected.wrong .letter{
  background:#ffe0e3!important;
  color:#b93440!important;
}
.option.wrong .choice-mark,
.option.selected.wrong .choice-mark{
  background:#e6535e!important;
  border-color:#e6535e!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:950!important;
  line-height:1!important;
}
.option:disabled{cursor:default}


/* Parcours pédagogique progressif */
.path-section{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 2px 9px 0;
  padding:8px 8px 8px 3px;
}
.path-section:first-child{margin-top:2px}
.path-section-icon{
  width:31px;height:31px;
  flex:0 0 31px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#e6f9ea;
  border:1px solid #e5e5e5;
  color:#06801e;
  font-size:12px;
  font-weight:950;
  box-shadow:0 4px 12px rgba(0,0,0,.07);
}
.path-section strong{
  display:block;
  color:#06801e;
  font-size:13px;
  letter-spacing:.01em;
}
.path-section span{
  display:block;
  margin-top:2px;
  color:#737373;
  font-size:10.5px;
  line-height:1.3;
}
.test-meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.difficulty-pill{
  display:inline-flex;
  align-items:center;
  height:19px;
  padding:0 7px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.025em;
  white-space:nowrap;
  border:1px solid transparent;
}
.level-basic .difficulty-pill{
  color:#06801e;background:#e6f9ea;border-color:#e5e5e5;
}
.level-mid .difficulty-pill{
  color:#06801e;background:#f4f4f4;border-color:#e5e5e5;
}
.level-advanced .difficulty-pill{
  color:#525252;background:#f6f6f6;border-color:#e5e5e5;
}
.level-master .difficulty-pill{
  color:#06801e;background:#f2f2f2;border-color:#e5e5e5;
}
.level-exam .difficulty-pill{
  color:#06801e;background:#e6f9ea;border-color:#e5e5e5;
}
.level-exam.unified-test{
  border-color:#e5e5e5;
  background:linear-gradient(135deg,rgba(9,200,44,.96),rgba(9,200,44,.96));
}
.level-exam.unified-test .node{
  background:linear-gradient(145deg,#e6f9ea,#e6f9ea);
  border-color:#e5e5e5;
  color:#06801e;
}
.level-exam.unified-test.current .node{
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
}
.home .path-line{
  top:72px;
  bottom:38px;
}
@media(max-width:600px){
  .path-section{margin-top:14px;margin-bottom:7px}
  .path-section strong{font-size:12.5px}
  .path-section span{font-size:10px}
  .difficulty-pill{font-size:8.5px;padding:0 6px}
}


/* Design moderne, jeune et épuré */
.home{
  background:
    radial-gradient(circle at 10% 3%,rgba(9,200,44,.10),transparent 22%),
    radial-gradient(circle at 93% 10%,rgba(9,200,44,.15),transparent 25%),
    linear-gradient(180deg,#fcfcfc 0%,#f8f8f8 100%);
}
.home .content{max-width:880px}
.home .journey-card{
  padding:18px 15px 22px;
  border-radius:30px;
  border:1px solid rgba(9,200,44,.92);
  background:rgba(255,255,255,.91);
  box-shadow:0 22px 58px rgba(0,0,0,.10);
  backdrop-filter:blur(16px);
}
.home .journey-head{
  align-items:center;
  margin-bottom:12px;
  padding:2px 5px 8px;
}
.home .journey-head h2{
  font-size:19px;
  font-weight:950;
  letter-spacing:-.035em;
  color:#171717;
}
.home .progress-badge{
  padding:7px 10px;
  border:1px solid #e5e5e5;
  border-radius:999px;
  background:#e6f9ea;
  color:#06801e;
  font-size:10.5px;
  font-weight:900;
  box-shadow:none;
}
.home .path{padding-top:0}
.home .path-line{
  left:32px;
  top:96px;
  bottom:42px;
  width:2px;
  background:linear-gradient(180deg,rgba(9,200,44,.40),rgba(9,200,44,.14) 65%,rgba(9,200,44,0));
  box-shadow:none;
}

/* Main sections — deliberately different from test cards */
.path-section{
  min-height:80px;
  margin:22px 0 11px;
  padding:11px 13px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 30px;
  gap:12px;
  align-items:center;
  border-radius:23px;
  border:1px solid rgba(9,200,44,.86);
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.70),transparent 34%),
    linear-gradient(135deg,#e6f9ea 0%,#fcfcfc 72%);
  box-shadow:0 12px 28px rgba(0,0,0,.085);
  overflow:hidden;
}
.path-section:first-child{margin-top:2px}
.path-section::before{
  content:"";
  position:absolute;
  left:0;top:12px;bottom:12px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,#09c82c,#5fe07a);
}
.path-section-number{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
  font-size:19px;
  font-weight:950;
  letter-spacing:-.045em;
  box-shadow:
    0 11px 24px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.path-section-copy{min-width:0}
.path-section-label{
  display:block!important;
  margin:0 0 3px!important;
  font-size:8.5px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.18em!important;
  color:#06801e!important;
}
.path-section strong{
  display:block;
  margin:0;
  font-size:14.5px;
  line-height:1.15;
  color:#171717;
  font-weight:950;
  letter-spacing:-.025em;
}
.path-section small{
  display:block;
  margin-top:4px;
  color:#737373;
  font-size:10.3px;
  line-height:1.3;
}
.path-section-mark{
  width:29px;height:29px;
  display:grid;place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(9,200,44,.8);
  color:#06801e;
  font-size:13px;
}

/* Activity cards */
.home .unified-test{
  min-height:70px;
  grid-template-columns:54px minmax(0,1fr) 42px;
  gap:11px;
  margin:7px 0 0 7px;
  padding:8px 9px 8px 6px;
  border:1px solid #e8e8e8;
  border-radius:21px;
  background:rgba(255,255,255,.88);
  box-shadow:0 5px 16px rgba(0,0,0,.045);
  overflow:visible;
}
.home .unified-test+.unified-test{margin-top:7px}
.home .unified-test::after{display:none}
.home .unified-test:hover:not(.locked){
  transform:translateY(-2px) scale(1.002);
  border-color:#e5e5e5;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.09);
}
.home .unified-test.current{
  border-color:#5fe07a;
  background:linear-gradient(135deg,#fbfbfb,#e6f9ea);
  box-shadow:0 12px 28px rgba(0,0,0,.11);
}
.home .unified-test .node{
  width:48px;height:48px;
  border:0;
  border-radius:17px;
  background:linear-gradient(145deg,#f8f8f8,#f0f0f0);
  color:#737373;
  font-size:13px;
  font-weight:950;
  letter-spacing:.035em;
  box-shadow:
    inset 0 0 0 1px #e5e5e5,
    0 6px 14px rgba(0,0,0,.055);
}
.home .unified-test.current .node{
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
  box-shadow:
    0 0 0 5px rgba(9,200,44,.085),
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.home .unified-test.done .node{
  background:linear-gradient(145deg,#06801e,#06801e);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.17);
}
.home .unified-test .level-info{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}
.home .unified-test .level-info strong{
  margin:0;
  color:#171717;
  font-size:13.5px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:-.018em;
}
.home .unified-test.current .level-info strong{color:#171717}
.difficulty-pill{
  order:2;
  height:18px;
  padding:0 7px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.025em;
  opacity:.86;
}
.home .unified-test .level-score{
  width:38px;height:38px;
  min-width:38px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid #e5e5e5;
  background:#fafafa;
  color:#737373;
  font-size:10px;
  font-weight:950;
  box-shadow:none;
}
.home .unified-test .level-score svg{width:17px;height:17px}
.home .unified-test.current .level-score{
  width:38px;min-width:38px;
  border-color:#e5e5e5;
  background:#e6f9ea;
  color:#06801e;
  box-shadow:none;
}
.home .unified-test.done .level-score{
  background:#f2f2f2;
  color:#06801e;
}

/* Do not show old verbose metadata anywhere on the path */
.home .step-label,
.home .qcm-count,
.home .test-meta{display:none!important}

/* Give the exam cards a subtle premium finish without changing structure */
.level-exam.unified-test{
  border-color:#e5e5e5;
  background:linear-gradient(135deg,#fefefe,#e6f9ea);
}
.level-exam.unified-test .node{
  background:linear-gradient(145deg,#f2f2f2,#eaeaea);
  color:#06801e;
}
.level-exam.unified-test.current .node{
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
}

@media(max-width:600px){
  .home .content{padding-left:11px;padding-right:11px}
  .home .journey-card{padding:15px 11px 20px;border-radius:25px}
  .home .journey-head{padding-left:4px;padding-right:4px}
  .home .path-line{left:28px}
  .path-section{
    min-height:74px;
    grid-template-columns:52px minmax(0,1fr) 27px;
    gap:9px;
    padding:9px 9px 9px 8px;
    border-radius:20px;
  }
  .path-section-number{
    width:47px;height:47px;
    border-radius:16px;
    font-size:17px;
  }
  .path-section strong{font-size:13.6px}
  .path-section small{font-size:9.7px}
  .path-section-mark{width:27px;height:27px;border-radius:10px}
  .home .unified-test{
    min-height:64px;
    grid-template-columns:48px minmax(0,1fr) 38px;
    gap:9px;
    margin-left:5px;
    padding:7px 7px 7px 5px;
    border-radius:18px;
  }
  .home .unified-test .node{
    width:44px;height:44px;
    border-radius:15px;
    font-size:12px;
  }
  .home .unified-test .level-info strong{font-size:12.8px}
  .difficulty-pill{font-size:8px;height:17px;padding:0 6px}
  .home .unified-test .level-score{
    width:35px;height:35px;min-width:35px;border-radius:12px
  }
  .home .unified-test.current .level-score{width:35px;min-width:35px}
}


/* Look jeune, premium et contemporain */
:root{
  --y22-ink:#171717;
  --y22-muted:#737373;
  --y22-line:#e5e5e5;
  --y22-green:#09c82c;
  --y22-green-dark:#06801e;
  --y22-mint:#e6f9ea;
  --y22-white:rgba(255,255,255,.92);
}

/* Global home feel */
.home{
  background:
    radial-gradient(circle at 5% 2%,rgba(9,200,44,.11),transparent 20%),
    radial-gradient(circle at 94% 7%,rgba(9,200,44,.17),transparent 23%),
    linear-gradient(180deg,#fcfcfc 0%,#f8f8f8 45%,#fbfbfb 100%);
}
.home .content{max-width:900px}
.home .journey-card{
  padding:18px 16px 26px;
  border-radius:32px;
  border:1px solid rgba(9,200,44,.9);
  background:rgba(255,255,255,.86);
  box-shadow:
    0 24px 70px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(22px);
}
.home .journey-head{
  margin:0 2px 18px;
  padding:3px 4px 13px;
  border-bottom:1px solid rgba(9,200,44,.8);
}
.home .journey-head h2{
  font-size:20px;
  font-weight:950;
  letter-spacing:-.04em;
  color:var(--y22-ink);
}
.home .progress-badge{
  min-width:auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(9,200,44,.85);
  background:linear-gradient(180deg,#fcfcfc,#e6f9ea);
  color:#06801e;
  font-size:10px;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.07);
}

/* Timeline */
.home .path{padding:0 0 6px}
.home .path-line{
  left:32px;
  top:80px;
  bottom:28px;
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(9,200,44,.48) 0%,
    rgba(9,200,44,.22) 70%,
    rgba(9,200,44,0) 100%
  );
}

/* Main sections: not cards anymore — editorial/divider style */
.path-section{
  min-height:72px;
  margin:28px 0 12px;
  padding:0 5px 0 2px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) minmax(48px,120px);
  gap:12px;
  align-items:center;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.path-section:first-child{margin-top:4px}
.path-section::before{display:none}
.path-section-index{
  width:58px;
  height:58px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.95),rgba(255,255,255,.1) 42%),
    linear-gradient(145deg,#09c82c,#09c82c);
  color:white;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.055em;
  box-shadow:
    0 13px 28px rgba(0,0,0,.23),
    0 0 0 6px rgba(9,200,44,.07);
  isolation:isolate;
}
.path-section-index::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:15px;
}
.path-section-copy{
  min-width:0;
  padding-top:1px;
}
.path-section-label{
  display:block!important;
  margin:0 0 4px!important;
  color:#06801e!important;
  font-size:8.5px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.16em!important;
}
.path-section strong{
  display:block;
  margin:0;
  color:#171717;
  font-size:16px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.035em;
}
.path-section small{
  display:block;
  margin-top:5px;
  color:#737373;
  font-size:10.3px;
  line-height:1.35;
}
.path-section-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.path-section-line::before{
  content:"";
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(9,200,44,.28),rgba(9,200,44,0));
}
.path-section-line span{
  width:9px;
  height:9px;
  margin-left:-1px;
  flex:none;
  border-radius:50%;
  background:#09c82c;
  box-shadow:0 0 0 5px rgba(9,200,44,.09);
}

/* Test/activity tiles */
.home .unified-test{
  min-height:68px;
  grid-template-columns:52px minmax(0,1fr) 40px;
  gap:11px;
  margin:8px 0 0 8px;
  padding:8px 9px 8px 7px;
  border:1px solid rgba(9,200,44,.95);
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 18%,rgba(9,200,44,.72),transparent 31%),
    rgba(255,255,255,.88);
  box-shadow:
    0 7px 20px rgba(0,0,0,.045),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}
.home .unified-test+.unified-test{margin-top:8px}
.home .unified-test:hover:not(.locked){
  transform:translateY(-2px);
  border-color:#e5e5e5;
  background:#fff;
  box-shadow:0 15px 34px rgba(0,0,0,.09);
}
.home .unified-test.current{
  border-color:#5fe07a;
  background:
    radial-gradient(circle at 90% 10%,rgba(9,200,44,.48),transparent 32%),
    linear-gradient(135deg,#fdfdfd,#e6f9ea);
  box-shadow:
    0 15px 35px rgba(0,0,0,.11),
    0 0 0 3px rgba(9,200,44,.035);
}

/* Number tile */
.home .unified-test .node{
  width:46px;
  height:46px;
  border:0;
  border-radius:16px;
  background:linear-gradient(145deg,#f9f9f9,#eeeeee);
  color:#737373;
  font-size:12px;
  font-weight:950;
  letter-spacing:.055em;
  box-shadow:
    inset 0 0 0 1px #e5e5e5,
    0 7px 15px rgba(0,0,0,.05);
}
.home .unified-test.current .node{
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 0 0 5px rgba(9,200,44,.07);
}
.home .unified-test.done .node{
  background:linear-gradient(145deg,#06801e,#06801e);
  color:#fff;
}

/* Text hierarchy */
.home .unified-test .level-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}
.home .unified-test .level-info strong{
  color:#171717;
  font-size:13.4px;
  font-weight:920;
  letter-spacing:-.018em;
  line-height:1.15;
}
.difficulty-pill{
  height:18px;
  padding:0 7px;
  border:0;
  border-radius:999px;
  font-size:8.2px;
  font-weight:950;
  letter-spacing:.035em;
}
.level-basic .difficulty-pill{color:#06801e;background:#e6f9ea}
.level-mid .difficulty-pill{color:#06801e;background:#f3f3f3}
.level-advanced .difficulty-pill{color:#525252;background:#f5f5f5}
.level-master .difficulty-pill{color:#06801e;background:#f0f0f0}
.level-exam .difficulty-pill{color:#06801e;background:#e6f9ea}

/* Arrow button */
.home .unified-test .level-score{
  width:37px;
  height:37px;
  min-width:37px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid #e5e5e5;
  background:rgba(9,200,44,.92);
  color:#737373;
  box-shadow:0 4px 12px rgba(0,0,0,.045);
}
.home .unified-test .level-score svg{
  width:16px;
  height:16px;
  transition:transform .18s ease;
}
.home .unified-test:hover:not(.locked) .level-score svg{
  transform:translateX(2px);
}
.home .unified-test.current .level-score{
  width:37px;
  min-width:37px;
  background:#e6f9ea;
  border-color:#e5e5e5;
  color:#06801e;
}

/* Exam cards feel special but remain consistent */
.level-exam.unified-test{
  border-color:#e5e5e5;
  background:
    radial-gradient(circle at 90% 12%,rgba(9,200,44,.4),transparent 34%),
    linear-gradient(135deg,#fefefe,#e6f9ea);
}
.level-exam.unified-test .node{
  background:linear-gradient(145deg,#e6f9ea,#e8e8e8);
  color:#06801e;
}
.level-exam.unified-test.current .node{
  background:linear-gradient(145deg,#09c82c,#09c82c);
  color:#fff;
}

/* Transition gets the same visual language */
.stage-transition-card{
  border-radius:34px;
  border-color:rgba(9,200,44,.28);
  background:rgba(255,255,255,.95);
  box-shadow:0 34px 90px rgba(0,0,0,.18);
}
.stage-transition-node{
  border-radius:24px;
  background:linear-gradient(145deg,#09c82c,#09c82c);
}
.stage-transition-kicker{
  letter-spacing:.16em;
  color:#06801e;
}

/* Mobile */
@media(max-width:600px){
  .home .content{padding-left:10px;padding-right:10px}
  .home .journey-card{
    padding:14px 10px 22px;
    border-radius:27px;
  }
  .home .journey-head{
    margin-bottom:15px;
    padding-left:3px;
    padding-right:3px;
  }
  .home .journey-head h2{font-size:18px}
  .home .path-line{left:28px}
  .path-section{
    min-height:66px;
    grid-template-columns:54px minmax(0,1fr) 50px;
    gap:9px;
    margin:23px 0 10px;
    padding:0 2px;
  }
  .path-section-index{
    width:50px;
    height:50px;
    border-radius:17px;
    font-size:16px;
    box-shadow:
      0 10px 22px rgba(0,0,0,.21),
      0 0 0 5px rgba(9,200,44,.06);
  }
  .path-section-index::after{
    inset:4px;
    border-radius:13px;
  }
  .path-section strong{font-size:14.2px}
  .path-section small{font-size:9.4px}
  .path-section-label{font-size:7.8px!important}
  .path-section-line{min-width:42px}
  .home .unified-test{
    min-height:62px;
    grid-template-columns:46px minmax(0,1fr) 35px;
    gap:9px;
    margin-left:6px;
    padding:7px 7px 7px 6px;
    border-radius:19px;
  }
  .home .unified-test .node{
    width:42px;height:42px;
    border-radius:14px;
    font-size:11px;
  }
  .home .unified-test .level-info strong{font-size:12.7px}
  .difficulty-pill{height:17px;font-size:7.8px;padding:0 6px}
  .home .unified-test .level-score,
  .home .unified-test.current .level-score{
    width:33px;height:33px;min-width:33px;
    border-radius:11px;
  }
}


/* Interface plus claire + meilleur score visible */

/* Sections: modern editorial headers, no green square blocks */
.path-section{
  min-height:74px;
  margin:28px 0 13px;
  padding:4px 5px 4px 3px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 80px;
  gap:11px;
  align-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.path-section::before{display:none!important}
.path-section-index{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid #e5e5e5;
  color:#06801e;
  font-size:14px;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 7px 20px rgba(0,0,0,.075);
}
.path-section-index::after{display:none}
.path-section-copy{min-width:0}
.path-section-label{
  display:block!important;
  margin:0 0 4px!important;
  color:#06801e!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.17em!important;
}
.path-section strong{
  display:block;
  color:#171717;
  font-size:16px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.035em;
}
.path-section small{
  display:block;
  margin-top:5px;
  max-width:480px;
  color:#737373;
  font-size:10.5px;
  line-height:1.35;
}
.path-section-line{
  height:1px;
  background:linear-gradient(90deg,#e5e5e5 0%,rgba(9,200,44,0) 100%);
}
.path-section-line::before,
.path-section-line span{display:none!important}

/* Cards: softer, clearer, no green squares */
.home .unified-test{
  position:relative;
  min-height:72px;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:11px;
  margin:15px 0 0 6px;
  padding:12px 10px 10px 8px;
  overflow:visible;
  border:1px solid #e5e5e5;
  border-radius:21px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.055);
}
.home .unified-test+.unified-test{margin-top:15px}
.home .unified-test:hover:not(.locked){
  transform:translateY(-2px);
  border-color:#e5e5e5;
  background:#fff;
  box-shadow:0 15px 34px rgba(0,0,0,.09);
}
.home .unified-test.current{
  border-color:#5fe07a;
  background:linear-gradient(135deg,#fefefe,#f8f8f8);
  box-shadow:0 13px 30px rgba(0,0,0,.09);
}
.home .unified-test .node,
.home .unified-test.current .node,
.home .unified-test.done .node,
.level-exam.unified-test .node,
.level-exam.unified-test.current .node{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #e5e5e5;
  background:#fbfbfb;
  color:#525252;
  font-size:11.5px;
  font-weight:950;
  letter-spacing:.05em;
  box-shadow:none;
  animation:none!important;
}
.home .unified-test.current .node{
  border-color:#5fe07a;
  color:#06801e;
  box-shadow:0 0 0 4px rgba(9,200,44,.06);
}

/* Highest score floats outside the card */
.best-score-chip{
  position:absolute;
  top:-11px;
  right:14px;
  z-index:4;
  height:23px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #e5e5e5;
  background:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.07);
  white-space:nowrap;
}
.best-score-chip span{
  color:#737373;
  font-size:8.5px;
  font-weight:850;
}
.best-score-chip strong{
  color:#06801e;
  font-size:9.5px;
  font-weight:950;
}
.home .unified-test .level-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding-right:4px;
}
.home .unified-test .level-info strong{
  width:100%;
  margin:0;
  color:#171717;
  font-size:13.5px;
  font-weight:920;
  line-height:1.22;
  letter-spacing:-.018em;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.difficulty-pill{
  height:17px;
  padding:0 7px;
  border:0;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  line-height:17px;
}
.home .unified-test .level-score,
.home .unified-test.current .level-score{
  min-width:76px;
  width:auto;
  height:36px;
  padding:0 10px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:12px;
  border:1px solid #e5e5e5;
  background:#fafafa;
  color:#06801e;
  font-size:10.5px;
  font-weight:950;
  box-shadow:none;
}
.home .unified-test .level-score svg{
  width:14px;
  height:14px;
}
.home .unified-test:hover:not(.locked) .level-score{
  border-color:#5fe07a;
  background:#e6f9ea;
  color:#06801e;
}
.home .unified-test.locked .level-score{
  min-width:40px;
  padding:0 9px;
}

/* Keep path line subtle */
.home .path-line{
  left:29px;
  width:1px;
  background:linear-gradient(180deg,rgba(9,200,44,.28),rgba(9,200,44,.05));
}

/* Quiz action buttons: explicit labels and no empty column in Examens blancs */
.action-row{
  grid-template-columns:110px 94px minmax(0,1fr);
  gap:9px;
  padding:8px;
  border-radius:19px;
  border:1px solid #e5e5e5;
  background:#fbfbfb;
}
.speak-btn,
.eliminate-btn{
  width:auto!important;
  height:54px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:14px;
  border:1px solid #e5e5e5;
  background:#fff;
  color:#06801e;
  font-weight:900;
}
.speak-btn .icon{width:21px;height:21px}
.eliminate-btn .icon-sm{width:19px;height:19px}
.action-label{
  font-size:11px;
  font-weight:900;
}
.eliminate-count{
  min-width:20px;
  height:20px;
  padding:0 5px;
  background:#f2f2f2;
  color:#06801e;
  border:1px solid #e5e5e5;
  box-shadow:none;
}
.primary{
  min-width:0;
  width:100%;
  height:54px;
  border-radius:14px;
  font-size:14px;
  letter-spacing:-.01em;
}
.play.exam-mode .action-row{
  grid-template-columns:110px minmax(0,1fr);
}
.play.exam-mode .primary{
  grid-column:2;
  width:100%;
}

/* Result actions also clearer */
.result-actions .secondary,
.result-actions .primary{
  min-height:48px;
  border-radius:14px;
  font-weight:900;
}

/* Mobile tuning */
@media(max-width:600px){
  .path-section{
    min-height:66px;
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:9px;
    margin:24px 0 11px;
    padding-left:2px;
  }
  .path-section-index{
    width:40px;height:40px;
    font-size:12px;
  }
  .path-section strong{font-size:14.2px}
  .path-section small{font-size:9.6px}
  .path-section-line{width:44px}
  .home .path-line{left:25px}

  .home .unified-test{
    min-height:69px;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:8px;
    margin-left:4px;
    margin-top:15px;
    padding:11px 7px 9px 6px;
    border-radius:18px;
  }
  .home .unified-test .node,
  .home .unified-test.current .node,
  .home .unified-test.done .node,
  .level-exam.unified-test .node{
    width:39px;height:39px;
    font-size:10.5px;
  }
  .home .unified-test .level-info strong{
    font-size:12.7px;
    line-height:1.2;
  }
  .difficulty-pill{
    font-size:7.5px;
    height:16px;
    line-height:16px;
    padding:0 6px;
  }
  .home .unified-test .level-score,
  .home .unified-test.current .level-score{
    min-width:65px;
    height:34px;
    padding:0 7px 0 9px;
    font-size:9.5px;
    border-radius:11px;
  }
  .best-score-chip{
    top:-10px;
    right:9px;
    height:21px;
    padding:0 7px;
  }
  .best-score-chip span{font-size:7.7px}
  .best-score-chip strong{font-size:8.8px}

  .action-row{
    grid-template-columns:94px 78px minmax(0,1fr);
    gap:7px;
    padding:7px;
  }
  .speak-btn,.eliminate-btn{
    height:50px;
    padding:0 8px;
    gap:5px;
  }
  .action-label{font-size:10px}
  .primary{height:50px;font-size:13.5px}
  .play.exam-mode .action-row{
    grid-template-columns:94px minmax(0,1fr);
  }
}
@media(max-width:370px){
  .home .unified-test{
    grid-template-columns:39px minmax(0,1fr) auto;
  }
  .home .unified-test .level-score,
  .home .unified-test.current .level-score{
    min-width:58px;
    padding:0 6px;
    font-size:9px;
  }
  .action-row{
    grid-template-columns:50px 70px minmax(0,1fr);
  }
  .speak-btn{padding:0}
  .speak-btn .action-label{display:none}
  .eliminate-btn .action-label{display:none}
  .play.exam-mode .action-row{
    grid-template-columns:50px minmax(0,1fr);
  }
}


/* Sections épurées + test plein écran mobile */

/* Main sections: remove duplicated 01 / 02 badges entirely */
.path-section{
  min-height:auto!important;
  margin:30px 0 13px!important;
  padding:5px 4px 7px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(42px,110px)!important;
  gap:12px!important;
  align-items:end!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.path-section-index{display:none!important}
.path-section-copy{
  min-width:0;
  padding-left:0;
}
.path-section-label{
  display:block!important;
  margin:0 0 5px!important;
  color:#06801e!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.18em!important;
}
.path-section strong{
  display:block!important;
  margin:0!important;
  color:#171717!important;
  font-size:17px!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}
.path-section small{
  display:block!important;
  margin-top:6px!important;
  color:#737373!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.path-section-line{
  align-self:center;
  width:100%;
  height:1px!important;
  background:linear-gradient(90deg,#e5e5e5 0%,rgba(9,200,44,0) 100%)!important;
}

/* The first test after a section should breathe a little less */
.path-section + .unified-test{margin-top:10px!important}

/* Mobile quiz = one clean full-screen surface, not a card on another card/background */
@media(max-width:680px){
  .play{
    min-height:100dvh!important;
    background:#fff!important;
  }
  .game-head{
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #eaeaea!important;
    backdrop-filter:blur(14px);
  }
  .game-head-inner{
    max-width:none!important;
    padding:9px 13px 10px!important;
  }
  .game-main{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 14px calc(92px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
  }
  .q-card{
    width:100%!important;
    min-height:calc(100dvh - 128px)!important;
    margin:0!important;
    padding:18px 0 22px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .q-meta{
    margin-bottom:13px!important;
  }
  .q-chapter{
    padding:6px 9px!important;
    border-radius:999px!important;
    background:#e6f9ea!important;
    color:#06801e!important;
    font-size:10.5px!important;
  }
  .question{
    margin-bottom:14px!important;
    font-size:18px!important;
    line-height:1.38!important;
  }
  .options{
    gap:9px!important;
  }
  .option{
    min-height:52px!important;
    padding:11px 11px!important;
    border-radius:15px!important;
    background:#fff!important;
  }
  .option:hover{background:#fff!important}
  .option.selected{background:#e6f9ea!important}
  .option.correct,
  .option.selected.correct{background:#e6f9ea!important}
  .option.wrong,
  .option.selected.wrong{background:#fff0f1!important}

  /* Exam statement stays a content block, but loses the layered-card feeling */
  .exam-statements{
    margin:0 0 14px!important;
    padding:12px 10px!important;
    border:1px solid #e5e5e5!important;
    border-radius:14px!important;
    background:#fbfbfb!important;
    box-shadow:none!important;
  }

  /* Actions are part of the screen, not another rounded background card */
  .action-row,
  .play.exam-mode .action-row{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    margin:17px -14px 0!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid #e8e8e8!important;
    border-radius:0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -10px 24px rgba(0,0,0,.045)!important;
    backdrop-filter:blur(14px)!important;
  }
  .action-row{
    grid-template-columns:94px 80px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .play.exam-mode .action-row{
    grid-template-columns:94px minmax(0,1fr)!important;
  }
  .speak-btn,
  .eliminate-btn{
    height:49px!important;
    border-radius:13px!important;
    background:#fbfbfb!important;
  }
  .primary{
    height:49px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }
  .play.exam-mode .primary{
    grid-column:2!important;
  }

  .feedback{
    margin-top:14px!important;
    border-radius:15px!important;
  }
}

/* Very small phones: keep all controls readable */
@media(max-width:380px){
  .game-main{
    padding-left:11px!important;
    padding-right:11px!important;
  }
  .action-row,
  .play.exam-mode .action-row{
    margin-left:-11px!important;
    margin-right:-11px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }
  .action-row{
    grid-template-columns:48px 70px minmax(0,1fr)!important;
  }
  .play.exam-mode .action-row{
    grid-template-columns:48px minmax(0,1fr)!important;
  }
  .speak-btn .action-label,
  .eliminate-btn .action-label{display:none!important}
  .question{font-size:17px!important}
}


/* Résultat plus compact + correction détaillée */

/* Direct, professor-style correction of every false proposition */
.option-rationales{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(9,200,44,.22);
  display:grid;
  gap:9px;
}
.rationale-heading{
  color:#525252;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.01em;
  margin-bottom:1px;
}
.rationale-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:10px 11px;
  border-radius:13px;
  border:1px solid #f0d6d8;
  background:#fff9f9;
}
.rationale-letter{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#ffe3e5;
  color:#b63c47;
  font-size:11px;
  font-weight:950;
}
.rationale-body{
  min-width:0;
}
.rationale-body strong{
  display:block;
  color:#4d3336;
  font-size:11.5px;
  line-height:1.35;
  font-weight:900;
}
.rationale-body p{
  margin:4px 0 0!important;
  color:#655052!important;
  font-size:11.5px!important;
  line-height:1.48!important;
}
.feedback.good .option-rationales,
.feedback.bad .option-rationales{
  border-top-color:rgba(9,200,44,.18);
}

/* Result screen: smaller and better fitted to a phone */
@media(max-width:680px){
  .result{
    min-height:100dvh!important;
    padding:18px 12px calc(24px + env(safe-area-inset-bottom))!important;
    place-items:start center!important;
    background:linear-gradient(180deg,#f6f6f6 0%,#fbfbfb 100%)!important;
  }
  .result-card{
    width:min(100%,540px)!important;
    margin:0 auto!important;
    padding:19px 16px 20px!important;
    border-radius:24px!important;
    box-shadow:0 14px 42px rgba(0,0,0,.09)!important;
  }
  .medal{
    width:70px!important;
    height:70px!important;
    margin-bottom:11px!important;
    border-radius:22px!important;
  }
  .medal svg{
    width:42px!important;
    height:42px!important;
  }
  .result h2{
    font-size:24px!important;
    line-height:1.05!important;
  }
  .result-sub{
    margin:6px 0 15px!important;
    font-size:14px!important;
  }
  .score-big{
    font-size:48px!important;
  }
  .stars{
    margin:8px 0 13px!important;
  }
  .stars svg,
  .star{
    width:25px!important;
    height:25px!important;
  }
  .result-grid{
    gap:7px!important;
    margin:13px 0!important;
  }
  .result-stat{
    padding:10px 5px!important;
    border-radius:14px!important;
  }
  .result-stat strong{
    font-size:18px!important;
  }
  .result-stat span{
    font-size:10.5px!important;
  }
  .unlock-msg{
    margin:10px 0!important;
    padding:11px!important;
    border-radius:13px!important;
    font-size:13px!important;
  }
  .stage-bridge{
    margin:9px 0!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .bridge-node{
    width:44px!important;
    height:44px!important;
    border-radius:13px!important;
    font-size:16px!important;
  }
  .stage-bridge strong{
    font-size:12.5px!important;
  }
  .stage-bridge span{
    font-size:10.5px!important;
  }
  .result-actions{
    gap:8px!important;
    margin-top:12px!important;
  }
  .result-actions .secondary,
  .result-actions .primary{
    height:46px!important;
    min-height:46px!important;
    border-radius:13px!important;
    font-size:12.5px!important;
  }
}

/* On very small phones, correction remains compact and readable */
@media(max-width:380px){
  .result{
    padding-left:9px!important;
    padding-right:9px!important;
  }
  .result-card{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  .rationale-item{
    grid-template-columns:29px minmax(0,1fr);
    padding:9px;
    gap:8px;
  }
  .rationale-letter{
    width:26px;height:26px;
  }
  .rationale-body strong,
  .rationale-body p{
    font-size:10.8px!important;
  }
}


/* Correction proposition par proposition */
.feedback.compact-correct{
  padding:11px 14px!important;
  border-radius:14px!important;
}
.feedback.compact-correct #feedbackText,
.feedback.compact-correct .option-rationales{
  display:none!important;
}
.feedback.compact-correct .feedback-title{
  margin:0!important;
}
.rationale-heading{
  font-size:12.5px!important;
}
.rationale-body strong{
  font-size:11.8px!important;
}
.rationale-body p{
  font-size:11.7px!important;
  line-height:1.5!important;
}


/* ===== Transition screen without the green background ===== */
.stage-transition{
  background:#fff!important;
  backdrop-filter:none!important;
}
.stage-transition-glow,
.stage-transition-glow::before,
.stage-transition-glow::after{
  display:none!important;
}
.stage-transition-card{
  background:#fff!important;
  border:1px solid #e8e8e8!important;
  box-shadow:0 14px 34px rgba(0,0,0,.08)!important;
}
.stage-transition-card::before{
  display:none!important;
}


/* Feedback plus propre */
.correct-answer-line{
  color:#06801e!important;
  font-weight:900!important;
}
.feedback.bad #feedbackText{
  color:#06801e!important;
  font-weight:900!important;
}

/* Remove the large square icon/number from transition */
.stage-transition-node{
  display:none!important;
}
.stage-transition-card{
  padding-top:28px!important;
}


/* Justifications plus explicites */
.rationale-body p{
  color:#5f4b4d!important;
  font-size:11.8px!important;
  line-height:1.55!important;
}


/* Justification réellement individuelle */
.rationale-item{
  border-left:3px solid #ef8c94!important;
}
.rationale-body p{
  margin-top:6px!important;
  font-size:11.9px!important;
  line-height:1.58!important;
}


/* Interface moderne, propre et cohérente */
:root{
  --modern-green:#09c82c;
  --modern-green-deep:#06801e;
  --modern-ink:#171717;
  --modern-muted:#737373;
  --modern-bg:#f9f9f9;
  --modern-line:#e5e5e5;
  --modern-soft:#e6f9ea;
  --modern-red:#df5963;
}

/* Home */
.home{
  background:var(--modern-bg)!important;
}
.home .hero{
  background:#e6f9ea!important;
  border-bottom:1px solid #e8e8e8!important;
}
.home .journey-card{
  background:#fff!important;
  border:1px solid var(--modern-line)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.07)!important;
}
.home .progress-badge{
  background:#f9f9f9!important;
  border-color:#e5e5e5!important;
  color:var(--modern-green-deep)!important;
}
.path-section strong,
.home .unified-test .level-info strong{
  color:var(--modern-ink)!important;
}
.path-section-line{
  background:linear-gradient(90deg,#e5e5e5,transparent)!important;
}
.home .unified-test{
  background:#fff!important;
  border:1px solid #e7e7e7!important;
  box-shadow:0 5px 18px rgba(0,0,0,.045)!important;
}
.home .unified-test.current{
  border-color:#5fe07a!important;
  background:#fbfbfb!important;
  box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
}
.home .unified-test.locked{
  opacity:.60!important;
  filter:saturate(.75);
}
.home .unified-test .node,
.home .unified-test.current .node,
.home .unified-test.done .node{
  background:#fafafa!important;
  border:1px solid #e5e5e5!important;
  color:#525252!important;
  box-shadow:none!important;
}
.home .unified-test.current .node{
  background:var(--modern-soft)!important;
  border-color:#5fe07a!important;
  color:var(--modern-green-deep)!important;
}
.best-score-chip{
  background:#fff!important;
  border-color:#e5e5e5!important;
  box-shadow:0 4px 12px rgba(0,0,0,.055)!important;
}
.home .unified-test .level-score,
.home .unified-test.current .level-score{
  background:#f9f9f9!important;
  border-color:#e5e5e5!important;
  color:#06801e!important;
}
.home .unified-test.current .level-score{
  background:var(--modern-green)!important;
  border-color:var(--modern-green)!important;
  color:#fff!important;
}

/* Quiz */
.play{
  background:#fff!important;
}
.game-head{
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--modern-line)!important;
}
.progress-track{
  background:#ececec!important;
}
.progress-fill{
  background:var(--modern-green)!important;
}
.timer,.streak{
  background:#fff!important;
  border-color:#e5e5e5!important;
  box-shadow:none!important;
}
.question{
  color:#171717!important;
}
.q-chapter{
  background:#e6f9ea!important;
  color:#06801e!important;
}
.option{
  border-color:#e5e5e5!important;
  background:#fff!important;
  box-shadow:none!important;
}
.option.selected{
  border-color:#5fe07a!important;
  background:#e6f9ea!important;
}
.option.correct,
.option.selected.correct{
  border-color:#09c82c!important;
  background:#e6f9ea!important;
}
.option.wrong,
.option.selected.wrong{
  border-color:#e77780!important;
  background:#fff3f4!important;
}
.action-row,
.play.exam-mode .action-row{
  background:#fff!important;
  border-top:1px solid #e7e7e7!important;
  box-shadow:0 -8px 20px rgba(0,0,0,.035)!important;
}
.speak-btn,.eliminate-btn{
  background:#fbfbfb!important;
  border-color:#e5e5e5!important;
  color:#06801e!important;
}
.primary{
  background:var(--modern-green)!important;
  box-shadow:0 8px 20px rgba(9,200,44,.18)!important;
}
.primary:hover:not(:disabled){
  background:#09c82c!important;
}

/* Feedback */
.feedback.bad{
  background:#fff7f7!important;
  border-color:#efc9cc!important;
}
.feedback.good{
  background:#f8f8f8!important;
  border-color:#e5e5e5!important;
}
.correct-answer-line{
  color:#06801e!important;
}
.rationale-item{
  background:#fff!important;
  border:1px solid #efd9db!important;
  border-left:3px solid #e67880!important;
  box-shadow:none!important;
}
.rationale-letter{
  background:#fff0f1!important;
  color:#bd4650!important;
}
.rationale-body strong{
  color:#433336!important;
}
.rationale-body p{
  color:#625255!important;
}
.rationale-heading{
  color:#525252!important;
}

/* 90% locked goal */
.unlock-msg.locked-goal{
  display:flex!important;
  flex-direction:column;
  gap:3px;
  align-items:center;
  background:#fff7f1!important;
  border:1px solid #f0d8c7!important;
  color:#8a5735!important;
}
.unlock-msg.locked-goal strong{
  font-size:14px;
  font-weight:950;
}
.unlock-msg.locked-goal span{
  font-size:10.8px;
  color:#8d6b55;
}

/* Result */
.result{
  background:#f9f9f9!important;
}
.result-card{
  background:#fff!important;
  border:1px solid #e5e5e5!important;
  box-shadow:0 12px 34px rgba(0,0,0,.07)!important;
}
.medal{
  background:#e6f9ea!important;
  color:var(--modern-green-deep)!important;
}
.score-big{
  color:var(--modern-green-deep)!important;
}
.result-stat{
  background:#fbfbfb!important;
  border-color:#e5e5e5!important;
}
.stage-bridge{
  background:#f6f6f6!important;
  border-color:#e5e5e5!important;
}
.bridge-node{
  background:#fff!important;
  color:var(--modern-green-deep)!important;
  border:1px solid #e5e5e5!important;
}

@media(max-width:680px){
  .game-main{
    background:#fff!important;
  }
  .q-card{
    background:#fff!important;
  }
  .result-card{
    border-radius:22px!important;
  }
}


/* Choix modernes, interface plus premium */
:root{
  --v33-green:#09c82c;
  --v33-green-dark:#06801e;
  --v33-green-soft:#e6f9ea;
  --v33-ink:#171717;
  --v33-muted:#737373;
  --v33-line:#e5e5e5;
  --v33-bg:#fafafa;
  --v33-red:#e35d67;
  --v33-red-soft:#fff2f3;
}

/* General quiz canvas */
.play{
  background:#fff!important;
}
.game-head{
  background:rgba(255,255,255,.985)!important;
  border-bottom:1px solid #eaeaea!important;
  box-shadow:0 5px 18px rgba(0,0,0,.035)!important;
}
.game-head-inner{
  gap:10px!important;
}
.back-game{
  color:#06801e!important;
  font-weight:900!important;
}
.timer,.streak{
  min-height:44px!important;
  border-radius:15px!important;
  border:1px solid #e5e5e5!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(0,0,0,.035)!important;
}
.progress-track{
  height:7px!important;
  border-radius:999px!important;
  background:#eeeeee!important;
}
.progress-fill{
  border-radius:999px!important;
  background:linear-gradient(90deg,#09c82c,#09c82c)!important;
  box-shadow:0 1px 5px rgba(9,200,44,.18)!important;
}

/* Question presentation */
.q-card{
  color:var(--v33-ink)!important;
}
.q-meta{
  margin-bottom:14px!important;
}
.q-chapter{
  padding:6px 10px!important;
  border:1px solid #e5e5e5!important;
  background:#e6f9ea!important;
  color:#06801e!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.q-number{
  color:#737373!important;
  font-size:11px!important;
  font-weight:850!important;
}
.question{
  margin-bottom:17px!important;
  color:#171717!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  line-height:1.38!important;
}

/* Modern answer choices */
.options{
  display:grid!important;
  gap:11px!important;
}
.option{
  position:relative!important;
  min-height:64px!important;
  width:100%!important;
  padding:11px 12px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 28px!important;
  gap:12px!important;
  align-items:center!important;
  border:1px solid #e5e5e5!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#171717!important;
  box-shadow:
    0 5px 16px rgba(0,0,0,.035),
    inset 0 1px 0 rgba(255,255,255,.85)!important;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1)!important;
  overflow:hidden!important;
}
.option::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  background:transparent!important;
  transition:background .18s ease!important;
}
.option:hover:not(:disabled){
  border-color:#e5e5e5!important;
  background:#ffffff!important;
  box-shadow:0 9px 24px rgba(0,0,0,.07)!important;
  transform:translateY(-1px)!important;
}
.option:active:not(:disabled){
  transform:scale(.992)!important;
}

/* Choice letter as a clean circular badge */
.option .letter{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid #e5e5e5!important;
  background:#fafafa!important;
  color:#737373!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  box-shadow:none!important;
  transition:.18s ease!important;
}
.option .option-text{
  min-width:0!important;
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  color:#525252!important;
}

/* Right-side selector feels like a modern radio/check control */
.option .choice-mark{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1.5px solid #e5e5e5!important;
  background:#fff!important;
  color:transparent!important;
  box-shadow:inset 0 0 0 4px #fff!important;
  transition:.18s ease!important;
}
.option .choice-mark svg{
  width:14px!important;
  height:14px!important;
}

/* Selected */
.option.selected{
  border-color:#5fe07a!important;
  background:
    linear-gradient(135deg,#fbfbfb 0%,#e6f9ea 100%)!important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.09),
    inset 0 0 0 1px rgba(9,200,44,.035)!important;
}
.option.selected::before{
  background:var(--v33-green)!important;
}
.option.selected .letter{
  border-color:#5fe07a!important;
  background:#e6f9ea!important;
  color:#06801e!important;
}
.option.selected .option-text{
  color:#171717!important;
  font-weight:750!important;
}
.option.selected .choice-mark{
  border-color:var(--v33-green)!important;
  background:var(--v33-green)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Correct */
.option.correct,
.option.selected.correct{
  border-color:#09c82c!important;
  background:linear-gradient(135deg,#fbfbfb,#e6f9ea)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.07)!important;
}
.option.correct::before,
.option.selected.correct::before{
  background:#09c82c!important;
}
.option.correct .letter,
.option.selected.correct .letter{
  border-color:#5fe07a!important;
  background:#e6f9ea!important;
  color:#06801e!important;
}
.option.correct .choice-mark,
.option.selected.correct .choice-mark{
  background:#06801e!important;
  border-color:#06801e!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Wrong */
.option.wrong,
.option.selected.wrong{
  border-color:#ea7a82!important;
  background:linear-gradient(135deg,#fff8f8,#fff0f1)!important;
  box-shadow:0 7px 20px rgba(211,74,84,.055)!important;
}
.option.wrong::before,
.option.selected.wrong::before{
  background:var(--v33-red)!important;
}
.option.wrong .letter,
.option.selected.wrong .letter{
  border-color:#f3b4b9!important;
  background:#ffe3e6!important;
  color:#b63d48!important;
}
.option.wrong .choice-mark,
.option.selected.wrong .choice-mark{
  background:var(--v33-red)!important;
  border-color:var(--v33-red)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Disabled options stay crisp after validation */
.option:disabled{
  opacity:1!important;
  cursor:default!important;
}

/* Bottom actions */
.action-row,
.play.exam-mode .action-row{
  gap:9px!important;
  padding-top:11px!important;
}
.speak-btn,.eliminate-btn{
  border-radius:15px!important;
  border:1px solid #e5e5e5!important;
  background:#fbfbfb!important;
  color:#06801e!important;
  box-shadow:none!important;
}
.speak-btn:hover:not(:disabled),
.eliminate-btn:hover:not(:disabled){
  background:#f4f4f4!important;
  border-color:#e5e5e5!important;
}
.primary{
  border-radius:15px!important;
  background:linear-gradient(180deg,#09c82c,#09c82c)!important;
  color:#fff!important;
  font-weight:950!important;
  box-shadow:0 9px 22px rgba(0,0,0,.18)!important;
}
.primary:disabled{
  background:#e7e7e7!important;
  color:#737373!important;
  box-shadow:none!important;
}
.primary:hover:not(:disabled){
  background:linear-gradient(180deg,#09c82c,#09c82c)!important;
}

/* Feedback also simplified */
.feedback{
  border-radius:18px!important;
}
.feedback.bad{
  background:#fff8f8!important;
}
.rationale-item{
  border-radius:15px!important;
  background:#fff!important;
}
.rationale-letter{
  border-radius:50%!important;
}

/* Mobile: large touch targets, but compact */
@media(max-width:680px){
  .game-main{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .q-card{
    padding-top:16px!important;
  }
  .question{
    font-size:18.5px!important;
    margin-bottom:15px!important;
  }
  .options{
    gap:10px!important;
  }
  .option{
    min-height:61px!important;
    grid-template-columns:42px minmax(0,1fr) 26px!important;
    gap:10px!important;
    padding:10px 10px!important;
    border-radius:18px!important;
  }
  .option .letter{
    width:39px!important;
    height:39px!important;
    font-size:12.5px!important;
  }
  .option .option-text{
    font-size:13.5px!important;
    line-height:1.4!important;
  }
  .option .choice-mark{
    width:23px!important;
    height:23px!important;
  }
  .action-row,
  .play.exam-mode .action-row{
    margin-left:-12px!important;
    margin-right:-12px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

@media(max-width:380px){
  .option{
    grid-template-columns:39px minmax(0,1fr) 24px!important;
    gap:8px!important;
    padding:9px!important;
  }
  .option .letter{
    width:36px!important;
    height:36px!important;
  }
  .option .option-text{
    font-size:13px!important;
  }
}


/* Ligne de parcours moderne et premium */

/* Rail principal : double couche très fine + progression dynamique */
.home .path-line{
  left:24px!important;
  top:34px!important;
  bottom:34px!important;
  width:12px!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:0!important;
}
.home .path-line::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:
    linear-gradient(180deg,#e5e5e5 0%,#eeeeee 52%,#f0f0f0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(9,200,44,.08),
    0 0 0 4px rgba(9,200,44,.34);
}
.home .path-line::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:4px;
  height:var(--path-fill,0px);
  transform:translateX(-50%);
  border-radius:999px;
  background:
    linear-gradient(180deg,#5fe07a 0%,#09c82c 52%,#09c82c 100%);
  box-shadow:
    0 0 0 3px rgba(9,200,44,.07),
    0 0 16px rgba(9,200,44,.15);
  transition:height .55s cubic-bezier(.2,.75,.25,1);
}

/* Les numéros deviennent de vrais checkpoints du rail */
.home .unified-test .node{
  position:relative!important;
  z-index:3!important;
}
.home .unified-test .node::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  pointer-events:none;
}
.home .unified-test.done .node{
  border-color:#5fe07a!important;
  background:#e6f9ea!important;
  color:#06801e!important;
}
.home .unified-test.done .node::before{
  border-color:rgba(0,0,0,.15);
  box-shadow:0 0 0 3px rgba(0,0,0,.035);
}
.home .unified-test.current .node{
  border-color:#09c82c!important;
  background:#f9f9f9!important;
  color:#06801e!important;
  box-shadow:
    0 0 0 4px rgba(9,200,44,.07),
    0 6px 18px rgba(0,0,0,.09)!important;
}
.home .unified-test.current .node::before{
  inset:-7px;
  border-color:rgba(9,200,44,.18);
  animation:v34CurrentRing 2.2s ease-in-out infinite;
}

/* Petite connexion horizontale entre le rail et chaque carte */
.home .unified-test{
  --connector-color:#e5e5e5;
}
.home .unified-test.done{
  --connector-color:#e5e5e5;
}
.home .unified-test.current{
  --connector-color:#5fe07a;
}
.home .unified-test::before{
  content:"";
  position:absolute!important;
  left:-9px!important;
  top:50%!important;
  width:17px!important;
  height:2px!important;
  transform:translateY(-50%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--connector-color),rgba(255,255,255,0))!important;
  opacity:.95!important;
  pointer-events:none!important;
}

/* Les titres de section coupent visuellement le rail avec élégance */
.path-section{
  position:relative!important;
  z-index:2!important;
}
.path-section::after{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  width:13px;
  height:13px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:3px solid #e5e5e5;
  box-shadow:0 0 0 4px rgba(9,200,44,.92);
}
.path-section + .unified-test::before{
  background:linear-gradient(90deg,#5fe07a,rgba(255,255,255,0))!important;
}

/* Current checkpoint has a restrained premium pulse */
@keyframes v34CurrentRing{
  0%,100%{
    transform:scale(.96);
    opacity:.55;
    box-shadow:0 0 0 0 rgba(9,200,44,.10);
  }
  50%{
    transform:scale(1.05);
    opacity:1;
    box-shadow:0 0 0 5px rgba(9,200,44,0);
  }
}

/* Mobile alignment */
@media(max-width:680px){
  .home .path-line{
    left:20px!important;
    width:10px!important;
  }
  .home .path-line::before,
  .home .path-line::after{
    width:3px!important;
  }
  .path-section::after{
    left:14px!important;
    width:11px!important;
    height:11px!important;
    border-width:3px!important;
  }
  .home .unified-test::before{
    left:-7px!important;
    width:14px!important;
  }
}

/* Very small phones */
@media(max-width:380px){
  .home .path-line{
    left:19px!important;
  }
}


/* ===== No connector line between steps ===== */
.home .path-line,
.home .path-line::before,
.home .path-line::after{
  display:none!important;
}

.home .unified-test::before,
.path-section::after{
  display:none!important;
}

.home .unified-test .node::before{
  display:none!important;
}

/* Remove the spacing reserved for the connector */
.home .unified-test{
  margin-left:0!important;
}
.path-section{
  padding-left:0!important;
}


/* Suppression du bouton Écouter */
.action-row{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:9px!important;
}
.play.exam-mode .action-row{
  grid-template-columns:minmax(0,1fr)!important;
}
.eliminate-btn{
  width:100%!important;
}
.primary{
  width:100%!important;
}
.play.exam-mode .primary{
  grid-column:1!important;
}

@media(max-width:680px){
  .action-row{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  .play.exam-mode .action-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media(max-width:380px){
  .action-row{
    grid-template-columns:66px minmax(0,1fr)!important;
  }
  .play.exam-mode .action-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* Identité Quiz + mascotte QCM */
.home .hero{
  min-height:238px!important;
  background:
    radial-gradient(circle at 84% 20%,rgba(255,255,255,.78),transparent 27%),
    linear-gradient(145deg,#f8f8f8 0%,#e6f9ea 56%,#e6f9ea 100%)!important;
}
.home .hero-inner{
  max-width:850px!important;
  min-height:238px!important;
  margin:0 auto!important;
  padding:24px 22px 30px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 178px!important;
  gap:26px!important;
  align-items:center!important;
  text-align:left!important;
}
.quiz-hero-copy{
  min-width:0;
}
.home .hero h1{
  max-width:520px!important;
  margin:0!important;
  color:#171717!important;
  font-size:clamp(30px,5vw,42px)!important;
  line-height:1.04!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-align:left!important;
}
.quiz-hero-visual{
  width:178px;
  height:178px;
  display:grid;
  place-items:center;
  border-radius:34px;
  overflow:hidden;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(9,200,44,.92);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  transform:rotate(1.5deg);
}
.quiz-mascot{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Keep the path card visually connected to the hero */
.home .content{
  margin-top:-26px!important;
}

@media(max-width:680px){
  .home .hero{
    min-height:242px!important;
  }
  .home .hero-inner{
    min-height:242px!important;
    grid-template-columns:minmax(0,1fr) 118px!important;
    gap:12px!important;
    padding:24px 15px 36px!important;
  }
  .home .hero h1{
    font-size:27px!important;
    line-height:1.08!important;
  }
  .quiz-hero-visual{
    width:118px;
    height:118px;
    border-radius:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.09);
  }
  .home .content{
    margin-top:-24px!important;
  }
}

@media(max-width:430px){
  .home .hero{
    min-height:274px!important;
  }
  .home .hero-inner{
    min-height:274px!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:12px!important;
    padding:20px 16px 38px!important;
    text-align:center!important;
  }
  .home .hero h1{
    max-width:100%!important;
    font-size:25px!important;
    text-align:center!important;
  }
  .quiz-hero-visual{
    width:122px;
    height:122px;
    border-radius:27px;
    transform:none;
  }
}


/* Surface unique, sans arrière-plan superposé */
.home{
  min-height:100dvh!important;
  background:#fff!important;
}
.home::before,
.home::after,
.home .hero{
  display:none!important;
}

.home .content,
.home .home-surface{
  width:100%!important;
  max-width:900px!important;
  min-height:100dvh!important;
  margin:0 auto!important;
  padding:0!important;
  background:#fff!important;
}

.home .journey-card{
  width:100%!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:22px 20px 38px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Title and mascot are part of the same surface that contains the quizzes */
.quiz-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:18px;
  align-items:center;
  padding:10px 2px 22px;
  border-bottom:1px solid #ebebeb;
}
.quiz-intro-copy{min-width:0}
.quiz-kicker{
  display:block;
  margin-bottom:7px;
  color:#06801e;
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.17em;
}
.quiz-intro h1{
  margin:0;
  max-width:520px;
  color:#171717;
  font-size:30px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.045em;
}
.quiz-intro-visual{
  width:132px;
  height:132px;
  justify-self:end;
  overflow:hidden;
  border-radius:28px;
  border:1px solid #e6e6e6;
  background:#fff;
}
.quiz-intro-visual .quiz-mascot{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.home .journey-head{
  margin:18px 0 14px!important;
  padding:0 2px 13px!important;
  border-bottom:1px solid #ececec!important;
}
.home .journey-head h2{color:#171717!important}

/* Keep only quiz cards as separate interactive elements */
.home .unified-test{
  background:#fff!important;
}

@media(max-width:680px){
  .home .content,
  .home .home-surface{
    max-width:none!important;
    min-height:100dvh!important;
  }
  .home .journey-card{
    min-height:100dvh!important;
    padding:16px 12px calc(28px + env(safe-area-inset-bottom))!important;
  }
  .quiz-intro{
    grid-template-columns:minmax(0,1fr) 92px;
    gap:11px;
    padding:7px 2px 17px;
  }
  .quiz-intro h1{
    font-size:23px;
    line-height:1.08;
  }
  .quiz-kicker{
    font-size:7.8px;
    margin-bottom:5px;
  }
  .quiz-intro-visual{
    width:92px;
    height:92px;
    border-radius:21px;
  }
  .home .journey-head{
    margin-top:15px!important;
  }
}

@media(max-width:390px){
  .home .journey-card{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .quiz-intro{
    grid-template-columns:minmax(0,1fr) 82px;
  }
  .quiz-intro h1{font-size:21px}
  .quiz-intro-visual{
    width:82px;
    height:82px;
    border-radius:19px;
  }
}


/* En-tête compact : image à gauche + titre */
.quiz-intro{
  display:grid!important;
  grid-template-columns:96px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  padding:8px 2px 17px!important;
  margin:0 0 12px!important;
  border-bottom:1px solid #ebebeb!important;
}
.quiz-intro-visual{
  width:96px!important;
  height:96px!important;
  justify-self:start!important;
  border-radius:22px!important;
  border:1px solid #e6e6e6!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(0,0,0,.06)!important;
}
.quiz-intro-visual .quiz-mascot{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.quiz-intro-copy{
  min-width:0!important;
}
.quiz-kicker{
  margin-bottom:5px!important;
  color:#737373!important;
  font-size:8px!important;
  letter-spacing:.15em!important;
}
.quiz-intro h1{
  margin:0!important;
  color:#171717!important;
  font-size:25px!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  text-align:left!important;
}
.home .path{
  padding-top:2px!important;
}

@media(max-width:680px){
  .quiz-intro{
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:11px!important;
    padding:7px 1px 14px!important;
    margin-bottom:9px!important;
  }
  .quiz-intro-visual{
    width:82px!important;
    height:82px!important;
    border-radius:19px!important;
  }
  .quiz-intro h1{
    font-size:21px!important;
    line-height:1.1!important;
  }
  .quiz-kicker{
    font-size:7px!important;
  }
}

@media(max-width:380px){
  .quiz-intro{
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .quiz-intro-visual{
    width:74px!important;
    height:74px!important;
    border-radius:17px!important;
  }
  .quiz-intro h1{
    font-size:19px!important;
  }
}

/* Account-specific latest result; hidden until an authenticated/local result exists. */
.account-result{margin:10px 2px 14px;padding:10px 12px;border:1px solid #e5e5e5;border-radius:15px;background:#f9f9f9;color:#06801e;font-size:12px;font-weight:850;line-height:1.35}
.account-result.hidden{display:none!important}

/* LearnHub (Codescandy, MIT) : police Geist auto-hébergée, mêmes métriques de repli que l’application. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist/geist-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist/geist-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans");size-adjust:101.4%;ascent-override:99.7%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback Android";src:local("Roboto");size-adjust:110.3%;ascent-override:91.6%;descent-override:27.2%;line-gap-override:0%}