/* ==========================================================================
   BLOOP — Barre de réduction [bloop_barre_reduction]
   Fichier : bloop_css/shortcode_progress_reduction.css
   Va avec : bloop_inc/shortcode_progress_reduction.php + bloop_js/shortcode_progress_reduction.js

   Sous la grille de cookies (colonne de gauche) : titre + nb de cookies,
   prix live, barre de progression vers le prochain palier de réduction.
   Pas de bouton ici : "Ajouter au panier" est dans [bloop_panier].
   La barre se masque toute seule si le produit n'a pas de paliers
   (ex. mini cookies, box Best-sellers).
   ========================================================================== */

.bloop-barre-reduction {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}
.bloop-barre-info {
	flex: 1 1 260px;
	min-width: 0;
}
.bloop-barre-titre {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 6px;
}
.bloop-barre-titre span {
	color: var(--main-dark);
}
.bloop-barre-prix {
	font-weight: 700;
	font-size: 26px;
	color: var(--main-dark);
	margin: 0 0 12px;
}
.bloop-barre-progress {
	width: 100%;
	max-width: 100%;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
	background: rgba(0,0,0,0.1);
}
.bloop-barre-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--main-dark);
	border-radius: 999px;
	transition: width .2s ease;
}
.bloop-barre-hint {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	min-height: 1em; /* évite que la barre "saute" quand le message apparaît/disparaît */
}


@media (max-width: 600px) {
	.bloop-barre-reduction {
		flex-direction: column;
		align-items: stretch;
	}
}