@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*
font-family: 'Josefin Sans', sans-serif;
font-family: 'Merriweather', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Serif', serif;
*/


body{
    overflow:hidden;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    font-family: 'Roboto', sans-serif;
    line-height:1.1em;
}

h1, h2{
font-family: 'Roboto Serif', serif;
font-size:2.5em;
}

h3, h4{
    font-family: 'Roboto Serif', serif;
}

hr{
    display:none;
}

#mainSubTS1{
    font-size:3.8em; 
    font-weight:600;
}

#subTitle1S1{
    font-size:3.5em; 
    font-weight:600;
    text-shadow:0 0 2px black;
    margin:10px 0 3px;
}

#subTitle2S1{
    font-size: 1.3em;
    text-shadow:0 0 2px black;
}

#pIntroFicheTech{
    margin:15px 0;
    font-size:0.8em;
}

#ulTech{
    text-align: left;
    list-style: circle;
    padding: 5vh 5vw;
    border: 2px solid grey;
    margin: 3vh auto 4vh;
    border-radius: 25px;
}


.wrapper{
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    perspective:10px;
}

 #hrAccueil{
    width:100%;
     background-color:white; 
     height:2px;
 }





    #pDescCommander{
        padding: 1vh 0 3vh;
        line-height:1.33em;
        max-width:600px;
        margin:auto;
    }


#divDesc1{
    width:100%;
    background-color:#202020;
    color:white;
    text-align:center;
    padding:8vh 0 11vh;
    margin-top:-3px;
    box-sizing:border-box;
}

#divDesc1P1{
    max-width:880px;
    margin:auto;
}

#divDesc1P1 p, #divDesc2 p, #sFicheTechnique p, #pPrix1, #pPrix2{
    letter-spacing: 0.06em;
    line-height: 1.33;
    font-size:2em;
}

.divIconSpecificDesc2 h3{
    font-weight: 600;
    font-size:0.9em;
}


#divDesc2{
    width:100%;
    background-color:white;
    color:#202020;
    padding:14vh 10vw 14vh;
    box-sizing: border-box;
    text-align: center;
    margin:auto;
    margin-top:-3px;
}

#divDesc2BoxText{
    width:80%;
    margin:auto;
}

#divDesc1 h2, #divDesc2 h2{
    font-size:2em;
    font-weight:600;
    margin-bottom:5vh;
    text-align:center;
}

#divDesc1 p, #divDesc2 p{
    font-size:1em;
    color:light-grey;
    line-height:1.33em;
}



#divIconDesc1{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    align-items: flex-end ;
    justify-content: flex-end;
    margin-top:30px;
}

.divIconSpecificDesc1{
    text-align:center;
    box-sizing:border-box;
    width:29%;
    margin:2%;
}

#divIconDesc2{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top:30px;
}

.divIconSpecificDesc2{
    text-align:center;
    box-sizing:border-box;
    width:29%;
    margin:2%;
}


.iconesDesc1{
    max-width:100%;
}


.iconesDesc2 {
    max-width: 12vw;
    padding: 2vh 0;
}


#sFicheTechnique{
    width:60%;
    text-align:center;
    padding:10vh 5vw;
    box-sizing: border-box;
    margin:auto;
}

#sFicheTechnique h2{
    font-weight: 600;
    text-align: center;
}

#sFicheTechnique p{
    font-size:1em;
    line-height:1.15em;
}





#pList2ColumnsFirstChild{
    margin-top:0;
}

#endCopyrights{
    background-color: #202020;
    color:white;
    text-align: center;
    padding:2vh 0;
    margin:0;

    font-size:0.8em;

    box-shadow: 0 0px 10px black;
}

footer{
    display:flex;
    justify-content:center;
    background-color: #202020;
    color:white;
    padding-bottom:15px;
}


.footerDiv h4{
    font-size:1.4em;
    font-weight:600;
    color:white;
}


.footerDiv ul{
    list-style-type:none;
    padding:0;
}

#listeFooterCollections{
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  max-width:66%;
}



.footerDiv ul li{
    list-style-type:none;
    padding:0;
    font-weight:300;
    color:white;
}

.footerDiv a{
    text-decoration:none;
    color:white;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


p, a{
    font-family: 'Roboto', sans-serif;
}


/*-------------------------------*/





.background{
    position:absolute;
    width:100%;
    height:100%;
    object-fit: cover;
    transform: translateZ(-10px) scale(2.05);
}



#background_layer1{
    transform: translateZ(-1px) scale(1.1);
}

#background_layer2{
    transform: translateZ(-2px) scale(1.2);
}

