/**
 * Silver Plus — finition de la page d'accueil.
 *
 * Une seule courbe pour tout, lente au départ et longue à se poser : c'est elle
 * qui donne l'impression de calme. Les durées dépassent volontairement la
 * seconde ; les déplacements restent sous la quarantaine de pixels.
 *
 * 07/10/2026 : la première version (22 px, sans effet sur les photos) était si
 * discrète que la cliente ne l'a pas vue. Le mouvement est un peu plus ample,
 * les photos se posent en douceur, et le rythme vertical est resserré.
 */

:root {
	--sp-courbe: cubic-bezier(.22, .61, .36, 1);
	--sp-montee: 36px;
	/* La charte : noir, ivoire, or. L’or profond sert au texte sur fond clair, où l’or de marque ne se lirait pas. */
	--sp-noir: #0d0c0b;
	--sp-or-profond: #8a6a2c;
}

/* ---------------------------------------------------------------
 * Une section sans aucun contenu ne prend pas de place
 *
 * Le bandeau « événement du moment » ne rend rien quand aucun rendez-vous
 * n'est programmé ; sa section, elle, gardait 120 px de marges. Le filtre PHP
 * (finition-accueil.php) l'écarte déjà ; cette règle couvre le cas où le
 * cache d'éléments d'Elementor produit quand même l'enveloppe.
 * ------------------------------------------------------------ */

.elementor[data-elementor-type="wp-page"] > .e-con:not(:has(.elementor-element)) {
	display: none;
}

/* ---------------------------------------------------------------
 * Apparitions
 * ------------------------------------------------------------ */

.sp-revele {
	opacity: 0;
	transform: translate3d(0, var(--sp-montee), 0);
	transition:
		opacity 1.2s var(--sp-courbe),
		transform 1.6s var(--sp-courbe);
	transition-delay: calc(var(--sp-rang, 0) * 160ms);
}

.sp-revele.sp-vu {
	opacity: 1;
	transform: none;
}

/* Les en-têtes : le bloc ne bouge pas, ses lignes arrivent l'une après l'autre. */
.sp-entete.sp-revele {
	opacity: 1;
	transform: none;
}

.sp-entete.sp-revele > * {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition:
		opacity 1.1s var(--sp-courbe),
		transform 1.3s var(--sp-courbe);
}

.sp-entete.sp-revele > :nth-child(2) { transition-delay: .15s; }
.sp-entete.sp-revele > :nth-child(3) { transition-delay: .3s; }

.sp-entete.sp-revele.sp-vu > * {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------
 * Le filet sous les titres de section : un trait d’or qui se dissout aux deux bouts
 * ------------------------------------------------------------ */

.sp-finition .sp-entete .sp-entete-titre::after {
	content: "";
	display: block;
	width: 72px;
	height: 1px;
	margin: 20px auto 0;
	background: linear-gradient(90deg, transparent, var(--sp-or-marque) 50%, transparent);
	transform-origin: center;
}

.sp-finition .sp-entete.sp-revele .sp-entete-titre::after {
	transform: scaleX(0);
	transition: transform 1.8s var(--sp-courbe) .45s;
}

.sp-finition .sp-entete.sp-revele.sp-vu .sp-entete-titre::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------
 * Entre deux sections claires, un fondu plutôt qu'une coupure
 * ------------------------------------------------------------ */

.sp-fondu {
	background-image: linear-gradient(to bottom, var(--sp-fondu-depuis) 0, transparent 140px);
}

/* ---------------------------------------------------------------
 * Au survol : les cartes se soulèvent à peine
 * ------------------------------------------------------------ */

@media (hover: hover) {

	.sp-finition .sp-carte.sp-carte:not(.sp-revele),
	.sp-finition .sp-formule.sp-formule:not(.sp-revele),
	.sp-finition .sp-dernier.sp-dernier:not(.sp-revele),
	.sp-finition .sp-evt.sp-evt:not(.sp-revele) {
		transition:
			opacity 1.1s var(--sp-courbe),
			transform .7s var(--sp-courbe),
			box-shadow .7s var(--sp-courbe);
	}

	.sp-finition .sp-carte.sp-carte:not(.sp-revele):hover,
	.sp-finition .sp-formule.sp-formule:not(.sp-revele):hover,
	.sp-finition .sp-dernier.sp-dernier:not(.sp-revele):hover,
	.sp-finition .sp-evt.sp-evt:not(.sp-revele):hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: 0 2px 4px rgba(28, 23, 20, .06), 0 22px 44px -22px rgba(28, 23, 20, .32);
	}

	/* La photo du dernier Silver Time s'approche, lentement. */
	.sp-finition .sp-dernier .sp-dernier-photo img {
		transition: transform 2.4s var(--sp-courbe);
	}

	.sp-finition .sp-dernier:hover .sp-dernier-photo img {
		transform: scale(1.035);
	}
}

