@media screen and (min-width: 320px) and (max-width: 767px) {
    .container {
        max-width: 767px;
        margin: 0 1rem;
    }

    /* NAV BARRE */

    
    .menuderoulant {
        flex-direction: column;
        transform: translateX(-20px)
    }

    nav {
        padding: 10px 0;
        position: relative;
        flex-direction: column;
    }

    .menuderoulant li.active > .sousmenuderoulant {
        display: block;
    }
    

    /* SECTION 1 */


    #div1 {
        flex-direction: column;
    }

    h1 {
        font-size: 40px;
    }

    /* SECTION TEST */


    #test10 {
        flex-direction: column;
    }

    .test11 h2 {
        font-size: 30px;
    }

    #img {
        width: 320px;
    }


    /* SECTION 10 */


    #section10 {
        padding: 0 1rem;
    }

    #div31 {
        padding: 1rem;
    }

    #div32 {
        display: flex;
        flex-direction: column;
    }
}