#background_layer3{
    transform: translateZ(-3px) scale(1.3);
}

#background_layer4{
    transform: translateZ(-4px) scale(1.4);
}

#background_layer5{
    transform: translateZ(-5px) scale(1.5);
}

#background_layer6{
    transform: translateZ(-6px) scale(1.6);
}

#background_layer7{
    transform: translateZ(-7px) scale(1.7);
}

#background_layer8{
    transform: translateZ(-8px) scale(1.8);
}

#background_layer9{
    transform: translateZ(-9px) scale(1.9);
}

#background_layer10{
    transform: translateZ(-10px) scale(2.05);
}







.backgroundS3{
    position:relative;
    width:100%;
    height:100%;
    object-fit: cover;
    transform: translateZ(-10px) scale(2.05);
}




    .logoNavMobile{
        display:none;
    }


.menu-btn {
  flex-direction: column;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display:none;
  background-color:rgba(255,255,255,0.8);
  width:100%;
  height:7vh;
  justify-content: center;
  padding:0 2.5vw;
}

.bar {
  background-color: #333;
  height: 4px;
  width: 25px;
  margin: 2px 0;
  transition: 0.4s;
}

.overlayMobile {
  height: 0;
  width: 100%;
  position: fixed;
  top: 7vh; /* Adjust this value to leave space for the menu bar */
  left: 0;
  background-color: rgba(255, 255, 255, 0.88);
  overflow-y: hidden;
  transition: 0.5s;
  z-index:9999;
  display:none;
  justify-content:center;
}

.overlayMobile ul {
  list-style-type: none;
  text-align: center;
  width:100%;
}

.overlayMobile li {
  padding: 5vh 10vw;
}

.overlayMobile a {
  text-decoration: none;
  color: black;
  font-size: 20px;
}

.overlayMobile a:hover {
  color: grey;
}




.logoNavMobile{
    position:fixed;
    height: 5vh;
    top:1vh;
    right:4vw;
    z-index:10000;
}






#menuFixe{
  display: flex;
  background-color: white;
  position: fixed;
  align-items:center;
  top: 0;
  z-index: 99;
  width:100%;
  border-bottom:2px solid grey;
  box-shadow: 0 4px 10px black;
}


#menuFixe ul{
  display: flex;
  list-style: none;
  margin:0;
}

#menuFixe ul li{
  align-items: center;
  padding: 8px 24px;
  margin-left: 20px;
}


#menuFixe a{
    cursor:pointer;
    color:black;
    background-color:rgba(0,0,0,0);
    transition-duration: 0.4s;
}

#menuFixe a:hover{
    background-color:rgba(0,0,0,1);
    color:white;
}


#divImgSignatureContainer{
    width:28%;
    text-align:center;
    position:fixed;
    margin:auto;
  align-items: center;
  background-color:white;
  border-bottom:2px solid grey;
  box-shadow: 0 2px 10px black;

    z-index:1001;
}



#imgHeaderSignature{
    max-width:250px;
    max-height:150px;
    padding:0px 20px;
}






#mainTitleS1, #mainTitleS3{
    font-weight:600;
    font-size:4em;
    color:white;
    text-shadow: 0 0 5px black;
    line-height:1em;
}

#spanMainH1Lyonnais{
    font-weight:600;
    font-size:1em;
}




.aBtnLinkBig{
    color:white; 
    font-size:1.6em;
    font-weight:100;
    text-decoration:none;
    border: 1px solid white;
    padding: 20px 40px;
    background-color:rgba(0,0,0,0.3);
    transition-duration: 0.15s;
}

.aBtnLinkBig:hover{
    background-color:rgba(0,0,0,0.6);
}




#sAccueil{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    position:relative;

    color:white;
    justify-content: center;
    align-items:center;
    height:100vh;
    transform-style: preserve-3d;
    z-index:-1;
}



.colorOverlayS1{
    width:100%;
    height:100%;
    background-color: black;
    opacity:0.75;
    position:absolute;
}

.colorOverlayS3{
    width:100%;
    height:100%;
    background-color: black;
    opacity:0.75;
}

#sAPropos{
    width:100%;
    margin:auto;
    box-sizing:border-box;
    background-color:#202020;
    color:white;
}



.divCategorieOeuvre{
    width: 36%;
    margin: 3%;
    text-align:center;
}


.imgContainerS2{
    width:100%;
    height:38vh;
    overflow:hidden;
    background-color:black;
    text-align:center;
}



.divCategorieOeuvre h3{
    color:white;
    font-size:1.6em;
    padding: 30px 15px;
    background-color: #141414;
    margin: 0;
}




