/* Style du CSS */
.description-section {
    padding: 40px 0;
}

.description-section .container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.description-section .col-md-4 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.description-section .img-fluid {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.products-section {
    background-color: #f8f9fa;
    padding: 40px 0;
}

.product-item {
    text-align: center;
    margin-bottom: 20px;
}

.product-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast; /* Webkit (Chrome, Safari) */
    image-rendering: crisp-edges;               /* CSS3 Proposed */
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: pixelated;                 /* Future CSS3 */
}

.product-item h5 {
    margin-top: 10px;
    font-size: 1.2em;
}

.product-item p {
    font-size: 0.9em;
    display: none; /* Masquer les descriptions initialement */
}

/* Bouton fiche technique en vert */
.product-item a.btn {
    display: block;
    margin-top: 10px;
    color: #fff;
    background-color: #18AB2F; /* Vert */
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
}

.product-item a.btn:hover {
    background-color: #146c30; /* Vert plus foncé */
}

.product-item .card-body {
    padding: 0; /* Assurez-vous qu'il n'y a pas de padding qui limite la taille des enfants */
}

.product-item .description-btn {
    display: block;
    width: 100%; /* Force le bouton à prendre toute la largeur disponible */
    margin-top: 5px;
    color: #000; /* Noir */
    background-color: transparent;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #000; /* Bordure noire */
    border-radius: 5px;
    text-align: center;
}

.product-item .description-btn:hover {
    background-color: #e2e6ea; /* Gris clair au survol */
}