@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  --fond: #f1f5f9;
  --surface: #ffffff;
  --texte: #0b1220;
  --doux: #51606b;
  --accent: #0e7490;
  --accent-texte: #ffffff;
  --ok: #18794e;
  --alerte: #b42318;
  --bord: #d7dbe2;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #101827;
    --surface: #1a2333;
    --texte: #f5f5f4;
    --doux: #94a3b8;
    --accent: #22d3ee;
    --accent-texte: #0b1220;
    --ok: #3dd68c;
    --alerte: #ff8a80;
    --bord: #263042;
  }
}

* { box-sizing: border-box; accent-color: var(--accent); }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 18px/1.4 "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.etat {
  font-weight: 600; padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--bord); color: var(--doux);
}
.etat.ecoute { color: var(--ok); border-color: var(--ok); }
.etat.ecoute::before { content: "● "; animation: pulse 1.2s infinite; }
.etat.erreur { color: var(--alerte); border-color: var(--alerte); }
@keyframes pulse { 50% { opacity: .3; } }
.icone {
  font-size: 26px; width: 48px; height: 48px; border-radius: 12px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord);
}

.reglages {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 12px;
}
.reglages fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.reglages legend { font-weight: 600; margin-bottom: 4px; }
.reglages label { display: block; padding: 6px 0; }
.reglages .ligne { display: flex; gap: 10px; align-items: center; }
.reglages input[type=range] { flex: 1; }

main { flex: 1; overflow-y: auto; }
.entendu { color: var(--doux); font-style: italic; min-height: 1.4em; margin: 4px 0 0; overflow-wrap: anywhere; }
.reponse { text-align: center; padding: 8px 0 16px; }
.cp {
  font: 700 clamp(64px, 24vw, 160px)/1 ui-monospace, "Roboto Mono", monospace;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.commune { font-size: 22px; font-weight: 600; margin-top: 8px; overflow-wrap: anywhere; }
.commune small { display: block; font-size: 16px; font-weight: 400; color: var(--doux); }

.choix { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.choix button {
  width: 100%; min-height: 72px; padding: 10px 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  background: var(--surface); color: var(--texte); border: 2px solid var(--bord); font-size: 19px;
}
.choix button:active, .choix button[aria-pressed=true] { border-color: var(--accent); }
.choix .nom { font-weight: 600; overflow-wrap: anywhere; }
.choix .nom small { display: block; font-weight: 400; font-size: 15px; color: var(--doux); }
.choix .code { font: 700 26px ui-monospace, monospace; white-space: nowrap; }

.historique { margin: 20px 0; color: var(--doux); }
.historique summary { padding: 8px 0; }
.historique ul { list-style: none; padding: 0; margin: 0; }
.historique li { padding: 6px 0; border-bottom: 1px solid var(--bord); display: flex; justify-content: space-between; gap: 8px; }
.historique b { font-family: ui-monospace, monospace; color: var(--texte); }

footer { padding: 12px 0 16px; display: grid; gap: 10px; }
.saisie input {
  width: 100%; font-size: 18px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
}
.micro {
  min-height: 64px; border-radius: 16px; border: 0; font-size: 20px; font-weight: 700;
  background: var(--accent); color: var(--accent-texte);
}
.micro.actif { background: var(--surface); color: var(--texte); border: 2px solid var(--bord); }
.micro:disabled { opacity: .5; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.bandeau-voix { font-size: 13px; color: var(--doux); margin: 10px 0 0; line-height: 1.4; }
.bandeau-voix a { color: var(--accent); }
.pied-legal { text-align: center; font-size: 12px; color: var(--doux); padding: 0 0 12px; }
.pied-legal a { color: var(--doux); }