:root {
  --fond: #f3f5f9; --carte: #ffffff; --texte: #1b2333; --discret: #5d6b82; --bord: #d9dfe9;
  --bleu: #1d3557; --bleu-clair: #e8eef8; --vert: #1f7a4d; --rouge: #c62828; --orange: #b85c00;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #11151c; --carte: #1b212b; --texte: #e8ecf3; --discret: #9aa7bb; --bord: #2c3542; --bleu: #8db4ff; --bleu-clair: #23304a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.entete { background: #1d3557; color: #fff; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
.entete h1 { margin: 2px 0 0; font-size: 20px; }
.marque { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.entete .discret { color: #c9d6ea; }
.reseau { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #b85c00; font-size: 14px; }
main { max-width: 720px; margin: 0 auto; padding: 12px 16px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.carte h2 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.carte.info { background: var(--bleu-clair); }
.carte.erreur { border-color: var(--rouge); color: var(--rouge); }
.discret { color: var(--discret); font-size: 14px; margin: 4px 0 10px; }
.centre { text-align: center; }
.resume-ligne { margin: 3px 0; }
.resume-ligne b { display: inline-block; min-width: 70px; color: var(--discret); font-weight: 500; }
.onglets { display: flex; gap: 8px; margin: 0 0 12px; }
.onglet { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font-size: 16px; font-weight: 600; }
.onglet[aria-selected="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
@media (prefers-color-scheme: dark) { .onglet[aria-selected="true"] { color: #11151c; } }
.onglet:disabled { opacity: .45; }
.onglet .fait { margin-left: 4px; }
.pastille-compte { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--bleu-clair); color: var(--bleu); }
.grille-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.case-photo { position: relative; aspect-ratio: 4 / 3; border: 2px dashed var(--bord); border-radius: 12px; background: var(--fond); color: var(--texte);
  display: flex; align-items: flex-end; overflow: hidden; padding: 0; font: inherit; text-align: left; }
.case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-photo .nom { position: relative; width: 100%; padding: 6px 8px; font-size: 14px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.case-photo.vide .nom { background: none; color: var(--texte); }
.case-photo.vide::before { content: "📷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); font-size: 30px; opacity: .6; }
.case-photo.prise { border-style: solid; border-color: var(--bleu); }
.case-photo .etat { position: absolute; top: 6px; right: 6px; font-size: 13px; padding: 2px 6px; border-radius: 99px; background: rgba(255,255,255,.9); color: #1b2333; }
.schema { position: relative; border: 1px solid var(--bord); border-radius: 10px; background: #fff; touch-action: manipulation; }
.schema img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid var(--rouge); background: #fff; color: var(--rouge);
  font: 700 14px/24px system-ui, sans-serif; text-align: center; padding: 0; }
.pin.ancien { border-color: #8a94a6; color: #8a94a6; pointer-events: none; opacity: .8; }
.legende { font-size: 13px; color: var(--discret); margin: 8px 0; }
.liste-degats { list-style: none; padding: 0; margin: 6px 0 0; }
.liste-degats li { padding: 6px 0; border-top: 1px solid var(--bord); font-size: 15px; }
label { display: block; margin: 10px 0 0; font-size: 15px; font-weight: 600; }
input[type=text], input[type=number], input[type=date], input[type=time], textarea {
  display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; font-weight: 400; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--texte); }
.libelle { margin: 12px 0 4px; font-size: 15px; font-weight: 600; }
.choix { display: flex; gap: 6px; }
.choix button { flex: 1; padding: 12px 4px; border-radius: 10px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: 600 16px system-ui, sans-serif; }
.choix button.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
@media (prefers-color-scheme: dark) { .choix button.actif { color: #11151c; } }
.codes button { display: flex; flex-direction: column; align-items: center; font-size: 20px; }
.codes small { font-size: 11px; font-weight: 500; }
.deux { display: flex; gap: 10px; }
.deux > * { flex: 1; }
canvas.signature { display: block; width: 100%; height: 150px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; touch-action: none; }
.lien { background: none; border: 0; color: var(--bleu); font: inherit; font-size: 14px; padding: 6px 0; }
.bouton { display: block; width: 100%; padding: 14px; border-radius: 12px; border: 0; font: 700 17px system-ui, sans-serif; text-align: center; margin-top: 10px; }
.bouton.principal { background: var(--vert); color: #fff; }
.bouton.principal:disabled { opacity: .5; }
.bouton.secondaire { background: var(--bleu-clair); color: var(--bleu); }
.bouton.danger { background: #fdecea; color: var(--rouge); }
.bouton.fichier input { display: none; }
.feuille { position: fixed; inset: 0; background: rgba(10, 15, 25, .5); display: flex; align-items: flex-end; z-index: 10; }
.feuille-boite { width: 100%; max-width: 720px; margin: 0 auto; background: var(--carte); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.feuille-boite h3 { margin: 0 0 10px; }