/* 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 reprennent la charte Twinks : bleu #3cbff0 en sombre, bleu
 * profond #168dbb en clair, fonds --thumb-* et police Quicksand. Le rouge
 * reste réservé aux remises ; les actions et la réassurance restent bleues.
 */
.shop-promo,
.shop-promo * {
	box-sizing: border-box;
}

/* Palette boutique Twinks : bleu pour les actions, rouge uniquement pour
 * les remises et surfaces bleu nuit raccordées au site. */
.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: #3cbff0;
	--dg-green-ink: #07141a;
	--dg-green-hover: #68d5fa;
	--dg-green-text: #1596c6;
	--dg-green-grad: linear-gradient(135deg, #50cdf7, #168dbb);
	--dg-yellow: #8edfff;
	--dg-yellow-ink: #0e1720;
	--dg-yellow-text: #8edfff;
	--dg-cyan: #56d4ff;
	--dg-cyan-soft: rgba(86, 212, 255, .13);
	--dg-paper: #101820;
	--dg-paper-2: #17222d;
	--dg-tag: #0e1720;
	--dg-rule: #263949;
	--dg-ink: var(--thumb-text-color, #fff);
	--dg-ink-soft: var(--thumb-info-color, #b8b8b8);
	--dg-surface: #101820;
	--dg-surface-2: #17222d;
	--dg-media: var(--thumb-placeholder-bg, #070707);
	--dg-line: #263949;
	--dg-plate: #eef7fb;
	--dg-plate-2: #fff;
	--dg-plate-line: rgba(0, 0, 0, .10);
	--dg-chip: rgba(6, 18, 26, .74);
	--dg-scrim: 6, 18, 26;
	--dg-shadow: 0 10px 30px rgba(0, 0, 0, .42);
	--dg-cta-shadow: 0 6px 16px rgba(60, 191, 240, .22);

	/* Alias : les regles v5 non reecrites atterrissent sur le bon canal. */
	--dg-accent: #3cbff0;
	--dg-accent-ink: #07141a;
	--dg-accent-text: var(--dg-cyan);
	--dg-accent-grad: var(--dg-green-grad);
	--dg-accent-soft: rgba(60, 191, 240, .14);
	--dg-accent-line: rgba(60, 191, 240, .40);
	--dg-accent-line-hover: #68d5fa;
}

/* 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: #14799e;
	--dg-yellow-text: #116b8d;
	--dg-cyan: #14799e;
	--dg-cyan-soft: rgba(20, 121, 158, .10);
	--dg-paper: #fff;
	--dg-paper-2: #eef7fb;
	--dg-tag: #0e1720;
	--dg-rule: #d6e8f0;
	--dg-ink-soft: var(--thumb-info-color, #6b6b6b);
	--dg-surface: #fff;
	--dg-surface-2: #f4f9fc;
	--dg-line: #dcebf2;
	--dg-plate: #fff;
	--dg-plate-line: rgba(0, 0, 0, .12);
	--dg-scrim: 13, 34, 48;
	--dg-shadow: 0 8px 22px rgba(20, 64, 82, .12);
	--dg-cta-shadow: 0 4px 12px rgba(22, 141, 187, .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(60, 191, 240, .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(60, 191, 240, .7);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .33), 0 0 0 1px rgba(60, 191, 240, .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(60, 191, 240, .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: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.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), #168dbb);
	box-shadow: 0 7px 18px rgba(60, 191, 240, .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(60, 191, 240, .7);
	border-radius: 7px;
	color: #9ce7ff;
	background: rgba(60, 191, 240, .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 #14799e, 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 #8edfff, 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: #07141a;
	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 le bleu, 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, #121b24, #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(60, 191, 240, .14), transparent 42%),
		linear-gradient(140deg, #121d26, #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(121, 220, 255, .18), transparent 44%),
		linear-gradient(140deg, #111d27, #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(60, 191, 240, .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(121, 220, 255, .92);
}

.shop-promo--code .shop-promo__multi-intro .shop-promo__code {
	border-style: solid;
	color: #0f1a23;
	background: #79dcff;
	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(60, 191, 240, .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: #8edfff;
	--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: #07141a;
	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: #3cbff0;
	--sp-red: #3cbff0;
	color: var(--thumb-text-color, #fff);
	font-family: 'Quicksand', sans-serif;
}

/* Poppers n'a pas de classe de mise en page : prepareRoot() l'appelle sans
   template. Il ne portait donc ni « tpl-legacy-v4 » ni « discount », et
   tombait entre les deux groupes depuis le decoupage v6 — les deux versions
   du texte s'affichaient a la suite. */
.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-compact,
.shop-promo--native.shop-promo--poppers .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(60, 191, 240, .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: #3cbff0;
	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;
}

/* La troncature sur une ligne appartient au bras temoin, qui contraint la
   largeur de son porte-texte. Poppers ne la contraint pas : « nowrap » y
   faisait deborder l'accroche hors de la carte au lieu de la replier. */
.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. */
/* La ligne de benefice de Poppers etait masquee ici, faute de place : l'accroche
   de marque occupait alors l'une des deux lignes du bandeau. Elle ne l'occupe
   plus (couche v9.1), la place existe, et c'est la seule ligne de la carte qui
   argumente — elle sort donc de cette liste. */
.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__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: #3cbff0;
	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: #3cbff0;
	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: #3cbff0;
}

.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,
	.shop-promo--native.shop-promo--poppers .shop-promo__copy-full {
		display: none;
	}

	.shop-promo--native.shop-promo--tpl-legacy-v4 .shop-promo__copy-compact,
	.shop-promo--native.shop-promo--poppers .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: #0e6889;
}

@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, le bleu 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 (black_orange.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-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;
}

/* grid-auto-flow DOIT etre remis a row : la regle de base heritee de la v5
   (l.1450) impose « column », ce qui fait ignorer grid-template-columns et
   range tous les produits en colonnes implicites d'egale largeur. C'est ce qui
   cassait etiquette, duo, pile et tarif en meme temps. */
.shop-promo__products {
	display: grid;
	min-width: 0;
	grid-auto-flow: row;
	grid-auto-columns: auto;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	background: none;
}

.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);
}

/* La remise est l'argument le plus vendeur : elle doit se lire de loin. */
.shop-promo__product-discount {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-flex;
	height: 30px;
	min-height: 0;
	align-items: center;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: var(--dg-red);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: -.01em;
}

