/* Twinks dating promotion mounts, sticky and contextual dialog. */
.dating-promo,
.dating-promo *,
.dating-promo-sticky,
.dating-promo-sticky *,
.dating-promo-interstitial,
.dating-promo-interstitial * {
	box-sizing: border-box;
}

.dating-promo {
	--dating-accent: #3cbff0;
	--dating-accent-2: #00c1f3;
	--dating-surface: #101419;
	--dating-surface-2: #161d24;
	--dating-text: #fff;
	--dating-muted: #b9c9d3;
	--dating-line: rgba(255, 255, 255, .12);
	display: block;
	width: 100%;
	min-width: 0;
	color: var(--dating-text);
	font-family: Quicksand, sans-serif;
	text-align: left;
}

.dating-promo[hidden],
.dating-promo[data-dating-duplicate="1"] {
	display: none !important;
}

.dating-promo__link {
	position: relative;
	display: flex;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--dating-line);
	border-radius: 16px;
	background:
		radial-gradient(circle at 80% 0, rgba(0, 193, 243, .19), transparent 44%),
		linear-gradient(145deg, var(--dating-surface-2), var(--dating-surface));
	box-shadow: 0 13px 34px rgba(0, 0, 0, .25);
	color: var(--dating-text);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.dating-promo__link:hover,
.dating-promo__link:focus-visible,
.dating-promo__tile:hover,
.dating-promo__tile:focus-visible {
	border-color: rgba(60, 191, 240, .7);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .34), 0 0 0 1px rgba(60, 191, 240, .16);
	color: var(--dating-text);
	text-decoration: none;
	transform: translateY(-2px);
}

.dating-promo__link:focus-visible,
.dating-promo__tile:focus-visible,
.dating-promo-sticky__close:focus-visible,
.dating-promo-interstitial__close:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .92);
	outline-offset: 3px;
}

.dating-promo__visual {
	position: relative;
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	background: #202833;
}

.dating-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center 24%;
	background: #202833;
}

.dating-promo__text {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 16px;
}

.dating-promo__title {
	display: flex;
	max-width: 100%;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.02em;
}

