:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --line: rgba(84, 84, 88, 0.6);
  --ink: #ffffff;
  --dim: rgba(235, 235, 245, 0.6);
  --accent: #8ecb00;
  --accent-ink: #0a0a0c;
  --alerte: #ff453a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 30rem;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 1.5rem) 1rem calc(env(safe-area-inset-bottom) + 3rem);
}
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
h2 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
     color: var(--dim); margin: 2rem 0 0.5rem 0.25rem; }
.carte { background: var(--surface); border-radius: 0.75rem; overflow: hidden; }
.ligne { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; min-height: 3rem; }
.ligne + .ligne { border-top: 1px solid var(--line); }
.ligne label { flex: 1; }
input {
  background: rgba(118, 118, 128, 0.24); border: 0; border-radius: 0.5rem;
  color: var(--ink); font: inherit; padding: 0.5rem 0.75rem; min-width: 0;
}
input[type="text"] { flex: 1; text-align: right; }
button {
  width: 100%; border: 0; border-radius: 0.75rem; padding: 1rem;
  font: 600 17px/1 inherit; background: var(--accent); color: var(--accent-ink);
}
button:active { opacity: 0.7; }
button.secondaire { background: var(--surface); color: var(--ink); }
button[disabled] { opacity: 0.4; }
.etat { display: flex; align-items: center; gap: 0.5rem; }
.pastille { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dim); flex: none; }
.pastille.on { background: var(--accent); }
.pastille.off { background: var(--alerte); }
.horaire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.creneau {
  background: var(--surface); border-radius: 0.5rem; padding: 0.5rem 0;
  text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
}
.creneau.a { border-bottom-color: var(--accent); }
.creneau.b { border-bottom-color: #0a84ff; }
.note { color: var(--dim); font-size: 0.8125rem; margin: 0.5rem 0.25rem 0; }
.pile > * + * { margin-top: 0.75rem; }