@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 */


    .tuesenceinte {
        width: 150px;
    }

    .div101 {
        flex-direction: column;
    }

    .div101 div {
        margin: 20px;
    }

    .fleche1 {
        width: 50%;
        transform: scaleX(-1) rotate(90deg) translateY(100px);
        margin: 50px 0;
    }

    .presence-accouchement {
        max-width: 300px;
    }


    /* SECTION TEST, TEST1, TEST2 et TEST3 */


    #test ul {
        width: 270px;
        text-align: left;
        
    }
    
    #test1 ul {
        width: 270px;
        text-align: left;
    }
    
    #test2 ul {
        width: 270px;
        text-align: left;
    }
    
    #test3 ul {
        width: 270px;
        text-align: left;
    }

    .test4 {
        flex-direction: column;
    }


    /* SECTION 4 */


    #section4 h2 {
        width: 300px;
        margin: 0 auto;
    }

    .div3 {
        flex-direction: column;
        gap: 0;
        transform: translateY(100px);
    }

    #div105 {
        transform: translateY(225px);
    }

    #div106 {
        margin: 0;
    }
    

    /* SECTION 5 */


    #section5 {
        margin-top: 300px;
    }

    #section5 h1 {
        font-size: 60px;
    }

    #div104 {
        flex-direction: column;
        gap: 20px;
    }

    .divforfaits {
        background-color: #90ae74;
        border-radius: 50px;
    }

    #div108 {
        display: none;
    }

    #div6 {
        width: 280px;
        margin: 0 auto;
        margin-top: 100px;
    }

    #p {
        width: 280px;
        margin: 0 auto;
    }


    /* SECTION 6 */


    #section6 a {
        font-size: 23px;
    }


    /* SECTION 9 */


    #section9 h2 {
        width: 300px;
        margin: 0 auto;
    }

    .div3 {
        flex-direction: column;
        gap: 0;
        transform: translateY(120px);
    }

    #div110 {
        transform: translateY(350px);
    }

    #div106 {
        margin: 0;
    }


     /* SECTION 10 */


     #section10 {
        margin-top: 500px;
     }

     #div111 {
        font-size: 19px;
        margin: 0 auto;
    }


     /* SECTION 13 */


    #div9 {
        flex-direction: column;
    }

    #div117 {
        transform: translateY(20px);
    }

    #div114 {
        margin: 0;
    }

    #div113 {
        transform: translateY(100px);
    }
    
    #div10 {
        margin-top: 200px;
    }

    #div10 h2 {
        width: 300px;
        transform: translateX(-5px);
    }


    /* SECTION 14 */


    #section14 a {
        font-size: 19px;
    }


    /* SECTION 17 */


    #div115 {
        flex-direction: column;
        width: 300px;
        margin: 0 auto;
    }


    /* TEST6 */


    #div116 {
        flex-direction: column;
    }

    #div116 h2 {
        width: 300px;
    }

    #div116 p {
        width: 300px;
        transform: none;
    }

    .fleche2 {
        transform: translateX(100px) scaleX(-1) rotate(100deg);
    }

    .test7 {
        flex-direction: column;
    }

    #div102 {
        margin: 0 auto;
    }


    /* TEST8 */


    #div118 {
        width: 300px;
        margin: 0 auto;
    }

    #div103 {
        flex-direction: column;
        margin-bottom: 10px;
    }


    /* SECTION 25 */


    #div21 p {
        width: 250px;
        margin: 0 auto;
    }


    /* SECTION 26 */


    #div119 a {
        font-size: 25px;
    }

    #div120 {
        width: 270px;
        margin: 0 auto;
    }

    #div1033 {
        flex-direction: column-reverse;
        margin: 20px 0;
    }

    #div1033 p {
        width: 300px;
        transform: none;
        padding: 30px 0;
    }

    #div1033 a {
        transform: none;
        margin: 0 auto;
        transform: translateY(-10px);
    }

    .card-container {
        width: 300px;
        height: 200px;
        margin: 0 auto;
    }

    .cartecadeau {
        width: 300px;
        height: 200px;
        margin: 0 auto;
    }

    #div23 h2 {
        width: 280px;
        margin: 0 auto;
    }

    #div23 p {
        width: 250px;
        margin: 0 auto;
    }

    #div24 {
        flex-direction: column;
    }

    #div24 img {
        width: 80%;
        margin-top: 50px;
    }

    #fleche7 {
        display: none;
    }

    /* SECTION 27 */


    #section27 {
        padding: 0 1rem;
    }

    #div51 {
        padding: 1rem;
    }

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