/**
 * carto - Design Components in CSS, JS and HTML pour les cartes su portail
 * @version v1.1.0
 * 
 */

 @charset "UTF-8";

#map {
    padding: 5px;
    width: 100%;
    /* height: calc(100vh - 300px); /* Ajuster la hauteur en utilisant une unité relative */
    height: 100vh; /* Modifier cette valeur en fonction de vos besoins */
}
/* Styles pour le cadre */
#button-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne si l'espace est insuffisant */
    justify-content: space-around;
    margin-bottom: 10px;
}
#legend-btn {
    /* Styles spécifiques pour le bouton légende */
    background-color: #4CAF50;
    color: white;
    padding: 2px 2px; /* Ajustez la hauteur du bouton légende ici */
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#legend-btn:hover {
    background-color: #45a049;
}

#legend {
    display: none;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#legend img {
    max-width: 100%;
    height: 50%;
}

/* Styles responsifs */
@media screen and (max-width: 768px) {
    .fr-btn, .dom-tom-btn {
        max-width: calc(50% - 10px);
    }
}

@media screen and (max-width: 480px) {
    .fr-btn, .dom-tom-btn {
        max-width: 100%;
    }
}
.small-text {
    font-size: 80%; /* Vous pouvez ajuster le pourcentage selon vos besoins */
}