/**
 * Villa Victoria — page Esthétique (7834)
 * Refonte visuelle : mise en page éditoriale, boutons navy / blanc, navigation
 * par univers. Les classes vv-es-* sont posées par apply-design.php sur les
 * conteneurs Elementor ; le HTML et les textes restent ceux d'Elementor.
 *
 * Le préfixe #pxl-content-main garantit la priorité sur le CSS généré par
 * Elementor sans recourir à !important, sauf là où Elementor en met lui-même.
 */

:root {
	--vv-es-top: 0px;      /* hauteur du header fixe, mise à jour en JS */
	--vv-es-header: 96px;  /* hauteur du header en flux, mise à jour en JS */
	--vv-es-nav: 84px;     /* hauteur de la barre d'univers */
}

#pxl-content-main .elementor-7834 {
	--vv-navy: #0F1F34;
	--vv-navy-2: #162C4A;
	--vv-deep: #17324F;
	--vv-mist: #F5F7FA;
	--vv-line: #DBE3EE;
	--vv-gold: #C39A6B;
	--vv-text: #5A6676;
	--vv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vv-display: "Melodrama", Georgia, "Times New Roman", serif;
	--vv-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   1. Socle typographique
   ===================================================================== */

#pxl-content-main .vv-es .vv-es-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	letter-spacing: 0.22em;
	font-weight: 500;
}
#pxl-content-main .vv-es .vv-es-eyebrow .elementor-heading-title::before {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.85;
	transform-origin: left center;
	transform: scaleX(var(--vv-l, 1));
}

#pxl-content-main .vv-es .vv-es-title .elementor-heading-title {
	font-size: clamp(38px, 4.4vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

#pxl-content-main .vv-es .vv-es-desc {
	font-size: 16px;
	line-height: 1.75;
}
#pxl-content-main .vv-es .vv-es-desc p:last-child {
	margin-bottom: 0;
}

/* mots masqués pour la révélation ligne à ligne (posé en JS) */
#pxl-content-main .vv-es-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0 0.04em 0.14em;
	margin: 0 -0.04em -0.14em;
}
#pxl-content-main .vv-es-w > span {
	display: inline-block;
	will-change: transform;
}

/* =====================================================================
   2. Boutons — navy ou blanc, jamais dorés
   ===================================================================== */

#pxl-content-main .vv-es-btn .elementor-button {
	position: relative;
	border-radius: 2px;
	padding: 17px 30px;
	font-size: 12px;
	letter-spacing: 0.18em;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.45s var(--vv-ease), border-color 0.45s var(--vv-ease), color 0.45s var(--vv-ease), box-shadow 0.45s var(--vv-ease);
	will-change: transform;
}
#pxl-content-main .vv-es-btn .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
}
#pxl-content-main .vv-es-btn .elementor-button-text {
	display: block;
}
#pxl-content-main .vv-es-btn--dark .elementor-button:hover,
#pxl-content-main .vv-es-btn--dark .elementor-button:focus-visible {
	box-shadow: 0 18px 32px -18px rgba(15, 31, 52, 0.55);
}
#pxl-content-main .vv-es-btn--light .elementor-button:hover,
#pxl-content-main .vv-es-btn--light .elementor-button:focus-visible {
	box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.35);
}
#pxl-content-main .vv-es-btn .elementor-button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Libellé qui roule au survol. Le texte n'est écrit qu'une fois dans le
   document ; la copie qui monte est un pseudo-élément, donc ni sélectionnable
   ni copiée deux fois. */
#pxl-content-main .vv-es-roll {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 1.25;
}
#pxl-content-main .vv-es-roll > span {
	display: block;
	position: relative;
	transition: transform 0.55s var(--vv-ease);
}
#pxl-content-main .vv-es-roll > span::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding-top: 0.14em;
}
#pxl-content-main .elementor-button:hover .vv-es-roll > span,
#pxl-content-main .elementor-button:focus-visible .vv-es-roll > span {
	transform: translateY(calc(-100% - 0.14em));
}

#pxl-content-main .vv-es-btn-row {
	--gap: 14px;
	flex-wrap: wrap;
}

/* =====================================================================
   3. Couches média (parallaxe) — posées en JS sur les conteneurs à image
   ===================================================================== */

#pxl-content-main .vv-es-has-media {
	background-image: none !important;
	isolation: isolate;
}
#pxl-content-main .vv-es-media {
	position: absolute;
	left: 0;
	right: 0;
	top: -12%;
	bottom: -12%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}
#pxl-content-main .vv-es-media__img {
	display: block;
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 1.2s var(--vv-ease);
	will-change: transform;
}
#pxl-content-main .vv-es-has-media::before {
	z-index: 1;
}
#pxl-content-main .vv-es-has-media > .e-con-inner,
#pxl-content-main .vv-es-has-media > .elementor-element {
	position: relative;
	z-index: 2;
}

/* =====================================================================
   4. Hero — plein écran, voile navy, statistiques en filet
   ===================================================================== */