/* ---------------------------------------------------------------
 * Téléphone : les mêmes apparitions, en plus court
 * ------------------------------------------------------------ */

@media (max-width: 760px) {

	:root {
		--sp-montee: 22px;
	}

	.sp-revele {
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sp-revele,
	.sp-entete.sp-revele > *,
	.sp-finition .sp-entete.sp-revele .sp-entete-titre::after {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------
 * Les photos se posent : elles arrivent très légèrement agrandies
 * ------------------------------------------------------------ */

.sp-revele .sp-dernier-photo img,
.sp-revele .sp-carte-photo,
.sp-revele .sp-carrousel-photo,
.sp-revele .sp-evt-date {
	transform: scale(1.08);
	transition: transform 2.8s var(--sp-courbe);
}

.sp-revele.sp-vu .sp-dernier-photo img,
.sp-revele.sp-vu .sp-carte-photo,
.sp-revele.sp-vu .sp-carrousel-photo,
.sp-revele.sp-vu .sp-evt-date {
	transform: none;
}

/* ---------------------------------------------------------------
 * Le rythme vertical
 *
 * Chaque section avait 84 px de marge en haut et en bas : 168 px de vide
 * entre deux contenus, plus la marge des titres. Sur un écran d'ordinateur,
 * on traversait des blancs qui cassaient la lecture. Ces valeurs l'emportent
 * sur celles d'Elementor pour la page d'accueil seulement ; le premier écran
 * et la bande des nouveaux partenaires gardent les leurs.
 * ------------------------------------------------------------ */

.home .elementor[data-elementor-type="wp-page"] > .e-con:not(:first-child):not(:has(.sp-nouveaux)) {
	--padding-top: 64px;
	--padding-bottom: 64px;
}

.home .sp-entete.sp-entete {
	margin-bottom: 34px;
}

@media (max-width: 1024px) {

	.home .elementor[data-elementor-type="wp-page"] > .e-con:not(:first-child):not(:has(.sp-nouveaux)) {
		--padding-top: 54px;
		--padding-bottom: 54px;
	}
}

@media (max-width: 767px) {

	.home .elementor[data-elementor-type="wp-page"] > .e-con:not(:first-child):not(:has(.sp-nouveaux)) {
		--padding-top: 44px;
		--padding-bottom: 44px;
	}

	.home .sp-entete.sp-entete {
		margin-bottom: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sp-revele .sp-dernier-photo img,
	.sp-revele .sp-carte-photo,
	.sp-revele .sp-carrousel-photo,
	.sp-revele .sp-evt-date {
		transform: none;
		transition: none;
	}
}

/* La charte noir / ivoire / or (07/10/2026) est portée par les feuilles communes
   (charte.css, club.css, silver-time.css) : la terre cuite y a été remplacée par
   l'or profond pour tout le site, pas seulement pour l'accueil. */

/* ==============================================================
 * LE PREMIER ÉCRAN, PLUS LUMINEUX
 *
 * La photo (la tasse, la carte sur le marbre) est claire et élégante ; c'est
 * le voile brun posé dessus à 90 % qui l'assombrissait, et le titre blanc
 * tombait sur la carte. Désormais : un fond ivoire à gauche, le titre en noir,
 * et la photo à sa lumière d'origine à droite, qui se fond dans l'ivoire. Les
 * puces du bas, qui redisaient ce que la page montre juste après, sont
 * retirées ; le second bouton devient un lien.
 * ============================================================== */

.sp-finition .sp-hero.sp-hero {
	min-height: 560px;
	background: var(--sp-ivoire);
	color: var(--sp-noir);
	overflow: hidden;
}

/* La photo dans son propre panneau, à droite, cadrée sur la carte. */
.sp-finition .sp-hero.sp-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60%;
	background-image: var(--sp-hero-image, none);
	background-size: cover;
	background-position: 42% 55%;
	/* Le bord gauche se fond dans l'ivoire, sans trait. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.sp-finition .sp-hero .sp-hero-contenu {
	position: relative;
	z-index: 1;
}

.sp-finition .sp-hero .sp-hero-contenu {
	padding: 84px 28px;
}

.sp-finition .sp-hero .sp-hero-contenu > * {
	max-width: 520px;
}

.sp-finition .sp-hero .sp-hero-surtitre {
	font-family: var(--sp-corps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	color: var(--sp-or-profond);
	margin-bottom: 26px;
}

.sp-finition .sp-hero .sp-hero-surtitre::before {
	width: 36px;
	background: var(--sp-or-marque);
}

.sp-finition .sp-hero .sp-hero-titre {
	font-size: clamp(34px, 3.6vw, 50px);
	line-height: 1.16;
	color: var(--sp-noir);
	letter-spacing: .01em;
}

/* Le filet d'or sous l'accroche : c'est elle, l'élément fort. */
.sp-finition .sp-hero .sp-hero-titre::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	margin-top: 28px;
	background: var(--sp-or-marque);
}

.sp-finition .sp-hero .sp-hero-texte {
	font-size: 18px;
	line-height: 1.7;
	color: #3d3934;
	margin-top: 24px;
	max-width: 30em;
}

.sp-finition .sp-hero .sp-hero-boutons {
	align-items: center;
	gap: 26px;
	margin-top: 38px;
}

.sp-finition .sp-hero a.sp-btn.sp-btn-contour-clair {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--sp-noir);
	box-shadow: inset 0 -1px 0 var(--sp-or-marque);
}

.sp-finition .sp-hero a.sp-btn.sp-btn-contour-clair:hover {
	background: none;
	color: var(--sp-or-profond);
	box-shadow: inset 0 -2px 0 var(--sp-or-marque);
}

.sp-finition .sp-hero .sp-hero-rassurance {
	display: none;
}

/* Écran moyen : la photo glisse un peu plus à droite, le texte se resserre. */
@media (max-width: 1280px) {

	.sp-finition .sp-hero.sp-hero {
		min-height: 520px;
	}

	.sp-finition .sp-hero.sp-hero::before {
		width: 56%;
	}

	.sp-finition .sp-hero .sp-hero-contenu > * {
		max-width: 460px;
	}
}

/* Tablette et téléphone : la photo en haut, entière en largeur, le texte dessous. */
@media (max-width: 860px) {

	.sp-finition .sp-hero.sp-hero {
		display: block;
		min-height: 0;
	}

	/* Sur téléphone, le panneau passe au-dessus du texte, sur toute la largeur. */
	.sp-finition .sp-hero.sp-hero::before {
		left: 0;
		bottom: auto;
		width: 100%;
		height: 58vw;
		background-position: 46% 60%;
		-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	}

	.sp-finition .sp-hero .sp-hero-contenu {
		padding: calc(58vw - 10px) 22px 48px;
	}

	.sp-finition .sp-hero .sp-hero-contenu > * {
		max-width: none;
	}

	.sp-finition .sp-hero .sp-hero-boutons a.sp-btn.sp-btn-contour-clair {
		flex: 0 0 auto;
	}
}

/* ==============================================================
 * ILS REJOIGNENT SILVER PLUS : un vrai noir
 *
 * La section était peinte en « encre » (#1C1714), un noir chaud qui tire au
 * brun à l'écran. Elle passe au noir profond, sans toucher à la mise en page
 * Elementor ; les tuiles sombres et les textes secondaires suivent.
 * ============================================================== */

.sp-finition .elementor[data-elementor-type="wp-page"] > .e-con:has(.sp-nouveaux) {
	background-color: var(--sp-noir) !important;
	--padding-top: 48px;
	--padding-bottom: 52px;
	/* Un fil d'or, en haut : le passage depuis le premier écran se lit comme
	   une page qu'on tourne, pas comme deux blocs qui se heurtent. */
	box-shadow: inset 0 1px 0 rgba(233, 195, 110, 0.55);
}

.sp-finition .sp-nouveaux .sp-entete .sp-entete-titre {
	font-size: clamp(26px, 2.8vw, 34px);
}

/* ==============================================================
 * LA FONDATRICE : une lecture continue — demande du 08/10/2026
 *
 * Huit sections en alternance ivoire / crème, chacune avec 84 px de marge en
 * haut et en bas, pour des paragraphes de quelques lignes : on faisait défiler
 * plus de vide que de texte. Les marges passent à 40 px, et la photo du
 * début, haute de 550 px à côté de quatre lignes, est ramenée à 420 px et
 * centrée avec son texte.
 * ============================================================== */

.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con {
	--padding-top: 40px;
	--padding-bottom: 40px;
}

.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con:first-child {
	--padding-top: 48px;
	--padding-bottom: 48px;
}

.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con:first-child > .e-con-inner {
	align-items: center;
}

.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-image img {
	max-height: 420px;
	width: auto;
	object-fit: cover;
}

/* Le texte du récit : moins d'air entre deux paragraphes d'une même section. */
.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con:not(:first-child) {
	--row-gap: 14px;
	--gap: 14px 14px;
}

@media (max-width: 1024px) {

	.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con {
		--padding-top: 34px;
		--padding-bottom: 34px;
	}
}

@media (max-width: 767px) {

	.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con {
		--padding-top: 28px;
		--padding-bottom: 28px;
	}

	.sp-page-la-fondatrice .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-image img {
		max-height: 340px;
	}
}

/* ==============================================================
 * LES EN-TÊTES DES PAGES INTÉRIEURES, EN NOIR ET OR (09/10/2026)
 *
 * Demande de Dimitri : « améliorer toutes les en-têtes fades » comme celles
 * de l'adhésion et des pages à bandeau. Deux familles :
 *
 *   1. Le premier écran à photo (Silver Plus, Silver Time, Silver Go, Les
 *      partenaires) : fond noir éclairé d'or, photo à droite fondue dans le
 *      noir, titre de l'argent vers l'or, bouton or à angles droits.
 *      L'ACCUEIL GARDE SON PREMIER ÉCRAN IVOIRE (la carte et son reflet,
 *      validés par la cliente) : tout est restreint à body:not(.home).
 *
 *   2. Le petit en-tête ivoire en tête de page (FAQ, Adresses utiles, La vie
 *      du club, Nos villes) : reconnu à son titre H1 — les en-têtes de
 *      section, plus bas, ont un H2 et ne changent pas. Il devient le bandeau
 *      noir pleine largeur des autres pages.
 * ============================================================== */

/* --- 1. Le premier écran à photo ------------------------------ */

body:not(.home).sp-finition .sp-hero.sp-hero {
	background-color: #0d0c0b;
	background-image:
		radial-gradient(560px 320px at 6% 0%, rgba(233, 195, 110, 0.16), transparent),
		radial-gradient(420px 260px at 30% 100%, rgba(233, 195, 110, 0.07), transparent);
	color: #f6efe3;
}

body:not(.home).sp-finition .sp-hero.sp-hero::before {
	width: 62%;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 48%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 48%);
}

/* Le filet d'or qui ferme le premier écran. */
body:not(.home).sp-finition .sp-hero.sp-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sp-or-marque, #e9c36e) 30%, #f6e3b4 50%, var(--sp-or-marque, #e9c36e) 70%, transparent);
	opacity: 0.8;
	z-index: 2;
}

