*, ::after, ::before{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body{
    font-family: 'Josefin Sans', sans-serif;
}

.loader{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #282828;
    z-index: 200;
}

.loader p{
   display: flex;
   position: absolute;
   top: calc(50% - 25px); left: calc(50% - 25px);
   width: 50px; height: 50px;
   border-radius: 50%;
   border: 4px solid #f51167;
   animation: loader 4s infinite forwards;
   transition: .3S ease-in-out;
   -webkit-animation: loader .8s infinite linear;
}

@keyframes loader {
    0%{
        border: 4px solid #f0f0f0;
        transform: rotate(0deg);
        border-left-color: transparent;
    }

    50%{
        border: 4px solid rgb(118, 7, 245);
        transform: rotate(180deg);
        border-left-color: transparent;
    }


    100%{
        border: 4px solid #f44336;
        transform: rotate(360deg);
        border-left-color: transparent;
    }
}
@-webkit-keyframes loader {
    0%{
        border: 4px solid #f0f0f0;
        transform: rotate(0deg);
        border-left-color: transparent;
    }

    50%{
        border: 4px solid rgb(118, 7, 245);
        transform: rotate(180deg);
        border-left-color: transparent;
    }


    100%{
        border: 4px solid #f44336;
        transform: rotate(360deg);
        border-left-color: transparent;
    }
}

a, li{
    color: black;
   list-style: none;
   text-decoration: none;
}

/* HEADER TOP */
.headerTop{
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   justify-content: center;
   padding: 10px;
   margin-bottom: 15px;
}

.headerTop .logo img{
   width: 100%;
   height: 100%;
}

.headerTop .searchBar{
   width: 90%;
   position: relative;
}

.headerTop .searchBar input{
   width: 100%;
   height: 40px;
   border-radius: 20px;
   border: none;
   background: #f0f0f0;
   cursor:text;
   padding: 0 30px;
   font-size: 15px;
}

.headerTop .searchBar input:focus{
  border: none;
  outline: none;
}

.headerTop .searchBar i{
  position: absolute;
  display: flex;
  top: 7px; right: 0px;
  width: 50px; height: 100%;
  /* transform: translate(0 -50%); */
  font-size: 25px;
  background: transparent;
  cursor: pointer;
}

.headerTop .accountCartInfo{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    margin: 10px 0 0 20px;
    display: flex;
    text-transform: capitalize;
}

.headerTop .accountCartInfo .account{
    position: relative;
    display: flex;
    gap: 10px;
}

.headerTop .accountCartInfo .cartInfos{
    display: flex;
    gap: 10px;
    position: relative;
}

.headerTop .accountCartInfo i{
    position: relative;
    font-size: 18px;
}

.headerTop .accountCartInfo .cartInfos span{
    position: absolute;
    top: -10px; right: -12px;
    padding: 3px 5px;
    border-radius: 50%;
    text-align: center;
    color: white;
    background: #f51167;
    font-size: 10px;
}


/* STYLE DU NAV BAR || MENU */
nav{
    background: #282828;   
}

.menus .menu1{
    background: #4c4c4c;
    margin: 0 6%;
    position: relative;
    color: white;
}

.menus .menu1 .menuBtn{
    position: absolute;
    display: flex;
    gap: 10px;
    right: 20px; top: 8px;
    color: white;
    padding: 7px 10px;
    border-radius: 4px;
    background: #282828;
    cursor: pointer;
}

.menu1 ul{
    padding: 60px 20px 10px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.menu1 ul li{
   color: white;
    padding: 5px;
}

.menu1 ul li{
   color: white;
    padding: 5px;
}

.menu1 ul li:hover{
    background:  #f0f0f0;
    border-radius: 5px;
    color: black;
}

.menu1 ul li i{
    font-size: 13px;
    margin: -5px 0 0 7px;
    transition: .3s ease;
}

.menu1 ul li:hover i{
    transform: rotate(90deg);
}


.menu1 .listContent{
    display: none;
    transform: translate(50px);
    margin-left: 20px;
    padding: 20px;
    line-height: 40px;
}

.menu1 .listContent.activeList{
    display: block;
    transform: translate(0px);
}

.menu1 .listContent.activeList{
    display: block;
    transform: translate(0px);
}

.menu2{
    display: none;
}

@media (min-width: 650px) {
    .headerTop{
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .headerTop .logo img{
       width: 150px;
       height: 30px;
       margin: 15px 40px;
    }

    .headerTop .searchBar input{
       height:  47px;
    }

    .headerTop .searchBar input i{
      top: 30px;
    }

    .headerTop .accountCartInfo{
        width: 70%;
        margin: 0 5%;
        justify-content: space-between;
        gap: 5%;
    }

    .headerTop .accountCartInfo i{
       font-size: 20px;
    }

    .menu2{
        display: block;
        width: 88%;
        max-width: 700px;
        margin: 0px 6%;
        background: #282828;
    }

    .menu2 ul{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 15px 0;
    }

    .menu2 .divList{
        position: relative;
        z-index: 4;
    }

     .menu2 .divList li{
      padding: 0;
    }

     .menu2 ul li{
        color: #f0f0f0;
        font-weight: bold;
        transition: all .1s ease-in;
        cursor: pointer;
    }

     .menu2 ul li:hover{
        color: #f51167;
    }

     .menu2 .listContent{
       position: absolute;
       top: 32px; left: 0;
       display: flex;
       flex-direction: column;
       background: white;
       padding: 15px;
       width: 200px;
       transform: translateY(100px);
       transition: all .1s ease-in;
       opacity: 0;
       line-height: 25px;
       z-index: 0;
       /* border-top: 30px solid transparent; */
    }

     .menu2 li{
       position: relative;
    }

     .menu2 li span{
       position: absolute;
       background: #f51167;
       border-radius: 10px;
       padding: .5px 7px;
       top: -22px; left: 9px;
       font-size: 12px;
       color: #f0f0f0;
    }

     .menu2 .divList:hover .listContent{
        transform: translateY(0px);
        opacity: 1;
    }

     .menu2 .listContent li{
       color: black;
    }
}


@media(max-width: 450px){
    .headerTop .accountCartInfo i{
        font-size: 19px;
    }
    .headerTop .accountCartInfo{
    text-align: CENTER;
    flex-direction: column;
    gap: 20px;
    border: solid rgba(245, 17, 103, 0.5);
    border-bottom: none;
    padding: 10px 0 ;
    margin: 0;
    border-radius: 10px 10px 0 0;
    }
}

/* header Présentation Style */
.header{
  background: #282828;
  transform: translateY(-275px);
  margin-bottom: -345px;
  transition:.3s ease-in-out;
}
.header.activeMenu{
  transform: translateY(0px);
  margin-bottom: 0px;
}


.header .headerSlides{
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll hidden;
}

.header .headerSlides::-webkit-scrollbar{
    display: none;
}

.header .headerSlides .slide{
  background: url(../images/bg.jpg.webp) center/cover no-repeat;
  color: #f0f0f0;
  height: 90vh;
  position: relative;
}

.header .headerSlides .slide:nth-child(2n){
  background: url(../images/bg-2.jpg.webp) center/cover no-repeat;
}

.header .headerSlides .slide.slideActive .slideInfos{
    transform: rotate(0deg);
}

.header .headerSlides .slide .slideText{
 margin: 15vh 7vw;
}

.header .headerSlides .slide.slideActive .slideText h2, .header .headerSlides .slide.slideActive .slideText h4, .header .headerSlides .slide.slideActive .slideText p, .header .headerSlides .slide.slideActive .slideText .slideButtons{
   transform: translateY(0);
   opacity: 1;
}

.header .headerSlides .slide .slideText h2{
   margin: 5px 0 30px;
   font-size: 3.5rem;
   white-space: nowrap;
   width: 100vw;
   text-transform: uppercase;
   transform: translateY(200px);
   opacity: 0;
   transition: all .6s ease-in-out .2s;
}
.header .headerSlides .slide .slideText h4{
   font-size: 22px;
   transform: translateY(200px);
   opacity: 0;
   transition: all .6s ease-in-out 0s;
}
.header .headerSlides .slide .slideText p{
   font-size: 19px;
   line-height: 22px;
   width: 400px;
   transform: translateY(200px);
   opacity: 0;
   transition: all .6s ease .4s;
}

.header .headerSlides .slide .slideText .slideButtons{
  margin: 60px 0;
  display: flex;
  gap: 30px;
  transform: translateY(200px);
  transition: all .6s ease-in-out 0.4s;
}
.header .headerSlides .slide .slideText .slideButtons button{
 padding: 12px 35px;
 border-radius: 20px;
 border: .5px solid #f0f0f0;
 background: transparent;
 color: #f0f0f0;
 white-space: nowrap;
 cursor: pointer;
 font-size: 17px;
}

.header .headerSlides .slide .slideText .slideButtons button#bouttonS2{
 background: #f0f0f0;
 color: #282828;
}

.slideInfos{
    position: absolute;
    top: 10%; right: 15%;
    width: 160px; height: 160px;
    background: #f51167;
    border-radius: 50%;
    text-align: center;
    transform: rotate(90deg);
    transition: .3s ease-in-out;
}

.slideInfo{
   border: .5px solid #f0f0f0;
   border-radius: 50%;
   width: calc(100%-10px); height: calc(100% - 10px);
   display: flex;
   flex-direction: column;
   margin: 5px;
   padding: 7px;

}

.slideInfo h2{
   font-size: 4rem;
   margin: 10px 0;
}
.slideInfo p{
   text-transform: uppercase;
}

.header .slideButtonIncI{
  display: flex;
  margin: -70px 10px;
}

.header .slideButtonIncI .slidePointeur{
    color: #fff;
    display: flex;
    gap: 10px;
    margin: 0 20px;
}
.header .slideButtonIncI .slidePointeur a{
    border: solid white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 13px;
    color: #fff;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
}
.header .slideButtonIncI .slidePointeur button{
    position:relative;
    background: #f0f0f0;
    width: 8px; height: 8px; 
    margin: auto;
    border: none;
    opacity: 0.5;
    border-radius: 50%;
}


.header .slideButtonIncI .slideNume{
   position: absolute;
   right: 30px;
}
.header .slideButtonIncI .slideNume p{
   font-size: 30px;
    color: #f0f0f0;
    font-weight: bold;
    word-spacing: 7px;
}


@media (max-width: 600px) {
    .header .headerSlides .slide .slideText h2{
       font-size: 3rem;
     }

    .slideInfos{
        display: none;
    }
}

@media (max-width: 470px) {

    .header{
        background: #282828;
        transform: translateY(-275px);
        margin-bottom: -270px;
        transition:.3s ease-in-out;
      }
    .header .headerSlides .slide{
       height: 80vh;
     }

    .header .headerSlides .slide .slideText{
      width: 100%;
      margin: 20% 10px;
     }
    .header .headerSlides .slide .slideText h2{
       font-size: 1.8rem;
       margin: 10px 0;
       width: 93vw;
     }

    .header .headerSlides .slide .slideText p{
       font-size: 17px;
       width:  85%;
       margin: 0;
     }

    .header .headerSlides .slide .slideText .slideButtons{
        margin: 20px 0;
      flex-direction: column;
      gap: 10px;
     }

    .header .headerSlides .slide .slideText .slideButtons button{
        font-size: 17px;
        padding: 10px 30px;
     }

     .header .slideButtonIncI{
        margin: -30px 0px 0;
      }
      
      .header .slideButtonIncI .slidePointeur{
          gap: 5px;
          margin: 0 10px;
      }
      .header .slideButtonIncI .slidePointeur a{
         font-size: 11px;
         opacity: 0.6;
         z-index: 2;
      }

      .header .slideButtonIncI .slidePointeur button{
          opacity: 0.7;
          border-radius: 50%;
      }
      
      .header .slideButtonIncI .slideNume{
         position: absolute;
         right: 10px;
      }
      .header .slideButtonIncI .slideNume p{
         font-size: 25px;
          word-spacing: 5px;
      }
}

.servicesQualit{
    display: flex;
    flex-wrap: nowrap;
    margin: 110px 0 0;
}

.servicesQualit li{
    width: calc(100%/3);
   text-align: center;
   padding: 15px;
   font-weight: 900;
}
.servicesQualit li:nth-child(2n){
   background: #f51167;
   color: #f0f0f0;
}

.servicesQualit p{
    text-align: center;
    font-size: 23px;
    margin-top: 10px;
}

@media(max-width: 500px){
    .servicesQualit{
        display: block;
        margin: 110px 0 0;
    }
    .servicesQualit li{
        width: 100%;
       text-align: center;
       padding: 15px 0;
    }
}

@media(max-width: 450px){
    .servicesQualit{
        margin: 0px 0 0;
    }
    .servicesQualit li{
       display: flex;
       gap: 10px;
       padding: 20px 0;
       justify-content: center;
    }
    .servicesQualit li p{
      font-size: 16px;
      /* text-align: left; */
      white-space: nowrap;
    }
    .servicesQualit li img{
      width: 50px; height: 45px;
    }
}

.latestProducts{
    text-align: center;
    margin: 100px 0;
}

.latestProducts h2{
   margin: 60px 0 30px;
   font-size: 1.6rem;
}

.latestPsliders{
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll hidden;
    scroll-snap-type: mandatory;
    scroll-behavior: smooth;
}

.latestPsliders .latestPslider{
   width: 100%;
   position: relative;
}
.latestPsliders::-webkit-scrollbar{
   display: none;
}
.latestPsliders .latestPslider img{
  width: calc(90vw);
  height: 50vh;
  margin: 0 5vw;
}
.latestPsliders .latestPslider .latestPsliderButtons{
    position: absolute;
    top: 70%; right: 5%;
    display: flex;
    gap: 5px;
}

.latestPsliders .latestPslider .latestPsliderButtons a{
    font-size: 18px;
    display: flex;
    gap: 5px;
    width: 50px;
    height: 37px;
    overflow: hidden;
   transition: all .3s ease-in-out;
}

.latestPsliders .latestPslider .latestPsliderButtons a:nth-child(2n+1){
    border-radius: 20px;
}

.latestPsliders .latestPslider .latestPsliderButtons a i{
    background-color: white;
    border-radius: 50%;
    padding: 8px 13px 5px;
}

.latestPsliders .latestPslider .latestPsliderButtons a p{
   white-space: nowrap;
   transform: translateY(100px);
   transition: all .4s ease-out .2s;
   font-weight: bold;
   font-size: 14px;
}
.latestPsliders .latestPslider .latestPsliderButtons a:hover p{
   transform: translateY(5px);
   text-align: center;
   margin: 6px;
}

.latestPsliders .latestPslider .latestPsliderButtons .latestPsliderButtonsFirst:hover{
    width: 165px;
    background: white;
}

.latestPsliders .latestPslider .latestPsliderButtons .latestPsliderButtonsFirst:hover i{
   color: #282828;
}
.latestPsliders .latestPslider .latestPsliderButtons a:hover i{
  color: #f51167;
}

.latestPsliderInfos{
    text-align: left;
    font-size: 18px;
    position: relative;
    margin: 10px 5vw;
}

.latestPsliderInfos p{
   margin-bottom: 5px;
    max-width: 75%;
}

.latestPsliderInfos b{
   position: absolute;
   right: 0; top: 0px;
   font-size: 20px;
}

.latestPsliderIncrement{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}
.latestPsliderIncrement a{
    font-size: 18px;
    border: solid grey ;
    opacity: 0.7;
    padding: 1px 8px;
    border-radius: 50%;
    cursor: pointer;
}


@media (min-width: 500px){
    .latestProducts h2{
       font-size: 2.5rem;
       margin: 100px 0 30px;
     }

    .latestPsliders .latestPslider img{
        width: calc(90vw/2);
        height: 50vh;
        margin: 0 2.5vw;
    }

    .latestPsliderInfos{
        text-align: left;
        font-size: 18px;
        position: relative;
        margin: 0 2.5vw;
    }

    .latestPsliderInfos{
       font-size: 16px;
    }

    .latestPsliderInfos p{
      max-width: 70%;
    }
}

@media (min-width: 800px){
    .latestPsliders .latestPslider img{
        width: calc(90vw/4);
        height: 50vh;
        margin: 0 calc(5vw/4);
    }

    .latestPsliderInfos{
        margin: 10px calc(5vw/4);
    }
}


.products{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 30px;
}

.productsSection ul{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 10px;
    margin: 30px 0;
    justify-content: center;
}

.productsSection ul a li{
   background: #ebebeb;
   border-radius: 15px;
   width: 100px;
   padding: 10px 5px;
}

.products .product img{
   height: 85vh;
   width: 90%;
}

.latestPsliders .product .latestPsliderButtons{
    top: 80%;
    right: 5%;
}

.products .latestPsliderInfos b{
    top: -3px;
}
.products .latestPsliderInfos{
   margin: 15px;
}

.produitBoutons{
    text-align: center;
    height: 50px;
    width: 200px;
    background: transparent;
    border: 1px solid #282828;
    border-radius: 30px;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 18px;
}


@media (min-width: 800px){
    .products{
        grid-template-columns: repeat(4, 1fr);
    }

    .productsSection ul{
        gap: 2.5%;
    }

    .products .product img{
        height: 60vh;
     }

    .productsSection ul a li{
       padding: 10px 10px;
       border-radius: 20px;
    }
}


.bannerSection{
    background: url(../images/banner-bg.jpg.webp) center/cover no-repeat;
    width: 90%;
    margin: 70px auto;
    position: relative;
    padding: 30px;
}

.bannerSection h2{
    margin: 20px 0;
    font-size: 40px;
}

.bannerSection p{
    position: absolute;
    top: 10px;
    right: 20px;
    background: #f51167;
    color: #f0f0f0;
    border-radius: 5px;
    font-weight: bold;
    padding: 3px 7px;
}
.bannerSection button{
   background: #f51167;
   border: none;
   border-radius: 20px;
   padding: 10px 20px;
   color: #f0f0f0;
   font-weight: 600;
   font-size: 17px;
}

@media (max-width: 450px) {
    .bannerSection{
        width: 100%;
    }

    .bannerSection h2{
        font-size: 30px;
    }
    
    .bannerSection p{
        top: 30px;
    }
}



footer{
    background: #282828;
    padding: 50px 20px;
}

.footerContent{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 50px 0;
    row-gap: 50px;
}

footer img{
    margin-left: calc(50% - 70px);
}

.footerContent img{
    margin-left: 0;
}

.footerContent h2{
   font-size: 20px;
   color: white;
}

.footerContent .about p{
    margin: 40px 0;
    color: #918b8b;
}

.questions{
    margin-top: 30px;
}

.questions .ulsFooter{
    display: flex;
    gap: 40px;
    line-height: 32px;
    margin-left: 15px;
}
.questions .ulsFooter li{
    position: relative;
}


.questions .ulsFooter li:after{
   content: '';
   position: absolute;
   width: 5px; height: 5px;
   left: -13px; top: 40%;
   padding: 2px;
   border: .5PX solid #f51167;
   transition: .2s ease;
   border-radius: 50%;
}

.questions .ulsFooter li:hover:after{
    background: #f51167;
 }

.questions h2{
    margin: 0 0 20px 0;
}
.questions ul{
    margin: 0 0 20px 0;
}
.questions ul li{
    color: #918b8b;
}

.news .new{
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      height: 70px;
      margin: 30px 0;
      color: #918b8b;
}

.news .new p{
     margin: 8px 0;
}
.news .new b{
     color: #f51167;
     /* margin-top: px; */
}

.location a li{
  display: flex;
  color: #918b8b;
  line-height: 35px;
}
.location a li h3{
 color: #f51167;
 margin: 0px 15px 0 0;
}


.footerLinks{
    display: flex;
    gap: 15px;
    width: 80%;
    margin:  0 10%;
    align-items: center;
    justify-content: space-between;
    /* margin: 0 0 40px; */
    position: relative;
}

.footerLinks p{
    margin-top: 5px;
    text-transform: uppercase;
    color: #918b8b;
    transition: .3s ease-in-out;
}

.footerLinks a:hover p{
    color: #f0f0f0;
}

footer hr{
    width: 100%;
    margin: 0 0 30px;
    height: 1px;
}

.footerLinks a{
    display: flex;
    gap: 10px;
    color: #f0f0f0;
}

.footerLinks a p{
   display: none;
}

.footerLinks a i{
  font-size: 25px;
  transition: .3s ease;
}

.footerLinks a:hover i{
  color: #f51167;
}

.copyright{
    color: #f0f0f0;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
}

@media (min-width: 600px) {
    .footerContent{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        text-align: left;
        gap: 30px;
        margin: 70px 0;
    }
    .footerContent .about{
        /* height: 400px; */
        width: 25%;
    }

    .footerLinks a p{
        display: block;
     }

     .questions{
        margin-top: 0px;
    }
}