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

#map {
  height: 100%; /* Ajustez la hauteur de la carte selon vos besoins */
  width: 100%;
}

.carre {
  width: 150px; /* Ajustez la largeur du carré selon vos besoins */
  height: 100px; /* Ajustez la hauteur du carré selon vos besoins */
  background-color: green; /* Couleur de fond du carré */
  border-radius: 5px; /* Coins arrondis (ajustez selon vos besoins) */
  padding: 10px; /* Espace à l'intérieur du carré (ajustez selon vos besoins) */
  color: #fff; /* Couleur du texte à l'intérieur du carré (ajustez selon vos besoins) */
  position: absolute; /* Position absolue pour le placer par rapport à son conteneur parent */
  top: 10px; /* Ajustez la position verticale du carré */
  right: 10px; /* Ajustez la position horizontale du carré */
}

select {
  width: 100px; /* Ajustez la largeur du carré selon vos besoins */
  height: 50px; /* Ajustez la hauteur du carré selon vos besoins */
  background-color: green; /* Couleur de fond du carré */
  border-radius: 5px; /* Coins arrondis (ajustez selon vos besoins) */
  margin: 20px; /* Espace à l'intérieur du carré (ajustez selon vos besoins) */
  color: #fff; /* Couleur du texte à l'intérieur du carré (ajustez selon vos besoins) */
  position: absolute; /* Position absolue pour le placer par rapport à son conteneur parent */
  top: 30px; /* Ajustez la position verticale du carré */
  right: 50px; /* Ajustez la position horizontale du carré */
}

.legend {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.legend-item {
  display: flex; /* Enables Flexbox */
  align-items: center; /* Vertically centers the items */
  margin-bottom: 10px; /* Adds space between each legend item */
}

.legend-item:last-child {
  margin-bottom: 0; /* Removes bottom margin from the last item */
}

.legend img {
  width: 50px; /* Adjust as necessary */
  height: auto;
  margin-right: 10px; /* Adds some space between the image and the text */
}

.legend p {
  margin: 0; /* Removes default margin */
}