:root {
  --fond: #0b1020;
  --carte: #141b33;
  --bord: #26305a;
  --texte: #eef1ff;
  --doux: #a9b1d6;
  --marque: #1801ad;
  --marque-clair: #5b4dff;
  --vert: #22c55e;
  --rouge: #ef4444;
  --orange: #f59e0b;
  --rayon: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
main { max-width: 560px; margin: 0 auto; padding: 12px 16px 32px; }
.app-supervision main { max-width: 1280px; }
[hidden] { display: none !important; }

.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: #0f1630; border-bottom: 1px solid var(--bord);
}
.entete-droite { display: flex; gap: 12px; align-items: center; }
.marque { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pastille-logo {
  background: var(--marque); color: #fff; border-radius: 8px; padding: 2px 7px; font-size: 13px; letter-spacing: .5px;
}
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 10px; color: var(--doux); text-transform: uppercase; letter-spacing: .6px; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px; margin: 12px 0;
}
.carte-etroite { max-width: 420px; margin: 24px auto; }

label { display: block; margin: 0 0 12px; color: var(--doux); font-size: 14px; }
input:not([type=checkbox]) {
  display: block; width: 100%; margin-top: 4px; padding: 12px; font-size: 17px;
  border-radius: 10px; border: 1px solid var(--bord); background: #0d1328; color: var(--texte);
}
.case { display: flex; gap: 10px; align-items: center; color: var(--texte); margin-bottom: 14px; }
.case input { width: 22px; height: 22px; }

