:root { 
  --gap: 10px; 
}

/* Base */
html, body { 
  height: 100%; 
  margin: 0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; 
}
body { 
  display: grid; 
  grid-template-rows: 56px 1fr; 
  background:#fff; 
}

/* Header */
header { 
  display:flex; 
  align-items:center; 
  padding:0 var(--gap); 
  border-bottom:1px solid #eee; 
  gap:12px; 
}
header h1 { font-size: 18px; margin:0; font-weight: 700; }
header .muted { opacity:.6; font-weight:500; }

/* Layout principal */
.app { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: var(--gap); 
  padding: var(--gap); 
  height: calc(100vh - 56px); 
  box-sizing: border-box; 
}

/* Sidebar (liste) */
.sidebar { 
  display: grid; 
  grid-template-rows: auto 1fr; 
  min-width: 280px; 
  border: 1px solid #eee; 
  border-radius: 16px;  
  overflow: hidden; 
  background: #fff; 
  scrollbar-color: #c5c5c5 transparent;
}

/* Barre de recherche */
.controls { 
  display: grid; 
  grid-template-columns: 1fr 0.4fr; 
  gap: 8px; 
  padding: 10px; 
  border-bottom: 1px solid #eee; 
  background:#fafafa; 
}
.controls input, 
.controls select { 
  font: inherit; 
  padding: 10px 12px; 
  border:1px solid #ddd; 
  border-radius: 10px; 
  outline: none; 
}

/* Liste de salles */
.list { 
  overflow: auto; 
  padding: 8px; 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 20px; 
  align-content: start;
  align-items: start; 
  grid-auto-rows: auto; 
}

/* Carte de salle */
.card { 
  display: grid; 
  grid-template-columns: 80px 1fr; 
  align-items: center; 
  gap: 10px; 
  padding: 0px; 
  border: 1px solid #eee; 
  border-radius: 6px; 
  background: #fff; 
  cursor: pointer; 
  overflow: hidden;
  height: 15vh;
  transition: transform .2s ease, box-shadow .2s ease, border-color .1s ease; 
}
.card:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 4px 16px rgba(0,0,0,.06); 
  border-color:#e3e3e3; 
}
.thumb { 
  width:80px; 
  height:100%; 
  border-radius:6px 0 0 6px; 
  object-fit:cover; 
  background:#f3f3f3; 
}
.title { font-weight: 800; margin: 0 0 6px; white-space: nowrap;}
.meta { font-size: 12px; opacity:.75; margin: 0; line-height:1.4; white-space: pre-line; }
.no-geo { opacity:.5; }

/* Carte Leaflet */
#map { 
  width: 100%; 
  height: 100%; 
  border: 1px solid #eee; 
  border-radius: 16px; 
  overflow: hidden; 
}
.map-wrap { border-radius:16px; overflow:hidden; }
.leaflet-popup-content { margin: 8px 10px; }
.popup-title { font-weight: 800; margin: 0 0 4px; }
.popup-meta { font-size:12px; opacity:.75; margin:0 0 6px; }
.popup-actions a { text-decoration:none; font-weight:700; }

/* Responsive */
@media (max-width: 1400px){
  .list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1000px){
  .app{ 
    grid-template-columns: 1fr; 
    grid-template-rows: 48vh 52vh; 
  }
  #map { order: 2; }
  .sidebar { order: 1; }
  .list { grid-template-columns: 1fr; } 
}

@media (max-width: 432px) and (orientation: portrait) {
  .controls{
    width: 95%;
    grid-template-columns: 0.9fr 0.5fr;
  }

  .controls input{
    width: 88%;
  }

  .controls #district{
    width: 100%;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
    .app{
        width: 204vh;
        display: inline-flex;
    }

    .sidebar{
        width: 100%;
    }

    #district{width: 101%;}
}