:root {
  --fond: #1f2a24;
  --texte: #f1f4ee;
  --discret: #a9b5aa;
  --battue: #d7263d;
  --affut: #f08c00;
  --autre: #7b4bd1;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  font: 15px/1.3 system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
}
header { padding: 8px 10px 6px; padding-top: max(8px, env(safe-area-inset-top)); }
#periodes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#periodes button, .plage {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #4a5a50;
  border-radius: 22px;
  background: transparent;
  color: var(--texte);
  font: inherit;
}
.plage { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--discret); }
.plage input { border: 0; background: transparent; color: var(--texte); font: inherit; color-scheme: dark; }
.plage.actif { border-color: var(--texte); color: var(--texte); }
#periodes button.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 600; }
#raz { border-style: dashed; color: var(--discret); }
#raz[hidden] { display: none; }
#ouvre-cal { min-height: 32px; padding: 0 10px; border: 1px solid #4a5a50; border-radius: 16px; background: transparent; color: var(--texte); font: inherit; white-space: nowrap; }
#modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; min-height: 32px; font-size: 14px; }
#modes label { display: flex; align-items: center; gap: 5px; }
#modes input { position: absolute; opacity: 0; }
#modes i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid currentColor; }
#modes label:has(:checked) i { background: currentColor; }
#modes label:has(:focus-visible) i { outline: 2px solid var(--texte); outline-offset: 2px; }
#modes .m-B i { color: var(--battue); } #modes .m-A i { color: var(--affut); } #modes .m-X i { color: var(--autre); }
#compte { margin-left: auto; color: var(--discret); white-space: nowrap; }
#alerte { padding: 10px 12px; font-weight: 600; text-align: center; }
#alerte.danger { background: var(--battue); color: #fff; }
#alerte.ok { background: #2f6b46; color: #fff; }
#periode { padding: 0 10px; font-size: 13px; color: var(--discret); }
#periode summary { padding: 4px 0 8px; cursor: pointer; }
#periode summary strong { color: var(--texte); }
#periode ul { margin: 0; padding: 0 0 8px; list-style: none; }
#periode li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 5px 0; border-top: 1px solid #ffffff1a; color: var(--texte); }
#periode li b { width: 10px; height: 10px; border-radius: 50%; }
#periode li span { color: var(--discret); }
#periode li.limite { color: #ffe2a8; font-size: 12px; }
#periode li em { flex-basis: 100%; padding-left: 18px; font-style: normal; }
#vide { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 10px 12px; background: #2f3d35; text-align: center; }
#vide[hidden] { display: none; }
#vide button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--texte); color: var(--fond); font: inherit; font-weight: 600; }
#sanstrace { background: #5a3d00; color: #ffe2a8; font-size: 14px; }
#sanstrace summary { padding: 10px 12px; font-weight: 600; cursor: pointer; }
#sanstrace p { margin: 0; padding: 0 12px 8px; font-size: 13px; }
#sanstrace ul { margin: 0; padding: 0 12px 10px; list-style: none; max-height: 45vh; overflow-y: auto; }
#sanstrace li { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid #ffffff22; }
#sanstrace em { font-size: 12px; opacity: .8; }
#sanstrace span { display: flex; align-items: center; gap: 6px; }
#sanstrace span b { width: 10px; height: 10px; border-radius: 50%; }
/* — Recherche par lot / cantonnement — */
#recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 0;
  position: relative; /* ancre de la liste de suggestions */
}
#recherche-input {
  flex: 1;
  min-width: 110px;
  max-width: 340px;
  padding: 7px 12px;
  border: 1px solid #4a5a50;
  border-radius: 20px;
  background: #2f3d35;
  color: var(--texte);
  font: inherit;
}
#recherche-input::placeholder { color: var(--discret); }
#recherche-clear {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #4a5a50;
  background: transparent;
  color: var(--discret);
  font-size: 16px;
  cursor: pointer;
}
.autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #2f3d35;
  border: 1px solid #4a5a50;
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 13px;
  z-index: 1100; /* au-dessus des contrôles Leaflet (1000) */
}
.autocomplete .item {
  padding: 8px 12px;
  border-bottom: 1px solid #3b4a42;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.autocomplete .item:last-child { border-bottom: none; }
.autocomplete .item:hover, .autocomplete .item.actif { background: var(--texte); color: var(--fond); }
.autocomplete .item strong { white-space: nowrap; }
.autocomplete .item em { color: #ffe2a8; }
.autocomplete .item .canType { color: var(--discret); }
.autocomplete .item .pre { color: var(--discret); font-weight: 700; }

#carte { flex: 1; min-height: 0; background: #dfe5dc; }
#position {
  position: fixed;
  right: 12px;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 1000;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--fond);
  color: var(--texte);
  font-size: 26px;
  box-shadow: 0 2px 8px #0006;
}
#position.suivi { background: #2b6cb0; }
.leaflet-bottom.leaflet-right .leaflet-control-attribution { margin-right: 64px; }
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 6px 10px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--discret);
}
#etat.perime { color: #ffb347; font-weight: 600; }
.leaflet-popup-content { margin: 12px 14px; font: 14px/1.4 system-ui, sans-serif; }
.leaflet-popup-content h3 { margin: 0 0 2px; font-size: 15px; }
.leaflet-popup-content p { margin: 0 0 6px; color: #555; font-size: 13px; }
.leaflet-popup-content ul { margin: 0; padding: 0; list-style: none; max-height: 40vh; overflow-y: auto; }
.leaflet-popup-content li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 1px solid #eee; }
.leaflet-popup-content li b { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.leaflet-popup-content li.hors { opacity: .5; }
.leaflet-popup-content small { color: #777; margin-left: auto; white-space: nowrap; }

dialog#cal { width: min(480px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 16px; border: 0; border-radius: 14px; background: #f6f7f3; color: #1f2a24; font: 15px/1.35 system-ui, sans-serif; }
dialog#cal::backdrop { background: #000a; }
#cal h2 { margin: 0 0 10px; font-size: 18px; }
#cal h3 { margin: 14px 0 4px; font-size: 15px; }
#cal fieldset { margin: 0 0 10px; padding: 0; border: 0; }
#cal legend { padding: 0; font-weight: 600; margin-bottom: 2px; }
#cal fieldset label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
#cal fieldset label[hidden] { display: none; }
#cal select { min-height: 36px; max-width: 100%; font: inherit; }
#cal .ligne { display: flex; align-items: center; gap: 8px; font-weight: 600; }
#cal-bilan { margin: 12px 0 8px; font-weight: 600; }
#cal .note { margin: 6px 0; font-size: 13px; color: #55605a; }
#cal .principal, #cal .boutons a, #cal .boutons button, #cal .fermer { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid #1f2a24; border-radius: 22px; background: transparent; color: #1f2a24; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
#cal .principal { width: 100%; background: #1f2a24; color: #f1f4ee; }
#cal .principal:disabled { opacity: .4; cursor: default; }
#cal .boutons { display: flex; flex-wrap: wrap; gap: 8px; }
#cal .boutons[hidden] { display: none; }
#cal .fermer { width: 100%; margin-top: 14px; border-color: #b9c0b8; }
.leaflet-popup-content .vers-cal { display: inline-block; margin-top: 8px; font-weight: 600; }