@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&display=swap');



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body{
  font-family: 'poppins',sans-serif;
   background: #f5f6f9 !important; 
   line-height: 1.5;
   overflow-x: hidden !important;

}
    
:root{
   --dark-color:#222222;
    --icon-color:#fff;
    --font-size-p:14px;
    --color-descrp:#555;
    --color-titre-h3:#3a3a3a;
    --body-color:#f5f6f9;
    --text-color:#666666;
    --border-color:#6666662a;
    --font-siz-p-mobil:12px;
   --font-size-h1:16px ;
  
    }


   .box{
   width: 98%;
   margin: auto;
   position: relative;
   
 }

    
   .flex{
      margin: 100px auto;
      display: flex;
      gap: 20px;
      justify-content: space-between;
      margin-top: 180px !important;
   }

   .grid {
      width: 450px;
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr); /* Ajoutez cela pour diviser la hauteur en 3 lignes */
    }
    
   
    
    .grid img {
      width: 100%;
      height: 120px;
      object-fit: cover; /* Utilisez uniquement 'cover' ou 'contain', pas les deux à la fois */
      display: block;
      background-position: center;
      border-radius: 10px;
    }
    .swiper-container {
      width:calc(100% - 450px);
      height: 380px; 
      overflow: hidden;
      background: var(--border-color);
      border-radius: 10px;
     position: relative;
    }
    .swiper-container .btnslide::after{
      font-size: 14px;
    }
  
    .swiper-wrapper img {
      width: 100%; 
      height: 100%;
      object-fit: cover,contain; 
      /* object-fit: cover;  */
      background-position:center;
      border-radius: 10px; 
     background: var(--border-color); 
   
   }

    /* Styles pour les boutons de navigation */
    .swiper-button-next, .swiper-button-prev {
      position: absolute;
      top: 50%;
      font-size: 15px !important;
      width: 30px !important;
      height: 30px !important;
      border-radius: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: white !important;
      cursor: pointer;
      z-index: 80;
      text-align: center;


      
   }

    /* Cacher la flèche sur les boutons de navigation */
    .swiper-button-next::after, .swiper-button-prev::after {
      content: ''; 
    }

    
    .swiper-button-prev {
      left: 0; 
    }
    .swiper-button-next {
      right: 0;
    }



    /* Pagination */
    .swiper-pagination {
      position: absolute; 
      bottom: 10px;
      left: 50%; 
      transform: translateX(-50%);
      z-index: 10; 
      text-align: center;
    }

    /* Styles des points de pagination */
    .swiper-pagination-bullet {
      background-color: rgba(255, 255, 255, 0.8) !important; 
      width: 20px !important; 
      height: 20px !important; 
      margin: 0 5px !important; 
      opacity: 1 !important; 
    }

    .swiper-pagination-bullet-active {
      background-color: #c33333 !important;
    }

/* instruction*/
.instruction{
   margin: 70px 0;
}
.instruction .box{
   display: flex;
   background-color:#fff;
   padding: 2rem 1.5rem;
   border-radius: 5px;
   justify-content: space-between;
   flex-wrap: wrap;
   /* font-size: 14px; */
}
.instruction .box .instruction-item{
   width: 18%;
   min-width: 250px;
   display: flex;
   align-items: center;
   justify-content: center; 
    gap: 25px;
  
}
.instruction .box .instruction-item i{
   font-size: 50px;
   color: var(--dark-color);

}

.instruction .box .instruction-item h4{
   margin-bottom: 8px;
   font-size: 15px;
   color: var(--color-titre-h3);
}

.instruction .box .instruction-item p{
   font-size: 13.5px;
  color: var(--color-descrp);
}


.banner-promtion {
   margin: 70px 0;
}

.banner-promotion .box {
   display: flex;
   justify-content: space-between;
   overflow: hidden;
   gap: 15px;
}

.banner-promotion .box .banner-image {
   width: 40%;
   position: relative;
   height: 260px;
}

.banner-promotion .nav-btn {
   display: none;
}
.banner-promotion .box .banner-image img {
   width: 100%;
   display: block;
   border-radius: 10px;
   height: 100%;
   object-fit: cover;
   background-position: center;
}

.banner-promotion .glass-hover {
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
}

.banner-promotion .glass-hover::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(50deg, transparent 50%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.5) 70%, transparent 71%);
   background-size: 200% 100%;
   background-position: 200% 0;
   transition: 0.8s;
   z-index: 90;
}

.banner-promotion .banner-image:hover .glass-hover::after {
   background-position: -20% 0;
}

.banner-promotion .banner-image a {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
}
/* Responsive pour les écrans de moins de 768px */
@media (max-width: 1069px) {
   .banner-promotion .box {
      flex-wrap: nowrap;
      overflow-x: scroll;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      width: 100%; /* Assure que le conteneur prend toute la largeur */
   }

   .banner-promotion .box .banner-image {
      min-width: 100%; /* Chaque image prend toute la largeur du conteneur */
      width: 100%;
   }

   .banner-promotion .nav-btn {
      display: none; /* Masquer les boutons de navigation sur mobile */
   }

   .banner-promotion .box::-webkit-scrollbar {
      display: none; /* Masquer la scrollbar */
   }
}