.dating-promo__body {
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	color: var(--dating-muted);
	font-size: 13px;
	line-height: 1.42;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.dating-promo__cta {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	margin-top: 13px;
	padding: 9px 15px;
	border-radius: 999px;
	background: linear-gradient(110deg, var(--dating-accent), #00c1f3);
	box-shadow: 0 8px 20px rgba(60, 191, 240, .25);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .015em;
	white-space: nowrap;
}

.dating-promo__bubble {
	position: absolute;
	right: 9px;
	bottom: 9px;
	max-width: calc(100% - 18px);
	padding: 7px 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 14px 14px 3px 14px;
	background: rgba(16, 20, 25, .88);
	box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.15;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.dating-promo__status {
	display: inline-block;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	background: #1fbf83;
	box-shadow: 0 0 0 3px rgba(31, 191, 131, .18);
}

/* Compact navigation mount */
.dating-promo--format-nav {
	display: inline-flex;
	width: auto;
	max-width: 250px;
	vertical-align: middle;
}

.dating-promo__link--nav {
	width: 100%;
	min-height: 46px;
	align-items: center;
	gap: 9px;
	padding: 5px 10px 5px 5px;
	border-radius: 999px;
	background: linear-gradient(115deg, rgba(60, 191, 240, .18), rgba(0, 193, 243, .12)), #101419;
	box-shadow: none;
}

.dating-promo__link--nav .dating-promo__image {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.dating-promo__link--nav .dating-promo__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1px 8px;
	padding: 0;
}

.dating-promo__link--nav .dating-promo__title {
	display: flex;
	grid-column: 1;
	margin: 0;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__link--nav .dating-promo__body {
	display: block;
	grid-column: 1;
	overflow: hidden;
	color: #c7d5de;
	font-size: 10px;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__link--nav .dating-promo__cta {
	grid-row: 1 / span 2;
	grid-column: 2;
	min-height: 28px;
	margin: 0;
	padding: 6px 9px;
	font-size: 10px;
}

/* Single card / inline mounts */
.dating-promo__link--card {
	min-height: 210px;
	flex-direction: column;
}

.dating-promo__link--card .dating-promo__visual {
	width: 100%;
	aspect-ratio: 16 / 10;
}

.dating-promo__link--inline {
	min-height: 126px;
	flex-direction: row;
	align-items: stretch;
}

.dating-promo__link--inline .dating-promo__visual {
	width: 126px;
	min-height: 126px;
}

.dating-promo__link--inline .dating-promo__title {
	font-size: 16px;
}

/* Rail and carousel */
.dating-promo__group {
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 17px;
	border: 1px solid var(--dating-line);
	border-radius: 18px;
	background:
		radial-gradient(circle at 90% 0, rgba(60, 191, 240, .13), transparent 38%),
		var(--dating-surface);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.dating-promo__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 14px;
}

.dating-promo__eyebrow {
	margin: 0 0 3px;
	color: #75dcff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dating-promo__group-title {
	color: #fff;
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -.025em;
}

.dating-promo__group-body {
	margin-top: 4px;
	color: var(--dating-muted);
	font-size: 12px;
	line-height: 1.4;
}

.dating-promo__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
}

.dating-promo__tile {
	position: relative;
	display: flex;
	min-width: 0;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--dating-line);
	border-radius: 13px;
	background: #161d24;
	color: #fff;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dating-promo__tile .dating-promo__visual {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.dating-promo__tile .dating-promo__status {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 11px;
	height: 11px;
}

.dating-promo__tile-label {
	display: block;
	overflow: hidden;
	padding: 9px 9px 2px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__tile-cta {
	display: block;
	overflow: hidden;
	padding: 2px 9px 10px;
	color: #75dcff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-carousel .dating-promo__items {
	display: flex;
	margin: 0 -4px;
	padding: 4px;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-color: rgba(60, 191, 240, .55) transparent;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.dating-promo--format-carousel .dating-promo__tile {
	flex: 0 0 clamp(128px, 18vw, 182px);
	scroll-snap-align: start;
}

/* Full-height Reels card */
.dating-promo-reel-slide,
.dating-promo-reel-slide > .dating-promo,
.dating-promo--format-reel {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

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

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

.dating-promo__link--reel .dating-promo__visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dating-promo__link--reel .dating-promo__visual::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .86) 94%),
		linear-gradient(90deg, rgba(0, 0, 0, .32), transparent 60%);
	content: "";
	pointer-events: none;
}

.dating-promo__link--reel .dating-promo__image {
	object-position: center;
}

.dating-promo__link--reel .dating-promo__bubble {
	top: 10%;
	right: 18px;
	bottom: auto;
	padding: 10px 14px;
	font-size: 13px;
}

.dating-promo__inbox {
	display: none;
}

.dating-promo__link--reel .dating-promo__inbox {
	position: absolute;
	z-index: 3;
	top: 19%;
	left: clamp(14px, 5vw, 34px);
	display: grid;
	width: min(330px, calc(100% - 50px));
	gap: 9px;
	pointer-events: none;
}

.dating-promo__inbox-row {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
	padding: 7px 11px 7px 7px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 18px 18px 18px 5px;
	background: rgba(16, 20, 25, .84);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.dating-promo__inbox-row:nth-child(2) {
	transform: translateX(18px);
}

.dating-promo__inbox-row:nth-child(3) {
	transform: translateX(5px);
}

.dating-promo__inbox-avatar {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px;
	border: 2px solid rgba(255, 255, 255, .78);
	border-radius: 50%;
	object-fit: cover;
}

.dating-promo__inbox-message {
	overflow: hidden;
	color: #fff;
	font-size: clamp(11px, 2.7vw, 14px);
	font-weight: 750;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__link--reel .dating-promo__text {
	position: relative;
	z-index: 1;
	display: flex;
	max-width: 620px;
	flex: 0 0 auto;
	padding: clamp(22px, 6vw, 48px);
	padding-bottom: max(clamp(28px, 8vh, 72px), env(safe-area-inset-bottom));
}

.dating-promo__link--reel .dating-promo__title {
	font-size: clamp(26px, 6vw, 44px);
	text-shadow: 0 2px 15px rgba(0, 0, 0, .75);
}

.dating-promo__link--reel .dating-promo__body {
	max-width: 470px;
	color: rgba(255, 255, 255, .86);
	font-size: clamp(14px, 2.5vw, 18px);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.dating-promo__link--reel .dating-promo__cta {
	min-height: 48px;
	padding: 13px 22px;
	font-size: 14px;
}

/* Engagement-triggered sticky */
.dating-promo-sticky {
	position: fixed;
	z-index: 2147482000;
	right: 18px;
	bottom: 18px;
	width: min(390px, calc(100vw - 28px));
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .22s ease, transform .22s ease;
}

.dating-promo-sticky.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.dating-promo-sticky.is-suspended {
	display: none !important;
}

.dating-promo-sticky__close,
.dating-promo-interstitial__close {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .36);
	border-radius: 50%;
	background: rgba(16, 20, 25, .9);
	box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
	color: #fff;
	cursor: pointer;
	font: 700 24px/1 Quicksand, sans-serif;
}

.dating-promo-sticky__close {
	top: -9px;
	right: -8px;
}

.dating-promo-sticky .dating-promo__link {
	box-shadow: 0 20px 58px rgba(0, 0, 0, .55);
}

/* Contextual interstitial: user-dismissible, never redirects on its own. */
.dating-promo-dialog-open {
	overflow: hidden;
}

.dating-promo-interstitial {
	position: fixed;
	z-index: 2147483000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 8, 11, .82);
	opacity: 0;
	transition: opacity .22s ease;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.dating-promo-interstitial.is-visible {
	opacity: 1;
}

.dating-promo-interstitial__dialog {
	position: relative;
	width: min(430px, calc(100vw - 30px));
	height: min(720px, calc(100vh - 42px));
	height: min(720px, calc(100dvh - 42px));
	min-height: 430px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 22px;
	background: #101419;
	box-shadow: 0 28px 100px rgba(0, 0, 0, .7);
	transform: scale(.97) translateY(8px);
	transition: transform .22s ease;
}

.dating-promo-interstitial.is-visible .dating-promo-interstitial__dialog {
	transform: scale(1) translateY(0);
}

.dating-promo-interstitial__dialog > .dating-promo {
	width: 100%;
	height: 100%;
}

.dating-promo-interstitial__close {
	top: 12px;
	right: 12px;
}

/* Light site theme keeps the creative dark and visually self-contained. */
html.light .dating-promo {
	--dating-line: rgba(255, 255, 255, .14);
}

@media (min-width: 768px) {
	.dating-promo__link--card {
		min-height: 180px;
		flex-direction: row;
	}

	.dating-promo__link--card .dating-promo__visual {
		width: 42%;
		aspect-ratio: auto;
	}

	.dating-promo--format-carousel .dating-promo__intro {
		padding-right: 15%;
	}
}

@media (max-width: 767px) {
	.dating-promo__group {
		padding: 13px;
		border-radius: 14px;
	}

	.dating-promo__items {
		gap: 8px;
	}

	.dating-promo__tile-label {
		padding: 8px 7px 2px;
		font-size: 11px;
	}

	.dating-promo__tile-cta {
		padding: 2px 7px 9px;
		font-size: 9px;
	}

	.dating-promo--format-nav {
		max-width: 210px;
	}

	.dating-promo__link--nav .dating-promo__body {
		display: none;
	}

	.dating-promo__link--nav .dating-promo__title {
		grid-row: 1 / span 2;
		align-self: center;
	}

	.dating-promo-sticky {
		right: 10px;
		bottom: calc(88px + env(safe-area-inset-bottom));
		width: calc(100vw - 20px);
	}

	.dating-promo-sticky .dating-promo__link--inline {
		min-height: 104px;
	}

	.dating-promo-sticky .dating-promo__link--inline .dating-promo__visual {
		width: 104px;
		min-height: 104px;
	}

	.dating-promo-sticky .dating-promo__text {
		padding: 11px 13px;
	}

	.dating-promo-sticky .dating-promo__body {
		-webkit-line-clamp: 1;
	}

	.dating-promo-sticky .dating-promo__cta {
		min-height: 32px;
		margin-top: 7px;
		padding: 7px 11px;
	}

	.dating-promo-interstitial {
		padding: 0;
	}

	.dating-promo-interstitial__dialog {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		min-height: 100%;
		border: 0;
		border-radius: 0;
	}

	.dating-promo-interstitial__close {
		top: max(12px, env(safe-area-inset-top));
		right: 12px;
	}
}

@media (max-width: 380px) {
	.dating-promo__link--inline .dating-promo__visual {
		width: 105px;
		min-height: 105px;
	}

	.dating-promo__text {
		padding: 12px;
	}

	.dating-promo__title {
		font-size: 15px;
	}

	.dating-promo__body {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dating-promo *,
	.dating-promo-sticky,
	.dating-promo-interstitial,
	.dating-promo-interstitial__dialog {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}


/* Five fixed creative systems. Card geometry deliberately mirrors .thumb exactly. */
.dating-promo__activity {
	display: inline-flex;
	width: max-content;
	align-items: center;
	gap: 6px;
	padding: 4px 7px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(9, 13, 14, .82);
	color: #f7fbfd;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .025em;
	white-space: nowrap;
}

.dating-promo__visual > .dating-promo__activity {
	position: absolute;
	z-index: 7;
	right: 8px;
	bottom: 8px;
	pointer-events: none;
}

.dating-promo__intro > .dating-promo__activity {
	margin-top: 8px;
}

.dating-promo__activity .dating-promo__status {
	width: 7px;
	height: 7px;
	border: 0;
	background: #1fbf83;
	box-shadow: 0 0 0 3px rgba(31, 191, 131, .16);
}

.dating-promo__chat-preview {
	display: none;
}

/* The listing insertion occupies exactly the same external frame as a real video:
   56% media + 8px gap + 18px title + 8px gap + 17px metadata = media + 51px. */
.dating-promo--format-card .dating-promo__link--card {
	display: flex;
	height: auto;
	min-height: 0;
	overflow: hidden;
	flex-direction: column;
	border: 0;
	border-radius: 6px;
	background: #101419;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

.dating-promo--format-card .dating-promo__link--card:hover,
.dating-promo--format-card .dating-promo__link--card:focus-visible {
	border: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__visual {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	min-height: 0;
	overflow: hidden;
	flex: 0 0 auto;
	padding-bottom: 56%;
	border: 0;
	border-radius: 6px 6px 0 0;
	aspect-ratio: auto;
	background: #161d24;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center center;
}

/* 8 + 36,4 + 8 + 16,8 = 69,2 px : la hauteur exacte du bloc texte d'une
   vignette video depuis la couche HOME-V2 de gold.min.css, qui a fait passer
   .thumb .title en 13px/1.4 sur deux lignes. Le calcul a 51 px datait d'avant
   ce changement ; il laissait la cellule Dating 18 px plus courte que ses
   voisines et desalignait toute la rangee. */
.dating-promo--format-card .dating-promo__link--card .dating-promo__text {
	display: grid;
	height: 69.2px;
	min-height: 69.2px;
	max-height: 69.2px;
	min-width: 0;
	padding: 8px 8px 0;
	grid-template-columns: minmax(0, 1fr);
	/*
	 * Les rangees etaient figees a 36,4 px — deux lignes de titre — pour que la
	 * cellule garde la hauteur de ses voisines. La hauteur totale est bien la
	 * contrainte, mais elle n'oblige pas a reserver la place ligne par ligne :
	 * un pseudo tient sur une ligne, et les 18 px de la seconde s'ouvraient
	 * ENTRE le pseudo et le bouton, comme un double saut de ligne.
	 *
	 * Les rangees suivent desormais leur contenu et le bloc se cale en haut :
	 * le pseudo tombe exactement ou tombe le titre d'une vignette voisine, et
	 * le jeu restant passe sous le bouton, ou il ne se voit pas. La hauteur du
	 * bloc ne change pas d'un pixel — la rangee reste alignee.
	 */
	grid-template-rows: auto auto;
	row-gap: 8px;
	align-items: start;
	align-content: start;
	justify-content: initial;
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__title {
	display: -webkit-box;
	height: auto;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: var(--thumb-text-color, #fff);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__body {
	display: none;
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__cta {
	display: flex;
	height: 17px;
	min-height: 0;
	max-width: 100%;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #3cbff0;
	font-size: 11px;
	font-weight: 800;
	line-height: 17px;
	letter-spacing: 0;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.dating-promo--format-card .dating-promo__link--card .dating-promo__cta::after {
	margin-left: 5px;
	content: "›";
	font-size: 15px;
	line-height: 1;
}

.dating-promo--format-card .dating-promo__bubble {
	z-index: 6;
	max-width: calc(100% - 16px);
	padding: 5px 7px;
	font-size: 9px;
	line-height: 1.1;
}

.dating-promo--format-card .dating-promo__visual--multi .dating-promo__image--multi {
	border: 0;
}

/* 1. Private: one dominant portrait, severe navy/cyan treatment. */
.dating-promo--variant-private {
	--dating-accent: #3cbff0;
	--dating-accent-2: #202833;
	--dating-surface: #101419;
	--dating-surface-2: #161d24;
}

.dating-promo--variant-private .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-private .dating-promo__group {
	border-radius: 6px;
	border-inline-start: 3px solid #3cbff0;
	background: linear-gradient(135deg, #161d24, #0b1015 72%);
}

.dating-promo--variant-private .dating-promo__cta {
	border-radius: 4px;
	background: #00c1f3;
	box-shadow: 0 8px 22px rgba(0, 193, 243, .24);
	text-transform: uppercase;
}

.dating-promo--format-card.dating-promo--variant-private .dating-promo__visual::after {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(145deg, transparent 42%, rgba(6, 7, 8, .72));
	content: "";
	pointer-events: none;
}

.dating-promo--format-card.dating-promo--variant-private .dating-promo__bubble {
	right: auto;
	bottom: 8px;
	left: 8px;
	border-color: rgba(60, 191, 240, .55);
	border-radius: 2px;
	background: rgba(16, 20, 25, .88);
	color: #d8f6ff;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* 2. Community: a three-member editorial mosaic with a blue masthead. */
.dating-promo--variant-community {
	--dating-accent: #75dcff;
	--dating-accent-2: #00c1f3;
	--dating-surface: #101419;
	--dating-surface-2: #202833;
	--dating-muted: #c7d5de;
}

.dating-promo--variant-community .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-community .dating-promo__group {
	border-top: 3px solid #75dcff;
	border-radius: 2px 2px 14px 14px;
	background: linear-gradient(90deg, rgba(117, 220, 255, .09), transparent 52%), #101419;
}

.dating-promo--variant-community .dating-promo__bubble {
	top: 9px;
	right: auto;
	bottom: auto;
	left: 9px;
	border: 0;
	border-radius: 2px;
	background: rgba(117, 220, 255, .94);
	color: #07131a;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.dating-promo--variant-community .dating-promo__cta {
	border: 1px solid #75dcff;
	border-radius: 4px;
	background: transparent;
	color: #d8f6ff;
}

.dating-promo--format-card.dating-promo--variant-community .dating-promo__image--multi:nth-of-type(1) {
	z-index: 1;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	width: 64%;
	height: 100%;
}

.dating-promo--format-card.dating-promo--variant-community .dating-promo__image--multi:nth-of-type(2) {
	z-index: 1;
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	width: 35%;
	height: 49%;
}

.dating-promo--format-card.dating-promo--variant-community .dating-promo__image--multi:nth-of-type(3) {
	z-index: 1;
	top: auto;
	right: 0;
	bottom: 0;
	left: auto;
	width: 35%;
	height: 49%;
}

.dating-promo--format-card.dating-promo--variant-community .dating-promo__activity {
	right: 8px;
	bottom: 8px;
	left: auto;
}

/* 3. Dialogue: portrait plus an actual compact chat composition in Twinks blue. */
.dating-promo--variant-dialogue {
	--dating-accent: #3cbff0;
	--dating-accent-2: #75dcff;
	--dating-surface: #101419;
	--dating-surface-2: #202833;
	--dating-muted: #c1cbd0;
}

.dating-promo--variant-dialogue .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-dialogue .dating-promo__group {
	border-color: rgba(60, 191, 240, .46);
	border-radius: 18px 18px 18px 5px;
	background: radial-gradient(circle at 12% 0, rgba(60, 191, 240, .2), transparent 42%), #101419;
}

.dating-promo--variant-dialogue .dating-promo__bubble {
	border-color: rgba(117, 220, 255, .55);
	border-radius: 16px 16px 4px 16px;
	background: rgba(14, 21, 27, .92);
}

.dating-promo--variant-dialogue .dating-promo__cta {
	border-radius: 18px 18px 18px 5px;
	background: #00c1f3;
	box-shadow: 0 8px 20px rgba(0, 121, 153, .32);
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__visual {
	background: linear-gradient(145deg, #202833, #101419);
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__image {
	right: auto;
	width: 57%;
	object-position: center center;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__visual::after {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 43%;
	width: 18%;
	background: linear-gradient(90deg, transparent, #202833 86%);
	content: "";
	pointer-events: none;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__bubble {
	top: 8px;
	right: 8px;
	bottom: auto;
	left: auto;
	border-radius: 10px 10px 3px 10px;
	background: rgba(117, 220, 255, .94);
	color: #07131a;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-preview {
	position: absolute;
	z-index: 5;
	top: 35%;
	right: 6%;
	display: grid;
	width: 36%;
	gap: 7px;
	pointer-events: none;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip {
	display: block;
	max-width: 100%;
	padding: 6px 7px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .15);
	background: #202833;
	box-shadow: 0 5px 12px rgba(0, 0, 0, .24);
	color: #fff;
	font-size: 9px;
	font-weight: 750;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip--1 {
	margin-right: 12%;
	border-radius: 10px 10px 10px 3px;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip--2 {
	margin-left: 8%;
	border-radius: 10px 10px 3px 10px;
	background: #00c1f3;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__activity {
	right: auto;
	bottom: 8px;
	left: 8px;
}

/* 4. Local: three overlapping portrait cards around a real, sanitized place label. */
.dating-promo--variant-local {
	--dating-accent: #3cbff0;
	--dating-accent-2: #202833;
	--dating-surface: #101419;
	--dating-surface-2: #202833;
}

.dating-promo--variant-local .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-local .dating-promo__group {
	border-radius: 10px;
	border-color: rgba(60, 191, 240, .45);
	background: linear-gradient(120deg, rgba(32, 40, 51, .16), transparent 45%), #101419;
}

.dating-promo--variant-local .dating-promo__bubble {
	z-index: 6;
	border-radius: 3px;
	background: rgba(16, 19, 21, .9);
	color: #d8f6ff;
}

.dating-promo--variant-local .dating-promo__cta {
	border-radius: 4px;
	background: linear-gradient(110deg, #00c1f3, #202833);
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__visual {
	background:
		linear-gradient(135deg, rgba(60, 191, 240, .16), transparent 52%),
		#161d24;
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__visual::before {
	position: absolute;
	z-index: 5;
	inset: 7px;
	border: 1px solid rgba(117, 220, 255, .42);
	border-radius: 3px;
	content: "";
	pointer-events: none;
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__image--multi {
	top: 9%;
	bottom: auto;
	height: 82%;
	border: 2px solid rgba(216, 246, 255, .76);
	border-radius: 5px;
	box-shadow: 0 9px 20px rgba(0, 0, 0, .42);
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__image--multi:nth-of-type(1) {
	z-index: 4;
	top: 5%;
	right: auto;
	left: 29%;
	width: 42%;
	height: 90%;
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__image--multi:nth-of-type(2) {
	z-index: 2;
	right: auto;
	left: 5%;
	width: 35%;
	transform: rotate(-2deg);
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__image--multi:nth-of-type(3) {
	z-index: 2;
	right: 5%;
	left: auto;
	width: 35%;
	transform: rotate(2deg);
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__bubble {
	top: 8px;
	right: auto;
	bottom: auto;
	left: 8px;
	max-width: 45%;
	border-color: rgba(117, 220, 255, .52);
	background: rgba(14, 18, 21, .9);
}

.dating-promo--format-card.dating-promo--variant-local .dating-promo__activity {
	right: 8px;
	bottom: 8px;
	left: auto;
}

/* 5. Inbox: a compact three-profile social inbox in navy and cyan. */
.dating-promo--variant-inbox {
	--dating-accent: #3cbff0;
	--dating-accent-2: #202833;
	--dating-surface: #101419;
	--dating-surface-2: #202833;
	--dating-muted: #c5ced4;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__link--card {
	background: #101419;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__visual {
	background:
		linear-gradient(135deg, rgba(32, 40, 51, .18), transparent 48%),
		radial-gradient(circle at 92% 8%, rgba(60, 191, 240, .18), transparent 38%),
		#101419;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__bubble {
	z-index: 7;
	top: 7px;
	right: auto;
	bottom: auto;
	left: 7px;
	max-width: calc(100% - 88px);
	border-color: rgba(60, 191, 240, .55);
	border-radius: 4px;
	background: rgba(15, 21, 26, .94);
	color: #d8f6ff;
	letter-spacing: .025em;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__activity {
	top: 7px;
	right: 7px;
	bottom: auto;
	left: auto;
	padding: 4px 6px;
	background: rgba(12, 18, 22, .94);
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox {
	position: absolute;
	z-index: 5;
	inset: 31px 7px 7px;
	display: grid;
	min-width: 0;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 3px;
	pointer-events: none;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row {
	display: flex;
	min-width: 0;
	min-height: 0;
	align-items: center;
	gap: 5px;
	padding: 2px 5px 2px 3px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 5px;
	background: rgba(23, 32, 41, .94);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
	transform: none;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row:nth-child(2),
.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row:nth-child(3) {
	transform: none;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row:nth-child(2) {
	background: rgba(19, 28, 35, .94);
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row:nth-child(3) {
	background: rgba(15, 23, 29, .94);
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-avatar {
	position: static !important;
	inset: auto !important;
	display: block;
	width: auto !important;
	height: 100% !important;
	max-height: 24px;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(232, 239, 242, .88);
	border-radius: 50%;
	box-shadow: 0 0 0 1px #1fbf83;
	object-fit: cover;
	object-position: center center;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-message {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	color: #f4f6f7;
	font-size: 9px;
	font-weight: 750;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row:first-child::after {
	display: inline-flex;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #00c1f3;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	color: #fff;
	content: "1";
	font-size: 8px;
	font-weight: 900;
	line-height: 1;
}

/* Late rules intentionally win over the historical desktop horizontal card. */
@media (max-width: 460px) {
	/* Les vignettes video du site passent elles-memes en 66 % a cette
	   largeur (gold.min.css) : rester a 56 % rendait la cellule Dating
	   visiblement plus courte que ses voisines. */
	.dating-promo--format-card .dating-promo__link--card .dating-promo__visual {
		padding-bottom: 66%;
	}

	.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-preview {
		top: 32%;
		right: 5%;
		width: 38%;
		gap: 5px;
	}

	.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip {
		padding: 5px 6px;
		font-size: 8px;
	}

	.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox {
		inset: 29px 6px 6px;
		gap: 2px;
	}

	.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row {
		gap: 4px;
		padding: 1px 4px 1px 2px;
	}

	.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-message {
		font-size: 8px;
	}
}


/* Top Dating spot: an organic member-presence row, never a banner. */
.dating-promo--format-topcam {
	width: 100%;
	height: 130px;
	min-height: 0;
	max-height: 130px;
	overflow: hidden;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #f2f4f5;
}

.dating-promo--format-topcam .dating-promo__presence {
	display: grid;
	width: 100%;
	height: 130px;
	min-height: 0;
	max-height: 130px;
	padding: 5px 0;
	overflow: hidden;
	grid-template-columns: minmax(125px, 170px) minmax(0, 1fr) minmax(82px, 110px);
	align-items: center;
	gap: clamp(8px, 1vw, 14px);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.dating-promo--format-topcam .dating-promo__presence::before,
.dating-promo--format-topcam .dating-promo__presence::after {
	display: none;
	content: none;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-heading,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-more {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	transform: none;
}

.dating-promo--format-topcam .dating-promo__presence-heading {
	display: flex;
	min-width: 0;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	overflow: hidden;
}

.dating-promo--format-topcam .dating-promo__presence-label,
.dating-promo--format-topcam .dating-promo__presence-title {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-topcam .dating-promo__presence-label {
	margin-bottom: 6px;
	color: #3cbff0;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .075em;
	text-transform: uppercase;
}

.dating-promo--format-topcam .dating-promo__presence-title {
	margin: 0;
	color: #f5f6f7;
	font-size: clamp(15px, 1.45vw, 19px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.015em;
}

.dating-promo--format-topcam .dating-promo__presence-profiles {
	display: flex;
	height: 100%;
	min-width: 0;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(5px, .65vw, 10px);
	overflow: hidden;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile {
	display: flex;
	width: clamp(66px, 5.7vw, 78px);
	min-width: 0;
	height: 108px;
	flex: 1 1 66px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	overflow: visible;
}

.dating-promo--format-topcam .dating-promo__presence-avatar {
	position: relative;
	display: block;
	width: clamp(64px, 5.65vw, 76px);
	max-width: 76px;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
}

.dating-promo--format-topcam .dating-promo__presence-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 2px solid rgba(225, 229, 232, .78);
	border-radius: 50%;
	background: #202833;
	box-shadow: none;
	object-fit: cover;
	object-position: center 25%;
	transition: border-color .16s ease, transform .16s ease;
}

.dating-promo--format-topcam .dating-promo__presence-status {
	position: absolute;
	z-index: 2;
	right: 2px;
	bottom: 3px;
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid #101419;
	border-radius: 50%;
	background: #25c584;
	box-shadow: none;
}

.dating-promo--format-topcam .dating-promo__presence-name {
	display: block;
	width: 100%;
	overflow: hidden;
	color: #e9ecee;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-topcam .dating-promo__presence-meta {
	display: block;
	width: 100%;
	overflow: hidden;
	color: #8f989f;
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-topcam .dating-promo__presence-chat-indicator {
	position: absolute;
	z-index: 3;
	top: 0;
	right: -2px;
	display: none;
	width: 17px;
	height: 14px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid #101419;
	border-radius: 8px 8px 8px 3px;
	background: #3cbff0;
	box-shadow: none;
	color: #101419;
	font-size: 0;
	line-height: 1;
}

.dating-promo--format-topcam .dating-promo__presence-chat-indicator::before {
	content: "\2022\2022\2022";
	font-size: 7px;
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-more {
	display: inline-flex;
	max-width: 126px;
	align-items: center;
	justify-content: flex-end;
	padding: 7px 0;
	color: #75dcff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.15;
	text-align: right;
	white-space: normal;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-more::after {
	margin-inline-start: 6px;
	content: "\203A";
	font-size: 19px;
	font-weight: 400;
	line-height: .7;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile:focus-visible,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-more:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-more:focus-visible {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	transform: none;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile:focus-visible,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-more:focus-visible {
	outline: 2px solid rgba(60, 191, 240, .8);
	outline-offset: 3px;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile:hover .dating-promo__presence-image,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile:focus-visible .dating-promo__presence-image {
	border-color: #75dcff;
	transform: translateY(-2px);
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-more:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-more:focus-visible {
	color: #75dcff;
}

/* Online: round portraits and a familiar green presence dot. */
.dating-promo--format-topcam.dating-promo--presence-online .dating-promo__presence-status {
	background: #25c584;
}

/* Chat: softly squared portraits and a compact cyan conversation marker. */
.dating-promo--format-topcam.dating-promo--presence-chat .dating-promo__presence-avatar,
.dating-promo--format-topcam.dating-promo--presence-chat .dating-promo__presence-image {
	border-radius: 18px;
}

.dating-promo--format-topcam.dating-promo--presence-chat .dating-promo__presence-status {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #25c584;
}

.dating-promo--format-topcam.dating-promo--presence-chat .dating-promo__presence-chat-indicator {
	display: flex;
}

.dating-promo--format-topcam.dating-promo--presence-chat .dating-promo__presence-label {
	color: #3cbff0;
}

/* Nearby: round portraits and a discreet blue location-pin treatment. */
.dating-promo--format-topcam.dating-promo--presence-nearby .dating-promo__presence-status {
	right: 3px;
	bottom: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50% 50% 50% 0;
	background: #75dcff;
	transform: rotate(-45deg);
}

.dating-promo--format-topcam.dating-promo--presence-nearby .dating-promo__presence-status::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #101419;
	content: "";
}

.dating-promo--format-topcam.dating-promo--presence-nearby .dating-promo__presence-label,
.dating-promo--format-topcam.dating-promo--presence-nearby .dating-promo__presence-more {
	color: #75dcff;
}

.dating-promo--format-topcam[dir="rtl"] .dating-promo__presence-heading {
	align-items: flex-start;
	text-align: right;
}

.dating-promo--format-topcam[dir="rtl"] .dating-promo__presence-more {
	justify-content: flex-start;
	text-align: left;
}

.dating-promo--format-topcam[dir="rtl"] .dating-promo__presence-more::after {
	content: "\2039";
}

@media (min-width: 761px) and (max-width: 900px) {
	.dating-promo--format-topcam .dating-promo__presence {
		grid-template-columns: minmax(110px, 135px) minmax(0, 1fr) minmax(72px, 90px);
		gap: 6px;
	}

	.dating-promo--format-topcam .dating-promo__presence-profiles {
		gap: 5px;
	}

	.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile {
		width: 60px;
		flex: 1 1 60px;
	}

	.dating-promo--format-topcam .dating-promo__presence-avatar {
		width: 60px;
		max-width: 60px;
	}
}

@media (max-width: 760px) {
	.dating-promo--format-topcam,
	.dating-promo--format-topcam .dating-promo__presence {
		height: 130px;
		max-height: 130px;
	}

	.dating-promo--format-topcam .dating-promo__presence {
		padding: 2px 0 4px;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 31px minmax(0, 1fr);
		gap: 2px 10px;
	}

	.dating-promo--format-topcam .dating-promo__presence-heading {
		display: flex;
		height: 31px;
		min-width: 0;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		grid-row: 1;
		grid-column: 1;
	}

	.dating-promo--format-topcam .dating-promo__presence-label {
		width: auto;
		margin: 0;
		flex: 0 0 auto;
		font-size: 8px;
	}

	.dating-promo--format-topcam .dating-promo__presence-title {
		width: auto;
		min-width: 0;
		flex: 0 1 auto;
		font-size: 13px;
	}

	.dating-promo--format-topcam .dating-promo__presence-profiles {
		height: 93px;
		gap: 11px;
		padding: 0 1px;
		grid-row: 2;
		grid-column: 1 / -1;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.dating-promo--format-topcam .dating-promo__presence-profiles::-webkit-scrollbar {
		display: none;
	}

	.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile {
		width: 64px;
		height: 91px;
		flex: 0 0 64px;
		gap: 4px;
		scroll-snap-align: start;
	}

	.dating-promo--format-topcam .dating-promo__presence-avatar {
		width: 62px;
		max-width: 62px;
	}

	.dating-promo--format-topcam .dating-promo__presence-name {
		font-size: 10px;
	}

	.dating-promo--format-topcam .dating-promo__presence-meta {
		font-size: 8px;
	}

	.dating-promo.dating-promo--format-topcam .dating-promo__presence-more {
		max-width: 104px;
		padding: 4px 0;
		grid-row: 1;
		grid-column: 2;
		font-size: 10px;
	}
}

@media (max-width: 430px) {
	.dating-promo--format-topcam .dating-promo__presence-title {
		max-width: 170px;
	}

	.dating-promo--format-topcam .dating-promo__presence-profiles {
		gap: 10px;
	}

	.dating-promo.dating-promo--format-topcam .dating-promo__presence-more {
		max-width: 88px;
	}
}

@media (max-width: 350px) {
	.dating-promo--format-topcam .dating-promo__presence-label {
		display: none;
	}

	.dating-promo--format-topcam .dating-promo__presence-title {
		max-width: 150px;
	}

	.dating-promo--format-topcam .dating-promo__presence-profiles {
		gap: 9px;
	}

	.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile {
		width: 60px;
		flex-basis: 60px;
	}

	.dating-promo--format-topcam .dating-promo__presence-avatar {
		width: 58px;
		max-width: 58px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dating-promo--format-topcam .dating-promo__presence-image {
		transition: none;
	}
}

/* ==========================================================================
   COUCHE v12 — bandeau dating de tete de page (spot J)

   17 853 impressions, 3,16 % de clics : deuxieme spot du dispositif en volume,
   et le PREMIER bloc commercial que voit un visiteur. Trois reprises et deux
   nouvelles mises en page.

   1. LE BOUTON REMONTE. Il etait un lien gris a l'extremite droite, a plus de
      1 200 px du point ou l'oeil entre dans le bandeau. Il rejoint l'accroche,
      a gauche, et devient un bouton plein.

   2. LA LIGNE SOUS CHAQUE NOM porte desormais l'age au lieu de repeter huit
      fois le statut deja annonce en tete (JS).

   3. LES VISAGES SE RESSEMBLENT. Le mode « en ligne » les affichait ronds, le
      mode « dispo » carres a coins arrondis : deux blocs qui ne se
      reconnaissaient pas d'un mode a l'autre. Forme unique.
   ========================================================================== */

/* --- 1. Le bouton d'action ------------------------------------------------ */

.dating-promo.dating-promo--format-topcam .dating-promo__presence-heading .dating-promo__presence-more {
	max-width: none;
	margin-top: 10px;
	padding: 9px 16px;
	border-radius: 999px;
	background: linear-gradient(110deg, #75dcff, #00c1f3);
	box-shadow: 0 6px 18px rgba(60, 191, 240, .22);
	color: #07131a;
	font-size: 12px;
	font-weight: 900;
	justify-content: center;
	white-space: nowrap;
}

.dating-promo.dating-promo--format-topcam .dating-promo__presence-heading .dating-promo__presence-more:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-heading .dating-promo__presence-more:focus-visible {
	background: linear-gradient(110deg, #75dcff, #3cbff0);
	box-shadow: 0 8px 22px rgba(60, 191, 240, .3);
	color: #07131a;
}

/* La colonne de gauche cesse d'etre une etiquette : elle porte l'accroche ET
   l'action, elle a donc besoin d'une largeur a elle. */
.dating-promo--format-topcam .dating-promo__presence-heading {
	min-width: 172px;
	flex: 0 0 auto;
	padding-inline-end: 18px;
}

/* --- 3. Une seule forme de visage ---------------------------------------- */

.dating-promo--format-topcam .dating-promo__presence-image {
	border-radius: 18px;
}

/* --- Mise en page « proximite » : l'angle du nombre et de la distance -----
   Les visages gagnent un tiers de taille — ce sont eux le produit — et
   l'accroche passe devant, en gras, parce que « autour de Nantes » est
   l'argument le plus fort dont ce bloc dispose. */

.dating-promo--topcam-proximite .dating-promo__presence-avatar {
	width: clamp(80px, 7vw, 96px);
	max-width: 96px;
}

.dating-promo--topcam-proximite .dating-promo__presence-title {
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -.01em;
}

.dating-promo--topcam-proximite .dating-promo__presence-heading {
	min-width: 208px;
}

.dating-promo--topcam-proximite .dating-promo__presence-name {
	font-size: 12px;
	font-weight: 800;
}

/* --- Mise en page « profil » : l'angle de la personne ---------------------
   Un seul homme occupe la place. Son portrait, son prenom, son age, sa
   phrase, et un bouton qui nomme le geste. Les autres se reduisent a une file
   de visages qui dit qu'il y en a d'autres sans voler la vedette. */

.dating-promo--format-topcam .dating-promo__presence--profil {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	gap: 20px;
	overflow: hidden;
}

.dating-promo__profil-main {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-items: center;
	gap: 16px;
}

.dating-promo__profil-shot {
	position: relative;
	display: block;
	width: 104px;
	height: 104px;
	flex: 0 0 auto;
}

.dating-promo__profil-image {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid rgba(225, 229, 232, .78);
	border-radius: 20px;
	background: #202833;
	object-fit: cover;
}

.dating-promo__profil-status {
	position: absolute;
	right: 6px;
	bottom: 6px;
}

.dating-promo__profil-body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
}

.dating-promo__profil-who {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--general-color, #fff);
	font-size: 21px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La phrase qu'il a ecrite : c'est le seul endroit du dispositif ou un
   profil parle. Elle tient sur une ligne, tronquee plutot que repliee. */
.dating-promo__profil-line {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--main-grey-color, #b8b8b8);
	font-size: 13px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__profil-cta {
	display: inline-flex;
	min-height: 34px;
	margin-top: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	align-items: center;
	background: linear-gradient(110deg, #75dcff, #00c1f3);
	box-shadow: 0 6px 18px rgba(60, 191, 240, .22);
	color: #07131a;
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}

.dating-promo__profil-main:hover .dating-promo__profil-cta,
.dating-promo__profil-main:focus-visible .dating-promo__profil-cta {
	background: linear-gradient(110deg, #75dcff, #3cbff0);
}

.dating-promo__profil-rest {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.dating-promo__profil-other {
	display: block;
	width: 62px;
	height: 62px;
	flex: 0 0 auto;
}

.dating-promo__profil-thumb {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid rgba(225, 229, 232, .55);
	border-radius: 14px;
	background: #202833;
	object-fit: cover;
}

/* Il se repliait sur deux lignes dans 96 px, colle au bord du conteneur. */
.dating-promo__profil-more {
	display: inline-flex;
	max-width: 142px;
	min-width: 118px;
	padding-inline-start: 4px;
	align-items: center;
	color: #75dcff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

/* --- Ecrans etroits ------------------------------------------------------- */

@media (max-width: 900px) {
	/* La file des autres est le premier element sacrifiable : elle ne porte
	   ni nom ni phrase, seulement l'idee qu'il y en a d'autres. */
	.dating-promo__profil-rest {
		display: none;
	}
}

@media (max-width: 560px) {
	.dating-promo__profil-shot {
		width: 84px;
		height: 84px;
	}

	.dating-promo__profil-who {
		font-size: 17px;
	}

	.dating-promo__profil-line {
		font-size: 12px;
	}

	.dating-promo--topcam-proximite .dating-promo__presence-title {
		font-size: 16px;
	}
}

/*
 * Le nom et l'age ne doivent JAMAIS se laisser comprimer. L'element de profil
 * a une hauteur fixe et le visage est le seul enfant elastique : agrandir le
 * visage ecrasait les deux lignes de texte a un pixel — elles etaient bien la,
 * illisibles. C'est la cause, pas le symptome.
 */
.dating-promo--format-topcam .dating-promo__presence-name,
.dating-promo--format-topcam .dating-promo__presence-meta {
	flex: 0 0 auto;
}

/* « proximite » : le visage gagne un tiers, l'element gagne la hauteur qu'il
   faut pour que le nom et l'age tiennent encore.
   82 (visage) + 4 + 14 (nom) + 4 + 12 (age) = 116 sur les 120 disponibles. */
.dating-promo--topcam-proximite .dating-promo__presence-profile {
	width: clamp(74px, 6.2vw, 82px);
	height: 118px;
	flex: 1 1 74px;
	gap: 4px;
}

.dating-promo--topcam-proximite .dating-promo__presence-avatar {
	width: clamp(74px, 6.2vw, 82px);
	max-width: 82px;
}

.dating-promo--topcam-proximite .dating-promo__presence-name {
	font-size: 12px;
	line-height: 14px;
}

.dating-promo--topcam-proximite .dating-promo__presence-meta {
	font-size: 10px;
	line-height: 12px;
}

/* ==========================================================================
   COUCHE v12.1 — le bandeau de tete debordait, et portait des bordures
   qu'il n'avait pas demandees

   1. LE DEBORDEMENT. Huit visages reclamaient 584 px dans un bandeau de 370 :
      le dernier sortait de 212 px, coupe net par « overflow: hidden ». Le
      nombre de visages s'ajuste desormais a la largeur.

   2. LES BORDURES. Toute nouvelle classe posee sur un « dating-promo__link »
      herite du chrome de carte : cadre, fond degrade, ombre, coin asymetrique
      — et, quand la variante creative tiree est « private », un liistere
      COLORE de 3 px a gauche. Mes classes de la mise en page « profil » n'en
      avaient pas ete exemptees. C'est corrige a la source, pour toutes.

   3. LES PHOTOS. Un cerne gris clair de 2 px, etranger au reste du site,
      entourait chaque visage. Il cede la place a un filet sombre uniforme.
   ========================================================================== */

/* --- 1. Autant de visages que la largeur en autorise --------------------- */

@media (max-width: 480px) {
	.dating-promo--format-topcam .dating-promo__presence-profile:nth-child(n+5) {
		display: none;
	}
}

@media (min-width: 481px) and (max-width: 700px) {
	.dating-promo--format-topcam .dating-promo__presence-profile:nth-child(n+7) {
		display: none;
	}
}

@media (min-width: 701px) and (max-width: 1000px) {
	.dating-promo--format-topcam .dating-promo__presence-profile:nth-child(n+8) {
		display: none;
	}
}

/* --- 2. Le chrome de carte n'a rien a faire dans ce bandeau -------------- */

/*
 * Specificite volontairement portee a quatre classes : la regle qui pose le
 * lisere colore en vaut trois, et elle ne vise pas ces elements par leur nom
 * mais par leur classe generique de lien.
 */
.dating-promo.dating-promo--format-topcam .dating-promo__profil-main,
.dating-promo.dating-promo--format-topcam .dating-promo__profil-other,
.dating-promo.dating-promo--format-topcam .dating-promo__profil-more,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-profile,
.dating-promo.dating-promo--format-topcam .dating-promo__presence-heading {
	border: 0;
	border-inline-start: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* --- 3. Un seul traitement de photo, sobre ------------------------------- */

.dating-promo--format-topcam .dating-promo__presence-image,
.dating-promo--format-topcam .dating-promo__profil-image,
.dating-promo--format-topcam .dating-promo__profil-thumb {
	border: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* --- « profil » : la carte redevient une carte, avec des marges ---------- */

/*
 * Le bloc n'avait aucun padding : le texte touchait le cadre herite. Il
 * assume desormais son fond, discret, et respire.
 */
.dating-promo.dating-promo--format-topcam .dating-promo__profil-main {
	padding: 10px 16px 10px 10px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
}

.dating-promo.dating-promo--format-topcam .dating-promo__profil-main:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__profil-main:focus-visible {
	background: rgba(255, 255, 255, .06);
}

/*
 * Le lien de droite ne ressemblait pas a un bouton : deux lignes de 11 px
 * collees au bord. Il devient un bouton secondaire — cerne, pas plein, pour
 * ne pas concurrencer « Ecrire a X » qui est l'action principale.
 */
.dating-promo.dating-promo--format-topcam .dating-promo__profil-more {
	min-width: 0;
	max-width: none;
	min-height: 36px;
	padding: 10px 15px;
	border: 1px solid rgba(60, 191, 240, .55);
	border-radius: 999px;
	align-items: center;
	justify-content: center;
	color: #75dcff;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.dating-promo.dating-promo--format-topcam .dating-promo__profil-more:hover,
.dating-promo.dating-promo--format-topcam .dating-promo__profil-more:focus-visible {
	border-color: #75dcff;
	background: rgba(60, 191, 240, .12);
	color: #75dcff;
}

/* Le bandeau ne doit jamais pousser la page : c'est le premier bloc de
   l'ecran, un depassement s'y voit immediatement. */
.dating-promo--format-topcam,
.dating-promo--format-topcam .dating-promo__presence {
	max-width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   COUCHE v13 — carte dating de la liste video (spot K)

   17 609 impressions, 2,04 %. Le mobile y pese 78 % du trafic et convertit
   mieux que le desktop : c'est donc la lisibilite sur petit ecran qui decide,
   et elle etait mauvaise. Le bouton tenait en 11 px, la ville en 9, et les
   trois lignes de la boite de reception en 8 — sur des avatars de 20 px.

   S'y ajoute un sixieme habillage, « duo », decrit plus bas.
   ========================================================================== */

/* --- Ce qu'on lit en premier doit etre lisible --------------------------- */

.dating-promo--format-card .dating-promo__link--card .dating-promo__cta {
	font-size: 13px;
	font-weight: 800;
}

/* La bulle porte la VILLE en habillage « local » : c'est l'argument le plus
   concret de la carte, il ne peut pas etre le plus petit texte. */
.dating-promo--format-card .dating-promo__link--card .dating-promo__bubble {
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 800;
}

/* --- Boite de reception : deux conversations, lisibles ------------------- */

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox {
	inset: 34px 8px 8px;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-row {
	gap: 8px;
	padding: 6px 9px 6px 6px;
	border-radius: 9px;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-avatar {
	width: 34px !important;
	height: 34px !important;
	flex: 0 0 34px;
	border-width: 1px;
}

.dating-promo--format-card.dating-promo--variant-inbox .dating-promo__inbox-message {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* --- « duo » : deux visages, une question, deux cibles -------------------
   Les cinq autres habillages presentent une offre a accepter. Celui-ci pose un
   choix, et chaque moitie mene a son propre profil. */

.dating-promo--variant-duo .dating-promo__duo {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 14px;
	background: linear-gradient(150deg, #161d24, #0b1015 72%);
}

.dating-promo__duo-question {
	display: block;
	color: var(--general-color, #fff);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: center;
}

.dating-promo__duo-faces {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.dating-promo__duo-side {
	position: relative;
	display: block;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: #161d24;
	box-shadow: none;
	text-decoration: none;
}

.dating-promo__duo-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Le prenom se pose SUR la photo : sur une carte de liste, chaque ligne de
   texte hors image est une ligne prise a la hauteur des visages. */
.dating-promo__duo-name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 16px 8px 7px;
	background: linear-gradient(to top, rgba(6, 8, 10, .92), transparent);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.15;
}

.dating-promo__duo-side:hover .dating-promo__duo-image,
.dating-promo__duo-side:focus-visible .dating-promo__duo-image {
	transform: scale(1.03);
	transition: transform .22s ease;
}

.dating-promo__duo-cta {
	display: block;
	padding: 10px 12px;
	border-radius: 999px;
	background: linear-gradient(110deg, #75dcff, #00c1f3);
	color: #07131a;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

.dating-promo--variant-duo .dating-promo__duo:hover .dating-promo__duo-cta {
	background: linear-gradient(110deg, #75dcff, #3cbff0);
}

@media (prefers-reduced-motion: reduce) {
	.dating-promo__duo-side:hover .dating-promo__duo-image {
		transform: none;
	}
}

/* ==========================================================================
   COUCHE v13.1 — le lisere « private » n'a rien a faire en plein ecran

   La regle qui pose l'habillage « private » vise TOUT « dating-promo__link »
   sauf celui de la carte de grille :

     .dating-promo--variant-private .dating-promo__link:not(.--card)
        border-inline-start: 3px solid #3cbff0;

   Elle a ete ecrite pour de petits blocs, ou un lisere de 3 px signe une
   bordure de carte. Le format « reel » — la diapositive des Reels et
   l'interstitiel — occupe un ecran entier : le meme lisere y devient une barre
   coloree de 3 px sur 720 px de haut, contre le bord gauche, qui ne signifie
   rien. Meme constat que sur le bandeau de tete, ou il avait deja ete retire.

   Le fond degrade et le rayon de 6 px partent avec : sur une creation dont
   l'image occupe toute la surface, ils ne se voient pas et le rayon jure avec
   les 22 px de la boite de dialogue.
   ========================================================================== */

.dating-promo--variant-private .dating-promo__link--reel {
	border-inline-start: 0;
	border-radius: 0;
	background: none;
}

/* ==========================================================================
   COUCHE v14 — les creations du reseau partenaire presentent quelqu'un

   Le reseau partenaire n'expose qu'un identifiant et une photo. Ses six
   habillages affichaient donc tous la MEME accroche generique — « Une
   rencontre discrete a Nantes ? » — la ou « meet » nomme quelqu'un. Aucune de
   ses creations ne presentait de personne, et il est en retard sur toutes les
   surfaces : 1,30 % contre 2,80 % sur l'encart collant, 14,6 % contre 18,1 %
   sur l'interstitiel.

   Trois habillages lui sont donc dedies, batis sur ce qui fait la force de
   « meet » : une photo, un prenom, un lieu, un geste.
   ========================================================================== */

.dating-promo--format-card .dating-promo__link--mf {
	display: flex;
	width: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: none;
	box-shadow: none;
}

.dating-promo__mf-visual {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 16 / 10.6;
	background: var(--thumb-placeholder-bg, #161d24);
}

/* Le portrait occupe toute la vignette, comme l'image d'une video : c'est ce
   qui fait qu'une carte se lit comme du contenu et non comme un encart. */
.dating-promo__mf-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

/* « autour » : trois visages, sans mosaique compliquee — trois colonnes
   egales se lisent mieux qu'un assemblage a tailles inegales. */
.dating-promo__mf-grid {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
}

.dating-promo__mf-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.dating-promo__mf-badge {
	position: absolute;
	z-index: 3;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(8, 10, 12, .78);
	color: #e9ecee;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * Le bloc de texte suit la meme regle que les autres cartes de liste : hauteur
 * fixe pour rester aligne sur les vignettes voisines, contenu cale en haut
 * pour que le prenom tombe la ou tombe un titre de video.
 */
.dating-promo--format-card .dating-promo__link--mf .dating-promo__text {
	display: grid;
	height: 69.2px;
	min-height: 69.2px;
	max-height: 69.2px;
	min-width: 0;
	padding: 8px 8px 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	row-gap: 8px;
	align-items: start;
	align-content: start;
}

.dating-promo__mf-name {
	display: block;
	width: 100%;
	overflow: hidden;
	color: var(--thumb-text-color, #fff);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-card .dating-promo__link--mf .dating-promo__mf-cta {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #75dcff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
}

.dating-promo--format-card .dating-promo__link--mf .dating-promo__mf-cta::after {
	margin-inline-start: 5px;
	content: "\203A";
	font-size: 17px;
	font-weight: 400;
	line-height: .7;
}

.dating-promo--format-card .dating-promo__link--mf:hover .dating-promo__mf-cta {
	color: #75dcff;
}

/* ==========================================================================
   COUCHE v14.1 — ce qu'on posait sur le visage des modeles

   Deux habillages peignaient par-dessus la photo :

     — « dialogue » posait une bande bleu-gris opaque entre 43 % et 61 % de la
       largeur, qui coupait le modele en deux pour loger des bulles de chat ;
     — « private » posait un voile sombre en diagonale couvrant pres de 60 %
       de l'image.

   Un visage est ce que ces creations ont de mieux a montrer. Les deux calques
   reculent : le premier devient un degrade qui part du bord droit sans mordre
   au centre, le second s'assombrit seulement dans le bas, la ou le texte se
   pose.
   ========================================================================== */

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__visual::after {
	left: 58%;
	width: 42%;
	background: linear-gradient(90deg, transparent, rgba(19, 32, 42, .93) 62%);
}

.dating-promo--format-card.dating-promo--variant-private .dating-promo__visual::after {
	background: linear-gradient(180deg, transparent 55%, rgba(6, 7, 8, .78));
}

/* ==========================================================================
   COUCHE v15 — le bouton de la diapositive Reels passait sous le lecteur

   La barre de commandes des Reels occupe 78 px en bas de l'ecran. Le bouton
   de la diapositive dating s'arretait a 68 px du bord : il tombait DANS cette
   zone, la ou le pouce commande la lecture et non la creation.

   Le meme defaut avait ete corrige sur la diapositive boutique ; celle du
   dating n'avait jamais ete revue. Le bas du bloc de texte passe a 96 px, ce
   qui laisse le bouton a une bonne dizaine de pixels au-dessus de la barre.
   ========================================================================== */

.dating-promo__link--reel .dating-promo__text {
	padding-bottom: max(96px, calc(78px + env(safe-area-inset-bottom)));
}

/* ==========================================================================
   COUCHE v16 — le rail de la colonne laterale : trois mises en page

   Mesure du rail d'origine dans son emplacement reel de 301 px :

     bloc              301 x 274 px
     photos            3 x 81 x 81 — 24 % de la surface
     accroche          tronquee (« ... vois ou le feeling vous me... »)
     etiquette 2/3     tronquee (109 px reclames dans 81)
     rappel d'action   « Decouvrir » trois fois a l'identique
     personne nommee   AUCUNE cote reseau partenaire

   Et surtout : cette colonne a ce que les bannieres de regie n'ont pas — la
   HAUTEUR EST LIBRE. Le gabarit du spot force height:100 % et rien ne la
   borne. Le rail range trois vignettes sur l'axe CONTRAINT, la largeur, et
   laisse l'axe libre inutilise.

   Trois mises en page tirees au sort, transmises dans le champ « layout » du
   journal — le meme que celui du bandeau de tete, aucun format ne portant les
   deux a la fois.
   ========================================================================== */

/* --- rail : l'existant, debarrasse de ses trois rappels d'action ---------- */

.dating-promo__group-cta {
	display: block;
	margin-top: 11px;
	padding: 9px 10px;
	border-radius: 10px;
	background: rgba(60, 191, 240, .14);
	color: #75dcff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
}

/*
 * L'accroche du rail tenait sur une ligne et se coupait. Sur trois lignes elle
 * passe entiere : la hauteur est libre, il n'y avait aucune raison de la
 * rogner.
 */
.dating-promo--format-rail .dating-promo__group-body {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Le prenom seul tient dans 81 px ; l'ancienne etiquette non. */
.dating-promo--format-rail .dating-promo__tile-label {
	padding: 8px 7px 9px;
	font-size: 11.5px;
	text-align: center;
}

/* --- portrait : un visage en grand --------------------------------------- */

.dating-promo__group--portrait {
	padding: 13px;
}

.dating-promo__rp-main {
	display: block;
	color: #fff;
	text-decoration: none;
}

.dating-promo__rp-scene {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--dating-line);
	border-radius: 15px;
	background: #161d24;
}

.dating-promo__rp-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dating-promo__rp-scene .dating-promo__activity {
	position: absolute;
	z-index: 3;
	top: 9px;
	left: 9px;
}

/* Le nom et la ville se lisent SUR la photo : le portrait garde toute la
   hauteur, le texte ne lui prend rien. */
.dating-promo__rp-identity {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	padding: 34px 12px 11px;
	background: linear-gradient(180deg, transparent, rgba(6, 7, 8, .88) 62%);
}

.dating-promo__rp-who {
	display: block;
	overflow: hidden;
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__rp-line {
	display: -webkit-box;
	margin-top: 2px;
	overflow: hidden;
	color: #c7d5de;
	font-size: 11.5px;
	line-height: 1.32;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Le bouton nomme le geste — « Ecrire a Amine » — au lieu d'un « voir les
   profils » qui ne designe personne. */
.dating-promo__rp-cta {
	display: block;
	margin-top: 10px;
	padding: 12px 10px;
	overflow: hidden;
	border-radius: 11px;
	background: linear-gradient(180deg, #3cbff0, #00c1f3);
	color: #07131a;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__rp-rest {
	display: flex;
	margin-top: 11px;
	align-items: center;
	gap: 7px;
}

.dating-promo__rp-small {
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	flex: 0 0 40px;
	border: 1px solid var(--dating-line);
	border-radius: 50%;
}

.dating-promo__rp-small img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dating-promo__rp-more {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	color: #75dcff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* --- file : trois lignes empilees ---------------------------------------- */

.dating-promo__group--file {
	padding: 14px;
}

.dating-promo__group--file .dating-promo__intro {
	margin-bottom: 11px;
}

.dating-promo__group--file .dating-promo__group-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 17px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.dating-promo__file-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

/*
 * Chaque ligne est son propre lien : trois cibles au lieu d'une zone. C'est
 * la difference de fond avec le rail, ou les trois vignettes partagent un
 * titre commun et se lisent comme un decor.
 */
.dating-promo__file-row {
	display: flex;
	min-width: 0;
	padding: 7px;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--dating-line);
	border-radius: 13px;
	background: #161d24;
	color: #fff;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.dating-promo__file-row:hover,
.dating-promo__file-row:focus-visible {
	border-color: rgba(60, 191, 240, .55);
	background: #202833;
}

.dating-promo__file-shot {
	position: relative;
	display: block;
	width: 76px;
	height: 95px;
	overflow: hidden;
	flex: 0 0 76px;
	border-radius: 10px;
	background: #101419;
}

.dating-promo__file-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dating-promo__file-shot .dating-promo__status {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 10px;
	height: 10px;
}

.dating-promo__file-body {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

/*
 * Le prenom seul, sur une ligne : la ville est portee par le titre du bloc.
 * Deux lignes etaient necessaires tant que chaque ligne repetait « · Sant
 * Pere de Ribes » ; sans elle, 125 px suffisent largement.
 */
.dating-promo__file-who {
	display: block;
	overflow: hidden;
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo__file-line {
	display: -webkit-box;
	margin-top: 3px;
	overflow: hidden;
	color: var(--dating-muted);
	font-size: 11px;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.dating-promo__file-chip {
	display: block;
	padding: 7px 10px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: rgba(60, 191, 240, .18);
	color: #75dcff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

/* ==========================================================================
   COUCHE v17 — l'identite des habillages : meme discipline pour les quatre

   « local » est celui qui tient : bordure de 1 px sur les quatre cotes, rayon
   de 10 px, un degrade discret, une seule couleur cyan. Les trois autres
   s'en ecartaient chacun a sa facon :

     private    un lisere de 3 px sur le bord GAUCHE, rayon 6 px
     community  un filet de 3 px sur le bord HAUT, rayon 2/2/14/14
     dialogue   du bleu acier sature — bordure #3cbff0, bouton #00c1f3,
                pastilles de chat #202833, degrade radial bleu

   Un trait de 3 px sur un seul cote se lit comme un accident de mise en page,
   pas comme une signature : il decale le bloc, casse la symetrie du rayon et,
   sur les grandes surfaces, devient une barre. Le bleu, lui, sort de la
   palette entiere du site.

   Les quatre gardent leur difference — elle passe par le FOND et la forme du
   bouton, pas par un liseré ni par un changement de famille de couleur :

     private    fond le plus sombre, lueur cyan en haut a gauche, bouton plein
     community  degrade bleu horizontal, bouton en contour
     dialogue   lueur cyan en haut a gauche, bouton a coin coupe (la bulle)
     local      degrade froid discret, bouton bicolore

   La couche vaut pour TOUTES les surfaces, pas seulement le rail : ces quatre
   habillages servent aussi la carte de liste, l'interstitiel et les Reels.
   ========================================================================== */

/* --- private : le lisere de gauche devient une bordure ordinaire ---------- */

.dating-promo--variant-private .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-private .dating-promo__group {
	border-inline-start-width: 1px;
	border-radius: 10px;
	border-color: rgba(60, 191, 240, .42);
	background:
		linear-gradient(135deg, rgba(60, 191, 240, .12), transparent 46%),
		#101419;
}

.dating-promo--variant-private .dating-promo__cta {
	border-radius: 8px;
}

/* --- community : le filet du haut devient une bordure ordinaire ----------- */

.dating-promo--variant-community .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-community .dating-promo__group {
	border-top-width: 1px;
	border-radius: 10px;
	border-color: rgba(117, 220, 255, .42);
	background:
		linear-gradient(100deg, rgba(117, 220, 255, .14), transparent 56%),
		#101419;
}

.dating-promo--variant-community .dating-promo__cta {
	border-radius: 8px;
}

/*
 * La pastille bleue pleine, en capitales sur fond clair, etait le pendant du
 * filet de 3 px : le meme aplat. Elle repasse en pastille sombre a filet
 * chaud, comme les trois autres habillages.
 */
.dating-promo--variant-community .dating-promo__bubble {
	border: 1px solid rgba(117, 220, 255, .5);
	border-radius: 8px;
	background: rgba(16, 20, 25, .9);
	color: #d8f6ff;
}

/* --- dialogue : sortir du bleu acier sans perdre le signe « chat » -------- */

/*
 * Ce qui dit « conversation », ce n'est pas la couleur : ce sont les coins
 * coupes des bulles et les deux tons des pastilles. On garde les deux, on
 * change la famille — bleu cyan pour l'accent, bleu nuit pour le fond des
 * pastilles recues.
 */
.dating-promo--variant-dialogue {
	--dating-accent: #3cbff0;
	--dating-accent-2: #202833;
	--dating-surface: #101419;
	--dating-surface-2: #202833;
	--dating-muted: #c7d5de;
}

.dating-promo--variant-dialogue .dating-promo__link:not(.dating-promo__link--card),
.dating-promo--variant-dialogue .dating-promo__group {
	border-radius: 10px 10px 10px 4px;
	border-color: rgba(60, 191, 240, .42);
	background:
		radial-gradient(circle at 14% 0, rgba(60, 191, 240, .17), transparent 44%),
		#101419;
}

.dating-promo--variant-dialogue .dating-promo__bubble {
	border-color: rgba(60, 191, 240, .5);
	background: rgba(16, 20, 25, .92);
}

.dating-promo--variant-dialogue .dating-promo__cta {
	border-radius: 10px 10px 10px 4px;
	background: #00c1f3;
	box-shadow: 0 8px 20px rgba(0, 121, 153, .3);
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__visual {
	background: linear-gradient(145deg, #202833, #0b1015);
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__visual::after {
	background: linear-gradient(90deg, transparent, rgba(32, 40, 51, .93) 62%);
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__bubble {
	background: rgba(117, 220, 255, .94);
	color: #07131a;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip {
	border-color: rgba(255, 255, 255, .13);
	background: #202833;
}

.dating-promo--format-card.dating-promo--variant-dialogue .dating-promo__chat-chip--2 {
	background: #00c1f3;
}

/* ==========================================================================
   COUCHE v18 — l'en-tete du carrousel tenait sur quatre lignes

   Mesure a 1240 px : le bloc faisait 400 px de haut, dont 95 pour un en-tete
   empile en quatre etages — sur-titre, titre, ligne geolocalisee, pastille
   « En ligne » — au-dessus d'une bande de vignettes de 182 px. Un quart de la
   hauteur du bloc avant d'avoir montre un seul visage.

   Sur une bande horizontale, la largeur ne manque pas : les quatre elements
   tiennent sur UNE ligne, la pastille poussee a droite. Le bloc descend a
   ~340 px et se pose dans la page au lieu de s'y empiler.

   Sous 640 px la ligne unique n'a plus la place : l'en-tete se remet en
   colonne, mais sans la pastille, qui n'y apportait qu'un etage de plus.
   ========================================================================== */

.dating-promo--format-carousel .dating-promo__group {
	padding: 14px 15px;
}

.dating-promo--format-carousel .dating-promo__intro {
	display: flex;
	margin: 0 0 11px;
	padding-right: 0;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}

.dating-promo--format-carousel .dating-promo__eyebrow {
	margin: 0;
	flex: 0 0 auto;
}

/* Un cran plus bas que le titre pleine largeur : sur une ligne partagee, il
   n'a pas besoin de 25 px pour dominer. */
.dating-promo--format-carousel .dating-promo__group-title {
	flex: 0 0 auto;
	font-size: clamp(16px, 1.35vw, 19px);
}

.dating-promo--format-carousel .dating-promo__group-body {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	flex: 1 1 200px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-promo--format-carousel .dating-promo__intro > .dating-promo__activity {
	margin-top: 0;
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* La bande respire moins haut : l'etiquette sous chaque visage se resserre. */
.dating-promo--format-carousel .dating-promo__tile-label {
	padding: 7px 8px 8px;
}

.dating-promo--format-carousel .dating-promo__group-cta {
	margin-top: 10px;
	padding: 8px 10px;
}

/*
 * Sous 640 px, la ligne unique casse : l'en-tete revient en colonne. La
 * pastille « En ligne » disparait — elle ajoutait un etage a un bloc ou l'on
 * ne voit deja que deux visages sur six.
 */
@media (max-width: 639px) {
	.dating-promo--format-carousel .dating-promo__intro {
		display: block;
		margin-bottom: 9px;
	}

	.dating-promo--format-carousel .dating-promo__group-title {
		font-size: 17px;
	}

	.dating-promo--format-carousel .dating-promo__group-body {
		margin-top: 2px;
		white-space: normal;
	}

	.dating-promo--format-carousel .dating-promo__intro > .dating-promo__activity {
		display: none;
	}
}

/* Le top Dating garde son titre complet sur desktop : la colonne droite
   devenue inutile est rendue aux profils et l'accroche peut revenir a la ligne. */
@media (min-width: 761px) {
	.dating-promo--format-topcam .dating-promo__presence {
		grid-template-columns: minmax(200px, 225px) minmax(0, 1fr);
	}

	.dating-promo--format-topcam .dating-promo__presence-heading {
		width: 100%;
		min-width: 0;
		overflow: visible;
	}

	.dating-promo--format-topcam .dating-promo__presence-title {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}