body {
  --gris-bleute: #323e48;
  --vert-sombre: #013632;
  --vert-premier: #005844;
  --vert-premier-rgb: rgba(0, 88, 68, 0.8);
  --vert-franc: #016f3d;
  --rouge-sombre: #b01e1c;
  --rouge-premier: #f12e1f;
  --or-sombre: #9d7614;
  --or-premier: #c2901b;
  --or-sombre-hover: #854d0e;
  --argent: #d4d4d4;
  --blanc: #ffffff;
  --noir: #000000;
  --gris-moyen: #95aab1;
  --gris-vert: #fafcfa;
  --jaune: #ffd429;

  --font-gotham: Gotham, Inter, ui-sans-serif, system-ui;
  --font-pompei: Pompei, ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}

/* Appliquer la même couleur pour tous les clusters */
.marker-cluster div {
  background-color: var(--vert-premier) !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px var(--vert-sombre);
  font-family: var(--font-gotham);
  border: 2px solid var(--vert-sombre);
}

.leaflet-container .leaflet-popup-content a.shortnamedest,
.leaflet-container .leaflet-popup-content span.shortnamedest {
  color: var(--or-sombre);
  font-family: var(--font-pompei);
  font-weight: 500;
}

.leaflet-container .leaflet-popup-content {
  margin: 20px;
}