.card {
    width: 80%;
    /* Prend 80% de la largeur de son conteneur parent */
    max-width: 600px;
    /* Limite la largeur maximale à 600px */
    min-height: 100px;
    /* Hauteur minimale de 300px */
    padding: 20px;
    /* Ajoute 20px de remplissage à l'intérieur de la carte */
    margin: 20px auto;
    /* Centre la carte avec une marge verticale */
    border: 1px solid #ddd;
    /* Bordure légère autour de la carte */
    border-radius: 8px;
    /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Ombre légère */
    background-color: #fff;
    /* Couleur de fond blanche */
    transition: transform 0.3s ease !important; /* Transition fluide */
}

.card:hover {
    transform: scale(1.05) !important; /* Agrandissement de 5% au survol */
}

.card-title {
    text-align: center;
    /* Centre le texte */
    margin: 1rem 0;
    /* Ajoute un espacement vertical */
}

.card-title a {
    color: #555;
    /* Couleur du texte */
    font-weight: bold;
    /* Met le texte en gras */
    text-decoration: none;
    /* Supprime le soulignement */
    transition: color 0.3s ease;
    /* Ajoute une transition douce pour le changement de couleur */
}

.card-title a:hover {
    color: #007bff;
    /* Couleur au survol (bleu) */
    text-decoration: underline;
    /* Ajoute un soulignement au survol */
}

h3 {
    margin: 20px 0;
    /* Marge verticale */
    padding: 10px;
    /* Remplissage interne */
}

h4 {
    margin: 20px 60px;
    /* Marge verticale */
    padding: 10px;
    /* Remplissage interne */
}

body {
    background-color: rgb(240, 240, 240);
    /* Couleur gris très clair */
}


.image-container {
    width: 250px; /* Largeur du carré */
    height: 250px; /* Hauteur du carré */
    background-color: white; /* Couleur de fond (espace blanc) */
    display: flex; /* Utilise flexbox pour centrer l'image */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.image-container img {
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur */
    max-height: 100%; /* Assure que l'image ne dépasse pas la hauteur */
    object-fit: contain; /* Contient l'image dans le carré sans la couper */
}

.btn-panier {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: #2d3e50; /* Couleur ElectroHub */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    
  }

  .btn-panier:hover {
    background-color: #2a60a5; /* Variation plus foncée au survol */
    transition: transform 0.3s ease !important; /* Transition fluide */
    transform: scale(1.20) !important;
  }

  .btn-panier svg {
    width: 24px;
    height: 24px;
    fill: white;
  }

.dropdown-menu {
    z-index: 1050; /* Assurez-vous que ce z-index est supérieur à celui de la carte */
}

.icon:hover {
    font-size: 1.5rem;
    transition: transform 0.3s ease !important; /* Transition fluide */
    transform: scale(1.35) !important;
  }

.card-group-custom {
    margin: 0 30px; /* Ajustez la valeur selon vos besoins */
}

.card-group-custom-v2 {
    margin: 0 30px; /* Ajustez la valeur selon vos besoins */
}

.image-container {
    width: 250px; /* Largeur du carré */
    height: 250px; /* Hauteur du carré */
    background-color: white; /* Couleur de fond (espace blanc) */
    display: flex; /* Utilise flexbox pour centrer l'image */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.image-container img {
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur */
    max-height: 100%; /* Assure que l'image ne dépasse pas la hauteur */
    object-fit: contain; /* Contient l'image dans le carré sans la couper */
}