/* FIX PRODUITS CLICK & COLLECT - SOLUTION FLEXBOX DEFINITIVE */

#commande .produit, 
#catalogue .produit, 
.produit {
    display: flex !important;
    flex-direction: row !important;
    height: 190px !important; 
    background-color: #fff !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin-top: 15px !important;
    position: relative !important;
}

/* Annule les paddings ou marges résiduels de la row conteneur si existante */
.produit > .row {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
}

/* 1. L'image à gauche - Flex fixe */
.illuproduit {
    float: none !important;
    display: block !important;
    content: "" !important;
    flex: 0 0 48% !important; /* Poussé au maximum pour sublimer la photo */
    max-width: 48% !important;
    min-height: 160px !important; /* Empeche l'effondrement */
    height: 100% !important;
    margin: 0 !important;
    background-color: #fff !important; /* Fond blanc au lieu de gris */
    background-size: cover !important; /* Cover remplit toute la zone et supprime le vide vertical (crop latéral) */
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 8px 0 0 8px !important;
}

/* 2. Les détails à droite - Flex colonne pour distribuer l'espace verticalement */
.details {
    float: none !important;
    width: 52% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Force les inputs en bas */
}

/* L'icône Info passe en absolu pour ne pas péter la flex-colonne */
.infobulle {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    float: none !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* Titres et textes s'étendent en haut */
.produit-meta {
    flex-grow: 1 !important;
    padding-right: 25px !important; /* Place pour le {i} */
}

.produit-meta b {
    height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
}

/* La mention (+20cts tranché) etc. */
.produit-meta small {
    display: block !important;
    margin-bottom: 10px !important;
}

/* 3. Zone d'inputs repassée dans le flux naturel Normal (sans "absolute") */
.qtecommande {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important; /* Evite le débord des -15px des rows Bootstrap classiques */
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Labels propres et alignés */
.qte-label {
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Annulation des paddings agressifs sur les colonnes internes */
.qtecommande .col-5, 
.qtecommande .col-7,
.qtecommande .col-4 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.qtecommande .col-5:first-child,
.qtecommande .col-4:first-child {
    padding-left: 0 !important;
}

.qtecommande .col-7:last-child {
    padding-right: 0 !important;
}