@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#f4f1e8; --muted:#a3b0ad; --bg:#0b1620; --panel:#10232c; --panel-2:#14323a; --line:rgba(222,241,233,.14); --green:#b8f34a; --green-dark:#7ea72e; --coral:#ff715f; --gold:#ffd36a; --blue:#7ad7d1; --shadow:0 24px 70px rgba(0,0,0,.3); --display:'Space Grotesk',Arial,sans-serif; --body:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font-family:var(--body); font-size:16px; line-height:1.5; overflow-x:hidden; }
button, a { font:inherit; }
button { cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
[hidden] { display:none !important; }
.noise { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.pitch-lines { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045; overflow:hidden; }
.pitch-lines span { position:absolute; border:1px solid var(--green); border-radius:50%; width:70vw; height:70vw; left:-30vw; top:12vh; }
.pitch-lines span:nth-child(2) { width:32vw; height:32vw; left:auto; right:-14vw; top:52vh; }
.pitch-lines span:nth-child(3) { width:1px; height:100vh; left:66%; top:0; border-radius:0; border-width:0 1px 0 0; transform:rotate(17deg); }
.topbar { position:relative; z-index:5; height:82px; display:flex; justify-content:space-between; align-items:center; max-width:1440px; margin:0 auto; padding:0 5vw; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand-mark { width:38px; height:38px; display:flex; align-items:center; justify-content:center; gap:1px; border:1px solid rgba(184,243,74,.7); border-radius:50%; color:var(--green); font-family:var(--display); font-size:12px; font-weight:700; position:relative; transform:rotate(-11deg); }
.brand-mark i { width:15px; height:1px; background:var(--green); transform:rotate(-30deg); position:absolute; }
.brand-mark span:first-child { transform:translate(-3px,-4px); }.brand-mark span:last-child { transform:translate(3px,4px); }
.brand-name { font-family:var(--display); font-size:12px; letter-spacing:.15em; }.brand-name strong { font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:24px; }.live-dot { color:var(--muted); font:600 10px var(--display); letter-spacing:.14em; }.live-dot i { width:7px; height:7px; display:inline-block; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(184,243,74,.12); animation:pulse 2s infinite; }.sound-toggle { color:var(--muted); border:0; background:transparent; display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.08em; }.sound-toggle b { font:600 10px var(--display); }.sound-toggle span { font-size:14px; color:var(--green); }
main { position:relative; z-index:1; }.screen { max-width:1440px; margin:0 auto; padding:7.5vh 5vw 5vh; min-height:calc(100vh - 82px); }.start-screen { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(350px,.75fr); grid-template-rows:1fr auto; column-gap:8vw; align-items:center; }.hero-copy { padding:4vh 0 3vh; }.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 24px; color:var(--green); font:600 11px var(--display); letter-spacing:.14em; }.eyebrow em { color:#5d796c; font-style:normal; }.hero-copy h1, .results-header h2 { margin:0; max-width:780px; font:700 clamp(3.4rem,7.3vw,8.1rem)/.91 var(--display); letter-spacing:-.075em; }.hero-copy h1 span, .results-header h2 span { color:var(--green); }.hero-lede { max-width:530px; margin:34px 0 28px; color:#b3c0bb; font-size:18px; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:28px; }.button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:52px; padding:13px 19px; border:1px solid transparent; color:var(--ink); background:transparent; font:600 12px var(--display); letter-spacing:.04em; transition:transform .2s, background .2s, border-color .2s, color .2s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--green); color:#0c171d; border-color:var(--green); box-shadow:0 10px 24px rgba(184,243,74,.13); }.button-primary:hover { background:#d0ff73; }.button-primary b { font-size:18px; line-height:0; }.button-large { min-height:60px; padding:15px 22px; font-size:13px; }.button-secondary { border-color:var(--line); color:var(--ink); }.button-secondary:hover { border-color:var(--green); color:var(--green); }.text-link { color:var(--muted); text-decoration:none; font-size:13px; }.text-link:hover { color:var(--green); }.text-link span { color:var(--green); margin-left:5px; }.hero-meta { display:flex; margin-top:70px; gap:34px; }.hero-meta div { padding-right:30px; border-right:1px solid var(--line); }.hero-meta div:last-child { border:0; }.hero-meta strong { display:block; color:var(--ink); font:600 26px var(--display); }.hero-meta span { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.launch-panel { align-self:center; min-height:460px; padding:22px; background:linear-gradient(145deg,rgba(21,52,60,.94),rgba(12,28,37,.98)); border:1px solid rgba(184,243,74,.19); box-shadow:var(--shadow); position:relative; overflow:hidden; }.launch-panel::after { content:''; position:absolute; width:320px; height:320px; right:-170px; top:-150px; border:1px solid rgba(184,243,74,.14); border-radius:50%; }.panel-topline, .section-label, .game-context { display:flex; justify-content:space-between; color:var(--muted); font:600 10px var(--display); letter-spacing:.13em; }.scoreboard-visual { margin-top:78px; }.scoreboard-label { color:var(--green); font:600 10px var(--display); letter-spacing:.16em; }.scoreboard-score { display:flex; align-items:center; gap:18px; margin:10px 0 3px; color:var(--ink); font:600 clamp(4rem,9vw,6.4rem)/1 var(--display); letter-spacing:-.1em; }.scoreboard-score i { color:var(--green-dark); font-style:normal; font-size:.45em; letter-spacing:0; }.scoreboard-teams { display:flex; justify-content:space-between; color:var(--muted); font:600 9px var(--display); letter-spacing:.1em; }.scoreboard-line { margin-top:28px; height:1px; background:var(--line); }.scoreboard-line span { display:block; width:26%; height:1px; background:var(--green); }.scoreboard-visual p { color:#bdcac5; font-size:14px; line-height:1.45; }.best-score { display:flex; justify-content:space-between; align-items:center; margin-top:80px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.best-score span { color:var(--muted); font:600 10px var(--display); letter-spacing:.13em; }.best-score strong { color:var(--green); font:600 20px var(--display); }.panel-foot { display:flex; gap:11px; margin-top:21px; color:#8f9f99; font-size:11px; line-height:1.4; }.mini-ball { color:var(--green); font-size:20px; }.rule-strip { grid-column:1 / -1; display:grid; grid-template-columns:auto auto 1fr auto; gap:18px; align-items:center; margin-top:5vh; padding:21px 0; border-top:1px solid var(--line); }.rule-number { color:var(--green); font:600 12px var(--display); }.rule-strip strong { font:600 12px var(--display); letter-spacing:.08em; text-transform:uppercase; }.rule-strip p { max-width:600px; margin:0; color:var(--muted); font-size:12px; }.rule-arrow { color:var(--green); font-size:21px; }
/* Game */
.game-screen { padding-top:34px; }.game-header { display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:end; gap:30px; padding-bottom:27px; border-bottom:1px solid var(--line); }.game-context { display:block; }.match-tag { display:block; margin-bottom:9px; color:var(--green); font-size:10px; }.round-progress { text-align:center; }.round-progress > div { display:flex; gap:8px; justify-content:center; margin-bottom:10px; }.progress-dot { height:4px; width:31px; background:#29404a; transition:background .2s; }.progress-dot.done { background:var(--green-dark); }.progress-dot.active { background:var(--green); box-shadow:0 0 10px rgba(184,243,74,.35); }.round-progress > span { color:var(--muted); font:600 10px var(--display); letter-spacing:.14em; }.game-score { text-align:right; }.game-score span { display:block; color:var(--muted); font:600 10px var(--display); letter-spacing:.14em; }.game-score strong { display:block; color:var(--green); font:600 32px var(--display); letter-spacing:-.04em; }.game-score small { color:var(--muted); font-size:11px; }.game-layout { display:grid; grid-template-columns:150px minmax(0,760px); gap:7vw; justify-content:center; padding:7vh 0 0; }.game-rail { padding-top:9px; }.rail-clock { display:flex; align-items:baseline; gap:7px; }.clock-icon { color:var(--green); font-size:25px; }.rail-clock strong { color:var(--ink); font:600 36px var(--display); letter-spacing:-.08em; }.rail-clock > span:last-child { color:var(--muted); font:600 9px var(--display); }.timer-track { height:3px; margin:15px 0 34px; background:#223b42; }.timer-track span { display:block; width:100%; height:100%; background:var(--green); transform-origin:left; transition:width 1s linear, background .25s; }.rail-note { display:flex; gap:12px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.note-pin { color:var(--green); }.rail-note p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.rail-legend { display:grid; gap:8px; margin-top:30px; color:#738983; font-size:10px; }.legend-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; }.legend-dot.correct { background:var(--green); }.legend-dot.wrong { background:var(--coral); }.question-zone { max-width:760px; min-width:0; }.question-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.question-index, .difficulty { color:var(--green); font:600 10px var(--display); letter-spacing:.14em; }.difficulty { color:var(--muted); }.question-zone h2 { max-width:710px; margin:0; font:600 clamp(2rem,4.2vw,4rem)/1.05 var(--display); letter-spacing:-.065em; }.question-helper { min-height:27px; margin:17px 0 24px; color:var(--muted); font-size:14px; }.game-content { min-height:150px; }.option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.option-button { min-height:72px; padding:14px 17px; border:1px solid var(--line); color:var(--ink); background:rgba(17,44,53,.55); text-align:left; transition:transform .18s, border .18s, background .18s; }.option-button:hover { transform:translateY(-2px); border-color:var(--green); background:rgba(45,78,69,.68); }.option-key { display:block; margin-bottom:8px; color:var(--green); font:600 10px var(--display); }.option-text { font-size:14px; }.option-button.selected { border-color:var(--green); background:rgba(184,243,74,.12); }.option-button.correct { border-color:var(--green); background:rgba(184,243,74,.18); }.option-button.wrong { border-color:var(--coral); background:rgba(255,113,95,.13); }.option-button:disabled { cursor:default; }.question-actions { display:flex; gap:10px; min-height:64px; align-items:center; margin-top:14px; }.validate-button { min-width:190px; }.feedback { display:flex; align-items:center; gap:14px; min-height:82px; padding:15px 17px; margin-top:16px; border:1px solid var(--line); background:rgba(15,36,44,.8); animation:feedback-in .3s ease both; }.feedback.good { border-color:rgba(184,243,74,.45); }.feedback.bad { border-color:rgba(255,113,95,.45); }.feedback-icon { width:30px; height:30px; display:grid; place-items:center; flex:0 0 30px; border-radius:50%; background:var(--green); color:var(--bg); font-weight:700; }.bad .feedback-icon { background:var(--coral); }.feedback strong { font:600 14px var(--display); }.feedback p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }.feedback-points { margin-left:auto; color:var(--green); font:600 17px var(--display); white-space:nowrap; }.bad .feedback-points { color:var(--coral); }.game-live { height:0; margin:0; overflow:hidden; }
/* ranking and memory */
.ranking-list { display:grid; gap:8px; max-width:580px; }.ranking-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); background:rgba(17,44,53,.55); }.ranking-number { width:24px; color:var(--green); font:600 13px var(--display); }.ranking-label { flex:1; font-size:14px; }.move-buttons { display:flex; gap:5px; }.move-button { width:30px; height:30px; padding:0; color:var(--muted); border:1px solid var(--line); background:transparent; }.move-button:hover:not(:disabled) { color:var(--green); border-color:var(--green); }.move-button:disabled { opacity:.25; cursor:not-allowed; }.memory-wrap { position:relative; max-width:570px; min-height:152px; padding:24px; border:1px solid rgba(184,243,74,.25); background:linear-gradient(125deg,rgba(34,68,67,.48),rgba(14,34,43,.75)); }.memory-status { color:var(--green); font:600 10px var(--display); letter-spacing:.13em; }.memory-sequence { display:flex; align-items:center; gap:12px; min-height:64px; margin-top:12px; }.memory-token { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(184,243,74,.45); color:var(--ink); background:rgba(184,243,74,.1); font-size:24px; animation:token-in .35s ease both; }.memory-token.hidden-token { color:transparent; background:#15373b; border-color:#28615c; position:relative; }.memory-token.hidden-token::after { content:'?'; color:var(--green); font:600 17px var(--display); }.memory-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }.memory-option { min-width:55px; height:43px; padding:0 14px; color:var(--ink); border:1px solid var(--line); background:rgba(13,31,39,.8); font-size:19px; }.memory-option:hover, .memory-option.used { border-color:var(--green); background:rgba(184,243,74,.12); }.memory-selection { display:flex; min-height:30px; gap:6px; margin-top:14px; color:var(--green); font:600 12px var(--display); letter-spacing:.12em; }
/* Results */
.results-screen { padding-top:9vh; }.results-header h2 { font-size:clamp(3rem,6vw,6.6rem); }.results-header > p:last-child { color:var(--muted); font-size:16px; }.results-layout { display:grid; grid-template-columns:minmax(260px,.7fr) 1.3fr; gap:24px; margin-top:55px; }.results-score-card { padding:28px; background:linear-gradient(145deg,rgba(38,71,57,.78),rgba(13,32,38,.92)); border:1px solid rgba(184,243,74,.3); }.results-card-label { color:var(--green); font:600 10px var(--display); letter-spacing:.14em; }.results-score-card > strong { display:block; margin:18px 0 1px; font:600 clamp(4rem,8vw,7rem)/1 var(--display); letter-spacing:-.1em; }.results-rank { color:var(--muted); font:600 10px var(--display); letter-spacing:.1em; }.result-pips { display:flex; gap:6px; margin:33px 0 29px; }.result-pips i { width:35px; height:4px; background:#38524c; }.results-score-card .button { width:100%; }.results-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }.results-stat { display:flex; flex-direction:column; justify-content:center; min-height:180px; padding:22px; background:rgba(15,35,43,.7); }.results-stat span { color:var(--muted); font:600 10px var(--display); letter-spacing:.13em; }.results-stat strong { margin-top:16px; color:var(--green); font:600 clamp(2rem,4vw,3.5rem) var(--display); letter-spacing:-.08em; }.results-stat small { color:#83958e; font-size:11px; }.category-breakdown, .leaderboard-block { margin-top:62px; }.section-label { align-items:center; padding-bottom:13px; border-bottom:1px solid var(--line); }.section-label small { color:#71847e; font-size:9px; }.category-results { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }.category-card { min-height:125px; padding:17px; background:rgba(14,34,41,.7); }.category-card span { display:block; color:var(--muted); font:600 10px var(--display); letter-spacing:.1em; }.category-card strong { display:block; margin:12px 0 5px; color:var(--ink); font:600 26px var(--display); }.category-card small { color:#7d9189; font-size:11px; }.leaderboard { display:grid; gap:1px; margin-top:1px; background:var(--line); }.leader-row { display:grid; grid-template-columns:40px 1fr auto; gap:13px; align-items:center; padding:14px 17px; background:rgba(14,34,41,.7); }.leader-row > span:first-child { color:var(--green); font:600 12px var(--display); }.leader-row strong { font:600 13px var(--display); }.leader-row small { color:var(--muted); }.leader-row b { color:var(--green); font:600 17px var(--display); }
footer { position:relative; z-index:1; display:flex; justify-content:space-between; max-width:1440px; margin:0 auto; padding:25px 5vw 30px; color:#61736d; border-top:1px solid var(--line); font:600 9px var(--display); letter-spacing:.12em; }
@keyframes pulse { 50% { opacity:.5; transform:scale(.75); } }@keyframes feedback-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }@keyframes token-in { from { opacity:0; transform:scale(.7) translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .start-screen { grid-template-columns:1fr; }.launch-panel { max-width:570px; width:100%; margin:2vh 0 0 auto; min-height:auto; }.scoreboard-visual { margin-top:45px; }.best-score { margin-top:38px; }.rule-strip { margin-top:7vh; }.game-layout { gap:4vw; }.game-header { grid-template-columns:1fr 1fr; }.round-progress { order:3; grid-column:1/-1; }.game-score { text-align:right; }.category-results { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .topbar { height:70px; padding:0 20px; }.brand-name { font-size:10px; }.live-dot { display:none; }.screen { padding:35px 20px 30px; min-height:calc(100vh - 70px); }.start-screen { display:block; }.hero-copy { padding-top:4vh; }.hero-copy h1 { font-size:clamp(3rem,16vw,5.4rem); }.eyebrow { gap:6px; font-size:8px; }.hero-lede { margin-top:25px; font-size:15px; }.hero-actions { display:block; }.button-large { width:100%; }.text-link { display:block; margin-top:19px; text-align:center; }.hero-meta { margin-top:45px; gap:18px; }.hero-meta div { padding-right:17px; }.launch-panel { margin-top:48px; }.scoreboard-visual { margin-top:38px; }.scoreboard-score { font-size:4.6rem; }.rule-strip { grid-template-columns:auto 1fr auto; gap:11px; margin-top:42px; }.rule-strip p { grid-column:2 / -1; }.game-screen { padding-top:26px; }.game-header { gap:15px; }.game-score strong { font-size:25px; }.round-progress > div { gap:3px; }.progress-dot { width:19px; }.game-layout { display:block; padding-top:36px; }.game-rail { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; margin-bottom:34px; }.timer-track { margin:0; }.rail-note, .rail-legend { display:none; }.question-zone h2 { font-size:2.2rem; }.question-helper { font-size:13px; }.option-grid { grid-template-columns:1fr; }.option-button { min-height:62px; }.feedback { align-items:flex-start; }.feedback-points { font-size:15px; }.results-screen { padding-top:50px; }.results-header h2 { font-size:3.6rem; }.results-layout { grid-template-columns:1fr; margin-top:35px; }.results-stats { grid-template-columns:1fr; }.results-stat { min-height:110px; }.results-stat strong { margin-top:5px; }.category-results { grid-template-columns:1fr 1fr; }.section-label { align-items:flex-start; gap:10px; flex-direction:column; }.leader-row { grid-template-columns:28px 1fr auto; padding:12px; }.leader-row small { display:block; font-size:10px; }footer { padding:22px 20px; font-size:8px; }footer span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* Correction ciblée : les boutons restent toujours des cibles de clic */
button { pointer-events:auto; cursor:pointer; }
button:disabled { cursor:not-allowed; }