@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;
}
: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 ;
 --main-color1:#C33333;

 
  }


body{
    font-family: poppins,sans-serif;
    margin-top: 180px;
  }



.container-header{
    width:98%;
    margin: auto;
    position: relative;
    
  }

header{
  position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: var(--icon-color);
    z-index: 100;
   
}
header .header-top{
display: flex;
align-items: center;
padding: 5px 0; 
justify-content: space-between;
overflow: hidden;

}
header .header-top .menu{
  display: none;
}

/* box-icon*/
.header-top .box-icon{
display: inline-flex;
 gap: 25px;
 margin-top: 10px;
align-items: center;
/* float: right; */
margin-right: 20px;
}


.header-top .box-icon i{
    font-size: 20px;
    color: var(--dark-color);
}
.header-top .box-icon .notification .notif{
    position: relative;
    background: none;
    border: none;
    margin-top: 6px;
    cursor: pointer;
}
.header-top .box-icon .notification span{
  position: absolute;
	top: -12px;
	right:-12px;
	width: 20px;
	height:20px;
	border-radius: 50%;
  border: 2px solid; 
	background:var(--dark-color);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--icon-color);
	font-size: 10px;
	font-weight: 700;

}

/* search bar*/
 header .header-top .search {
     background-color:var(--icon-color);
      width: 500px;
      border: 2px solid;
          padding: 10px;
      position: relative;
      border-radius: 5px;

} 


header .header-top .search button i{
    font-size: 20px;
    
}
header .header-top .search .input{
   outline: none;
   border: none;
   background: none;
    width: 100%; 
    padding: 8px 100px 8px 10px;
    font-family: poppins,sans-serif;
   
  
} 
.header-top .search .btn-search{
    outline: none;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    padding: 1px  1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:var(--dark-color);
    color:var(--icon-color);
    cursor: pointer;
    font-size: 14px;
}
.header-top .search .btn-search i{
    color: #fff;
}





/*Section  menu de navigation*/
.navigation{
    margin-top: 5px;
    border-top: 1px solid var(--border-color);
}
header .navigation .links{
    display: flex;
    justify-content: space-between;
    align-items: center;

    }
 
 
/* .header-bottom .navbar{
    /* margin-right: 2.5rem; */

.links .navbar ul{
    display: inline-flex;
    gap: 40px;
    margin-top: 8px;
}
 header .links .navbar ul li {
    padding: 10px 0;
    position: relative;
}
.links .navbar ul li a {
   color:var(--dark-color); 
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
}


/*Login*/
.login{
    display: flex;
    gap: 10px;
    position: relative;
    cursor: pointer;
    /* margin-top: 10px; */
}
.login .profil img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
   
    
}
.login .profil i{
    font-size: 30px;
    color: var(--dark-color);
}
.login .profil{
    display: flex;
    gap: 10px;
}
.login .profil span{
    position: relative;
    text-transform: capitalize;
    font-size: 14px;
    margin-left: 5px;
    /* top: -5px; */
}
.login .profil span{
    font-weight: 500;
    color: var(--dark-color) !important;
}


/*Sub-menu*/
.sub-menu-wrap{
    position: absolute;
    top: 100%;
    right:-50px;
    width: 250px;
    overflow: hidden;
    max-height: 0;
    transition: 0.3s ease-in-out;
    z-index: 80;
   
}
.sub-menu{
    background: var(--icon-color);
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin: 10px;
    color: var(--dark-color) !important;
}
.sub-menu-wrap.showSubMenu{
    max-height: 400px;
}
.user-info{
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-info img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-color);
  }
  .user-info h3{
    font-size: 16px;
    font-weight: 500;
  }
  .sub-menu hr{
    border: 0;
    height: 1px;
    width: 100%;
    background: var(--border-color);
    margin: 10px 0 8px;
  }
  .sub-menu-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0; 
  }
  .sub-menu-link i{
   font-size: 18px;
   width: 35px;
   height: 35px;
   color: var(--color-titre-h3);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   padding: 8px;
   background: var(--border-color);
   margin-right: 16px;
   }
  .sub-menu-link p{
    width: 100%;
    color: var(--color-titre-h3);
    font-size: 14px;
    margin-top: 15px;
  }
  .sub-menu-link span{
   font-size: 22px;
   transition: 0.5s;
   color: var(--color-titre-h3);
   
  }
  .sub-menu-link span:hover{
    transform: translateX(5px);
   }
   .sub-menu-link p:hover{
     font-weight: 600;
  }

