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 img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
#SectionIntro .Texte {
    position: absolute;
    width: 27%;
    top: 15vh;
    left: 5%;
    background: #ffffffad;
    border-radius: 1em;
    padding: 1em 2em;
}

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

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

#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;
    object-position: right bottom;
    z-index: -1;
}
#SectionHygiene .Texte {
    background: #ffffffbd;
    border-radius: 1em;
    padding: 1em 2em;
    width: 24%;
    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;
    top: 5%;
    padding: 1em 2em;
    width: 29%;
    margin: 5% auto auto 5%;
}

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

@media screen and (max-width: 1366px){
    #SectionIntro img {
        object-position: 80%;
    }

    #SectionHygiene .Img1 {
        object-position: 67% bottom;
    }
    #SectionHygiene .Texte {
        width: 33%;
        margin: auto 5% 5% auto;
    }

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

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

    h1, h2, p {
        text-align: center;
    }
    #SectionIntro h1, #SectionIntro p {
        text-align: left;
    }

    #SectionIntro .Texte {
        width: 66%;
        top: 10%;
        bottom: auto;
        left: 5%;
    }
    #SectionIntro h1 {
        font-size: 2em;
    }
    #SectionEnvironnement .Texte {
        width: 60%;
    }
    #SectionVoyage .Texte {
        top: unset;
        width: 40%;
        margin: auto auto 5% 5%;
    }
}

@media screen and (max-width: 750px){
    #SectionHygiene .Texte {
        width: 50%;
        margin: auto 5% 5% auto;
    }
    #SectionVoyage .Texte {
        width: 50%;
    }
}

@media screen and (max-width: 600px){
    #SectionIntro  h1 {
        font-size: 1.6em;
        margin: 0.5em 0;
    }
    h2 {
        font-size: 1.6em;
    }
    #SectionIntro .Texte {
       width: 90%;
    top: 13%;
    bottom: auto;
    left: 5%;
    }
    #SectionEnvironnement .Texte {
        width: 90%;
        margin: auto 5% 5% 5%;
    }
    #SectionVoyage .Texte {
        top: unset;
        width: 90%;
        margin: auto 5% 5% 5%;
    }
    #SectionHygiene .Texte {
        width: 90%;
        margin: auto 5% 5% 5%;
    }

}