:root{
  --ink:#090909;--paper:#fff5c6;--acid:#dbff00;
  --green:#21d35b;--red:#ff3030;--blue:#1f65ff;--purple:#8b4dff;
  --partial:#ffd400;--grey:#9aa0a6;--shadow:5px 5px 0 #000
}
*{box-sizing:border-box}
html,body,#app,#map{height:100%;margin:0;overflow:hidden}
body{font-family:Arial Black,Impact,sans-serif;background:var(--paper);color:var(--ink)}
#app{display:grid;grid-template-columns:minmax(300px,360px) 1fr}
#map{grid-column:2;background:#ddd;min-height:0}
.leaflet-container{font-family:Arial,sans-serif}
.leaflet-tile{max-width:none!important}

#panel{grid-column:1;grid-row:1;border-right:3px solid #000;background:var(--paper);z-index:500;overflow:auto;padding:72px 10px 10px;display:flex;flex-direction:column;gap:9px}
header,.card,.stats>div{border:3px solid #000;background:#fff;box-shadow:var(--shadow);padding:9px}
#logo{position:absolute;top:10px;left:10px;z-index:900;padding:7px 11px}
#logo b{font-size:26px;letter-spacing:-1.5px;display:block;line-height:.85}
#logo span{font-size:10px;display:block;margin-top:3px;text-transform:uppercase}
header span,.note,p,small,label,em,button,input,select,textarea,#list{font-family:Arial,sans-serif;font-weight:900}

button,input,select,textarea{border:3px solid #000;background:#fff;padding:8px;width:100%;font-size:12px;min-height:38px}
button{background:var(--acid);box-shadow:3px 3px 0 #000;text-transform:uppercase;margin:0;cursor:pointer;line-height:1}
button:disabled{background:#eee;color:#888;box-shadow:none;cursor:default}
textarea{min-height:auto;resize:vertical}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stats strong{font-size:22px;display:block}
.stats small{font-size:9px;text-transform:uppercase}

.bar{height:24px;border:3px solid #000;display:flex;background:#eee;margin:5px 0 8px;overflow:hidden}
.bar i{display:block;height:100%}
#barOpen,#areaOpen{background:var(--green)}
#barPartial,#areaPartial{background:var(--partial)}
#barClosed,#areaClosed{background:var(--red)}
#barUnknown,#areaUnknown{background:var(--grey)}

label{font-size:12px;display:block}
em{float:right;font-style:normal;font-size:11px}
.note{font-size:11px;margin:4px 0 0}
.canicule{background:var(--acid);border:2px solid #000;padding:5px 6px;margin:4px 0;font-size:11px}
.canicule a{color:#000}

/* Recherche : adresse pleine largeur puis 3 boutons égaux -> "Tout voir" tient */
.search{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.search input{grid-column:1/-1}
.search button{padding:8px 4px;font-size:11px;white-space:nowrap}

.filters{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.filters input{width:auto;min-height:auto}
.filters label{border:2px solid #000;background:#fff;padding:6px;font-size:11px;display:flex;align-items:center;gap:4px}

#q{margin-bottom:6px}
#sort{margin-bottom:6px}
#list{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.item{border:2px solid #000;background:#fff;padding:7px;box-shadow:2px 2px 0 #000;cursor:pointer}
.item b{font-family:Arial Black,Arial,Helvetica,sans-serif;font-size:12px;display:block;margin:2px 0}
.item small{font-size:10px}
.sgcard button{font-size:11px}

.pill{display:inline-block;border:2px solid #000;padding:2px 5px;font-size:9px;margin:0 3px 3px 0;text-transform:uppercase;color:#000}
.allowed{background:var(--green)}
.dogpark{background:var(--blue);color:#fff}
.woods{background:var(--purple);color:#fff}
.partial{background:var(--partial)}
.closed,.cemetery{background:var(--red);color:#fff}
.unknown{background:var(--grey);color:#fff}
.review{background:#fff;border-style:dashed}

#legend{position:absolute;right:12px;bottom:12px;z-index:450;border:3px solid #000;background:#fff;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:8px;padding:8px;font-family:Arial,sans-serif;font-weight:900;font-size:12px;max-width:60vw}
#legend span:before{content:"";display:inline-block;width:12px;height:12px;border:2px solid #000;margin-right:3px;vertical-align:-2px}
.green:before{background:var(--green)}.blue:before{background:var(--blue)}.purple:before{background:var(--purple)}.red:before{background:var(--red)}.yellow:before{background:var(--partial)}.grey:before{background:var(--grey)}

#toggle{display:none}

/* Éclair Wildlabs — discret, en bas du panneau */
#brand{align-self:center;margin:3px 0 2px;opacity:.4;line-height:0}
#brand:hover{opacity:1}
#brand svg{height:13px;width:auto;display:block;fill:#000}

/* Popup */
.leaflet-popup-content-wrapper{border:3px solid #000;border-radius:0;box-shadow:5px 5px 0 #000}
.pop h3{font-family:Arial Black,Arial,Helvetica,sans-serif;margin:0 0 6px;font-size:16px}
.pop dl{display:grid;grid-template-columns:96px 1fr;gap:4px;font-family:Arial,sans-serif;font-size:12px;margin:6px 0}
.pop dt{font-weight:900}
.pop dd{margin:0}
.popbtns{display:flex;gap:6px;margin-top:6px}
.lk{flex:1;display:block;text-align:center;border:2px solid #000;background:var(--acid);padding:7px 4px;font-family:Arial,sans-serif;font-weight:900;font-size:11px;text-transform:uppercase;text-decoration:none;color:#000;cursor:pointer;box-shadow:2px 2px 0 #000;min-height:auto}
.geo{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #000;box-shadow:0 0 0 7px rgba(31,101,255,.25)}

/* Modale suggestion */
#suggestModal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;display:none;align-items:center;justify-content:center;padding:14px}
#suggestModal.show{display:flex}
#suggestForm{position:relative;width:min(420px,100%);max-height:90dvh;overflow:auto;background:var(--paper);border:3px solid #000;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px}
#suggestForm h3{font-family:Arial Black,Arial,Helvetica,sans-serif;margin:0;font-size:20px}
.sgsub{margin:0;font-family:Arial,sans-serif;font-weight:900;font-size:13px;text-transform:uppercase}
#suggestForm label{font-size:11px;text-transform:uppercase;display:flex;flex-direction:column;gap:3px}
#suggestClose{position:absolute;top:8px;right:8px;width:34px;height:34px;padding:0;font-size:20px;background:var(--red);color:#fff}
#suggestSend{background:var(--green)}

@media(max-width:760px){
  #app{display:block}
  #map{height:100dvh;width:100vw}
  #panel{position:absolute;left:8px;right:8px;bottom:8px;max-height:50dvh;border:3px solid #000;box-shadow:var(--shadow);transform:translateY(calc(100% - 42px));transition:.2s;z-index:800;padding:6px;gap:6px}
  #panel.open{transform:translateY(0)}
  #toggle{display:block;position:sticky;top:0;z-index:2;margin:0;background:var(--acid);min-height:34px;padding:5px}
  #logo{top:8px;left:8px;padding:5px 8px}
  #logo b{font-size:18px}
  #logo span{display:none}
  .stats>div,.card{padding:6px;box-shadow:3px 3px 0 #000}
  .stats strong{font-size:16px}
  .stats small,label{font-size:9px}
  button,input,select{min-height:34px;padding:6px;font-size:11px}
  .search button{font-size:10px;padding:6px 2px}
  .filters label{font-size:9px;padding:4px}
  #list{max-height:18dvh}
  .bar{height:16px}
  #legend{left:8px;right:8px;bottom:54px;max-width:none;font-size:9px;padding:5px;gap:5px;justify-content:center}
  .leaflet-control-zoom{display:none}
}