/* Application terrain : grandes cibles tactiles (gants), contraste fort (plein soleil) */
:root { --prim: #1f4e79; --prim2: #2e75b6; --ok: #2e7d32; --err: #c62828; --orange: #ef6c00; --fond: #f4f6f8; --bord: #cfd8dc; --texte: #1a1a1a; --muted: #607d8b; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); padding-bottom: 80px; }
header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--prim); color: #fff; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
header h1 { font-size: 1.1em; margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version { font-size: .8em; opacity: .8; }
.retour { background: none; border: 0; color: #fff; font-size: 1.8em; line-height: 1; padding: 0 8px; }
main { padding: 12px; max-width: 760px; margin: 0 auto; }
h2 { font-size: 1.1em; margin: 18px 0 8px; color: var(--prim); }
h3 { font-size: 1em; margin: 14px 0 6px; }
.muted { color: var(--muted); } .petit { font-size: .85em; }
label { display: block; margin: 10px 0; font-weight: 600; }
input[type=text], input[type=number], select, textarea { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; font-weight: 400; border: 1px solid var(--bord); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--prim2); border-color: var(--prim2); }
.req { color: var(--err); }
.dp { margin: 12px 0; } .dp-titre { font-weight: 600; }
.dp-ligne { display: flex; gap: 10px; } .dp-ligne label { flex: 1; margin: 4px 0; font-weight: 400; }
input.autre { margin-top: 6px; }
label.case { display: flex; align-items: center; gap: 10px; font-weight: 400; }
label.case input { width: 26px; height: 26px; }
label.case.grande { font-size: 1.1em; font-weight: 600; }
fieldset { border: 1px solid var(--bord); border-radius: 8px; padding: 6px 12px; background: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 18px; margin: 4px 0; border: 0; border-radius: 10px; background: var(--prim); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.btn.large { display: flex; width: 100%; min-height: 56px; margin: 8px 0; }
.btn.petit { min-height: 44px; padding: 8px 14px; font-size: .95em; }
.btn.secondaire { background: #fff; color: var(--prim); border: 2px solid var(--prim); }
.btn.danger { background: var(--err); }
.btn.choisi { background: var(--ok); color: #fff; border: 2px solid var(--ok); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.carte { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 12px 14px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; font: inherit; color: inherit; }
.carte-ligne { display: flex; gap: 6px; align-items: stretch; } .carte-ligne .carte { flex: 1; }
.ligne { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.onglets { display: flex; background: #fff; border-bottom: 1px solid var(--bord); position: sticky; top: 52px; z-index: 4; }
.onglets button { flex: 1; padding: 12px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.onglets button.actif { color: var(--prim); border-bottom-color: var(--prim); }
.pas-barre { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0; }
.pas { min-width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bord); background: #fff; font: inherit; font-weight: 700; color: var(--muted); }
.pas.fait { border-color: var(--ok); color: var(--ok); }
.pas.actif { background: var(--prim); border-color: var(--prim); color: #fff; }
.pas:disabled { opacity: .35; }
.nav-etapes { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0; }
.nav-etapes .btn { flex: 1; }
.manques { background: #fff3e0; border-left: 5px solid var(--orange); padding: 8px 12px; border-radius: 6px; margin: 14px 0; }
.manques ul { margin: 4px 0 0 18px; padding: 0; }
.ok { color: var(--ok); font-weight: 600; margin: 10px 0; }
.info { background: #e3f2fd; border-left: 5px solid var(--prim2); padding: 8px 12px; border-radius: 6px; }
.alerte { background: #ffebee; border-left: 5px solid var(--err); padding: 8px 12px; border-radius: 6px; }
.choix2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .choix2 .btn { flex: 1; }
.bloc { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.bloc.nc { border-left: 5px solid var(--orange); }
.photos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.vign { position: relative; }
.vign img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bord); display: block; background: #ddd; }
.vign .x { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--err); color: #fff; font-weight: 700; }
.gps { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
details.zone { background: #fff; border: 1px solid var(--bord); border-radius: 10px; margin: 10px 0; padding: 0 12px; }
details.zone summary { padding: 12px 0; font-weight: 700; color: var(--prim); cursor: pointer; }
.compte { float: right; color: var(--orange); } .compte.ok { color: var(--ok); margin: 0; }
.point { border-top: 1px solid var(--bord); padding: 10px 0; }
.point.r-NC { background: #fff8f0; } .point.r-NV { background: #f5f5f5; }
.pt-titre { font-weight: 600; }
.badge { font-size: .75em; background: #eceff1; color: var(--muted); padding: 2px 6px; border-radius: 4px; font-weight: 400; }
.reponses { display: flex; gap: 6px; margin: 8px 0; }
.rep { flex: 1; min-height: 48px; border: 2px solid var(--bord); border-radius: 8px; background: #fff; font: inherit; font-weight: 700; color: var(--muted); }
.rep.choisi[data-r=C] { background: var(--ok); border-color: var(--ok); color: #fff; }
.rep.choisi[data-r=NC] { background: var(--orange); border-color: var(--orange); color: #fff; }
.rep.choisi[data-r=SO], .rep.choisi[data-r=NV] { background: #546e7a; border-color: #546e7a; color: #fff; }
.gravite { margin: 8px 0; } .gravite > span { display: block; font-weight: 600; margin-bottom: 4px; }
.g { width: 48px; height: 48px; margin-right: 4px; border-radius: 8px; border: 2px solid var(--bord); background: #fff; font: inherit; font-weight: 700; }
.g.choisi.g1, .g.choisi.g2 { background: var(--ok); color: #fff; border-color: var(--ok); }
.g.choisi.g3 { background: #f9a825; color: #fff; border-color: #f9a825; }
.g.choisi.g4 { background: var(--orange); color: #fff; border-color: var(--orange); }
.g.choisi.g5 { background: var(--err); color: #fff; border-color: var(--err); }
table.memo { width: 100%; border-collapse: collapse; background: #fff; font-size: .9em; }
table.memo td, table.memo th { border: 1px solid var(--bord); padding: 6px; text-align: left; }
.alerte-btn { flex: none; min-height: 40px; padding: 6px 12px; border: 2px solid #fff; border-radius: 8px; background: var(--err); color: #fff; font: inherit; font-weight: 700; }
details summary { cursor: pointer; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 76px; background: #263238; color: #fff; padding: 12px 16px; border-radius: 10px; z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.toast.err { background: var(--err); }
.encours { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 6px; border: 2px dashed var(--prim2); color: var(--prim); font-weight: 700; background: #fff; }
.btn.installer { background: var(--ok); }