/* Promotions Discount.gay / Poppers Express — composants natifs et accessibles.
 *
 * Une seule boutique, un seul langage visuel : ces tokens sont partages avec
 * catalog-ui.css (bandeau sous le player et fiche overlay) pour que les six
 * surfaces cessent de vivre dans deux chartes graphiques differentes.
 *
 * Les valeurs viennent du site lui-meme (gold.min.css) : or #D4A853 en sombre
 * et #B8860B en clair, fonds --thumb-*, police Quicksand. Aucun vert ni jaune
 * « e-commerce » : l'or est le seul accent du systeme.
 */
.shop-promo,
.shop-promo * {
	box-sizing: border-box;
}

/* PALETTE DISCOUNT v6.
 *
 * L'or du site faisait « haut de gamme » et jurait avec un concept de
 * destockage. On revient a une grammaire de discounter, mais posee sur les
 * surfaces sombres du site au lieu d'une carte blanche.
 *
 * Quatre canaux, un role chacun, jamais interchangeables :
 *   ROUGE  la remise, et elle seule (pastille, pourcentage, barre du prix barre)
 *   VERT   l'achat, et lui seul (tout bouton commander)
 *   JAUNE  le flash deal et l'economie chiffree
 *   CYAN   la reassurance (livraison offerte, colis discret)
 *
 * Le papier n'est pas blanc : c'est le noir chaud #180c0c echantillonne sur le
 * fond du logo Discount.gay, qui se detache du #0a0a0a du site sans encadrement.
 */
