/* Grille des produits */
.produits {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin-top: 30px;
}

.produits .product {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 30%;
  text-align: center;
}

.add-to-cart-btn {
  background-color: #007bff; /* Couleur de fond bleue */
  color: #fff; /* Texte blanc */
  border: none;
  border-radius: 5px; /* Coins arrondis */
  padding: 10px 20px; /* Espacement intérieur */
  font-size: 1rem; /* Taille de police */
  cursor: pointer; /* Curseur en forme de main */
  transition: background-color 0.3s ease; /* Animation au survol */
}

.add-to-cart-btn:hover {
  background-color: #0056b3; /* Couleur de fond plus foncée au survol */
}

.add-to-cart-btn:active {
  transform: scale(0.95); /* Effet de clic */
}
.add-to-cart-btn i {
  margin-right: 8px; /* Espace entre l'icône et le texte */
}
@keyframes addedToCart {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.add-to-cart-btn.added {
  animation: addedToCart 0.3s ease;
}

.toast {
  visibility: hidden; /* Caché par défaut */
  min-width: 250px; /* Largeur minimale */
  background-color: #333; /* Fond sombre */
  color: #fff; /* Texte blanc */
  text-align: center; /* Centrer le texte */
  border-radius: 5px; /* Coins arrondis */
  padding: 16px; /* Espacement intérieur */
  position: fixed; /* Position fixe */
  z-index: 1000; /* Au-dessus de tout */
  bottom: 30px; /* Position en bas */
  left: 50%; /* Centrer horizontalement */
  transform: translateX(-50%); /* Ajustement pour le centrage */
  opacity: 0; /* Transparent par défaut */
  transition: opacity 0.5s, visibility 0.5s; /* Animation */
}

.toast.show {
  visibility: visible; /* Visible */
  opacity: 1; /* Opacité complète */
}

.produits .product img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.produits .product h2 {
  margin: 20px 0;
}

.produits .product p {
  color: #777;
}

.produits .cta {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.produits .cta:hover {
  background-color: #0056b3;
}
/* Comparatif horizontal */
.comparatif-horizontal {
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow-x: auto; /* Active la barre de défilement horizontal */
  white-space: nowrap; /* Empêche les colonnes de se plier */
}

.comparatif-horizontal table {
  border-collapse: collapse;
  width: 100%; /* Largeur adaptative */
  min-width: 1200px; /* Largeur minimale pour activer la barre de défilement */
}

.comparatif-horizontal th,
.comparatif-horizontal td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 15px;
  vertical-align: top;
}

.comparatif-horizontal th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #333;
}

.comparatif-horizontal td img {
  max-width: 120px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px;
}

.comparatif-horizontal .add-to-cart-button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.comparatif-horizontal .add-to-cart-button:hover {
  background-color: #0056b3;
}