/*=========================Section choix lieu cabinet ===================*/

#choixCabinet {
    display: flex;
}

.choixC {
    background-color: #093C09;
    color: white;
    width: 50%;
    text-align: center;
}

.choixC a {
    text-decoration: none;
    color: white;
    padding: 30px 41%;

}

.choixC:hover {
    background-color: #048204
}

#choixMulhouse {
    border-right: solid 2px white;
}

/* ========== Responsive design Choix Cabinet ======*/

@media screen and (max-width: 480px) {
    #choixCabinet {
        margin-top: 4rem;
    }

    .choixC {
        width: 100%;
        text-align: center;
    }
    .choixC a {
        padding: inherit;
    }

}

@media (min-width: 481px) and (max-width: 1024px) {
    #choixCabinet {
        margin-top: 5rem;
    }
}

/*=========================Section description lieux ===================*/

.lieuCabinet {
    text-align: center;
}

.lieuCabinet h2 {
    box-shadow: 2px 3px 3px grey;
}

.moitie {
    display: flex;
    justify-content: space-around;
}

.moitie:last-of-type {
    margin-top: 20px;
}

.descrLieu {
    text-align: left;
    width: 50%;
    border: 2px solid black;
    padding: 1.9% 20px;
    margin-right: 10px;
}

.descrLieu ul span {
    font-size: 1.2em;
    font-weight: bold;
}

.descrLieu ul:last-of-type {
    margin-top: 35px;
}

.moitie img {
    width: 50%;
}

.map {
    width: 50%;
    margin-left: 30px;
}

/*==================== Responsive description lieux ==========*/

@media screen and (max-width: 480px) {

    body {
        width: 102%
    }

    #choixCabinet a {
        padding: 1.2rem 1.6rem;
    }

    .moitie {
        display: flex;
        flex-direction: column;
    }

    .moitie:last-of-type {
        margin: auto;
    }

    .descrLieu {
        text-align: left;
        width: 100%;
        padding: auto;
        margin: 0;
        font-size: 0.8em;
    }

    .descrLieu ul span {
        font-size: 1.2em;
        font-weight: bold;
    }

    .descrLieu ul:last-of-type {
        margin: auto;
    }

    .moitie img {
        height: auto;
        width: auto;
    }

    .map {
        width: 400px;
        height: 400px;
        margin: 10px;
    }

}

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        width: 102%
    }

    #choixCabinet a {
        padding: 1.2rem 1.6rem;
    }

    .moitie {
        display: flex;
        flex-direction: column;
    }

    .moitie:last-of-type {
        margin: auto;
    }

    .descrLieu {
        text-align: left;
        width: 100%;
        padding: auto;
        margin: 0;
        font-size: 0.8em;
    }

    .descrLieu ul span {
        font-size: 1.2em;
        font-weight: bold;
    }

    .descrLieu ul:last-of-type {
        margin: auto;
    }

    .moitie img {
        height: auto;
        width: auto;
    }

    .map {
        width: 99%;
        height: 700px;
        margin: 0px;
    }

}