/* Wrapper du bloc remise */
.remsacs25-wrapper {
    margin-top: 14px;
    clear: both;
}

/* Bloc tarif avec fond et bordure */
.remsacs25-box {
    padding: 14px;
    background: #faf5ff;
    border-left: 4px solid #B666D2;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px; /* espace entre les lignes */
}

/* Lignes tarifaires */
.remsacs25-line {
    font-size: 15px;
    margin-bottom: 6px;
}

/* Prix initial barré */
.original-price {
    text-decoration: line-through;
    color: #888;
    margin-right: 6px;
}

/* Prix calculé */
.calc-price {
    color: #B666D2;
    font-weight: 800;
    margin-right: 6px;
}

/* Badge pourcentage remise */
.discount-badge {
    background: #B666D2;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
}

/* Prix au kilo */
.kg-price {
    display: block;
    font-size: 13px;
    color: #555;
    margin-top: 4px;
}

/* Total TTC si quantité > 1 */
.remsacs25-total {
    margin-top: 6px;
    font-weight: 700;
}

/* Livraison gratuite */
.delivery {
    margin-top: 6px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2a7d2a;
}

/* Camion animé */
.truck {
    display: inline-block;
    margin-right: 5px;
    animation: truck-move 1s ease-in-out infinite alternate;
}

@keyframes truck-move {
    0% { transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* Message “Encore X sacs…” avec pièces animées */
.delivery-warning {
    margin-top: 6px;
    font-weight: 700;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.coins {
    display: inline-block;
    margin-right: 6px;
    animation: coins-move 1s ease-in-out infinite alternate;
}

@keyframes coins-move {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* Label du select en gras et rapproché du select */
.remsacs25-label {
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

/* Select des variations */
.value-remsacs25 select {
    margin-bottom: 12px;
}

/* Champ quantité */
.quantity-under-select {
    margin-top: 6px;
    margin-bottom: 12px;
}

/* Ajouter un peu d’espace avant bouton Ajouter au panier */
.single-add-to-cart-wrapper {
    margin-top: 16px;
    clear: both;
}

.variations_form.quantity {
    margin-bottom: 12px;
}
.total-saving {
    margin-left: 8px;
    font-weight: 600;
    color: #2a7d2a;
}

/* Forcer les blocs sur des lignes distinctes */
.delivery {
    display: block;
}

.remsacs25-box .delivery + div {
    display: block;
}

/* Corriger le layout WooCommerce variations */
.variations td.value {
    display: block;
}

/* Forcer l’ordre vertical */
.value-remsacs25 > * {
    display: block;
    width: 100%;
}

/* Bouton toujours sous la quantité */
.single-add-to-cart-wrapper {
    margin-top: 16px;
    text-align: left;
}


/* =========================
   RESPONSIVE MOBILE
   ========================= */

@media (max-width: 768px) {

    /* Bloc remise */
    .remsacs25-box {
        padding: 12px;
        gap: 8px;
    }

    .remsacs25-price-line {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Prix principal plus lisible */
    .calc-price {
        display: inline-block;
        font-size: 18px;
    }

    .original-price {
        display: inline-block;
        font-size: 14px;
    }

    /* Badge remise */
    .discount-badge {
        font-size: 11px;
        padding: 2px 5px;
    }

    /* Livraison */
    .delivery {
        flex-wrap: wrap;
        font-size: 14px;
    }

    /* Phrase “plus que X sacs…” */
    .coins {
        font-size: 16px;
    }

    /* Espaces formulaire */
    .quantity-under-select {
        margin-bottom: 10px;
    }

    .single-add-to-cart-wrapper {
        margin-top: 16px;
    }

    /* Bouton ajouter au panier full width */
    .single-add-to-cart-wrapper button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}
