:root { --bg: #0a0a0a; --fg: #f0f0f0; --accent: #e94560; --green: #00e676; --red: #ff1744; --amber: #ffab00; }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; -webkit-tap-highlight-color:transparent; touch-action:none; }
.screen { display:none; position:absolute; inset:0; flex-direction:column; }
.screen.active { display:flex; }
/* Config */
.config-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:2rem; }
.config-wrap h1 { font-size:1.5rem; letter-spacing:.1em; }
.speed-entry { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.input-row { display:flex; align-items:center; gap:1rem; }
#target-speed { font-size:3rem; width:120px; text-align:center; background:#1c1c1c; color:var(--fg); border:2px solid #333; border-radius:8px; }
.speed-btn { font-size:2rem; width:50px; height:50px; background:#1c1c1c; color:var(--fg); border:1px solid #333; border-radius:8px; }
.gps-status { display:flex; align-items:center; gap:.5rem; font-size:1rem; color:#666; margin-top:-1rem; }
.gps-dot { width:10px; height:10px; border-radius:50%; background:#ff9800; animation: pulse 1.5s infinite; }
.gps-dot.good { background:var(--green); animation:none; }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
.primary-btn { font-size:1.5rem; padding:1rem 4rem; background:var(--accent); color:#fff; border:none; border-radius:12px; font-weight:700; letter-spacing:.05em; }
.primary-btn:disabled { background:#333; color:#666; cursor:not-allowed; }
/* Timer */
#screen-timer, .top-bar, .bottom-bar, .top-bar * { touch-action:none; }
.top-bar { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:.3rem 1.5rem .5rem; border-bottom:1px solid #222; }
.stat { display:flex; align-items:baseline; gap:.3rem; }
.stat-label { font-size:.8rem; color:#666; }
.stat-value { font-size:2.4rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.stat-unit { font-size:.8rem; color:#666; }
.cursor-area { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; }
/* Le cadran doit rester lisible d'un coup d'œil au volant : il occupe la
   largeur disponible et sa hauteur en découle. */
.gauge { width:min(100%, 420px); height:min(38vh, 240px); }
.advice { font-size:2rem; font-weight:800; letter-spacing:.04em; margin-top:.4rem; text-align:center; }
.advice-dev { font-size:1.1rem; font-variant-numeric:tabular-nums; color:#a1a1aa; margin-top:.1rem; }
/* Couleur = amplitude de l'écart, jamais son signe. Le sens est porté par le
   texte de la consigne et par la position de l'aiguille. */
.advice.dev-ok { color:var(--green); }
.advice.dev-warn { color:var(--amber); }
.advice.dev-bad { color:var(--red); }
.advice.dev-none { color:#52525b; }
.speeds-compare { display:flex; justify-content:space-between; width:100%; padding-top:1.5rem; }
.instant, .target { text-align:center; }
.instant .label, .target .label { font-size:.65rem; color:#666; display:block; }
.instant .value { font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg); }
.instant .value-unit, .target .value-unit { font-size:.65rem; color:#666; }
.target .value { font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); }
.bottom-bar { display:flex; justify-content:space-between; align-items:center; padding:.3rem 1.5rem .5rem; border-top:1px solid #222; }
.distance { font-size:1.1rem; font-variant-numeric:tabular-nums; color:#888; }
.stop-btn { width:70px; height:70px; border-radius:50%; background:var(--red); color:#fff; border:none; font-size:.9rem; font-weight:700; letter-spacing:.05em; }
/* Recap */
.recap-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1.5rem; }
.recap-wrap h2 { font-size:1.5rem; letter-spacing:.1em; }
.recap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; text-align:center; }
.recap-item { display:flex; flex-direction:column; gap:.25rem; }
.recap-item .label { font-size:.75rem; color:#666; }
.recap-item .value { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.recap-item .value.recap-avg-speed { color:var(--accent); }
.recap-item .value.dev-ok { color:var(--green); }
.recap-item .value.dev-warn { color:var(--amber); }
.recap-item .value.dev-bad { color:var(--red); }