:root { color-scheme: dark; --fond: #101418; --carte: #1a2027; --texte: #eef2f6; --doux: #8b97a5; --accent: #ff5a4f; --ok: #4cc38a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--texte); font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: grid; place-items: center; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.carte { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.sous-titre { margin: 0 0 18px; color: var(--doux); }
form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #2c3540; background: var(--carte); color: var(--texte); font-size: 17px; }
button[type=submit] { padding: 14px; border: 0; border-radius: 12px; background: var(--texte); color: var(--fond); font-size: 17px; font-weight: 600; }
.micro { width: 168px; height: 168px; border-radius: 50%; border: 0; background: var(--carte); display: grid; place-items: center;
  box-shadow: 0 0 0 6px #222a33; transition: transform .15s, background .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.micro svg { width: 64px; height: 64px; fill: var(--texte); }
.micro:active { transform: scale(.96); }
.micro.actif { background: var(--accent); box-shadow: 0 0 0 6px #ff5a4f55; animation: pouls 1.4s ease-in-out infinite; }
.micro:disabled { opacity: .5; }
@keyframes pouls { 50% { box-shadow: 0 0 0 18px #ff5a4f22; } }
.minuteur { font-variant-numeric: tabular-nums; font-size: 22px; min-height: 1.4em; }
.lien { background: none; border: 0; color: var(--doux); font-size: 16px; text-decoration: underline; }
.statut { min-height: 1.4em; margin: 0; color: var(--doux); }
.statut.ok { color: var(--ok); } .statut.ko, .erreur { color: var(--accent); }