#pxl-content-main .vv-es-hero {
	--min-height: 640px;
	--padding-top: clamp(80px, 9vh, 104px);
	--padding-bottom: clamp(56px, 7vh, 80px);
	position: relative;
	overflow: hidden;
}
#pxl-content-main .vv-es-hero::before {
	background-color: transparent !important;
	background-image:
		linear-gradient(100deg, rgba(15, 31, 52, 0.86) 0%, rgba(15, 31, 52, 0.62) 46%, rgba(15, 31, 52, 0.30) 100%),
		linear-gradient(to top, rgba(15, 31, 52, 0.72) 0%, rgba(15, 31, 52, 0) 48%);
	opacity: 1 !important;
}
#pxl-content-main .vv-es-hero .vv-es-hero-body {
	--width: min(100%, 900px);
}
#pxl-content-main .vv-es-hero .vv-es-h1 .elementor-heading-title {
	font-size: clamp(42px, 4.6vw, 66px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 20ch;
	text-wrap: balance;
}
#pxl-content-main .vv-es-hero .vv-es-desc {
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.65;
	max-width: 560px;
}
#pxl-content-main .vv-es-hero .vv-es-btn-row {
	margin-top: 6px;
}

#pxl-content-main .vv-es-stats {
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	--flex-direction: row;
	--padding-top: 18px;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	position: relative;
	margin-top: clamp(24px, 3.6vh, 34px);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 0;
	column-gap: 0;
}
#pxl-content-main .vv-es-stats .vv-es-stat {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 150px;
	padding-right: 28px;
}
#pxl-content-main .vv-es-stats .vv-es-stat + .vv-es-stat {
	padding-left: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
#pxl-content-main .vv-es-stats .vv-es-stat strong {
	display: block;
	font-family: var(--vv-display);
	font-weight: 400;
	font-size: clamp(30px, 2.8vw, 42px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

/* indice de défilement : un fil qui coule, sans texte */
#pxl-content-main .vv-es-cue {
	position: absolute;
	right: clamp(20px, 4vw, 56px);
	bottom: clamp(24px, 5vh, 48px);
	z-index: 3;
	width: 1px;
	height: 72px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.18);
	pointer-events: none;
}
#pxl-content-main .vv-es-cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40%;
	background: #FFFFFF;
	animation: vv-es-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes vv-es-cue {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(260%); }
}

/* =====================================================================
   5. Navigation par univers (barre insérée en JS après le hero)
   ===================================================================== */

/* Une bande blanche pleine (aucun flou d'arrière-plan : sur un élément fixé,
   il scintille ou ne se peint pas au défilement, Safari en tête), un rail
   unique en brume et un indicateur navy qui glisse sous l'univers actif. */
#pxl-content-main .vv-es-navwrap {
	height: var(--vv-es-nav);
	position: relative;
	z-index: 90;
}
#pxl-content-main .vv-es-nav {
	position: relative;
	height: var(--vv-es-nav);
	background: #FFFFFF;
	border-bottom: 1px solid var(--vv-line);
	transition: transform 0.6s var(--vv-ease), opacity 0.4s ease, box-shadow 0.4s ease;
	will-change: transform;
}
#pxl-content-main .vv-es-navwrap.is-fixed .vv-es-nav,
#pxl-content-main .vv-es-navwrap.is-past .vv-es-nav {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--vv-es-top);
	box-shadow: 0 14px 32px -22px rgba(15, 31, 52, 0.38);
}
#pxl-content-main .vv-es-navwrap.is-past .vv-es-nav {
	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
}
#pxl-content-main .vv-es-nav__inner {
	max-width: 1290px;
	height: 100%;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* piste défilante (utile sous 1024 px), sans barre de défilement visible */
#pxl-content-main .vv-es-nav__track {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px 0;
}
#pxl-content-main .vv-es-nav__track::-webkit-scrollbar {
	display: none;
}
/* le rail : un seul galet en brume qui accueille les cinq univers */
#pxl-content-main .vv-es-nav__list {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--vv-line);
	border-radius: 999px;
	background: var(--vv-mist);
	white-space: nowrap;
}
#pxl-content-main .vv-es-nav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#pxl-content-main .vv-es-nav__link {
	--vv-es-nav-ls: 0.15em;   /* interlettrage des capitales */
	--vv-es-nav-shift: 0.07em; /* descente optique du libellé */
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	height: 36px;
	padding: 0 18px;
	border-radius: 999px;
	color: var(--vv-navy);
	font-family: var(--vv-sans);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--vv-es-nav-ls);
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.4s var(--vv-ease), background-color 0.3s ease;
}
/* le libellé : l'interlettrage ajoute un blanc après la dernière lettre et
   les capitales, sans jambage, flottent haut dans la boîte de ligne ; on
   reprend les deux pour que le mot soit vraiment centré dans le galet */