/* Sur les vignettes de liste, la place manque : on retrecit sans disparaitre. */
.shop-promo__product-card--row .shop-promo__product-discount,
.shop-promo__product-card--mini .shop-promo__product-discount {
	top: 4px;
	right: 4px;
	height: 20px;
	padding: 0 6px;
	font-size: 12px;
	line-height: 20px;
}

.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;
}

/* min-width:0 + ellipse : sans cela la largeur minimale automatique d'un item
   de grille vaut la largeur du texte en nowrap, et un libelle long comme
   « COMMANDER SUR DISCOUNT.GAY » impose 207 px dans une carte de 160 px. */
.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 {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	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;
}

/* Ne s'applique plus qu'aux mises en page en tuiles : les autres portent
   leur propre grille (lignes pour pile, empilement pour etiquette et
   portrait) et etaient ecrasees par cette regle generique. */
.shop-promo--pagination-banner .shop-promo__products--affiche {
	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--affiche {
		grid-template-columns: 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__cta {
		height: 24px;
		padding: 0 9px;
		font-size: 10px;
		line-height: 24px;
	}

	.shop-promo--pagination-banner .shop-promo__products--affiche {
		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 le bleu du site (--dg-brand), pas le vert :
   c'est la couleur primaire de Twinks.tube, 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: #3cbff0;
}

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

/* --- 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: 8px 8px;
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/* Une teinte par rayon : le visiteur repere sa categorie avant de lire. */
.shop-promo__cat--dildo { background: #7b2ff7; }
.shop-promo__cat--masturbator { background: #c2185b; }
.shop-promo__cat--lube { background: #0277bd; }
.shop-promo__cat--toy { background: #ef6c00; }

.shop-promo__more {
	background: var(--dg-red);
	border-color: transparent;
	color: #fff;
}

.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;
}

.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--discount.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--discount.shop-promo--tpl-portrait .shop-promo__media {
	padding-bottom: 122%;
}

.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-etiquette .shop-promo__media {
	padding-bottom: 42%;
	border-radius: 4px 4px 0 0;
}

.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-etiquette .shop-promo__title,
.shop-promo--native.shop-promo--discount.shop-promo--tpl-etiquette .shop-promo__price {
	color: #fff;
}

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

.shop-promo--native.shop-promo--discount.shop-promo--tpl-etiquette .shop-promo__cta,
.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-portrait .shop-promo__content,
.shop-promo--native.shop-promo--discount.shop-promo--tpl-etiquette .shop-promo__content {
	height: auto;
	min-height: 0;
	max-height: none;
}

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

.shop-promo--native.shop-promo--discount.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__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;
}

/* 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;
}

/* 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__product-card--slide {
	width: 196px;
}

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

@media (max-width: 1019px) {
}

@media (max-width: 759px) {}

@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--discount.shop-promo--tpl-affiche .shop-promo__media {
		padding-bottom: 76%;
	}

	.shop-promo--native.shop-promo--discount.shop-promo--tpl-portrait .shop-promo__link {
		grid-template-columns: 40% 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--discount.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--discount.shop-promo--tpl-portrait .shop-promo__media {
	grid-row: 1;
	grid-column: 1;
}

.shop-promo--native.shop-promo--discount.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--discount.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--discount.shop-promo--tpl-portrait .shop-promo__metaline {
	flex-wrap: wrap;
	row-gap: 3px;
}

.shop-promo--native.shop-promo--discount.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--discount.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--discount.shop-promo--tpl-portrait .shop-promo__media {
		grid-row: 1;
		grid-column: 1;
		padding-bottom: 96%;
	}

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

	.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-etiquette .shop-promo__title {
		display: none;
	}

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

	.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-affiche .shop-promo__media {
	padding-bottom: 57%;
}

.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-affiche .shop-promo__price {
	font-size: 19px;
}

.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-etiquette .shop-promo__media {
	padding-bottom: 44%;
}

.shop-promo--native.shop-promo--discount.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--discount.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--discount.shop-promo--tpl-portrait .shop-promo__media,
.shop-promo--native.shop-promo--discount.shop-promo--tpl-portrait .shop-promo__content,
.shop-promo--native.shop-promo--discount.shop-promo--tpl-portrait .shop-promo__metaline,
.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-portrait .shop-promo__media {
	padding-bottom: 153%;
}

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

.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-affiche .shop-promo__title--over {
		display: none;
	}

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

	/* etiquette reprend exactement le traitement d'affiche. */
	.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-portrait .shop-promo__link {
		display: block;
		overflow: visible;
	}

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

	.shop-promo--native.shop-promo--discount.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--discount.shop-promo--tpl-portrait .shop-promo__title,
	.shop-promo--native.shop-promo--discount.shop-promo--tpl-portrait .shop-promo__pitch,
	.shop-promo--native.shop-promo--discount.shop-promo--tpl-portrait .shop-promo__cta {
		display: none;
	}

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

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

/* --- v6.3 : classement « pile » et rail defilant ------------------------- */

.shop-promo__products--pile .shop-promo__product-card {
	position: relative;
}

.shop-promo__products--pile .shop-promo__product-card--row {
	padding-left: 14px;
}

/* Le rail avance seul : la barre de defilement n'a plus a etre visible. */
.shop-promo__products--portrait[data-shop-rail="1"] {
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo__products--portrait {
		scroll-snap-type: none;
	}
}

/* Le bloc texte de la carte de grille est une grille : sans colonne explicite
   et avec le justify-content:center herite de la v5 (ou le bloc etait un
   flex), la piste unique se dimensionne sur son contenu et le bouton ne fait
   plus la largeur de la carte. */
.shop-promo--native.shop-promo--discount:not(.shop-promo--tpl-legacy-v4) .shop-promo__content {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	justify-items: stretch;
	align-items: start;
}

/* --- v6.4 : alignement des cartes de « duo » ------------------------------
   Les lignes d'economie et de livraison sont conditionnelles : sans cela, deux
   cartes voisines de meme hauteur ont leur bouton a des hauteurs differentes.
   Le bouton est pousse en bas de sa carte.
   ------------------------------------------------------------------------ */
.shop-promo__products--affiche .shop-promo__product-card {
	align-content: start;
}

/* Le rail signale qu'il continue : un degrade en bord droit vaut mieux qu'une
   carte tranchee net. */
.shop-promo__products--portrait {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

/* ==========================================================================
   v6.5 — retours de rendu sur la sidebar
   ========================================================================== */

/* --- affiche : raccourcis de rayon en blanc, bloc texte resserre ---------- */

.shop-promo__cat {
	background: #fff;
	color: #101820;
}

.shop-promo__cat--dildo,
.shop-promo__cat--masturbator,
.shop-promo__cat--lube,
.shop-promo__cat--toy {
	background: #fff;
	color: #101820;
}

.shop-promo__products--affiche .shop-promo__product-detail {
	gap: 4px;
}

.shop-promo__products--affiche .shop-promo__product-title {
	line-height: 1.28;
}

.shop-promo__products--affiche .shop-promo__cta {
	margin-top: 6px;
}

/* --- Bouton icone : il rend au titre la largeur que prenait le mot -------- */

.shop-promo__cta--icon {
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 999px;
	background: var(--dg-brand);
	color: #101820;
}

.shop-promo__cart {
	width: 19px;
	height: 19px;
	display: block;
}

/* --- Les boutons pleins passent en couleur primaire du site -------------- */

.shop-promo--video-sidebar .shop-promo__cta,
.shop-promo--video-mobile .shop-promo__cta,
.shop-promo--pagination-banner .shop-promo__cta {
	background: var(--dg-brand);
	color: #101820;
	box-shadow: none;
}

/* --- etiquette : le titre respire, la remise ne mange plus la photo ------- */

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

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

/* Sur une vignette de 58 px, un badge de 30 px couvrait la moitie du produit. */
.shop-promo__product-card--mini .shop-promo__product-discount,
.shop-promo__product-card--row .shop-promo__product-discount {
	top: 3px;
	left: 3px;
	right: auto;
	height: 16px;
	padding: 0 4px;
	border-radius: 4px;
	font-size: 10px;
	line-height: 16px;
}

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

/* --- pile : titres lisibles, logo en tete --------------------------------- */

.shop-promo__products--pile .shop-promo__product-card--row {
	grid-template-columns: 54px minmax(0, 1fr) auto;
	column-gap: 12px;
	padding-left: 16px;
}

.shop-promo__products--pile .shop-promo__product-card--row .shop-promo__product-media {
	height: 54px;
}

.shop-promo__products--pile .shop-promo__product-detail {
	gap: 3px;
}

.shop-promo__products--pile .shop-promo__product-prices {
	gap: 0 6px;
}

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

/* --- portrait : rotation, une creation a la fois -------------------------- */

.shop-promo__products--portrait {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: visible;
	scroll-snap-type: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.shop-promo__product-card--slide {
	grid-area: 1 / 1;
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
}

.shop-promo__product-card--slide[data-shop-slide="on"] {
	opacity: 1;
	pointer-events: auto;
}

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

.shop-promo__product-card--slide .shop-promo__product-title {
	font-size: 14px;
	-webkit-line-clamp: 2;
}

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

.shop-promo__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.shop-promo__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--dg-rule);
	transition: background-color .3s ease;
}

.shop-promo__dot.is-on {
	background: var(--dg-brand);
}

@media (prefers-reduced-motion: reduce) {
	.shop-promo__product-card--slide {
		transition: none;
	}
}

/* ==========================================================================
   v6.6 — retours de rendu : tetes, espacements, rang
   ========================================================================== */

/* Le logo occupe sa propre ligne, au-dessus de l'accroche : il annonce la
   source avant que l'accroche annonce l'offre. */
.shop-promo__head {
	flex-wrap: wrap;
	row-gap: 10px;
}

.shop-promo__head .shop-promo__brand--lg {
	flex: 0 0 100%;
	justify-content: flex-start;
}

/* --- etiquette : chaque produit respire ---------------------------------- */

.shop-promo__products--etiquette .shop-promo__product-card {
	margin-bottom: 14px;
}

.shop-promo__products--etiquette .shop-promo__product-card:last-child {
	margin-bottom: 0;
}

.shop-promo__products--etiquette .shop-promo__product-card--mini {
	margin-top: 14px;
	padding-top: 14px;
}

/* --- pile : la pastille de rang ne doit plus etre rognee ------------------ */

.shop-promo__products--pile .shop-promo__product-card--row {
	padding-left: 0;
}

/* --- Le lien de bas de bloc ---------------------------------------------- */

/* Meme objet sur les cinq creations : un pave rouge, qui est le canal de la
   remise. Il ferme le bloc en donnant une sortie vers le reste du catalogue. */
.shop-promo__more {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 10px 12px;
	border: 0;
	border-radius: 9px;
	background: var(--dg-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

/* ==========================================================================
   v6.7 — lisibilite des vignettes et espacements
   ========================================================================== */

/* --- La remise quitte la photo sur les lignes ----------------------------- */

/* Posee dans la ligne de prix, elle reste lisible sans rogner le produit. */
.shop-promo__product-discount--inline {
	position: static;
	display: inline-flex;
	height: 18px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--dg-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0;
}

/* --- Vignettes de ligne nettement plus grandes ---------------------------- */

/* 54 a 58 px etaient trop petits pour reconnaitre un produit, surtout avec un
   badge pose dessus. La photo est desormais libre et gagne 26 %. */
.shop-promo__products--etiquette .shop-promo__product-card--mini,
.shop-promo__products--pile .shop-promo__product-card--row {
	grid-template-columns: 72px minmax(0, 1fr) auto;
	column-gap: 12px;
}

.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 {
	height: 72px;
}

/* Le packshot occupe toute la plaque : plus de marge perdue sur une vignette
   de cette taille. */
.shop-promo__product-card--mini .shop-promo__plate .shop-promo__image,
.shop-promo__product-card--row .shop-promo__plate .shop-promo__image {
	padding: 2%;
}

/* --- etiquette : moins d'air vertical entre les blocs --------------------- */

.shop-promo__products--etiquette .shop-promo__product-card {
	margin-bottom: 8px;
}

.shop-promo__products--etiquette .shop-promo__product-card--mini {
	margin-top: 8px;
	padding-top: 8px;
}

/* --- pile : plus d'air entre les lignes ----------------------------------- */

.shop-promo__products--pile .shop-promo__product-card--row {
	margin-top: 16px;
	padding-top: 16px;
	padding-left: 0;
}

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

/* En rotation, la creation change toutes les cinq secondes : un pave rouge en
   pied entrerait en concurrence avec le bouton d'achat de la diapositive
   courante. La sortie vers le catalogue redevient un lien discret. */
.shop-promo--tpl-portrait .shop-promo__more {
	width: auto;
	margin-top: 12px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--dg-brand);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: underline;
}

/* ==========================================================================
   v6.8 — bloc video mobile : lisibilite dans 150 px
   ========================================================================== */

/* --- portrait mobile : la photo et le titre gagnent de la place ----------- */

/* 210 px de diapositive avec 56 px de photo laissaient 130 px au titre, qui
   se coupait au deuxieme mot. La photo passe a 76 px et la diapositive a 250,
   ce qui rend 30 px au texte tout en agrandissant le produit de 36 %. */
.shop-promo--video-mobile .shop-promo__product-card--slide {
	width: 250px;
	grid-template-columns: 76px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
}

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

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-title {
	font-size: 12px;
	line-height: 1.32;
	-webkit-line-clamp: 2;
}

.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-detail {
	gap: 3px;
}

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

/* La rotation empile les diapositives : elles se superposent dans la meme
   cellule, la largeur fixe ne sert plus qu'a la lisibilite du texte. */
.shop-promo--video-mobile .shop-promo__products--portrait {
	justify-items: start;
}

/* --- affiche mobile : signature plus visible, prix plus affirme ----------- */

.shop-promo--video-mobile .shop-promo__brand--lg {
	height: 26px;
	max-width: 132px;
}

.shop-promo--video-mobile .shop-promo__brand--lg .shop-promo__brand-logo {
	max-width: 120px;
	height: 17px;
}

.shop-promo--video-mobile .shop-promo__product-price {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.03em;
}

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

/* Le badge en ligne suit le prix : meme poids, meme ligne de base. */
.shop-promo--video-mobile .shop-promo__product-discount--inline {
	height: 20px;
	padding: 0 7px;
	font-size: 12px;
	line-height: 20px;
}

/* Le prix de la diapositive etait fige a 14 px par une regle plus specifique
   que la consigne generale du bloc mobile. */
.shop-promo--video-mobile .shop-promo__product-card--slide .shop-promo__product-price {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.03em;
}

/* Sur le bloc mobile la signature reste SUR la ligne de l'accroche : lui
   donner sa propre ligne coutait 34 px et faisait franchir le plafond de
   150 px a « affiche ». Elle garde sa nouvelle taille. */
.shop-promo--video-mobile .shop-promo__head {
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.shop-promo--video-mobile .shop-promo__head .shop-promo__brand--lg {
	flex: 0 0 auto;
}

/* La diapositive du bloc mobile prend toute la largeur : en rotation les
   creations se superposent dans la meme cellule, une largeur fixe laissait
   un vide a droite au lieu de donner la place au titre. */
.shop-promo--video-mobile .shop-promo__product-card--slide {
	width: 100%;
}

/* ==========================================================================
   v6.9 — banniere sous pagination : tenir entre 250 et 300 px
   ==========================================================================
   Le bloc est large (950 px) mais doit rester court : il ferme une page de
   grille, il ne doit pas la doubler. On exploite donc la largeur pour reduire
   la hauteur, au lieu d'empiler comme sur la sidebar.
   ========================================================================== */

/* pile : les lignes se rangent en deux colonnes, et on s'arrete a quatre.
   Cinq lignes empilees faisaient 440 px. */
.shop-promo--pagination-banner .shop-promo__products--pile {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	gap: 0 28px;
}

.shop-promo--pagination-banner .shop-promo__products--pile .shop-promo__product-card--row:nth-child(n + 5) {
	display: none;
}

/* Chaque colonne redemarre sans filet superieur. */
.shop-promo--pagination-banner .shop-promo__products--pile .shop-promo__product-card--row:nth-child(2) {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* etiquette : la vedette a gauche, les deux miniatures a droite. */
.shop-promo--pagination-banner .shop-promo__products--etiquette {
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	column-gap: 28px;
	align-items: start;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--hero {
	grid-row: 1 / span 2;
	margin-bottom: 0;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--hero .shop-promo__product-media {
	padding-bottom: 44%;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--mini {
	grid-column: 2;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	margin-bottom: 12px;
}

/* portrait : la rotation garde une seule creation, mais a l'horizontale. */
.shop-promo--pagination-banner .shop-promo__product-card--slide {
	width: 100%;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
}

.shop-promo--pagination-banner .shop-promo__product-card--slide .shop-promo__product-media {
	padding-bottom: 52%;
}

.shop-promo--pagination-banner .shop-promo__product-card--slide .shop-promo__cta {
	width: auto;
	min-width: 220px;
	justify-self: start;
}

/* Le lien de pied ne prend pas toute la largeur sur un bloc aussi large. */
.shop-promo--pagination-banner .shop-promo__more {
	width: auto;
	min-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 759px) {
	/* Tout repasse en colonne unique. */
	.shop-promo--pagination-banner .shop-promo__products--affiche,
	.shop-promo--pagination-banner .shop-promo__products--pile,
	.shop-promo--pagination-banner .shop-promo__products--etiquette {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--hero {
		grid-row: auto;
	}

	.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--mini {
		grid-column: 1;
	}

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

	.shop-promo--pagination-banner .shop-promo__products--pile .shop-promo__product-card--row:nth-child(n + 4) {
		display: none;
	}
}

/* ==========================================================================
   v7.1 — banniere : lisibilite des reperes et colonne droite d'etiquette
   ========================================================================== */

/* --- Remise nettement plus grande sur la banniere -------------------------- */

/* Le bloc fait 950 px : un badge de 16 px s'y perd. */
.shop-promo--pagination-banner .shop-promo__product-discount,
.shop-promo--pagination-banner .shop-promo__product-discount--inline {
	height: 26px;
	padding: 0 10px;
	border-radius: 5px;
	font-size: 16px;
	line-height: 26px;
}

/* --- Signature plus presente sur la banniere ------------------------------ */

.shop-promo--pagination-banner .shop-promo__brand--lg {
	height: 36px;
	max-width: 178px;
}

.shop-promo--pagination-banner .shop-promo__brand--lg .shop-promo__brand-logo {
	max-width: 164px;
	height: 24px;
}

/* --- etiquette : la colonne droite se resserre et porte le lien ----------- */

/* Les deux miniatures heritaient des marges de la sidebar, ou elles sont
   empilees sous la vedette : cote a cote dans une colonne, cela creusait un
   vide entre elles. */
.shop-promo--pagination-banner .shop-promo__products--etiquette {
	grid-template-rows: auto auto auto;
	row-gap: 0;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--hero {
	grid-row: 1 / span 3;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--mini {
	grid-column: 2;
	margin: 0 0 10px;
	padding: 0;
	border-top: 0;
	align-self: start;
}

.shop-promo--pagination-banner .shop-promo__products--etiquette .shop-promo__product-card--mini:nth-of-type(3) {
	margin-bottom: 0;
}

/* Le lien passe en troisieme rangee de la colonne droite, sous les deux
   miniatures, et redevient un lien texte : sur une banniere large, un pave
   rouge pleine largeur en pied ecrasait la composition. */
.shop-promo--pagination-banner.shop-promo--tpl-etiquette .shop-promo__more {
	min-width: 0;
	width: auto;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dg-brand);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	text-decoration: underline;
}

/* --- portrait : reperes agrandis ------------------------------------------ */

.shop-promo--pagination-banner .shop-promo__product-card--slide .shop-promo__product-discount {
	height: 32px;
	padding: 0 12px;
	font-size: 19px;
	line-height: 32px;
}

/* --- affiche : plusieurs produits en colonnes ----------------------------- */

/* La banniere sert trois produits : la grille passe en trois colonnes egales
   au lieu du duo photo + texte de la sidebar. */
.shop-promo--pagination-banner .shop-promo__products--affiche {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 22px;
	align-items: start;
}

.shop-promo--pagination-banner .shop-promo__products--affiche .shop-promo__product-media {
	padding-bottom: 72%;
}

/* ==========================================================================
   COUCHE v8 — mises en page du slide DANS le player (spot G)

   Cette surface convertit dix fois mieux que la grille. Les regles de base
   plus haut restent la geometrie SERVIE (bras temoin « legacy-v5 ») et ne
   sont pas touchees : un temoin qu'on retouche ne compare plus rien.

   Deux propositions seulement, « affiche » et « pile ». « etiquette » a ete
   retiree : elle ne faisait que redecorer le temoin sans rien resoudre.

   Le principe de mise en page vient d'un defaut observe a l'ecran : le bouton
   se posait dans le coin haut-droit, sous la croix de fermeture. Le contenu
   passe donc en flux ENVELOPPANT — titre sur toute la largeur, puis prix et
   bouton cote a cote sur la derniere ligne. Le bouton se lit avec le prix,
   ce qui est le bon voisinage, et le coin haut-droit reste libre pour la
   croix.

   Le panier seul a ete essaye puis abandonne : une icone ne dit pas ce qu'on
   obtient en cliquant. Le libelle « Voir le deal › » est partout.
   ========================================================================== */

/* --- Socle commun aux deux geometries ------------------------------------ */

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__link,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__link {
	align-items: stretch;
	background: var(--dg-surface);
	background-image: none;
}

/*
 * Le survol ne change plus la couleur du cadre : un liistere vert sur une
 * carte posee sur de la video accrochait l'oeil plus que le produit. Il ne
 * reste que ce qui sert la lecture — la carte se detache du fond, et le
 * bouton s'eclaircit pour confirmer qu'on est bien sur une zone cliquable.
 */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__link:hover,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__link:focus-visible {
	border-color: rgba(0, 0, 0, .16);
	box-shadow: 0 24px 56px rgba(0, 0, 0, .62);
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__link:hover,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__link:focus-visible {
	border-color: rgba(255, 255, 255, .22);
	box-shadow: 0 22px 50px rgba(0, 0, 0, .62);
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__cta,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__cta {
	position: static;
	flex: 0 0 auto;
	margin: 0;
	background: var(--dg-green-grad);
	box-shadow: var(--dg-cta-shadow);
	color: var(--dg-green-ink);
	transition: background .18s ease;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__link:hover .shop-promo__cta,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__link:hover .shop-promo__cta {
	background: var(--dg-green-hover);
}

/* Reassurance, code promo et economie tombent : onze secondes ne suffisent
   pas a les lire, et ils poussent la carte sur l'image. */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__proof,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__proof,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__code,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__code,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__saving,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__saving,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__hook,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__meta,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__discreet,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__discreet {
	display: none;
}

/*
 * Flux enveloppant. Le titre prend une ligne entiere ; prix et bouton se
 * partagent la suivante. « align-content » centre le paquet dans la carte,
 * quelle que soit la hauteur reelle du titre.
 */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__content,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__content {
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: 10px;
	row-gap: 4px;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__hook,
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__title,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__title {
	flex: 0 0 100%;
	margin: 0;
}

/* La croix occupe le coin haut-droit : le titre s'arrete avant elle. */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__title,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__title {
	padding-right: 34px;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__prices,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__prices {
	flex: 0 1 auto;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 7px;
	margin: 0;
}

/* Le prix barre est le second element le plus regarde apres le prix. */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__before,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__before {
	color: #9a9a9a;
	font-size: 13px;
	text-decoration-color: var(--dg-red-text);
	text-decoration-thickness: 2px;
}

/* --- affiche : la carte claire ------------------------------------------
   Le langage de l'overlay de fiche produit : fond blanc, photo collee au
   bord, remise blanche sur rouge dans l'angle. La plus visible sur une video
   sombre, donc la plus haute des deux. */

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__link {
	min-height: 124px;
	border-color: rgba(0, 0, 0, .12);
	background: var(--dg-plate-2);
	box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__media {
	width: 116px;
	background: var(--dg-plate-2);
}

/* Photo a fleur de bord : sans marge blanche autour, elle parait plus grande
   a surface egale. */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__image {
	object-fit: cover;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__discount {
	top: 0;
	right: auto;
	left: 0;
	min-height: 26px;
	padding: 5px 9px;
	border-radius: 0 0 10px 0;
	background: var(--dg-red);
	box-shadow: none;
	color: var(--dg-red-ink);
	font-size: 15px;
}

/*
 * La photo remplit son cadre : pose telle quelle, la signature tombait sur
 * le produit et devenait illisible. Une plaque blanche la detache, et elle
 * passe a gauche ou l'image est le plus souvent vide.
 */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__brand {
	right: auto;
	bottom: 5px;
	left: 5px;
	height: 17px;
	max-width: 96px;
	padding: 2px 5px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .93);
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__brand-logo {
	max-width: 84px;
	height: 12px;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__content {
	padding: 12px 14px 12px 13px;
}

/*
 * L'accroche PORTE le message — c'est le second axe de tout le dispositif,
 * celui qui distingue « vente flash » de « notre choix ». Elle avait ete
 * masquee pour gagner de la hauteur, et les quatre messages rendaient alors
 * quatre cartes identiques : l'axe existait dans le code sans exister a
 * l'ecran. Elle reprend donc sa place, et c'est le badge « flash deal » qui
 * cede la sienne — il redisait ce que l'accroche dit deja, en moins precis.
 */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__hook {
	padding-right: 34px;
	color: var(--dg-red);
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__title {
	color: #101820;
	font-size: 14px;
	line-height: 1.22;
	-webkit-line-clamp: 2;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__price {
	color: #101820;
	font-size: 23px;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__cta {
	min-height: 36px;
	padding: 10px 14px;
	font-size: 11.5px;
}

/* --- pile : le bandeau minimal ------------------------------------------
   La geometrie la moins intrusive : une ligne de titre, puis prix et bouton
   sur un seul rang. C'est celle a comparer au temoin quand on se demande si
   la promo genait la lecture de la video. */

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__link {
	min-height: 78px;
	border-color: rgba(255, 255, 255, .16);
	border-radius: 11px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

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

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__discount {
	top: 0;
	right: auto;
	left: 0;
	min-height: 22px;
	padding: 3px 7px;
	border-radius: 0 0 9px 0;
	background: var(--dg-red);
	box-shadow: none;
	color: var(--dg-red-ink);
	font-size: 13px;
}

/* Sur 78 px de haut, la signature et le bandeau « flash » n'ont pas de ligne
   a eux : c'est le bord de la carte et le badge rouge qui portent l'identite. */
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__brand,
.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__meta {
	display: none;
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__content {
	padding: 9px 12px 9px 11px;
	row-gap: 3px;
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__title {
	font-size: 12.5px;
	line-height: 1.25;
	-webkit-line-clamp: 1;
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__price {
	font-size: 19px;
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__before {
	font-size: 12px;
}

.shop-promo--player-slide.shop-promo--tpl-pile .shop-promo__cta {
	min-height: 30px;
	padding: 8px 12px;
	font-size: 11px;
}

/*
 * La croix partagee est un disque noir a 50 % : lisible pose sur de la video,
 * beaucoup trop lourd pose sur la carte blanche d'« affiche ». Elle y prend
 * le traitement inverse — glyphe sombre sur voile clair, cerne d'un filet —
 * et redevient une commande discrete au lieu d'une pastille qui rivalise avec
 * le badge de remise.
 */
.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__close {
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(0, 0, 0, .10);
	background: rgba(22, 16, 15, .07);
	color: #657786;
	font-size: 20px;
}

.shop-promo--player-slide.shop-promo--tpl-affiche .shop-promo__close:hover {
	background: rgba(22, 16, 15, .14);
	color: #101820;
}

/* ==========================================================================
   COUCHE v9 — carte Poppers en grille (spot H)

   La colonne de texte est plafonnee a 78 px, en « overflow: hidden », pour
   que la carte fasse exactement la hauteur d'une vignette video : c'est ce
   plafond qui la rend native, et il n'est pas negociable. Le contenu servi en
   reclamait 86 : le bouton « Decouvrir » etait donc coupe de 11 px sur les
   six angles, depuis toujours.

   La correction resserre le contenu au lieu d'agrandir la carte. Agrandir
   l'aurait fait depasser ses voisines, c'est-a-dire exactement ce qu'une
   creation native ne doit pas faire.
   ========================================================================== */

/* Le bouton descend a la taille d'une pastille de vignette. Il reste au-dessus
   du seuil tactile de 24 px, et il devient enfin entierement visible. */
.shop-promo--native.shop-promo--poppers .shop-promo__cta {
	min-height: 24px;
	padding: 5px 10px;
	font-size: 10.5px;
}

/* Deux respirations de trop dans un bandeau qui n'en a pas les moyens. */
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-kicker {
	margin-bottom: 3px;
}

/*
 * La vraie cause du bouton coupe : la ligne d'offre etait figee a 20 px avec
 * « overflow: hidden », alors que le bouton en faisait 36. Elle ne cachait pas
 * un debordement, elle le fabriquait. Elle prend maintenant la hauteur de son
 * contenu, dans la limite que le bandeau de 78 px autorise :
 *   20 (accroche) + 3 + 16 (titre) + 26 (offre) + 8 (marges) = 73.
 */
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row {
	height: auto;
	min-height: 26px;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
}

/*
 * En case etroite, c'est le PRIX qui cede, pas le bouton : un prix un peu
 * serre reste lisible, un bouton tronque ne se clique plus. Le cas ne se
 * presente pas sur la grille du site — les vignettes y font 312 px — mais une
 * ligne a deux elements fixes finit toujours par deborder quelque part.
 */
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-price {
	min-width: 0;
	flex: 0 1 auto;
}

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

/* Le meme calcul au palier etroit, ou le bandeau tombe a 66 px. */
@media (max-width: 480px) {
	.shop-promo--native.shop-promo--poppers .shop-promo__cta {
		min-height: 22px;
		padding: 4px 8px;
		font-size: 10px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-kicker {
		margin-bottom: 2px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row {
		margin-top: 3px;
	}
}

/* ==========================================================================
   COUCHE v9.1 — lisibilite et argumentaire de la carte Poppers (spot H)

   Le bandeau de texte ne dispose que de 78 px en grille et de 66 px sur
   telephone. Il en depensait la moitie a REPETER ce que l'image dit deja :
   une ligne « Poppers Express · Achat de poppers » posee sous un logo
   « Poppers Express », et une fleche decorative a cote d'un bouton. Pendant
   ce temps la seule ligne qui argumentait — livraison rapide, colis discret,
   point relais — etait construite par le script puis masquee par la feuille.

   La carte suit maintenant une sequence simple, une idee par ligne :
   accroche, benefice, prix + bouton.

   Sur telephone la grille passe a 100 % de largeur sous 410 px : la carte y
   est LARGE, et son texte etait pourtant reduit a 10 px. Le desequilibre
   venait de la, pas du manque de place. Le benefice y cede sa ligne et tout
   le reste grandit.
   ========================================================================== */

/* --- Ce qui disparait : deux redites -------------------------------------- */

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-kicker {
	display: none;
}

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row::after {
	display: none;
}

/* --- L'accroche : c'etait le texte le plus faible de la carte ------------- */

/* Elle etait grise, a la couleur des metadonnees de vignette, alors que c'est
   elle qui doit accrocher. Elle passe en blanc et gagne un point. */
.shop-promo--native.shop-promo--poppers .shop-promo__title {
	height: 18px;
	color: var(--thumb-text-color, #fff);
	font-size: 15px;
	font-weight: 800;
	line-height: 18px;
}

/* --- Le benefice : la ligne qui argumente, enfin visible ------------------ */

.shop-promo--native.shop-promo--poppers .shop-promo__poppers-feature {
	display: block;
	width: 100%;
	height: 15px;
	margin: 3px 0 0;
	overflow: hidden;
	color: var(--sp-accent);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le compte du bandeau, en grille :
   18 (accroche) + 3 + 15 (benefice) + 4 + 26 (offre) + 8 (marges) = 74 / 78. */
.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row {
	margin-top: 4px;
}

/* --- Telephone : trois elements de moins, tout le reste plus grand -------- */

@media (max-width: 480px) {
	/*
	 * Le benefice cede sa ligne : sur 66 px, mieux vaut une accroche et un
	 * prix qui se lisent qu'un argument de 10 px que personne ne dechiffre.
	 * L'information n'est pas perdue, elle reste dans l'aria-label et sur la
	 * pastille de livraison posee sur l'image.
	 */
	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-feature {
		display: none;
	}

	/* Le compte du bandeau, sur telephone :
	   20 (accroche) + 5 + 30 (offre) + 8 (marges) = 63 / 66. */
	.shop-promo--native.shop-promo--poppers .shop-promo__title {
		height: 20px;
		font-size: 15.5px;
		line-height: 20px;
	}

	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-offer-row {
		min-height: 30px;
		margin-top: 5px;
	}

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

	/* La carte fait 350 px de large : le bouton peut enfin avoir la taille
	   d'un vrai bouton au lieu d'une pastille de 22 px. */
	.shop-promo--native.shop-promo--poppers .shop-promo__cta {
		min-height: 30px;
		padding: 8px 14px;
		font-size: 12.5px;
	}

	/* La promesse de livraison est posee sur une image large : elle peut se
	   lire, a condition de ne plus etre ecrite en 10,5 px. */
	.shop-promo--native.shop-promo--poppers .shop-promo__poppers-europe {
		min-height: 26px;
		font-size: 12.5px;
		line-height: 16px;
	}
}

/* ==========================================================================
   COUCHE v10 — habillages de la carte Poppers (spot H)

   1. FIN DES TEINTES PAR ARGUMENT. « --sp-accent » etait repointe sur le cyan
      pour « need », le vert pour « pick », le jaune pour « flash ». Un visiteur
      ne voit qu'une carte a la fois : la couleur ne codait donc aucune
      information, elle rendait seulement la marque instable d'une page a
      l'autre. La carte prend le bleu du site, et le rouge de Poppers Express pour
      ce qui doit presser.

   2. QUATRE HABILLAGES, tires independamment du message. Le message dit quoi
      vendre, l'habillage dit comment le presenter :

        sombre   la carte d'origine, assagie
        vitrine  bandeau clair sur une grille sombre — le plus visible
        prix     le tarif domine, l'accroche s'efface
        ruban    la promesse en bandeau dore au bas de l'image
   ========================================================================== */

.shop-promo--native.shop-promo--poppers {
	--sp-accent: #3cbff0;
	--pop-red: #d92d20;
	--pop-plate: #eef7fb;
	--pop-ink: #101820;
}

/* --- sombre : le bandeau noir, reference ---------------------------------- */

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-sombre .shop-promo__poppers-feature {
	color: var(--sp-accent);
}

/* --- vitrine : bandeau clair -------------------------------------------
   Une grille de vignettes est sombre de bout en bout. Un bandeau creme y
   arrete l'oeil sans rien clignoter, et il donne a la carte l'allure d'une
   fiche produit plutot que d'une vignette de plus. */

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__poppers-content {
	background: var(--pop-plate);
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__title {
	color: var(--pop-ink);
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__poppers-feature {
	color: var(--pop-red);
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__poppers-price {
	color: var(--pop-ink);
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__cta {
	background: var(--pop-red);
	box-shadow: none;
	color: #fff;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-vitrine .shop-promo__link:hover .shop-promo__cta {
	background: #ee382b;
}

/* --- prix : le tarif domine ---------------------------------------------
   Quand le seul argument est le prix, tout le reste doit s'effacer devant
   lui. L'accroche recule au rang de sous-titre, le benefice sort — il ne se
   lit pas a cote d'un nombre de 27 px, il le concurrence. */

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__poppers-feature {
	display: none;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__title {
	height: 16px;
	color: var(--thumb-info-color, #bcbcbc);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 16px;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__poppers-offer-row {
	min-height: 32px;
	margin-top: 4px;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__poppers-price {
	color: var(--sp-accent);
	font-size: 27px;
	font-weight: 900;
	letter-spacing: -.03em;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__cta {
	min-height: 30px;
	font-size: 12px;
}

/* --- ruban : la promesse au bas de l'image ------------------------------
   Le benefice sort du bandeau et vient se poser sur l'image, la ou il ne
   coute aucune des deux lignes disponibles. La pastille de livraison cede sa
   place — les deux occupent le meme bord. */

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-ruban .shop-promo__poppers-europe {
	display: none;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-ruban .shop-promo__poppers-feature {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 78px;
	left: 0;
	width: auto;
	height: auto;
	min-height: 26px;
	margin: 0;
	padding: 6px 10px;
	color: var(--pop-ink);
	background: var(--sp-accent);
	font-size: 12px;
	font-weight: 900;
	line-height: 14px;
	letter-spacing: .01em;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-ruban .shop-promo__title {
	height: 18px;
}

.shop-promo--native.shop-promo--poppers.shop-promo--tpl-ruban .shop-promo__poppers-offer-row {
	margin-top: 5px;
}

/* --- Telephone : le bandeau tombe a 66 px, le ruban suit ------------------ */

@media (max-width: 480px) {
	/*
	 * « display: block » est indispensable ici : la regle qui retire le
	 * benefice du bandeau sur telephone porte sur toute carte Poppers et
	 * l'emporterait sinon. Or en « ruban » le benefice n'est PAS dans le
	 * bandeau — il est pose sur l'image, il ne coute aucune ligne, et la
	 * pastille de livraison lui a cede la place. Le masquer laissait la carte
	 * sans aucune promesse.
	 */
	.shop-promo--native.shop-promo--poppers.shop-promo--tpl-ruban .shop-promo__poppers-feature {
		display: block;
		bottom: 66px;
		min-height: 24px;
		padding: 5px 9px;
		font-size: 12px;
	}

	/* Le tarif garde sa domination, a l'echelle d'une carte pleine largeur. */
	.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__poppers-price {
		font-size: 24px;
	}

	.shop-promo--native.shop-promo--poppers.shop-promo--tpl-prix .shop-promo__title {
		height: 17px;
		font-size: 13px;
		line-height: 17px;
	}
}

/* ==========================================================================
   COUCHE v11 — diapositive boutique dans les Reels (spot I)

   Une diapositive de Reels occupe un ECRAN ENTIER, en 9:16, inseree dans un
   flux qu'on parcourt au pouce. C'est le seul spot du dispositif ou la place
   ne manque pas : le risque n'est pas le debordement mais le VIDE, et un
   message qui s'y noie. Trois defauts corriges ici.

   1. La couleur du bouton changeait avec le message — bleu, cyan, vert. Meme
      defaut que sur la carte Poppers : un visiteur ne voit qu'une diapositive
      a la fois, la teinte ne code rien, elle deregle seulement la marque. Le
      canal est fixe : vert d'achat pour Discount, bleu du site pour Poppers.

   2. Le bloc « code promo » etait affiche. L'angle « code » avait pourtant ete
      retire de la rotation Discount pour sa conversion (2 clics sur 1 737
      impressions) : il annonce une friction alors que le lien applique deja la
      remise au clic. Le bloc disait donc ce qu'on avait decide de taire.

   3. Le bouton flottait a 182 px du bas — 21 % de l'ecran de vide sous lui,
      loin du pouce. Il descend au contact de la barre du lecteur et prend
      toute la largeur : sur un ecran entier, une cible etroite est un aveu.
   ========================================================================== */

/*
 * Pas de vert sur cette surface. Le canal d'achat vert appartient aux blocs
 * Discount posés DANS la page, où il tranche sur le fond sombre du site. Sur
 * un ecran entier voisin d'une video, il tire vers l'application marchande et
 * s'eloigne du site. La diapositive prend donc la couleur primaire
 * de Twinks.tube, comme la carte de grille.
 */
.shop-promo--reel.shop-promo--discount {
	--sp-accent: #3cbff0;
}

.shop-promo--reel.shop-promo--poppers {
	--sp-accent: #3cbff0;
}

/* --- Le bouton : pleine largeur, au contact du pouce ---------------------- */

.shop-promo--reel .shop-promo__cta {
	display: flex;
	width: 100%;
	min-height: 52px;
	margin-top: 16px;
	padding: 15px 20px;
	border-radius: 14px;
	font-size: 15px;
	letter-spacing: .01em;
}

.shop-promo--reel.shop-promo--discount .shop-promo__cta {
	background: linear-gradient(110deg, #68d5fa, #168dbb);
	box-shadow: 0 8px 24px rgba(60, 191, 240, .26);
	color: #101820;
}

.shop-promo--reel.shop-promo--poppers .shop-promo__cta {
	background: linear-gradient(110deg, #3cbff0, #168dbb);
	box-shadow: 0 8px 22px rgba(60, 191, 240, .22);
	color: #101820;
}

/* La barre du lecteur fait 78 px : le contenu s'arrete juste au-dessus, et
   plus 94 px plus haut comme avant. */
.shop-promo--reel .shop-promo__content {
	padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* --- Ce qui disparait ----------------------------------------------------- */

.shop-promo--reel .shop-promo__code {
	display: none;
}

/* « Tu economises X » redit la remise deja affichee en 20 px dans l'angle. */
.shop-promo--reel .shop-promo__saving {
	display: none;
}

/* --- La photo Poppers remplace la plaque au logo -------------------------- */

.shop-promo--reel.shop-promo--poppers .shop-promo__media {
	background: #090909;
}

.shop-promo--reel.shop-promo--poppers .shop-promo__poppers-visual {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * La photo occupe toute la surface : le degrade doit donc mordre plus tot et
 * plus fort que sur une plaque blanche, faute de quoi le texte se pose sur
 * une image et devient illisible.
 */
.shop-promo--reel.shop-promo--poppers .shop-promo__media::after {
	background: linear-gradient(180deg, rgba(9, 9, 9, .12) 0%, rgba(9, 9, 9, .55) 38%, #090909 92%);
}

.shop-promo--reel.shop-promo--poppers .shop-promo__poppers-price {
	display: block;
	margin: 10px 0 0;
	color: #fff;
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
}

/*
 * Le packshot Discount est carre, la boite d'image fait 390 x 590 : centre en
 * « contain », il laissait une centaine de pixels de blanc vide au-dessus, et
 * sa moitie basse passait sous le degrade. Il remonte dans la zone claire et
 * ses marges se resserrent — meme surface d'ecran, produit nettement plus
 * grand et entierement lisible.
 */
.shop-promo--reel.shop-promo--discount .shop-promo__image {
	padding: clamp(14px, 3vh, 32px);
	object-position: center 38%;
}

/* ==========================================================================
   COUCHE v11.1 — la diapositive Reels doit se voir de plus loin

   Une pastille de remise, un bandeau « flash » et une signature dimensionnes
   pour un encart de 300 px se perdent sur un ecran de 844. Tout ce qui porte
   l'offre passe a l'echelle de la surface.
   ========================================================================== */

/* --- La pastille de remise ------------------------------------------------
   Elle etait posee a plat sur des packshots blancs, ou son ombre ne se voyait
   pas : un filet clair la detache de n'importe quel fond, clair comme sombre.
   Le chiffre gagne quatre points et sa graisse maximale. */

.shop-promo--reel .shop-promo__discount {
	top: max(16px, env(safe-area-inset-top));
	right: 16px;
	min-height: 54px;
	padding: 11px 20px;
	border: 2px solid rgba(255, 255, 255, .92);
	background: var(--dg-red);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .10);
	color: #fff;
	font-size: 25px;
	font-weight: 900;
	letter-spacing: -.02em;
}

/* --- Le bandeau « flash deal » -------------------------------------------
   Il annonce une fin proche : il doit battre. Le battement joue sur l'opacite
   et une respiration d'echelle, jamais sur la couleur — un clignotement franc
   sur un ecran entier fatigue au lieu d'alerter. */

@keyframes shop-promo-flash-beat {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .48; transform: scale(.965); }
}

.shop-promo--reel .shop-promo__flash {
	min-height: 32px;
	padding: 8px 14px;
	background: var(--dg-red);
	box-shadow: 0 6px 18px rgba(217, 45, 32, .38);
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .10em;
	transform-origin: left center;
	animation: shop-promo-flash-beat 1.15s ease-in-out infinite;
}

/* Un battement perpetuel est une gene reelle pour qui le declare. */
@media (prefers-reduced-motion: reduce) {
	.shop-promo--reel .shop-promo__flash {
		animation: none;
	}
}

.shop-promo--reel .shop-promo__meta {
	margin-bottom: 10px;
}

/* --- La signature ---------------------------------------------------------
   17 px de haut sur un ecran de 844 : la boutique n'etait pas identifiable.
   La capsule disparait, le logo se pose directement — il porte deja ses
   couleurs, une plaque blanche derriere ne faisait que les enfermer. */

.shop-promo--reel .shop-promo__brand {
	top: calc(72px + env(safe-area-inset-top));
	bottom: auto;
	left: 20px;
	height: 40px;
	max-width: 190px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.shop-promo--reel .shop-promo__brand-logo {
	max-width: 180px;
	height: 32px;
}