@media screen and (min-width: 768px) and (max-width: 1024px) {

    .container {
        max-width: 1024px;
        margin: 0 1rem;
    }


    /* NAV */

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

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

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

    /* SECTION 1 */

    #logo1 {
        width: 400px;
        height: 230px;
        transform: translateX(-60px) translateY(10px);
    }

    #fleur1 {
        width: 250px;
        height: 250px;
        transform: translateY(400px) translateX(10px);
        z-index: -10;
    }
    
    #femmeenceinte {
        width: 125px;
        height: 250px;
        transform: translateX(-10px) translateY(200px);
    }


    /* SECTION 2 */


    #section2 {
        margin: 0 1rem;
    }

    #fleche1 {
        position: absolute;
        transform: translateX(-325px) translateY(350px);
    }


    /* SECTION 3 */


    #section3 {
        margin: 0 1rem;
    }

    #fleur2 {
        width: 225px;
        height: 175px;
        z-index: -1;
    }


    /* SECTION 4 */


    #section4 {
        margin: 5rem 1rem 0 1rem;
    }

    #fleur3 {
         width: 250px;
    }

    #div1010 {
        margin-bottom: 3rem;
    }

    #div1013 {
        flex-direction: column;
        gap: 0;
    }

    #div1004 {
        transform: none;
        margin-top: 2rem;
    }


    /* SECTION 5 */


    #section5 {
        margin: 0 1rem;
    }

    #fleur4 {
        width: 225px;
    }


    /* SECTION 7 */


    #section7 {
        margin: 5rem 1rem;
    }

    #fleur7 {
        width: 250px;
        height: 250px;
    }


    /* SECTION 6 */


    #section6 {
        margin: 5rem 0;
    }

    #fleur5 {
        width: 250px;
    }

    #div1006 {
        margin: 10rem 0 5rem 0;
    }

    #savoir5 {
        width: 1000px;
    }


    /* SECTION 11 */


    #section11 {
        margin: 0 1rem;
    }

    #div1031 {
        flex-direction: column;
    }

    #section11 ul {
        width: 550px;
        transform: none;
    }

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

    #div1033 div {
        margin: 0 auto;
    }

    .card-container {
        width: 600px;
        height: 400px;
        margin: 0 auto;
    }

    .cartecadeau {
        width: 600px;
        height: 400px;
    }

    #fleche2 {
        display: none;
    }


    /* SECTION 8 */


    #section8 {
        margin: 0 1rem;
    }


    /* SECTION 9 */


    .carousel-container {
        display: none;
    }


    /* SECTION 10 */


    #div32 {
        flex-direction: column;
    }

    #div22 {
        width: 300px;
    }
}