#pxl-content-main .vv-es-nav__label {
	display: block;
	margin-right: calc(var(--vv-es-nav-ls) * -1);
	transform: translateY(var(--vv-es-nav-shift));
}
#pxl-content-main .vv-es-nav__link:hover,
#pxl-content-main .vv-es-nav__link:focus-visible {
	color: var(--vv-navy);
	background-color: rgba(15, 31, 52, 0.06);
}
#pxl-content-main .vv-es-nav__link:focus-visible {
	outline: 1px solid var(--vv-navy);
	outline-offset: 2px;
}
#pxl-content-main .vv-es-nav__link.is-active,
#pxl-content-main .vv-es-nav__link.is-active:hover {
	color: #FFFFFF;
	background-color: transparent;
}
/* l'indicateur : un galet navy qui glisse d'un univers à l'autre (position
   et largeur posées en JS) ; sans JS, l'actif garde un fond navy direct */
#pxl-content-main .vv-es-nav__pill {
	position: absolute;
	z-index: 0;
	top: 4px;
	left: 0;
	height: 36px;
	width: 0;
	border-radius: 999px;
	background: var(--vv-navy);
	opacity: 0;
	pointer-events: none;
	will-change: transform, width;
}
#pxl-content-main .vv-es-nav__pill.is-ready {
	opacity: 1;
}
#pxl-content-main .vv-es-nav__bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background: var(--vv-navy);
	transform-origin: left center;
	transform: scaleX(var(--vv-p, 0));
}

/* =====================================================================
   6. Univers — en-têtes éditoriaux, chiffres fantômes, respirations
   ===================================================================== */

#pxl-content-main .vv-es-univers {
	--padding-top: clamp(84px, 10vw, 150px);
	--padding-bottom: clamp(84px, 10vw, 150px);
	position: relative;
	overflow: hidden;
	scroll-margin-top: calc(var(--vv-es-top) + var(--vv-es-nav));
}
#pxl-content-main .vv-es-univers > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* en-tête : titre à gauche, description calée en bas à droite */
#pxl-content-main .vv-es-univers .vv-es-head {
	--width: 100%;
	--margin-bottom: clamp(44px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas:
		"eyebrow eyebrow"
		"title desc";
	column-gap: clamp(32px, 5vw, 96px);
	align-items: end;
}
#pxl-content-main .vv-es-univers .vv-es-head .vv-es-eyebrow { grid-area: eyebrow; }
#pxl-content-main .vv-es-univers .vv-es-head .vv-es-title { grid-area: title; margin-bottom: 0; }
#pxl-content-main .vv-es-univers .vv-es-head .vv-es-desc {
	grid-area: desc;
	max-width: 440px;
	padding-bottom: 0.35em;
}
#pxl-content-main .vv-es-univers .vv-es-head .vv-es-title .elementor-heading-title {
	max-width: 14ch;
}

/* conteneurs de mise en page : aucun padding Elementor par défaut, pour
   que cartes, colonnes et en-têtes s'alignent sur la même marge */
#pxl-content-main .vv-es-row,
#pxl-content-main .vv-es-col,
#pxl-content-main .vv-es-head,
#pxl-content-main .vv-es-btn-row,
#pxl-content-main .vv-es-hero-body,
#pxl-content-main .vv-es-final-body,
#pxl-content-main .vv-es-exp-grid,
#pxl-content-main .vv-es-exp-body,
#pxl-content-main .vv-es-infos-grid,
#pxl-content-main .vv-es-infos-text {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* =====================================================================
   7. Cartes image (Corps, Visage)
   ===================================================================== */

#pxl-content-main .vv-es-row--feature {
	--gap: 24px;
	--margin-bottom: 40px;
}
#pxl-content-main .vv-es-row--feature .vv-es-col {
	--gap: 24px;
}
#pxl-content-main .vv-es-card--image {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	--padding-top: 44px;
	--padding-right: 44px;
	--padding-bottom: 44px;
	--padding-left: 44px;
	--min-height: 300px;
}
#pxl-content-main .vv-es-row--feature > .vv-es-card--image {
	--min-height: 660px;
}
#pxl-content-main .vv-es-card--image::before {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(15, 31, 52, 0.04) 0%, rgba(15, 31, 52, 0.28) 42%, rgba(15, 31, 52, 0.90) 100%);
	opacity: 1 !important;
	transition: opacity 0.6s ease;
}
#pxl-content-main .vv-es-card--image:hover .vv-es-media__img {
	transform: scale(1.05);
}
#pxl-content-main .vv-es-card--image .vv-es-eyebrow .elementor-heading-title {
	color: rgba(255, 255, 255, 0.72);
	font-size: 11px;
	margin-bottom: 4px;
}
#pxl-content-main .vv-es-card--image .vv-es-eyebrow .elementor-heading-title::before {
	width: 22px;
}
#pxl-content-main .vv-es-card--image .vv-es-card-title .elementor-heading-title {
	font-size: clamp(28px, 2.4vw, 36px);
	line-height: 1.04;
}
#pxl-content-main .vv-es-card--image .vv-es-meta {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
	margin-bottom: 14px;
}
#pxl-content-main .vv-es-card--image .vv-es-desc {
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	max-width: 520px;
	transition: color 0.6s ease;
}
#pxl-content-main .vv-es-card--image .vv-es-btn {
	margin-top: 10px;
}
#pxl-content-main .vv-es-card--image .vv-es-btn .elementor-button {
	padding: 15px 26px;
	border-color: rgba(255, 255, 255, 0.55);
}
#pxl-content-main .vv-es-card--image .vv-es-btn .elementor-button:hover,
#pxl-content-main .vv-es-card--image .vv-es-btn .elementor-button:focus-visible {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--vv-navy);
}

