body{
    background: var(--grisclair);
}
#Page{
    width: 100%;
    overflow-x: hidden;
}
section{
    padding: 2% 10%;
}
h2{
    color: #5d4b44;
}
p {
    line-height: 1.8em;
    letter-spacing: 0.1em;
}

.ContenuSection{
    padding: 1% 10% 4% 10%;
}
.SectionAnimations{
    margin: 2% 0;
}

#SectionIntro {

}
#SectionIntro img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 80%;
}
#SectionIntro .Texte {
    position: absolute;
    width: 25%;
    top: 20vh;
    left: 5%;
    background: #ffffffad;
    border-radius: 1em;
    padding: 1em 2em;
}

.AnimationScroll img{
    max-height: 300px;
    object-fit: contain;
}

#SectionHygiene {
    position: relative;
    margin: 2% 0;
    padding: 0;
}
#SectionHygiene .Bloc1 {
    position: relative;
    display: flex;
    min-height: 90vh;
}
#SectionHygiene .Img1{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#SectionHygiene .Texte {
    background: #ffffffbd;
    border-radius: 1em;
    padding: 1em 2em;
    width: 24%;
    margin: auto 5% 5% auto;
}

#SectionJouets {
    position: relative;
    margin: 2% 0;
    padding: 0;
}
#SectionJouets .Bloc1 {
    position: relative;
    display: flex;
    min-height: 90vh;
}
#SectionJouets .Img1{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    z-index: -1;
}
#SectionJouets .Texte {
    background: #ffffffbd;
    border-radius: 1em;
    padding: 1em 2em;
    width: 24%;
    margin: 5% auto auto 5%;
}

#SectionBalade {
    position: relative;
    margin: 2% 0;
    padding: 0;
}
#SectionBalade .Bloc1 {
    position: relative;
    display: flex;
    min-height: 90vh;
}
#SectionBalade .Img1{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#SectionBalade .Texte {
    background: #ffffffbd;
    border-radius: 1em;
    top: 5%;
    padding: 1em 2em;
    width: 29%;
    margin: 5% auto auto 5%;
}

#SectionEquipement {
    position: relative;
    margin: 2% 0;
    padding: 0;
}
#SectionEquipement .Bloc1 {
    position: relative;
    display: flex;
    min-height: 90vh;
}
#SectionEquipement .Img1{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#SectionEquipement .Texte {
    background: #ffffffbd;
    border-radius: 1em;
    padding: 1em 2em;
    width: 29%;
    margin: auto 5% 5% auto;
}


@media screen and (max-width: 1366px){
    #SectionIntro .Texte {
        width: 33%;
        top: auto;
        bottom: 10%;
        left: 5%;
    }
    #SectionHygiene .Texte {
        width: 40%;
    }

    #SectionJouets .Texte {
        width: 40%;
    }
}

@media screen and (max-width: 980px){
   
    #SectionIntro h1, #SectionIntro p {
        text-align: left;
    }
    #SectionIntro h1 {
        font-size: 2em;
    }

    #SectionIntro .Texte {
        width: 50%;
        top: auto;
        bottom: 10%;
        left: 5%;
    }
    
     #SectionHygiene .Texte {
        width: 60%;
    }

    #SectionJouets .Texte {
        width: 60%;
        margin: 5% 5% auto auto;
    }
    #SectionJouets .Img1 {
        object-position: 65% bottom;
    }

    #SectionBalade .Texte {
        width: 60%;
        margin: auto 5% 5% 5%;
    }

    #SectionEquipement .Texte {
        width: 50%;
    }
    #SectionEquipement .Img1 {
        object-position: 70%;
    }
}

@media screen and (max-width: 750px){
    #SectionEquipement .Texte {
        width: 60%;
    }
}

@media screen and (max-width: 600px){
    h1, h2, p {
        text-align: center;
    }
    h2 {
        font-size: 1.6em;
    }
    #SectionIntro h1 {
        font-size: 1.6em;
        margin: 0.5em 0;
    }
    #SectionIntro .Texte {
        width: 55%;
        top: 7%;
        bottom: auto;
        right: 5%;
        padding: 0.5em 1em;
        left: auto;
    }

    #SectionHygiene .Texte {
        width: 90%;
        margin: auto 5% 5% 5%;
    }

    #SectionJouets .Texte {
        width: 90%;
        margin: 5% 5% auto auto;
    }

    #SectionBalade .Texte {
        width: 90%;
        margin: auto 5% 5% 5%;
    }

    #SectionEquipement .Texte {
        width: 90%;
        margin: auto 5% 5% 5%;
    }
}

@media screen and (max-width: 400px){
    
}