/**
 * UX-02F — Finitions visuelles page membre (hero, CTA contraste, fonds médias).
 * URLs relatives uploads — médias WP #5257–5259 (2026-05).
 */

body.page-id-408 .cdm-wrap--ux02c {
	--cdm-bg-musique: url("/wp-content/uploads/2026/05/image-fond-musique.jpg");
	--cdm-bg-coeurs: url("/wp-content/uploads/2026/05/fond-coeurs.jpg");
	--cdm-bg-jeux: url("/wp-content/uploads/2026/05/fond-jeux.jpg");
}

/* ============================================================
   1. Hero — rotator aligné à gauche sous la citation
   (override cd-dance-quotes : justify-content flex-end)
   ============================================================ */

body.page-id-408 .cdm-hero--ux02c .cdm-quote .cdq-rotator {
	text-align: left;
}

body.page-id-408 .cdm-hero--ux02c .cdq-rotator__toolbar {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 2px;
	width: 100%;
}

body.page-id-408 .cdm-hero--ux02c .cdq-rotator__btn {
	flex: 0 0 auto;
	width: auto;
	min-height: 36px;
	padding: 7px 14px;
	justify-content: flex-start;
	text-align: left;
}

body.page-id-408 .cdm-hero--ux02c .cdm-chips {
	margin-top: 12px;
	clear: both;
}

@media (max-width: 920px) {
	body.page-id-408 .cdm-hero--ux02c .cdq-rotator__toolbar {
		justify-content: flex-start;
	}

	body.page-id-408 .cdm-hero--ux02c .cdq-rotator__btn {
		flex: 0 1 auto;
		min-height: 44px;
		min-width: 0;
	}

	body.page-id-408 .cdm-hero--ux02c .cdm-chips {
		margin-top: 14px;
	}
}

/* ============================================================
   2. CTA « Trouver une soirée pour moi » — contraste branding
   ============================================================ */

body.page-id-408 .cdm-wrap--ux02c .cd-member-cta-find .cd-btn-primary {
	background: #0b1f4d !important;
	color: #fff !important;
	border: 1px solid rgba(11, 31, 77, 0.35);
	box-shadow: 0 4px 14px rgba(11, 31, 77, 0.14);
	font-weight: 700;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.page-id-408 .cdm-wrap--ux02c .cd-member-cta-find .cd-btn-primary:hover,
body.page-id-408 .cdm-wrap--ux02c .cd-member-cta-find .cd-btn-primary:focus-visible {
	background: #6a3fb5 !important;
	color: #fff !important;
	border-color: rgba(106, 63, 181, 0.4);
	box-shadow: 0 6px 18px rgba(106, 63, 181, 0.22);
	transform: translateY(-1px);
}

/* ============================================================
   3. Section Musique & Culture — fond musical
   ============================================================ */

body.page-id-408 .cdm-universe--musique {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.page-id-408 .cdm-universe--musique::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--cdm-bg-musique);
	background-size: cover;
	background-position: center right;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

body.page-id-408 .cdm-universe--musique::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.88) 0%,
		rgba(244, 246, 248, 0.82) 55%,
		rgba(255, 255, 255, 0.9) 100%
	);
	pointer-events: none;
	z-index: 0;
}

body.page-id-408 .cdm-universe--musique > .cdm-universe__title,
body.page-id-408 .cdm-universe--musique > .cdm-universe__grid {
	position: relative;
	z-index: 1;
}

body.page-id-408 .cdm-universe--musique .cdm-universe__grid .cdm-card,
body.page-id-408 .cdm-universe--musique .cdm-universe__grid .csr-member-card {
	background: rgba(255, 255, 255, 0.96);
}

/* ============================================================
   4. Mes mots doux — fond cœurs chaleureux
   ============================================================ */

body.page-id-408 #cdsp-member-mots-doux-card.cdsp-member-space-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-image:
		linear-gradient(
			145deg,
			rgba(255, 249, 246, 0.93) 0%,
			rgba(255, 240, 245, 0.9) 45%,
			rgba(255, 248, 238, 0.92) 100%
		),
		var(--cdm-bg-coeurs);
	background-size: cover, cover;
	background-position: center, center right;
	border-color: rgba(232, 106, 166, 0.24);
}

body.page-id-408 #cdsp-member-mots-doux-card.cdsp-member-space-card::before {
	z-index: 0;
	opacity: 0.55;
}

body.page-id-408 #cdsp-member-mots-doux-card.cdsp-member-space-card::after {
	opacity: 0.04;
}

body.page-id-408 #cdsp-member-mots-doux-card .cdm-card__head,
body.page-id-408 #cdsp-member-mots-doux-card .cdsp-member-space-card__postit,
body.page-id-408 #cdsp-member-mots-doux-card .cdsp-member-space-card__preview,
body.page-id-408 #cdsp-member-mots-doux-card .cdsp-member-space-card__empty,
body.page-id-408 #cdsp-member-mots-doux-card .cdsp-member-space-card__cta {
	position: relative;
	z-index: 1;
}

body.page-id-408 #cdsp-member-mots-doux-card .cdsp-member-space-card__btn {
	background: linear-gradient(135deg, #e86aa6 0%, #c04ba5 100%) !important;
	color: #fff !important;
}

/* ============================================================
   5. Section Jeux — fond ludique
   ============================================================ */

body.page-id-408 .cdm-universe--jeux {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.page-id-408 .cdm-universe--jeux::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 14% 22%, rgba(255, 209, 102, 0.45) 0 2.5px, transparent 2.6px),
		radial-gradient(circle at 86% 18%, rgba(139, 92, 246, 0.35) 0 2px, transparent 2.1px),
		radial-gradient(circle at 78% 76%, rgba(106, 63, 181, 0.3) 0 2px, transparent 2.1px),
		radial-gradient(circle at 24% 68%, rgba(255, 209, 102, 0.38) 0 2px, transparent 2.1px),
		var(--cdm-bg-jeux);
	background-size: auto, auto, auto, auto, cover;
	background-position: center;
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}

body.page-id-408 .cdm-universe--jeux::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.86) 0%,
		rgba(244, 246, 248, 0.78) 50%,
		rgba(255, 255, 255, 0.88) 100%
	);
	pointer-events: none;
	z-index: 0;
}

body.page-id-408 .cdm-universe--jeux > .cdm-universe__title,
body.page-id-408 .cdm-universe--jeux > .cdm-universe__grid {
	position: relative;
	z-index: 2;
}

body.page-id-408 .cdm-universe--jeux .cdg-member-identity-card,
body.page-id-408 .cdm-universe--jeux .cdg-member-room-card {
	background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 920px) {
	body.page-id-408 .cdm-universe--musique::before,
	body.page-id-408 .cdm-universe--jeux::before {
		opacity: 0.14;
		background-position: center;
	}

	body.page-id-408 #cdsp-member-mots-doux-card.cdsp-member-space-card {
		background-position: center, center;
	}
}