/* =====================================================================
   8. Cartes claires (Visage 04-07, Mains, Pieds)
   ===================================================================== */

#pxl-content-main .vv-es-row--cards {
	--gap: 24px;
}
#pxl-content-main .vv-es-card--light {
	position: relative;
	border-radius: 6px;
	border-color: var(--vv-line);
	--padding-top: 38px;
	--padding-right: 38px;
	--padding-bottom: 36px;
	--padding-left: 38px;
	transition: transform 0.7s var(--vv-ease), box-shadow 0.7s var(--vv-ease), border-color 0.7s var(--vv-ease);
}
#pxl-content-main .vv-es-card--light:hover {
	transform: translateY(-5px);
	border-color: rgba(15, 31, 52, 0.28);
	box-shadow: 0 34px 60px -34px rgba(15, 31, 52, 0.28);
}
#pxl-content-main .vv-es-card--light .vv-es-eyebrow .elementor-heading-title {
	font-size: 11.5px;
	margin-bottom: 4px;
}
#pxl-content-main .vv-es-card--light .vv-es-card-title .elementor-heading-title {
	font-size: clamp(26px, 2.1vw, 31px);
	line-height: 1.06;
}
#pxl-content-main .vv-es-card--light .vv-es-desc {
	font-size: 15.5px;
	line-height: 1.72;
	margin-bottom: 24px;
}
#pxl-content-main .vv-es-card--light .vv-es-btn {
	margin-top: auto;
}
#pxl-content-main .vv-es-card--light .vv-es-btn .elementor-button {
	padding: 14px 24px;
	font-size: 11.5px;
}

/* option vernis : le fond brume suffit à la distinguer des soins, avec un
   filet plein un peu plus soutenu que celui des autres cartes */
#pxl-content-main .vv-es-card--option {
	background-color: var(--vv-mist) !important;
	border: 1px solid rgba(15, 31, 52, 0.20);
}
#pxl-content-main .vv-es-card--option:hover {
	border-color: rgba(15, 31, 52, 0.42);
}

/* =====================================================================
   9. Épilation — liste tarifaire à filets, deux colonnes
   ===================================================================== */

#pxl-content-main .vv-es-row--list.vv-es-list-ready {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(40px, 5vw, 88px);
	row-gap: 0;
	border-top: 1px solid var(--vv-line);
}
#pxl-content-main .vv-es-list-ready .vv-es-item {
	--width: 100%;
	--padding-top: 26px;
	--padding-right: 0;
	--padding-bottom: 26px;
	--padding-left: 0;
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto auto;
	grid-template-areas:
		"num title price btn"
		"num desc  price btn";
	column-gap: 22px;
	row-gap: 2px;
	align-items: center;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	transition: padding-left 0.5s var(--vv-ease);
}
#pxl-content-main .vv-es-list-ready .vv-es-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--vv-line);
	transform-origin: left center;
	transform: scaleX(var(--vv-l, 1));
}
#pxl-content-main .vv-es-list-ready .vv-es-item:hover {
	padding-left: 6px;
}
#pxl-content-main .vv-es-list-ready .vv-es-item > .vv-es-eyebrow,
#pxl-content-main .vv-es-list-ready .vv-es-item > .vv-es-eyebrow .elementor-widget-container,
#pxl-content-main .vv-es-list-ready .vv-es-item > .vv-es-eyebrow .elementor-heading-title {
	display: contents;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-sep,
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-eyebrow .elementor-heading-title::before {
	display: none;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-num {
	grid-area: num;
	align-self: start;
	font-family: var(--vv-display);
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0;
	color: rgba(15, 31, 52, 0.42);
	padding-top: 2px;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-price {
	grid-area: price;
	font-family: var(--vv-display);
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--vv-navy);
	padding: 0 8px 0 24px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-card-title {
	grid-area: title;
	margin: 0;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-card-title .elementor-heading-title {
	font-size: clamp(24px, 1.9vw, 28px);
	line-height: 1.1;
	margin: 0;
	transition: transform 0.5s var(--vv-ease);
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-desc {
	grid-area: desc;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: var(--vv-text);
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-btn {
	grid-area: btn;
	margin: 0;
	width: auto;
}
#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-btn .elementor-button {
	padding: 13px 20px;
	font-size: 11px;
	letter-spacing: 0.16em;
}

/* =====================================================================
   10. Repères — navy profond, numéros en Melodrama, filets blancs
   ===================================================================== */

#pxl-content-main .vv-es-reperes {
	--padding-top: clamp(84px, 10vw, 150px);
	--padding-bottom: clamp(84px, 10vw, 150px);
	position: relative;
	overflow: hidden;
}
#pxl-content-main .vv-es-reperes .vv-es-head {
	--width: 100%;
	--margin-bottom: clamp(48px, 6vw, 84px);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas:
		"eyebrow eyebrow"
		"title desc";
	column-gap: clamp(32px, 5vw, 96px);
	align-items: end;
}
#pxl-content-main .vv-es-reperes .vv-es-head .vv-es-eyebrow { grid-area: eyebrow; }
#pxl-content-main .vv-es-reperes .vv-es-head .vv-es-title { grid-area: title; margin-bottom: 0; }
#pxl-content-main .vv-es-reperes .vv-es-head .vv-es-desc { grid-area: desc; max-width: 440px; padding-bottom: 0.35em; }
#pxl-content-main .vv-es-reperes .vv-es-head .vv-es-title .elementor-heading-title { max-width: 14ch; }

#pxl-content-main .vv-es-row--reperes {
	--gap: 0;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
#pxl-content-main .vv-es-repere {
	position: relative;
	--width: 25%;
	--padding-top: 34px;
	--padding-right: 28px;
	--padding-bottom: 8px;
	--padding-left: 0;
	border: 0 !important;
}
#pxl-content-main .vv-es-repere::before {
	content: "";
	position: absolute;
	left: 0;
	right: 28px;
	top: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	transform-origin: left center;
	transform: scaleX(var(--vv-l, 1));
}
#pxl-content-main .vv-es-repere .vv-es-eyebrow .elementor-heading-title {
	font-family: var(--vv-display);
	font-size: 40px;
	letter-spacing: 0;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 22px;
}
#pxl-content-main .vv-es-repere .vv-es-eyebrow .elementor-heading-title::before {
	display: none;
}
#pxl-content-main .vv-es-repere .vv-es-card-title .elementor-heading-title {
	font-size: 25px;
	line-height: 1.1;
}
#pxl-content-main .vv-es-repere .vv-es-desc {
	font-size: 15px;
	line-height: 1.7;
	max-width: 260px;
}

