/* Relevé arpentage · Toutenvélo Le Havre · feuille de style (version 2, 14/11/2026)
   Lisible en plein soleil, gros boutons (gants), une main. */
:root{--vert:#94B143;--vert-fonce:#6f8a2d;--noir:#1D1D1B;--gris:#f1f2ee;--bord:#cfd3c6;
  --crit:#d64541;--grave:#7a1f1d;--maj:#f0932b;--min:#f4d03f;--fav:#5f9a35;--ok:#2d7d46;--alerte:#fff3c4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#fff;color:var(--noir);font:17px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{max-width:640px;margin:0 auto;padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.hidden{display:none!important}

/* en-tête */
header{background:var(--noir);color:#fff;padding:calc(7px + env(safe-area-inset-top)) 14px 7px;position:sticky;top:0;z-index:5}
header .ligne1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header h1{margin:0;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
header small{color:#c8d9a0;display:block;margin-top:1px;font-size:13px}
#demo{background:var(--maj);color:#000;font-weight:800;font-size:12px;border-radius:8px;padding:2px 8px}
header .ligne2{display:flex;margin-top:5px}
#gps,#synchro{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:#444;color:#fff}
#synchro{margin-left:auto}
#gps.ok,#synchro.ok{background:var(--ok)}#gps.mid,#synchro.mid{background:var(--maj);color:#000}#gps.ko,#synchro.ko{background:var(--crit)}#synchro.off{background:#444}
/* le bouton « compte » du hub (auth.js) est posé en haut à droite de la page : on lui laisse la place */
body.connecte header .ligne1{padding-right:172px;min-height:38px}
@media (max-width:520px){body.connecte header h1{display:none}}
/* Journée : le livreur est le compte connecté, pas un champ à remplir */
.moi{min-height:50px;display:flex;align-items:center;border:2px solid var(--bord);border-radius:10px;padding:8px 10px;background:var(--gris);font-size:18px;font-weight:700}
/* première ouverture hors réseau : rien d'autre que le message */
body.bloque section,body.bloque nav{display:none!important}
.resume{background:none;border:1px solid #666;color:#e9efd8;border-radius:12px;padding:3px 10px;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}
.banner{margin:0;padding:10px 14px;background:var(--alerte);border-bottom:2px solid #e8d36a;font-size:15px}
.banner button{margin-top:6px}

/* navigation basse */
nav{display:flex;position:fixed;bottom:0;left:0;right:0;max-width:640px;margin:0 auto;background:var(--noir);z-index:6;padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:0;color:#fff;padding:13px 2px;font-size:15px;font-weight:700;border-top:4px solid transparent;font-family:inherit}
nav button.on{border-top-color:var(--vert);color:var(--vert)}
nav .n{display:inline-block;min-width:20px;padding:0 5px;border-radius:10px;background:var(--vert);color:#000;font-size:12px;line-height:20px;margin-left:3px}

section{display:none;padding:12px 14px}
section.on{display:block}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin:20px 0 8px;color:#555}
h2 .fac{text-transform:none;letter-spacing:0;font-weight:400}
.row{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:1 1 45%;min-height:54px;border:2px solid var(--bord);background:#fff;border-radius:10px;padding:8px 10px;font-size:16px;text-align:left;font-weight:600;font-family:inherit;color:var(--noir)}
.chip.on{border-color:var(--noir);background:var(--vert);color:#000}
.big{display:block;width:100%;min-height:62px;border:0;border-radius:12px;font-size:18px;font-weight:800;text-align:left;padding:10px 14px;margin-bottom:8px;color:#000;font-family:inherit}
.big small{display:block;font-weight:500;font-size:14px}
.big.c1{background:var(--crit);color:#fff}.big.c2{background:var(--maj)}.big.c3{background:var(--min)}.big.c4{background:var(--grave);color:#fff}.big.c5{background:var(--fav);color:#fff}
.big.dim{opacity:.35}.big.on{outline:5px solid var(--noir)}

label{display:block;font-size:14px;color:#555;margin:12px 0 4px;font-weight:600}
input,select,textarea{width:100%;min-height:50px;font-size:18px;border:2px solid var(--bord);border-radius:10px;padding:8px 10px;background:#fff;font-family:inherit;color:var(--noir)}
textarea{min-height:92px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.go{background:var(--vert);color:#000;border:0;border-radius:12px;min-height:64px;width:100%;font-size:20px;font-weight:800;margin-top:14px;font-family:inherit}
.go.sec{background:#fff;border:2px solid var(--noir);font-size:17px;min-height:54px;color:var(--noir)}
.go.danger{background:#fff;border:2px solid var(--crit);color:var(--crit);min-height:46px;font-size:15px}
.go.petit{width:auto;min-height:44px;padding:0 16px;font-size:15px;margin:0}
.go[disabled]{opacity:.5}
/* lien vers la page admin (réservé aux admins du hub) */
.lien-admin{display:block;margin-top:14px;padding:12px;text-align:center;font-size:15px;font-weight:700;color:var(--noir);border:2px dashed var(--bord);border-radius:12px;text-decoration:none}

.photo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.photo img{height:84px;border-radius:8px;border:2px solid var(--bord)}
.pos{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--gris);border-radius:10px;padding:8px 10px;margin:4px 0 6px;font-size:15px}
.pos.vide{background:var(--alerte)}

.info{background:#fff8d6;border:2px solid #e8d36a;border-radius:10px;padding:10px;font-size:15px;margin:8px 0}
.info.vert{background:#eef5da;border-color:#b9d27a}
.info.rouge{background:#fde5e3;border-color:#e8837a}
.modif{background:#e3f0ff;border:2px solid #7aa7e0;border-radius:10px;padding:10px;margin:8px 0;font-size:15px}

.cnt{display:flex;gap:6px;margin:6px 0}
.cnt div{flex:1;border-radius:10px;padding:8px;text-align:center;font-weight:800;font-size:22px}
.cnt small{display:block;font-size:12px;font-weight:600}
.pt{border:2px solid #e3e5dc;border-radius:12px;padding:10px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.pt .dot{flex:0 0 18px;height:18px;border-radius:50%;margin-top:3px}
.pt .vignette{flex:0 0 56px;height:56px;border-radius:8px;object-fit:cover;background:var(--gris)}
.pt .corps{flex:1;min-width:0}
.pt b{display:block}
.pt small{color:#666;display:block}
.pt .btns{display:flex;gap:8px;width:100%}
.pt .btns button{flex:1;min-height:42px;border-radius:10px;border:2px solid var(--noir);background:#fff;font-size:14px;font-weight:700;padding:0 10px;font-family:inherit}
.pt .btns button.sup{border-color:var(--crit);color:var(--crit)}

/* barre d'enregistrement collée au-dessus de la navigation */
.barre{position:sticky;bottom:calc(52px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));padding:10px 0 6px;margin-top:10px;z-index:4}
.barre .go{margin-top:0}
.barre .manque{font-size:14px;color:#7a1f1d;margin:0 0 6px;font-weight:600}

details{margin-top:14px}
summary{font-weight:700;font-size:15px;color:#555;text-transform:uppercase;letter-spacing:.05em;padding:10px 0}
.aide p,.aide li{font-size:15px}
.aide ol{padding-left:20px;margin:6px 0}
.pied{margin:26px 0 0;font-size:12px;color:#888;text-align:center}
.stat{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #e3e5dc;font-size:16px}
.stat b{white-space:nowrap}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));background:var(--noir);color:#fff;padding:12px 18px;border-radius:24px;z-index:10;display:none;font-weight:700;max-width:92vw;text-align:center}