/* Modal Message */
.modal_message {
  position: fixed;
  top: 0;
  right: -900px;
  bottom: 0;
  background: var(--icon-color);
  z-index:100;
  padding: 20px;
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer */
  display: flex;
  flex-direction: column; 
  width: 350px;
  gap: 20px;
  transition: 0.3s ease-in-out;
  height: 100vh !important;
}
.modal_message::-webkit-scrollbar{
  display: none;
} 

.modal_message.showModal {
  right: 0;
}

/* Masquer la barre de défilement pour Chrome, Safari et Opera */
.modal_message::-webkit-scrollbar {
  display: none;
}

.modal_message .top_message {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.modal_message .top_message i {
  font-size: 25px;
  cursor: pointer;
  color: var(--color-titre-h3);
}

.modal_message .message1 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  flex-grow: 1; /* S'étend pour occuper l'espace vertical disponible */
}

.modal_message .message1 .image-message {
  width: 50px;
  height: 50px;
  background: var(--border-color);
  border-radius: 50%;
}

.modal_message .message1 .image-message img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}


 .modal_message .message1 .notification-message{
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--color-descrp);

 } 

 .modal_message .message1 .notification-message h3{
    font-size: 16px;
 }
 .modal_message .message1 .notification-message p{
    font-size: 14px;
 }


 /* Modal notification */
 .modal_notification{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 350px;
    right: -700px;  
    background: var(--icon-color);
    z-index: 100;
    padding: 20px;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    scrollbar-width:none;
     display: flex;
     flex-direction: column; 
     gap: 20px;
     transition: 0.3s ease-in-out;
     height: 100vh;
    
  } 
 .modal_notification.showModal_notif{
  right: 0;   
 }
 .modal_notification .top_message {
  display: flex;
  justify-content: space-between;
 }
  

  .modal_notification .top_message button{
   border: none;
   background: none;
  
  }
  .modal_notification .top_message .notificon{
    display: flex;
    gap: 20px;
  }
  .modal_notification .top_message .notificon i{
    color: var(--dark-color);
    font-size: 20px;
    cursor: pointer;
  }

  .modal_notification .top_message h2{
    font-size: 16px;
    color: var(--dark-color);
    font-weight: bold;

  }
 
  .modal_notification .message-notif{
     display: flex;
     justify-content: space-between;
     gap:15px;
     margin-top: 20px;
  }
   
  .modal_notification .message-notif .image-message{
     max-width: 50px;
     max-height: 50px;
     background: var(--border-color);
     border-radius: 50%;
   
  }
  .modal_notification .message-notif .image-message img{
     width: 100%;
     object-fit: cover;
     height: 100%;
     border-radius: 50%;
     border: 1px  solid var(--dark-color);
  }
 
  .modal_notification .message-notif .notification-message{
     display: flex;
     flex-direction: column;
     color: var(--color-descrp);
 
  } 
  
  .modal_notification .message-notif .notification-message h3{
   font-size: 14px;
   color: var(--color-titre-h3);
   font-weight: 500;
}
.modal_notification .message-notif .notification-message  span{
  font-size: 14px;
}
.modal_notification .message-notif .notification-message p{
  font-size: 14px;
}

 
  /* cart */
  .wrapper-cart{
    position: fixed;
    right: 0;
    top:-2000px;
    background: var(--icon-color);
    z-index: 1100;
    padding: 30px;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 400px;
    transition: 1s ease;

   }
 .wrapper-cart.active{
   bottom: 0;
    top: 0;
  }  
  .wrapper-cart .top-cart{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

  }
  .top-cart h3{
    font-size: 15px;
  }