/* =====================================================================
   11. Expérience — image à grand rayon, étapes en fil vertical
   ===================================================================== */

#pxl-content-main .vv-es-experience {
	--padding-top: clamp(84px, 10vw, 150px);
	--padding-bottom: clamp(84px, 10vw, 150px);
	overflow: hidden;
}
#pxl-content-main .vv-es-exp-grid {
	--gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
#pxl-content-main .vv-es-exp-media {
	position: relative;
	overflow: hidden;
	border-radius: clamp(90px, 12vw, 170px) 6px 6px 6px;
	--min-height: 620px;
	--width: 42%;
	transform: translateZ(0);
}
#pxl-content-main .vv-es-exp-body {
	--width: calc(58% - clamp(40px, 6vw, 96px));
}
#pxl-content-main .vv-es-exp-body .vv-es-title .elementor-heading-title {
	max-width: 14ch;
}
#pxl-content-main .vv-es-exp-body .vv-es-desc {
	max-width: 500px;
}
#pxl-content-main .vv-es-row--steps {
	--gap: 0;
	column-gap: 0 !important;
	row-gap: 0 !important;
	flex-direction: column !important;
	position: relative;
	margin-top: 40px;
	border-top: 1px solid var(--vv-line);
}
#pxl-content-main .vv-es-row--steps::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--vv-navy);
	transform-origin: top center;
	transform: scaleY(var(--vv-line-p, 0));
	z-index: 1;
}
#pxl-content-main .vv-es-step {
	--width: 100%;
	--padding-top: 26px;
	--padding-right: 0;
	--padding-bottom: 26px;
	--padding-left: 34px;
	width: 100%;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-areas:
		"num title"
		"num desc";
	column-gap: 16px;
	row-gap: 4px;
	align-items: start;
	background: transparent !important;
	border-bottom: 1px solid var(--vv-line);
}
#pxl-content-main .vv-es-step .vv-es-eyebrow {
	grid-area: num;
	margin: 0;
}
#pxl-content-main .vv-es-step .vv-es-eyebrow .elementor-heading-title {
	font-family: var(--vv-display);
	font-size: 30px;
	letter-spacing: 0;
	font-weight: 400;
	line-height: 1;
	color: var(--vv-navy);
}
#pxl-content-main .vv-es-step .vv-es-eyebrow .elementor-heading-title::before {
	display: none;
}
#pxl-content-main .vv-es-step .vv-es-card-title {
	grid-area: title;
	margin: 0;
}
#pxl-content-main .vv-es-step .vv-es-card-title .elementor-heading-title {
	font-size: 24px;
	line-height: 1.15;
}
#pxl-content-main .vv-es-step .vv-es-desc {
	grid-area: desc;
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
	max-width: 440px;
}

/* =====================================================================
   12. Informations pratiques — composition de la démo Serava « Your
       Wellness Journey Begins Here » : photo en fond, grande typographie
       en capitales blanches à gauche, appel à l'action à droite dans un
       panneau de verre dépoli, calé au centre de la hauteur.
   ===================================================================== */

#pxl-content-main .vv-es-infos {
	--padding-top: clamp(96px, 11vw, 160px);
	--padding-bottom: clamp(96px, 11vw, 160px);
	position: relative;
	overflow: hidden;
}

