/* Style des Cartes -------------------------------------------------------*/
/* Conteneur principal de la carte */
.conteneur-map {
margin: 10px 0;
padding: 0;
width: 90%;
height: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.carto-leaflet {
    height: 100%;
    width: 100%; 
    border-radius: 8px; 
    border: 1px solid #ccc;
    aspect-ratio: 4/3;
    display: block;     
}

/* Style pour la zone des boutons  */

.zone-action-carto {
    text-align: center;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}

.bouton-position {
margin-top: 10px; 
padding: 10px; 
cursor: pointer}

@media (max-width: 700px) {
.conteneur-map {
    max-width: 1100px;
    margin: 2px auto;
    padding: 0 ;
    justify-content: "center";
}
}
/* Rendre l'iframe responsive */
.iframe-responsive {
    position: relative;
    width: 100%;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #f0f0f0; /* Fond gris pendant le chargement */
    aspect-ratio: 1/1;
}