:root {
  --fond: #f4f6fa;
  --carte: #ffffff;
  --texte: #16243f;
  --doux: #5b6b85;
  --trait: #dde3ee;
  --pr: #1f4fd1;
  --pr-fond: #e8eefc;
  --ok: #157f4a;
  --ok-fond: #e3f5eb;
  --att: #9a5b00;
  --att-fond: #fff3dc;
  --err: #b42318;
  --err-fond: #fdecea;
  --rayon: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px; line-height: 1.45; color: var(--texte); background: var(--fond);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; flex: none; }
h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.petit { font-size: .9rem; color: var(--doux); margin: 0; }
.aide { color: var(--doux); }
.erreur { color: var(--err); background: var(--err-fond); padding: 10px 14px; border-radius: 10px; }

.ecran { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); min-height: 100%; }
.centre { padding-top: 12vh; text-align: center; }
.marque { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 20px; background: var(--pr-fond); color: var(--pr); display: grid; place-items: center; }
.marque svg { width: 38px; height: 38px; }
.entete { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.champ {
  display: block; width: 100%; font: inherit; font-size: 1.05rem; color: inherit; background: var(--carte);
  border: 1.5px solid var(--trait); border-radius: 12px; padding: 13px 14px; margin-top: 6px;
}
.champ:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-fond); }
.code { text-align: center; font-size: 1.6rem; letter-spacing: .3em; text-transform: uppercase; margin: 20px 0; }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -2px;
  border-right: 2.5px solid var(--doux); border-bottom: 2.5px solid var(--doux); transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
label { display: block; font-weight: 600; margin: 18px 0 0; }
label > .champ, label > .select { font-weight: 400; }
.facultatif { font-weight: 400; font-size: .85rem; color: var(--doux); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; padding: 0; }
.choix { display: flex; gap: 10px; margin-top: 8px; }
.choix button {
  flex: 1; font: inherit; padding: 13px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte);
}
.choix button[aria-pressed="true"] { background: var(--pr-fond); border-color: var(--pr); color: var(--pr); font-weight: 600; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 20px;
  font: inherit; font-weight: 600; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte);
  cursor: pointer;
}
.bouton.principal { background: var(--pr); border-color: var(--pr); color: #fff; }
.bouton.grand { width: 100%; min-height: 60px; margin-top: 24px; font-size: 1.1rem; }
.bouton.discret { border-color: transparent; background: transparent; color: var(--doux); }
.bouton:disabled { opacity: .55; }
.icone { width: 48px; height: 48px; border-radius: 12px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; }

.bandeau { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--rayon); margin: 6px 0; font-size: 1rem; }
.bandeau.ok { background: var(--ok-fond); color: var(--ok); }
.bandeau.attente { background: var(--pr-fond); color: var(--pr); }
.bandeau.attention { background: var(--att-fond); color: var(--att); }
.bandeau.erreur { background: var(--err-fond); color: var(--err); }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.chiffres div { background: var(--carte); border-radius: var(--rayon); padding: 14px 16px; }
.chiffres strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.chiffres span { color: var(--doux); font-size: .9rem; }

.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste li { background: var(--carte); border-radius: var(--rayon); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.liste .infos { flex: 1; min-width: 0; }
.liste .infos p { margin: 0; }
.liste .titre { font-weight: 600; overflow-wrap: anywhere; }
.pastille { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--pr-fond); color: var(--pr); }
.pastille.fini { background: var(--ok-fond); color: var(--ok); }
.pastille.alerte { background: var(--att-fond); color: var(--att); }

/* Prise de vue : plein écran, gros déclencheur */
.ecran.noir { background: #000; color: #fff; max-width: none; padding: 0; position: fixed; inset: 0; overflow: hidden; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.barre-haut {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px;
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: linear-gradient(#000c, #0000);
}
.titre-prise { flex: 1; min-width: 0; text-align: center; }
.titre-prise .petit { color: #c9d3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang { margin: 0; font-size: 1.35rem; font-weight: 700; }
.icone.clair { color: #fff; }
.icone.allumee { background: #fff3; }
.consigne {
  position: absolute; z-index: 2; top: calc(76px + env(safe-area-inset-top)); left: 16px; right: 16px; margin: 0; text-align: center;
  font-size: .95rem; color: #e6ecf7; text-shadow: 0 1px 3px #000;
}
.barre-bas {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 20px calc(30px + env(safe-area-inset-bottom)); background: linear-gradient(#0000, #000d);
}
.vignette { justify-self: start; width: 58px; height: 58px; border-radius: 10px; border: 2px solid #fff8; padding: 0; overflow: hidden; background: #222; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette img:not([src]) { visibility: hidden; }
.declencheur { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #fff; background: #fff3; }
.declencheur:active { background: #fff8; }
.declencheur:disabled { opacity: .5; }
.petit-bouton { justify-self: end; min-height: 48px; padding: 8px 18px; background: #fff2; border-color: #fff5; color: #fff; }
.prise-envoi { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(4px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: .8rem; color: #c9d3e6; }
.alerte-photo {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rayon); background: var(--att-fond); color: var(--att); font-size: 1rem;
}
.alerte-photo span { flex: 1; }
.alerte-photo .bouton { min-height: 46px; background: var(--att); border-color: var(--att); color: #fff; }
.secours { position: absolute; z-index: 2; inset: 30% 20px auto; text-align: center; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .25s; }
.flash.on { opacity: .7; transition: none; }

dialog { border: 0; border-radius: 18px; padding: 22px; width: min(92vw, 440px); color: var(--texte); }
dialog::backdrop { background: #0009; }
dialog h2 { margin-top: 0; }
dialog .bouton { width: 100%; margin-top: 10px; }