section.carte-agence{
    padding: 50px 0;
}

section.carte-agence .container .wrapper{
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
}

section.carte-agence .container .wrapper .contenu .content-left .card-agence,
section.carte-agence .container .wrapper .contenu .titre{
    display: none;
}

section.carte-agence .container .wrapper .contenu .content-left{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section.carte-agence .container .wrapper .contenu .content-left .sous-titre{
    color: var(--primary-bleu);
    font-family: Trenda, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

section.carte-agence .container .wrapper .contenu .content-left p{
    color: var(--shades-noir-2);
    font-family: Trenda, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

section.carte-agence .container .wrapper .contenu .content-left .btn{
    margin: 20px auto 0;
}

section.carte-agence .container .wrapper .carte h2 {
    margin-bottom: 30px;
}

section.carte-agence .container .wrapper .carte .map{
    height: 235px;
    width: 100%;
    margin-bottom: 20px;
}

section.carte-agence .container .wrapper .carte .card-agence{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #E7F0F7;
    border-radius: 4px;
}

section.carte-agence .container .wrapper .carte .card-agence .content-left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 71%;
}

section.carte-agence .container .wrapper .carte .card-agence .content-left .title{
    color: var(--shades-noir);
    font-family: Trenda, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

section.carte-agence .container .wrapper .carte .card-agence .content-left .adresse{
    color: var(--shades-noir-2);
    font-family: Trenda, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.17px;
}

section.carte-agence .container .wrapper .carte .card-agence .content-right{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 21%;
}

section.carte-agence .container .wrapper .carte .card-agence .content-right .contact-agence{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

section.carte-agence .container .wrapper .carte .card-agence .content-right .contact-agence a{
    display: flex;
    height: fit-content;
}

section.carte-agence .container .wrapper .carte .card-agence .content-right .savoir-plus{
    display: flex;
    justify-content: center;
    color: var(--bleufonce);
    text-align: center;
    font-family: Trenda, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.17px;
}

section.carte-agence .container .wrapper .carte .card-agence .content-right .savoir-plus::after{
    bottom: 3px;
}

section.carte-agence .gm-style .gm-style-iw-c{
    background:var(--bleufonce);
    max-width: 135px !important;
    padding:10px 15px 15px !important;
}

section.carte-agence .gm-style .gm-style-iw-c .gm-style-iw-ch{
    padding: unset !important;
}

section.carte-agence .gm-style .gm-style-iw-c .gm-style-iw-d{
    max-height: unset !important;
    overflow: unset !important;
}

section.carte-agence .gm-style .gm-style-iw-tc::after{
    background:var(--bleufonce);
}

section.carte-agence .gm-style .gm-style-iw-c .content-popup-marker{
    display: flex;
    align-items: center;
    gap:20px;
    color:#fff;
}

section.carte-agence .gm-style .gm-style-iw-c .content-popup-marker h3{
    color: var(--Shades-Blanc, #FFF);
    font-family: Trenda, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.17px;
}

section.carte-agence .gm-ui-hover-effect{
    display: none !important;
}

@media screen and (min-width: 992px){
    section.carte-agence{
        padding: 100px 0;
    }

    section.carte-agence .container .wrapper {
        display: flex;
        flex-direction: row;
        gap: 50px;
    }

    section.carte-agence .container .wrapper .contenu{
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    section.carte-agence .container .wrapper .contenu .titre{
        display: block;
    }

    section.carte-agence .container .wrapper .contenu .content-left .sous-titre{
        font-size: 20px;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence{
        display: flex;
        justify-content: space-between;
        padding: 15px;
        background-color: #E7F0F7;
        border-radius: 4px;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-left{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 71%;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-left .title{
        color: var(--shades-noir);
        font-family: Trenda, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-left .adresse{
        color: var(--shades-noir-2);
        font-family: Trenda, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.17px;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-right{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 21%;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-right .contact-agence{
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-right .contact-agence a{
        display: flex;
        height: fit-content;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-right .savoir-plus{
        display: flex;
        justify-content: center;
        color: var(--bleufonce);
        text-align: center;
        font-family: Trenda, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.17px;
    }

    section.carte-agence .container .wrapper .contenu .content-left .card-agence .content-right .savoir-plus::after{
        bottom: 3px;
    }

    section.carte-agence .container .wrapper .contenu .content-left .btn{
        margin: 0;
    }

    section.carte-agence .container .wrapper .carte h2,
    section.carte-agence .container .wrapper .carte .card-agence{
        display: none;
    }

    section.carte-agence .container .wrapper .contenu{
        width: 350px;
    }

    section.carte-agence .container .wrapper .carte .map{
        height: 392px;
        width: 520px;
        margin-bottom: 0;
    }

    section.carte-agence .gm-style .gm-style-iw-c{
        max-width: 175px !important;
    }

    section.carte-agence .gm-style .gm-style-iw-c .content-popup-marker h3{
        font-size: 16px;
    }
}

@media screen and (min-width: 1200px){
    section.carte-agence .container .wrapper .carte .map{
        width: 680px;
    }
}