/* On regle la position pour la map */
.carte {
    position: absolute;
    top: 0px;
    margin-top: -750px;
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.8s ease;
}

/* On regle la marge pour afficher la map */
.map-depl {
    margin-top: 0;
}

/* On affiche le logo du footer pour les PC et on redimantione */
@media screen and (min-width: 1280px) {
    .carte {
        width: 1000px;
    }
}

/* On enleve le logo du footer pour les tablette et smarthone et on redimantione */
@media screen and (max-width: 1279.98px) {
    .carte {
        width: 1000px;
    }
}

/* On redimantione les smarthone */
@media screen and (max-width: 991.98px) {
    .carte {
        width: 600px;
    }
}

/* On redimantione les smarthone */
@media screen and (max-width: 575.98px) {
    .carte {
        width: 350px;
    }
}

/* On regle le lien sur l'adresse de l'association */
.btn-local {
    background-color: none;
    cursor: pointer;
    color: #fff;
}

/* Asurvole de la souris, on change la couleur */
.btn-local:hover {
    color: rgb(0, 191, 255);
}

/* On regle le btn fermer */
.bi-close {
    text-align: right;
    padding: 10px 10px 20px 0;
    cursor: pointer;
    color: var(--color-primary);
    font-size: 25px;
}

/* Au survole de la souris, on modifi la couleur */
.bi-close:hover {
    color: var(--color-secondary);
}

/* On cregle le textarea du formaulaire contact */
#message {
    min-height: 150px;
}

/* On regle la fram de la carte google */
.carteFram {
    width: 100%;
    height: 500px;
    border: 0;
}