* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; }
body { color: #18212f; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fff; }
header { padding: 1rem 1.25rem; border-bottom: 1px solid #d8dee9; background: #fff; }
h1 { margin: 0; font-size: 1.4rem; }
p { margin: .35rem 0 0; }
.filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-top: 1rem; }
label { display: grid; gap: .25rem; font-weight: 600; }
select, button { min-height: 2.25rem; border: 1px solid #9aa5b1; border-radius: .3rem; padding: .35rem .55rem; background: #fff; font: inherit; }
#reinitialiser { cursor: pointer; background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
#carte { position: relative; height: 70vh; min-height: 520px; width: 100%; overflow: hidden; }
.maplibregl-map { width: 100%; height: 100%; }
.pin-dpe { display: grid; place-items: center; width: 30px; min-height: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px #334155; color: #fff; cursor: pointer; font-weight: 700; }
.pin-historique { opacity: .7; filter: saturate(.7); }
.pin-nouveau { width: 38px; min-height: 38px; height: 38px; border-width: 3px; outline: 3px solid #facc15; box-shadow: 0 0 0 5px rgb(250 204 21 / .28), 0 2px 8px #334155; }
.badge-nouveau { display: inline-block; padding: .18rem .45rem; border-radius: .25rem; background: #fef3c7; color: #92400e; }
.badge-historique { display: inline-block; padding: .18rem .45rem; border-radius: .25rem; background: #e2e8f0; color: #334155; }
.popup h2 { margin: 0 0 .55rem; font-size: 1rem; }
.popup p { margin: .28rem 0; }
.popup a { color: #1d4ed8; }
@media (max-width: 600px) { #carte { height: 65vh; min-height: 440px; } }