:root {
  --vert: #1a3a2a;
  --vert-clair: #2e7d4f;
  --fond: #f4f7f4;
  --carte: #ffffff;
  --rouge: #b3362b;
  --orange: #b36b00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: #1c2b21;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

header {
  background: var(--vert);
  color: #fff;
  padding: 14px 18px calc(10px + env(safe-area-inset-top)) 18px;
}
header h1 { margin: 0; font-size: 1.25rem; }
#fil-ariane { font-size: 0.8rem; opacity: 0.85; margin-top: 4px; min-height: 1em; }

.ecran { display: none; padding: 18px; max-width: 560px; width: 100%; margin: 0 auto; flex: 1; }
.ecran.actif { display: block; }
h2 { font-size: 1.15rem; margin: 6px 0 16px; }

/* Écran 1 */
#liste-restos { display: grid; gap: 10px; }
.btn-resto {
  padding: 16px;
  border: 2px solid var(--vert-clair);
  border-radius: 14px;
  background: var(--carte);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.btn-resto small { display: block; font-weight: 400; color: #5b6f61; margin-top: 2px; }
.btn-resto:active { background: #e5f2e9; }

/* Écran 2 */
.zone-doc {
  background: var(--carte);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #d8e2da;
}
.zone-doc h3 { margin: 0 0 6px; font-size: 1rem; }
.aide { font-size: 0.85rem; color: #5b6f61; margin: 0 0 10px; }
.aide-liste { margin: 0 0 10px; padding-left: 20px; }
.aide-liste li { margin-bottom: 3px; }
.btn-photo, .btn-fichier {
  padding: 12px 14px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--vert-clair);
  border-radius: 10px;
  background: #eaf5ee;
  font-size: 0.95rem;
  cursor: pointer;
}
.apercu img { max-width: 100%; max-height: 180px; border-radius: 8px; margin-top: 6px; }
.statut { font-size: 0.9rem; margin-top: 6px; min-height: 1.2em; }
.statut.ok { color: var(--vert-clair); font-weight: 600; }
.statut.ko { color: var(--rouge); font-weight: 600; }

.btn-principal {
  display: block;
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  background: var(--vert-clair);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}
.btn-principal:disabled { background: #a9c4b2; }
.btn-secondaire {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  background: #fff;
  color: var(--vert);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--vert-clair);
  border-radius: 14px;
  cursor: pointer;
}
#progression { margin-top: 12px; font-size: 0.9rem; color: #5b6f61; text-align: center; }

/* Formulaires */
form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.95rem; }
form label small { font-weight: 400; color: #5b6f61; }
form input[type="text"], form input[type="date"], form input[type="time"], form input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 12px;
  font-size: 1.05rem;
  border: 1.5px solid #c3d2c7;
  border-radius: 10px;
  background: #fff;
}
form input.champ-douteux { border-color: var(--orange); background: #fff8ec; }
.radio-groupe { display: flex; gap: 10px; margin-top: 6px; }
.radio-groupe label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 1.5px solid #c3d2c7;
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
  margin: 0;
}
.radio-groupe label:has(input:checked) { border-color: var(--vert-clair); background: #eaf5ee; font-weight: 700; }

/* Alertes */
#alertes-verif .alerte, #resultat-envoi .alerte {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.alerte.info { background: #e8f1fb; color: #1b4d7c; }
.alerte.attention { background: #fff3e0; color: var(--orange); }
.alerte.erreur { background: #fdeceb; color: var(--rouge); }
.alerte.succes { background: #e5f2e9; color: var(--vert-clair); font-weight: 600; }

/* Récap */
#recap { background: var(--carte); border-radius: 14px; padding: 14px; border: 1px solid #d8e2da; }
#recap dt { font-size: 0.8rem; color: #5b6f61; margin-top: 8px; }
#recap dd { margin: 0; font-weight: 600; }

footer { text-align: center; padding: 10px; color: #7d8f83; }

/* Scanner caméra plein écran */
#scanner {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  align-items: center;
  justify-content: center;
}
/* display:flex UNIQUEMENT quand visible — sinon l'attribut [hidden] serait
   ignoré (un sélecteur #id l'emporte sur la règle [hidden]{display:none}). */
#scanner:not([hidden]) { display: flex; }
#scanner-video { width: 100%; height: 100%; object-fit: cover; }
#scanner-cadre {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: 88vw; max-width: 520px;
  aspect-ratio: 1.585;          /* format carte ID / carte vitale */
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
#scanner-cadre .coin {
  position: absolute; width: 26px; height: 26px;
  border: 4px solid #4ad991;
}
.coin.ht-g { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.coin.ht-d { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.coin.bs-g { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.coin.bs-d { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
#scanner-bande {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  border-top: 2px dashed rgba(74, 217, 145, 0.9);
  background: rgba(74, 217, 145, 0.12);
  border-radius: 0 0 12px 12px;
  display: flex; align-items: center; justify-content: center;
}
#scanner-bande span { color: #d6ffe9; font-size: 0.8rem; letter-spacing: 1px; }
#scanner-consigne {
  position: absolute;
  top: calc(44% + 27vw + 20px);
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  padding: 0 24px;
  text-shadow: 0 1px 3px #000;
}
#scanner-actions {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 18px; right: 18px;
  display: flex; gap: 12px;
}
#scanner-actions button { margin-top: 0; flex: 1; }
#scanner-actions .btn-secondaire { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.6); }