.product-grid .card-body,
.product-grid .card-title,
.product-grid p,
.product-grid .btn {
    font-size: 0.78rem !important;
}
.product-grid .btn {
    padding: 0.18rem 0.4rem !important;
    font-size: 0.75rem !important;
}
.product-grid .card-title {
    font-size: 0.85rem !important;
}
@media (max-width: 576px) {
    .product-grid .card-img-top {
        height: 200px !important;
    }
    .product-grid .card-body,
    .product-grid .card-title,
    .product-grid p,
    .product-grid .btn {
        font-size: 0.72rem !important;
    }
    .prix-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .prix-stack .text-danger {
        margin-top: -2px;
    }
}
@media (min-width: 577px) {
    .prix-stack {
        display: inline-block;
    }
}



.product-title {
    white-space: nowrap;        /* Empêche le retour à la ligne */
    overflow: hidden;           /* Cache le texte qui dépasse */
    text-overflow: ellipsis;    /* Ajoute "..." à la fin */
    display: block;             /* Nécessaire pour que ça fonctionne */
    max-width: 200px;           /* largeur maximale de la ligne (à adapter à ton design) */
}

#main-image {
    width: 100%;
    max-width: 400px;   /* largeur max */
    height: 320px;      /* hauteur fixe */
    object-fit: contain; /* garde les proportions, met des bandes si besoin */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.card-detail-prod {
    bottom: 1.5rem;
}











































/* .product-grid .card-body,
.product-grid .card-title,
.product-grid p,
.product-grid .btn {
    font-size: 0.78rem !important;
}
.product-grid .btn {
    padding: 0.18rem 0.4rem !important;
    font-size: 0.75rem !important;
}
.product-grid .card-title {
    font-size: 0.85rem !important;
}
@media (max-width: 576px) {
    .product-grid .card-img-top {
        height: 90px !important;
    }
    .product-grid .card-body,
    .product-grid .card-title,
    .product-grid p,
    .product-grid .btn {
        font-size: 0.72rem !important;
    }
    .prix-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .prix-stack .text-danger {
        margin-top: -2px;
    }
}
@media (min-width: 577px) {
    .prix-stack {
        display: inline-block;
    }
}

#main-image {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
} */