/*sales*/
.slide{
   margin: 70px 0;
}
 

.slide .box .mySwiper{
   overflow: hidden;
   position: relative;
   padding: 10px 0;
   width: 100%;
}

.top-slide{
   position: relative;
   margin-bottom: 20px;
   padding: 20px 0;
   border-bottom: 1px solid var(--border-color);
}
.top-slide::after{
   content: '';
   position: absolute;
   bottom: -1px;
   width: 200px;
   height: 2px;
   background: var(--dark-color);
}

.top-slide h2{
   color: var(--color-titre-h3);
   font-size: 2rem;
}
.top-slide h2 span{
   font-weight: normal;
   
}

/* slide product */
.swiperProducts  {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   width: 30%;
   height: 300px; 
   overflow: hidden;
   box-shadow: 5px 5px 10px #94949428 ;
   background: var(--icon-color); 
   border-radius: 5px;
}
.swiperProducts  .slide-image{
    position: relative;
    height: 270px;
  
}
.swiperProducts  .slide-image img{
   width: 100%;
   transition: 0.3s ease-in-out;
   object-fit: cover;
   height:100%;
   background: var(--border-color) !important;
   border: 1px solid var(--border-color);
   border-radius: 0;
}
.swiperProducts  .present{
   position: absolute;
   top: 0;
   right: -6px;
   z-index: 100;
   background:rgba(0, 0, 0, 0.5);
   padding: 2px 12px;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   color: var(--icon-color);
   border-radius:0 10px;
}

.swiperProducts  .contentswip{
   /* display: flex;
   flex-direction: column; */
   color: var(--color-titre-h3);
   padding: 0 10px;
   margin-top: 11px;

}


.contentswip .price{
 font-size: 16px; /* Augmente la taille du texte */
 font-weight: bold;
 color: #C33333;


}

  .productname{
   margin-top: 5px;
   font-size:16px; /* Augmente la taille du texte */
  }
.contentswip  .descriptionswip a{
   font-size: 14px;
   color: var(--color-titre-h3);
   overflow: hidden;
}

 .descriptionswip a:hover{
   text-decoration: underline !important;
   color: #C33333;
  
}


.slide .box .mySwiper .btn-Swip{
   position: absolute;
   top: 70px;
   right: 10px;
   width: 30px;
   height: 30px;
   background:rgba(0, 0, 0, 0.5);
   color: var(--icon-color) !important;
   font-weight: bold;
   padding: 10px;
   border-radius: 50%;

}

.slide .box .btn-Swip::after{
  font-size: 20px;
}

.slide .mySwiper .swiper-button-prev{
   left: calc(100% - 90px);
}

.product-prod{
   display: grid;
}

/*Responsive*/

@media (max-width:991px) {
   .instruction .box .instruction-item{
      margin-bottom: 25px;
   }

  }






/* Grille responsive */
@media (min-width: 1600px) {
   .products1 {
       grid-template-columns: repeat(5, 1fr);
   }
   .container-header {
       width: 95%;
   }
}

@media (max-width: 1599px) and (min-width: 1200px) {
   .products1 {
       grid-template-columns: repeat(4, 1fr);
   }
   .container-header {
       width: 95%;
   } 
}

@media (max-width: 1199px) and (min-width: 768px) {
   .products1 {
       grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width: 768px) {
   .swiper-container {
       width: calc(100% - 20px); /* Garde un peu d'espace sur les côtés */
       height: 280px; /* Réduit la hauteur pour les petits écrans */
   }
}
@media (max-width: 768px) {
   .container-header .flex{
      display: block;
   }

   .swiper-container {
      width: 100% !important;
      width: calc(100% - 20px); /* Garde un peu d'espace sur les côtés */
      height: 280px; /* Réduit la hauteur pour les petits écrans */
  }
     
   .grid{
      display: none !important;
   }
   .top-slide h2{
      font-size:1.5rem;
      font-weight: bold;
   }
   .instruction{
      padding: 10px;
   }

   
.slide .mySwiper .swiper-button-prev{
   left: calc(100% - 80px);
}
   
.slide .box .mySwiper .btn-Swip{
  
   width: 18px;
   height: 18px;
   

}

.slide .box .btn-Swip::after{
   font-size: 12px;
 }
 
}

@media (max-width: 768px) {
   /* slide product */
.swiperProducts  {
   height: 350px; 
}
.slide-image{
    position: relative;
    height: 300px;
  
}
 .slide-image img{
   height: 300px;
   margin-bottom: 5px;
}

}


@media (max-width:800px) {
   .flex{
      display: block;
   }
   .swiper-container{
      width: 100%;
      height: 300px;
   }
     
   .grid{
      display: none;
   }
   
 /* responsive banner promotion */
 
   .instruction .container-header .instruction-item{
      margin-bottom: 20px;
   }
   
.instruction .container-header .instruction-item h4{
   padding-right: 25px;
   margin-top: 10px;
}

.instruction .container-header .instruction-item p{
  padding-right: 25px;
}

   .product .product-name{
        font-size: 13px;
   }   
   

}