:root {
  --fond: #0f1720; --carte: #17212c; --texte: #e8eef5; --gris: #93a1af; --bord: #2a3846;
  --accent: #2f7cf6; --ok: #2fbf71; --ko: #ff6b6f; --alerte: #ffb020;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
header h1 { font-size: 22px; margin: 4px 0 2px; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 16px 0 6px; color: var(--gris); }
section { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 14px; margin: 12px 0; }
label { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--gris); }
input:not([type]), input[type="text"], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond);
  color: var(--texte); font: inherit;
}
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 10px 0 0; }
legend { font-size: 14px; color: var(--gris); padding: 0; }
label.case { display: inline-flex; align-items: center; gap: 8px; margin: 6px 18px 0 0; color: var(--texte); font-size: 16px; }
label.case input { width: 22px; height: 22px; }
button {
  width: 100%; margin-top: 12px; padding: 15px; border: 0; border-radius: 12px;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2;
  background: var(--accent); color: #fff;
}
button:disabled { background: #2d3a47; color: var(--gris); }
button.secondaire { background: transparent; border: 1px solid var(--bord); color: var(--texte); font-weight: 500; }
button.rouge { background: #d9363e; }
.aide { color: var(--gris); font-size: 14px; margin: 6px 0 0; }
.petit { font-size: 12.5px; }
.ok { color: var(--ok); }
.ko { color: var(--ko); }
.info { color: var(--alerte); }
#message { padding: 12px 14px; border-radius: 12px; border: 1px solid currentColor; margin: 12px 0; }
#etat-envoi { margin: 0; }
progress { width: 100%; height: 10px; margin-top: 10px; accent-color: var(--accent); }
#historique { list-style: none; padding: 0; margin: 0; font-size: 14px; }
#historique li { padding: 7px 0; border-top: 1px solid var(--bord); color: var(--gris); }
#historique li.ok { color: var(--ok); }
details summary { cursor: pointer; font-weight: 600; }
details ul { padding-left: 18px; }
[hidden] { display: none !important; }

/* Écrans d'enregistrement : le panneau en bas, le reste transparent (caméra RA dessous, ou l'aperçu vidéo). */
.hud { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: transparent; z-index: 10; }
#ecran-cam { background: #000; }
#apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panneau {
  position: relative; margin: 12px; margin-bottom: calc(12px + env(safe-area-inset-bottom)); padding: 14px 16px;
  border-radius: 16px; background: rgba(15, 23, 32, 0.78); color: var(--texte);
}
.ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gros { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etapes { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--gris); }
.etapes li { margin: 3px 0; }
.etapes li.actif { color: var(--texte); font-weight: 600; }
.alerte { margin: 8px 0 0; font-weight: 700; color: var(--alerte); font-size: 17px; }
body.plein main { display: none; }