/**
 * Promotions : panier, panier rapide, commande. Rampe T4 du thème
 * (docs/design/socle-t4.md) ; le rouge « tampon » marque une remise, comme il
 * marque le supplément designer et les alertes.
 */

.maelia-promo-total th,
.maelia-promo-total td,
.maelia-promo-total td .amount {
	color: var(--maelia-stamp, #A8403D);
	font-weight: 600;
}

.maelia-promo-economie th,
.maelia-promo-economie th .amount {
	color: var(--maelia-stamp, #A8403D);
	font-weight: 600;
}

.maelia-promo-economie th {
	padding-top: 0.25rem;
	text-align: right;
}

/* Au-dessus du nom d'une ligne remisée : l'offre qui l'a touchée. */
.maelia-promo-ligne {
	display: block;
	margin: 0 0 0.25rem;
}

.maelia-promo-ligne > span {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: #FBEFEE;
	color: var(--maelia-stamp, #A8403D);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Au panier, sur une seule ligne : l'étiquette déborde de la colonne du nom
 * au-dessus des prix (centrés en hauteur dans la ligne) sans l'élargir — sa
 * boîte fait zéro de large. Sous 850 px, le tableau passe en cartes : elle
 * revient à la ligne. */
@media (min-width: 850px) {
	.woocommerce-cart-form .maelia-promo-ligne {
		position: relative;
		z-index: 1;
		width: 0;
		white-space: nowrap;
	}
}

.maelia-promo-messages {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

/* Classe doublée : Flatsome pose 1,3 em de marge gauche sur toute puce de
   liste du contenu (`.col-inner ul li`, même poids qu'une classe et deux
   balises, et chargé après), ce qui décalait les messages par rapport à la
   note de Noël. */
ul.maelia-promo-messages.maelia-promo-messages > li {
	margin: 0 0 0.5rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--maelia-radius, 3px);
	background: var(--maelia-teal-200, #E2F0EB);
	color: var(--maelia-teal-500, #10564A);
	font-size: 0.875rem;
	line-height: 1.4;
}

.maelia-promo-messages a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.maelia-promo-messages a:hover,
.maelia-promo-messages a:focus-visible {
	color: var(--maelia-ink, #0E3B33);
}

.woocommerce-mini-cart__buttons ~ .maelia-promo-messages,
.widget_shopping_cart .maelia-promo-messages {
	margin: 0.75rem 0;
}

.woocommerce-cart-form del,
.widget_shopping_cart del,
.shop_table del {
	color: var(--maelia-muted, #4A635B);
	font-weight: 400;
	/* Le trait (coup de crayon rouge en biais) vient du thème, maelia-tokens.css. */
}

/* Le bandeau des offres : bande d'encre au bas de l'en-tête collant, une offre
 * à la fois. Toutes les offres partagent la même case de grille : la hauteur
 * reste celle de la plus longue, quelle que soit l'offre affichée. */
.maelia-bandeau {
	position: relative;
	z-index: 1;
	background: var(--maelia-ink, #0E3B33);
	color: #fff;
}

.maelia-bandeau__piste {
	display: grid;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0.625rem 15px;
	perspective: 20rem;
}

.maelia-bandeau__diapo {
	grid-area: 1 / 1;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
	backface-visibility: hidden;
	/* En attente : sur la tranche, sous la ligne. */
	transform: rotateX(-90deg);
	visibility: hidden;
}

/* Le flip : l'offre sortante bascule vers l'arrière (600 ms), puis la suivante
 * se relève à sa place (600 ms). Durée totale = DUREE dans bandeau.js. */
.maelia-bandeau__diapo--sortie {
	transform: rotateX(90deg);
	visibility: visible;
	transition: transform 600ms cubic-bezier(0.55, 0, 1, 0.45);
}

.maelia-bandeau__diapo--active {
	transform: none;
	visibility: visible;
	transition: transform 600ms cubic-bezier(0, 0.55, 0.45, 1) 600ms, visibility 0s 600ms;
}

@media (prefers-reduced-motion: reduce) {
	.maelia-bandeau__diapo {
		transition: none !important;
	}
}

/* La date de fin, collée au texte sans espace : l'écart est une marge, et le
 * bloc en ligne ne prend pas le soulignement du lien (ni sous l'écart, ni
 * sous la date). */
.maelia-bandeau__fin {
	display: inline-block;
	margin-left: 0.35em;
	font-size: 0.8em;
	opacity: 0.85;
	white-space: nowrap;
}

.maelia-bandeau a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.maelia-bandeau a:hover,
.maelia-bandeau a:focus-visible {
	color: var(--maelia-teal-300, #BFE0D8);
}

/* L'étiquette sur la carte : une pilule teinte tampon, décollée du coin de la
 * photo (maquette du 2026-10-30). Flatsome la range dans `.badge-container`
 * avec son dessin de pastille (carré, majuscules, 2,8em de côté) : on le
 * défait ici, pour l'étiquette seulement — « Promo ! » garde le sien. */
.badge-container .maelia-promo-etiquette {
	display: block;
	width: auto;
	height: auto;
	margin: 8px 0 0 8px;
	opacity: 1;
}

.badge-container .maelia-promo-etiquette .badge-inner {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0.25rem 0.625rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--maelia-stamp, #A8403D);
	box-shadow: 0 1px 2px rgba(14, 59, 51, 0.18);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
}

/* L'icône en tête d'un texte (inc/icones.php) : taille et couleur du texte. */
.maelia-icone {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.4em;
	vertical-align: -0.2em;
	flex-shrink: 0;
}

/* L'encart sur la fiche, sous le prix. */
.maelia-promo-encart {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid #EBC9C6;
	border-radius: var(--maelia-radius, 3px);
	background: #FBEFEE;
	color: var(--maelia-ink, #0E3B33);
	font-size: 0.9375rem;
	line-height: 1.45;
}