.bouton {
  display: block; width: 100%; border: 0; border-radius: var(--rayon); padding: 16px; margin: 8px 0;
  font-size: 18px; font-weight: 700; color: #fff; cursor: pointer; touch-action: manipulation;
}
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-principal { background: var(--marque-clair); }
.bouton-secondaire { background: #2a3566; font-size: 16px; padding: 12px; }
.bouton-demarrer { background: var(--vert); color: #04220f; font-size: 22px; padding: 24px; }
.bouton-arreter { background: var(--rouge); font-size: 22px; padding: 24px; }
.petit-bouton { font-size: 16px; padding: 12px; }
.boutons { display: flex; gap: 10px; }
.lien { background: none; border: 0; color: var(--doux); text-decoration: underline; font-size: 14px; cursor: pointer; }

.etat-carte { text-align: center; }
.etat {
  display: inline-block; padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 20px;
  letter-spacing: .5px; background: #2a3566;
}
.app-supervision .etat { font-size: 16px; margin-bottom: 8px; }
.etat-pret { background: #2a3566; }
.etat-demarrage, .etat-reconnexion, .etat-test { background: var(--orange); color: #241500; }
.etat-direct { background: var(--rouge); color: #fff; }
.etat-silence { background: #8b5cf6; color: #fff; }
.etat-coupure { background: #7f1d1d; color: #fff; outline: 2px solid var(--rouge); }
.a-l-antenne .etat-direct { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, .15); } }
.etat-detail { color: var(--doux); margin: 10px 0 0; }
.chrono { font-size: 54px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 8px; letter-spacing: 1px; }
.restant { color: var(--doux); margin: 0; font-variant-numeric: tabular-nums; }
.avec { margin: 8px 0 0; color: var(--texte); font-weight: 600; }
.micro-coupe { margin: 10px 0 0; padding: 8px; border-radius: 10px; background: #3b1111; color: #fecaca; font-weight: 700; }

.prolonger-texte { margin: 0 0 8px; color: var(--doux); }
.boutons-prolonger { display: flex; gap: 8px; }
.boutons-prolonger .bouton { margin: 0; flex: 1; padding: 12px 6px; }
.alerte { background: #3a2a05; border-color: var(--orange); }
.alerte p { margin: 0 0 8px; font-weight: 700; color: var(--texte); }

/* Écran noir : pixels éteints sur OLED, infos très sombres, appui long pour sortir */
.ecran-noir {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.noir-etat { color: #5a1a1a; font-weight: 800; font-size: 18px; letter-spacing: 1px; }
.noir-etat.noir-reconnexion, .noir-etat.noir-demarrage { color: #6b4a0a; }
.noir-chrono { color: #2a2a2a; font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.noir-aide { color: #222; font-size: 13px; }
.ecran-noir.appui .noir-aide { color: #555; }
.alerte-texte { color: var(--orange); font-weight: 700; }

.vu { position: relative; height: 22px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(90deg, #12301f 0 70%, #3a3110 70% 88%, #3a1414 88% 100%); }
.vu-barre { height: 100%; width: 0; transition: width 60ms linear;
  background: linear-gradient(90deg, var(--vert) 0 70%, var(--orange) 70% 88%, var(--rouge) 88% 100%);
  background-size: 100vw 100%; }
.app-supervision .vu-barre { background-size: 400px 100%; }
.vu-barre.sature { box-shadow: inset 0 0 0 2px #fff; }
.vu-crete { position: absolute; top: 0; width: 3px; height: 100%; background: #fff; left: 0; }
.vu-legende { display: flex; justify-content: space-between; color: var(--doux); font-size: 14px; margin-top: 6px; }

.petit { font-size: 14px; color: var(--doux); }
.reseau { margin: 10px 0 0; }
.conseil-ios { text-align: center; }
.message { margin: 10px 0; padding: 12px; border-radius: 10px; }
.message.erreur { background: #3b1111; color: #fecaca; }
.message.info { background: #0f2a1a; color: #bbf7d0; }
.outils summary { cursor: pointer; font-weight: 700; }
.outils hr { border: 0; border-top: 1px solid var(--bord); margin: 16px 0; }

/* Supervision */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.grille .carte { margin: 0; }
.grille .large { grid-column: 1 / -1; }
.grille-tel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tel { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; background: #10162c; }
.tel-entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tel-nom { font-weight: 800; font-size: 18px; }
.tel .etat { font-size: 14px; padding: 4px 12px; margin: 0; }
.ouverture { height: 6px; border-radius: 3px; background: #26305a; margin: 6px 0 2px; overflow: hidden; }
.ouverture > div { height: 100%; width: 0; background: var(--marque-clair); transition: width 150ms linear; }
.etat-muet { background: #4b5563; color: #fff; }
.cj-creer { display: flex; gap: 10px; align-items: flex-end; }
.cj-creer .bouton { margin: 0; flex: 1; }
.cj-nombre { margin: 0; }
.cj-nombre select { display: block; margin-top: 4px; padding: 10px; font-size: 16px; border-radius: 10px; border: 1px solid var(--bord); background: #0d1328; color: var(--texte); }
.cj-table { margin-top: 10px; }
.cj-code { font-size: 22px; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cj-antenne { display: block; font-size: 12px; color: var(--vert); }
.cj-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.cj-btns button { background: #2a3566; color: #fff; border: 0; border-radius: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; }
.valeurs { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0; }
.valeurs dt { color: var(--doux); font-size: 14px; }
.valeurs dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gros { font-size: 22px; font-weight: 800; }
.bandeau { margin: 0 0 8px; }
.bandeau.erreur { background: #3b1111; color: #fecaca; padding: 10px; border-radius: 10px; }
.url { display: block; padding: 8px; background: #0d1328; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.liste { padding-left: 18px; font-size: 13px; color: var(--doux); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th, .tableau td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau th { color: var(--doux); font-weight: 600; }
.journal td:nth-child(3) { color: var(--doux); font-size: 13px; overflow-wrap: anywhere; }
.ligne-alerte td { color: #fca5a5 !important; }
audio { width: 100%; margin-top: 8px; }

@media (max-width: 400px) {
  .chrono { font-size: 44px; }
  .boutons { flex-direction: column; gap: 0; }
}