#section3Accueil{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;

    color: white;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform-style: preserve-3d;
    z-index: -1;
}


#sFragrances{
    display:flex;
    flex-wrap:wrap;
    color:white;
    background-color:#202020;
}

#sFragrances h3{
    font-size:1.7em;
    line-height:2em;
    margin:0;
    font-weight:600;
}


#sFragrances p{
    font-size:1.1em;
    line-height:1.3em;
    letter-spacing:0.2px;
    font-weight:300;
}


#sFragrances a{
    font-size:1.1em;
    line-height:1.3em;
    text-decoration:none;
    color:white;
    border: 1px solid white;
    padding:5px 10px;
    margin:5px;
}


.divS4{
    width:50%;
    margin:0;
    text-align:center;
    height:60vh;
}

.divS4Txt{
    padding:3%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    flex-wrap:wrap;
}





.imgSection4{
    width:100%;
    height:100%;
    object-fit: cover;
    text-align:center;
    }















.imgSection2{
  transition-duration: 0.25s;
}



.divCategorieOeuvre > .imgContainerS2 > .imgSection2{
    width:100%;
    height:100%;
    scale:1;
    opacity:1;
    object-fit: cover;
}



.divCategorieOeuvre:hover > .imgContainerS2 > .imgSection2{
    scale:1.05;
    opacity:0.4;
}


.divCategorieOeuvre h3{
  transition-duration: 0.25s;
}



.divCategorieOeuvre > h3{
    color:#d2d2d2;
}



.divCategorieOeuvre:hover > h3{
    color:white;
}






.footerDiv{
    width:28%;
    margin:1%;
}



.footerDivMobile{
    display:none;
}




#pPrix1{
    margin-top:2vh; 
    font-size:1.3em; 
    font-weight:500;
}

#pPrix2{
    font-size:0.8em; 
    margin-top:20px;
    line-height:1.33;
    padding-left:10px;
    padding-right:10px;
}



#ulTech li{
    line-height:1em;
    padding-bottom:1vh;
}






/* ----------------------------- MEDIA QUERIES ------------------------------------ */




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



    .hero{
        padding:2vh 9vw !important;
    }

    #pPrix1{
        margin-top:0;
    }


 #hrAccueil{
    width:66% !important;
    background-color:white !important; 
    height:2px !important;
    margin:2vh 0 !important;
 }


    h1, h2, h3{
        line-height:1em;
    }

    .iconesDesc2 {
        max-width: 50%;
        padding: 2vh 0 6vh;
    }


    .menu-btn{
        display:flex;
    }

    .overlayMobile{
        display:flex;
    }


    .logoNavMobile{
        display:flex;
    }

    .menuTop{
        display:none !important;
    }




    form button i{
        margin-right:5px;
    }

    .hero h1{
        font-size:1.5em !important;
    }

    p{
        line-height: 1.15;
    }

    hr{
        display:inline-block;
        width: 20%;
        margin-top: 5vh;
    }


    #subTitle1S1{
        text-shadow: 0 0 5px black;
    }

    #subTitle2S1{
        text-shadow: 0 0 5px black;
        line-height: 1.15em;
        margin-top:0.5vh;
    }

    #divDesc1{
        padding:2vh 10vw 10vh;
    }

    #divDesc2{
        padding: 4vh 10vw 10vh;
    }


    #pDescCommander{
        padding: 1vh 0 3vh;
        line-height:1.15em;
    }




#ulTech{
    padding:5vh 6vw;
}
#ulTech li{
    padding-bottom:8px;
}

    #sFicheTechnique{
        width:100%;
    }


