@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.card-product-parent{
    background-color: white;
    border-radius: 1rem;
    padding: 1.8rem;
    margin-bottom: 3rem;
}

.title {
    margin: 0 0;
    
  }
  
  .title__gap {
    gap: 1.5rem 2.4rem;
  }
  .por {
    position: relative;
  }

  .header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title__heading {
    margin: 0;
    font-size: 1.5em; /* Ajustez selon vos besoins */
  }
  
  .title__line {
    flex-grow: 1;
    margin: 0 10px; /* Ajustez l'espacement selon vos besoins */
  }
  
  .title__buttons {
    display: flex;
    gap: 10px; /* Ajustez l'espacement entre les boutons */
  }
  
  .button {
    display: flex;
    align-items: center;
    gap: 5px; /* Ajustez l'espacement entre l'icône et le texte */
  }
  

/* button de block */

/* From Uiverse.io by cssbuttons-io */ 
.button-gamme {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #4f4f4f;
    border-radius: 4px;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    font-size: 19px;
    cursor: pointer;
    color: black;
    z-index: 1;
  }
  
  .button-gamme:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button-gamme:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #6c63ff;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button-gamme:hover {
    color: #ffffff;
    border: 1px solid #6c63ff;
  }
  
  .button-gamme:hover:before {
    top: -35%;
    background-color: #6c63ff;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .button-gamme:hover:after {
    top: -45%;
    background-color: #6c63ff;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  


  /* cadre body  */
    
.card-wrapper{
  /* max-width: 1100px; */
  /* margin:0 60px 35px; */
  padding: 20px 10px;
  overflow: hidden;

}
.card-list .card-item{
  list-style: none;
}
.card-list .card-item .card-link{
  user-select: none;
  display:block;
  background-color: #f1f1f3;
  padding:18px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  border:2px solid transparent;
  transition: 0.3s ease;
  
}

.card-list .card-item .card-link:hover{
    border-color: #5372F0;
    transform: scale(1.05) translateY(-5px); /* Légère élévation avec le zoom */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* Ombre plus douce et réaliste */
}

.brand-back:hover{
  border-color: #5372F0;
  transform: scale(1.05) translateY(-5px); /* Légère élévation avec le zoom */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* Ombre plus douce et réaliste */
  transition: 0.7s ease;

}


.card-list .card-link .card-image{
  width:100%;
  aspect-ratio: 10 / 9;
  object-fit: cover;
  border-radius: 10px;

}

.card-list .card-link .badgee{
  color:#5372F0;
  padding:8px 16px;
  font-size: 0.95rem;
  font-weight: 500px;
  margin: 16px 0 18px;
  background: #DDe4ef;
  width:fit-content;
  border-radius: 50px;

  display: inline-flex;  /* Aligner le prix et le pourcentage en ligne */
  align-items: center;   /* Centre verticalement */
  gap: 8px;              /* Espace entre le prix et le pourcentage */
  background-color: #f1c40f; /* Couleur de fond du badge */
  font-size: 14px;       /* Taille du texte */

}

.card-list .card-link .card-title{
  font-weight: 500;
  color: black;
  font-size: 1.3rem;

}
/* .card-list .card-link .card-button{
  height: 35px;
  width:35px;
  color:#5372F0;
  border-radius: 50%;
  margin:30px 0px 5px;
  border: 2px solid #5372F0;
  background: none;
  cursor: pointer;
  transform: rotate(-45deg);
  transition:  0.4s ease;
  padding: 3px;
} */
/* .card-list .card-link:hover .card-button{
color:#ffffff;
background: #5372F0;
transform: scale(1.1);
} */
.card-list .card-link .price-cadre{
  font-size:1.19rem;
  color:#e73d48;
  font-weight: 600;
  margin: 1rem;
  text-align: center;
  display: block;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  background: none;
  border-radius: 50px;
  transition: 0.3s ease;
}

.card-list .card-link:hover .price-cadre{
  transform: scale(1.1);
}


.original-price {
  color: black;
  font-size: 1.3rem;
  font-weight: 400;
}

.discount-percent {
  color: #e74c3c; /* Couleur rouge pour le pourcentage de réduction */
  font-size: 14px; /* Taille du texte du pourcentage */
  font-weight: bold; /* Texte en gras */
}

.container_out{
    display: block;
    background-color: #ffffff;
    padding:12px 15px 1px;
  }



  
  .positionPrice {
    position: absolute; /* Permet de positionner le prix par rapport au parent */
    top: 10px; /* Ajustez la distance depuis le haut */
    right: 10px; /* Ajustez la distance depuis la droite */
    background-color: rgba(255, 255, 255, 0.8); /* Optionnel : ajoute un fond semi-transparent */
    padding: 5px 10px; /* Optionnel : ajoute de l'espace autour du texte */
    border-radius: 5px; /* Optionnel : ajoute des coins arrondis */
    font-size: 1rem; /* Ajustez la taille de la police selon vos besoins */
    color: #000; /* Couleur du texte */
    text-decoration: line-through !important; /* Barre le texte */
    color: #1749b7; /* Optionnel : change la couleur du texte pour plus de visibilité */
  }
  .textcard1{
    text-align: center;
    font-weight: 500;
    padding: 5px;
  }