.top-cart h3 span{
    font-size: 12px;
    color: var(--color-descrp);
    font-weight: normal;
    margin-left: 5px;
  }
  .wrapper-cart .top-cart i{
    font-size: 20px;
    cursor: pointer;

  }
  .wrapper-cart  .items_in_cart{
    padding: 20px 0;
    border-block: 1px solid var(--border-color);
    margin-block: 20px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
  
  }
  .quantity-controls{
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-right: 10px;
    gap: 8px;
    margin-bottom: 8px;
  }
  .quantity-controls button{
    background:var(--border-color);
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    
  }
  .quantity-controls span{
    font-size: 12px;
  }
  .wrapper-cart .item-cart .cart-content{
    border-bottom:2px dotted var(--border-color);
    width: 100%;
  }
  .wrapper-cart .items_in_cart .item-cart{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    text-transform: capitalize;
   
  }
  .wrapper-cart .item-cart:last-child(2){
    margin-bottom: 0 !important;
  }
  .shop{
    display: flex;
    gap: 5px;
  }
  .shop h2{
    font-size: 16px;
    font-weight:bold;
    color: var(--color-titre-h3);
  }
  .shop i{
    font-size: 16px;
    color: var(--main-color1);
  }
  .wrapper-cart .item-cart img{
    max-width: 110px;
    width: 100%;
    height: 100px;
    object-fit: cover,contain;
    object-position: center;
    display: block;
    background: var(--border-color);
   
  }
  .wrapper-cart .item-cart h3{
     margin-bottom: 10px;
     margin-top: 10px;
     color: var(--color-titre-h3);
     font-weight: 500;
     font-size: 16px;
  }
  .wrapper-cart .item-cart .cart-price{
    color:var(--main-color1);
    font-weight: bold;
  }
   .wrapper-cart .item-cart .delete{
    border: none;
    outline: none;
    background: none;
   }
   .wrapper-cart .item-cart .delete i{
    font-size:16px;
    transition: 0.3s;
    cursor: pointer;
   }
   .wrapper-cart .item-cart .delete i:hover{
      color: var(--main-color1);
      transform: scale(1.1);

   }
  .wrapper-cart .bottom-cart .total{
    display: flex;
    justify-content:space-between ;
    margin-bottom: 30px;
    margin-top: 10px;
    font-weight: 500;
  }
  .wrapper-cart .bottom-cart .price-total{
    color:var(--dark-color);
    font-weight: bold;
  }

  .wrapper-cart .button-cart{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .button-cart .btn_cart{
    background-color: var(--dark-color);
    border: 2px solid var(--dark-color); 
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    color:var(--icon-color);
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s ease;

  }
  .wrapper-cart .button-cart .btn_cart:hover{
    background: transparent;
    color: var(--color-titre-h3);
  }
  .custom-confirm-button {
    border: 2px solid black; /* Bordure noire */
    color: black; /* Texte en noir */
   background: none !important;
}

.custom-confirm-button:hover {
    background-color: #2874a6; /* Couleur de fond au survol */
}

 /*resoonsive*/
  
/* .users{
  margin-left:5px;
} */

 .search-convo{
    display: flex;
  

 }


 /* search bar*/
 .users .search-convo {
     border: 2px solid #ddd;;
     position: relative;
     border-radius: 5px;
     

} 

.no-results
.users .search-convo  button i{
   font-size: 20px;
   color: var(--icon-color);
   
}
.users .search-convo  .input{
  outline: none !important;
  border: none;
  background: none;
   width: 100%; 
   padding: 10px 100px 10px 10px;
   font-family: poppins,sans-serif;
   font-size: 12px;
  
 
} 

.modal{
    position: fixed !important;
    left: 100px !important;
    width: 500px !important;
    top: 25px !important;
    scrollbar-width: none !important;
    /* height: 500px !important; */
    border-radius: 10px !important;
    
   
}
.modal-content{
  z-index: 1000;
  position: relative;
}

/* Bouton de fermeture */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: var(--dark-color);
}
.search-bar {
  display: none; /* Masquée par défaut */
  width: 100%; /* Prend toute la largeur */
  padding: 10px;
  position: relative;
  top: 5px;
}