/* voile dirigé : dense à gauche pour la typographie, plus clair à droite
   pour que le verre dépoli ait de la matière à flouter */
#pxl-content-main .vv-es-infos::before {
	background-color: transparent !important;
	background-image:
		linear-gradient(97deg, rgba(15, 31, 52, 0.95) 0%, rgba(15, 31, 52, 0.91) 40%, rgba(15, 31, 52, 0.84) 74%, rgba(15, 31, 52, 0.80) 100%),
		/* le ciel de la photo est le point le plus clair : on l'éteint par le haut */
		linear-gradient(to bottom, rgba(15, 31, 52, 0.34) 0%, rgba(15, 31, 52, 0) 46%),
		linear-gradient(to top, rgba(15, 31, 52, 0.46) 0%, rgba(15, 31, 52, 0) 58%);
	opacity: 1 !important;
}

/* deux colonnes sans gouttière, comme la démo : l'écart vient du retrait
   de la colonne de texte */
#pxl-content-main .vv-es-infos-grid {
	--gap: 0;
	align-items: center;
}
#pxl-content-main .vv-es-infos-text {
	padding-right: clamp(28px, 4.5vw, 84px);
}
#pxl-content-main .vv-es-infos .vv-es-title .elementor-heading-title {
	font-size: clamp(38px, 5vw, 76px);
	line-height: 1.04;
	letter-spacing: 0.012em;
	max-width: 12ch;
	text-wrap: balance;
}
#pxl-content-main .vv-es-infos-text .vv-es-desc {
	font-size: 17px;
	line-height: 1.8;
	max-width: 420px;
}
#pxl-content-main .vv-es-infos-text .vv-es-desc strong {
	color: #FFFFFF;
	font-weight: 500;
}
#pxl-content-main .vv-es-infos-text .vv-es-desc + .vv-es-desc {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.20);
}

/* le panneau de verre : valeurs du bouton « style blur » du thème
   (voile blanc à 8 %, filet à 10 %, flou de 17,5 px) */
#pxl-content-main .vv-es-contact-card {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	--padding-top: clamp(38px, 3.6vw, 50px);
	--padding-right: clamp(30px, 3.2vw, 46px);
	--padding-bottom: clamp(38px, 3.6vw, 50px);
	--padding-left: clamp(30px, 3.2vw, 46px);
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(17.5px);
	backdrop-filter: blur(17.5px);
	color: #FFFFFF;
}
#pxl-content-main .vv-es-contact-card::after {
	content: "";
	position: absolute;
	right: -110px;
	top: -110px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	pointer-events: none;
}
#pxl-content-main .vv-es-contact-card .vv-es-card-title .elementor-heading-title {
	color: #FFFFFF;
	font-size: clamp(30px, 2.5vw, 38px);
	line-height: 1.06;
}
#pxl-content-main .vv-es-contact-card .vv-es-desc {
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 26px;
}
/* les deux appels à l'action s'empilent et prennent la même largeur */
#pxl-content-main .vv-es-contact-card .vv-es-btn-row {
	--flex-direction: column;
	--gap: 12px;
	flex-direction: column;
	align-items: stretch;
	row-gap: 12px;
	column-gap: 0;
}
#pxl-content-main .vv-es-contact-card .vv-es-btn .elementor-button {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* =====================================================================
   13. Encart final — composition de la démo « Our Team » : le texte tient
       la gauche en grandes capitales, les deux appels à l'action se
       groupent à droite dans un disque de verre dépoli.
   ===================================================================== */

#pxl-content-main .vv-es-final {
	--min-height: max(620px, 78svh);
	--padding-top: clamp(104px, 12vw, 172px);
	--padding-bottom: clamp(104px, 12vw, 172px);
	position: relative;
	overflow: hidden;
}

/* voile dirigé : dense à gauche pour le texte, transparent à droite pour que
   l'image reste lisible derrière le verre dépoli (sans quoi le flou ne rend rien) */
#pxl-content-main .vv-es-final::before {
	background-color: transparent !important;
	background-image:
		linear-gradient(97deg, rgba(15, 31, 52, 0.94) 0%, rgba(15, 31, 52, 0.88) 38%, rgba(15, 31, 52, 0.72) 72%, rgba(15, 31, 52, 0.66) 100%),
		linear-gradient(to top, rgba(15, 31, 52, 0.52) 0%, rgba(15, 31, 52, 0) 58%);
	opacity: 1 !important;
}

#pxl-content-main .vv-es-final .vv-es-final-body {
	--width: 100%;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"eyebrow cta"
		"title   cta"
		"desc    cta";
	column-gap: clamp(40px, 6vw, 104px);
	align-items: start;
}
#pxl-content-main .vv-es-final .vv-es-eyebrow { grid-area: eyebrow; }
#pxl-content-main .vv-es-final .vv-es-title { grid-area: title; }
#pxl-content-main .vv-es-final .vv-es-desc { grid-area: desc; }

