/* Tokens : DESIGN.md */
:root { --bg: #0f1115; --surface: #181b22; --ink: #e8eaed; --muted: #9aa0a6; --accent: #2ecc71; --danger: #e5534b; color-scheme: dark light; }
@media (prefers-color-scheme: light) { :root { --bg: #f6f7f9; --surface: #ffffff; --ink: #15171c; --muted: #5f6368; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
       background: var(--bg); color: var(--ink); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { width: 100%; max-width: 420px; }
h1 { font-size: 21px; font-weight: 600; margin: 0 0 24px; }
.bouton { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; border-radius: 12px;
          background: var(--accent); color: #0f1115; font-weight: 600; text-decoration: none; transition: background-color 150ms ease-out; }
.bouton:active { background: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.note { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.note a { color: inherit; }
.carte { background: var(--surface); border-radius: 12px; padding: 16px; margin-top: 16px; }
code { display: block; margin-top: 8px; font: 14px/1.4 ui-monospace, monospace; color: var(--muted); word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }