@media screen and (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2vh 2vw;
    }

    nav h2 {
        font-size: 1.2em;
        margin: 5px 0;
    }

    #logo {
        width: 20vw;
        height: auto;
        margin-bottom: 10px;
    }

    .images {
        flex-direction: column;
        align-items: center;
        padding: 5vh 2vw;
    }

    .imageTop {
        width: 80%;
        height: auto;
        margin-bottom: 15px;
    }

    .projet {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3vh 2vw;
    }

    .projet img {
        width: 90%;
        height: auto;
    }

    .textProjet {
        width: 90%;
        font-size: 1em;
        padding: 0;
        margin-top: 10px;
    }

    .infos {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3vh 2vw;
        background-color:#d8d1cb;
    }

    .Map iframe {
        width: 90%;
        height: 40vh;
    }

    .Contact {
        width: 80%;
        height: auto;
        margin-top: 2vh;
        padding: 1vh 1vw;
    }

    .Telephone, .Mail {
        justify-content: center;
    }

    #contactMethod {
        width: 7vw;
        height: 6vh;
    }

    button {
        width: 80%;
        padding: 2vh 0;
        font-size: 1em;
    }

    footer {
        padding: 3vh 2vw;
        font-size: 0.9em;
    }
}