body:not(.home).sp-finition .sp-hero .sp-hero-surtitre {
	color: var(--sp-or-marque, #e9c36e);
}

body:not(.home).sp-finition .sp-hero .sp-hero-titre {
	font-size: clamp(40px, 4.6vw, 66px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.03em;
	color: #f3efe8;
	background: linear-gradient(180deg, #ffffff 0%, #e7e2da 45%, #e9c36e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body:not(.home).sp-finition .sp-hero .sp-hero-texte {
	color: rgba(246, 239, 227, 0.84);
}

/* Le bouton principal : l'aplat d'or à angles droits du menu. */
body:not(.home).sp-finition .sp-hero a.sp-btn:not(.sp-btn-contour-clair) {
	border: 0;
	border-radius: 0;
	background: var(--sp-or-marque, #e9c36e);
	color: #0d0c0b;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 14px;
	padding: 16px 28px;
	box-shadow: none;
}

body:not(.home).sp-finition .sp-hero a.sp-btn:not(.sp-btn-contour-clair):hover,
body:not(.home).sp-finition .sp-hero a.sp-btn:not(.sp-btn-contour-clair):focus-visible {
	background: #ffffff;
	color: #0d0c0b;
}

body:not(.home).sp-finition .sp-hero a.sp-btn.sp-btn-contour-clair {
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: inset 0 -1px 0 var(--sp-or-marque, #e9c36e);
	color: #f6efe3;
}

body:not(.home).sp-finition .sp-hero a.sp-btn.sp-btn-contour-clair:hover {
	border: 0;
	background: none;
	color: var(--sp-or-marque, #e9c36e);
}

/* Téléphone : la photo en haut, fondue dans le noir du texte. */
@media (max-width: 860px) {

	body:not(.home).sp-finition .sp-hero.sp-hero::before {
		width: 100%;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	}
}

/* --- 2. Le petit en-tête ivoire en tête de page -------------- */

.sp-finition .sp-entete:has(> h1.sp-entete-titre) {
	position: relative;
	max-width: none;
	width: auto;
	margin-inline: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: clamp(40px, 5vw, 64px);
	padding: clamp(56px, 7vw, 92px) 24px clamp(56px, 7vw, 84px);
	text-align: center;
	color: #f6efe3;
	background-color: #0d0c0b;
	background-image:
		radial-gradient(620px 150px at 50% 58%, rgba(233, 195, 110, 0.11), transparent),
		radial-gradient(560px 300px at 8% 0%, rgba(233, 195, 110, 0.15), transparent),
		radial-gradient(520px 260px at 94% 0%, rgba(192, 192, 200, 0.10), transparent),
		linear-gradient(180deg, #0d0c0b 0, rgba(13, 12, 11, 0) 55%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M10 140V70a60 60 0 0 1 120 0v70' fill='none' stroke='%23e9c36e' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
	background-position: center, center, center, top, center bottom;
}

.sp-finition .sp-entete:has(> h1.sp-entete-titre)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 2px;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--sp-or-marque, #e9c36e) 30%, #f6e3b4 50%, var(--sp-or-marque, #e9c36e) 70%, transparent);
	opacity: 0.8;
}

.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--sp-or-marque, #e9c36e);
}

.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre::before,
.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre::after {
	content: "";
	width: 38px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.sp-finition .sp-entete > h1.sp-entete-titre {
	margin: 0;
	font-family: var(--sp-titre, 'Cinzel', serif);
	font-size: clamp(2.1rem, 5vw, 3.9rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.03em;
	color: #f3efe8;
	background: linear-gradient(180deg, #ffffff 0%, #e7e2da 45%, #e9c36e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Le filet sous le titre de l'en-tête ivoire n'a plus lieu d'être. */
.sp-finition .sp-entete > h1.sp-entete-titre::after {
	display: none;
}

.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-intro {
	max-width: 660px;
	margin: 22px auto 0;
	color: rgba(246, 239, 227, 0.86);
}

/* Collé au menu : le conteneur ne laisse plus d'espace au-dessus. */
.sp-finition .elementor > .e-parent:first-child:has(.sp-entete > h1.sp-entete-titre),
.sp-finition .elementor > .e-parent:first-child:has(.sp-entete > h1.sp-entete-titre) > .e-con-inner {
	padding-top: 0 !important;
}

@media (max-width: 600px) {

	.sp-finition .sp-entete:has(> h1.sp-entete-titre) {
		padding: 44px 20px 48px;
	}

	.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre {
		gap: 10px;
		font-size: 0.7rem;
		letter-spacing: 0.18em;
	}

	.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre::before,
	.sp-finition .sp-entete:has(> h1.sp-entete-titre) .sp-entete-surtitre::after {
		width: 22px;
	}
}

/* --- 3. La fondatrice : le premier bloc (portrait, nom, titre, citation) --- */

.sp-finition .elementor-34 > .e-parent:first-child {
	position: relative;
	padding-top: clamp(48px, 6vw, 80px) !important;
	padding-bottom: clamp(48px, 6vw, 80px) !important;
	background-color: #0d0c0b !important;
	background-image:
		radial-gradient(560px 320px at 6% 0%, rgba(233, 195, 110, 0.16), transparent),
		radial-gradient(520px 260px at 94% 0%, rgba(192, 192, 200, 0.10), transparent),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M10 140V70a60 60 0 0 1 120 0v70' fill='none' stroke='%23e9c36e' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E") !important;
	background-position: center, center, center bottom !important;
	color: #f6efe3;
}

.sp-finition .elementor-34 > .e-parent:first-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sp-or-marque, #e9c36e) 30%, #f6e3b4 50%, var(--sp-or-marque, #e9c36e) 70%, transparent);
	opacity: 0.8;
}

/* Le portrait, cerné d'un filet d'or décalé. */
.sp-finition .elementor-34 > .e-parent:first-child .elementor-widget-image img {
	box-shadow: 14px 14px 0 -1px #0d0c0b, 14px 14px 0 0 rgba(233, 195, 110, 0.65);
}

.sp-finition .elementor-34 > .e-parent:first-child .sp-entete-surtitre,
.sp-finition .elementor-34 > .e-parent:first-child .sp-entete-surtitre .elementor-heading-title {
	color: var(--sp-or-marque, #e9c36e) !important;
	font-family: var(--sp-corps, 'Montserrat', sans-serif) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase;
}

.sp-finition .elementor-34 > .e-parent:first-child h1.elementor-heading-title {
	font-family: var(--sp-titre, 'Cinzel', serif) !important;
	font-size: clamp(2.4rem, 5vw, 4rem) !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	letter-spacing: 0.03em;
	color: #f3efe8 !important;
	background: linear-gradient(180deg, #ffffff 0%, #e7e2da 45%, #e9c36e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sp-finition .elementor-34 > .e-parent:first-child .sp-exergue,
.sp-finition .elementor-34 > .e-parent:first-child .sp-exergue p {
	color: #f6efe3 !important;
	border-color: var(--sp-or-marque, #e9c36e) !important;
}

/* --- 4. Silver Plus : la carte elle-même, qui flotte, en guise de photo ---
 *
 * Demande de Dimitri (09/10/2026) : « un fond avec la carte en animation ».
 * L'image du premier écran de cette page est la carte du club (média 2501) ;
 * au lieu d'un panneau photo, elle est posée en relief à droite, inclinée,
 * flotte lentement, et un reflet la traverse — comme sur les pages
 * d'adhésion. Un seul élément : le reflet est un dégradé posé par-dessus
 * l'image, que l'on fait glisser.
 */

body.page-id-27.sp-finition .sp-hero.sp-hero::before {
	top: 50%;
	right: 9%;
	bottom: auto;
	left: auto;
	width: min(30vw, 430px);
	height: auto;
	aspect-ratio: 85.6 / 53.98; /* Le format d'une carte bancaire (ISO 7810). */
	border-radius: 16px;
	background-image:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 48%, rgba(255, 244, 214, 0.16) 55%, transparent 64%),
		var(--sp-hero-image, none);
	background-size: 250% 100%, cover;
	background-position: 100% 0, center;
	background-repeat: no-repeat;
	-webkit-mask-image: none;
	mask-image: none;
	box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(233, 195, 110, 0.45), 0 0 90px rgba(233, 195, 110, 0.14);
	transform: translateY(-50%) perspective(900px) rotateX(6deg) rotateY(-12deg);
	animation: sp-carte-flotte 6s ease-in-out infinite, sp-carte-reflet 5.5s ease-in-out 1s infinite;
}

/* Un halo doré derrière la carte. */
body.page-id-27.sp-finition .sp-hero.sp-hero {
	background-image:
		radial-gradient(520px 340px at 76% 50%, rgba(233, 195, 110, 0.14), transparent),
		radial-gradient(560px 320px at 6% 0%, rgba(233, 195, 110, 0.16), transparent);
}

@keyframes sp-carte-flotte {
	0%, 100% { transform: translateY(-50%) perspective(900px) rotateX(6deg) rotateY(-12deg); }
	50%      { transform: translateY(calc(-50% - 10px)) perspective(900px) rotateX(4deg) rotateY(-7deg); }
}

@keyframes sp-carte-reflet {
	0%        { background-position: 100% 0, center; }
	35%, 100% { background-position: 0% 0, center; }
}

@keyframes sp-carte-flotte-mobile {
	0%, 100% { transform: perspective(900px) rotateX(6deg) rotateY(-10deg); }
	50%      { transform: translateY(-6px) perspective(900px) rotateX(4deg) rotateY(-6deg); }
}

/* Écran moyen : la carte rétrécit avec la place. */
@media (max-width: 1280px) {

	body.page-id-27.sp-finition .sp-hero.sp-hero::before {
		width: min(30vw, 380px);
		right: 6%;
	}
}

/* Tablette et téléphone : la carte au-dessus du texte. */
@media (max-width: 860px) {

	body.page-id-27.sp-finition .sp-hero.sp-hero::before {
		top: 36px;
		right: 20%;
		left: 20%;
		width: auto;
		animation: sp-carte-flotte-mobile 6s ease-in-out infinite, sp-carte-reflet 5.5s ease-in-out 1s infinite;
		transform: perspective(900px) rotateX(6deg) rotateY(-10deg);
	}

	body.page-id-27.sp-finition .sp-hero .sp-hero-contenu {
		padding-top: calc(60vw * 53.98 / 85.6 + 84px);
	}
}

@media (prefers-reduced-motion: reduce) {

	body.page-id-27.sp-finition .sp-hero.sp-hero::before {
		animation: none;
	}
}