.waves, .wavesColor1{
    display:none;
}


    #divS4Txt1{
    order:2;
    }

    #divS4Img1{
    order:1;
    }

    #divS4Txt2{
    order:4;
    }

    #divS4Img2{
        order:3;
    }

    #divS4Txt3{
        order:6;
    }

    #divS4Img3{
        order:5;
    }

    #divS4Txt4{
        order:8;
    }

    #divS4Img4{
        order:7;
    }



    .divS4{
        width:100%;
        height:initial;
    }

    .divS4Txt{
        padding:3vh 4vw;
        justify-content: initial;
        margin:2vh 0 2vh;
    }

    .divS4Img{
        filter: drop-shadow(5px 5px 10px #000000);
    }



    h2{
        font-size:1.5em !important;
    }

    .divIconSpecificDesc1, .divIconSpecificDesc2, .divIconSpecificDesc3{
        width:100%;
        margin:auto;
    }

    #divDesc2BoxText{
        width:100%;
    }


    #section4Accueil h3{
        line-height:1.2em;
        margin-bottom:10px;
    }


    .footerDivMobile{
        display:flex;
        width:100%;
        justify-content:center;
        align-items:center;
    }

    .footerDivMobile ul{
        list-style-type:none;
        text-align:center;
        padding:0;
        margin:0;
    }
    .footerDivMobile ul li{
        width:100%;
        margin:0;
        padding:5px;
        font-size:1.1em;
    }

    footer{
        margin:0;
        padding:0;
    }





    .footerDiv{
        display:none;
    }

    #menuFixe{
        min-height:48px;
    }

    #menuFixe ul{
        display:none;
    }

    .toggleBtn{
        display:flex;
    }


    #mainTitleS1{
        font-weight:400;
        font-size:1.9em;
        text-align:center;
        margin-right:-4px;
    }
    #spanMainH1Lyonnais{
        font-weight:600;
    }

    #mainTitleS3{
        font-weight:600;
        font-size:2em;
        text-align:center;
        margin:20px;
        box-sizing:border-box;
    }

    .aBtnLinkBig {
    font-size: 1.2em;
    font-weight: 300;
    padding: 20px 30px;
    margin-top: 15px;
    }


    #divIconDesc2{
        margin-top:5vh;
    }

    .divIconSpecificDesc2{
        margin-top:5vh;
    }

}


    /*v SECTION 2 ENLEVER LES PADDINGS MARGINS ET METTRE LES CATEGORIES A 100% v*/

    #section2Accueil, .divCategorieOeuvre{
        padding:0;
        margin:0;
    }

    .divCategorieOeuvre{
        width:100%;
    }

    .divCategorieOeuvre h3{
        border-bottom: 1px solid white;
    }

    /*^ FIN DE LA SECTION 2 ENLEVER LES PADDINGS MARGINS ET METTRE LES CATEGORIES A 100% ^*/





















.menuTop{
  display:flex;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:10px;
  color:black;
  background-color: rgba(255,255,255,0.6);
  justify-content: space-between;
  align-items: center;
  position:fixed;
  z-index:99;
  box-sizing:border-box;
  font-family:'Work Sans', 'Arial', 'Helvetica', sans-serif;
}
.ulMenu{
  display:flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}
.ulMenu li{
  padding:10px;
}
.logoNav{
  max-height:60px;
}

.ulMenu a{
  text-decoration:none;
}


.menuTop a{
    cursor:pointer;
    color:black;
    background-color:rgba(0,0,0,0);
    transition-duration: 0.4s;
}


.menuTop a:hover{
    color:#c3c3c3;
}

.ulMenu li a{
  text-decoration:none;
}


































/* ANIMATION VAGUES */



.sTransition{
    position:absolute;
    bottom:0;
    left:0;
    width:120%;
    height:20vh;
    z-index:1111;
    background-image:url(../img/transitionWaveColor1.png);
}


.sTransitionColor1{
    position:relative;
    bottom:0;
    left:0;
    width:150%;
    height:20vh;
    z-index:1111;
    background-image:url(../img/transitionWave.png);
}


.waves{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../img/transitionWave.png);
}

.wavesColor1{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../img/transitionWaveColor1.png);
}
.wave1{
    animation: animWave1 30s linear infinite;
    z-index:1000;
    opacity:1;
    animation-delay:0s;
}
.wave2{
    animation: animWave2 15s linear infinite;
    z-index:999;
    opacity:0.6;
    animation-delay:-2s;
}
.wave3{
    animation: animWave3 30s linear infinite;
    z-index:998;
    opacity:0.5;
    animation-delay:-1s;
}
.wave4{
    animation: animWave4 30s linear infinite;
    z-index:997;
    opacity:0.8;
    animation-delay:-2s;
}

@keyframes animWave1{
    0%{
        background-position-x:0;
    }
    100%{
        background-position-x:-100vw;
    }
}
@keyframes animWave2{
    0%{
        background-position-x:0;
    }
    100%{
        background-position-x:100vw;
    }
}
@keyframes animWave3{
    0%{
        background-position-x:0;
    }
    100%{
        background-position-x:-100vw;
    }
}
@keyframes animWave4{
    0%{
        background-position-x:0;
    }
    100%{
        background-position-x:100vw;
    }
}




/* BOOTSTRAP SECTION ENVOI DE COURRIEL */

 .hero {
      background-color: #f8f9fa;
      padding: 50px;
      text-align: center;
    }

    .hero h1{
        font-size:2em;
        font-weight:600;
        padding:10px;
    }

    form {
      max-width: 400px;
      margin: auto;
    }

    input,
    textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }

    button {
      background-color: #007bff;
      color: #fff;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
    }