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


    #div2001 {
        margin-top: 10px;
    }

    #logo1 {
        width: 250px;
        height: 150px;
        transform: translateX(-35px);
    }

    #femmeenceinte {
        width: 100px;
        height: 200px;
        transform: translateX(-110px) translateY(300px);
    }

    #fleur1 {
        width: 175px;
        transform: translateX(50px) translateY(175px);
    }

    #textepays {
        width: 100%;
    }

    #section1 p {
        margin: 0 2rem;
    }


    /* SECTION 2 */


    #section2 {
        flex-direction: column;
    }

    #section2 p {
        padding: 0 2rem;
    }

    #div10001 {
        flex-direction: column;
    }

    #div10002 {
        transform: none;
    }

    #div10002 a {
        font-size: 20px;
        margin: 0;
    }

    #div10002 img {
        width: 40%;
        transform: translateY(-20px);
    }

    #section2 img {
        max-width: 200px;
    }


    /* VAGUE 1 */


    #vague1 img {
        width: 100%;
        height: 75px;
    }


    /* SECTION 3 */


    #section3 h2 {
        transform: none;
        display: flex;
        justify-content: center;
    }

    #fleur2 {
        width: 200px;
        height: 175px;
    }

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

    #section3 p {
        padding: 0 2rem;
    }


    /* SECTION 4 */
    
    #section4 {
        margin: 50px 1rem;
    }

    #fleur3 {
        width: 150px;
    }

    #div1010 {
        gap: 0;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    #div1001 {
        gap: 0;
        justify-content: space-evenly;
        flex-direction: column;
    }

    #div1002 {
        flex-direction: column;
        gap: 0;
        transform: none;
    }

    #div1001 img {
        max-width: 150px;
    }

    #div1002 img {
        max-width: 150px;
    }

    #div1003 {
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #div1004 {
        transform: none;
    }

    #div1012 {
        justify-content: space-evenly;
    }

    #div1013 {
        justify-content: space-evenly;
        transform: none;
        gap: 0;
        flex-direction: column;
    }

    #div1003 p {
        width: 120px;
    }


    /* VAGUE 2 */


    #vague2 img {
        height: 100px;
    }


    /* SECTION 5 */


    #fleur4 {
        width: 150px;
    }

    #div2003 {
        gap: 0;
    }

    #grossesse {
        max-width: 150px;
    }

    #accouchement {
        max-width: 150px;
        transform: translateX(-10px);
    }

    #post-partum {
        max-width: 100px;
    }

    #section5 {
        margin: 0 1rem;
    }


    /* SECTION 7 */


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

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

    #section7 {
        padding: 0 1rem;
    }


    /* SECTION 6 */


    #fleur5 {
        width: 150px;
    }

    #div1006 {
        transform: none;
        gap: 0;
    }

    #div11 {
        transform: none;
        margin: 0;
        flex-direction: column;
        gap: 0;
    }
    
    #div12 {
        transform: translateY(-60px);
    }

    #savoir1 {
        transform: translateY(-50px);
    }

    #div13 {
        transform: translateY(25px);
        flex-direction: column;
        gap: 0;
        margin: 0;
    }

    #savoir2 {
        transform: translateY(-50px);
    }

    #div14 {
        transform: translateY(-50px);
    }

    #div15 {
        gap: 0;
        padding: 5rem 0;
        margin: 0;
        flex-direction: column;
        transform: none;
    }

    #div16 {
        transform: translateY(-60px);
        width: 300px;
    }

    #savoir3 {
        transform: translateY(-20px);
    }

    #div17 {
        flex-direction: column;
        gap: 0;
        padding: 5rem 0;
        margin: 0;
    }

    #div18 {
        transform: translateY(-60px);
    }

    #savoir4 {
        transform: translateY(-50px);
    }

    #div19 {
        transform: translateY(-80px);
        gap: 0;
        margin: 0;
        flex-direction: column;
    }

    #div20 {
        transform: translateY(-60px);
        gap: 0;
        width: 300px;
    }

    #div20 p {
        margin: 0;
        padding-bottom: 10px;
    }

    #savoir5 {
        transform: translateY(-35px);
    }

    #jessica9 {
        max-width: 150px;
    }

    #section6 {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

    .mouvhaut {
        transform: translateY(-50px);
    }

    .mouvbas {
        transform: none;
    }

    #accompagnement-postnatal {
        max-width: 150px;
        transform: translateY(-80px);
    }

    #accompagnement-parental {
        max-width: 150px;
        transform: translateY(-80px);
    }


    /* SECTION 11 */


    #section11 {
        margin: 0 1rem;
    }

    #div1031 {
        flex-direction: column;
    }

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

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

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

    #div1033 a {
        transform: none;
        margin: 0 auto;
    }

    #fleche2 {
        display: none;
    }

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

    .cartecadeau {
        width: 300px;
        height: 200px;
    }


    /* SECTION 8 */ 


    #section8 {
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
    }


    /* SECTION 9 */


    #section9 h2 {
        transform: translateX(-110px);
    }

   .carousel-container {
        margin: 0 auto;
        width: 90%;
        overflow: hidden; 
        background-color: rgb(239, 222, 215);
        display: none;
      }
      
      .carousel {
        display: flex;
        width: calc(350px * 9); 
        animation: slide-mobile 60s ease-in-out infinite; 
      }
      
      .carousel img {
        width: 350px; 
        height: 150px; 
        flex-shrink: 0; 
      }
      
      @keyframes slide-mobile {
        0% { transform: translateX(0); } 
        10% { transform: translateX(0); } 
        11% { transform: translateX(-350px); }  
        21% { transform: translateX(-350px); } 
        22% { transform: translateX(-700px); } 
        32% { transform: translateX(-700px); } 
        33% { transform: translateX(-1050px); } 
        43% { transform: translateX(-1050px); } 
        44% { transform: translateX(-1400px); } 
        54% { transform: translateX(-1400px); } 
        55% { transform: translateX(-1750px); } 
        65% { transform: translateX(-1750px); } 
        66% { transform: translateX(-2100px); } 
        76% { transform: translateX(-2100px); } 
        77% { transform: translateX(-2450px); } 
        87% { transform: translateX(-2450px); } 
        88% { transform: translateX(-2800px); } 
        98% { transform: translateX(-2800px); } 
        98% { transform: translateX(0); } 
      } */


    /* SECTION 10 */


    #section10 {
        padding: 0 1rem;
    }

    #div31 {
        padding: 1rem;
    }

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