#pxl-content-main .vv-es-final .vv-es-title .elementor-heading-title {
	font-size: clamp(38px, 5.2vw, 78px);
	line-height: 1.03;
	letter-spacing: 0.012em;
	max-width: 13ch;
	text-wrap: balance;
}
#pxl-content-main .vv-es-final .vv-es-desc {
	font-size: 17px;
	line-height: 1.72;
	max-width: 520px;
	margin-left: 0;
	margin-right: 0;
}

/* --- colonne des appels à l'action -------------------------------------- */

#pxl-content-main .vv-es-final .vv-es-btn-row {
	grid-area: cta;
	align-self: center;
	justify-self: end;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;   /* les deux boutons prennent exactement la même largeur */
	justify-content: center;
	width: 304px;
	--flex-direction: column;
	--align-items: stretch;
	--gap: 14px;
	row-gap: 14px;
	column-gap: 0;
}

/* le disque de verre de la démo (btn style-blur : voile blanc à 8 %, filet à
   10 %, flou de 17,5 px), ici en écrin des deux boutons */
#pxl-content-main .vv-es-final .vv-es-btn-row::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 356px;
	height: 356px;
	margin: -178px 0 0 -178px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(17.5px);
	backdrop-filter: blur(17.5px);
	pointer-events: none;
}

#pxl-content-main .vv-es-final .vv-es-btn {
	width: 100%;
}
#pxl-content-main .vv-es-final .vv-es-btn .elementor-button {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* l'anneau pointillé tourne autour du disque (posé en JS dans la colonne) */
#pxl-content-main .vv-es-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	width: 428px;
	height: 428px;
	margin: -214px 0 0 -214px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	pointer-events: none;
}
#pxl-content-main .vv-es-ring::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -4px;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: #FFFFFF;
}

/* =====================================================================
   14. Rideau d'entrée (posé en JS, une fois par session)
   ===================================================================== */

.vv-es-curtain {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #0F1F34;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vv-es-curtain__line {
	width: min(42vw, 260px);
	height: 1px;
	background: rgba(255, 255, 255, 0.85);
	transform: scaleX(0);
	transform-origin: left center;
}

/* =====================================================================
   15. Responsive
   ===================================================================== */

@media (max-width: 1200px) {
	#pxl-content-main .vv-es-repere {
		--width: 50%;
		--padding-bottom: 34px;
	}
}

@media (max-width: 1024px) {
	#pxl-content-main .vv-es-hero {
		--min-height: 560px;
		--padding-top: 84px;
		--padding-bottom: 64px;
	}
	#pxl-content-main .vv-es-univers .vv-es-head,
	#pxl-content-main .vv-es-reperes .vv-es-head {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"eyebrow"
			"title"
			"desc";
		row-gap: 18px;
	}
	#pxl-content-main .vv-es-univers .vv-es-head .vv-es-desc,
	#pxl-content-main .vv-es-reperes .vv-es-head .vv-es-desc {
		padding-bottom: 0;
		max-width: 560px;
	}
	#pxl-content-main .vv-es-row--list.vv-es-list-ready {
		grid-template-columns: minmax(0, 1fr);
	}
	#pxl-content-main .vv-es-exp-media {
		--width: 100%;
		--min-height: 460px;
		border-radius: 120px 6px 6px 6px;
	}
	#pxl-content-main .vv-es-exp-body {
		--width: 100%;
	}
	/* la piste déborde : elle défile au doigt, les bords se fondent pour le
	   suggérer, et le rail garde une petite marge de fin de course.
	   Les marges automatiques du rail centrent le sous-menu tant qu'il tient
	   dans la largeur ; dès qu'il déborde, elles retombent à zéro et la piste
	   repart du premier univers, qui reste ainsi lisible. */
	#pxl-content-main .vv-es-nav__inner {
		justify-content: flex-start;
		padding: 0;
	}
	#pxl-content-main .vv-es-nav__track {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		padding: 2px 20px;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	}
	#pxl-content-main .vv-es-nav__list {
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: auto;
	}

	/* informations pratiques : les colonnes s'empilent, le retrait saute */
	#pxl-content-main .vv-es-infos-text {
		padding-right: 0;
	}
	#pxl-content-main .vv-es-infos .vv-es-title .elementor-heading-title {
		max-width: 16ch;
	}

	/* encart final : une seule colonne, les boutons passent sous le texte */
	#pxl-content-main .vv-es-final .vv-es-final-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"eyebrow"
			"title"
			"desc"
			"cta";
		row-gap: 0;
	}
	#pxl-content-main .vv-es-final .vv-es-title .elementor-heading-title {
		max-width: 16ch;
	}
	#pxl-content-main .vv-es-final .vv-es-btn-row {
		justify-self: start;
		align-self: start;
		margin-top: 34px;
		width: 340px;
		max-width: 100%;
	}
	/* le verre dépoli et l'anneau tiennent à l'aise en vis-à-vis du texte,
	   pas sous lui : sur une colonne, seuls les boutons restent */
	#pxl-content-main .vv-es-final .vv-es-btn-row::after,
	#pxl-content-main .vv-es-ring {
		display: none;
	}
}

