/* Cartes des guides de villes : fond géographique et légende commune. */
html body.page-guide-ville #carte .ve-drawn-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 20px;
  border: 1px solid #c8ddda;
  border-radius: 20px;
  background: #f0f6f3;
}

html body.page-guide-ville #carte .ve-drawn-map-visual { min-width: 0; }
html body.page-guide-ville #carte .ve-drawn-city-map {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1;
  border: 1px solid #c8d7d1;
  border-radius: 18px;
  background: #f4f0e5;
}

html body.page-guide-ville #carte .ve-drawn-city-map path { vector-effect: none; }
html body.page-guide-ville #carte .ve-map-index { min-width: 0; }
html body.page-guide-ville #carte .ve-map-index-title {
  margin: 0 0 18px;
  color: #17444b;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1.25;
}

html body.page-guide-ville #carte .ve-map-places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

html body.page-guide-ville #carte .ve-map-places li { min-width: 0; margin: 0; }
html body.page-guide-ville #carte .ve-map-places a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 70px;
  padding: 12px;
  border: 1px solid #d9e5e0;
  border-radius: 12px;
  background: #ffffff;
  color: #17444b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}

html body.page-guide-ville #carte .ve-map-places a > span:first-child {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #087c83;
  color: white;
  font-size: 12px;
}

html body.page-guide-ville #carte .ve-map-places a:hover,
html body.page-guide-ville #carte .ve-map-places a:focus-visible { background: #e3f1eb; border-color: #087c83; }
html body.page-guide-ville #carte .ve-map-pin:hover text { fill: white !important; }
html body.page-guide-ville #carte .ve-map-pin:hover .ve-map-dot,
html body.page-guide-ville #carte .ve-map-pin:focus .ve-map-dot { fill: #b84e32; }
html body.page-guide-ville #carte .ve-map-caption { margin: 16px 0 8px; color: #526d76; font-size: 13px; line-height: 1.65; }
html body.page-guide-ville #carte .ve-map-credit { margin: 0; color: #526d76; font-size: 11px; line-height: 1.65; }
html body.page-guide-ville #carte .ve-map-credit a { color: #235d68; text-decoration: underline; }

@media (max-width: 1100px) {
  html body.page-guide-ville #carte .ve-drawn-map-layout { grid-template-columns: minmax(0, 1fr); }
  html body.page-guide-ville #carte .ve-drawn-map-visual { width: min(100%, 760px); margin-inline: auto; }
  html body.page-guide-ville #carte .ve-map-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  html body.page-guide-ville #carte .ve-drawn-map-layout { padding: 10px; gap: 20px; border-radius: 16px; }
  html body.page-guide-ville #carte .ve-map-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html body.page-guide-ville #carte .ve-map-places a { min-height: 74px; padding: 10px 8px; gap: 7px; font-size: 12px; }
  html body.page-guide-ville #carte .ve-map-places a > span:first-child { flex-basis: 25px; width: 25px; height: 25px; font-size: 11px; }
  html body.page-guide-ville #carte .ve-map-pin text { font-size: 26px; }
  html body.page-guide-ville #carte .ve-map-pin .ve-map-dot { r: 24px; }
}

@media (max-width: 700px) {
  html body.page-guide-ville #carte .ve-map-attribution text { font-size: 22px; }
}