/* Arpentage · page admin · Toutenvélo Le Havre · feuille de style (version 1, 14/11/2026)
   Même charte que app.css (vert, noir, gros contrastes, police système) mais pensée pour un écran large ; se replie en une colonne sur téléphone. */
:root{--vert:#94B143;--vert-fonce:#6f8a2d;--noir:#1D1D1B;--gris:#f1f2ee;--bord:#cfd3c6;--bord-clair:#e3e5dc;
  --crit:#d64541;--maj:#f0932b;--min:#f4d03f;--fav:#5f9a35;--alerte:#fff3c4;--alerte-bord:#e8d36a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--gris);color:var(--noir);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column}
.hidden{display:none!important}
button,select{font-family:inherit}

/* en-tête : on laisse la place du widget de compte que auth.js pose en haut à droite (position fixe) */
.entete{background:var(--noir);color:#fff;border-bottom:4px solid var(--vert)}
.entete-in{max-width:1500px;margin:0 auto;padding:12px 16px;padding-right:210px;display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;min-height:64px}
.marque h1{margin:0;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.marque .sous{margin:2px 0 0;font-size:13px;color:#c8d9a0}
.retour{color:var(--vert);font-weight:700;text-decoration:none;border:2px solid var(--vert);border-radius:10px;padding:8px 14px;white-space:nowrap}
.retour:hover,.retour:focus-visible{background:var(--vert);color:#000;outline:none}

main{width:100%;max-width:1500px;margin:0 auto;padding:14px 16px 8px;flex:1}
.bandeau{margin:0 0 12px;padding:10px 14px;background:var(--alerte);border:2px solid var(--alerte-bord);border-radius:10px;font-size:15px}
.etat{margin:0 0 12px;padding:8px 14px;border-radius:10px;background:#fff;border:2px solid var(--bord-clair);font-size:15px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.etat.ok{border-color:#b9d27a;background:#eef5da}
.etat.erreur{border-color:#e8837a;background:#fde5e3}
.etat button{margin-left:auto}

/* boutons */
.btn{min-height:44px;border:0;border-radius:10px;background:var(--vert);color:#000;font-size:15px;font-weight:800;padding:8px 16px;cursor:pointer}
.btn:hover:not([disabled]){filter:brightness(.95)}
.btn:focus-visible,select:focus-visible,.pt button:focus-visible,tr.cliquable:focus-visible{outline:3px solid var(--noir);outline-offset:2px}
.btn.sec{background:#fff;border:2px solid var(--noir);color:var(--noir)}
.btn.danger{background:#fff;border:2px solid var(--crit);color:var(--crit)}
.btn.petit{min-height:38px;padding:4px 12px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* filtres */
.filtres{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:2px solid var(--bord-clair);border-radius:12px;padding:12px 14px}
.filtres label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#555;min-width:180px;flex:0 1 240px}
.filtres select{min-height:44px;font-size:16px;border:2px solid var(--bord);border-radius:10px;padding:6px 10px;background:#fff;color:var(--noir);width:100%}
.compteur{margin:10px 2px 12px;font-size:18px;font-weight:800}
.compteur .n-Critique{color:var(--crit)}.compteur .n-Majeur{color:#b9650a}.compteur .n-Mineur{color:#8a7100}.compteur .n-Favorable{color:var(--fav)}
.compteur small{font-weight:500;color:#666;font-size:14px}

/* disposition : carte à gauche, tableau et exports à droite */
.grille{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:16px;align-items:start;margin-bottom:16px}
.colonne{display:flex;flex-direction:column;gap:16px;min-width:0}
.bloc{background:#fff;border:2px solid var(--bord-clair);border-radius:12px;padding:12px 14px;min-width:0}
h2{margin:0 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:#444}
h2 .fac{text-transform:none;letter-spacing:0;font-weight:500;color:#666}
.note{margin:0 0 8px;font-size:13px;color:#666}
.msg{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--alerte);border:2px solid var(--alerte-bord);font-size:14px}

/* carte */
#carte{height:clamp(420px,70vh,720px);border-radius:10px;border:2px solid var(--bord);background:#dfe6d3}
#carte.indispo{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#555;font-weight:600;height:140px}
.legende{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:8px;font-size:14px}
.legende span{display:inline-flex;align-items:center;gap:6px}
.point-couleur{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--noir);flex:0 0 14px}
.leaflet-popup-content{margin:12px 14px;font-size:14px;line-height:1.35}
.pop{max-height:min(420px,52vh);overflow:auto}
.pop-tete{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px}
.pop p{margin:4px 0}
.pop .pop-constat{font-weight:700}
.pop .pop-com{white-space:pre-wrap;background:var(--gris);border-radius:6px;padding:6px 8px}
.pop dl{margin:6px 0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px}
.pop dt{color:#666}.pop dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.pop-photo{margin-top:8px;min-height:40px}
.pop-photo img{display:block;max-width:100%;max-height:200px;border-radius:8px;border:2px solid var(--bord)}
.pop-photo .att{color:#666;font-size:13px}

/* tableau par livreur */
.tableau-conteneur{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 8px;border-bottom:1px solid var(--bord-clair);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#555;background:var(--gris)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.cliquable{cursor:pointer}
tr.cliquable:hover td{background:#f6f8ef}
tr.choisi td{background:#e3efc3;font-weight:700}
td .code{display:inline-block;background:var(--noir);color:#fff;border-radius:6px;padding:0 6px;font-size:12px;font-weight:700;margin-left:4px}
td.vide{color:#666;text-align:center;padding:14px}

/* exports */
.exports{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.export{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-height:62px;padding:8px 12px}
.btn.export b{font-size:15px}
.btn.export small{font-weight:500;font-size:12px}
.prog{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.prog progress{flex:1 1 160px;height:18px;accent-color:var(--vert-fonce)}
.prog span{font-size:14px;font-variant-numeric:tabular-nums}
#x-res{margin-top:8px}
.avert{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#fde5e3;border:2px solid #e8837a;font-size:14px}

/* liste des points */
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:10px}
.pt{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;border:2px solid var(--bord-clair);border-radius:12px;padding:10px;background:#fff}
.pt.mis-en-avant{border-color:var(--noir)}
.pt .vignette{grid-row:1 / span 2;width:96px;height:72px;border-radius:8px;background:var(--gris);border:2px solid var(--bord-clair);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#777;font-size:11px;text-align:center;line-height:1.2}
.pt .vignette img{width:100%;height:100%;object-fit:cover;display:block}
.pt .corps{min-width:0}
.pt .l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pt .nature{font-size:15px;overflow-wrap:anywhere}
.pt .lieu{font-size:14px;color:#333;overflow-wrap:anywhere}
.pt .meta{font-size:13px;color:#666;overflow-wrap:anywhere}
.pt .actions{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;align-self:end}
.niv{display:inline-block;border-radius:12px;padding:1px 10px;font-size:13px;font-weight:800;white-space:nowrap}
.niv-Critique{background:var(--crit);color:#fff}.niv-Majeur{background:var(--maj);color:#000}.niv-Mineur{background:var(--min);color:#000}.niv-Favorable{background:var(--fav);color:#fff}
.liste-vide{grid-column:1 / -1;text-align:center;color:#555;padding:22px 10px;border:2px dashed var(--bord);border-radius:12px}

/* fenêtre de confirmation */
dialog{border:3px solid var(--noir);border-radius:14px;padding:18px 20px;max-width:min(92vw,460px);color:var(--noir)}
dialog::backdrop{background:rgba(29,29,27,.55)}
dialog h2{font-size:18px;text-transform:none;letter-spacing:0;color:var(--noir)}
dialog p{margin:8px 0}
.dlg-avert{font-weight:700;color:var(--crit)}
.dlg-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:var(--noir);color:#fff;padding:12px 18px;border-radius:24px;z-index:10000;display:none;font-weight:700;max-width:92vw;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.toast.erreur{background:var(--crit)}
.pied{max-width:1500px;width:100%;margin:0 auto;padding:10px 16px 18px;font-size:12px;color:#777;text-align:center}

/* écran moyen : tout en une colonne */
@media (max-width:1000px){
  .grille{grid-template-columns:minmax(0,1fr)}
  #carte{height:clamp(340px,55vh,520px)}
}
/* téléphone */
@media (max-width:640px){
  html,body{font-size:15px}
  .entete-in{padding-right:196px;gap:6px 12px}
  .marque h1{font-size:18px}
  .marque .sous{display:none}
  .retour{padding:6px 10px;font-size:14px}
  main{padding:10px 12px 6px}
  .filtres{padding:10px 12px}
  .filtres label{flex:1 1 100%;min-width:0}
  .filtres .btn{flex:1 1 calc(50% - 8px)}
  .compteur{font-size:16px}
  .exports{grid-template-columns:1fr 1fr}
  .btn.export{min-height:70px;padding:8px 10px}
  .btn.export b{font-size:14px}
  th,td{padding:6px 5px;font-size:13px}
  .liste{grid-template-columns:minmax(0,1fr)}
  .pt{grid-template-columns:84px minmax(0,1fr)}
  .pt .vignette{width:84px;height:63px}
  .pt .actions .btn{flex:1 1 auto}
}