:root{--vert:#1f6f4a;--texte:#1b1b1b;--fond:#fff;--discret:#5b5b5b;--ko:#b3261e;--ok:#1f6f4a;color:var(--texte);background:var(--fond);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--texte:#f1f1f1;--fond:#121212;--discret:#b5b5b5;--ok:#6fd3a0;--ko:#ff8a80}}*{box-sizing:border-box}body{background:var(--fond);margin:0}main{max-width:720px;margin:0 auto;padding:16px}header{justify-content:space-between;align-items:center;gap:12px;display:flex}h1{color:var(--ok);margin:8px 0}.reseau{border:1px solid;border-radius:999px;padding:4px 10px;font-size:.9rem}.en-ligne{color:var(--ok)}.hors-ligne{color:var(--ko)}.intro{color:var(--discret)}.controles{gap:12px;padding:0;list-style:none;display:grid}.controle{border:1px solid #8884;border-radius:10px;align-items:flex-start;gap:12px;padding:12px;display:flex}.controle small{color:var(--discret)}.icone{text-align:center;width:1.6rem;font-size:1.4rem}.ok .icone{color:var(--ok)}.ko .icone{color:var(--ko)}.bouton{background:var(--vert);color:#fff;cursor:pointer;border:0;border-radius:10px;width:100%;padding:14px;font-size:1rem}body[data-mode=terrain]{font-size:1.15rem}body[data-mode=terrain] .bouton{padding:22px;font-size:1.25rem}body[data-mode=terrain] .controle{padding:18px}body[data-mode=terrain] .icone{font-size:2rem}
