/* Conteneur des produits */
.produits-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Grille responsive */
    gap: 20px;
    margin: 20px;
}

/* Style de chaque produit */
.produit {
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* Effet de transition lors du survol */
}

.produit:hover {
    transform: translateY(-5px); /* Effet de levée lors du survol */
}

.produit-image img {
    max-width: 200px;  /* Limite la largeur à 200px */
    height: auto;      /* Conserve les proportions */
    border: 2px solid #ddd; /* Bordure légère pour améliorer l'apparence */
    border-radius: 8px; /* Coins arrondis pour un rendu esthétique */
    display: block;     /* Assure que l'image ne dépasse pas */
    margin-bottom: 15px; /* Espacement en bas */
}
.hero-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* Style de l'image du produit */
.produit img {
    max-width: 100%;  /* Limite la largeur de l'image à 100% de son conteneur */
    height: auto;     /* Ajuste la hauteur pour maintenir les proportions */
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Titre du produit */
.produit h3 {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #333;
}

/* Description du produit */
.produit p {
    font-size: 1rem;
    color: #555;
    margin: 10px 0;
}

/* Étoiles de notation */
.stars {
    color: #f1c40f;
    margin: 10px 0;
}

/* Style des boutons de quantité */
.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
}

.button-minus, .button-plus {
    background-color: #a6c8ff; /* Bleu pâle */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #333;
    border-radius: 5px;
}

.button-minus:hover, .button-plus:hover {
    background-color: #86b3e0; /* Bleu légèrement plus foncé au survol */
}

/* Champ de quantité */
.quantite-input {
    text-align: center;
    font-size: 1rem;
    width: 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

/* Style du bouton d'ajout au panier - Mauve */
.ajout-panier {
    background-color: #c1a0e7; /* Mauve pâle */
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 15px;
}

.ajout-panier:hover {
    background-color: #9b7ac9; /* Mauve plus foncé au survol */
}

/* Message de rupture de stock */
.rupture {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}

/* Style général pour les petits écrans (mobile) */
@media (max-width: 768px) {
    .produits-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .produit {
        padding: 15px;
    }

    .quantite-input {
        width: 40px;
    }

    .ajout-panier {
        padding: 8px 16px;
    }
}
.btn-primary {
    background-color: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
}

.btn-primary:hover {
    background-color: darkblue;
}

.btn-mauve {
    background-color: #BA55D3 !important; /* Mauve moyen */
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer;
    border-radius: 5px;
}

.btn-mauve:hover {
    background-color: #9400D3 !important; /* Violet foncé */
}
.form-client {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-primary {
    width: 100%;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}