.shop-promo,
.catalog-card {
	--dg-red: #d92d20;
	--dg-red-ink: #fff;
	--dg-red-text: #ff5a4a;
	--dg-red-soft: rgba(217, 45, 32, .14);
	--dg-red-line: rgba(255, 90, 74, .40);
	--dg-green: #00c46a;
	--dg-green-ink: #06210f;
	--dg-green-hover: #17d97d;
	--dg-green-text: #2fd98a;
	--dg-green-grad: linear-gradient(135deg, #00d47a, #00a758);
	--dg-yellow: #f0c030;
	--dg-yellow-ink: #180c0c;
	--dg-yellow-text: #f0c030;
	--dg-cyan: #00d8cc;
	--dg-cyan-soft: rgba(0, 216, 204, .13);
	--dg-paper: #16100f;
	--dg-paper-2: #1f1614;
	--dg-tag: #180c0c;
	--dg-rule: #33231f;
	--dg-ink: var(--thumb-text-color, #fff);
	--dg-ink-soft: var(--thumb-info-color, #b8b8b8);
	--dg-surface: #141414;
	--dg-surface-2: #1a1a1a;
	--dg-media: var(--thumb-placeholder-bg, #070707);
	--dg-line: #2a2a2a;
	--dg-plate: #f4f1ea;
	--dg-plate-2: #fff;
	--dg-plate-line: rgba(0, 0, 0, .10);
	--dg-chip: rgba(8, 5, 5, .74);
	--dg-scrim: 8, 5, 5;
	--dg-shadow: 0 10px 30px rgba(0, 0, 0, .42);
	--dg-cta-shadow: 0 6px 16px rgba(0, 196, 106, .22);

	/* Alias : les regles v5 non reecrites atterrissent sur le bon canal. */
	--dg-accent: var(--dg-red);
	--dg-accent-ink: var(--dg-red-ink);
	--dg-accent-text: var(--dg-cyan);
	--dg-accent-grad: var(--dg-green-grad);
	--dg-accent-soft: var(--dg-red-soft);
	--dg-accent-line: var(--dg-red-line);
	--dg-accent-line-hover: var(--dg-red-text);
}

/* En theme clair, les rouges et verts vifs doivent rester lisibles en TEXTE :
   les variantes -text foncent, les fonds pleins gardent leur vivacite. */
html.light .shop-promo,
html.light .catalog-card {
	--dg-red-text: #c22218;
	--dg-green-text: #067a42;
	--dg-yellow-text: #8a6400;
	--dg-cyan: #0d7c76;
	--dg-cyan-soft: rgba(13, 124, 118, .10);
	--dg-paper: #fff;
	--dg-paper-2: #f4f1ea;
	--dg-tag: #180c0c;
	--dg-rule: #e3ddd3;
	--dg-ink-soft: var(--thumb-info-color, #6b6b6b);
	--dg-surface: #fff;
	--dg-surface-2: #f7f6f4;
	--dg-line: #e9e7e2;
	--dg-plate: #fff;
	--dg-plate-line: rgba(0, 0, 0, .12);
	--dg-scrim: 20, 14, 12;
	--dg-shadow: 0 8px 22px rgba(40, 30, 12, .12);
	--dg-cta-shadow: 0 4px 12px rgba(0, 150, 82, .20);
}

/* Pont de compatibilite : les regles historiques non reecrites heritent des
   bonnes teintes au lieu des gris bleutes et des verts d'origine. */
.shop-promo {
	--sp-accent: var(--dg-accent);
	--sp-red: var(--dg-accent);
	--sp-green: var(--dg-accent);
	--sp-green-hover: var(--dg-accent);
	--sp-bg: var(--dg-surface);
	--sp-bg-soft: var(--dg-surface-2);
	--sp-text: var(--dg-ink);
	--sp-muted: var(--dg-ink-soft);
	--sp-line: var(--dg-line);
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	color: var(--sp-text);
	font-family: 'Quicksand', sans-serif;
	text-align: left;
}

.shop-promo[hidden],
.shop-promo-mount[hidden],
.shop-promo[data-shop-unavailable="1"],
html.am-prime .shop-promo,
html.am-prime .shop-promo-mount,
html.am-prime .shop-promo-list-item,
html.am-prime .shop-promo-reel-slide {
	display: none !important;
}

.shop-promo__link {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	background:
		radial-gradient(circle at 92% 0, rgba(212, 168, 83, .13), transparent 34%),
		linear-gradient(145deg, var(--sp-bg-soft), var(--sp-bg));
	box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
	color: var(--sp-text);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.shop-promo__link:hover,
.shop-promo__link:focus-visible {
	border-color: rgba(212, 168, 83, .7);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .33), 0 0 0 1px rgba(212, 168, 83, .13);
	color: var(--sp-text);
	text-decoration: none;
	transform: translateY(-2px);
}

/* Le blanc est invisible en theme clair (page #f2f2f2, carte #e0e0e0). */
.shop-promo__link:focus-visible,
.shop-promo__close:focus-visible {
	outline: 2px solid var(--dg-accent);
	outline-offset: 2px;
}

.shop-promo__media {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
}

.shop-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	background: #fff;
}

.shop-promo__media--logo {
	padding: 12px;
	background:
		linear-gradient(135deg, rgba(212, 168, 83, .14), transparent 52%),
		#090909;
}

.shop-promo__logo {
	display: block;
	width: min(100%, 240px);
	height: auto;
	max-height: 76px;
	padding: 8px;
	border-radius: 7px;
	background: #fff;
	object-fit: contain;
}

.shop-promo__discount {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	min-height: 27px;
	align-items: center;
	justify-content: center;
	padding: 5px 8px;
	border-radius: 999px;
	background: var(--sp-red);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
}

.shop-promo__content {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 15px;
}

.shop-promo__meta {
	display: flex;
	max-width: 100%;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
}

.shop-promo__brand {
	position: absolute;
	z-index: 2;
	bottom: 8px;
	left: 8px;
	display: inline-flex;
	height: 24px;
	max-width: 106px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

.shop-promo__brand-logo {
	display: block;
	width: auto;
	max-width: 90px;
	height: 15px;
	margin: 0;
	object-fit: contain;
}

.shop-promo__disclosure,
.shop-promo__flash {
	display: inline-flex;
	min-height: 20px;
	align-items: center;
	padding: 4px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.shop-promo__disclosure {
	border: 1px solid rgba(255, 255, 255, .15);
	color: var(--sp-muted);
	background: rgba(255, 255, 255, .04);
}

.shop-promo__flash {
	color: #fff;
	background: var(--sp-red);
}

.shop-promo__hook {
	display: block;
	max-width: 100%;
	margin: 0 0 3px;
	overflow: hidden;
	color: var(--sp-accent);
	font-size: 11px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: .02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo__title {
	display: -webkit-box;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -.018em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.shop-promo__prices {
	display: flex;
	max-width: 100%;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 9px;
}

.shop-promo__price {
	color: #fff;
	font-size: 23px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.035em;
}

.shop-promo__before {
	color: #8f8f8f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration-color: var(--sp-red);
	text-decoration-thickness: 2px;
}

.shop-promo__saving {
	flex-basis: 100%;
	color: #a9d8ad;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
}

.shop-promo__proof {
	display: flex;
	max-width: 100%;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 8px;
	color: var(--sp-muted);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
}

.shop-promo__shipping::before {
	margin-right: 5px;
	color: var(--sp-accent);
	content: "✓";
}

.shop-promo__discreet::before {
	margin-right: 5px;
	color: var(--sp-accent);
	content: "●";
}

.shop-promo__cta {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	margin-top: 11px;
	padding: 9px 14px;
	border-radius: 999px;
	background: linear-gradient(110deg, var(--sp-accent), #a97626);
	box-shadow: 0 7px 18px rgba(212, 168, 83, .2);
	color: #111;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}

.shop-promo__code {
	display: inline-flex;
	min-height: 28px;
	align-items: center;
	margin-top: 8px;
	padding: 6px 9px;
	border: 1px dashed rgba(212, 168, 83, .7);
	border-radius: 7px;
	color: #f4d18a;
	background: rgba(212, 168, 83, .08);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
}

.shop-promo__poppers-price {
	display: block;
	margin-top: 8px;
	color: #fff;
	font-size: 23px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
}

/* Carte native : une cellule de grille, sans créer de hauteur excessive. */
.shop-promo-list-item {
	min-width: 0;
	list-style: none;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link {
	height: 100%;
	min-height: 100%;
	flex-direction: column;
	border-radius: 8px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__media {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__media--logo {
	padding: 16px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__content {
	min-height: 116px;
	justify-content: flex-start;
	padding: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__meta {
	margin-bottom: 4px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand {
	bottom: 6px;
	left: 6px;
	height: 17px;
	max-width: 74px;
	padding: 2px 5px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand-logo {
	max-width: 64px;
	height: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__disclosure,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__flash {
	min-height: 17px;
	padding: 3px 5px;
	font-size: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__hook {
	font-size: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__title {
	font-size: 12px;
	line-height: 1.22;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices {
	margin-top: 6px;
	gap: 3px 6px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__price,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-price {
	font-size: 18px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__before {
	font-size: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__saving,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__discreet {
	display: none;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__proof {
	margin-top: 6px;
	font-size: 10px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__cta {
	min-height: 29px;
	margin-top: auto;
	padding: 7px 10px;
	font-size: 10px;
}

/* Poppers Express dans la grille : photo locale, fond noir uni, aucun dégradé. */
.shop-promo--native.shop-promo--poppers .shop-promo__link {
	border-color: rgba(255, 255, 255, .16);
	background: #080808;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.shop-promo--native.shop-promo--poppers .shop-promo__link:hover,
.shop-promo--native.shop-promo--poppers .shop-promo__link:focus-visible {
	border-color: rgba(255, 255, 255, .34);
	background: #0e0e0e;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.shop-promo--native.shop-promo--poppers .shop-promo__media--poppers {
	position: relative;
	padding: 0;
	background: #101010;
}

.shop-promo__poppers-visual {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .24s ease;
}

.shop-promo--native.shop-promo--poppers .shop-promo__link:hover .shop-promo__poppers-visual,
.shop-promo--native.shop-promo--poppers .shop-promo__link:focus-visible .shop-promo__poppers-visual {
	transform: scale(1.025);
}

.shop-promo__poppers-brand {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	height: 27px;
	max-width: calc(100% - 16px);
	align-items: center;
	padding: 4px 8px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}

.shop-promo__poppers-brand-logo {
	display: block;
	width: auto;
	max-width: 112px;
	height: 16px;
	object-fit: contain;
}

.shop-promo__poppers-europe {
	position: absolute;
	right: 8px;
	bottom: 8px;
	left: 8px;
	display: block;
	overflow: hidden;
	padding: 6px 8px 6px 20px;
	border-radius: 5px;
	color: #fff;
	background: rgba(8, 8, 8, .9);
	font-size: 11px;
	font-weight: 900;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo__poppers-europe::before {
	position: absolute;
	top: 50%;
	left: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sp-accent);
	content: "";
	transform: translateY(-50%);
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-content {
	min-height: 118px;
	padding: 10px;
}

.shop-promo__poppers-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 5px;
	color: var(--sp-accent);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.shop-promo__bottle-icon {
	position: relative;
	display: inline-block;
	width: 11px;
	height: 15px;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	border-radius: 2px 2px 4px 4px;
}

.shop-promo__bottle-icon::before {
	position: absolute;
	top: -6px;
	left: 2px;
	width: 3px;
	height: 5px;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
	content: "";
}

.shop-promo__bottle-icon::after {
	position: absolute;
	top: 5px;
	right: 2px;
	left: 2px;
	height: 2px;
	background: currentColor;
	content: "";
}

.shop-promo--native.shop-promo--poppers .shop-promo__title {
	font-size: 14px;
	line-height: 1.15;
	-webkit-line-clamp: 2;
}

.shop-promo__poppers-feature {
	display: block;
	margin-top: 6px;
	overflow: hidden;
	color: #d0d0d0;
	font-size: 10.5px;
	font-weight: 750;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo__poppers-offer-row {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	margin-top: auto;
	padding-top: 8px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.shop-promo--native.shop-promo--poppers .shop-promo__code {
	min-height: 21px;
	margin-top: 6px;
	padding: 4px 6px;
	font-size: 10px;
	letter-spacing: 0;
}

.shop-promo--native.shop-promo--poppers .shop-promo__cta {
	display: inline-flex;
	min-height: 29px;
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 9px;
	color: #080808;
	background: #fff;
	box-shadow: none;
	font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo__poppers-visual {
		transition: none;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__link:hover .shop-promo__poppers-visual,
	.shop-promo--native.shop-promo--poppers .shop-promo__link:focus-visible .shop-promo__poppers-visual {
		transform: none;
	}
}

/* ========================================================================== */
/* Surfaces vidéo commerce v2 : sobres, solides, lisibles, sans dégradé.       */
/* ========================================================================== */

/* Inversion de logique : la regle par defaut AFFICHE le bouton commander.
   Auparavant il etait masque ici et re-affiche surface par surface, si bien
   qu'un element obligatoire ne tenait que sur une victoire de specificite
   d'un point — et disparaissait sans erreur visible au moindre ajout. */
.shop-promo__product-cta {
	display: inline-flex;
}

/* ========================================================================== */
/* Native vidéo-list : contenu simplifié et aucune typographie microscopique. */
/* ========================================================================== */

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--discount .shop-promo__link,
.shop-promo--native.shop-promo--poppers .shop-promo__link {
	border-color: #30353c;
	border-radius: 10px;
	background: #111419;
	box-shadow: 0 9px 24px rgba(0, 0, 0, .25);
}

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--discount .shop-promo__link:hover,
.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--discount .shop-promo__link:focus-visible,
.shop-promo--native.shop-promo--poppers .shop-promo__link:hover,
.shop-promo--native.shop-promo--poppers .shop-promo__link:focus-visible {
	border-color: #59616c;
	background: #181c22;
}

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--flash .shop-promo__link {
	box-shadow: inset 4px 0 0 #d92d20, 0 9px 24px rgba(0, 0, 0, .25);
}

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--need .shop-promo__link,
.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--trust .shop-promo__link {
	box-shadow: inset 4px 0 0 #18794e, 0 9px 24px rgba(0, 0, 0, .25);
}

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--pick .shop-promo__link,
.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--code .shop-promo__link {
	box-shadow: inset 4px 0 0 #ffd33d, 0 9px 24px rgba(0, 0, 0, .25);
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__content,
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-content {
	min-height: 142px;
	padding: 11px 12px 12px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand {
	bottom: 7px;
	left: 7px;
	height: 23px;
	max-width: 96px;
	padding: 3px 7px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand-logo {
	max-width: 82px;
	height: 14px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__disclosure,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__flash {
	min-height: 21px;
	padding: 5px 7px;
	font-size: 10px;
	letter-spacing: .05em;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__hook,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-kicker {
	font-size: 11px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__title,
.shop-promo--native.shop-promo--poppers .shop-promo__title {
	font-size: 14px;
	line-height: 1.2;
	-webkit-line-clamp: 2;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices {
	margin-top: 7px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__price,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-price,
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
	font-size: 21px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__before {
	display: inline;
	color: #d5d8dd;
	font-size: 12px;
	text-decoration-color: #ef4a40;
	text-decoration-line: line-through;
	text-decoration-thickness: 2px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__saving,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__proof {
	display: none;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__code,
.shop-promo--native.shop-promo--poppers .shop-promo__code {
	display: none;
	min-height: 24px;
	margin-top: 7px;
	padding: 5px 7px;
	font-size: 10.5px;
	letter-spacing: 0;
}

.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--code .shop-promo__code {
	display: inline-flex;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__cta,
.shop-promo--native.shop-promo--poppers .shop-promo__cta {
	display: inline-flex;
	width: 100%;
	min-height: 36px;
	margin-top: auto;
	padding: 9px 11px;
	border-radius: 8px;
	background: var(--dg-brand);
	box-shadow: none;
	color: #15100a;
	font-size: 12px;
	font-weight: 900;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-feature,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-europe {
	font-size: 11px;
}

/* Bande native sous le lecteur. */
.shop-promo--under-player {
	margin: 14px 0 20px;
}

.shop-promo--under-player .shop-promo__media {
	width: clamp(140px, 24%, 220px);
}

.shop-promo--under-player .shop-promo__media--logo {
	width: clamp(180px, 32%, 300px);
}

.shop-promo--under-player .shop-promo__content {
	padding: 18px 20px;
}

.shop-promo--under-player .shop-promo__cta {
	position: absolute;
	right: 18px;
	bottom: 17px;
}

.shop-promo--under-player .shop-promo__proof {
	padding-right: 150px;
}

/* Mini slide-in DANS le player : aucune pause, fermeture explicite, auto-hide. */
.shop-promo-player-slide {
	position: absolute;
	z-index: 120;
	right: 12px;
	bottom: 54px;
	display: block;
	width: min(390px, calc(100% - 24px));
	opacity: 0;
	pointer-events: none;
	transform: translate3d(calc(100% + 24px), 0, 0);
	transition: opacity .25s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}

.shop-promo-player-slide.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

.shop-promo--player-slide .shop-promo__link {
	min-height: 104px;
	border-color: rgba(255, 255, 255, .22);
	border-radius: 12px;
	background: rgba(13, 13, 13, .96);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .58);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.shop-promo--player-slide .shop-promo__media {
	width: 104px;
}

.shop-promo--player-slide .shop-promo__content {
	padding: 11px 42px 11px 12px;
}

.shop-promo--player-slide .shop-promo__disclosure {
	display: none;
}

.shop-promo--player-slide .shop-promo__meta {
	margin-bottom: 4px;
}

.shop-promo--player-slide .shop-promo__brand {
	bottom: 6px;
	left: 6px;
	height: 18px;
	max-width: 80px;
	padding: 2px 6px;
}

.shop-promo--player-slide .shop-promo__brand-logo {
	max-width: 70px;
	height: 11px;
}

.shop-promo--player-slide .shop-promo__flash {
	min-height: 17px;
	padding: 3px 6px;
	font-size: 10px;
}

.shop-promo--player-slide .shop-promo__hook {
	font-size: 10px;
}

.shop-promo--player-slide .shop-promo__title {
	font-size: 12px;
	-webkit-line-clamp: 1;
}

.shop-promo--player-slide .shop-promo__prices {
	margin-top: 5px;
}

.shop-promo--player-slide .shop-promo__price {
	font-size: 18px;
}

.shop-promo--player-slide .shop-promo__before {
	font-size: 10px;
}

.shop-promo--player-slide .shop-promo__saving,
.shop-promo--player-slide .shop-promo__discreet,
.shop-promo--player-slide .shop-promo__code {
	display: none;
}

.shop-promo--player-slide .shop-promo__proof {
	margin-top: 4px;
	font-size: 10px;
}

.shop-promo--player-slide .shop-promo__cta {
	position: absolute;
	right: 11px;
	bottom: 10px;
	min-height: 27px;
	margin: 0;
	padding: 6px 9px;
	font-size: 10px;
}

.shop-promo__close {
	position: absolute;
	z-index: 4;
	top: 4px;
	right: 4px;
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	font: 500 24px/1 Arial, sans-serif;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Slide vertical : s'insère dans la cadence commerciale existante des Reels. */
.shop-promo-reel-slide,
.shop-promo-reel-slide > .shop-promo-mount,
.shop-promo--reel {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.shop-promo--reel .shop-promo__link {
	width: 100%;
	height: 100%;
	min-height: min(720px, 100dvh);
	flex-direction: column;
	justify-content: flex-end;
	border: 0;
	border-radius: 0;
	background: #090909;
	box-shadow: none;
}

.shop-promo--reel .shop-promo__link:hover,
.shop-promo--reel .shop-promo__link:focus-visible {
	transform: none;
}

.shop-promo--reel .shop-promo__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 70%;
	background: #fff;
}

.shop-promo--reel .shop-promo__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, #090909 100%);
	content: "";
	pointer-events: none;
}

.shop-promo--reel .shop-promo__image {
	padding: clamp(20px, 5vh, 52px);
}

.shop-promo--reel .shop-promo__discount {
	top: max(18px, env(safe-area-inset-top));
	right: 18px;
	min-height: 44px;
	padding: 9px 14px;
	font-size: 20px;
}

.shop-promo--reel .shop-promo__content {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	justify-content: flex-end;
	padding: 24px 24px calc(94px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, transparent, rgba(9, 9, 9, .98) 16%);
}

.shop-promo--reel .shop-promo__brand {
	top: calc(64px + env(safe-area-inset-top));
	bottom: auto;
	left: 18px;
	height: 30px;
	max-width: 112px;
	padding: 5px 10px;
	border-radius: 8px;
}

.shop-promo--reel .shop-promo__brand-logo {
	max-width: 92px;
	height: 17px;
}

.shop-promo--reel .shop-promo__hook {
	font-size: 13px;
}

.shop-promo--reel .shop-promo__title {
	max-width: 92%;
	font-size: clamp(22px, 5vw, 34px);
}

.shop-promo--reel .shop-promo__price {
	font-size: 36px;
}

.shop-promo--reel .shop-promo__before {
	font-size: 17px;
}

.shop-promo--reel .shop-promo__proof {
	font-size: 12px;
}

.shop-promo--reel .shop-promo__cta {
	min-height: 46px;
	padding: 12px 19px;
	font-size: 13px;
}

@media (max-width: 720px) {
	.shop-promo--under-player .shop-promo__link {
		min-height: 132px;
	}

	.shop-promo--under-player .shop-promo__media,
	.shop-promo--under-player .shop-promo__media--logo {
		width: 112px;
	}

	.shop-promo--under-player .shop-promo__media--logo {
		padding: 8px;
	}

	.shop-promo--under-player .shop-promo__content {
		padding: 12px;
	}

	.shop-promo--under-player .shop-promo__title {
		font-size: 14px;
	}

	.shop-promo--under-player .shop-promo__hook {
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__price,
	.shop-promo--under-player .shop-promo__poppers-price {
		font-size: 19px;
	}

	.shop-promo--under-player .shop-promo__saving,
	.shop-promo--under-player .shop-promo__discreet {
		display: none;
	}

	.shop-promo--under-player .shop-promo__proof {
		padding-right: 0;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__cta {
		position: static;
		min-height: 29px;
		margin-top: 7px;
		padding: 7px 10px;
		font-size: 10px;
	}

	.shop-promo-player-slide {
		right: 8px;
		bottom: 48px;
		width: calc(100% - 16px);
	}

	.shop-promo--player-slide .shop-promo__link {
		min-height: 92px;
	}

	.shop-promo--player-slide .shop-promo__media {
		width: 92px;
	}

	.shop-promo__close {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 430px) {
	.shop-promo--native.shop-promo--poppers .shop-promo__media--poppers {
		aspect-ratio: 100 / 66;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-content {
		min-height: 114px;
		padding: 9px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__title {
		font-size: 13px;
	}

	.shop-promo__poppers-europe {
		font-size: 10.5px;
	}

	.shop-promo__poppers-feature {
		font-size: 10px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
		font-size: 17px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__cta {
		padding-right: 8px;
		padding-left: 8px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__meta {
		gap: 4px;
	}

	.shop-promo--under-player .shop-promo__disclosure,
	.shop-promo--under-player .shop-promo__flash {
		min-height: 17px;
		padding: 3px 5px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__title {
		font-size: 12px;
	}

	.shop-promo--under-player .shop-promo__before {
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__proof {
		display: block;
	}

	.shop-promo--player-slide .shop-promo__media {
		width: 78px;
	}

	.shop-promo--player-slide .shop-promo__content {
		padding-left: 9px;
	}

	.shop-promo--player-slide .shop-promo__hook {
		display: none;
	}

	.shop-promo--player-slide .shop-promo__shipping {
		display: none;
	}

	.shop-promo--player-slide .shop-promo__title {
		padding-right: 12px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo__link,
	.shop-promo-player-slide {
		transition: none;
	}

	.shop-promo__link:hover,
	.shop-promo__link:focus-visible {
		transform: none;
	}
}

/* Variantes créatives : même composant, tonalités assez distinctes pour tester
   l'argument sans créer de rupture avec l'interface sombre du site. */
/* Les variantes par argument teintaient l'or, le turquoise et le violet sur les
   formats historiques (reels, slide player, sous-lecteur). Elles sont
   repointees sur les canaux discount : chaque argument garde son identite,
   mais dans la meme grammaire chromatique que le reste du module. */
.shop-promo--flash {
	--sp-accent: var(--dg-yellow);
	--sp-red: var(--dg-red);
}

.shop-promo--need {
	--sp-accent: var(--dg-cyan);
	--sp-red: var(--dg-red);
}

.shop-promo--pick {
	--sp-accent: var(--dg-green-text);
	--sp-red: var(--dg-red);
}

.shop-promo--trust {
	--sp-accent: var(--dg-cyan);
	--sp-red: var(--dg-red);
}

.shop-promo--code {
	--sp-accent: var(--dg-yellow);
	--sp-red: var(--dg-red);
}

.shop-promo--flash .shop-promo__link,
.shop-promo--flash .shop-promo__multi {
	background:
		radial-gradient(circle at 8% 0, rgba(216, 59, 59, .14), transparent 42%),
		linear-gradient(140deg, #191313, #0d0d0d);
}

.shop-promo--need .shop-promo__link,
.shop-promo--need .shop-promo__multi {
	background:
		radial-gradient(circle at 8% 0, rgba(127, 199, 186, .13), transparent 42%),
		linear-gradient(140deg, #121a19, #0d0d0d);
}

.shop-promo--pick .shop-promo__link,
.shop-promo--pick .shop-promo__multi {
	background:
		radial-gradient(circle at 8% 0, rgba(212, 168, 83, .14), transparent 42%),
		linear-gradient(140deg, #191711, #0d0d0d);
}

.shop-promo--trust .shop-promo__link,
.shop-promo--trust .shop-promo__multi {
	background:
		radial-gradient(circle at 8% 0, rgba(180, 155, 232, .14), transparent 42%),
		linear-gradient(140deg, #17141d, #0d0d0d);
}

.shop-promo--code .shop-promo__link,
.shop-promo--code .shop-promo__multi {
	background:
		radial-gradient(circle at 8% 0, rgba(244, 202, 114, .18), transparent 44%),
		linear-gradient(140deg, #1c1810, #0d0d0d);
}

.shop-promo--flash .shop-promo__multi-intro {
	box-shadow: inset 3px 0 0 rgba(216, 59, 59, .86);
}

.shop-promo--need .shop-promo__multi-intro {
	box-shadow: inset 3px 0 0 rgba(127, 199, 186, .82);
}

.shop-promo--pick .shop-promo__multi-intro {
	box-shadow: inset 3px 0 0 rgba(212, 168, 83, .84);
}

.shop-promo--trust .shop-promo__multi-intro {
	box-shadow: inset 3px 0 0 rgba(180, 155, 232, .82);
}

.shop-promo--code .shop-promo__multi-intro {
	box-shadow: inset 3px 0 0 rgba(244, 202, 114, .92);
}

.shop-promo--code .shop-promo__multi-intro .shop-promo__code {
	border-style: solid;
	color: #16110a;
	background: #f4ca72;
	font-weight: 900;
}

/* Le code reste lisible dans les cellules de grille, sans surcharger le CTA. */
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__code {
	min-height: 22px;
	margin-top: 6px;
	padding: 4px 6px;
	font-size: 10px;
	letter-spacing: 0;
}

/* Le bouton commander reste affiche sur toutes les surfaces, temoin compris. */

/* Bandeau multi-produits commun au player et à la pagination. */
.shop-promo__multi {
	position: relative;
	display: grid;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	grid-template-columns: minmax(210px, .88fr) minmax(0, 1.7fr);
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background:
		radial-gradient(circle at 12% 0, rgba(212, 168, 83, .14), transparent 44%),
		linear-gradient(135deg, #171717, #0d0d0d);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.shop-promo__multi-intro {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 11px 14px;
}

.shop-promo__multi-logo {
	display: block;
	width: auto;
	max-width: 112px;
	height: 25px;
	margin: 0 0 5px;
	padding: 4px 7px;
	border-radius: 6px;
	background: #fff;
	object-fit: contain;
	object-position: left center;
}

.shop-promo__multi-heading {
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 1.13;
	letter-spacing: -.015em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.shop-promo__multi-intro .shop-promo__code {
	min-height: 23px;
	margin-top: 6px;
	padding: 5px 7px;
	border-radius: 6px;
	font-size: 10px;
	letter-spacing: 0;
}

.shop-promo__multi-proof {
	display: flex;
	max-width: 100%;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 9px;
	margin-top: 6px;
	color: var(--sp-muted);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}

.shop-promo__products {
	display: grid;
	min-width: 0;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 1px;
	background: rgba(255, 255, 255, .1);
}

.shop-promo__product-card {
	position: relative;
	display: flex;
	min-width: 0;
	overflow: hidden;
	align-items: stretch;
	color: #fff;
	background: #121212;
	text-decoration: none;
	transition: background-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.shop-promo__product-card:hover,
.shop-promo__product-card:focus-visible {
	color: #fff;
	background: #1b1b1b;
	text-decoration: none;
}

.shop-promo__product-card:focus-visible {
	z-index: 2;
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.shop-promo__product-media {
	position: relative;
	display: flex;
	width: 94px;
	min-width: 94px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
}

.shop-promo__product-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-promo__product-discount {
	position: absolute;
	top: 5px;
	right: 5px;
	display: inline-flex;
	min-height: 21px;
	align-items: center;
	padding: 4px 6px;
	border-radius: 999px;
	color: #fff;
	background: var(--sp-red);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
}

.shop-promo__product-flash {
	position: absolute;
	bottom: 5px;
	left: 5px;
	display: block;
	max-width: calc(100% - 10px);
	overflow: hidden;
	padding: 3px 5px;
	border-radius: 999px;
	color: #fff;
	background: rgba(18, 18, 18, .88);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .03em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.shop-promo__product-detail {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	padding: 9px 10px;
}

.shop-promo__product-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--dg-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.shop-promo__product-prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px 6px;
	margin-top: 7px;
}

.shop-promo__product-price {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
}

.shop-promo__product-before {
	color: #8d8d8d;
	font-size: 10px;
	font-weight: 700;
	text-decoration-color: var(--sp-red);
	text-decoration-thickness: 2px;
}

/* Sous le player : 100–108 px au lieu de l'ancien bloc de 154 px. */
.shop-promo--under-player {
	margin: 8px 0 12px;
}

.shop-promo--under-player .shop-promo__multi {
	min-height: 104px;
	max-height: 108px;
}

.shop-promo--under-player .shop-promo__multi-intro {
	padding: 8px 12px;
}

.shop-promo--under-player .shop-promo__multi-logo {
	max-width: 96px;
	height: 21px;
	margin-bottom: 3px;
	padding: 3px 6px;
}

.shop-promo--under-player .shop-promo__multi-heading {
	font-size: 12px;
	-webkit-line-clamp: 1;
}

.shop-promo--under-player .shop-promo__multi-intro .shop-promo__code {
	min-height: 20px;
	margin-top: 4px;
	padding: 3px 6px;
	font-size: 10px;
}

.shop-promo--under-player .shop-promo__multi-proof {
	margin-top: 4px;
	font-size: 10px;
}

/* Fallback Poppers du format player, compact lui aussi. */
.shop-promo--under-player > .shop-promo__link {
	min-height: 104px;
	max-height: 108px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__media {
	width: 124px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__content {
	padding: 10px 12px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__title {
	font-size: 14px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__poppers-price {
	margin-top: 4px;
	font-size: 18px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__proof {
	margin-top: 4px;
	padding-right: 105px;
	font-size: 10px;
}

.shop-promo--under-player > .shop-promo__link .shop-promo__cta {
	right: 10px;
	bottom: 10px;
	min-height: 28px;
	padding: 6px 9px;
	font-size: 10px;
}

@keyframes shop-promo-discount-in {
	0% {
		opacity: 0;
		transform: scale(.72) rotate(-7deg);
	}
	72% {
		opacity: 1;
		transform: scale(1.1) rotate(3deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(2deg);
	}
}

/* Le code n'apparaît dans le petit slide player que sur sa création dédiée. */
.shop-promo--player-slide.shop-promo--code .shop-promo__code {
	display: inline-flex;
	min-height: 20px;
	margin-top: 4px;
	padding: 3px 5px;
	font-size: 10px;
	letter-spacing: 0;
}

.shop-promo--player-slide.shop-promo--code .shop-promo__proof,
.shop-promo--player-slide.shop-promo--code .shop-promo__cta {
	display: none;
}

@media (max-width: 767px) {
	.shop-promo--under-player {
		margin: 6px 0 10px;
	}

	.shop-promo--under-player .shop-promo__multi {
		min-height: 96px;
		max-height: 100px;
		grid-template-columns: minmax(145px, 44%) minmax(0, 1fr);
	}

	.shop-promo--under-player .shop-promo__multi-intro {
		padding: 8px 9px;
	}

	.shop-promo--under-player .shop-promo__multi-logo {
		max-width: 92px;
		height: 21px;
		margin-bottom: 3px;
		padding: 3px 6px;
	}

	.shop-promo--under-player .shop-promo__multi-heading {
		font-size: 11px;
		-webkit-line-clamp: 1;
	}

	.shop-promo--under-player .shop-promo__multi-intro .shop-promo__code {
		min-height: 20px;
		margin-top: 4px;
		padding: 4px 5px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__multi-proof {
		display: block;
		margin-top: 4px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__multi-proof .shop-promo__discreet {
		display: none;
	}

	.shop-promo--under-player .shop-promo__product-media {
		width: 72px;
		min-width: 72px;
	}

	.shop-promo--under-player .shop-promo__product-detail {
		padding: 7px;
	}

	.shop-promo--under-player .shop-promo__product-title {
		font-size: 10px;
		-webkit-line-clamp: 1;
	}

	.shop-promo--under-player .shop-promo__product-price {
		font-size: 14px;
	}

	/* Le prix barre est un element obligatoire : il retrecit, il ne tombe pas. */
	.shop-promo--under-player .shop-promo__product-before {
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__product-discount {
		top: 4px;
		right: 4px;
		min-height: 18px;
		padding: 3px 5px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__product-flash {
		bottom: 4px;
		left: 4px;
		max-width: calc(100% - 8px);
		padding: 3px 4px;
		font-size: 10px;
	}

	.shop-promo--under-player .shop-promo__product-card:nth-child(n + 2) {
		display: none;
	}

	.shop-promo--under-player > .shop-promo__link {
		min-height: 96px;
		max-height: 100px;
	}

	.shop-promo--under-player > .shop-promo__link .shop-promo__media {
		width: 96px;
	}

	.shop-promo--under-player > .shop-promo__link .shop-promo__proof {
		padding-right: 0;
	}

	/* Le bouton reste affiche : il se contente de retrecir. */
	.shop-promo--under-player > .shop-promo__link .shop-promo__cta {
		right: 6px;
		bottom: 6px;
		min-height: 24px;
		padding: 4px 7px;
		font-size: 10px;
	}
}

@media (max-width: 400px) {
	.shop-promo--under-player .shop-promo__multi {
		grid-template-columns: minmax(132px, 46%) minmax(0, 1fr);
	}

	.shop-promo__multi-proof {
		white-space: nowrap;
	}

	.shop-promo__product-media,
	.shop-promo--under-player .shop-promo__product-media {
		width: 64px;
		min-width: 64px;
	}
}

/* Verrou de cascade : les anciennes variantes restent disponibles pour les
   formats historiques, mais ne réintroduisent ni dégradé ni micro-CTA ici. */
.shop-promo.shop-promo--video-sidebar,
.shop-promo.shop-promo--video-mobile,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4.shop-promo--discount {
	--sp-accent: #ffd33d;
	--sp-red: #d92d20;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__code,
.shop-promo--native.shop-promo--poppers .shop-promo__code {
	min-height: 24px;
	padding: 5px 7px;
	font-size: 10.5px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__cta,
.shop-promo--native.shop-promo--poppers .shop-promo__cta {
	display: inline-flex;
	width: 100%;
	min-height: 36px;
	margin-top: auto;
	padding: 9px 11px;
	border-radius: 8px;
	background: var(--dg-brand);
	box-shadow: none;
	color: #15100a;
	font-size: 12px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row .shop-promo__cta {
	width: auto;
	min-width: 92px;
	flex: 1 1 auto;
}

/* ==========================================================================
   Carte boutique native v4 — même géométrie que les vidéos, thème du site.
   Une seule information marketing par ligne, aucun liseré ni dégradé.
   ========================================================================== */

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 {
	--sp-accent: #d4a853;
	--sp-red: #d4a853;
	color: var(--thumb-text-color, #fff);
	font-family: 'Quicksand', sans-serif;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-compact {
	display: none;
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link {
	height: auto;
	min-height: 0;
	flex-direction: column;
	border: 1px solid rgba(128, 128, 128, .22);
	border-radius: 6px;
	color: var(--thumb-text-color, #fff);
	background: var(--thumb-box-bg, #1a1a1a);
	box-shadow: none;
	transform: none;
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:hover,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:focus-visible {
	border-color: rgba(212, 168, 83, .5);
	color: var(--thumb-text-color, #fff);
	background: var(--thumb-box-bg, #1a1a1a);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	transform: translateY(-1px);
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__media,
.shop-promo.shop-promo--native.shop-promo--poppers .shop-promo__media--poppers {
	width: 100%;
	height: auto;
	min-height: 0;
	flex: 0 0 auto;
	padding: 0;
	aspect-ratio: 16 / 9;
	background: var(--thumb-placeholder-bg, #070707);
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__image,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-visual {
	transition: transform .2s ease;
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:hover .shop-promo__image,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:focus-visible .shop-promo__image,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:hover .shop-promo__poppers-visual,
.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__link:focus-visible .shop-promo__poppers-visual {
	transform: scale(1.02);
}

.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__content,
.shop-promo.shop-promo--native.shop-promo--poppers .shop-promo__poppers-content {
	height: 78px;
	min-height: 78px;
	max-height: 78px;
	overflow: hidden;
	justify-content: flex-start;
	padding: 4px 8px;
	color: var(--thumb-text-color, #fff);
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__native-context,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-kicker {
	display: flex;
	width: 100%;
	min-width: 0;
	height: 14px;
	min-height: 14px;
	align-items: center;
	overflow: hidden;
	margin: 0 0 1px;
	color: #d4a853;
	font-size: 12px;
	font-weight: 800;
	line-height: 14px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-context {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-kicker {
	overflow: visible;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-full,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-compact {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le bras temoin garde son inventaire d'origine a une exception pres : le
   bouton commander reste affiche, comme sur toutes les autres surfaces. */
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__meta,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__saving,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__proof,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__code,
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-feature,
.shop-promo--native.shop-promo--poppers .shop-promo__code {
	display: none !important;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__hook {
	display: block;
	width: 100%;
	height: 14px;
	margin: 0;
	overflow: hidden;
	color: var(--thumb-text-color, #fff);
	font-size: 12px;
	font-weight: 800;
	line-height: 14px;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__title,
.shop-promo--native.shop-promo--poppers .shop-promo__title {
	display: block;
	width: 100%;
	height: 16px;
	margin: 0;
	overflow: hidden;
	color: var(--thumb-info-color, #bcbcbc);
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices {
	display: flex;
	width: 100%;
	min-height: 20px;
	align-items: baseline;
	gap: 4px 6px;
	margin: 2px 0 0;
	overflow: hidden;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__price,
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-price,
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
	flex: 0 0 auto;
	margin: 0;
	color: var(--thumb-text-color, #fff);
	font-size: 20px;
	font-weight: 900;
	line-height: 20px;
	letter-spacing: -.02em;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__before {
	display: inline;
	flex: 0 1 auto;
	overflow: hidden;
	color: var(--thumb-info-color, #aaa);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices::after,
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row::after {
	flex: 0 0 auto;
	margin-left: auto;
	color: #d4a853;
	content: "↗";
	font-size: 17px;
	font-weight: 900;
	line-height: 18px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__discount {
	top: 7px;
	right: 7px;
	min-height: 28px;
	padding: 6px 8px;
	border: 0;
	border-radius: 6px;
	color: #111;
	background: #d4a853;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
	font-size: 13px;
	font-weight: 900;
	line-height: 16px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand {
	bottom: 7px;
	left: 7px;
	height: 22px;
	max-width: 96px;
	padding: 3px 7px;
	border-radius: 5px;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__brand-logo {
	max-width: 82px;
	height: 14px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-brand {
	top: 7px;
	left: 7px;
	height: 25px;
	max-width: calc(100% - 14px);
	padding: 4px 7px;
	border-radius: 5px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-brand-logo {
	max-width: 105px;
	height: 15px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-europe {
	right: 7px;
	bottom: 7px;
	left: 7px;
	display: flex;
	min-width: 0;
	min-height: 24px;
	align-items: center;
	padding: 5px 7px 5px 19px;
	border-radius: 5px;
	color: #fff;
	background: rgba(7, 7, 7, .88);
	font-size: 12px;
	font-weight: 800;
	line-height: 14px;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-europe::before {
	left: 7px;
	background: #d4a853;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row {
	display: flex;
	width: 100%;
	height: 20px;
	min-height: 20px;
	align-items: baseline;
	gap: 5px;
	margin: auto 0 0;
	padding: 0;
	overflow: hidden;
}

@keyframes shop-promo-native-badge-in {
	0% {
		opacity: 0;
		transform: scale(.78) rotate(-4deg);
	}
	70% {
		opacity: 1;
		transform: scale(1.08) rotate(1deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

.shop-promo--native.shop-promo--tpl-legacy-v4[data-shop-ready="1"] .shop-promo__discount {
	animation: shop-promo-native-badge-in .45s ease-out backwards;
}

@media (max-width: 600px) {
	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-full {
		display: none;
	}

	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-compact {
		display: inline;
	}
}

@media (max-width: 480px) {
	.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__content,
	.shop-promo.shop-promo--native.shop-promo--poppers .shop-promo__poppers-content {
		height: 66px;
		min-height: 66px;
		max-height: 66px;
		padding: 4px 7px;
	}

	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices {
		margin-top: 2px;
	}

	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__price,
	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-price,
	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
		font-size: 18px;
		line-height: 20px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__media--poppers {
		aspect-ratio: 16 / 9;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-brand {
		height: 23px;
		padding: 3px 6px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-brand-logo {
		max-width: 92px;
		height: 14px;
	}
}

html.light .shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__native-context,
html.light .shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-kicker,
html.light .shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices::after,
html.light .shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row::after {
	color: #74500e;
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__image,
	.shop-promo.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__poppers-visual,
	.shop-promo--native.shop-promo--tpl-legacy-v4[data-shop-ready="1"] .shop-promo__discount {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   COUCHE v5 — Discount.gay dans le langage visuel du site
   ==========================================================================

   Elle couvre quatre surfaces : la cellule de grille (native), la sidebar
   video, le bloc video mobile et la banniere sous pagination. Le bras temoin
   .shop-promo--tpl-legacy-v4 est explicitement exclu de la carte de grille.

   Principes :
   - la carte de grille emprunte la geometrie exacte d'une vignette video ;
   - les quatre elements obligatoires (nom, prix, prix barre, bouton) ne sont
     JAMAIS masques, a aucune largeur ;
   - la degradation en espace reduit retire d'abord la reassurance, jamais
     l'offre ;
   - un seul accent chromatique, l'or du site.
   ========================================================================== */

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4),
.shop-promo--video-sidebar,
.shop-promo--video-mobile,
.shop-promo--pagination-banner {
	color: var(--dg-ink);
	font-family: 'Quicksand', sans-serif;
}

/* responsiveCopyNode() produit systematiquement DEUX versions d'un meme texte :
   la longue et la compacte. Sans cette regle par defaut, les deux s'affichent
   l'une apres l'autre et on lit « des 39 € des 39 € ». La bascule se fait plus
   bas, dans la media query. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__copy-compact,
.shop-promo--video-sidebar .shop-promo__copy-compact,
.shop-promo--video-mobile .shop-promo__copy-compact,
.shop-promo--pagination-banner .shop-promo__copy-compact {
	display: none;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__copy-full,
.shop-promo--video-sidebar .shop-promo__copy-full,
.shop-promo--video-mobile .shop-promo__copy-full,
.shop-promo--pagination-banner .shop-promo__copy-full {
	display: inline;
}

/* Le bloc video mobile fait ~340 px quelle que soit la fenetre : il prend la
   version compacte en permanence, pas sur critere de viewport. */
.shop-promo--video-mobile .shop-promo__copy-full {
	display: none;
}

.shop-promo--video-mobile .shop-promo__copy-compact {
	display: inline;
}

/* --- Plaque produit partagee -------------------------------------------- */

/* Les packshots Shopify sont detoures sur blanc : sans plaque, object-fit
   contain peint une dalle blanche irreguliere sur le fond sombre du site. */
.shop-promo__plate {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
	background: var(--dg-plate);
	box-shadow: inset 0 0 0 1px var(--dg-plate-line);
	border-radius: inherit;
}

.shop-promo__plate .shop-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	padding: 2%;
	background: none;
	object-fit: contain;
}

/* --- A. Carte de grille -------------------------------------------------- */

/* Aucun chrome : une vignette video n'a ni fond, ni bordure, ni ombre. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__link {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--dg-ink);
	text-decoration: none;
	transform: none;
}

/* padding-bottom et non aspect-ratio : c'est la technique de .thumb
   .img-holder, et elle donne le meme arrondi meme au pixel pres. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__media {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56%;
	overflow: hidden;
	border-radius: 3px;
	background: var(--dg-media);
}

/* 8 + 36,4 + 8 + 16,8 = 69,2 px, la hauteur exacte du bloc texte d'une
   vignette video (gold.min.css : titre 13px/1.4 sur 2 lignes + methode). */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__content {
	display: grid;
	grid-template-rows: 36.4px 16.8px;
	row-gap: 8px;
	height: 69.2px;
	min-height: 69.2px;
	max-height: 69.2px;
	min-width: 0;
	padding: 8px 0 0;
	overflow: hidden;
	background: none;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__title {
	display: -webkit-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--dg-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__metaline {
	display: flex;
	min-width: 0;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	line-height: 1.4;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__prices {
	display: flex;
	min-width: 0;
	flex: 0 0 auto;
	align-items: baseline;
	gap: 5px;
	margin: 0;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__price {
	flex: 0 0 auto;
	color: var(--dg-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__before {
	display: inline;
	flex: 0 1 auto;
	overflow: hidden;
	color: var(--dg-ink-soft);
	font-size: 11px;
	font-weight: 500;
	text-decoration-line: line-through;
	text-decoration-color: var(--dg-accent);
	text-decoration-thickness: 1.5px;
	font-variant-numeric: tabular-nums;
}

/* Seul endroit du module ou nowrap est autorise : il est protege par un
   min-width:0 et une ellipse, donc il ne peut pas deborder. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__pitch {
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	color: var(--dg-accent-text, var(--dg-accent));
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Les quatre reperes commerciaux vivent dans la couche media, aux
   emplacements deja occupes par les badges du site : ils ne coutent pas un
   pixel de hauteur a la cellule. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__disclosure {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	display: inline-flex;
	min-height: 0;
	align-items: center;
	padding: 2px 6px;
	border: 0;
	border-radius: 4px;
	background: var(--dg-chip);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__discount {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-flex;
	height: 22px;
	min-height: 0;
	align-items: center;
	padding: 0 7px;
	border: 0;
	border-radius: 4px;
	background: var(--dg-accent);
	box-shadow: none;
	color: var(--dg-accent-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	animation: none;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__brand {
	position: absolute;
	right: auto;
	bottom: 5px;
	left: 5px;
	z-index: 4;
	display: inline-flex;
	height: 20px;
	max-width: 88px;
	align-items: center;
	padding: 0 6px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__brand-logo {
	display: block;
	width: auto;
	max-width: 76px;
	height: 12px;
	object-fit: contain;
}

/* Le bouton commander occupe l'emplacement du badge de duree d'une vignette. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__cta {
	position: absolute;
	right: 5px;
	bottom: 5px;
	left: auto;
	z-index: 4;
	display: inline-flex;
	width: auto;
	height: 26px;
	min-height: 0;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 11px;
	border: 0;
	border-radius: 999px;
	background: var(--dg-green-grad);
	box-shadow: var(--dg-cta-shadow);
	color: var(--dg-green-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: .04em;
	white-space: nowrap;
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__cta::after {
	content: none;
}

/* --- B/C/F. Encarts : sidebar, mobile, banniere pagination --------------- */

.shop-promo--video-sidebar .shop-promo__multi,
.shop-promo--video-mobile .shop-promo__multi,
.shop-promo--pagination-banner .shop-promo__multi {
	display: grid;
	width: 100%;
	height: auto;
	min-height: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: none;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	align-content: start;
}

/* En-tete de 34 px a la grammaire de .asside-link .title, au lieu du bandeau
   de 239 px qui plaçait un logo blanc en premier point de fixation. */
.shop-promo__head {
	display: flex;
	min-width: 0;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.shop-promo__header {
	min-width: 0;
	overflow: hidden;
	color: var(--dg-ink-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: .18em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.shop-promo__store-link {
	flex: 0 0 auto;
	color: var(--dg-accent-text, var(--dg-accent));
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: underline;
	white-space: nowrap;
}

.shop-promo__products {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.shop-promo__product-card {
	display: grid;
	min-width: 0;
	height: auto;
	align-content: start;
	gap: 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dg-ink);
	text-decoration: none;
}

.shop-promo__product-media {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	height: 0;
	padding: 0;
	padding-bottom: 75%;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dg-media);
}

.shop-promo__product-discount {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-flex;
	height: 22px;
	min-height: 0;
	align-items: center;
	padding: 0 7px;
	border: 0;
	border-radius: 4px;
	background: var(--dg-accent);
	color: var(--dg-accent-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
}

.shop-promo__product-detail {
	display: grid;
	min-width: 0;
	align-content: start;
	gap: 6px;
	padding: 0;
}

.shop-promo__product-title {
	display: -webkit-box;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--dg-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shop-promo__product-prices {
	display: flex;
	min-width: 0;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 7px;
	margin: 0;
}

.shop-promo__product-price {
	flex: 0 0 auto;
	color: var(--dg-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.shop-promo__instead {
	flex: 0 0 auto;
	color: var(--dg-ink-soft);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
}

.shop-promo__product-before {
	display: inline;
	flex: 0 0 auto;
	color: var(--dg-ink-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration-line: line-through;
	text-decoration-color: var(--dg-accent);
	text-decoration-thickness: 1.5px;
	font-variant-numeric: tabular-nums;
}

.shop-promo__product-saving {
	display: block;
	min-width: 0;
	overflow: hidden;
	color: var(--dg-accent-text, var(--dg-accent));
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-overflow: ellipsis;
}

.shop-promo__product-shipping,
.shop-promo__product-discreet {
	display: block;
	min-width: 0;
	padding-left: 11px;
	overflow: hidden;
	color: var(--dg-ink-soft);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-overflow: ellipsis;
	background-image: radial-gradient(circle, var(--dg-accent) 2.5px, transparent 2.5px);
	background-position: 0 .55em;
	background-repeat: no-repeat;
	background-size: 5px 5px;
}

.shop-promo--video-sidebar .shop-promo__product-cta,
.shop-promo--video-mobile .shop-promo__product-cta,
.shop-promo--pagination-banner .shop-promo__product-cta,
.shop-promo--video-sidebar .shop-promo__cta,
.shop-promo--video-mobile .shop-promo__cta,
.shop-promo--pagination-banner .shop-promo__cta {
	display: inline-flex;
	width: 100%;
	height: 40px;
	min-height: 0;
	align-items: center;
	justify-content: center;
	margin: 4px 0 0;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: var(--dg-green-grad);
	box-shadow: var(--dg-cta-shadow);
	color: var(--dg-green-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

.shop-promo__footer {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--dg-line);
}

.shop-promo__footer-label {
	color: var(--dg-ink-soft);
	font-size: 11px;
	font-weight: 500;
	line-height: 20px;
}

.shop-promo__footer .shop-promo__brand {
	position: static;
	display: inline-flex;
	height: 20px;
	max-width: 88px;
	align-items: center;
}

.shop-promo__footer .shop-promo__brand-logo {
	display: block;
	width: auto;
	max-width: 76px;
	height: 12px;
	object-fit: contain;
}

/* Bande « les deux » du template duo : le seuil de franco cesse d'etre une
   condition a remplir et devient un objectif atteint a l'ecran. */
.shop-promo__bundle {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 44px;
	margin-top: 14px;
	padding: 0 8px 0 14px;
	border-radius: 10px;
	background: var(--dg-accent-soft);
	box-shadow: inset 0 0 0 1px var(--dg-accent-line);
	color: var(--dg-ink);
	text-decoration: none;
}

.shop-promo__bundle-total {
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
}

.shop-promo--video-sidebar .shop-promo__bundle .shop-promo__cta,
.shop-promo--video-mobile .shop-promo__bundle .shop-promo__cta,
.shop-promo--pagination-banner .shop-promo__bundle .shop-promo__cta {
	width: auto;
	height: 32px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 12px;
	font-size: 11px;
}

/* --- B. Sidebar video ---------------------------------------------------- */

/* .asside-link porte deja son fond et son rayon : l'encart n'ajoute ni boite
   ni ombre, il se contente de filets de separation. */
.shop-promo--video-sidebar {
	height: auto;
}

.shop-promo--video-sidebar .shop-promo__products {
	gap: 0;
}

.shop-promo--video-sidebar[data-shop-product-count="2"] .shop-promo__product-card + .shop-promo__product-card,
.shop-promo--pagination-banner .shop-promo__product-card + .shop-promo__product-card {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--dg-line);
}

.shop-promo--video-sidebar[data-shop-product-count="2"] .shop-promo__product-media {
	padding-bottom: 56%;
}

/* --- C. Bloc video mobile ------------------------------------------------ */

/* Pile verticale : la colonne d'intro laterale ne laissait que 97,7 px
   utiles a 360 px de viewport, dans lesquels le logo et la puce du code
   debordaient avant d'etre repeints par la carte produit. */
.shop-promo--video-mobile .shop-promo__product-card {
	grid-template-columns: 116px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
}

.shop-promo--video-mobile .shop-promo__product-media {
	padding-bottom: 0;
	height: 116px;
	grid-row: span 2;
}

.shop-promo--video-mobile .shop-promo__product-detail {
	gap: 5px;
}

.shop-promo--video-mobile .shop-promo__product-price {
	font-size: 18px;
}

.shop-promo--video-mobile .shop-promo__product-cta {
	grid-column: 1 / -1;
	height: 36px;
	margin-top: 10px;
}

/* --- F. Banniere sous pagination ----------------------------------------- */

/* Une rangee de la grille du site, pas une banniere : plus de pave noir
   encadre et ombre de 250 px de haut. */
.shop-promo--pagination-banner .shop-promo__multi {
	width: min(950px, 100%);
	margin: 22px auto 18px;
	padding: 16px 0;
	border-top: 1px solid var(--dg-line);
	border-bottom: 1px solid var(--dg-line);
	background: none;
}

.shop-promo--pagination-banner .shop-promo__products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 16px;
}

.shop-promo--pagination-banner .shop-promo__product-card + .shop-promo__product-card {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.shop-promo--pagination-banner .shop-promo__product-media {
	padding-bottom: 56%;
}

/* --- Survol : uniquement au pointeur fin, sinon l'etat reste colle au tap - */

@media (min-width: 1024px) and (hover: hover) {
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__link:hover .shop-promo__title,
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__link:focus-visible .shop-promo__title,
	.shop-promo__product-card:hover .shop-promo__product-title,
	.shop-promo__product-card:focus-visible .shop-promo__product-title {
		color: var(--dg-accent-text, var(--dg-accent));
	}

	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__link:hover .shop-promo__cta,
	.shop-promo__product-card:hover .shop-promo__product-cta,
	.shop-promo__bundle:hover .shop-promo__cta {
		filter: brightness(1.06);
	}
}

/* --- Degradation en espace reduit ---------------------------------------

   Ordre de retrait : lien boutique, signature, reassurance, economie, puis
   micro-label. Le nom, le prix, le prix barre et le bouton ne tombent jamais.
   ------------------------------------------------------------------------ */

@media (max-width: 1019px) {
	.shop-promo--pagination-banner .shop-promo__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-promo--pagination-banner .shop-promo__product-card:nth-child(3) {
		display: none;
	}
}

@media (max-width: 759px) {
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__copy-full,
	.shop-promo--video-sidebar .shop-promo__copy-full,
	.shop-promo--pagination-banner .shop-promo__copy-full {
		display: none;
	}

	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__copy-compact,
	.shop-promo--video-sidebar .shop-promo__copy-compact,
	.shop-promo--pagination-banner .shop-promo__copy-compact {
		display: inline;
	}

	.shop-promo__store-link {
		display: none;
	}

	.shop-promo--video-sidebar .shop-promo__product-discreet,
	.shop-promo--video-mobile .shop-promo__product-discreet,
	.shop-promo--pagination-banner .shop-promo__product-discreet {
		display: none;
	}

	.shop-promo--pagination-banner .shop-promo__product-cta,
	.shop-promo--video-sidebar .shop-promo__product-cta {
		height: 36px;
	}

	.shop-promo__bundle {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px;
	}

	.shop-promo--video-sidebar .shop-promo__bundle .shop-promo__cta,
	.shop-promo--video-mobile .shop-promo__bundle .shop-promo__cta,
	.shop-promo--pagination-banner .shop-promo__bundle .shop-promo__cta {
		width: 100%;
		height: 36px;
	}
}

@media (max-width: 460px) {
	/* Les vignettes video passent elles-memes en 3:2 a cette largeur. */
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__media {
		padding-bottom: 66%;
	}

	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__brand {
		display: none;
	}

	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__cta {
		height: 24px;
		padding: 0 9px;
		font-size: 10px;
		line-height: 24px;
	}

	.shop-promo--pagination-banner .shop-promo__products {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop-promo--pagination-banner .shop-promo__product-card:nth-child(2) {
		display: none;
	}

	.shop-promo--pagination-banner .shop-promo__bundle {
		display: none;
	}

	.shop-promo--video-sidebar .shop-promo__product-shipping,
	.shop-promo--video-mobile .shop-promo__product-shipping,
	.shop-promo--pagination-banner .shop-promo__product-shipping {
		display: none;
	}

	.shop-promo--video-mobile .shop-promo__product-card {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.shop-promo--video-mobile .shop-promo__product-media {
		height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) *,
	.shop-promo--video-sidebar *,
	.shop-promo--video-mobile *,
	.shop-promo--pagination-banner * {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   COUCHE v6 — mises en page distinctes, energie discount
   ==========================================================================

   La MISE EN PAGE decide de la geometrie, l'ARGUMENT decide du texte, les deux
   sont tires independamment. Six geometries x quatre arguments.

   Couleurs : rouge = la remise · vert = l'achat · jaune = le flash.
   La reassurance et le survol utilisent l'or du site (--dg-brand), pas le vert :
   c'est la couleur primaire d'arabmales, elle fait le lien avec la page.

   Aucun bloc ne porte de mention « sponsorise » : la divulgation passe par
   rel="sponsored" sur les liens et par la pastille « Promotion » de la grille.
   ========================================================================== */

.shop-promo,
.catalog-card {
	--dg-brand: #d4a853;
}

html.light .shop-promo,
html.light .catalog-card {
	--dg-brand: #8a6400;
}

/* --- Canaux chromatiques -------------------------------------------------- */

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__discount,
.shop-promo__product-discount {
	background: var(--dg-red);
	color: var(--dg-red-ink);
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__before,
.shop-promo__product-before {
	text-decoration-color: var(--dg-red-text);
}

.shop-promo__product-saving {
	color: var(--dg-yellow-text);
}

/* Livraison offerte et colis discret : couleur primaire du site, pas de vert. */
.shop-promo__product-shipping,
.shop-promo__product-discreet,
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__pitch {
	color: var(--dg-brand);
	background-image: radial-gradient(circle, var(--dg-brand) 2.5px, transparent 2.5px);
}

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__pitch {
	background-image: none;
}

.shop-promo[data-shop-is-flash="1"] .shop-promo__disclosure {
	background: var(--dg-yellow);
	color: var(--dg-yellow-ink);
}

/* Survol : couleur primaire du site. */
@media (min-width: 1024px) and (hover: hover) {
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__link:hover .shop-promo__title,
	.shop-promo__product-card:hover .shop-promo__product-title,
	.shop-promo__store-link:hover,
	.shop-promo__more:hover,
	.shop-promo__cat:hover {
		color: var(--dg-brand);
	}
}

/* --- Plaque photo : quatre traitements ------------------------------------ */

/* Fond blanc franc : les packshots Shopify sont detoures sur blanc, tout
   degrade se voyait comme une salissure derriere le produit. */
.shop-promo__plate {
	background: #fff;
}

/* Packshot au bord a bord : la plaque est deja blanche, aucune marge utile. */
.shop-promo--tpl-etiquette .shop-promo__plate .shop-promo__image {
	padding: 0;
}

.shop-promo__product-card--mini .shop-promo__plate .shop-promo__image,
.shop-promo__product-card--row .shop-promo__plate .shop-promo__image {
	padding: 6%;
}

/* --- Tetes, pieds et liens communs ---------------------------------------- */

.shop-promo__head {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.shop-promo__header {
	min-width: 0;
	overflow: hidden;
	color: var(--dg-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.shop-promo__brand--lg {
	position: static;
	display: inline-flex;
	height: 30px;
	max-width: 150px;
	flex: 0 0 auto;
	align-items: center;
}

.shop-promo__brand--lg .shop-promo__brand-logo {
	width: auto;
	max-width: 134px;
	height: 19px;
}

.shop-promo__brand--sm {
	position: static;
	display: inline-flex;
	height: 22px;
	max-width: 104px;
	flex: 0 0 auto;
	align-items: center;
}

.shop-promo__brand--sm .shop-promo__brand-logo {
	width: auto;
	max-width: 92px;
	height: 13px;
}

.shop-promo__store-link,
.shop-promo__more,
.shop-promo__footer-link {
	color: var(--dg-ink-soft);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
	white-space: nowrap;
}

.shop-promo__more {
	display: block;
	margin-top: 12px;
	padding: 9px 12px;
	border: 1px solid var(--dg-rule);
	border-radius: 9px;
	color: var(--dg-ink);
	text-align: center;
	text-decoration: none;
}

.shop-promo__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.shop-promo__cat {
	flex: 1 1 auto;
	padding: 7px 8px;
	border-radius: 8px;
	background: var(--dg-paper-2);
	color: var(--dg-ink);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.shop-promo__footer {
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--dg-rule);
}

.shop-promo__footer .shop-promo__brand {
	position: static;
	display: inline-flex;
	height: 24px;
	max-width: 116px;
	align-items: center;
	padding: 0 7px;
	border-radius: 5px;
	background: #fff;
}

.shop-promo__footer .shop-promo__brand-logo {
	width: auto;
	max-width: 102px;
	height: 15px;
}

.shop-promo__footer-tagline {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	color: var(--dg-ink-soft);
	font-size: 12px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- A. Carte de grille ---------------------------------------------------
   La photo reste plus grande qu'en v5 mais la carte ne depasse plus la
   hauteur d'une vignette video : 58 a 76 % au lieu de 104 a 118 %.
   -------------------------------------------------------------------------- */

.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__media {
	padding-bottom: 62%;
	border-radius: 4px;
}

/* portrait : carte HORIZONTALE. La photo est debout — c'est sa signature —
   mais elle est posee en colonne de gauche, si bien que la carte reste plus
   courte qu'une vignette video au lieu de faire une fois et demie sa hauteur. */
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media {
	padding-bottom: 122%;
}

.shop-promo--native.shop-promo--tpl-affiche .shop-promo__media {
	padding-bottom: 68%;
}

/* etiquette : bloc noir sous la photo, SANS liseré lateral. La pastille de
   remise reste DANS la photo : elle etait coupee par le bloc inferieur. */
.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__media {
	padding-bottom: 42%;
	border-radius: 4px 4px 0 0;
}

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__content {
	height: auto;
	min-height: 0;
	max-height: none;
	grid-template-rows: auto auto auto;
	row-gap: 5px;
	padding: 9px 10px 10px;
	border-radius: 0 0 4px 4px;
	background: var(--dg-tag);
	box-shadow: none;
}

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__title,
.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__price {
	color: #fff;
}

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__price {
	font-size: 17px;
}

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__cta,
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__cta {
	position: static;
	display: flex;
	width: 100%;
	height: 29px;
	border-radius: 8px;
	font-size: 11px;
	line-height: 29px;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content,
.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__content {
	height: auto;
	min-height: 0;
	max-height: none;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content {
	grid-template-rows: auto auto auto;
	row-gap: 5px;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__price {
	font-size: 20px;
}

/* La pastille de remise ne sort JAMAIS de la boite media. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__discount {
	top: 7px;
	right: 7px;
	bottom: auto;
	z-index: 6;
}

/* --- B/C/F. Encarts : une geometrie par mise en page ---------------------- */

.shop-promo--video-sidebar .shop-promo__multi {
	max-height: 680px;
	overflow: hidden;
}

.shop-promo__products {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/* affiche : un seul produit, photo large, puis categories et bouton. */
.shop-promo__products--affiche .shop-promo__product-media {
	padding-bottom: 72%;
}

/* etiquette : un produit vedette puis deux miniatures en ligne. */
.shop-promo__products--etiquette {
	gap: 0;
}

.shop-promo__products--etiquette .shop-promo__product-card--hero .shop-promo__product-media {
	padding-bottom: 64%;
}

.shop-promo__products--etiquette .shop-promo__product-card--mini,
.shop-promo__products--pile .shop-promo__product-card--row,
.shop-promo__products--tarif .shop-promo__product-card--row {
	grid-template-columns: 66px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--dg-rule);
}

.shop-promo__products--etiquette .shop-promo__product-card--mini .shop-promo__product-media,
.shop-promo__products--pile .shop-promo__product-card--row .shop-promo__product-media,
.shop-promo__products--tarif .shop-promo__product-card--row .shop-promo__product-media {
	height: 66px;
	padding-bottom: 0;
	border-radius: 6px;
}

.shop-promo__products--pile .shop-promo__product-card--row:first-child,
.shop-promo__products--tarif .shop-promo__product-card--row:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.shop-promo__product-card--mini .shop-promo__product-title,
.shop-promo__product-card--row .shop-promo__product-title {
	font-size: 13px;
	-webkit-line-clamp: 2;
}

.shop-promo__product-card--mini .shop-promo__product-price,
.shop-promo__product-card--row .shop-promo__product-price {
	font-size: 16px;
}

.shop-promo__product-card--mini .shop-promo__product-detail,
.shop-promo__product-card--row .shop-promo__product-detail {
	gap: 2px;
}

/* Le bouton des lignes est une pastille : il tient sur la ligne. */
.shop-promo__product-card--row .shop-promo__cta,
.shop-promo__product-card--mini .shop-promo__cta {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	width: auto;
	height: 30px;
	margin: 0;
	padding: 0 13px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 30px;
	white-space: nowrap;
}

/* tarif : l'action passe en tete de ligne, colonne alignee a droite. */
.shop-promo__products--tarif .shop-promo__cta--lead {
	grid-row: 1 / span 3;
}

/* duo : quatre produits, deux colonnes, deux rangees, texte reduit. */
.shop-promo__products--duo {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
}

.shop-promo__products--duo .shop-promo__product-media {
	padding-bottom: 92%;
}

.shop-promo__products--duo .shop-promo__product-title {
	font-size: 12px;
	line-height: 1.3;
}

.shop-promo__products--duo .shop-promo__product-price {
	font-size: 16px;
}

.shop-promo__products--duo .shop-promo__product-before {
	font-size: 11px;
}

.shop-promo__products--duo .shop-promo__instead {
	display: none;
}

.shop-promo__products--duo .shop-promo__cta {
	height: 32px;
	font-size: 11px;
	letter-spacing: .03em;
}

/* portrait : rail defilant, une diapositive par produit. */
.shop-promo__products--portrait {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.shop-promo__products--portrait::-webkit-scrollbar {
	display: none;
}

.shop-promo__product-card--slide {
	flex: 0 0 auto;
	width: 148px;
	scroll-snap-align: start;
}

.shop-promo__product-card--slide .shop-promo__product-media {
	padding-bottom: 100%;
}

.shop-promo__product-card--slide .shop-promo__product-title {
	font-size: 12px;
	line-height: 1.3;
}

.shop-promo__product-card--slide .shop-promo__product-price {
	font-size: 16px;
}

.shop-promo__product-card--slide .shop-promo__instead {
	display: none;
}

.shop-promo__product-card--slide .shop-promo__cta {
	height: 30px;
	font-size: 11px;
}

/* --- C. Bloc video mobile : encart discret, plafonne a 150 px -------------- */

/* Plafond demande par le proprietaire. Les mises en page mobiles sont
   dimensionnees pour tenir DEDANS : le plafond est un garde-fou, il ne doit
   jamais servir a couper un bouton. */
.shop-promo--video-mobile .shop-promo__multi {
	max-height: 150px;
}

.shop-promo--video-mobile .shop-promo__head {
	margin-bottom: 8px;
}

.shop-promo--video-mobile .shop-promo__header {
	font-size: 12px;
}

.shop-promo--video-mobile .shop-promo__product-card--row {
	grid-template-columns: 84px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
	margin-top: 8px;
	padding-top: 8px;
}

.shop-promo--video-mobile .shop-promo__product-card--row .shop-promo__product-media {
	height: 84px;
	padding-bottom: 0;
}

/* Duo mobile : deux cartes HORIZONTALES cote a cote. Empilees, elles
   faisaient 159 px et le plafond de 150 px aurait coupe le bouton. */
.shop-promo--video-mobile .shop-promo__products--duo {
	gap: 8px;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__product-card {
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 8px;
	align-items: center;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__product-media {
	padding-bottom: 0;
	height: 46px;
	border-radius: 6px;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__product-title {
	font-size: 11px;
	-webkit-line-clamp: 1;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__product-price {
	font-size: 14px;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__product-before {
	font-size: 10px;
}

.shop-promo--video-mobile .shop-promo__products--duo .shop-promo__cta {
	grid-column: 1 / -1;
	height: 26px;
	margin-top: 6px;
	font-size: 10px;
}

/* Rail mobile : diapositives horizontales de largeur fixe. En vertical elles
   faisaient 207 px. */
.shop-promo--video-mobile .shop-promo__product-card--slide {
	width: 210px;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 9px;
	align-items: center;
}

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-media {
	padding-bottom: 0;
	height: 56px;
	border-radius: 6px;
}

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-title {
	font-size: 11px;
	-webkit-line-clamp: 1;
}

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-price {
	font-size: 14px;
}

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__cta {
	grid-column: 2;
	width: auto;
	height: 24px;
	margin-top: 4px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 24px;
}

.shop-promo--video-mobile .shop-promo__product-saving,
.shop-promo--video-mobile .shop-promo__product-shipping,
.shop-promo--video-mobile .shop-promo__product-discreet {
	display: none;
}

/* --- F. Banniere pagination : blocs courts, 250 a 300 px ------------------ */

.shop-promo--pagination-banner .shop-promo__products--affiche .shop-promo__product-media,
.shop-promo--pagination-banner .shop-promo__products--portrait .shop-promo__product-card--slide .shop-promo__product-media {
	padding-bottom: 58%;
}

.shop-promo--pagination-banner .shop-promo__products--affiche {
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	align-items: center;
	column-gap: 20px;
}

.shop-promo--pagination-banner .shop-promo__products--duo {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-promo--pagination-banner .shop-promo__products--tarif {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.shop-promo--pagination-banner .shop-promo__products--tarif .shop-promo__product-card--row:nth-child(2) {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.shop-promo--pagination-banner .shop-promo__product-card--slide {
	width: 196px;
}

/* --- Repli en espace reduit ----------------------------------------------- */

@media (max-width: 1019px) {
	.shop-promo--pagination-banner .shop-promo__products--duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 759px) {
	.shop-promo__products--tarif .shop-promo__product-card--row:nth-child(n + 4),
	.shop-promo__products--pile .shop-promo__product-card--row:nth-child(n + 5) {
		display: none;
	}

	.shop-promo--pagination-banner .shop-promo__products--affiche,
	.shop-promo--pagination-banner .shop-promo__products--tarif {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop-promo__products--etiquette .shop-promo__product-card--mini,
	.shop-promo__products--pile .shop-promo__product-card--row,
	.shop-promo__products--tarif .shop-promo__product-card--row {
		grid-template-columns: 58px minmax(0, 1fr) auto;
	}

	.shop-promo__products--etiquette .shop-promo__product-card--mini .shop-promo__product-media,
	.shop-promo__products--pile .shop-promo__product-card--row .shop-promo__product-media,
	.shop-promo__products--tarif .shop-promo__product-card--row .shop-promo__product-media {
		height: 58px;
	}
}

@media (max-width: 460px) {
	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__media {
		padding-bottom: 68%;
	}

	.shop-promo--native.shop-promo--tpl-affiche .shop-promo__media {
		padding-bottom: 76%;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
		grid-template-columns: 40% minmax(0, 1fr);
	}

	.shop-promo__products--duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-promo__cat {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   v6.1 — corrections de rendu demandees sur le spot A
   ========================================================================== */

/* --- affiche : la photo d'abord, le texte dessous ------------------------
   Le bouton et le titre etaient poses SUR la photo et la masquaient, surtout
   en colonne etroite. Tout le texte passe dessous. Il reste de la place : une
   vignette video occupe deja deux lignes de titre plus une ligne d'infos, on
   utilise ce budget pour aerer au lieu de recouvrir l'image.
   ------------------------------------------------------------------------ */

/* Remise nettement plus lisible sur toutes les creations de la grille. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__discount {
	height: 30px;
	padding: 0 11px;
	border-radius: 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: -.01em;
}

/* --- portrait : le bouton occupe la place laissee sous la photo ----------
   La carte ne faisait que la hauteur de la vignette et laissait un vide.
   ------------------------------------------------------------------------ */

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
	grid-template-columns: 44% minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: start;
	row-gap: 9px;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media {
	grid-row: 1;
	grid-column: 1;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content {
	grid-row: 1;
	grid-column: 2;
	align-content: start;
	row-gap: 6px;
	padding-top: 2px;
}

/* Le bouton traverse les deux colonnes, sous la photo et sous le texte. */
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__cta {
	position: static;
	display: flex;
	grid-row: 2;
	grid-column: 1 / -1;
	width: 100%;
	height: 34px;
	margin: 0;
	border-radius: 9px;
	font-size: 12px;
	line-height: 34px;
}

/* L'argument passe sur sa propre ligne et peut se replier : en colonne
   etroite il etait coupe par l'ellipse avant d'etre lisible. */
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__metaline {
	flex-wrap: wrap;
	row-gap: 3px;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__pitch {
	flex: 1 1 100%;
	margin-left: 0;
	overflow: visible;
	text-align: left;
	white-space: normal;
}

/* --- Grille etroite : deux colonnes ou moins ----------------------------- */

@media (max-width: 759px) {
	/* portrait repasse en vertical : en carte horizontale sur une colonne de
	   165 px, la photo tombait a 73 px et devenait illisible. */
	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		row-gap: 8px;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media {
		grid-row: 1;
		grid-column: 1;
		padding-bottom: 96%;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content {
		grid-row: 2;
		grid-column: 1;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__cta {
		grid-row: 3;
		grid-column: 1;
	}

	/* etiquette en colonne etroite : le titre tombe, le bloc noir garde le
	   prix, le prix barre et l'action — la photo respire. */
	.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__title {
		display: none;
	}

	.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__media {
		padding-bottom: 72%;
	}

	.shop-promo--native.shop-promo--tpl-affiche .shop-promo__media {
		padding-bottom: 62%;
	}

	.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__discount {
		height: 26px;
		padding: 0 9px;
		font-size: 15px;
		line-height: 26px;
	}

	/* Temoin : resserre l'ecart entre la signature et le lien. */
	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__content {
		row-gap: 2px;
	}

	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__cta {
		margin-top: 6px;
	}
}

/* ==========================================================================
   v6.2 — la carte de grille tient dans les dimensions d'une vignette video
   ==========================================================================

   Contrainte qui prime sur tout le reste : la promo doit occuper la MEME
   hauteur qu'une carte video, sinon elle casse l'alignement de la rangee.
   Reference : image 56 % + bloc texte 69,2 px (66 % sous 460 px).
   ========================================================================== */

/* --- affiche : titre SUR la photo, prix et bouton dessous ---------------- */

/* 57 % + bloc texte de 66 px (9 + prix 17 + gap 6 + bouton 34) = la hauteur
   exacte d'une vignette video. Le titre ne coute rien puisqu'il est pose sur
   l'image. */
.shop-promo--native.shop-promo--tpl-affiche .shop-promo__media {
	padding-bottom: 57%;
}

.shop-promo--native.shop-promo--tpl-affiche .shop-promo__content {
	height: auto;
	min-height: 0;
	max-height: none;
	grid-template-rows: auto auto;
	row-gap: 6px;
	padding: 9px 0 0;
}

.shop-promo--native .shop-promo__title--over {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: -webkit-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 26px 9px 8px;
	overflow: hidden;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.32;
	text-overflow: ellipsis;
	background: linear-gradient(180deg,
		rgba(var(--dg-scrim), 0) 0%,
		rgba(var(--dg-scrim), .86) 52%,
		rgba(var(--dg-scrim), .96) 100%);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shop-promo--native.shop-promo--tpl-affiche .shop-promo__price {
	font-size: 19px;
}

.shop-promo--native.shop-promo--tpl-affiche .shop-promo__cta {
	position: static;
	display: flex;
	width: 100%;
	height: 34px;
	margin: 0;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	line-height: 34px;
	letter-spacing: .04em;
}

/* --- etiquette : 56 % + bloc noir de 70 px ------------------------------- */

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__media {
	padding-bottom: 44%;
}

.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__content {
	row-gap: 4px;
	padding: 8px 10px 9px;
}

/* --- portrait : deux colonnes, rien ne deborde --------------------------- */

/* Le debordement lateral venait des enfants de grille sans min-width:0 : un
   titre long ou un bouton large repoussait sa colonne au-dela du conteneur. */
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	column-gap: 10px;
	overflow: hidden;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media,
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content,
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__metaline,
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__prices {
	min-width: 0;
	max-width: 100%;
}

/* 153 % d'une colonne de 42 % : la photo debout monte a 201 px, ce qui amene
   la carte a la hauteur exacte d'une vignette video une fois le bouton pose
   dessous. A 128 % elle ne faisait que 0,86x et laissait un trou dans la rangee. */
.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media {
	padding-bottom: 153%;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__title {
	min-width: 0;
	overflow: hidden;
	word-break: break-word;
}

.shop-promo--native.shop-promo--tpl-portrait .shop-promo__cta {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- legacy : plus de fleche parasite, et le bouton respire -------------- */

/* La fleche ↗ venait de la v4, quand la carte n'avait pas de bouton : elle
   servait d'unique repere d'action. Le bouton est revenu, elle fait doublon. */
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__prices::after {
	content: none;
}

.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__cta {
	margin-top: 10px;
}

/* --- Colonne etroite : deux colonnes de grille --------------------------- */

@media (max-width: 759px) {
	/* affiche : le titre tombe, la photo prend toute la place disponible. */
	.shop-promo--native.shop-promo--tpl-affiche .shop-promo__title--over {
		display: none;
	}

	.shop-promo--native.shop-promo--tpl-affiche .shop-promo__media {
		padding-bottom: 68%;
	}

	/* etiquette reprend exactement le traitement d'affiche. */
	.shop-promo--native.shop-promo--tpl-etiquette .shop-promo__media {
		padding-bottom: 66%;
	}

	/*
	 * portrait : la carte se reduit a la PHOTO, avec le prix pose dessus.
	 * En deux colonnes elle occupait la hauteur de deux cartes video.
	 */
	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__link {
		display: block;
		overflow: visible;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__media {
		padding-bottom: 108%;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__content {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 4;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 24px 8px 8px;
		background: linear-gradient(180deg,
			rgba(var(--dg-scrim), 0) 0%,
			rgba(var(--dg-scrim), .86) 52%,
			rgba(var(--dg-scrim), .96) 100%);
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__title,
	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__pitch,
	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__cta {
		display: none;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__price {
		color: #fff;
		font-size: 20px;
	}

	.shop-promo--native.shop-promo--tpl-portrait .shop-promo__before {
		color: rgba(255, 255, 255, .78);
	}
}