.search-bar input {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--dark-color);
  border-radius: 5px;
  font-size: 16px;

}

.container-header .btn_open_menu,
.links .navbar ul .btn_close_menu, 
.box-icon .input_search{
  display: none;
  cursor: pointer;
}

.swiperProducts{
  height: 380px !important;
}
.swiperProducts .price{
  margin-bottom: 0px !important;
}
/* responsive */
/* Grid responsives */
@media (min-width: 1600px) {
 
.container-header {
  width:95%;
}
}

@media (max-width: 1599px) and (min-width: 1200px) {
 
.container-header{
  width:95%;
}
}

@media (max-width: 1199px) {
  .container-header{
   width:95%;
}
}



 @media (max-width:1069px)  {
   
    
    header .header-top .search{
      display: none;
    }
    
    header .navigation .links{
      padding: 20px 0;  
    }
    
    
    .links .navbar ul .btn_close_menu{
        position: absolute;
        top: 25px;
        right: 20px;
        font-size: 23px;
        color: var(--color-titre-h3);
    }
    header .links .navbar ul{
      padding-top: 50px;
      position: fixed;
      left: -400px;
      top: 0;
      bottom: 0;
      width: 300px;
      flex-direction: column;
      gap: 20px;
      background: var(--icon-color);
      /* text-align: center;  */
      border-right:1px solid var(--border-color);
      transition: 0.3s ease-in-out;
      z-index: 100;
      height: 100vh;

    }
    header .links .navbar ul.active{
      left: 0;
    }
    
    .links .navbar ul .btn_close_menu{
      position: absolute;
      top: 20px;
      right: 20px;
      font-size:20px;
      color: var(--color-titre-h3);
      display: block;
     
    }
    .container-header .btn_open_menu{
      display: block;
      font-size:25px;
    }
    .header-top .box-icon{
      gap: 12px;
    }
    .header-top.box-icon .notification i{
      font-size: 18px;
    }
   
    .box-icon .input_search{
      display: block;
      font-size: 18px;
    }
    .header-top .box-icon .notification span{
      
      top: -6px;
      right:-6px;
      width:15px;
      height:15px;
      border-radius: 50%;
      
      font-size: 8px;
      font-weight: 700;
    
    }
    .wrapper-cart{
      position: fixed;
       left: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      
     }
     
   .search-bar {
    position: fixed;
    top: 50px; /* Ajustez en fonction de la hauteur de votre header */
    left: 0;
    width: 100vw; /* Prend toute la largeur de l'écran */
    background: white;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Pour être au-dessus du contenu */
}
.modal_message{
  width: 50%;
  
}

.modal{
   width: 100% !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0;
   height: 100vh !important;
 
    }
    .modal-content{
      width: 100% !important;
      height: 100% !important;
      position: relative;
    
    }
    
}

@media (max-width:768px)  {
  .wrapper-cart .item-cart h3{
    font-size: 13px;
 }
 .wrapper-cart .item-cart .cart-price{
   
   font-size: 12px;
 }
 
  .wrapper-cart .item-cart .delete i{
   font-size:12px;
 
  }
  .wrapper-cart .item-cart img{
    max-width:100px ;
    
    
  }
  .modal_message{
  width: 90%;
  
}
  
 
 .button-cart .btn_cart{
   font-size: 14px;
  

 }
 .modal_notification{
  width: 100%;
  
}
.users .search-convo {
  padding: 0 10px;
}
 
}