@media (max-width: 767px) {
	:root {
		--vv-es-header: 72px;
		--vv-es-nav: 72px;
	}
	#pxl-content-main .vv-es-hero {
		--min-height: 480px;
		--padding-top: 60px;
		--padding-bottom: 44px;
	}
	#pxl-content-main .vv-es-hero .vv-es-h1 .elementor-heading-title {
		font-size: clamp(34px, 9.4vw, 44px);
	}
	#pxl-content-main .vv-es .vv-es-eyebrow .elementor-heading-title {
		font-size: 11px;
		letter-spacing: 0.16em;
		gap: 10px;
	}
	#pxl-content-main .vv-es .vv-es-eyebrow .elementor-heading-title::before {
		width: 22px;
		flex: 0 0 22px;
	}
	#pxl-content-main .vv-es-stats {
		margin-top: 22px;
		--padding-top: 14px;
	}
	#pxl-content-main .vv-es-stats .vv-es-stat {
		flex: 0 0 50%;
		min-width: 0;
		padding-right: 14px;
	}
	#pxl-content-main .vv-es-stats .vv-es-stat + .vv-es-stat {
		padding-left: 14px;
	}
	#pxl-content-main .vv-es-stats .vv-es-stat:nth-child(3) {
		flex-basis: 100%;
		border-left: 0;
		padding-left: 0;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
	#pxl-content-main .vv-es-stats .vv-es-stat strong {
		font-size: 26px;
	}
	#pxl-content-main .vv-es-cue {
		display: none;
	}
	#pxl-content-main .vv-es-nav__link,
	#pxl-content-main .vv-es-nav__pill {
		height: 32px;
	}
	#pxl-content-main .vv-es-nav__link {
		padding: 0 14px;
		font-size: 10.5px;
	}
	#pxl-content-main .vv-es-nav__list {
		padding: 3px;
	}
	#pxl-content-main .vv-es-nav__pill {
		top: 3px;
	}
	#pxl-content-main .vv-es-card--image {
		--padding-top: 30px;
		--padding-right: 26px;
		--padding-bottom: 30px;
		--padding-left: 26px;
		--min-height: 380px;
	}
	#pxl-content-main .vv-es-row--feature > .vv-es-card--image {
		--min-height: 480px;
	}
	#pxl-content-main .vv-es-card--light {
		--padding-top: 30px;
		--padding-right: 26px;
		--padding-bottom: 30px;
		--padding-left: 26px;
	}
	#pxl-content-main .vv-es-list-ready .vv-es-item {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		grid-template-areas:
			"num title price"
			"num desc  price"
			"num btn   btn";
		row-gap: 8px;
		--padding-top: 22px;
		--padding-bottom: 22px;
	}
	#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-num {
		font-size: 22px;
	}
	#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-price {
		font-size: 22px;
		padding: 0 0 0 14px;
	}
	#pxl-content-main .vv-es-list-ready .vv-es-item .vv-es-btn {
		margin-top: 6px;
	}
	#pxl-content-main .vv-es-list-ready .vv-es-item:hover {
		padding-left: 0;
	}
	#pxl-content-main .vv-es-repere {
		--width: 100%;
		--padding-right: 0;
		--padding-bottom: 30px;
	}
	#pxl-content-main .vv-es-repere::before {
		right: 0;
	}
	#pxl-content-main .vv-es-repere .vv-es-desc {
		max-width: none;
	}
	#pxl-content-main .vv-es-exp-media {
		--min-height: 380px;
		border-radius: 90px 6px 6px 6px;
	}
	#pxl-content-main .vv-es-step {
		--padding-left: 22px;
		grid-template-columns: 44px minmax(0, 1fr);
	}
	#pxl-content-main .vv-es-step .vv-es-eyebrow .elementor-heading-title {
		font-size: 24px;
	}
	#pxl-content-main .vv-es-infos .vv-es-title .elementor-heading-title {
		font-size: clamp(32px, 9.2vw, 44px);
		letter-spacing: 0.01em;
		max-width: none;
	}
	#pxl-content-main .vv-es-contact-card::after {
		display: none;
	}
	#pxl-content-main .vv-es-final {
		--min-height: 540px;
	}
	#pxl-content-main .vv-es-final .vv-es-title .elementor-heading-title {
		font-size: clamp(32px, 9.2vw, 44px);
		letter-spacing: 0.01em;
		max-width: none;
	}
	#pxl-content-main .vv-es-final .vv-es-btn-row {
		width: 100%;
		margin-top: 28px;
	}
	#pxl-content-main .vv-es-btn-row {
		flex-direction: column;
		align-items: stretch;
	}
	#pxl-content-main .vv-es-btn-row .vv-es-btn .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* =====================================================================
   16. Mouvement réduit : tout est visible, rien ne bouge
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	#pxl-content-main .vv-es-cue::after,
	#pxl-content-main .vv-es-ring {
		animation: none;
	}
	#pxl-content-main .vv-es-media__img,
	#pxl-content-main .vv-es-card--light,
	#pxl-content-main .vv-es-btn .elementor-button,
	#pxl-content-main .vv-es-roll > span {
		transition: none;
	}
}