html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: calc(100vh - 49px);
  width: 100%;
  background: var(--bs-body-bg);
  position: relative;
}

.leaflet-tile-pane {
  filter: grayscale(0.3) brightness(0.85) invert(1) hue-rotate(180deg);
}

.leaflet-container {
  background: #0c0d0f;
}

/* La surbrillance est pilotée exclusivement en JS (layer.setStyle), jamais par
   :hover CSS : le survol d'un marqueur doit pouvoir mettre en surbrillance le
   département/la région sous-jacent(e) même quand le curseur n'est pas
   physiquement sur le polygone. Un :hover CSS en plus de ce mécanisme JS
   entrerait en conflit sur l'attribut fill (élément visuellement survolé vs
   polygone réellement ciblé par l'évènement Leaflet), d'où l'incohérence
   intermittente observée avant cette correction. */
.terroir-feature {
  fill: var(--netark-accent-2, #4c689d);
  fill-opacity: 0.25;
  stroke: var(--bs-body-color, #eceae6);
  stroke-width: 1;
  cursor: pointer;
}

.leaflet-tooltip.terroir-label {
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid rgba(236, 234, 230, 0.2);
  color: var(--bs-body-color, #eceae6);
  font-family: var(--netark-font-heading, "JetBrains Mono", monospace);
  font-size: 0.75rem;
}

#info-specialties .badge {
  font-weight: 500;
}

#terroir-filters {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: 260px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: rgba(18, 18, 18, 0.92);
  border: 1px solid rgba(236, 234, 230, 0.15);
}

#terroir-filters-toggle {
  background: transparent;
  color: var(--bs-body-color, #eceae6);
  border: none;
  border-radius: 0;
}

#terroir-filters-toggle-icon {
  transition: transform 0.15s ease;
}

/* Sur mobile, le panneau ne doit jamais masquer toute la carte : replié par
   défaut sur sa seule barre de titre (bouton toggle), il ne s'étend en pleine
   hauteur/largeur que si l'utilisateur le déplie explicitement. */
@media (max-width: 767.98px) {
  #terroir-filters {
    width: calc(100% - 24px);
    max-height: calc(100vh - 90px);
  }

  #terroir-filters.collapsed {
    max-height: none;
  }

  #terroir-filters.collapsed #terroir-filters-body {
    display: none;
  }

  #terroir-filters.collapsed #terroir-filters-toggle-icon {
    transform: rotate(-90deg);
  }
}

#dept-info-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  width: 280px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: rgba(18, 18, 18, 0.92);
  border: 1px solid rgba(236, 234, 230, 0.15);
  padding: 12px 14px;
  pointer-events: auto;
}

@media (max-width: 576px) {
  #dept-info-panel {
    width: calc(100% - 24px);
  }
}

.terroir-search-results {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(236, 234, 230, 0.15);
  border-radius: 6px;
  margin-top: -4px;
  margin-bottom: 8px;
}

.terroir-search-results .list-group-item {
  background: transparent;
  border-color: rgba(236, 234, 230, 0.1);
}

.terroir-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.terroir-filter-group {
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(236, 234, 230, 0.08);
}

.terroir-filter-group:last-child {
  border-bottom: none;
}

.terroir-filter-group .btn-link {
  color: inherit;
}

.terroir-filter-group .btn-link::after {
  content: '▾';
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.terroir-filter-group .btn-link.collapsed::after {
  transform: rotate(-90deg);
}

.terroir-filter-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
}

.terroir-filter-item .terroir-filter-swatch {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.terroir-filter-swatch img.emoji,
.terroir-poi-marker img.emoji {
  width: 65%;
  height: 65%;
  vertical-align: middle;
}

.terroir-filter-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--bs-body-secondary-color, #8b8b8b);
}

.terroir-poi-marker {
  border-radius: 50%;
  border: 2px solid rgba(12, 13, 15, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #17181a;
  color: var(--bs-body-color, #eceae6);
  border: 1px solid rgba(236, 234, 230, 0.15);
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.leaflet-popup-content {
  margin: 10px 14px;
}

.terroir-poi-popup {
  min-width: 180px;
  max-width: 240px;
}

.terroir-poi-thumb {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.leaflet-popup a.terroir-poi-link {
  color: var(--bs-primary, #e60e0e);
  text-decoration: none;
  cursor: pointer;
}

.leaflet-popup a.terroir-poi-link:hover {
  text-decoration: underline;
}

.terroir-poi-source {
  font-size: 0.7rem;
}

.terroir-poi-source a {
  color: #199e70;
  text-decoration: none;
}

.terroir-poi-source a:hover {
  text-decoration: underline;
}