:root{--bleu:#0b3d91;--bleu-2:#1256d1;--rouge:#e1000f;--rouge-2:#ff3b3b;--accent:var(--bleu-2);--text:#2a2f3a;--text-soft:#5a6473;--heading:#10151f;--bg:#f3f6fb;--surface:#fff;--surface-2:#f7f9fc;--border:#e2e8f2;--ok:#2f9e44;--ok-bg:#e7f7ec;--ko:#e03131;--ko-bg:#fdecec;--locked:#9aa4ad;--shadow:0 8px 28px #102a5a1f;--radius:16px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#d7dce6;--text-soft:#9aa6b8;--heading:#f2f5fa;--bg:#0e1420;--surface:#172033;--surface-2:#1e293d;--border:#2a3750;--ok-bg:#113522;--ko-bg:#3a1414;--locked:#5b6577;--shadow:0 8px 28px #00000073}}*{box-sizing:border-box}body{margin:0}#root{width:100%;min-height:100svh}h1,h2,h3{color:var(--heading);font-weight:700;line-height:1.2}a{color:var(--bleu-2);text-decoration:none}a:hover{text-decoration:underline}.loading{text-align:center;color:var(--text-soft);padding:60px;font-size:18px}.center{text-align:center}.btn-primary{background:linear-gradient(135deg, var(--bleu-2), var(--bleu));color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:16px;font-weight:700;transition:transform .12s,box-shadow .12s;display:inline-flex;box-shadow:0 4px 14px #0b3d914d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #0b3d9161}.btn-primary:disabled{opacity:.6;cursor:default}.btn-primary.big{width:100%;margin-top:8px;padding:16px;font-size:17px}.btn-primary.small{border-radius:10px;padding:9px 14px;font-size:14px}.link-btn{color:var(--text-soft);cursor:pointer;font:inherit;background:0 0;border:none}.link-btn:hover{color:var(--rouge)}.page{max-width:1240px;margin:0 auto;padding:0 16px 60px}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 4px;display:flex}.brand{color:var(--heading);align-items:center;gap:8px;font-size:22px;font-weight:800;display:flex}.brand:hover{text-decoration:none}.brand-flag{font-size:26px}.brand-name{background:linear-gradient(90deg, var(--bleu), var(--rouge));color:#0000;-webkit-background-clip:text;background-clip:text}.header-user{align-items:center;gap:20px;display:flex}.xp-block{min-width:220px}.xp-top{align-items:center;gap:8px;font-size:14px;display:flex}.xp-top .avatar{font-size:20px}.xp-top .uname{color:var(--heading);font-weight:700}.xp-top .lvl{background:var(--bleu);color:#fff;border-radius:20px;margin-left:auto;padding:2px 8px;font-size:12px;font-weight:700}.xp-bar{background:var(--border);border-radius:20px;height:8px;margin:5px 0;overflow:hidden}.xp-bar.big{height:14px;margin:14px 0}.xp-fill{background:linear-gradient(90deg, var(--bleu-2), var(--rouge));border-radius:20px;height:100%;transition:width .5s}.rank{color:var(--text-soft);font-size:12px}.header-nav{align-items:center;gap:14px;font-size:15px;display:flex}.auth-screen{background:radial-gradient(circle at 20% 20%,#1256d124,#0000 40%),radial-gradient(circle at 80% 70%,#e1000f1f,#0000 40%);place-items:center;min-height:100svh;padding:20px;display:grid}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:440px;box-shadow:var(--shadow);padding:28px}.auth-hero{text-align:center;margin-bottom:18px}.auth-flag{font-size:52px}.auth-hero h1{margin:4px 0;font-size:30px}.auth-tag{color:var(--text-soft);margin:0;font-size:15px}.auth-tabs{background:var(--surface-2);border-radius:12px;gap:6px;margin-bottom:18px;padding:5px;display:flex}.auth-tabs button{cursor:pointer;color:var(--text-soft);background:0 0;border:none;border-radius:9px;flex:1;padding:10px;font-weight:600}.auth-tabs button.active{background:var(--surface);color:var(--heading);box-shadow:0 2px 8px #00000014}.auth-form{flex-direction:column;gap:14px;display:flex}.auth-form label{color:var(--text-soft);flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}input,select{font:inherit;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;outline:none;padding:11px 13px}input:focus,select:focus{border-color:var(--bleu-2);box-shadow:0 0 0 3px #1256d126}.avatar-picker{flex-direction:column;gap:8px;display:flex}.avatar-label{color:var(--text-soft);font-size:14px;font-weight:600}.avatar-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.avatar-grid button{border:2px solid var(--border);background:var(--surface-2);cursor:pointer;border-radius:12px;padding:8px;font-size:24px}.avatar-grid button.sel{border-color:var(--bleu-2);background:#1256d11f}.auth-error{background:var(--ko-bg);color:var(--ko);border-radius:10px;padding:10px 12px;font-size:14px}.map-intro{text-align:center;margin:10px 0 6px}.map-intro h1{margin:6px 0;font-size:30px}.map-sub{color:var(--text-soft);max-width:640px;margin:0 auto}.progress-line{align-items:center;gap:12px;max-width:520px;margin:16px auto 0;display:flex}.progress-track{background:var(--border);border-radius:20px;flex:1;height:12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--bleu-2), var(--rouge));height:100%;transition:width .5s}.progress-label{color:var(--text-soft);white-space:nowrap;font-size:13px;font-weight:700}.map-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:12px;padding:12px}.france-map{border-radius:12px;width:100%;height:auto;display:block}.map-legend{color:var(--text-soft);flex-wrap:wrap;justify-content:center;gap:16px;padding:12px 4px 4px;font-size:13px;display:flex}.map-legend span{align-items:center;gap:6px;display:inline-flex}.lg{border-radius:50%;width:14px;height:14px;display:inline-block}.dot-done{background:var(--ok)}.dot-open{background:var(--bleu-2)}.dot-locked{background:var(--locked)}.lg-note{font-style:italic}.marker{cursor:pointer}.marker .dot{stroke:#fff;stroke-width:2.5px;transition:r .15s}.marker .pin-icon{fill:#fff;pointer-events:none;font-size:13px;font-weight:800}.marker .pin-label{fill:#1c2a3a;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none;font-size:12px;font-weight:700}.marker.done .dot{fill:var(--ok)}.marker.open .dot{fill:var(--bleu-2)}.marker.locked .dot{fill:var(--locked)}.marker.locked .pin-icon{font-size:12px}.marker:hover .dot{r:16}.marker.sel .dot{stroke:var(--rouge);stroke-width:4px}.marker .pulse{fill:var(--bleu-2);opacity:.35;transform-origin:50%;animation:1.8s ease-out infinite pulse}@keyframes pulse{0%{r:13;opacity:.5}to{r:26;opacity:0}}.online-badge{pointer-events:none}.online-badge .online-dot{fill:var(--ok);stroke:#fff;stroke-width:2px}.online-badge .online-count{fill:#fff;font-size:10px;font-weight:800}.lg-online{background:var(--ok)}.map-online{color:var(--ok);align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:600;display:inline-flex}.online-live{background:var(--ok);border-radius:50%;width:10px;height:10px;animation:1.6s ease-out infinite live;display:inline-block}@keyframes live{0%{box-shadow:0 0 #2f9e448c}to{box-shadow:0 0 0 10px #2f9e4400}}@media (prefers-color-scheme:dark){.marker .pin-label{fill:#eaf1fb;stroke:#0e1420}}.popup-backdrop{z-index:50;background:#060e1e8c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.popup{background:var(--surface);border-radius:var(--radius);width:100%;max-width:420px;box-shadow:var(--shadow);padding:24px;animation:.18s pop;position:relative}@keyframes pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.popup-close{color:var(--text-soft);cursor:pointer;background:0 0;border:none;font-size:28px;line-height:1;position:absolute;top:10px;right:12px}.popup-region{text-transform:uppercase;letter-spacing:1px;color:var(--bleu-2);font-size:11px;font-weight:700}.popup-head h2{margin:4px 0}.popup-city{color:var(--text-soft);font-size:14px}.popup-diff{flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0;display:flex}.flags .flag.off{filter:grayscale();opacity:.3}.badge{border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700}.badge.done{background:var(--ok-bg);color:var(--ok)}.badge.open{color:var(--bleu-2);background:#1256d11f}.badge.locked{background:var(--surface-2);color:var(--locked)}.popup-summary{color:var(--text);margin:6px 0 14px;font-size:15px;line-height:1.55}.popup-online{background:var(--ok-bg);color:var(--ok);border-radius:10px;align-items:center;gap:8px;margin-bottom:16px;padding:9px 12px;font-size:14px;font-weight:600;display:flex}.popup-locked{background:var(--surface-2);border-radius:12px;padding:12px 14px}.lock-title{margin:0 0 6px;font-weight:700}.popup-locked ul{margin:0;padding-left:20px}.stage-top{padding-top:8px}.back-link{font-size:14px}.stage-title{margin-top:8px}.stage-region{text-transform:uppercase;letter-spacing:1px;color:var(--bleu-2);font-size:12px;font-weight:700}.stage-title h1{margin:4px 0;font-size:30px}.stage-meta{align-items:center;gap:12px;display:flex}.result-banner{border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:18px;margin:16px 0;padding:18px 22px;display:flex}.result-banner.ok{background:var(--ok-bg);border:1px solid var(--ok)}.result-banner.ko{background:var(--ko-bg);border:1px solid var(--ko)}.result-score{font-size:40px;font-weight:800}.result-banner.ok .result-score{color:var(--ok)}.result-banner.ko .result-score{color:var(--ko)}.result-text{flex:1;min-width:200px}.result-sub{color:var(--text-soft);margin-top:4px;font-size:14px}.stage-layout{grid-template-columns:1fr 340px;align-items:start;gap:22px;margin-top:18px;display:grid}@media (width<=900px){.stage-layout{grid-template-columns:1fr}}.guide,.exercises{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;padding:22px}.guide h2,.exercises h2{margin-top:0}.guide-intro{font-size:15px}.guide-intro-fr{color:var(--text-soft);font-style:italic}.guide-grid{grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;display:grid}@media (width<=600px){.guide-grid{grid-template-columns:1fr}}.guide-card{background:var(--surface-2);border-radius:12px;padding:14px 16px}.guide-card h3{color:var(--bleu-2);margin:0 0 10px;font-size:16px}.guide-card.vocab ul{margin:0;padding:0;list-style:none}.guide-card.vocab li{border-bottom:1px dashed var(--border);justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;display:flex}.v-fr{color:var(--heading);font-weight:700}.v-en{color:var(--text-soft)}.guide-card.grammar p{margin:0;font-size:14px}.guide-tip{border-left:4px solid var(--rouge);background:#e1000f14;border-radius:8px;padding:12px 14px;font-size:14px}.exercise{border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:16px 18px;transition:border-color .2s}.exercise.ex-correct{border-color:var(--ok);background:var(--ok-bg)}.exercise.ex-wrong{border-color:var(--ko);background:var(--ko-bg)}.ex-num{text-transform:uppercase;letter-spacing:1px;color:var(--text-soft);font-size:12px;font-weight:700}.ex-prompt{color:var(--heading);margin:4px 0;font-size:17px;font-weight:600}.ex-prompt-en{color:var(--text-soft);font-size:13px;font-style:italic}.ex-hint{color:var(--bleu-2);margin-top:6px;font-size:13px}.ex-choices{flex-direction:column;gap:8px;margin-top:12px;display:flex}.ex-choice{border:1px solid var(--border);cursor:pointer;background:var(--surface-2);border-radius:10px;align-items:center;gap:10px;padding:10px 12px;display:flex}.ex-choice.checked{border-color:var(--bleu-2);background:#1256d11a}.ex-input{width:100%;margin-top:12px}.ex-order{margin-top:12px}.order-line{border:2px dashed var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;min-height:46px;padding:8px;display:flex}.order-placeholder{color:var(--text-soft);padding:0 6px;font-size:14px;font-style:italic}.order-bank{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.order-token{font:inherit;border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;padding:8px 14px;font-weight:600}.order-token.placed{background:var(--bleu);color:#fff;border-color:var(--bleu)}.order-token:hover:not(:disabled){border-color:var(--bleu-2)}.ex-match{flex-direction:column;gap:10px;margin-top:12px;display:flex}.match-row{align-items:center;gap:10px;display:flex}.match-fr{min-width:120px;font-weight:700}.match-arrow{color:var(--text-soft)}.match-select{flex:1}.ex-verdict{margin-top:10px;font-size:14px;font-weight:600}.ex-verdict.ok{color:var(--ok)}.ex-verdict.wrong{color:var(--ko)}.chat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;max-height:640px;display:flex;position:sticky;top:12px;overflow:hidden}.chat-head{border-bottom:1px solid var(--border);padding:14px 16px}.chat-head h3{margin:0 0 8px;font-size:15px}.players{flex-wrap:wrap;gap:6px;display:flex}.no-players{color:var(--text-soft);font-size:13px;font-style:italic}.player-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}.chat-messages{flex-direction:column;flex:1;gap:12px;min-height:220px;padding:14px;display:flex;overflow-y:auto}.chat-empty{color:var(--text-soft);text-align:center;margin:auto;font-size:13px}.msg{align-items:flex-start;gap:8px;display:flex}.msg.mine{flex-direction:row-reverse}.msg-avatar{font-size:20px}.msg-body{background:var(--surface-2);border-radius:12px;flex-direction:column;max-width:80%;padding:7px 11px;display:flex}.msg.mine .msg-body{background:#1256d11f}.msg-author{color:var(--bleu-2);font-size:11px;font-weight:700}.msg-text{word-break:break-word;font-size:14px}.chat-form{border-top:1px solid var(--border);gap:8px;padding:12px;display:flex}.chat-form input{flex:1}.profile-wrap{grid-template-columns:360px 1fr;align-items:start;gap:22px;margin-top:12px;display:grid}@media (width<=820px){.profile-wrap{grid-template-columns:1fr}}.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:26px}.profile-avatar{font-size:60px}.profile-card h1{margin:6px 0 2px}.profile-rank{color:var(--bleu-2);font-weight:700}.profile-level{color:var(--text-soft);font-size:14px}.profile-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0;display:grid}.profile-stats div{background:var(--surface-2);border-radius:12px;flex-direction:column;padding:12px 6px;display:flex}.profile-stats strong{color:var(--heading);font-size:22px}.profile-stats span{color:var(--text-soft);font-size:12px}.leaderboard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.leaderboard h2{margin-top:0}.leader-list{margin:0;padding:0;list-style:none}.leader-list li{border-radius:12px;align-items:center;gap:12px;padding:11px 12px;display:flex}.leader-list li:nth-child(odd){background:var(--surface-2)}.leader-list li.me{outline:2px solid var(--bleu-2)}.rank-pos{width:26px;color:var(--text-soft);font-weight:800}.rank-av{font-size:22px}.rank-name{flex:1;font-weight:700}.rank-lvl{color:var(--bleu-2);font-size:13px;font-weight:700}.rank-xp{color:var(--text-soft);font-size:13px}