.s-hero {
	/* Proportions de la maquette (Accueil 13142:45441, hero 1920x1121) exprimées
	   en fractions : titre à 191px (1,7fr au-dessus) et 530px de champ en dessous
	   (4,73fr). À 1121px de haut la grille restitue la maquette au pixel près,
	   et conserve ses rapports à toute autre hauteur d'écran. */
	--hero-row-top: 1.7fr;
	--hero-row-bottom: 4.73fr;
	--hero-top-min: 132px; /* dégagement de la nav flottante : 41 + 60 + 31 */
	--hero-bottom-min: 32px;
	--hero-focal-x: 50%;
	--hero-focal-y: 50%; /* l image livrée est déjà recadrée au ratio de la maquette */

	position: relative;
	isolation: isolate;
	overflow: clip;

	/* Plein écran : svh (et non dvh) pour que l'encart reste visible barre d'URL
	   déployée, sans recalcul pendant le défilement. min-height et non height :
	   sur écran court le hero grandit au lieu de rogner le contenu. */
	min-height: 100vh;
	min-height: max(560px, 100svh);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows:
		minmax(var(--hero-top-min), var(--hero-row-top))
		auto
		minmax(var(--hero-bottom-min), var(--hero-row-bottom));

	color: var(--color-white);
	text-align: center;
}

/* Image de fond en <img> : découverte tôt par le préchargeur (LCP) et servie
   en srcset par WordPress, ce qu'un background-image inline ne permet pas. */
.s-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.s-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focal-x) var(--hero-focal-y);
}

/* Fond vidéo facultatif du héros d'accueil. Il recouvre l'image, qui reste
   servie dessous comme visuel d'attente, comme repli si la lecture est
   refusée, et comme élément LCP. Même cadrage que l'image pour que le
   passage de l'une à l'autre ne bouge pas d'un pixel.
   Pas de z-index négatif ici : `.s-hero__media` est déjà en absolu dans
   `.s-hero`, qui porte `isolation: isolate`. C'est ce qui manquait au
   bandeau CTA et qui y cachait sa vidéo sous le fond de sa propre section. */
.s-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focal-x) var(--hero-focal-y);
	pointer-events: none;
}

/* Voile discret : le ciel derrière le titre plafonne à 2,2:1 de contraste,
   sous le minimum AA (3:1) pour du grand texte. Teinté violet Envol plutôt
   que noir, pour ne pas ternir la photo. */
.s-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 78% at 50% 26%,
			rgba(41, 20, 68, 0.3) 0%,
			rgba(41, 20, 68, 0.18) 38%,
			rgba(41, 20, 68, 0.06) 60%,
			rgba(41, 20, 68, 0) 78%),
		linear-gradient(to bottom,
			rgba(41, 20, 68, 0.16) 0%,
			rgba(41, 20, 68, 0.1) 46%,
			rgba(41, 20, 68, 0) 68%);
}

.s-hero__content {
	grid-row: 2;
	justify-self: center;
	/* Largeur explicite : en justify-self:center la boite serait dimensionnee
	   par son contenu, et un % d enfant s y resoudrait en auto. */
	width: 100%;
	padding-inline: var(--gutter);
	max-width: 900px;
}

.s-hero__title {
	font-size: clamp(44px, 3.9vw, 75px);
	line-height: 1.2;
	text-shadow: 0 2px 30px rgba(35, 18, 58, 0.28);
}

.s-hero__subtitle {
	margin-top: 28px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(35, 18, 58, 0.36), 0 2px 18px rgba(35, 18, 58, 0.28);
}

.s-hero__box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 614px; /* cote du noeud Figma cta 13142:45533 */
	max-width: 100%;
	margin: 46px auto 0;
	padding: 21px 29px 21px 39px;
	border: 1px solid var(--color-white-30);
	border-radius: var(--angle-xl);
	background: var(--color-white-15);
	backdrop-filter: blur(23px);
	text-align: left;
}

/* La maquette ne dessine pas un filet plein mais un curseur de saisie :
   trait blanc de 1x22px en regard de la seule 2e ligne. */
.s-hero__box-text {
	position: relative;
	margin-top: 2px;
}

.s-hero__box-text::before {
	content: "";
	position: absolute;
	left: 1px;
	bottom: 0;
	width: 1px;
	height: 22px;
	background: var(--color-white);
}

.s-hero__box-label {
	font-weight: 500;
	margin-bottom: 12px;
}

.s-hero__box-placeholder {
	opacity: 0.5;
	padding-left: 12px;
}

/*
 * Envol — styles principaux.
 * Tokens issus des variables Figma « Envol-livraison ».
 */

/* ------------------------------------------------------------------
 * Fonts — Bespoke Serif (Fontshare), servies localement (RGPD)
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "Bespoke Serif";
	src: url("../fonts/bespoke-serif-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bespoke Serif";
	src: url("../fonts/bespoke-serif-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Bespoke Serif";
	src: url("../fonts/bespoke-serif-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bespoke Serif";
	src: url("../fonts/bespoke-serif-medium-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Bespoke Serif";
	src: url("../fonts/bespoke-serif-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
 * Design tokens (variables Figma)
 * ------------------------------------------------------------------ */

:root {
	/* Couleurs marque */
	--color-primary-0: #532b87; /* violet */
	--color-primary-1: #fff5ed; /* crème */
	--color-primary-2: #add1ed; /* bleu ciel */
	--color-primary-3: #def2ff; /* bleu pâle */
	--color-secondary-0: #e3daf8; /* lavande */
	--color-secondary-2: #ffe0e2; /* rose */
	--color-secondary-3: #91704f; /* brun */

	--color-white: #ffffff;
	--color-white-30: rgba(255, 255, 255, 0.3);
	--color-white-15: rgba(255, 255, 255, 0.15);

	--color-text: var(--color-secondary-3);
	--color-text-alternate: #ffffff;
	--color-text-tertiary: var(--color-primary-0);
	--bg-tertiary: #fff5ed;

	/* Typo */
	--font-main: "Bespoke Serif", Georgia, serif;
	--font-display: "Inter", system-ui, sans-serif;

	--size-h1: 48px;
	--size-h1-plus: 70px;
	--size-h2: 48px;
	--size-h3: 40px;
	--size-h4: 32px;
	--size-h5: 24px;
	--size-h6: 18px;

	/* Rayons */
	--angle-rond: 100px;
	--angle-xl: 14px;
	--angle-l: 10px;

	/* Ombres */
	--shadow-02: 0 1px 4px 0 rgba(25, 33, 61, 0.08);

	/* Motion — grammaire d interaction (survol / clic / panneaux) */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-press: 90ms;
	--dur-hover: 220ms;
	--dur-panel: 420ms;

	/* États — une seule valeur pour tout le site */
	--lift: -2px;
	--press: 0.985;
	--shadow-hover: 0 8px 24px rgba(25, 33, 61, 0.15);
	--focus-color: var(--color-primary-0);
	--focus-width: 2px;
	--focus-offset: 3px;

	/* Layout : contenu 1660px sur maquette 1920px (marges 130px) */
	--content-width: 1660px;
	--gutter: clamp(20px, 3.4vw, 65px);

	--footer-bg: #90b7d5;
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-primary-1);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Les éléments pilotés en JS (panneaux du quiz, nav mobile de la roue) portent
   l attribut hidden : il doit primer sur les display:flex des composants. */
[hidden] {
	display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin: 0;
}

h1 {
	font-size: var(--size-h1);
	line-height: 1.2;
}

h2 {
	font-size: var(--size-h2);
	line-height: 1.2;
}

h3 {
	font-size: var(--size-h3);
	line-height: 1.2;
}

h4 {
	font-size: var(--size-h4);
	line-height: 1.3;
}

h5 {
	font-size: var(--size-h5);
	line-height: 1.4;
}

h6 {
	font-size: var(--size-h6);
	line-height: 1.4;
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0;
}

.container {
	/* max-width inclut le padding (border-box) : +2 gouttières pour que le
	   contenu utile fasse bien 1660px avec des marges de 130px à 1920px. */
	max-width: calc(var(--content-width) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Boutons
 * ------------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 20px;
	border-radius: var(--angle-l);
	border: 1px solid var(--color-secondary-3);
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
	color: var(--color-secondary-3);
	background: transparent;
}

.btn--solid {
	background: var(--color-secondary-3);
	color: var(--color-text-alternate);
}

.btn--primary {
	background: var(--color-primary-0);
	border-color: var(--color-primary-0);
	color: var(--color-primary-1);
}

.btn .btn__icon {
	width: 24px;
	height: 24px;
}

/* ------------------------------------------------------------------
 * Header — barre de navigation flottante (pilule)
 * ------------------------------------------------------------------ */

.site-header {
	position: fixed;
	top: 41px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 90px;
	padding: 10px;
	border-radius: var(--angle-xl);
	background: rgba(255, 255, 255, 0.6);
}

.site-header__logo img {
	width: 121px;
	height: 26px;
	object-fit: contain;
}

.site-header__nav .menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav .menu a {
	display: inline-block;
	padding: 7px 9px; /* 7 + 1px de bordure = les 8px de la maquette */
	border: 1px solid transparent;
	border-radius: var(--angle-xl);
	font-size: 16px;
	color: var(--color-secondary-3);
	white-space: nowrap;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-header__account {
	width: 40px;
	padding-inline: 0;
}

.site-header__lang {
	font-weight: 500;
}

.site-header__toggle {
	display: none;
}

/* Aucun libellé de la barre ne doit se couper sur deux lignes. */
.site-header .btn {
	white-space: nowrap;
}

/* Sélecteur de langue */
.site-header__lang-wrap {
	position: relative;
}

.site-header__lang-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 10;
	min-width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--color-secondary-3);
	border-radius: var(--angle-l);
	background: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.site-header__lang-option {
	display: block;
	padding: 6px 14px;
	border-radius: var(--angle-l);
	font-size: 16px;
	color: var(--color-secondary-3);
	cursor: pointer;
}

.site-header__lang-option.is-current {
	font-weight: 500;
}

/* Le français n'est pas encore traduit : l'entrée est visible mais inerte. */
.site-header__lang-option[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
}

.site-header__lang-option:not([aria-disabled="true"]):hover {
	background: var(--color-primary-1);
}

@media (max-width: 1279px) {
	.site-header {
		top: 16px;
		left: 16px;
		right: 16px;
		transform: none;
	}

	.site-header__bar {
		gap: 16px;
		justify-content: space-between;
	}

	.site-header__nav {
		display: none;
	}

	.site-header--open .site-header__nav {
		display: block;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		padding: 16px;
		border-radius: var(--angle-xl);
		background: rgba(255, 255, 255, 0.95);
	}

	.site-header--open .site-header__nav .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.site-header__toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		background: none;
		border: 1px solid var(--color-secondary-3);
		border-radius: var(--angle-l);
		cursor: pointer;
	}

	.site-header__toggle span {
		display: block;
		height: 2px;
		background: var(--color-secondary-3);
		border-radius: 2px;
	}
}

/* ------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
	background: var(--footer-bg);
	padding-block: 35px;
	color: var(--color-primary-1);
}

.site-footer__disclaimer {
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 40px;
}

/* Carte newsletter */
.newsletter {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 28px 35px;
	margin-bottom: 40px;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--color-primary-2), var(--color-secondary-2));
	box-shadow: var(--shadow-02);
	color: var(--color-primary-0);
}

.newsletter__icon {
	width: 58px;
	height: 95px;
	flex-shrink: 0;
	margin-inline: 38px 0;
}

.newsletter__intro {
	width: 436px;
	flex-shrink: 0;
}

.newsletter__title {
	font-size: var(--size-h4);
	line-height: 1.3;
}

.newsletter__subtitle {
	font-size: 18px;
}

.newsletter__form {
	flex: 1;
}

.newsletter__field {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 7px 7px 7px 24px;
	border: 1px solid #47118d;
	border-radius: var(--angle-xl);
}

.newsletter__input {
	flex: 1;
	border: 0;
	background: none;
	font-family: var(--font-main);
	font-size: 16px;
	color: var(--color-primary-0);
	outline: none;
}

.newsletter__input::placeholder {
	color: var(--color-primary-0);
	opacity: 0.5;
}

.newsletter__submit {
	height: 40px;
	padding: 0 15px;
	border: 0;
	border-radius: 8px;
	background: var(--color-primary-0);
	color: var(--color-primary-1);
	font-family: var(--font-main);
	font-size: 16px;
	cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(25, 33, 61, 0.08));
}

.newsletter__consent {
	margin-top: 12px;
	font-size: 14px;
}

/* Colonnes de liens */
.site-footer__columns {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 37px; /* filet à y=692 dans la maquette */
}

.site-footer__brand {
	width: 253px;
}

.site-footer__brand img {
	/* le PNG est détouré : la boîte correspond à l encre du logo (253x54) */
	width: 253px;
	max-width: 100%;
	height: auto;
}

.footer-column {
	width: 200px;
}

.footer-column__title {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 16px;
}

.footer-column__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-column__links a {
	display: block;
	padding-block: 5px;
	font-size: 16px;
}

/* Colonne compte + stores */
.site-footer__aside {
	width: 167px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-footer__aside-title {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 16px;
}

.site-footer__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 135px;
	padding: 15px;
	border: 1px solid var(--color-primary-1);
	border-radius: var(--angle-xl);
	font-size: 18px;
	color: var(--color-primary-1);
}

.store-badges {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.store-badges img {
	height: 40px;
	width: auto;
}

/* Crédits */
.site-footer__credits {
	border-top: 1px solid var(--bg-tertiary);
	padding-top: 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 14px;
}

.site-footer__credits-links {
	display: flex;
	gap: 24px;
	align-items: center;
}

.site-footer__credits-links a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.site-footer__socials {
	display: flex;
	gap: 12px;
}

.site-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.site-footer__socials img {
	width: 30px;
	height: 30px;
}

/* ------------------------------------------------------------------
 * Fonds de sections (dégradés de la maquette, champ "Fond" du back-office)
 * ------------------------------------------------------------------ */

.has-bg-creme {
	background: var(--color-primary-1);
}

.has-bg-degrade-creme-bleu {
	background: linear-gradient(179deg, #fff5ed 1%, #90b7d5 99%);
}

/* Rectangle 20 (Figma 13142:45451, 2439 → 4037) : le dégradé court sur DEUX
   sections (témoignages puis étapes). Couleur charnière à 46,4 % : #cbd8e2. */
.has-bg-degrade-creme-bleu:has(+ .s-steps) {
	background: linear-gradient(179deg, #fff5ed 2.6%, #cbd8e2 100%);
}

.has-bg-degrade-creme-ciel {
	background: linear-gradient(179deg, #fff5ed 1%, #def2ff 48%, #83bad9 99%);
}

.has-bg-degrade-bleu-rose {
	background: linear-gradient(180deg, var(--color-primary-3), var(--color-secondary-2));
}

.has-bg-degrade-rose-bleu {
	/* Rectangle 32 (Figma 13142:45452) : 9260 → 10253, se raccorde au footer */
	background: linear-gradient(179.63deg, #ffe0e2 1.24%, #e3daf8 47.19%, #90b7d5 98.76%);
}

.has-bg-transparent {
	background: transparent;
}

/* Page Retreat : tranches des deux grands dégradés de la maquette
   (Rectangle 40 : crème → bleu pâle ; Rectangle 49 : bleu pâle → lavande → bleu profond).
   Chaque section porte sa tranche pour un raccord invisible. */
.has-bg-retreat-a1 { background: linear-gradient(180deg, #fff5ed, #f7f4f2); }
.has-bg-retreat-a2 { background: linear-gradient(180deg, #f7f4f2, #eff4f6); }
.has-bg-retreat-a3 { background: linear-gradient(180deg, #eff4f6, #e6f3fa); }
.has-bg-retreat-a4 { background: linear-gradient(180deg, #e6f3fa, #def2ff); }
.has-bg-retreat-b1 { background: linear-gradient(180deg, #def2ff, #e0eafd); }
.has-bg-retreat-b2 { background: linear-gradient(180deg, #e0e7fc, #e2e1fa); }
.has-bg-retreat-b3 { background: linear-gradient(180deg, #e2dff9, #d8d4f5); }
.has-bg-retreat-b4 { background: linear-gradient(180deg, #d3d1f3, #aec6e8); }
.has-bg-retreat-b5 { background: linear-gradient(180deg, #a5c1e5, #609bce); }
.has-bg-retreat-b6 { background: linear-gradient(180deg, #9cbce2, #609bce); }
.has-bg-retreat-b7 { background: linear-gradient(180deg, #609bce, #4e8fc7); }
.has-bg-retreat-b8 { background: linear-gradient(180deg, #4e8fc7, #2a78c1); }
.has-bg-retreat-b9 { background: linear-gradient(180deg, #2a78c1, #0461b5); }

/* Page Buy Subscription : zone lavande → bleu (Rectangle 42) */
.has-bg-buysub-haut { background: var(--color-secondary-0); }
.has-bg-buysub-bas { background: linear-gradient(180deg, var(--color-secondary-0), #90b7d5); }

/* Demi-dégradés : deux sections adjacentes partagent un grand dégradé de la maquette,
   coupé à une couleur charnière commune. */
.has-bg-degrade-creme-ciel-haut {
	background: linear-gradient(179deg, #fff5ed 2%, #cfe7f7 100%);
}

.has-bg-degrade-creme-ciel-bas {
	background: linear-gradient(179deg, #cfe7f7 0%, #83bad9 98%);
}

.has-bg-degrade-bleu-rose-haut {
	background: linear-gradient(180deg, var(--color-primary-3) 0%, #eee9f0 100%);
}

.has-bg-degrade-bleu-rose-bas {
	background: linear-gradient(180deg, #eee9f0 0%, var(--color-secondary-2) 100%);
}

/* ------------------------------------------------------------------
 * Interactions — hovers, transitions, apparitions au scroll
 * ------------------------------------------------------------------ */

/* Grammaire : tout ce qui est cliquable partage les mêmes courbes.
   Survol 220ms, clic 90ms (sec à l aller, doux au retour). */
a,
button,
summary,
input,
select,
textarea,
.s-quiz__item,
.s-cards__card {
	transition: background-color var(--dur-hover) var(--ease-out),
		color var(--dur-hover) var(--ease-out),
		border-color var(--dur-hover) var(--ease-out),
		box-shadow var(--dur-hover) var(--ease-out),
		transform var(--dur-hover) var(--ease-out),
		opacity var(--dur-hover) var(--ease-out),
		filter var(--dur-hover) var(--ease-out);
}

a:active,
button:active,
summary:active,
.s-quiz__item:active {
	transition-duration: var(--dur-press);
}

/* Enfoncement — une seule valeur pour tout le site. */
.btn:active,
.s-quiz__item:active,
.s-cards__cta:active,
.newsletter__submit:active,
.site-header__nav .menu a:active,
.s-faq__question:active .s-faq__toggle {
	transform: scale(var(--press));
}

/* Les liens en ligne ne peuvent pas se mettre à l échelle sans casser le flux. */
.site-footer a:active,
.site-footer__credits-links a:active {
	opacity: 0.5;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Focus clavier : un seul anneau, partout. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Sur fond sombre, l anneau passe en crème. */
.site-footer :where(a, button, input):focus-visible,
.s-cta-band :where(a, button):focus-visible,
.s-steps :where(a, button):focus-visible {
	outline-color: var(--color-primary-1);
}

.s-quiz__item:focus-visible {
	outline-offset: 4px;
}

/* Curseurs */
summary,
.s-faq__question,
.site-header__lang {
	cursor: pointer;
}

[disabled],
[aria-disabled="true"] {
	cursor: not-allowed;
}

/* Les pastilles « play » décoratives ne se font pas passer pour des boutons. */
span.s-quiz__play,
span.s-testimonials__play {
	cursor: default;
}

a.s-testimonials__play:active {
	transform: translate(-50%, -50%) scale(0.96);
	transition-duration: var(--dur-press);
}

/* Sur écran tactile, aucun survol ne doit rester « collé ». */
@media (hover: none) {
	.s-quiz__item:hover,
	.s-cards__card:hover,
	.btn-gradient:hover,
	.s-quiz__cta:hover,
	.s-cta-band__button:hover,
	.s-hero__box-button:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Boutons */
.btn:hover {
	background: var(--color-secondary-3);
	color: var(--color-text-alternate);
}

.btn--solid:hover {
	background: #a8845f;
	border-color: #a8845f;
}

.btn--primary:hover {
	background: #43226e;
	border-color: #43226e;
}

.btn-gradient:hover,
.s-quiz__cta:hover,
.s-cta-band__button:hover,
.s-hero__box-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(25, 33, 61, 0.15);
}

.btn-gradient:active,
.s-quiz__cta:active,
.s-cta-band__button:active,
.s-hero__box-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}

.btn-gradient:hover img,
.s-quiz__cta:hover img,
.s-cta-band__button:hover img,
.s-quiz-band__button:hover img {
	transform: rotate(-14deg);
}

.btn-gradient img,
.s-quiz__cta img,
.s-cta-band__button img,
.s-quiz-band__button img {
	transition: transform 0.25s ease;
}

/* Navigation */
.site-header__nav .menu a:hover,
.site-header__nav .menu .current-menu-item > a {
	border-color: var(--color-secondary-3);
}

/* Cartes du quiz symptômes */
.s-quiz__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(83, 43, 135, 0.12);
}

.s-quiz__item:active {
	transform: translateY(-1px) scale(var(--press));
	box-shadow: 0 4px 12px rgba(83, 43, 135, 0.1);
}

.s-quiz__close:hover {
	background: var(--color-secondary-3);
}

.s-quiz__close:hover img {
	filter: brightness(0) invert(1);
}

.s-quiz__play,
.s-testimonials__play {
	transition: transform 0.25s ease;
}

.s-quiz__media:hover .s-quiz__play,
.s-testimonials__media:hover .s-testimonials__play {
	transform: translate(-50%, -50%) scale(1.12);
}

/* Flèches du carrousel */
.s-testimonials__arrow:hover {
	opacity: 0.6;
}

.s-testimonials__arrow:active {
	transform: scale(0.94);
}

.s-testimonials__arrow--prev:active {
	transform: rotate(180deg) scale(0.94);
}

/* Bandeau quiz */
.s-quiz-band__button:hover {
	background: var(--color-primary-0);
	color: var(--color-primary-1);
}

.s-quiz-band__button:hover img {
	filter: brightness(0) invert(1);
}

/* FAQ */
/* Footer */
.site-footer a:hover {
	opacity: 0.7;
}

.site-footer__login:hover {
	background: var(--color-primary-1);
	color: var(--footer-bg);
	opacity: 1 !important;
}

.newsletter__submit:hover {
	background: #43226e;
}

/* Roue des advisors : au survol, le portrait laisse place à la spécialité
   (cercle filaire violet + texte brun), cf. capture du proto. */
.s-wheel__portrait img {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.s-wheel__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid var(--color-primary-0);
	border-radius: 50%;
	color: var(--color-secondary-3);
	font-size: 16px;
	text-align: center;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.s-wheel__portrait--has-label:hover img {
	opacity: 0;
	transform: scale(0.9);
}

.s-wheel__portrait--has-label:hover .s-wheel__label {
	opacity: 1;
	transform: scale(1);
}

/* ------------------------------------------------------------------
 * Apparition au scroll — socle et chorégraphie
 * Le JS (main.js) ne fait que poser data-rv="<rôle>" et --rv-d="<délai>".
 * Tout le mouvement vit ici, en opacity/transform/scale : composité,
 * aucun recalcul de layout, aucun CLS.
 * ------------------------------------------------------------------ */

:root {
	/* Courbes ------------------------------------------------------
	 * --ease-text  easeOutCubic. Départ franc mais non violent : le
	 *              texte reste lisible pendant ses 18 px de course.
	 * --ease-solid easeOutQuint. 80 % de la course dans le premier
	 *              tiers du temps, puis longue décélération : l'objet
	 *              « arrive et se pose ». Courbe des cartes.
	 * --ease-mass  easeOutExpo. Encore plus tranchée, réservée aux
	 *              masses (bandeaux, blocs) : lourd sans être lent.
	 * --ease-lift  easeOutBack adouci — dépassement ~2 %. Uniquement
	 *              sur les boutons : ce micro-rebond signale l'objet
	 *              cliquable. Au-delà de 1.3 ça devient cartoon, ce
	 *              qu'un site santé ne peut pas se permettre.
	 * --ease-draw  easeInOutCubic. Pour un TRACÉ (trait des étapes,
	 *              anneau de la roue) : départ posé, fin qui glisse —
	 *              le geste d'une main qui trace, pas un balayage.
	 * On n'utilise jamais `ease` : voir la justification ci-dessus.
	 * ------------------------------------------------------------ */
	--ease-text: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-solid: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-mass: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-lift: cubic-bezier(0.34, 1.26, 0.64, 1);
	--ease-draw: cubic-bezier(0.55, 0.05, 0.25, 1);

	/* Durées */
	--rv-fast: 480ms;
	--rv-text: 620ms;
	--rv-card: 760ms;
	--rv-mass: 900ms;

	/* Coefficient de distance (réduit en mobile, cf. reco 11) */
	--rv-y: 1;
}

/* État de départ commun. --rv-d est posé par le JS, élément par élément. */
.js [data-rv] {
	opacity: 0;
	transition-property: opacity, transform, scale;
	transition-duration: var(--rv-text);
	transition-timing-function: var(--ease-text);
	transition-delay: var(--rv-d, 0ms);
}

/* Un groupe qui entre en scène reçoit .is-in : lui-même s'il est animé,
   et tout son contenu marqué. */
.js [data-rv].is-in,
.js .is-in [data-rv] {
	opacity: 1;
	transform: none;
	scale: 1;
}

/* -- Chorégraphie par rôle ---------------------------------------- */

/* Plaque : grande carte (quiz, étapes, FAQ, histoire). Ne bouge pas —
   elle se révèle, son contenu monte à l'intérieur. */
.js [data-rv="plate"] {
	transition-duration: 560ms;
}

/* Bloc compact déplacé d'un seul tenant (carte 84 %, bandeau quiz). */
.js [data-rv="block"] {
	transform: translate3d(0, calc(40px * var(--rv-y)), 0);
	scale: 0.98;
	transition-duration: var(--rv-mass);
	transition-timing-function: var(--ease-mass);
}

/* Titre de section : course courte, sinon l'œil suit le texte. */
.js [data-rv="title"] {
	transform: translate3d(0, calc(18px * var(--rv-y)), 0);
}

/* Paragraphe, chapô, note : encore plus court, il suit son titre. */
.js [data-rv="text"] {
	transform: translate3d(0, calc(14px * var(--rv-y)), 0);
}

/* Carte de grille ou de carrousel : la seule à porter un scale visible
   (1,5 %) — c'est ce qui la fait « venir vers » le lecteur. */
.js [data-rv="card"] {
	transform: translate3d(0, calc(34px * var(--rv-y)), 0);
	scale: 0.985;
	transition-duration: var(--rv-card);
	transition-timing-function: var(--ease-solid);
}

/* Image plein cadre : plus de masse, donc plus lent et plus loin. */
.js [data-rv="media"] {
	transform: translate3d(0, calc(44px * var(--rv-y)), 0);
	scale: 0.97;
	transition-duration: var(--rv-mass);
	transition-timing-function: var(--ease-mass);
}

/* Bouton : court, rapide, micro-dépassement. Il arrive en dernier —
   on ne propose l'action qu'une fois le message lu. */
.js [data-rv="button"] {
	transform: translate3d(0, calc(12px * var(--rv-y)), 0);
	scale: 0.96;
	transition-duration: var(--rv-fast);
	transition-timing-function: var(--ease-lift);
}

/* Logos partenaires : quasi immobiles. Ce sont des marqueurs de
   crédibilité, ils doivent avoir l'air d'être DÉJÀ là. */
.js [data-rv="logo"] {
	transform: translate3d(0, calc(10px * var(--rv-y)), 0);
	transition-duration: var(--rv-fast);
}

/* Portrait de la roue : seulement scale + opacité. Surtout pas de
   transform ici — les portraits 1 et 4 portent déjà translateX(-50%)
   dans le CSS de la roue ; la propriété individuelle `scale` compose
   avec sans l'écraser. */
.js [data-rv="portrait"] {
	scale: 0.86;
	transition-duration: var(--rv-card);
	transition-timing-function: var(--ease-lift);
}

/* will-change ciblé : posé par le JS ~25 % d'écran avant l'entrée,
   retiré 2,2 s après. Jamais plus de 2 ou 3 groupes promus en couche
   GPU en même temps — le mettre dans .js [data-rv] maintiendrait ~40
   couches vivantes pendant toute la visite. */
.js .rv-armed [data-rv],
.js [data-rv].rv-armed {
	will-change: opacity, transform;
}

/* Chiffres animés : chasse fixe, sinon la largeur danse à chaque frame
   (et fait respirer la carte translucide). */
.s-stats__number,
.s-stat-photo__number,
.s-story__number,
[data-count] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}



@media (prefers-reduced-motion: reduce) {
	/* Rien ne bouge, rien ne reste caché. */
	.js [data-rv],
	.js [data-rv].is-in,
	.js .is-in [data-rv] {
		opacity: 1 !important;
		transform: none !important;
		scale: 1 !important;
		transition: none !important;
		will-change: auto !important;
	}

	/* Signatures : état final immédiat. */
	.s-parallax { transform: none !important; }
	.js .s-steps__step::after { transform: none !important; transition: none !important; }
	.js .s-wheel__ring circle { stroke-dashoffset: 0 !important; transition: none !important; }
	.js .s-story__image img { scale: 1 !important; transition: none !important; }
	.js .s-hero__box { animation: none !important; opacity: 1 !important; }

	/* Survols et animations décoratives préexistantes. */
	a,
	button,
	.s-quiz__item,
	.s-wheel__portrait img,
	.s-quiz__play,
	.s-testimonials__play {
		transition: none !important;
	}

	.s-marquee__track,
	.s-logos__list { animation: none !important; }
}

/* Tracé progressif des traits entre les étapes 1 → 2 → 3.
   Le trait existe déjà (.s-steps__step::after, border-top) : on ne fait
   que l'étirer depuis la gauche.
   Les deux délais ci-dessous sont accordés à la cascade des étapes
   (270 / 490 / 710 ms, cf. RV_STEP_BY_PARENT dans main.js) : si le pas
   de 220 ms change, ajuster ici. */
.js .s-steps__step:not(:last-child)::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms var(--ease-draw) var(--rv-line, 0ms);
}

.js .s-steps__card.is-in .s-steps__step:not(:last-child)::after {
	transform: scaleX(1);
}

.js .s-steps__step:nth-child(1) { --rv-line: 400ms; }
.js .s-steps__step:nth-child(2) { --rv-line: 620ms; }

/* En dessous de 1024 px les traits sont déjà en display:none
   (liste verticale) : rien à neutraliser. */

	/* ------------------------------------------------------------------
	 * Roue des advisors : anneau tracé depuis midi.
	 * Le cercle actuel est un border-radius CSS — un border ne se trace
	 * pas : on injecte un SVG (aucune dépendance) et on masque le ::before.
	 * Les portraits, eux, sont animés par le rôle « portrait » du socle
	 * (scale seul : les portraits 1 et 4 portent déjà un translateX(-50%)).
	 * À coller dans le même IIFE, après le moteur.
	 * ------------------------------------------------------------------ */
	if (document.documentElement.classList.contains('js')) {
		document.querySelectorAll('.s-wheel__circle').forEach(function (circle) {
			if (circle.querySelector('.s-wheel__ring')) { return; }
			var NS = 'http://www.w3.org/2000/svg';
			var svg = document.createElementNS(NS, 'svg');
			svg.setAttribute('class', 's-wheel__ring');
			svg.setAttribute('viewBox', '0 0 100 100');
			svg.setAttribute('aria-hidden', 'true');
			svg.setAttribute('focusable', 'false');

			var ring = document.createElementNS(NS, 'circle');
			ring.setAttribute('cx', '50');
			ring.setAttribute('cy', '50');
			ring.setAttribute('r', '50');
			// pathLength=100 : dasharray/offset se pilotent en % sans calculer
			// la circonférence, et restent justes à toutes les tailles.
			ring.setAttribute('pathLength', '100');
			svg.appendChild(ring);

			circle.insertBefore(svg, circle.firstChild);
			circle.classList.add('has-ring');
		});
	}

/* ---- CSS correspondant, à coller dans main.css ------------------- */
/*
.s-wheel__circle.has-ring::before {
	display: none;
}

.s-wheel__ring {
	position: absolute;
	inset: 11.5% 10.6% 11.3% 10.6%;
	overflow: visible;
	pointer-events: none;
	transform: rotate(-90deg);
}

.s-wheel__ring circle {
	fill: none;
	stroke: var(--color-primary-0);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1500ms var(--ease-draw) 120ms;
}

.js .s-wheel__circle.is-in .s-wheel__ring circle {
	stroke-dashoffset: 0;
}
*/

	/* ------------------------------------------------------------------
	 * Parallax des bandeaux photo plein cadre.
	 * On ne touche JAMAIS background-position (repeint tout le viewport) :
	 * l'image passe dans une couche dédiée qu'on déplace en translate3d,
	 * la seule propriété que le compositeur anime sans repeindre.
	 * À coller dans le même IIFE, après le moteur.
	 * ------------------------------------------------------------------ */
	if (document.documentElement.classList.contains('js') &&
		window.matchMedia('(min-width: 1024px) and (pointer: fine)').matches) {

		// 48 px de course TOTALE. Au-delà, ce n'est plus du relief, c'est du
		// mal de mer — et un sujet d'accessibilité vestibulaire.
		var RV_PARALLAX = 24;
		var rvLayers = [];

		document.querySelectorAll('.s-stats--photo, .s-cta-band, .s-stat-photo').forEach(function (section) {
			var img = section.style.backgroundImage;
			if (!img || img === 'none') { return; }

			var layer = document.createElement('span');
			layer.className = 's-parallax';
			layer.setAttribute('aria-hidden', 'true');
			layer.style.backgroundImage = img;
			section.insertBefore(layer, section.firstChild);
			section.style.backgroundImage = 'none';
			section.classList.add('has-parallax');
			rvLayers.push({ host: section, el: layer, y: null, next: null });
		});

		if (rvLayers.length) {
			var rvTicking = false;

			var rvScrollFrame = function () {
				var vh = window.innerHeight;

				// 1) LECTURES groupées.
				rvLayers.forEach(function (p) {
					var r = p.host.getBoundingClientRect();
					if (r.bottom < 0 || r.top > vh) { p.next = null; return; }
					// -1 quand la section arrive, 0 au centre, 1 quand elle sort.
					var prog = (r.top + r.height / 2 - vh / 2) / ((vh + r.height) / 2);
					p.next = (prog * -RV_PARALLAX).toFixed(2);
				});

				// 2) ÉCRITURES groupées — jamais de lecture entre deux écritures.
				rvLayers.forEach(function (p) {
					if (p.next === null || p.next === p.y) { return; }
					p.y = p.next;
					p.el.style.transform = 'translate3d(0,' + p.y + 'px,0)';
				});

				rvTicking = false;
			};

			var rvOnScroll = function () {
				if (rvTicking) { return; }
				rvTicking = true;
				window.requestAnimationFrame(rvScrollFrame);
			};

			window.addEventListener('scroll', rvOnScroll, { passive: true });
			window.addEventListener('resize', rvOnScroll);
			rvOnScroll();
		}
	}

/* ---- CSS correspondant, à coller dans main.css ------------------- */
/*
.has-parallax {
	position: relative;
	overflow: hidden;
}

.has-parallax > *:not(.s-parallax) {
	position: relative;
	z-index: 1;
}

.s-parallax {
	position: absolute;
	inset: -36px 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}
*/

/* ------------------------------------------------------------------
 * Section : Hero
 * ------------------------------------------------------------------ */

.s-hero__box-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 189px;
	height: 70px;
	padding: 20px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	color: #97a8ba;
	font-weight: 500;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Section : Logos partenaires
 * ------------------------------------------------------------------ */

.s-logos {
	background: var(--color-primary-1);
	padding: 159px 0 24px;
}

.s-logos__inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

.s-logos__title {
	flex-shrink: 0;
	max-width: 430px; /* coupe après « partners », comme la maquette */
	font-size: var(--size-h4);
	line-height: 1.3;
	color: var(--color-primary-0);
}

.s-logos__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: clamp(30px, 5.2vw, 100px);
	mix-blend-mode: darken;
}

.s-logos__logo {
	max-height: 120px;
	width: auto;
	min-width: 0; /* débloque flex-shrink sur les images : évite le débordement */
	object-fit: contain;
}

/* Piste doublée : le second groupe ne sert qu'au défilement mobile.
   Au-dessus de 767px la rangée tient dans la largeur, le groupe visible
   s'efface en `display: contents` pour que les logos restent les items
   flex directs de `.s-logos__list` : les `nth-child` du bloc 1700px et le
   sélecteur de descendant `.s-logos__list img` continuent de matcher à
   l'identique. */
.s-logos__group {
	display: contents;
}

.s-logos__group[aria-hidden] {
	display: none;
}

/* Cadres de la maquette (13142:45513-45516). Calé sur les 4 logos actuels ;
   un logo supplémentaire reprendrait simplement sa largeur naturelle. */
@media (min-width: 1700px) {
	.s-logos__list {
		flex: 0 0 auto;
		margin-left: auto;
		justify-content: flex-end;
		gap: 100px;
		height: 115px;
	}

	.s-logos__logo {
		flex: 0 0 auto;
		height: 120px;
		max-height: none;
	}

	.s-logos__logo:nth-child(1) { width: 193px; object-fit: cover; }
	.s-logos__logo:nth-child(2) { width: 104px; }
	.s-logos__logo:nth-child(3) { width: 237px; }
	.s-logos__logo:nth-child(4) { width: 253px; }
}

/* ------------------------------------------------------------------
 * Section : Symptômes (quiz interactif)
 * ------------------------------------------------------------------ */

.s-quiz {
	background: var(--color-primary-1);
	padding: 130px 0;
}

.s-quiz__card {
	position: relative;
	isolation: isolate;
	overflow: hidden; /* nécessaire pendant l interpolation de hauteur */
	border: 1px solid transparent; /* réservé : évite un saut de 2px à l ouverture */
	border-radius: var(--angle-xl);
	padding: 99px 89px 87px; /* colonnes de 474px et carte de 760px (Figma) */
	transition: padding var(--dur-panel) var(--ease-out),
		border-color var(--dur-panel) var(--ease-out),
		height var(--dur-panel) var(--ease-out);
}

/* Le dégradé passe sur un calque : seule son opacité est animable. */
.s-quiz__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(73deg, var(--color-secondary-2) 1%, var(--color-primary-3) 100%);
	transition: opacity var(--dur-panel) var(--ease-out);
}

/* État « détail » : le dégradé se dissout, le cadre brun apparaît. */
.s-quiz__card.is-detail {
	border-color: var(--color-secondary-3);
	background: var(--color-primary-1);
	padding: 50px 56px;
}

.s-quiz__card.is-detail::before {
	opacity: 0;
}

/* Fenêtre de mesure : le JS lit la hauteur d arrivée sans transition. */
.s-quiz__card.is-measuring,
.s-quiz__card.is-measuring::before,
.s-quiz__card.is-measuring * {
	transition: none !important;
}

/* Sortie vers le haut, entrée depuis le bas. */
.s-quiz__home,
.s-quiz__panel {
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.s-quiz__home.is-leaving,
.s-quiz__panel.is-leaving {
	opacity: 0;
	transform: translateY(-10px) scale(0.99);
	pointer-events: none;
}

.s-quiz__home.is-entering,
.s-quiz__panel.is-entering {
	opacity: 0;
	transform: translateY(16px) scale(0.99);
}

/* Cascade interne : la photo arrive avant le texte. */
.s-quiz__panel .s-quiz__media {
	transition: opacity 340ms var(--ease-out) 60ms, transform 340ms var(--ease-out) 60ms;
}

.s-quiz__panel .s-quiz__detail {
	transition: opacity 340ms var(--ease-out) 140ms, transform 340ms var(--ease-out) 140ms;
}

.s-quiz__panel.is-entering .s-quiz__media,
.s-quiz__panel.is-entering .s-quiz__detail {
	opacity: 0;
	transform: translateY(12px);
}

.s-quiz__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 108px;
}

.s-quiz__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.s-quiz__item {
	display: flex;
	align-items: center;
	gap: 49px;
	height: 194px;
	padding-inline: 64px;
	border: 0;
	border-radius: var(--angle-xl);
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	text-align: left;
	transition: background-color 0.2s ease;
}

.s-quiz__item:hover {
	background: rgba(255, 255, 255, 0.75);
}

.s-quiz__item-icon {
	width: 57px;
	height: 57px;
	object-fit: contain;
	flex-shrink: 0;
}

.s-quiz__item-label {
	font-family: var(--font-main);
	font-size: var(--size-h5);
	line-height: 1.4;
	color: var(--color-primary-0);
}

/* Panneau détaillé d'un symptôme */
.s-quiz__panel {
	display: flex;
	gap: clamp(40px, 5.4vw, 103px);
	align-items: flex-end; /* photo et CTA alignés par le bas (Figma) */
}

.s-quiz__media {
	position: relative;
	flex-shrink: 0;
	width: 477px;
	max-width: 40%;
}

.s-quiz__photo {
	width: 100%;
	height: 470px;
	object-fit: cover;
	border-radius: var(--angle-xl);
}

.s-quiz__duration {
	position: absolute;
	top: 31px;
	left: 32px;
	padding: 10px 15px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	color: var(--color-primary-0);
	font-size: var(--size-h6);
	line-height: 1.4;
}

.s-quiz__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: var(--angle-rond);
	background: var(--color-white);
}

.s-quiz__play img {
	width: 21.67px; /* ratio intrinsèque du tracé play.svg */
	height: 26px;
}

.s-quiz__detail {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.s-quiz__detail-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.s-quiz__tag {
	padding: 10px 15px;
	border-radius: var(--angle-xl);
	background: var(--color-secondary-3);
	color: var(--color-white);
	font-size: var(--size-h6);
	line-height: 1.4;
}

.s-quiz__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-secondary-3);
	border-radius: var(--angle-rond);
	background: none;
	cursor: pointer;
}

.s-quiz__close img {
	width: 12px;
	height: 12px;
}

.s-quiz__headline {
	font-size: var(--size-h4);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-quiz__review {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 28px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
}

.s-quiz__stars {
	display: flex;
	gap: 11px; /* pas de 39px du Figma (l icône est rognée au tracé) */
}

.s-quiz__stars img {
	width: 22px;
	height: 22px;
}

.s-quiz__quote {
	margin: 0;
	font-size: 21px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.35;
	color: var(--color-primary-0);
}

.s-quiz__author {
	font-size: 16px;
	font-style: italic;
	font-weight: 500;
	color: var(--color-primary-0);
}

.s-quiz__cta {
	display: inline-flex;
	align-items: center;
	gap: 66px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: linear-gradient(90deg, var(--color-secondary-2), var(--color-primary-3));
	color: var(--color-primary-0);
	font-size: 20px;
}

.s-quiz__cta img {
	width: 22px;
	height: 36px;
}

/* Bouton pilule dégradé (rose → bleu) avec clé violette */
.btn-gradient,
.s-quiz__cta {
	display: inline-flex;
	align-items: center;
	gap: 66px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: linear-gradient(90deg, var(--color-secondary-2), var(--color-primary-3));
	color: var(--color-primary-0);
	font-size: 20px;
}

.btn-gradient img,
.s-quiz__cta img {
	width: 22px;
	height: 36px;
}

/* ------------------------------------------------------------------
 * Section : Témoignages (carrousel)
 * ------------------------------------------------------------------ */

/* Le fond vient du champ « Fond » (classes .has-bg-*) ; sur l'Accueil le dégradé
   crème → bleu court sur témoignages + étapes. */
.s-testimonials {
	padding-block: 36px 60px;
}

.s-testimonials__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 78px;
}

.s-testimonials__track {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* aligné sur la marge de page de la maquette (130px à 1920) */
	padding-inline: max(var(--gutter), calc((100% - var(--content-width)) / 2));
}

/*
 * DÉROGATION ASSUMÉE À LA MAQUETTE (validée par Vincent, 2 sept. 2026).
 * Dans le Figma, le titre et les flèches sont décalés vers la droite parce
 * que la piste des témoignages part de la marge de contenu et déborde à
 * droite. C'est une erreur de la maquette : on les centre sur la section.
 * Ne pas « recorriger » vers le Figma lors d'un prochain audit.
 */

@media (min-width: 1024px) {
	.s-testimonials__text {
		flex: 0 0 368px;
		width: 368px;
	}
}

.s-testimonials__track::-webkit-scrollbar {
	display: none;
}

.s-testimonials__card {
	display: flex;
	align-items: center;
	gap: 50px;
	flex-shrink: 0;
	width: min(713px, 90vw);
	padding: 20px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	scroll-snap-align: start;
}

.s-testimonials__media {
	position: relative;
	flex-shrink: 0;
	width: 231px;
	height: 316px;
	border-radius: var(--angle-xl);
	overflow: hidden;
	background: var(--color-secondary-0);
}

.s-testimonials__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-testimonials__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: var(--angle-rond);
	background: var(--color-white);
}

.s-testimonials__play img {
	width: 18px;
	height: 18px;
}

.s-testimonials__quote {
	margin: 0 0 30px;
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
	color: var(--color-primary-0);
}

.s-testimonials__author {
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	color: var(--color-primary-0);
	opacity: 0.5;
}

.s-testimonials__nav {
	display: flex;
	justify-content: center;
	gap: 49px;
	margin-top: 78px;
}

.s-testimonials__arrow {
	position: relative;
	width: 92px;
	height: 92px;
	border: 0;
	padding: 0;
	background: url("../icons/circle-outline.svg") no-repeat center / contain;
	cursor: pointer;
}

.s-testimonials__arrow img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 36px;
	height: 36px;
}

.s-testimonials__arrow--prev {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------
 * Section : Étapes
 * ------------------------------------------------------------------ */

.s-steps {
	/* tranche basse du Rectangle 20 : reprend la charnière #cbd8e2 */
	background: linear-gradient(179deg, #cbd8e2 0%, #90b7d5 96.8%);
	padding-block: 60px;
}

.s-steps__card {
	max-width: 1346px;
	margin-inline: auto;
	padding: 65px 117px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
	text-align: center;
}

.s-steps__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-steps__subtitle {
	margin-top: 30px;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
}

.s-steps__list {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	list-style: none;
	margin: 52px auto 0;
	padding: 0;
	max-width: 939px; /* 3 cercles de 133px + 2 gouttières de 270px */
}

.s-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 133px; /* = diamètre du cercle */
}

/* Les libellés débordent de la colonne, comme dans la maquette */
.s-steps__label,
.s-steps__text {
	width: max-content;
	max-width: 240px;
}

/* Traits violets entre les étapes */
.s-steps__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 66px;
	left: 100%; /* bord droit du cercle */
	width: 270px; /* gouttière exacte de la maquette */
	border-top: 1px solid var(--color-primary-0);
}

.s-steps__image {
	width: 133px;
	height: 133px;
	object-fit: cover;
	border-radius: var(--angle-rond);
}

.s-steps__label {
	margin-top: 12px;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
}

.s-steps__text {
	font-size: 18px;
	color: var(--color-primary-0);
}

.s-steps__card .btn-gradient {
	margin-top: 52px;
	min-width: 331px;
	justify-content: space-between;
}

@media (max-width: 1023px) {
	.s-testimonials__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.s-testimonials__quote {
		font-size: 22px;
	}

	.s-testimonials__nav {
		margin-top: 40px;
	}

	.s-testimonials__arrow {
		width: 64px;
		height: 64px;
	}

	.s-steps__card {
		padding: 40px 24px;
	}

	.s-steps__list {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.s-steps__step:not(:last-child)::after {
		display: none;
	}

	.btn-gradient,
	.s-quiz__cta {
		gap: 24px;
		padding: 20px 32px;
	}
}

/* ------------------------------------------------------------------
 * Section : Hero de page (App / Retreats / Partners)
 * ------------------------------------------------------------------ */

.s-hero-page {
	position: relative;
	min-height: clamp(560px, 58.4vw, 1121px);
	background-size: cover;
	background-position: center top;
	display: flex;
	align-items: flex-start;
}

/* Le visuel du hero est un <img> (srcset + priorite de chargement) posé
   derrière le contenu ; le background-image ne sert plus que de repli. */
.s-hero-page {
	isolation: isolate;
	overflow: clip;
}

.s-hero-page__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.s-hero-page__inner {
	position: relative;
	width: 100%;
	padding-top: clamp(140px, 13.5vw, 259px);
}

.s-hero-page--center .s-hero-page__content {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.s-hero-page--left .s-hero-page__content {
	max-width: 700px;
	text-align: left;
}

.s-hero-page--text-white {
	color: var(--color-white);
}

.s-hero-page--text-violet {
	color: var(--color-primary-0);
}

.s-hero-page__title {
	font-size: clamp(44px, 3.9vw, 75px);
	line-height: 1.2;
}

.s-hero-page__subtitle {
	margin-top: 28px;
	font-size: 20px;
	font-weight: 500;
}

.s-hero-page__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 44px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	font-size: 20px;
	font-weight: 500;
}

.s-hero-page__cta--brun {
	background: var(--color-secondary-3);
	color: var(--color-white);
}

.s-hero-page__cta--violet {
	/* Figma : blanc à 30 % + flou d'arrière-plan, et non un aplat violet. */
	background: var(--color-white-30);
	-webkit-backdrop-filter: blur(23px);
	backdrop-filter: blur(23px);
	color: var(--color-white);
}

.s-hero-page__stores {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	margin-top: 44px;
	padding: 20px 30px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
}

.s-hero-page__stores-label {
	font-size: 22px;
	font-weight: 500;
	color: var(--color-primary-0);
	margin-right: 10px;
}

.s-hero-page__stores img {
	height: 61px;
	width: auto;
	border-radius: 8px;
}

.s-hero-page__badges {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 50px 0 0;
	padding: 0;
}

.s-hero-page__badge {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
}

.s-hero-page__badge-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: var(--color-white);
}

.s-hero-page__badge-icon {
	display: block;
	width: 27px;
	height: 27px;
	background: var(--color-secondary-3);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.s-hero-page__rating {
	position: absolute;
	right: var(--gutter);
	top: clamp(300px, 38.5vw, 739px);
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	padding: 15px 20px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	color: var(--color-primary-0);
}

.s-hero-page__rating-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.s-hero-page__rating-stars {
	display: flex;
	align-items: center;
	gap: 5px;
}

.s-hero-page__rating-stars img {
	width: 26px;
	height: 26px;
}

.s-hero-page__rating-stars .s-hero-page__rating-key {
	width: 24px;
	height: 28px;
}

.s-hero-page__rating-note {
	font-size: var(--size-h5);
}

.s-hero-page__rating-text {
	font-size: 18px;
}

/* ------------------------------------------------------------------
 * Section : Pictos ronds (+ image bandeau)
 * ------------------------------------------------------------------ */

.s-pictos {
	padding-block: 85px;
}

.s-pictos__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 83px;
}

.s-pictos__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
}

.s-pictos__list {
	display: flex;
	justify-content: center;
	gap: clamp(60px, 15vw, 286px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.s-pictos__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 275px;
	text-align: center;
}

.s-pictos__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 107px;
	height: 107px;
	border-radius: 50%;
	background: var(--color-primary-2);
}

.s-pictos__icon {
	display: block;
	width: 62px;
	height: 62px;
	background: var(--color-white);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.s-pictos__label {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
}

.s-pictos__media {
	position: relative;
	width: min(1409px, 100%);
}

.s-pictos__media img {
	width: 100%;
	height: clamp(320px, 34.6vw, 664px);
	object-fit: cover;
	border-radius: var(--angle-xl);
}

.s-pictos__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: var(--angle-rond);
	background: var(--color-white);
}

.s-pictos__play img {
	width: 32px;
	height: 32px;
	border-radius: 0;
}

/* ------------------------------------------------------------------
 * Section : Démo téléphone (« Try it now »)
 * ------------------------------------------------------------------ */

.s-tel-demo {
	padding-block: 130px;
}

.s-tel-demo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(40px, 5vw, 100px);
}

.s-tel-demo__title,
.s-tel-demo__text {
	flex: 1;
	color: var(--color-primary-0);
}

.s-tel-demo__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	text-align: right;
}

.s-tel-demo__text {
	font-size: 20px;
	font-weight: 500;
}

.s-tel-demo__media {
	flex-shrink: 0;
	width: min(1136px, 60%);
}

/* ------------------------------------------------------------------
 * Section : Grilles de cartes (why / usages / recherche)
 * ------------------------------------------------------------------ */

.s-cards {
	padding-block: 100px;
	text-align: center;
}

.s-cards__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-cards__subtitle {
	margin-top: 39px;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
}

.s-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1260px;
	margin: 100px auto 0;
}

.s-cards__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 50px;
	border-radius: var(--angle-xl);
	background: rgba(255, 255, 255, 0.5);
	color: var(--color-primary-0);
}

.s-cards--why .s-cards__image {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
}

.s-cards--why .s-cards__card-title {
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
}

.s-cards--usages .s-cards__card,
.s-cards--recherche .s-cards__card {
	background: var(--color-white);
}

.s-cards--usages .s-cards__card-title {
	font-size: var(--size-h5);
	line-height: 1.4;
}

.s-cards--usages .s-cards__image {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: var(--angle-l);
}

.s-cards--recherche .s-cards__card {
	background: transparent;
	border: 1px solid var(--color-primary-0);
	gap: 50px;
}

.s-cards--recherche .s-cards__image {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.s-cards--recherche .s-cards__card-title {
	margin-top: 10px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}

.s-cards--recherche .s-cards__note {
	font-size: 18px;
}

.s-cards--recherche .s-cards__cta {
	padding: 10px 16px;
	border-radius: var(--angle-rond);
	color: var(--color-primary-0);
	min-width: 153px;
}

.s-cards__text {
	font-size: 20px;
	line-height: 1.5;
}

.s-cards__note {
	font-size: 16px;
}

/* ------------------------------------------------------------------
 * Section : Stat sur photo (« 84% feel better »)
 * ------------------------------------------------------------------ */

.s-stat-photo {
	background-size: cover;
	background-position: center;
	padding-block: 190px 221px;
}

.s-stat-photo__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 391px;
	max-width: 100%;
	padding: 50px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	color: var(--color-primary-0);
	text-align: center;
	margin-left: clamp(0px, 10.9vw, 209px);
}

.s-stat-photo__number {
	font-size: var(--size-h1-plus);
	line-height: 1.2;
}

.s-stat-photo__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	margin-top: -20px;
}

.s-stat-photo__text {
	font-size: 20px;
}

.s-stat-photo__cta {
	width: 100%;
	justify-content: center;
	gap: 40px;
	font-weight: 500;
}

@media (max-width: 1023px) {
	.s-hero-page__rating {
		position: static;
		margin-top: 32px;
		display: inline-flex;
	}

	.s-hero-page__stores {
		flex-wrap: wrap;
	}

	.s-hero-page__badges {
		flex-wrap: wrap;
		gap: 20px;
	}

	.s-pictos__list {
		flex-direction: column;
		gap: 40px;
	}

	.s-tel-demo__inner {
		flex-direction: column;
	}

	.s-tel-demo__title {
		text-align: center;
	}

	.s-tel-demo__media {
		width: 100%;
	}

	.s-cards__grid {
		grid-template-columns: 1fr;
	}

	.s-stat-photo__card {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------
 * Section : Advisors (cartes portrait + spécialité)
 * ------------------------------------------------------------------ */

.s-advisors {
	padding-block: 100px;
	background-size: cover;
	text-align: center;
	color: var(--color-primary-0);
}

.s-advisors__title {
	font-size: var(--size-h3);
	line-height: 1.2;
}

.s-advisors__subtitle {
	margin-top: 30px;
	font-size: 20px;
	font-weight: 500;
}

.s-advisors__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin-top: 78px;
}

.s-advisors__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 40px 50px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
}

.s-advisors__photo {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
}

.s-advisors__name {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-primary-0);
}

.s-advisors__role {
	font-size: 17px;
	color: var(--color-secondary-3);
}

/* ------------------------------------------------------------------
 * Section : Avis écrits (carrousel)
 * ------------------------------------------------------------------ */

.s-reviews {
	padding-block: 100px;
	background-size: cover;
	text-align: center;
}

.s-reviews__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-reviews__subtitle {
	margin-top: 30px;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
	margin-bottom: 78px;
}

.s-reviews__track {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-inline: max(var(--gutter), calc((100% - var(--content-width)) / 2));
	text-align: left;
}

.s-reviews__track::-webkit-scrollbar {
	display: none;
}

.s-reviews__card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex-shrink: 0;
	width: min(713px, 90vw);
	padding: 40px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	scroll-snap-align: start;
}

.s-reviews__quote {
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
	color: var(--color-primary-0);
}

.s-reviews__author {
	display: flex;
	align-items: center;
	gap: 30px;
}

.s-reviews__avatar {
	width: 103px;
	height: 103px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.s-reviews__avatar--empty {
	background: #d9d9d9;
}

.s-reviews__name {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-secondary-3);
}

.s-reviews .s-testimonials__nav {
	margin-top: 78px;
}

.s-reviews__cta-wrap {
	margin-top: 78px;
}

.s-reviews__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 388px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-primary-0);
	color: var(--color-primary-1);
	font-size: 20px;
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Section : Liste à checks sur carte dégradée
 * ------------------------------------------------------------------ */

.s-checklist {
	padding-block: 140px 100px;
}

.s-checklist__card {
	display: flex;
	align-items: center;
	gap: clamp(40px, 5vw, 100px);
	padding: 70px;
	border-radius: var(--angle-xl);
	/* Figma 13142:45907 : -68,047deg ≡ 292deg, lavande en bas-droite. */
	background: linear-gradient(292deg, var(--color-secondary-0) 0%, var(--color-primary-3) 100%);
}

.s-checklist__media {
	flex-shrink: 0;
	width: min(551px, 40%);
}

.s-checklist__content {
	flex: 1;
	color: var(--color-primary-0);
}

.s-checklist__title {
	font-size: var(--size-h3);
	line-height: 1.2;
}

.s-checklist__subtitle {
	margin-top: 30px;
	font-size: 20px;
	font-weight: 500;
}

.s-checklist__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.s-checklist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 500;
}

.s-checklist__item img {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Section : Formulaire de contact
 * ------------------------------------------------------------------ */

.s-contact-form {
	padding-block: 100px;
}

.s-contact-form__card {
	display: flex;
	gap: clamp(50px, 7.8vw, 150px);
	padding: 65px;
	border-radius: 12px;
	background: var(--color-primary-1);
}

.s-contact-form__intro {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 362px;
	flex-shrink: 0;
}

.s-contact-form__title {
	font-size: var(--size-h2);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-contact-form__text {
	font-size: 18px;
	color: var(--color-primary-0);
}

.s-contact-form__image {
	width: 100%;
	height: 257px;
	object-fit: cover;
	border-radius: 12px;
}

.s-contact-form__form {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.s-contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.s-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
	color: var(--color-primary-0);
}

.s-contact-form__field input,
.s-contact-form__field textarea {
	padding: 12px;
	border: 1px solid var(--color-primary-0);
	border-radius: var(--angle-xl);
	background: transparent;
	font-family: var(--font-main);
	font-size: 16px;
	color: var(--color-primary-0);
	outline: none;
	resize: vertical;
}

.s-contact-form__field input::placeholder,
.s-contact-form__field textarea::placeholder {
	color: rgba(145, 112, 79, 0.3);
}

.s-contact-form__field input:focus,
.s-contact-form__field textarea:focus {
	box-shadow: 0 0 0 1px var(--color-primary-0);
}

.s-contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.s-contact-form__terms {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-primary-0);
}

.s-contact-form__terms a {
	text-decoration: underline;
}

.s-contact-form__submit {
	min-width: 266px;
	padding: 14px 18px;
	border: 0;
	border-radius: 30px;
	background: var(--color-primary-0);
	color: var(--color-white);
	font-family: var(--font-main);
	font-size: 17px;
	cursor: pointer;
	box-shadow: var(--shadow-02);
}

.s-contact-form__submit:hover {
	background: #43226e;
}

@media (max-width: 1279px) {
	.s-advisors__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1023px) {
	.s-advisors__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.s-reviews__quote {
		font-size: 22px;
	}

	.s-reviews__cta {
		min-width: 0;
	}

	.s-checklist__card {
		flex-direction: column;
		padding: 40px 24px;
	}

	.s-checklist__media {
		width: 100%;
	}

	.s-checklist__list {
		grid-template-columns: 1fr;
	}

	.s-contact-form__card {
		flex-direction: column;
		padding: 40px 24px;
	}

	.s-contact-form__intro {
		width: auto;
	}

	.s-contact-form__row {
		grid-template-columns: 1fr;
	}

	.s-contact-form__footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
 * Tunnel d'achat : tableau prix, premium, bénéfices, checkout
 * ------------------------------------------------------------------ */

/* La rangée de CTA est un conteneur flex : le `text-align: center` posé
   sur `.s-hero-page__content` ne l'aligne donc pas. Le `justify-content:
   inherit` qui se trouvait ici ne l'alignait pas davantage, la propriété
   n'étant pas héritée : `inherit` reprenait la valeur calculée du parent,
   un bloc, soit `normal`, qui se comporte comme `flex-start`. Le bouton
   « Join now » du héros Retreats, variante centrée, restait donc collé au
   bord gauche de sa colonne. On aligne explicitement, variante par
   variante. */
.s-hero-page__ctas {
	display: flex;
	gap: 20px;
	justify-content: flex-start;
	margin-top: 44px;
	flex-wrap: wrap;
}

.s-hero-page--center .s-hero-page__ctas {
	justify-content: center;
}

.s-hero-page__ctas .s-hero-page__cta {
	margin-top: 0;
	gap: 24px;
}

.s-hero-page__cta--blanc {
	background: var(--color-white);
	color: var(--color-primary-0);
	border: 1px solid var(--color-primary-0);
}

.s-hero-page__cta--brun img {
	width: 22px;
	height: 36px;
}

/* Tableau comparatif des formules */
.s-pricing-table {
	padding-block: 130px 60px;
	text-align: center;
}

.s-pricing-table__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-pricing-table__subtitle {
	margin-top: 30px;
	font-size: 18px;
	color: var(--color-primary-0);
}

.s-pricing-table__scroll {
	overflow-x: auto;
	margin-top: 60px;
}

.s-pricing-table__table {
	width: min(1310px, 100%);
	margin-inline: auto;
	border-collapse: collapse;
	color: var(--color-primary-0);
}

.s-pricing-table__table th,
.s-pricing-table__table td {
	padding: 20px 30px;
	border-bottom: 1px solid rgba(83, 43, 135, 0.25);
	vertical-align: middle;
}

.s-pricing-table__table thead th {
	border-bottom: 0;
	vertical-align: bottom;
	padding-bottom: 30px;
}

.s-pricing-table__features-col {
	width: 413px;
	text-align: left;
}

.s-pricing-table__features-label {
	font-size: 20px;
	font-weight: 500;
}

.s-pricing-table__price {
	font-size: 24px;
	font-style: italic;
}

.s-pricing-table__period {
	font-size: 20px;
	font-weight: 500;
}

.s-pricing-table__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	padding: 14px 18px;
	min-width: 265px;
	border-radius: 30px;
	background: var(--color-primary-0);
	color: var(--color-white);
	font-size: 17px;
	box-shadow: var(--shadow-02);
}

.s-pricing-table__col--highlight {
	background: linear-gradient(90deg, rgba(255, 224, 226, 0.6), rgba(222, 242, 255, 0.6));
}

.s-pricing-table__feature {
	text-align: left;
	font-size: 17px;
}

.s-pricing-table__cell img {
	width: 30px;
	height: 30px;
	margin-inline: auto;
}

/* Éléments réservés au mobile (switcher de formules, tabs premium, flèches advisors) */
.s-pricing-table__mobile,
.s-premium__tabs,
.s-advisors__nav {
	display: none;
}

/* Roue des bénéfices */
.s-benefits {
	padding-block: 100px;
	display: flex;
	justify-content: center;
}

.s-benefits__circle {
	position: relative;
	width: min(937px, 92vw);
	aspect-ratio: 937 / 848;
}

.s-benefits__circle::before {
	content: "";
	position: absolute;
	inset: 12% 10%;
	border: 1px solid var(--color-primary-0);
	border-radius: 50%;
}

.s-benefits__center {
	position: absolute;
	inset: 44% 25% auto;
	transform: translateY(-50%);
	text-align: center;
	color: var(--color-primary-0);
}

.s-benefits__title {
	font-size: var(--size-h3);
	line-height: 1.2;
}

.s-benefits__note {
	margin-top: 44px;
	font-size: 20px;
	font-weight: 500;
}

.s-benefits__bubble {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 21.4%;
	aspect-ratio: 1;
	padding: 16px;
	border: 1px solid var(--color-primary-0);
	border-radius: 50%;
	background: var(--color-secondary-0);
	color: var(--color-primary-0);
	font-size: 18px;
	text-align: center;
}

.s-benefits__bubble img {
	width: 26px;
	height: 26px;
}

.s-benefits__bubble--1 { top: 0; left: 50%; transform: translateX(-50%); }
.s-benefits__bubble--2 { top: 29.7%; left: 3.5%; }
.s-benefits__bubble--3 { top: 29.7%; right: 3.5%; }
.s-benefits__bubble--4 { bottom: 5%; left: 20%; }
.s-benefits__bubble--5 { bottom: 5%; right: 20%; }

/* Carte premium + plans */
.s-premium {
	padding-block: 60px;
}

.s-premium__card {
	display: flex;
	gap: clamp(50px, 6.6vw, 127px);
	padding: clamp(40px, 5.2vw, 100px);
	border-radius: var(--angle-xl);
	background: var(--color-primary-0);
	color: var(--color-primary-1);
}

.s-premium__intro {
	display: flex;
	flex-direction: column;
	gap: 33px;
	align-items: flex-start;
	width: 563px;
	max-width: 45%;
}

.s-premium__badge {
	padding: 10px 15px;
	border-radius: var(--angle-xl);
	background: var(--color-secondary-3);
	color: var(--color-white);
	font-size: var(--size-h6);
}

.s-premium__title {
	font-size: clamp(44px, 3.6vw, 70px);
	line-height: 1.2;
}

.s-premium__text {
	font-size: 20px;
	font-weight: 500;
}

.s-premium__features {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.s-premium__features li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 18px;
}

.s-premium__features img {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
}

.s-premium__plans {
	display: flex;
	gap: 30px;
	flex: 1;
	align-items: stretch;
}

.s-premium__plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	flex: 1;
	padding: 40px;
	border-radius: var(--angle-xl);
	text-align: center;
}

.s-premium__plan--violet {
	background: #643b99;
	color: var(--color-primary-1);
	filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.25));
}

.s-premium__plan--degrade {
	background: linear-gradient(207deg, var(--color-secondary-2) 2%, var(--color-primary-3) 99%);
	color: var(--color-primary-0);
	filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.9));
}

.s-premium__plan-icons {
	display: flex;
	gap: 10px;
}

.s-premium__plan-icons img {
	width: 33px;
	height: 33px;
}

.s-premium__plan--violet .s-premium__plan-icons img {
	filter: brightness(0) invert(1);
}

.s-premium__plan-name h3 {
	font-size: var(--size-h4);
	line-height: 1.3;
}

.s-premium__plan-name p {
	font-size: 18px;
}

.s-premium__plan-price {
	font-size: var(--size-h2);
	line-height: 1.2;
}

.s-premium__plan-divider {
	width: 235px;
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0;
	opacity: 0.6;
}

.s-premium__plan-checks {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.s-premium__plan-checks li {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 18px;
}

.s-premium__plan-checks img {
	width: 28px;
	height: 28px;
}

.s-premium__plan-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 236px;
	padding: 14px 18px;
	border-radius: 30px;
	background: var(--color-secondary-3);
	color: var(--color-white);
	font-size: 17px;
	box-shadow: var(--shadow-02);
}

/* Pictos : variante numérotée avec traits */
.s-pictos__circle-img {
	width: 107px;
	height: 107px;
}

.s-pictos__text {
	font-size: 17px;
	color: var(--color-primary-0);
}

.s-pictos__list--lines {
	position: relative;
	gap: clamp(60px, 7vw, 135px);
}

.s-pictos__list--lines .s-pictos__item {
	position: relative;
	max-width: 336px;
	gap: 28px;
}

.s-pictos__list--lines .s-pictos__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 53px;
	left: calc(50% + 54px + 30px);
	width: calc(100% + clamp(60px, 7vw, 135px) - 168px);
	border-top: 1px solid var(--color-primary-0);
}

/* Checkout */
.s-checkout {
	background-size: cover;
	background-position: center;
	padding-block: 100px 340px;
	position: relative;
}

.s-checkout__inner {
	position: relative;
}

.s-checkout__card {
	width: min(976px, 100%);
	padding: 40px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
}

.s-checkout__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 30px;
}

.s-checkout__box {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
}

.s-checkout__box--empty {
	align-items: center;
	text-align: center;
	color: var(--color-primary-0);
	font-size: 18px;
}

.s-checkout__plan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.s-checkout__plan-info {
	display: flex;
	align-items: center;
	gap: 50px;
}

.s-checkout__plan-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 108px;
	border-radius: var(--angle-xl);
	background: linear-gradient(90deg, var(--color-secondary-2), var(--color-primary-3));
	color: var(--color-primary-0);
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	padding: 10px;
}

.s-checkout__plan-name {
	font-size: 18px;
	color: var(--color-primary-0);
}

.s-checkout__plan-price {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-checkout__change {
	padding: 14px 18px;
	min-width: 172px;
	text-align: center;
	border: 1px solid var(--color-primary-0);
	border-radius: 30px;
	color: var(--color-primary-0);
	font-size: 17px;
	box-shadow: var(--shadow-02);
}

.s-checkout__row {
	display: flex;
	gap: 20px;
}

.s-checkout__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 18px;
	color: var(--color-primary-0);
}

.s-checkout__field--qty {
	width: 192px;
	flex-shrink: 0;
}

.s-checkout__field--email {
	flex: 1;
}

.s-checkout__field input[type="email"] {
	height: 72px;
	padding-inline: 24px;
	border: 1px solid var(--color-secondary-3);
	border-radius: 20px;
	background: var(--color-white);
	font-family: var(--font-main);
	font-size: 18px;
	color: var(--color-primary-0);
	outline: none;
}

.s-checkout__field input[type="email"]::placeholder {
	color: var(--color-primary-0);
	opacity: 0.5;
}

.s-checkout__qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding-inline: 16px;
	border: 1px solid var(--color-secondary-3);
	border-radius: 20px;
	background: var(--color-white);
}

.s-checkout__qty button {
	border: 0;
	background: none;
	font-size: 20px;
	color: var(--color-primary-0);
	cursor: pointer;
	padding: 8px;
}

.s-checkout__qty input {
	width: 60px;
	border: 0;
	text-align: center;
	font-family: var(--font-main);
	font-size: 22px;
	font-weight: 500;
	color: var(--color-primary-0);
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.s-checkout__qty input::-webkit-inner-spin-button,
.s-checkout__qty input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.s-checkout__payment {
	display: flex;
	align-items: center;
	gap: 20px;
}

.s-checkout__payment-label {
	font-size: 18px;
	color: var(--color-primary-0);
	width: 172px;
	flex-shrink: 0;
}

.s-checkout__payment-options {
	display: flex;
	gap: 27px;
	flex: 1;
}

.s-checkout__payment-option {
	flex: 1;
	cursor: pointer;
}

.s-checkout__payment-option input {
	position: absolute;
	opacity: 0;
}

.s-checkout__payment-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	border: 1px solid var(--color-primary-0);
	border-radius: 20px;
	background: var(--color-white);
	font-size: 18px;
	color: var(--color-primary-0);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.s-checkout__payment-box img {
	height: 37px;
	width: auto;
}

.s-checkout__payment-option input:checked + .s-checkout__payment-box {
	box-shadow: 0 0 0 2px var(--color-primary-0);
}

.s-checkout__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	border: 0;
	border-radius: 20px;
	background: var(--color-secondary-3);
	color: var(--color-primary-1);
	font-family: var(--font-main);
	font-size: 22px;
	font-weight: 500;
	cursor: pointer;
}

.s-checkout__submit:hover {
	background: #7a5d41;
	color: var(--color-primary-1);
}

.s-checkout__legal {
	font-size: 18px;
	color: rgba(145, 112, 79, 0.6);
	text-align: center;
}

.s-checkout__rating {
	position: absolute;
	right: var(--gutter);
	top: 180px;
}

/* Story : variantes du tunnel */
.s-story__card--img-right {
	flex-direction: row-reverse;
}

.s-story__card--rose-lavande {
	background: linear-gradient(248deg, var(--color-secondary-2) 0%, var(--color-secondary-0) 100%);
}

.s-story__card--bleu-lavande {
	background: linear-gradient(256deg, var(--color-secondary-0) 1%, var(--color-primary-2) 100%);
}

.s-story__surtitle {
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
}

.s-story__number {
	font-size: 96px;
	line-height: 1.2;
}

.s-story__card--tel .s-story__image img {
	height: auto;
	background: none;
}

@media (max-width: 1023px) {
	.s-premium__card {
		flex-direction: column;
	}

	.s-premium__intro {
		max-width: none;
		width: auto;
	}

	.s-premium__plans {
		flex-direction: column;
	}

	.s-benefits__center {
		inset: 40% 18% auto;
	}

	.s-benefits__title {
		font-size: 24px;
	}

	.s-benefits__note {
		margin-top: 16px;
		font-size: 14px;
	}

	.s-benefits__bubble {
		font-size: 12px;
		gap: 6px;
	}

	.s-benefits__bubble img {
		width: 18px;
		height: 18px;
	}

	.s-checkout {
		padding-block: 60px 160px;
	}

	.s-checkout__plan {
		flex-direction: column;
		align-items: flex-start;
	}

	.s-checkout__row,
	.s-checkout__payment {
		flex-direction: column;
		align-items: stretch;
	}

	.s-checkout__field--qty {
		width: auto;
	}

	.s-checkout__payment-label {
		width: auto;
	}

	.s-checkout__rating {
		position: static;
		margin-top: 24px;
		display: inline-flex;
	}

	.s-pictos__list--lines .s-pictos__item:not(:last-child)::after {
		display: none;
	}

	.s-story__card--img-right {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------
 * Sections Retreat : cartes glass, galerie, marquee, hôtes, chambres…
 * ------------------------------------------------------------------ */

.s-glass {
	padding: 130px 0 60px;
}

.s-glass__inner {
	display: flex;
	justify-content: center;
	gap: 19px;
}

.s-glass__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	flex: 1;
	max-width: 316px;
	min-height: 440px;
	padding: 50px;
	border: 1px solid var(--color-primary-1);
	border-radius: var(--angle-xl);
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
}

.s-glass__image {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	margin-block: 20px;
}

.s-glass__label {
	font-size: 22px;
	font-weight: 500;
	color: var(--color-primary-0);
	text-align: center;
}

/* Galerie avec badges */
.s-gallery-labels {
	padding-block: 30px;
}

.s-gallery-labels__item {
	position: relative;
	margin: 0 0 34px;
}

.s-gallery-labels__item img {
	width: 100%;
	height: clamp(400px, 39.6vw, 760px);
	object-fit: cover;
	border-radius: var(--angle-xl);
}

.s-gallery-labels__badge {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translateX(-50%);
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-white-30);
	backdrop-filter: blur(23px);
	color: var(--color-white);
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	white-space: nowrap;
}

/* Marquee photos */
.s-marquee {
	overflow: hidden;
	padding-block: 65px;
}

.s-marquee__track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: envol-marquee 60s linear infinite;
}

.s-marquee__track--reverse {
	animation-direction: reverse;
}

.s-marquee__group {
	display: flex;
	gap: 20px;
	padding-right: 20px;
}

.s-marquee__photo {
	width: 500px;
	height: 500px;
	object-fit: cover;
	border-radius: var(--angle-xl);
}

@keyframes envol-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.s-marquee__track {
		animation: none;
	}
}

/* Titre + note + CTA (extension s-heading) */
.s-heading__note {
	margin-top: 30px;
	font-size: 18px;
	font-style: italic;
	line-height: 1.6;
}

.s-heading__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-width: 388px;
	margin-top: 40px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-primary-0);
	color: var(--color-primary-1);
	font-size: 20px;
	font-weight: 500;
}

.s-heading__cta img {
	width: 22px;
	height: 36px;
}

.s-cta-band__note {
	margin-top: 30px;
	font-size: 18px;
	font-style: italic;
}

/* Polaroids (liste-checks) */
.s-checklist__card--polaroids .s-checklist__media {
	position: relative;
	min-height: 570px;
}

.s-checklist__card--polaroids .s-checklist__img-1,
.s-checklist__card--polaroids .s-checklist__img-2 {
	position: absolute;
	width: 78%;
	height: auto;
	aspect-ratio: 755 / 528;
	object-fit: cover;
	border: 10px solid var(--color-white);
	box-shadow: 0 10px 17px 6px rgba(0, 0, 0, 0.25);
}

.s-checklist__card--polaroids .s-checklist__img-1 {
	top: 0;
	right: 0;
	transform: rotate(-6deg);
}

.s-checklist__card--polaroids .s-checklist__img-2 {
	bottom: 0;
	left: 0;
	transform: rotate(7.5deg);
}

/* Avis : variante Retreat (photo + étoiles + titre) */
.s-reviews__image-top {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--angle-l);
}

.s-reviews__stars {
	display: flex;
	gap: 5px;
}

.s-reviews__stars img {
	width: 28px;
	height: 28px;
}

.s-reviews__card-title {
	font-size: var(--size-h5);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-primary-0);
}

/* Double CTA */
.s-double-cta {
	padding-block: 100px;
}

.s-double-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 70px;
	text-align: center;
}

.s-double-cta__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
}

.s-double-cta__buttons {
	display: flex;
	gap: 70px;
	flex-wrap: wrap;
	justify-content: center;
}

.s-double-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 388px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	color: var(--color-primary-1);
	font-size: 20px;
	font-weight: 500;
}

.s-double-cta__btn--brun {
	background: var(--color-secondary-3);
}

.s-double-cta__btn--violet {
	background: var(--color-primary-0);
}

.s-double-cta__btn--brun img {
	width: 32px;
	height: 32px;
	filter: brightness(0) invert(1);
}

.s-double-cta__btn--violet img {
	width: 22px;
	height: 36px;
}

/* Hôtes */
.s-hosts {
	padding-block: 100px 60px;
}

.s-hosts__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 90px;
}

.s-hosts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1396px;
	margin-inline: auto;
}

.s-hosts__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 50px;
	border-radius: var(--angle-xl);
	color: var(--color-secondary-3);
	text-align: center;
	filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
}

.s-hosts__card:nth-child(3n + 1) {
	background: var(--color-secondary-2);
	transform: rotate(-6deg);
}

.s-hosts__card:nth-child(3n + 2) {
	background: var(--color-primary-1);
	transform: rotate(6deg) translateY(-40px);
}

.s-hosts__card:nth-child(3n) {
	background: var(--color-primary-3);
	transform: rotate(6deg);
}

.s-hosts__photo {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	margin-block: 20px;
}

.s-hosts__name {
	font-size: 20px;
	font-weight: 500;
}

.s-hosts__text {
	font-size: 17px;
}

.s-hosts__text p {
	margin-block: 0 1em;
}

/* Chambres */
.s-rooms {
	padding-block: 60px;
}

.s-rooms__title {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 60px;
}

.s-rooms__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.s-rooms__card {
	display: flex;
	flex-direction: column;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	overflow: hidden;
}

.s-rooms__photo {
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.s-rooms__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 35px 50px 50px;
	text-align: center;
	color: var(--color-primary-0);
}

.s-rooms__capacity {
	display: flex;
	gap: 10px;
}

.s-rooms__capacity img {
	width: 24px;
	height: 24px;
}

.s-rooms__name {
	font-size: var(--size-h4);
	line-height: 1.3;
}

.s-rooms__subtitle {
	font-size: 18px;
}

.s-rooms__divider {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--color-primary-0);
	margin-block: 15px;
}

.s-rooms__price {
	font-size: 22px;
	font-weight: 500;
}

.s-rooms__price-note {
	font-size: 18px;
}

.s-rooms__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 15px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-primary-0);
	color: var(--color-primary-1);
	font-size: 20px;
	font-weight: 500;
}

.s-rooms__cta--soldout {
	background: var(--color-primary-1);
	color: var(--color-primary-0);
}

@media (max-width: 1023px) {
	.s-glass__inner {
		flex-wrap: wrap;
	}

	.s-glass__card {
		min-height: 0;
		flex-basis: 45%;
	}

	.s-gallery-labels__badge {
		font-size: 20px;
		padding: 18px 30px;
	}

	.s-marquee__photo {
		width: 300px;
		height: 300px;
	}

	.s-heading__cta,
	.s-double-cta__btn {
		min-width: 0;
	}

	.s-hosts__grid,
	.s-rooms__grid {
		grid-template-columns: 1fr;
	}

	.s-hosts__card:nth-child(n) {
		transform: none;
	}

	.s-checklist__card--polaroids .s-checklist__media {
		width: 100%;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.s-cta-band--haut {
		padding-block: 80px 260px;
	}
}

/* ------------------------------------------------------------------
 * Section : Chiffres clés sur photo (« Real results »)
 * ------------------------------------------------------------------ */

.s-stats {
	padding-block: 40px 340px;
	text-align: center;
}

.s-stats--photo {
	background-size: cover;
	background-position: center;
}

/* Variante sans photo (App « Where change becomes real ») : plus compacte */
.s-stats:not(.s-stats--photo) {
	padding-block: 130px;
}

.s-stats__subtitle {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-primary-0);
	margin: -44px 0 84px;
}

.s-stats:not(.s-stats--photo) .s-stats__title,
.s-stats:not(.s-stats--photo) .s-stats__subtitle {
	color: var(--color-primary-0);
}

.s-stats__cta {
	display: inline-flex;
	align-items: center;
	gap: 66px;
	margin-top: 100px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-white);
	color: var(--color-primary-0);
	font-size: 20px;
	font-weight: 500;
}

.s-stats__cta img {
	width: 22px;
	height: 36px;
}

.s-stats__title {
	font-size: var(--size-h2);
	line-height: 1.2;
	color: var(--color-primary-1);
	margin-bottom: 84px;
}

.s-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1342px;
	margin-inline: auto;
}

.s-stats__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0; /* les 20px du Figma sont sous le nombre uniquement */
	min-height: 296px;
	padding: 50px;
	border-radius: var(--angle-xl);
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	color: var(--color-primary-0);
}

.s-stats__number {
	font-size: var(--size-h1-plus);
	line-height: 1.2;
	margin-bottom: 20px;
}

.s-stats__text {
	font-size: 20px;
	font-weight: 500;
}

.s-stats__note {
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
}

/* ------------------------------------------------------------------
 * Section : Titre + sous-titre centrés
 * ------------------------------------------------------------------ */

.s-heading {
	/* pas de background ici : il vient du champ « Fond » (.has-bg-*) */
	padding-block: 70px;
	text-align: center;
	color: var(--color-primary-0);
}

.s-heading__title {
	font-size: var(--size-h3);
	line-height: 1.2;
}

.s-heading__subtitle {
	max-width: 909px;
	margin: 44px auto 0;
	font-size: 20px;
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Section : Roue des advisors
 * ------------------------------------------------------------------ */

.s-wheel {
	background: var(--color-primary-1);
	padding-block: 60px;
	display: flex;
	justify-content: center;
}

.s-wheel__circle {
	position: relative;
	width: min(806px, 90vw);
	aspect-ratio: 806 / 822;
}

/* Cercle violet */
.s-wheel__circle::before {
	content: "";
	position: absolute;
	inset: 11.5% 10.6% 11.3% 10.6%;
	border: 1px solid var(--color-primary-0);
	border-radius: 50%;
}

.s-wheel__center {
	position: absolute;
	inset: 47% 0 auto;
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	color: var(--color-primary-0);
	/* translate et non transform : voir les portraits 1 et 4 ci-dessous. */
	translate: 0 -50%;
}

.s-wheel__portrait {
	position: absolute;
	width: 24.81%; /* 200 / 806 — cadre « trombi » de la maquette */
	aspect-ratio: 1;
	border-radius: 50%;
	/* Disque opaque : il masque le grand cercle violet qui passe derrière, y
	   compris au survol, quand la photo s'efface au profit de la spécialité. */
	background: var(--color-primary-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.s-wheel__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	/* les fichiers sont recadrés sur le disque photo : clip franc au bord */
	clip-path: circle(50%);
}

/* Positions issues de la maquette (haut, haut-droite, bas-droite, bas, bas-gauche, haut-gauche) */
.s-wheel__portrait--1 { top: 0; left: 50%; translate: -50% 0; }
.s-wheel__portrait--2 { top: 19.1%; right: 1.9%; }
.s-wheel__portrait--3 { bottom: 16.9%; right: 1.9%; }
.s-wheel__portrait--4 { bottom: 0; left: 50%; translate: -50% 0; }
.s-wheel__portrait--5 { bottom: 16.9%; left: 2.1%; }
.s-wheel__portrait--6 { top: 19.1%; left: 2.1%; }

/* Rythme vertical de la zone crème (Figma : titre à 5150, roue 5412 → 6234,
   « Backed by research » à 6337). Desktop uniquement. */
@media (min-width: 1024px) {
	.s-heading:has(+ .s-wheel) {
		padding-block: 142px 44px;
	}

	.s-wheel {
		padding-block: 60px 33px;
	}

	.s-wheel__center {
		inset: 47.08% 0 auto;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Section : Image + texte (« Created from lived experience »)
 * ------------------------------------------------------------------ */

.s-story {
	background: var(--color-primary-1);
	padding-block: 70px;
}

.s-story__card {
	display: flex;
	gap: clamp(48px, 6vw, 120px);
	align-items: center;
	padding: clamp(40px, 5.47vw, 105px) clamp(24px, 7.24vw, 139px) clamp(40px, 5.42vw, 104px) clamp(24px, 4.7vw, 90px);
	border-radius: var(--angle-xl);
	background: linear-gradient(248deg, var(--color-secondary-0) 0%, var(--color-primary-2) 100%);
}

.s-story__image {
	flex-shrink: 0;
	width: min(688px, 48%);
}

.s-story__image img {
	width: 100%;
	height: 452px;
	object-fit: cover;
	border-radius: var(--angle-xl);
}

.s-story__content {
	flex: 1 1 auto;
	max-width: 565px;
	text-align: center;
	color: var(--color-primary-0);
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.s-story__title {
	font-size: var(--size-h3);
	line-height: 1.2;
}

.s-story__quote {
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
}

.s-story__text {
	font-size: 20px;
	line-height: 1.5;
}

.s-story__text p {
	margin-block: 0 1.5em; /* la maquette sépare par une ligne vide */
}

.s-story__text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Section : Bandeau CTA plein écran (« You're not alone »)
 * ------------------------------------------------------------------ */

.s-cta-band {
	background-size: cover;
	background-position: center;
	padding-block: 342px 100px;
	min-height: 700px;
	text-align: center;
	color: var(--color-primary-1);
}

.s-cta-band__title {
	font-size: var(--size-h1);
	line-height: 1.2;
}

.s-cta-band__subtitle {
	margin-top: 44px;
	font-size: 20px;
	font-weight: 500;
}

.s-cta-band__button {
	display: inline-flex;
	align-items: center;
	gap: 66px;
	margin-top: 44px;
	padding: 30px 50px;
	border-radius: var(--angle-rond);
	background: var(--color-primary-0);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 500;
	backdrop-filter: blur(23px);
}

.s-cta-band__button img {
	width: 22px;
	height: 36px;
}

/* ------------------------------------------------------------------
 * Section : Bandeau quiz (« Support for this moment »)
 * ------------------------------------------------------------------ */

.s-quiz-band {
	padding-block: 60px;
	background: transparent;
}

/* Accueil : la photo « Rectangle 29 » (Figma 13142:45447, 1920x1400) porte à la
   fois le bloc « You are not alone » ET le bandeau quiz posé par-dessus.
   342 + 272 (contenu) + 786 = 1400 ; le bandeau remonte de 431px dans la photo. */
@media (min-width: 1024px) {
	.home .s-cta-band--centre {
		min-height: 1400px;
		padding-block: 342px 786px;
	}

	.home .s-cta-band--centre + .s-quiz-band {
		position: relative;
		z-index: 1;
		margin-top: -431px;
		padding-block: 60px 115px;
	}
}

.s-quiz-band__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 256px;
	padding: 60px 120px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
}

.s-quiz-band__title {
	font-size: var(--size-h4);
	line-height: 1.3;
	color: var(--color-primary-0);
}

.s-quiz-band__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: min(740px, 100%);
	flex-shrink: 0;
	padding: 30px 47px 30px 50px;
	border: 1px solid var(--color-primary-0);
	border-radius: var(--angle-rond);
	color: var(--color-primary-0);
	font-size: 18px;
	font-weight: 500;
}

.s-quiz-band__button img {
	width: 22px;
	height: 36px;
}

/* ------------------------------------------------------------------
 * Section : FAQ
 * ------------------------------------------------------------------ */

.s-faq {
	padding-block: 60px 100px;
}

@media (min-width: 1024px) {
	.home .s-faq {
		padding-block: 169px 0px;
	}

	.s-faq__list {
		flex: 0 1 772px;
	}
}

.s-faq__card {
	display: flex;
	gap: clamp(48px, 7.5vw, 144px);
	align-items: stretch;
	padding: 80px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
}

.s-faq__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 500px;
	flex-shrink: 0;
}

.s-faq__title {
	font-size: var(--size-h2);
	line-height: 1.2;
	color: var(--color-secondary-3);
}

.s-faq__ornament {
	width: 55px;
	height: 65px;
}

.s-faq__list {
	flex: 1;
}

.s-faq__item {
	border-top: 1px solid var(--color-secondary-3);
}

.s-faq__question {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* la pastille s arrête 40px avant le bout du trait */
	gap: 24px;
	padding-block: 15px;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-secondary-3);
}

.s-faq__question::-webkit-details-marker {
	display: none;
}

.s-faq__question > span:not(.s-faq__toggle) {
	flex: 0 1 668px;
	min-width: 0;
}

.s-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-secondary-3);
	border-radius: var(--angle-rond);
	transition: transform 0.2s ease;
}

.s-faq__toggle img {
	width: 13.41px; /* taille du glyphe dans son cadre de 24px */
	height: 13.41px;
}

.s-faq__answer {
	overflow: hidden;       /* indispensable à l'animation de hauteur */
	padding-block: 0 20px;
	max-width: 62ch;
	color: var(--color-secondary-3);
}

/* Survol : seulement sur une question fermée. */
.s-faq__item:not([open]) .s-faq__question:hover .s-faq__toggle {
	background: var(--color-secondary-3);
	border-color: var(--color-secondary-3);
}

.s-faq__item:not([open]) .s-faq__question:hover .s-faq__toggle img {
	filter: brightness(0) invert(1);
}

.s-faq__question:hover {
	color: var(--color-primary-0);
}

.s-faq__toggle img {
	transition: filter var(--dur-hover) var(--ease-out);
}

/* État ouvert : la question s'affirme, la pastille se remplit. */
.s-faq__item[open] > .s-faq__question {
	color: var(--color-primary-0);
}

.s-faq__item[open] .s-faq__toggle {
	transform: rotate(90deg);
	background: var(--color-primary-0);
	border-color: var(--color-primary-0);
}

.s-faq__item[open] .s-faq__toggle img {
	filter: brightness(0) invert(1);
}

/* Pendant la fermeture animée l'item reste [open] : la flèche, elle,
   doit repartir tout de suite. */
.s-faq__item.is-closing > .s-faq__question {
	color: var(--color-secondary-3);
}

.s-faq__item.is-closing .s-faq__toggle {
	transform: rotate(0deg);
	background: transparent;
	border-color: var(--color-secondary-3);
}

.s-faq__item.is-closing .s-faq__toggle img {
	filter: none;
}

@media (max-width: 1023px) {
	.s-stats {
		padding-block: 100px 160px;
	}

	.s-stats__grid {
		grid-template-columns: 1fr;
	}

	.s-wheel__center {
		font-size: 18px;
	}

	.s-story__card {
		flex-direction: column;
	}

	.s-story__image {
		width: 100%;
	}

	.s-story__image img {
		height: auto;
		aspect-ratio: 688 / 452;
	}

	.s-cta-band {
		padding-block: 180px 80px;
		min-height: 480px;
	}

	.s-cta-band__button,
	.s-quiz-band__button {
		gap: 24px;
	}

	.s-quiz-band__card {
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 24px;
	}

	.s-quiz-band__button {
		width: 100%;
	}

	.s-faq__card {
		flex-direction: column;
		padding: 40px 24px;
	}

	.s-faq__intro {
		width: auto;
		gap: 32px;
	}
}

@media (max-width: 1023px) {
	.s-hero__box {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.s-hero__box-text {
		border-left: 0;
		padding-left: 0;
	}

	.s-logos__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.s-logos__list {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.s-logos__logo {
		max-height: 70px;
	}

	.s-quiz__card {
		padding: 40px 24px;
	}

	/* Meme cause qu'en mobile : au clic le JS pose `.is-detail` sur la
	 * carte, et la seule regle qui repond a ce selecteur est celle du
	 * desktop, `padding: 78px 96px`. Elle pese 0,2,0 quand toutes les
	 * reprises visent `.s-quiz__card` seul, 0,1,0 : elle gagne donc la
	 * cascade ici aussi, la media query ne changeant pas le poids du
	 * selecteur. On reprend le padding fermé à specificité égale. */
	.s-quiz__card.is-detail {
		padding: 40px 24px;
	}

	.s-quiz__title {
		margin-bottom: 48px;
	}

	.s-quiz__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.s-quiz__item {
		height: auto;
		padding: 24px;
		gap: 24px;
	}

	.s-quiz__panel {
		flex-direction: column;
		align-items: stretch;
	}

	.s-quiz__media {
		width: 100%;
		max-width: none;
	}

	.s-quiz__photo {
		height: 380px;
	}

	.s-quiz__cta {
		gap: 24px;
		padding: 20px 32px;
	}
}

@media (max-width: 1023px) {
	.newsletter {
		flex-wrap: wrap;
	}

	.newsletter__icon {
		margin-inline: 0;
	}

	.newsletter__intro {
		width: auto;
	}

	.newsletter__form {
		flex-basis: 100%;
	}

	.site-footer__columns {
		flex-wrap: wrap;
		margin-bottom: 56px;
	}

	.site-footer__credits {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
 * Pages sans composeur (WooCommerce, pages légales) : cadre standard
 * ------------------------------------------------------------------ */

.page-content {
	padding: 160px 0 100px;
}

.page-content__inner {
	max-width: 1100px;
}

.page-content__title {
	font-size: var(--size-h2);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 50px;
}

.page-content__body {
	color: var(--color-primary-0);
}

.page-content__body p {
	margin-block: 0 1em;
}

/* Pages légales (CGU, confidentialité) : seuls leurs blocs sont enfants
 * directs du corps, les pages WooCommerce passent par div.woocommerce. */
.page-content__body > h2,
.page-content__body > p,
.page-content__body > ul,
.page-content__body > ol {
	max-width: 820px;
	margin-inline: auto;
}

.page-content__body > h2 {
	font-size: var(--size-h5);
	line-height: 1.3;
	margin-block: 2em 0.6em;
}

.page-content__body > ul,
.page-content__body > ol {
	margin-block: 0 1em;
	padding-left: 1.4em;
}

.page-content__body > ul {
	list-style: disc;
}

.page-content__body > ol {
	list-style: decimal;
}

.page-content__body > p a,
.page-content__body > ul a {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * WooCommerce — habillage aux couleurs Envol
 * (checkout, panier, mon compte, confirmation de commande)
 * ------------------------------------------------------------------ */

.woocommerce {
	font-family: var(--font-main);
	color: var(--color-primary-0);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	color: var(--color-primary-0);
	font-family: var(--font-main);
	box-shadow: var(--shadow-02);
	padding: 1em 2em 1em 3.5em;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-primary-0);
}

.woocommerce-error {
	background: var(--color-secondary-2);
}

.woocommerce-error::before {
	color: #b0413e;
}

/* Boutons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 500;
	padding: 14px 28px;
	border-radius: 30px;
	background: var(--color-primary-0);
	color: var(--color-white);
	box-shadow: var(--shadow-02);
	transition: background-color 0.25s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
	background: #43226e;
	color: var(--color-white);
}

.woocommerce .button:disabled,
.woocommerce .button:disabled[disabled] {
	background: var(--color-secondary-0);
	color: var(--color-primary-0);
	padding: 14px 28px;
}

/* Champs de formulaire */
.woocommerce form .form-row label {
	font-size: 16px;
	color: var(--color-primary-0);
	margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--color-primary-0);
	border-radius: var(--angle-xl);
	background: var(--color-white);
	font-family: var(--font-main);
	font-size: 16px;
	color: var(--color-primary-0);
	outline: none;
	box-shadow: none;
}

.woocommerce form .form-row textarea {
	height: auto;
	min-height: 120px;
}

.woocommerce form .form-row input.input-text::placeholder {
	color: rgba(145, 112, 79, 0.4);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	box-shadow: 0 0 0 1px var(--color-primary-0);
}

.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-primary-0);
	line-height: 1.5;
	padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

.select2-dropdown {
	border: 1px solid var(--color-primary-0);
	border-radius: var(--angle-l);
	font-family: var(--font-main);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--color-primary-0);
}

/* Titres des blocs Woo */
.woocommerce h2,
.woocommerce h3,
.woocommerce-billing-fields h3,
#order_review_heading {
	font-family: var(--font-main);
	font-weight: 400;
	color: var(--color-primary-0);
	font-size: var(--size-h4);
	margin-bottom: 20px;
}

/* Checkout : deux colonnes carte blanche / récap crème */
.woocommerce form.checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.woocommerce form.checkout #customer_details {
	flex: 1 1 520px;
	width: auto;
	padding: 40px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	box-shadow: var(--shadow-02);
}

.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review {
	flex: 1 1 360px;
	width: auto;
}

.woocommerce form.checkout #order_review_heading {
	flex-basis: 100%;
	margin-bottom: 0;
	display: none;
}

.woocommerce form.checkout #order_review {
	padding: 40px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
}

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	font-size: 16px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: rgba(83, 43, 135, 0.15);
	color: var(--color-primary-0);
	padding: 12px 8px;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td,
.woocommerce .order-total .woocommerce-Price-amount {
	font-weight: 500;
}

/* Paiement */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid rgba(83, 43, 135, 0.15);
	padding: 1em 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--color-white);
	color: var(--color-primary-0);
	border-radius: var(--angle-l);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--color-white);
}

.woocommerce #payment #place_order {
	width: 100%;
	font-size: 18px;
	padding: 18px;
	background: var(--color-secondary-3);
}

.woocommerce #payment #place_order:hover {
	background: #7a5d41;
}

/* Panier */
.woocommerce-cart table.cart {
	background: var(--color-white);
	border-radius: var(--angle-xl);
	overflow: hidden;
	box-shadow: var(--shadow-02);
}

.woocommerce-cart table.cart img {
	width: 64px;
	border-radius: var(--angle-l);
}

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	float: none;
	padding: 30px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
}

.woocommerce a.remove {
	color: var(--color-secondary-3) !important;
}

.woocommerce a.remove:hover {
	background: var(--color-secondary-3);
	color: var(--color-white) !important;
}

/* Coupon */
.woocommerce-form-coupon,
.woocommerce form.checkout_coupon {
	border: 1px solid rgba(83, 43, 135, 0.2);
	border-radius: var(--angle-xl);
}

/* Mon compte */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 260px;
	flex-shrink: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 16px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	box-shadow: var(--shadow-02);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--angle-l);
	color: var(--color-primary-0);
	font-size: 16px;
	transition: background-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--color-secondary-0);
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	flex: 1;
	min-width: 280px;
	padding: 40px;
	border-radius: var(--angle-xl);
	background: var(--color-white);
	box-shadow: var(--shadow-02);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	text-decoration: underline;
}

/* Connexion / inscription */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-ResetPassword {
	border: 0 !important;
	border-radius: var(--angle-xl) !important;
	background: var(--color-white);
	box-shadow: var(--shadow-02);
	padding: 40px !important;
	max-width: 520px;
	margin-inline: auto;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block;
	margin-bottom: 12px;
}

.woocommerce-LostPassword a {
	text-decoration: underline;
	font-size: 14px;
}

#customer_login {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

#customer_login .u-column1,
#customer_login .u-column2 {
	flex: 1 1 320px;
	float: none;
	width: auto;
}

/* Confirmation de commande */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-size: var(--size-h3);
	line-height: 1.2;
	color: var(--color-primary-0);
	text-align: center;
	margin-bottom: 40px;
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 0;
	padding: 30px;
	border-radius: var(--angle-xl);
	background: var(--color-primary-1);
	margin-bottom: 40px;
}

.woocommerce ul.order_details li {
	font-size: 12px;
	color: var(--color-secondary-3);
	border-right-color: rgba(145, 112, 79, 0.3);
}

.woocommerce ul.order_details li strong {
	font-size: 16px;
	color: var(--color-primary-0);
}

/* Tableaux de commandes (mon compte) */
.woocommerce-orders-table .woocommerce-button {
	padding: 8px 18px;
	font-size: 14px;
}

@media (max-width: 767px) {
	.page-content {
		padding: 120px 0 60px;
	}

	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout #order_review,
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce form.login,
	.woocommerce form.register {
		padding: 24px 16px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
}

/* ------------------------------------------------------------------
 * Nav + footer — calage sur la maquette (Figma 13142:45532 / 13142:45531)
 * Desktop uniquement : les blocs responsive placés plus bas dans ce
 * fichier gardent la main sur tablette et mobile.
 * ------------------------------------------------------------------ */

/* La clé de « Find relief » : key.svg est un tracé 15x24 avec
   preserveAspectRatio="none" — sans padding il est étiré de 60 % dans sa
   boîte de 24x24. Dans la maquette elle est aussi couchée. */
.site-header__actions .btn--solid .btn__icon {
	padding: 0 4.5px;
	transform: rotate(-77.46deg);
}

@media (min-width: 768px) {
	/* user.svg est un tracé 18x19 posé à x3/y2 dans un slot de 24x24. */
	.site-header__account .btn__icon {
		padding: 2px 3px 3px;
	}
}

@media (min-width: 1280px) {
	/* Figma dessine le contour à l'intérieur du bouton : 40px de haut tout
	   compris, et une pilule de 1029x60. Le padding absorbe donc la bordure. */
	.site-header__actions .btn {
		padding-block: 7px;
	}

	.site-header__actions .btn--solid,
	.site-header__lang {
		padding-inline: 19px;
	}
}

@media (min-width: 1024px) {
	/* Carte newsletter : 1660x227, clé à 73px du bord, texte à 264px,
	   champ de 842px calé à droite (73 + 58 + 133 + 412 + 91 + 842 + 51 = 1660). */
	.newsletter {
		min-height: 227px;
		padding-left: 73px;
		padding-right: 51px;
		gap: 0;
	}

	.newsletter__icon {
		margin-inline: 0 133px;
	}

	.newsletter__intro {
		width: 412px;
	}

	.newsletter__form {
		flex: 0 1 842px;
		margin-left: 91px;
	}

	.newsletter__subtitle {
		margin-top: 11px;
	}

	.newsletter__consent {
		margin-top: 17px;
	}

	/* Bouton Login : 49px de haut dans la maquette. */
	.site-footer__login {
		padding-block: 10px;
	}

	/* « Get the app » : 20px sous le titre (« Envol health » garde ses 16px). */
	.site-footer__aside > div:last-child .site-footer__aside-title {
		margin-bottom: 20px;
	}

	/* Chaque icône sociale reprend sa taille native (facebook 33,33 / autres 30). */
	.site-footer__socials img {
		width: auto;
		height: auto;
	}
}

/* ------------------------------------------------------------------
 * Mobile (maquettes « Mobile … » du Figma, 390px)
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Échelle typographique mobile (variables Figma Heading/Mobile) */
	:root {
		--size-h1: 40px;
		--size-h1-plus: 40px;
		--size-h2: 36px;
		--size-h3: 24px;
		--size-h4: 20px;
		--size-h5: 18px;
		--size-h6: 16px;
		--gutter: 20px;
	}

	body {
		font-size: 14px;
	}

	/* Nav : pilule blanche pleine, boutons ronds */
	.site-header__bar {
		background: var(--color-white);
		padding: 8px 12px;
	}

	.site-header__logo img {
		width: 90px;
		height: 32px;
	}

	.site-header__actions {
		gap: 6px;
	}

	.site-header__actions .btn {
		padding: 8px 14px;
		font-size: 14px;
	}

	.site-header__actions .btn .btn__icon {
		display: none;
	}

	.site-header__account,
	.site-header__lang {
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: var(--angle-rond);
		justify-content: center;
	}

	.site-header__account .btn__icon {
		display: block !important;
		width: 20px;
		height: 20px;
	}

	.site-header__toggle {
		border-radius: var(--angle-rond);
	}

	/* Héros */
	.s-hero__content,
	.s-hero-page__inner {
		padding-top: 128px;
	}

	.s-hero__subtitle,
	.s-hero-page__subtitle {
		font-size: 16px;
	}

	.s-hero__box {
		padding: 16px;
		gap: 16px;
	}

	.s-hero__box-button {
		min-width: 0;
		height: 42px;
		padding: 10px 16px;
		font-size: 14px;
	}

	.s-hero-page__cta,
	.s-hero-page__ctas .s-hero-page__cta {
		padding: 18px 28px;
		font-size: 16px;
	}

	.s-hero-page__stores {
		padding: 14px 18px;
		gap: 12px;
	}

	.s-hero-page__stores-label {
		font-size: 16px;
	}

	.s-hero-page__stores img {
		height: 40px;
	}

	/* Quiz symptômes : liste compacte */
	.s-quiz {
		padding: 40px 0;
	}

	.s-quiz__card {
		padding: 30px 16px;
	}

	.s-quiz__title {
		margin-bottom: 30px;
	}

	.s-quiz__item {
		padding: 18px 24px;
		gap: 24px;
	}

	.s-quiz__item-icon {
		width: 40px;
		height: 40px;
	}

	.s-quiz__item-label {
		font-size: 18px;
	}

	.s-quiz__photo {
		height: 300px;
	}

	.s-quiz__review {
		padding: 24px;
		gap: 20px;
	}

	.s-quiz__quote {
		font-size: 18px;
	}

	.s-quiz__close {
		width: 44px;
		height: 44px;
	}

	/* Témoignages : cartes verticales, photo pleine largeur */
	.s-testimonials__card {
		width: min(300px, 80vw);
		padding: 0 0 24px;
		background: transparent;
		gap: 24px;
	}

	.s-testimonials__media {
		width: 100%;
		height: 315px;
	}

	.s-testimonials__quote {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.s-testimonials__author {
		font-size: 14px;
	}

	/* Étapes */
	.s-steps__card {
		padding: 40px 16px;
	}

	.s-steps__subtitle {
		font-size: 14px;
	}

	.s-steps__image {
		width: 100px;
		height: 100px;
	}

	.s-steps__label {
		font-size: 16px;
	}

	.s-steps__text {
		font-size: 16px;
	}

	.s-steps__card .btn-gradient {
		margin-top: 20px;
	}

	.btn-gradient,
	.s-quiz__cta,
	.s-cta-band__button,
	.s-stats__cta,
	.s-heading__cta,
	.s-double-cta__btn,
	.s-reviews__cta {
		padding: 18px 30px;
		font-size: 16px;
		gap: 20px;
		min-width: 0;
	}

	.btn-gradient img,
	.s-quiz__cta img,
	.s-cta-band__button img,
	.s-stats__cta img,
	.s-heading__cta img {
		width: 15px;
		height: 25px;
	}

	/* Stats */
	.s-stats {
		padding-block: 80px 120px;
	}

	.s-stats__title {
		margin-bottom: 40px;
	}

	.s-stats__card {
		min-height: 0;
		padding: 30px;
	}

	.s-stats__number {
		font-size: 48px;
	}

	.s-stats__text {
		font-size: 16px;
	}

	/* Titres de section */
	.s-heading {
		padding-block: 40px;
	}

	.s-heading__subtitle {
		margin-top: 20px;
		font-size: 14px;
	}

	.s-heading__note {
		font-size: 14px;
	}

	/* Roue advisors : carrousel mobile */
	.s-wheel {
		padding-block: 30px 0;
	}

	.s-wheel__circle {
		width: min(349px, 92vw);
		aspect-ratio: 349 / 400;
	}

	.s-wheel__center {
		font-size: 16px;
	}

	.s-wheel__portrait {
		width: 17%;
		transition: transform 0.3s ease;
	}

	.s-wheel__portrait--1 { top: 0; }
	.s-wheel__portrait--2 { top: 16%; right: 4%; }
	.s-wheel__portrait--3 { bottom: 26%; right: 0; }
	.s-wheel__portrait--4 { bottom: 0; }
	.s-wheel__portrait--5 { bottom: 26%; left: 0; }
	.s-wheel__portrait--6 { top: 16%; left: 4%; }

	.s-wheel__portrait.is-active {
		transform: scale(2.1);
		z-index: 2;
	}

	.s-wheel__portrait--has-label:hover img {
		opacity: 1;
		transform: none;
	}

	.s-wheel__label {
		display: none;
	}

	.s-wheel__mobile-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: min(349px, 92vw);
		margin: 40px auto 0;
	}

	.s-wheel__mobile-nav button {
		width: 44px;
		height: 44px;
		border: 1px solid var(--color-primary-0);
		border-radius: var(--angle-rond);
		background: none;
		color: var(--color-primary-0);
		font-size: 18px;
		cursor: pointer;
	}

	.s-wheel__mobile-label {
		font-size: 16px;
		font-style: italic;
		color: var(--color-primary-0);
		text-align: center;
	}

	/* Cartes (recherche…) : carrousel horizontal */
	.s-cards__grid {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-top: 40px;
		padding-bottom: 8px;
	}

	.s-cards__grid::-webkit-scrollbar {
		display: none;
	}

	.s-cards__card {
		flex: 0 0 min(260px, 75vw);
		scroll-snap-align: center;
		padding: 30px 24px;
	}

	.s-cards__text {
		font-size: 16px;
	}

	/* Story / cartes dégradées */
	.s-story {
		padding-block: 30px;
	}

	.s-story__card {
		gap: 30px;
	}

	.s-story__quote {
		font-size: 18px;
	}

	.s-story__text {
		font-size: 16px;
	}

	.s-story__number {
		font-size: 64px;
	}

	.s-story__surtitle {
		font-size: 18px;
	}

	/* Bandeaux */
	.s-cta-band {
		padding-block: 120px 60px;
		min-height: 0;
	}

	.s-cta-band__subtitle {
		margin-top: 24px;
		font-size: 16px;
	}

	.s-quiz-band__title {
		text-align: center;
		width: 100%;
	}

	/* FAQ : titre + ornement côte à côte */
	.s-faq__card {
		padding: 30px 24px;
		gap: 24px;
	}

	.s-faq__intro {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16px;
	}

	.s-faq__ornament {
		width: 36px;
		height: 42px;
	}

	.s-faq__question {
		font-size: 14px;
		gap: 16px;
	}

	.s-faq__toggle {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	/* Footer : tout empilé, centré */
	.site-footer {
		text-align: center;
	}

	.site-footer__disclaimer {
		font-size: 16px;
	}

	.newsletter {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 30px 20px;
		text-align: center;
	}

	.newsletter__icon {
		width: 40px;
		height: 66px;
		margin: 0;
	}

	.newsletter__title {
		font-size: 24px;
	}

	.newsletter__subtitle {
		font-size: 16px;
	}

	.newsletter__form {
		width: 100%;
	}

	.newsletter__field {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		gap: 12px;
		padding: 16px;
	}

	.newsletter__submit {
		width: 100%;
		height: 44px;
	}

	.newsletter__consent {
		font-size: 12px;
	}

	.site-footer__columns {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		margin-bottom: 50px;
	}

	.site-footer__brand {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-block: 30px;
	}

	.site-footer__brand img {
		max-width: 300px;
	}

	.footer-column {
		width: auto;
	}

	.footer-column__title,
	.site-footer__aside-title {
		font-size: 22px;
		color: var(--color-primary-0);
	}

	.site-footer__aside {
		width: 100%;
		align-items: center;
	}

	.site-footer__login {
		width: 100%;
	}

	.store-badges {
		flex-direction: row;
		justify-content: center;
	}

	.site-footer__credits {
		align-items: center;
		text-align: center;
	}

	.site-footer__credits-links {
		flex-direction: column;
		gap: 12px;
		align-items: center;
		width: 100%;
	}

	/* Divers tunnel */
	.s-pricing-table {
		padding-block: 60px 40px;
	}

	.s-pricing-table__table th,
	.s-pricing-table__table td {
		padding: 12px 14px;
	}

	.s-pricing-table__buy {
		min-width: 0;
		padding: 10px 14px;
		font-size: 14px;
	}

	.s-premium__card {
		padding: 30px 20px;
	}

	.s-premium__title {
		font-size: 36px;
	}

	.s-premium__features img {
		width: 44px;
		height: 44px;
	}

	.s-checkout__card {
		padding: 20px 16px;
	}

	.s-checkout__box {
		padding: 20px 16px;
	}

	.s-checkout__plan-info {
		gap: 20px;
	}

	.s-checkout__plan-badge {
		width: 100px;
		height: 80px;
		font-size: 16px;
	}

	.s-checkout__plan-price {
		font-size: 28px;
	}

	/* Retreat */
	.s-glass__card {
		flex-basis: 100%;
		padding: 30px;
	}

	.s-glass__image {
		width: 110px;
		height: 110px;
		margin-block: 0;
	}

	.s-gallery-labels__item img {
		height: 320px;
	}

	.s-hosts__card {
		padding: 30px 24px;
	}

	.s-rooms__body {
		padding: 24px 20px 30px;
	}

	.s-benefits__circle {
		aspect-ratio: 1;
	}

	.s-contact-form__title {
		font-size: 32px;
	}

	/* Hero : badge avis compact ancré en bas à droite ; badges pictos masqués */
	.s-hero-page__rating,
	.s-checkout__rating {
		position: absolute;
		right: var(--gutter);
		top: auto;
		bottom: 24px;
		margin: 0;
		padding: 10px;
		gap: 3px;
	}

	.s-hero-page__rating-top {
		gap: 8px;
	}

	.s-hero-page__rating-stars {
		gap: 2px;
	}

	.s-hero-page__rating-stars img {
		width: 10px;
		height: 10px;
	}

	.s-hero-page__rating-stars .s-hero-page__rating-key {
		width: 10px;
		height: 12px;
	}

	.s-hero-page__rating-note {
		font-size: 16px;
	}

	.s-hero-page__rating-text {
		font-size: 11px;
	}

	.s-hero-page__badges {
		display: none;
	}

	/* Pictos : cercles 90px (maquettes mobiles) */
	.s-pictos__circle,
	.s-pictos__circle-img {
		width: 90px;
		height: 90px;
	}

	.s-pictos__icon {
		width: 40px;
		height: 40px;
	}

	.s-pictos__label {
		font-size: 16px;
	}

	.s-pictos__text {
		font-size: 15px;
	}

	.s-pictos__list,
	.s-pictos__list--lines {
		gap: 40px;
	}

	/* Cartes : why / usages empilées, seule « recherche » défile */
	.s-cards--why .s-cards__grid,
	.s-cards--usages .s-cards__grid {
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.s-cards--why .s-cards__card,
	.s-cards--usages .s-cards__card {
		flex-basis: auto;
		width: 100%;
	}

	/* Témoignages : cartes 260px comme la maquette */
	.s-testimonials__card {
		width: 260px;
		gap: 20px;
	}

	.s-testimonials__media {
		height: 274px;
	}

	/* Tableau des formules : switcher à onglets + carte */
	.s-pricing-table__scroll {
		display: none;
	}

	.s-pricing-table__mobile {
		display: block;
		margin-top: 40px;
	}

	.s-pricing-table__tabs,
	.s-premium__tabs {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-bottom: 20px;
	}

	.s-pricing-table__tab,
	.s-premium__tab {
		padding: 12px 24px;
		border: 0;
		border-radius: var(--angle-rond);
		background: var(--color-white);
		font-family: var(--font-main);
		font-size: 16px;
		font-weight: 500;
		color: rgba(83, 43, 135, 0.4);
		cursor: pointer;
		box-shadow: var(--shadow-02);
	}

	.s-pricing-table__tab.is-active {
		background: linear-gradient(90deg, var(--color-secondary-2), var(--color-primary-3));
		color: var(--color-primary-0);
	}

	.s-pricing-table__panel {
		display: none;
		padding: 40px 24px;
		border-radius: var(--angle-xl);
		background: linear-gradient(135deg, rgba(255, 224, 226, 0.6), rgba(222, 242, 255, 0.6));
		text-align: center;
	}

	.s-pricing-table__panel.is-tab-active {
		display: block;
	}

	.s-pricing-table__panel .s-pricing-table__buy {
		display: flex;
		margin-block: 24px 10px;
		padding: 14px;
	}

	.s-pricing-table__mobile-features {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.s-pricing-table__mobile-features li {
		display: flex;
		align-items: center;
		gap: 20px;
		padding-block: 18px;
		border-bottom: 1px solid rgba(83, 43, 135, 0.25);
		font-size: 15px;
		color: var(--color-primary-0);
	}

	.s-pricing-table__mobile-features li:first-child {
		border-top: 1px solid rgba(83, 43, 135, 0.25);
	}

	.s-pricing-table__mobile-check {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--color-secondary-0);
	}

	.s-pricing-table__mobile-check img {
		width: 18px;
		height: 18px;
	}

	/* Plans premium : un seul visible, piloté par les onglets */
	.s-premium__tabs {
		margin-bottom: 0;
	}

	.s-premium__tab.is-active {
		background: #8a68b5;
		color: var(--color-white);
	}

	.s-premium__plan:not(.is-tab-active) {
		display: none;
	}

	/* Bénéfices : liste simple, plus de roue */
	.s-benefits {
		padding-block: 40px;
	}

	.s-benefits__circle {
		width: 100%;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding-inline: var(--gutter);
	}

	.s-benefits__circle::before {
		display: none;
	}

	.s-benefits__center {
		position: static;
		transform: none;
	}

	.s-benefits__note {
		margin-top: 16px;
		font-size: 16px;
	}

	.s-benefits__bubble {
		position: static;
		flex-direction: row;
		justify-content: flex-start;
		gap: 16px;
		width: min(280px, 100%);
		aspect-ratio: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-size: 16px;
		text-align: left;
		margin-inline: auto;
	}

	.s-benefits__bubble img {
		width: 19px;
		height: 19px;
	}

	/* Advisors : carrousel horizontal avec flèches */
	.s-advisors__grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 8px;
	}

	.s-advisors__grid::-webkit-scrollbar {
		display: none;
	}

	.s-advisors__card {
		flex: 0 0 220px;
		scroll-snap-align: center;
		padding: 30px 24px;
	}

	.s-advisors__photo {
		width: 120px;
		height: 120px;
	}

	.s-advisors__nav {
		display: flex;
		margin-top: 32px;
	}

	/* Checkout compact */
	.s-checkout__field input[type="email"],
	.s-checkout__qty,
	.s-checkout__payment-box,
	.s-checkout__submit {
		height: 46px;
		border-radius: 14px;
	}

	.s-checkout__submit {
		font-size: 17px;
	}

	.s-checkout__qty input {
		font-size: 16px;
	}

	.s-checkout__change {
		width: 100%;
	}

	.s-checkout__legal {
		font-size: 13px;
	}
}

/* ==================================================================
 * Calage desktop des pages App, Partners, Retreats, Subscription,
 * Purchase sur les maquettes Figma (audit du 2 septembre 2026).
 *
 * Ce bloc est placé APRÈS les blocs responsive de ce fichier : tout y
 * est donc enfermé dans une media query min-width, à l'exception des
 * règles introduisant des classes nouvelles ou des propriétés qu'aucun
 * bloc mobile ne redéfinit.
 * ================================================================== */

/* --- Règles valables à toutes les largeurs -------------------------- */

/* Retreats — bandeau immersion : colonne de texte de 832px centrée. */
.s-cta-band--haut .s-cta-band__content {
	box-sizing: content-box; /* le reset global met tout en border-box */
	max-width: 832px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The App — « Try it now » : le média est le cercle de la maquette (un
   simple contour violet) surmonté du mockup détouré. Les deux libellés
   restent du texte vivant, donc traduisibles. */
.s-tel-demo__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 486 / 686;
}

.s-tel-demo__media::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14.577%;  /* 100 / 686 */
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--color-primary-0);
	border-radius: 50%;
}

.s-tel-demo__media img {
	position: relative;
	width: auto;
	height: 100%;
	max-width: none;
}

/* Retreats — la clé du CTA violet du hero (Figma : 22x36). */
.s-hero-page__cta--violet img {
	width: 22px;
	height: 36px;
}

/* Retreats — « What's included » : une seule colonne d'items. */
.s-checklist__card--polaroids .s-checklist__list {
	grid-template-columns: 1fr;
}

.s-checklist__card--polaroids .s-checklist__item img {
	width: 30px;
	height: 30px;
}

/* Retreats — titre des cartes d'avis (variante photo). */
.s-reviews__card:has(.s-reviews__image-top) .s-reviews__card-title {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}

/* Partners — « How practitioners use Envol ». */
.s-cards--usages .s-cards__grid {
	max-width: 1482px;
}

.s-cards--usages .s-cards__card-title {
	font-weight: 700;
}

/* Partners — carte du formulaire de contact. */
.s-contact-form__card {
	max-width: 1464px;
	margin-inline: auto;
}

/* Partners — case à cocher des conditions : l'apparence native est
   remplacée, l'état coché doit donc être dessiné explicitement. */
.s-contact-form__terms input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--color-secondary-3);
	border-radius: var(--angle-xl);
	background: var(--color-white);
	cursor: pointer;
}

.s-contact-form__terms input[type="checkbox"]:checked {
	background: var(--color-primary-0);
	border-color: var(--color-primary-0);
}

/* Retreats — flèches de galerie des cartes chambre. */
.s-rooms__gallery-nav {
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-bottom: 20px;
}

.s-rooms__arrow {
	position: relative;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: url("../icons/circle-outline.svg") no-repeat center / contain;
	cursor: pointer;
}

.s-rooms__arrow img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 36px;
	height: 36px;
}

.s-rooms__arrow--prev img {
	transform: rotate(180deg);
}

/* --- Desktop -------------------------------------------------------- */

@media (min-width: 1024px) {

    	/* Homepage: balance spacing around testimonial title */
   	.home .s-quiz {
        	padding-bottom: 42px;
    	}

	/* ============ Hero de page (App, Partners, Retreats) ============ */

	.s-hero-page__subtitle {
		margin-top: 38px;
	}

	.s-hero-page__ctas {
		margin-top: 36px;
	}

	.s-hero-page__ctas .s-hero-page__cta {
		gap: 66px;
	}

	.s-hero-page__badges {
		margin-top: 64px;
	}

	.s-hero-page__stores img {
		width: 180px;
		height: 61px;
		object-fit: contain;
	}

	/* ============ The App ============ */

	/* Hero : contenu calé à gauche, bord à x=280 (Figma 13142:45639). */
	.page-id-48 .s-hero-page--center .s-hero-page__content,
	.page-id-164 .s-hero-page--center .s-hero-page__content {
		max-width: 734px;
		margin-inline: 150px auto;
		text-align: left;
	}

	.page-id-48 .s-hero-page__subtitle,
	.page-id-164 .s-hero-page__subtitle {
		margin-top: 51px;
	}

	/* Section pictos « When symptoms show up ». */
	.page-id-48 .s-pictos,
	.page-id-164 .s-pictos {
		padding-block: 0px;
	}

	.s-pictos__media {
		position: relative;
		height: clamp(320px, 34.6vw, 664px);
		overflow: hidden;
		border-radius: var(--angle-xl);
	}

	/* Le cadre porte la hauteur, l'image le remplit au cadrage de la maquette. */
	.s-pictos__media img {
		position: static;
		width: 100%;
		height: auto;
		max-width: 100%;
		object-fit: contain;
		border-radius: 14px;
	}

	/* « Try it now » : rangée de 1136px (300 + 25 + 486 + 25 + 300). */
	.s-tel-demo {
		padding-block: 0 79px;
	}

	.s-tel-demo__inner {
		max-width: calc(1136px + var(--gutter) * 2);
		gap: 25px;
	}

	.s-tel-demo__title,
	.s-tel-demo__text {
		flex: 0 0 300px;
		text-align: center;
	}

	.s-tel-demo__media {
		flex: 0 0 486px;
		width: 486px;
	}

	/* Cartes « Why it works » : 400x492, padding 50, bas affleurant le bandeau. */
	.s-cards--why {
		padding-bottom: 0;
	}

	.s-cards--why .s-cards__grid {
		margin-top: 78px;
	}

	.s-cards--why .s-cards__card {
		gap: 50px;
		min-height: 492px;
		justify-content: space-between;
	}

	/* Bandeau 84 % (The App et Subscription) : pilule figée à 306px. */
	.s-stat-photo__card {
		padding: 50px 42.5px;
	}

	.s-stat-photo__cta {
		justify-content: space-between;
		padding-inline: 37.5px;
		gap: 66px;
	}

	/* App pages: tighter spacing around statistics */
	.page-id-48 .s-stats:not(.s-stats--photo),
	.page-id-164 .s-stats:not(.s-stats--photo) {
    		padding-block: 85px 65px;
	}

	.s-stats:not(.s-stats--photo) .s-stats__title {
		font-size: var(--size-h3);
	}

	.s-stats:not(.s-stats--photo) .s-stats__subtitle {
		margin: -39px 0 100px;
	}

	.s-stats:not(.s-stats--photo) .s-stats__cta {
		width: 306px;
		justify-content: space-between;
		padding-inline: 37.5px;
	}

	/* ============ Partners ============ */

	.page-id-59 .s-hero-page--left .s-hero-page__content {
		margin-left: clamp(0px, 7.8125vw, 150px);
		max-width: 734px;
	}

	.page-id-59 .s-hero-page--left .s-hero-page__subtitle {
		max-width: 575px;
	}

	/* Bandeau de logos puis titre « advisors ». */
	.s-logos {
		padding-bottom: 90px;
	}

	.home .s-logos {
		padding-bottom: 24px;
	}

	.s-advisors {
		padding-block: 60px 100px;
	}

	.s-advisors__grid {
		margin-top: 138px;
	}

	.s-advisors__card {
		gap: 13px;
	}

	.s-advisors__photo {
		margin-bottom: 17px; /* 13 + 17 = 30px sous la photo */
	}

	.s-reviews__cta {
		min-height: 96px;
	}

	/* « A complement to care » : carte de 653px, téléphone débordant en haut. */
	.s-checklist__card:not(.s-checklist__card--polaroids) {
		min-height: 653px;
		padding: 0 7.711% 0 21.024%;
		gap: 3.804%;
	}

	.s-checklist__card:not(.s-checklist__card--polaroids) .s-checklist__media {
		width: 46.577%;
		margin-top: -13.102%;
		margin-bottom: 3.973%;
	}

	.s-checklist__card:not(.s-checklist__card--polaroids) .s-checklist__content {
		flex: 0 0 49.620%;
	}

	/* « How practitioners use Envol ». */
	.s-cards--usages .s-cards__image {
		width: 100%;
		max-width: 360px;
		height: auto;
		aspect-ratio: 360 / 322;
		object-fit: cover;
		border-radius: var(--angle-xl);
	}

	.s-cards--usages .s-cards__text {
		font-size: var(--size-h6);
		line-height: 1.4;
		max-width: 360px;
	}

	/* « Backed by research » : 3 colonnes de 404 séparées de 24. */
	.s-cards--recherche .s-cards__grid {
    		gap: 24px;
	}

	.home .s-cards--recherche {
    		padding-top: 20px;
	}

	.home .s-cards--recherche .s-cards__grid {
    		margin-top: 0;
	}

	.s-cards--recherche .s-cards__card {
		padding: 50px 36px;
	}

	/* Formulaire de contact. */
	.s-contact-form__field input {
		height: 48px;
		padding: 0 12px;
	}

	.s-contact-form__field textarea {
		height: 191px;
	}

	/* Rythme vertical propre à l'enchaînement de sections de Partners. */
	.s-checklist + .s-cards--usages {
		padding-top: 44px;
	}

	.s-cards--usages + .s-cards--recherche {
		padding-top: 20px;
	}

	.s-cards--usages + .s-cards--recherche {
    		padding-bottom: 20px;
	}	

	.s-cards--recherche + .s-contact-form {
		padding-top: 0px;
	}

	/* ============ Retreats ============ */

	.page-id-77 .s-hero-page__ctas {
		margin-top: 93px;
	}

	/* Le badge d'avis est calé par une valeur en vw : entre 1024 et
	   1272px il retombait pile sur la bande horizontale du bouton, qui
	   est désormais centré et mord donc plus à droite. Un plancher de
	   490px le fait passer sous le bouton sur cette plage, sans rien
	   changer au delà : 38,5vw repasse devant dès 1273px, la vue
	   desktop validée par le client reste identique au pixel. */
	.page-id-77 .s-hero-page__rating {
		right: calc(var(--gutter) + 131px);
		top: clamp(490px, 38.5vw, 739px);
	}

	.s-hero-page__ctas .s-hero-page__cta--violet {
		gap: 66px;
	}

	/* Cartes translucides. */
	.s-glass {
		padding-block: 130px 0;
	}

	.s-glass__card {
		gap: 50px;
	}

	/* Bandeau immersion. */
	.s-cta-band--haut .s-cta-band__title {
		font-size: var(--size-h3);
	}

	.s-cta-band--haut .s-cta-band__note,
	.s-cta-band--haut .s-cta-band__button {
		margin-top: 60px;
	}

	.s-cta-band--haut .s-cta-band__button {
		width: 388px;
		gap: 0;
		justify-content: space-between;
	}

	.s-cta-band--haut .s-cta-band__button-label {
		flex: 1;
		text-align: center;
	}

	/* Galerie à pastilles. */
	.s-gallery-labels__badge {
		width: 318px;
		white-space: normal;
		line-height: 1.3;
		text-align: center;
	}

	.s-gallery-labels__item:nth-of-type(3) .s-gallery-labels__badge {
		color: var(--color-primary-0);
	}

	.s-marquee {
		padding-block: 130px;
	}

	/* « What's included » : les polaroids débordent, la carte n'a plus de fond. */
	.s-checklist__card--polaroids {
		background: none;
		padding: 0;
		align-items: flex-start;
		gap: 2.15%;
	}

	.s-checklist__card--polaroids .s-checklist__content {
		flex: 0 0 43.1%;
		padding: 70px 59px 70px 70px;
	}

	.s-checklist__card--polaroids .s-checklist__media {
		flex: 0 0 54.5%;
		width: 54.5%;
		min-height: 0;
		aspect-ratio: 904 / 733;
	}

	.s-checklist__card--polaroids .s-checklist__img-1,
	.s-checklist__card--polaroids .s-checklist__img-2 {
		right: auto;
		bottom: auto;
		height: auto;
	}

	.s-checklist__card--polaroids .s-checklist__img-1 {
		top: 9.57%;
		left: 18.87%;
		width: 78.74%;
		aspect-ratio: 712 / 456;
	}

	.s-checklist__card--polaroids .s-checklist__img-2 {
		top: 28.52%;
		left: 8.1%;
		width: 79.84%;
		aspect-ratio: 722 / 479;
	}

	/* Avis — variante photo (Retreats) : cartes de 600x860 centrées. */
	.s-reviews__track:has(.s-reviews__image-top) {
		gap: 24px;
	}

	.s-reviews__card:has(.s-reviews__image-top) {
		width: 600px;
		min-height: 860px;
		padding: 50px;
		align-items: center;
		text-align: center;
	}

	.s-reviews__card:has(.s-reviews__image-top) .s-reviews__author {
		justify-content: center;
	}

	.s-reviews__card:has(.s-reviews__image-top) .s-reviews__image-top {
		height: 250px;
	}

	.s-reviews__card:has(.s-reviews__image-top) .s-reviews__quote {
		font-size: 16px;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
	}

	.s-reviews__card:has(.s-reviews__image-top) .s-reviews__name {
		font-size: 16px;
		font-weight: 500;
		font-style: italic;
		line-height: 1.5;
	}

	.s-reviews__card:has(.s-reviews__image-top) .s-reviews__stars img {
		width: 34px;
		height: 34px;
	}

	/* Flèches du carrousel d'avis, calées à gauche sur la marge de contenu. */
	.s-reviews:has(.s-reviews__image-top) {
		position: relative;
	}

	.s-reviews:has(.s-reviews__image-top) .s-testimonials__nav {
		position: absolute;
		top: 100px;
		left: max(var(--gutter), calc((100% - var(--content-width)) / 2));
		margin-top: 0;
		justify-content: flex-start;
	}

	/* Hôtes : trois cartes qui se chevauchent et s'inclinent. */
	.s-hosts__grid {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 0;
		max-width: 1396px;
	}

	.s-hosts__card {
		flex: 0 0 38.32%;
		width: 38.32%;
		min-height: 650px;
	}

	.s-hosts__card:nth-child(3n + 1) {
		transform: rotate(-6deg);
		margin-top: 86px;
	}

	.s-hosts__card:nth-child(3n + 2) {
		transform: rotate(6deg);
		margin-left: -11.75%;
	}

	.s-hosts__card:nth-child(3n) {
		transform: rotate(6deg);
		margin-left: -7.88%;
		margin-top: 86px;
	}

	/* Double CTA et chambres. */
	.s-double-cta {
		padding-block: 130px;
	}

	.s-double-cta__btn {
		position: relative;
		justify-content: center;
		gap: 0;
	}

	.s-double-cta__btn img {
		position: absolute;
		top: 50%;
		right: 50px;
		transform: translateY(-50%);
	}

	.s-double-cta__btn--brun {
		padding-inline: 50px 92px;
	}

	.s-double-cta__btn--violet {
		padding-inline: 50px 72px;
	}

	.s-double-cta__btn,
	.s-rooms__cta {
		min-height: 96px;
		padding-block: 0;
	}

	.s-rooms__title {
		margin-bottom: 92px;
	}

	.s-rooms__cta {
		width: auto;
		padding-inline: 50px;
	}

	.s-rooms__cta--soldout {
		width: 100%;
	}

	/* ============ Subscription ============ */

	/* Roue des bénéfices : cercle parfait tangent au bas du bloc. */
	.s-benefits__circle::before {
		inset: 11.82% 10.1% 0;
	}

	.s-benefits__bubble--1 { top: 0; left: 40.51%; right: auto; transform: none; }
	.s-benefits__bubble--2 { top: 29.75%; left: 0; right: auto; }
	.s-benefits__bubble--3 { top: 29.75%; right: 0; left: auto; }
	.s-benefits__bubble--4 { top: auto; bottom: 0.4%; left: 12.02%; right: auto; }
	.s-benefits__bubble--5 { top: auto; bottom: 0.4%; right: 13.34%; left: auto; }

	.s-benefits__center {
		inset: 57.84% 27.52% auto;
	}

	.s-benefits {
		padding-block: 223px 211px;
	}

	.s-premium {
		padding-block: 60px 132px;
	}

	.s-premium__plan {
		justify-content: center;
	}

	.s-premium__plan--violet .s-premium__plan-icons img {
		width: 27px;
		height: 27px;
	}

	/* Tableau des formules. */
	.s-pricing-table__subtitle {
		font-size: 20px;
		font-weight: 500;
		max-width: 457px;
		margin-inline: auto;
	}

	/* Les angles arrondis sur des cellules imposent border-collapse: separate. */
	.s-pricing-table__table {
		border-collapse: separate;
		border-spacing: 0;
	}

	.s-pricing-table__table th,
	.s-pricing-table__table td,
	.s-pricing-table__table thead th {
		border-bottom: 1px solid #9e8fc2;
	}

	.s-pricing-table__table tbody tr:last-child td {
		border-bottom: 0;
	}

	.s-pricing-table__col--highlight {
		background: linear-gradient(90deg, #ffe0e2, #def2ff);
	}

	.s-pricing-table__table thead .s-pricing-table__col--highlight {
		border-radius: 14px 14px 0 0;
	}

	.s-pricing-table__table tbody tr:last-child .s-pricing-table__col--highlight {
		border-radius: 0 0 14px 14px;
	}

	.s-pricing-table__table thead th {
		height: 208px;
		padding: 30px 30px 0;
		vertical-align: top;
	}

	.s-pricing-table__buy {
		margin-top: 31px;
		height: 50px;
		padding-block: 0;
	}

	.s-pricing-table__features-col .s-pricing-table__features-label {
		display: flex;
		align-items: center;
		height: 110px;
		margin-top: 67px;
	}

	.s-pricing-table__table tbody td {
		height: 70px;
		padding-block: 0;
	}

	.s-pricing-table__scroll {
		padding-bottom: 30px;
	}

	/* ============ Purchase ============ */

	.s-checkout {
		padding-block: 182px 213px;
	}

	.s-checkout__rating {
		top: 557px;  /* 739 (Figma) − 182 (padding-top de la section) */
		right: 261px;
	}

	.s-checkout__payment-label {
		width: 146px;
	}

	.s-checkout__plan-price {
		margin-top: 10px;
	}

	/* « Support you can return to » : le téléphone déborde de la carte. */
	.s-story__card--bleu-lavande {
		position: relative;
	}

	.s-story__card--bleu-lavande .s-story__image {
		position: absolute;
		top: -220px;
		right: -50px;
		width: 551px;
	}

	.s-story__card--bleu-lavande .s-story__image img {
		height: auto;
		aspect-ratio: 551 / 761;
		object-fit: contain;
		border-radius: 0;
	}

	.s-story__card--bleu-lavande .s-story__content {
		max-width: 635px;
	}

	/* « 84% » et sa légende forment un bloc unique (gap 15 dans la maquette). */
	.s-story__number + .s-story__title {
		margin-top: -35px;
	}

	.s-story__card--rose-lavande .s-story__content {
		justify-content: space-between;
	}
}

/* Entre 1024 et 1279px la colonne de contenu de « A complement to care »
   retombe à ~337px : deux colonnes d'items y seraient illisibles. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.s-checklist__card:not(.s-checklist__card--polaroids) .s-checklist__list {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1280px) {
	/* The App — la carte des stores et le badge d'avis sont sur la même ligne. */
	.page-id-48 .s-hero-page__stores,
	.page-id-164 .s-hero-page__stores {
		position: absolute;
		left: calc(var(--gutter) + 153px);
		top: clamp(300px, 38.5vw, 739px);
		margin-top: 0;
	}

	.page-id-48 .s-hero-page__rating,
	.page-id-164 .s-hero-page__rating {
		right: calc(var(--gutter) + 131px);
	}

	/* Retreats — bandeau immersion (le visuel de fond descend sous le texte). */
	.s-cta-band--haut {
		padding-block: 146px 744px;
	}
}

/* ==================================================================
 * MOBILE ≤ 767px — LOT 1 : les 5 sections sans aucune règle mobile.
 *
 * Valeurs relevées sur les maquettes Figma « Envol livraison »,
 * page « ↳ Maquettes Mobile », canvas 390px. Chaque bloc porte le
 * node id de la frame de référence.
 *
 * Placé en fin de fichier, donc après les blocs 1023px : c'est la
 * règle d'ordre du projet, le mobile doit pouvoir écraser la tablette.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* ---- Bandeau logos ------------------------------------------
	 * Accueil 13328:42150 / Partners 13328:42937. Section de 321px :
	 * 60 (haut) + 61 (titre) + 60 (gap) + 80 (logos) + 60 (bas).
	 * La rangée fait 626px de large sur un canvas de 390 et démarre
	 * à x=-118 : le débordement est voulu, les logos des extrémités
	 * sont coupés au bord. Ce n'est pas une grille de 4 logos qui
	 * rentrent dans 390. overflow:hidden sur la section pour ne pas
	 * créer de scroll horizontal de page.
	 * Desktop : padding 159/24, titre 430px, logos 120px de haut. */
	.s-logos {
		padding: 60px 0;
		overflow: hidden;
	}

	.s-logos__inner {
		gap: 60px;
		padding-inline: 10px;
	}

	.s-logos__title {
		max-width: 370px;
		font-size: var(--size-h3); /* 24px en mobile */
		line-height: 1.2;
	}

	.s-logos__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 40px;
		width: 626px;
		max-width: none;
		height: 80px;
		/* (370 - 626) / 2 : recentre la rangée débordante sur le
		 * canvas, en compensant les 10px de padding de l'inner. */
		margin-inline: -128px;
		mix-blend-mode: darken;
	}

	.s-logos__logo {
		max-height: 80px;
		border-radius: var(--angle-l); /* 10px */
	}

	/* Partners : le bandeau est sur bleu pâle dans la maquette, pas
	 * sur le crème par défaut. À vérifier aussi côté desktop. */
	.page-id-59 .s-logos {
		background: var(--color-primary-3);
	}

	/* ---- Carrousels photo « tchoutchou » ------------------------
	 * Retreat 13328:42826 (rangée seule) et 13328:42670 (galerie
	 * 2 rangées à défilements opposés). Vignettes 150x256, radius 14,
	 * gap 20. Contenu de 1040px pour 390 de canvas : débordement
	 * assumé, jamais une grille.
	 * Desktop : vignettes 500x500, padding-block 65. */
	.s-marquee {
		padding-block: 20px;
	}

	/* La première occurrence de la page (has-bg-retreat-a4) est collée
	 * à ses vignettes dans la maquette : hauteur = 256, pas de padding
	 * vertical. Les deux rangées de la galerie basse en gardent 20. */
	.s-marquee.has-bg-retreat-a4 {
		padding-block: 0;
	}

	.s-marquee__photo {
		width: 150px;
		height: 256px;
	}

	/* ---- Chiffre clé sur photo ----------------------------------
	 * App 13328:42308 / Buy Subscription 1 13328:42441. Composant
	 * partagé « mobile chiffre clé » (master 13179:18056).
	 * Section 780px : photo full-bleed, carte blanche 300x304 posée
	 * à 77px du haut, puis 399px de photo nue.
	 * Carte : radius 14, padding 30, gap 20.
	 * Desktop : carte 391px, padding 50, gap 40, padding-block 190/221. */
	.s-stat-photo {
		padding-block: 77px 399px;
	}

	.s-stat-photo__card {
		width: 300px;
		max-width: 100%;
		margin-inline: auto;
		padding: 30px;
		gap: 20px;
		border-radius: var(--angle-xl); /* 14px */
	}

	.s-stat-photo__number {
		font-size: var(--size-h1); /* 40px */
		line-height: 1.2;
	}

	.s-stat-photo__title {
		font-size: var(--size-h3); /* 24px */
		line-height: 1.2;
	}

	.s-stat-photo__text {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-stat-photo__cta {
		gap: 20px;
	}

	/* ---- Démo téléphone « Try it now » --------------------------
	 * App 13328:42263. Section 655px : 60 (haut) + 29 (titre) + 20 +
	 * 464 (visuel) + 20 + 42 (paragraphe) + 20 (bas).
	 * Le visuel est une superposition : cercle de contour 314x314
	 * posé à (20,75) dans un bloc de 350x464, téléphone 259x464
	 * par-dessus. Le cercle doit rester derrière et déborder de la
	 * boîte du téléphone.
	 * Desktop : padding-block 130, ratio 486/686, deux colonnes. */
	.s-tel-demo {
		padding-block: 60px 20px;
	}

	.s-tel-demo__inner {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.s-tel-demo__title {
		flex: none;
		font-size: var(--size-h3); /* 24px */
		line-height: 1.2;
		text-align: center;
	}

	.s-tel-demo__text {
		flex: none;
		max-width: 300px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
	}

	.s-tel-demo__media {
		width: 350px;
		max-width: 100%;
		aspect-ratio: 350 / 464;
	}

	/* Le téléphone est en height:100% width:auto (ratio 0.558), il
	 * tombe donc naturellement à 259px et se centre à ~45px. Seul le
	 * cercle décoratif a besoin d'une géométrie mobile explicite. */
	.s-tel-demo__media::before {
		top: 75px;
		left: 20px;
		right: auto;
		bottom: auto;
		width: 314px;
		height: 314px;
		aspect-ratio: auto;
	}

	/* ---- Listes à checks ----------------------------------------
	 * Retreat 13328:42835 (« What's included », 7 items) et
	 * Partners 13328:42942 (8 pathologies).
	 * Une seule colonne dans les deux cas. La grille 2 colonnes du
	 * desktop est intenable à 390px, et le padding de carte de 70px
	 * mangeait 140px sur 390.
	 * Desktop : padding-block 100, carte 70, grille 2 colonnes, gap 25. */
	.s-checklist {
		padding-block: 20px;
	}

	.s-checklist__card {
		flex-direction: column;
		gap: 40px;
		padding: 0;
	}

	.s-checklist__media {
		width: 100%;
	}

	.s-checklist__title {
		font-size: var(--size-h3); /* 24px */
		line-height: 1.2;
	}

	.s-checklist__list {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 30px;
	}

	.s-checklist__item {
		gap: 10px;
		align-items: center;
		font-size: 14px;
		line-height: 1.5;
	}

	/* Retreat : contenu à 292px (padding 50), icônes pleines 30x30,
	 * titre centré. Les polaroïds superposés font 215px de haut, pas
	 * les 570 du desktop. */
	.has-bg-retreat-b1 .s-checklist__content {
		padding-inline: 50px;
	}

	.has-bg-retreat-b1 .s-checklist__title {
		text-align: center;
	}

	.has-bg-retreat-b1 .s-checklist__item img {
		width: 30px;
		height: 30px;
	}

	.s-checklist__card--polaroids .s-checklist__media {
		min-height: 215px;
	}

	/* Partners : contenu à 246px, gap de 10 entre les 8 lignes. */
	.page-id-59 .s-checklist__content {
		padding-inline: 70px 74px;
	}

	.page-id-59 .s-checklist__list {
		gap: 10px;
	}
}

/* ==================================================================
 * MOBILE ≤ 767px — LOT 2 : les 8 sections en couverture mobile
 * partielle (1 à 3 sélecteurs, insuffisant pour tenir la maquette).
 *
 * Mêmes sources que le lot 1 : maquettes Figma « Envol livraison »,
 * page « ↳ Maquettes Mobile », canvas 390px. Node id en tête de bloc.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* ---- Cartes vitrées « inclusions » (Retreat 13328:42729) -----
	 * Section 900px : 60 + 5x140 + 4x20 + 60. Les cartes passent en
	 * RANGÉE sur mobile (illustration 100px à gauche, texte à droite),
	 * alors que le desktop les empile en colonne.
	 * Desktop : padding 130/60, carte 316 max, min-height 440, pad 50. */
	.s-glass {
		padding-block: 60px;
	}

	.s-glass__inner {
		gap: 20px;
	}

	.s-glass__card {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		max-width: none;
		min-height: 140px;
		padding: 20px;
	}

	.s-glass__image {
		width: 100px;
		height: 100px;
		flex-shrink: 0;
	}

	.s-glass__label {
		flex: 1;
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
	}

	/* ---- Galerie « space to… » (Retreat 13328:42813) -------------
	 * 3 cartes 350x538, pastille de verre centrée sur l'image.
	 * Le 320px de hauteur actuel écrase la maquette de 218px.
	 * Ratio plutôt que hauteur fixe : tient aussi sur 414 et 430px.
	 * Desktop : hauteur clamp(400px, 39.6vw, 760px). */
	.s-gallery-labels {
		padding-block: 20px;
	}

	.s-gallery-labels__item {
		margin-bottom: 20px;
	}

	.s-gallery-labels__item img {
		height: auto;
		aspect-ratio: 350 / 538;
	}

	.s-gallery-labels__badge {
		padding: 20px 30px;
		border-radius: var(--angle-rond);
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(23px);
		-webkit-backdrop-filter: blur(23px);
	}

	/* ---- Avis / témoignages -------------------------------------
	 * Deux gabarits distincts selon la page, à ne pas confondre :
	 * Retreat 13328:42927 → cartes 340, gap 10, padding 20, photo
	 *   300x152, étoiles 34, titre 14 Medium, corps 14, signature 16.
	 * Partners 13328:43089 → cartes 300, gap 20, padding 30, citation
	 *   16 Medium Italic alignée à gauche, avatar 100.
	 * Desktop commun : padding-block 100, citation 28, avatar 103,
	 * image 280 de haut, étoiles 28. */
	.s-reviews {
		padding-block: 0;
	}

	.s-reviews__subtitle {
		margin-top: 20px;
		margin-bottom: 30px;
		font-size: 14px;
	}

	.s-reviews__cta-wrap {
		margin-top: 30px;
	}

	.s-reviews__avatar {
		width: 100px;
		height: 100px;
	}

	/* Retreat */
	.page-id-77 .s-reviews__track {
		gap: 10px;
	}

	.page-id-77 .s-reviews__card {
		width: 340px;
		padding: 20px;
		gap: 20px;
		border-radius: var(--angle-xl);
	}

	.page-id-77 .s-reviews__image-top {
		height: 152px;
		border-radius: var(--angle-xl);
	}

	.page-id-77 .s-reviews__stars img {
		width: 34px;
		height: 34px;
	}

	.page-id-77 .s-reviews__quote {
		font-size: 14px;
		font-style: normal;
		line-height: 1.5;
	}

	.page-id-77 .s-reviews__name {
		font-size: 16px;
		font-style: italic;
	}

	/* Partners */
	.page-id-59 .s-reviews__track {
		gap: 20px;
	}

	.page-id-59 .s-reviews__card {
		width: 300px;
		padding: 30px;
		gap: 30px;
		border-radius: var(--angle-xl);
	}

	.page-id-59 .s-reviews__quote {
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
	}

	/* ---- Cartes hôtes (Retreat 13328:42889) ---------------------
	 * 3 cartes 305 de large empilées, gap 20, padding 30, radius 14,
	 * ombre portée. Pas de rotation sur mobile : la maquette les
	 * présente droites, contrairement au desktop qui les incline.
	 * Seul endroit de la page où le texte est en brun #91704f.
	 * Desktop : grille 3 colonnes gap 40, cartes pivotées ±6deg. */
	.s-hosts {
		padding-block: 60px;
	}

	.s-hosts__grid {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 305px;
	}

	.s-hosts__card,
	.s-hosts__card:nth-child(3n + 1),
	.s-hosts__card:nth-child(3n) {
		transform: none;
		padding: 30px;
		gap: 30px;
		border-radius: var(--angle-xl);
		/* box-shadow et non filter: drop-shadow. `filter` cree un
		 * containing block et un contexte d'empilement, ce dont la
		 * carte n'a pas besoin ; c'est aussi plus couteux a peindre. */
		filter: none;
		box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
	}

	.s-hosts__name,
	.s-hosts__text {
		font-size: 14px;
		line-height: 1.5;
		color: var(--color-secondary-3); /* brun #91704f */
		text-align: center;
	}

	.s-hosts__photo {
		width: 100px;
		height: 100px;
	}

	/* ---- Double CTA « Sabine's experience » (Retreat 13328:42908)
	 * Section 259px : padding 30, gap 50 sous le titre, gap 20 entre
	 * les deux boutons. Boutons 302x50, radius 100, padding 20.
	 * Le brun est l'action secondaire (vidéo), le violet la principale.
	 * Desktop : padding-block 100, boutons min-width 388, padding 30/50. */
	.s-double-cta {
		padding-block: 30px;
	}

	.s-double-cta__inner {
		gap: 50px;
	}

	.s-double-cta__buttons {
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

	.s-double-cta__btn {
		width: 302px;
		max-width: 100%;
		min-width: 0;
		min-height: 50px;
		padding: 20px;
		font-size: 14px;
		gap: 20px;
	}

	/* ---- Cartes chambres (Retreat 13328:42926) ------------------
	 * 3 cartes 350x602 empilées, gap 20. La photo fait 190px de haut
	 * et DÉBORDE des 30px de padding latéral de la carte pour aller
	 * bord à bord : d'où le margin négatif.
	 * Desktop : grille 3 colonnes, photo 280 de haut. */
	.s-rooms {
		padding-block: 20px;
	}

	.s-rooms__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.s-rooms__card {
		border-radius: var(--angle-xl);
		overflow: hidden;
	}

	.s-rooms__photo {
		height: 190px;
		margin-inline: -30px;
		width: calc(100% + 60px);
		max-width: none;
	}

	.s-rooms__body {
		padding: 0 30px 30px;
		gap: 20px;
	}

	.s-rooms__name {
		font-size: var(--size-h4); /* 20px */
		line-height: 1.4;
	}

	.s-rooms__price-note {
		font-size: 14px;
	}

	.s-rooms__capacity img {
		width: 24px;
		height: 24px;
	}

	.s-rooms__gallery-nav {
		gap: 50px;
	}

	.s-rooms__arrow {
		width: 50px;
		height: 50px;
	}

	/* ---- Formulaire de contact (Partners 13328:43090) -----------
	 * Carte 350 de large, padding 30, contenu 290. Titre en H2
	 * mobile (36px), pas 32 : la règle actuelle est en écart d'un
	 * cran avec le style Figma Heading/Mobile/H2.
	 * Desktop : padding-block 100, intro figée à 362px, pied en ligne. */
	.s-contact-form {
		padding-block: 60px;
	}

	.s-contact-form__card {
		flex-direction: column;
		gap: 20px;
		padding: 30px;
	}

	.s-contact-form__title {
		font-size: var(--size-h2); /* 36px, corrige le 32px précédent */
		line-height: 1.2;
		text-align: left;
	}

	.s-contact-form__intro {
		width: 100%;
		gap: 30px;
	}

	.s-contact-form__text {
		font-size: 16px;
		line-height: 1.5;
	}

	.s-contact-form__image {
		border-radius: 12px;
		aspect-ratio: 362 / 257;
		object-fit: cover;
	}

	.s-contact-form__form {
		gap: 24px;
	}

	.s-contact-form__field {
		font-size: 14px;
	}

	.s-contact-form__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.s-contact-form__submit {
		width: 100%;
	}

	/* ---- Carte quiz du CTA final (Accueil 13328:42125) ----------
	 * Sur la maquette, le bandeau CTA et cette carte sont une seule
	 * section de 806px ; le thème les sépare en deux. Ici, la carte
	 * basse seule : 350 de large, crème, radius 14, padding 30,
	 * gap 30, hauteur 182. Le champ-bouton est transparent avec un
	 * contour violet, pas un bouton plein.
	 * Desktop : carte padding 60/120, min-height 256, contenu en ligne. */
	.s-quiz-band {
		padding-block: 0 60px;
	}

	.s-quiz-band__card {
		flex-direction: column;
		align-items: center;
		gap: 30px;
		max-width: 350px;
		min-height: 182px;
		margin-inline: auto;
		padding: 30px;
	}

	.s-quiz-band__title {
		font-size: var(--size-h4); /* 20px */
		line-height: 1.4;
	}

	.s-quiz-band__button {
		width: 100%;
		min-width: 0;
		min-height: 64px;
		padding: 20px;
		gap: 30px;
	}
}

/* ==================================================================
 * MOBILE ≤ 767px — LOT 3 : passe de conformite sur les sections deja
 * couvertes. Chaque correction ci-dessous a ete verifiee deux fois :
 * contre l'item de checklist ET contre la mesure Figma detaillee du
 * document de reference, la valeur effective a 390px etant resolue
 * en rejouant la cascade (base + blocs 1023 + blocs 767).
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* ---- Quizz des symptomes (A07, A08, P05) --------------------
	 * Accueil 13328:42088 et App. La carte et ses options etaient
	 * calees sur des valeurs de tablette, jamais reprises a 390px.
	 * Carte : 30px 16px  ->  40px 20px 20px
	 * Option : 18px 24px ->  25px 30px, hauteur figee 80
	 * Icone  : 40px      ->  30px
	 * Gap interne : 24px ->  42px */
	.s-quiz__card {
		padding: 40px 20px 20px;
	}

	.s-quiz__item {
		height: 80px;
		padding: 25px 30px;
		gap: 42px;
	}

	.s-quiz__item-icon {
		width: 30px;
		height: 30px;
		flex-shrink: 0;
	}

	/* La maquette fige le label a 159px, ce qui le tronque sous 371px
	 * (releve du relecteur, deux seuils : 371 debordement, 341
	 * troncature). On garde le gap de 42 pour etre fidele a 390, mais
	 * le label devient fluide : il retrecit au lieu de casser. */
	.s-quiz__item-label {
		flex: 1;
		min-width: 0;
		width: auto;
	}

	/* ---- Fleches de carrousel (A09) -----------------------------
	 * Gabarit partage par temoignages, avis et advisors, soit 5 des
	 * 6 occurrences du fichier Figma (la 6e, les fleches de carte
	 * chambre, est un autre gabarit deja traite en 50px, item R17).
	 * Les valeurs actuelles viennent du bloc 1023 et n'ont jamais
	 * ete reprises pour le mobile : 64px -> 70px, gap 49px -> 30px. */
	.s-testimonials__arrow {
		width: 70px;
		height: 70px;
	}

	.s-testimonials__nav {
		gap: 30px;
	}

	/* ---- Cartes « Backed by research » (A14) --------------------
	 * Accueil 13328:42148 et Partners 13328:42940. Piste de 782px :
	 * 3 cartes de 238 + 2 gaps de 14 + 2 x 20 de padding.
	 * Les cartes n'avaient aucune largeur mobile : seules les
	 * variantes --why et --usages etaient passees en 100%, la
	 * variante --recherche restait en scroll horizontal sans largeur. */
	.s-cards--recherche .s-cards__card {
		width: 238px;
		flex: 0 0 238px;
		padding: 30px;
	}

	.s-cards--recherche .s-cards__grid {
		gap: 14px;
	}
}

/* ==================================================================
 * MOBILE ≤ 767px — LOT 3 bis : correctif issu de la mesure navigateur.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* ---- Bulles de benefices (Buy Subscription 1) ---------------
	 * Le bloc mobile convertit la roue en liste via `position: static`
	 * mais ne neutralise pas le `transform` de positionnement en roue.
	 * `.s-benefits__bubble--1` garde donc le `translateX(-50%)` de la
	 * base et part a left:-85px, moitie hors ecran. Le `transform:none`
	 * correctif n'existait que dans le bloc min-width:1024px, donc
	 * jamais applique a 390px. Releve par mesure du DOM, pas a l'oeil.
	 * `__center` avait bien ete reinitialise, les bulles non. */
	.s-benefits__bubble,
	.s-benefits__bubble--1 {
		transform: none;
	}
}

/* ==================================================================
 * RETOURS STUDIO GAUFRETTES — Notion « Retours site web - Envol »
 * relevés le 2026-09-07, traités le 2026-09-08. Desktop.
 * Le numéro entre crochets renvoie à la ligne du tableau Notion.
 * ------------------------------------------------------------------ */

/* [R3] Nav : fond blanc en vrai effet verre.
 * Le retour dit « pas juste en désopacifié » : la barre portait
 * rgba(255,255,255,0.6) SANS aucun backdrop-filter, donc une simple
 * transparence. On ajoute le flou d'arrière-plan (23px, la valeur
 * utilisée partout ailleurs dans la maquette pour le verre) et on
 * remonte l'opacité pour un rendu blanc plutôt que grisé. */
.site-header__bar {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(23px);
	-webkit-backdrop-filter: blur(23px);
}

/* [R2] Nav : grossir le logo.
 * La boîte du logo fait 40px de haut dans la maquette desktop
 * (node 12325:75852, 113x40) contre 26px sur le site. La largeur
 * suit le ratio du PNG (364x78, soit 4.67) : à confirmer avec le
 * studio si c'est bien la largeur voulue, la boîte Figma est plus
 * étroite parce qu'elle est calée sur l'autre fichier de logo. */
/* Le <a> du logo est un item flex sans largeur propre, et l'image
 * porte `max-width: 100%` (règle globale sur img). Les deux
 * s'attendent alors mutuellement : Chrome résout la largeur à 0 et le
 * logo disparaît purement et simplement. Il faut donc casser cette
 * circularité, sur les deux éléments :
 *   - `max-width: none` sur l'image, sinon elle est rabotée à la
 *     largeur du parent, qui vaut elle-même 0 ;
 *   - `flex: 0 0 auto` sur le lien, pour qu'il ne se laisse jamais
 *     compresser par ses voisins.
 * TAILLE : le reglage est la hauteur des LETTRES (--logo-cap), pas la
 * hauteur de l'image. Les deux different : dans le PNG detoure de
 * 364x78, les lettres droites (E, N, L) occupent les lignes 2 a 75,
 * soit 74px, tandis que le O et son symbole debordent sur toute la
 * hauteur du fichier. Regler la hauteur de l'image a 20 donnerait donc
 * des lettres a 19, pas a 20.
 * D'ou les deux facteurs : 78/74 pour la hauteur, 364/74 pour la
 * largeur. Avec --logo-cap: 20px l'image fait 21.1 x 98.4 et les
 * lettres tombent a 20px pile.
 * Dans une barre de 60px, cela laisse 20px au-dessus et 20px en
 * dessous des lettres. */
.site-header__logo {
	flex: 0 0 auto;
}

.site-header__logo img {
	--logo-cap: 20px;
	height: calc(var(--logo-cap) * 78 / 74);
	width: calc(var(--logo-cap) * 364 / 74);
	max-width: none;
}

/* [R9] Section « Backed by research » : contours de boutons en violet.
 * Les cartes étaient déjà bordées violet mais les boutons
 * « Learn more » héritaient du brun de `.btn`. Concerne aussi
 * Partners, d'où l'absence de sélecteur de page.
 * Les icônes noires sont traitées à la source : les trois SVG
 * phosphor portaient fill="currentColor", qui retombe sur le noir
 * dans un <img>, ils sont désormais en #532b87. */
.s-cards--recherche .s-cards__cta {
	border-color: var(--color-primary-0);
}

/* [R12] Footer : titres de colonne en violet, sur toutes les pages.
 * Ils étaient déjà violets en mobile et crème en desktop.
 * NB : la maquette desktop (12454:11587) les montre en crème
 * #fff5ed ; c'est donc un écart assumé, demandé explicitement. */
.footer-column__title,
.site-footer__aside-title {
	color: var(--color-primary-0);
}

/* [R13] Badge de note : demi-étoile à la place de la clé.
 * Le 5e glyphe était `key-violet.svg` alors que la note est de
 * 4,6/5. Remplacé par `star-half.svg` (même tracé que star.svg,
 * dégradé à butée nette à 50%). On aligne donc ses dimensions sur
 * celles des quatre autres étoiles. */
.s-hero-page__rating-stars .s-hero-page__rating-key {
	width: 26px;
	height: 26px;
}

@media (min-width: 1024px) {

	/* [R16] Subscription : le hero était décalé de 150px vers la gauche
	 * par rapport à The App et Partners. Mesuré au DOM à 1920px :
	 * titre à left=280 sur App et Partners, left=130 sur Subscription.
	 * Cause : The App a `margin-inline: 150px auto` (page-id-48) et
	 * Partners `margin-left: clamp(0px,7.8125vw,150px)` (page-id-59),
	 * mais Subscription (page-id-113) n'avait aucune règle et
	 * retombait sur le `--left` générique. On reprend la formule de
	 * Partners, qui est la version responsive des deux. */
	.page-id-113 .s-hero-page--left .s-hero-page__content {
		margin-left: clamp(0px, 7.8125vw, 150px);
		max-width: 734px;
	}
}

/* [R13 suite] En mobile la demi-étoile doit aussi suivre les autres
 * étoiles (10px), la règle héritée la laissait en 10x12. */
@media (max-width: 767px) {
	.s-hero-page__rating-stars .s-hero-page__rating-key {
		width: 10px;
		height: 10px;
	}
}

/* [R8] Roue des advisors (accueil) : centrer le titre.
 * La règle desktop écrivait `transform: none` pour annuler le
 * centrage, mais la base utilise la propriété `translate: 0 -50%`.
 * Ce sont deux propriétés distinctes : `transform` n'annule pas
 * `translate`. Le titre était donc remonté de 33px alors que son
 * `top: 47.08%` correspond déjà exactement au y=387 de la maquette
 * (composant roue 13163:48250, hauteur 822).
 * Mesuré : centre du titre à 24px AU-DESSUS du centre de l'anneau,
 * la maquette le place 8px EN DESSOUS. */
@media (min-width: 1024px) {
	.s-wheel__center {
		translate: none;
	}
}

/* [R23] Retreat : « on voit les transitions de couleur ».
 * Le fond de la page est un dégradé continu découpé en tranches,
 * une par section (retreat-a1 → b9, définies L807-817).
 * La chaîne est continue de a1 à b1, puis quatre ruptures
 * s'enchaînent : chaque tranche redémarre sur une couleur qui
 * n'est pas celle où la précédente s'arrête.
 *   b1 finit #e0eafd · b2 démarrait #e0e7fc
 *   b2 finit #e2e1fa · b3 démarre  #e2dff9
 *   b3 finit #d8d4f5 · b4 démarrait #d3d1f3
 *   b4 finit #aec6e8 · b5 démarre  #a5c1e5
 * On recale donc b2 et b4 sur les couleurs de leurs voisines, ce
 * qui referme les quatre marches d'un coup. Les autres tranches
 * sont déjà justes et ne sont pas touchées. */
.has-bg-retreat-b2 {
	background: linear-gradient(180deg, #e0eafd, #e2dff9);
}

.has-bg-retreat-b4 {
	background: linear-gradient(180deg, #d8d4f5, #a5c1e5);
}

/* ==================================================================
 * [R25] [R26] Partners : raccorder le fond de ciel.
 *
 * La photo `bg-ciel-partners.jpg` (1788x1920) est posée en style
 * INLINE sur deux sections successives, `s-advisors` en `center top`
 * et `s-reviews` en `center bottom`. L'intention était de couper une
 * seule image en deux, mais chaque section met la photo à SA propre
 * échelle : les deux moitiés ne se rejoignent pas et la jonction se
 * voit (R26). Affichée en `100% auto` sur 1920 de large, l'image fait
 * 2062px de haut, soit exactement le Rectangle 4452 de la maquette
 * (13142:45809, y=1611 h=2062) : c'est bien une image continue.
 *
 * On impose donc la même échelle aux deux sections et on décale la
 * seconde de la hauteur de la première, pour que la photo se
 * poursuive sans rupture. `!important` est nécessaire : les styles
 * inline générés par advisors.php et avis.php gagnent autrement.
 * La valeur de décalage suit la hauteur de la section advisors
 * (mesurée à 836px à 1920 de large) : si son contenu change
 * beaucoup, la reprendre ici.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {

	.page-id-59 .s-advisors[style],
	.page-id-59 .s-reviews[style] {
		background-size: 100% 2062px !important;
		background-repeat: no-repeat !important;
	}

	.page-id-59 .s-advisors[style] {
		background-position: center 0 !important;
	}

	.page-id-59 .s-reviews[style] {
		background-position: center -836px !important;
	}
}

/* [R25] Le bandeau logos crème s'arrête net sur la photo de ciel.
 * On fond le haut de la section suivante vers le crème pour que la
 * bascule se fasse en dégradé plutôt qu'en ligne franche.
 * Indépendant des hauteurs, donc stable si le contenu bouge. */
.page-id-59 .s-advisors {
	position: relative;
}

.page-id-59 .s-advisors::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 180px;
	background: linear-gradient(180deg, var(--color-primary-1), rgba(255, 245, 237, 0));
	pointer-events: none;
	z-index: 0;
}

.page-id-59 .s-advisors > * {
	position: relative;
	z-index: 1;
}

/* [R21] Retreat : « les boutons de slider sont décalés ».
 * Les flèches du carrousel d'avis étaient en `position: absolute;
 * top: 100px; left: <gutter>`, ce qui les posait par-dessus la photo
 * de la première carte. On les remet dans le flux, centrées sous la
 * piste, avec l'écart de 30px de la maquette (bloc 170x70 : deux
 * flèches de 70 + un gap de 30).
 * NB : le retour propose « centrés AU-DESSUS des cartes », mais la
 * maquette les place SOUS la piste, sur l'accueil comme sur Retreat
 * (section 11 du frame mobile, après le carrousel). J'ai suivi la
 * maquette ; un mot suffit pour les remonter. */
@media (min-width: 1024px) {

	.s-reviews:has(.s-reviews__image-top) .s-testimonials__nav {
		position: static;
		margin-top: 78px;
		justify-content: center;
	}

	.s-testimonials__nav {
		gap: 30px;
	}
}

/* [R24] [T06] Retreat : « rajouter 30 px d'espace entre les deux
 * slider ». La galerie photo du bas est faite de deux marquees
 * successifs (retreat-b8 puis b9) à défilements opposés. [R24] avait
 * supprimé tout le padding de leur jonction en s'appuyant sur le frame
 * MOBILE (13328:42670 et 42677), où les rangées de 296px sont
 * contiguës. Erreur de point de rupture : la règle a été posée en
 * `min-width: 1024px`, où les vignettes font 500x500. Coller les deux
 * rangées y produit un aplat de 1000px de photo, ce que montre la
 * capture du retour 6.
 * On redonne 30px de respiration, 15 plus 15 de part et d'autre, ce
 * qui garde les deux sections à hauteur égale. La jonction reste sans
 * couture : le dégradé de b8 finit sur #2a78c1 et celui de b9 démarre
 * sur #2a78c1. Le haut de b8 et le bas de b9 gardent leurs 130px.
 * Mobile non concerné, il a déjà 40px via le bloc max-width 767px. */
@media (min-width: 1024px) {

	.s-marquee.has-bg-retreat-b8 {
		padding-bottom: 15px;
	}

	.s-marquee.has-bg-retreat-b9 {
		padding-top: 15px;
	}
}

/* [R18] [R20] Ancres des boutons de hero.
 * Le header est en `position: fixed; top: 41px` et fait ~60px de
 * haut : sans garde, une ancre place la cible SOUS la barre de nav.
 * 121px = 41 (offset) + 60 (barre) + 20 (respiration).
 * `scroll-behavior` rend le saut fluide, ce qui est le propre d'une
 * ancre de page ; il reste désactivé pour qui préfère moins de
 * mouvement. */
#plans,
#rooms {
	scroll-margin-top: 121px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==================================================================
 * [R5] Nav mobile : « il y a un icone compréssé et il manque le
 * picto du menu ». Une seule cause pour les deux symptômes.
 *
 * Mesuré à 390px : la barre fait 358 de large mais son contenu
 * déborde. Le flex écrase alors ce qu'il peut (la clé de Find relief
 * tombait à 0x0, le picto compte à 10x20 au lieu de 20x20, d'où
 * l'icône « compressée ») et pousse le burger à left:422, soit
 * 32px HORS de l'écran : le picto de menu n'était pas absent, il
 * était dehors.
 *
 * S'ajoute un défaut de fond : les SVG d'icônes portent
 * `preserveAspectRatio="none"`, donc ils s'étirent pour remplir leur
 * boîte. key.svg fait nativement 15x24 et user.svg 18x19, tous deux
 * forcés dans un carré de 24x24 : la clé était étirée de 60 % en
 * largeur, sur mobile ET sur desktop. `object-fit: contain` rétablit
 * le ratio sans toucher aux assets, qui servent ailleurs.
 *
 * Géométrie reprise du composant `mobile nav` 13163:46086 :
 * barre 358x62 padding 15, logo 92x32, groupe droit 202x30 gap 8,
 * pilule 88x31, trois boutons 30x30 en radius 10 (carrés arrondis,
 * pas des cercles). 88+8+30+8+30+8+30 = 202, la largeur tombe juste.
 * ------------------------------------------------------------------ */

/* Ratio des icônes : corrige aussi le desktop. */
.btn__icon {
	object-fit: contain;
	flex: 0 0 auto;
}

@media (max-width: 767px) {

	.site-header__bar {
		gap: 0;
		padding: 15px;
		justify-content: space-between;
	}

	.site-header__logo img {
		width: 92px;
		height: 32px;
	}

	.site-header__actions {
		gap: 8px;
		flex: 0 0 auto;
	}

	/* Pilule « Find relief » : label seul, sans la clé. La maquette
	 * mobile ne montre pas d'icône dans cette pilule. */
	.site-header__actions .btn--solid {
		flex: 0 0 auto;
		width: 88px;
		height: 31px;
		padding: 8px 10px;
		border-radius: var(--angle-l);
		font-size: 14px;
		line-height: 1.5;
		white-space: nowrap;
	}

	.site-header__actions .btn--solid .btn__icon {
		display: none;
	}

	.site-header__account,
	.site-header__lang,
	.site-header__toggle {
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
		padding: 0;
		border-radius: var(--angle-l);
	}

	.site-header__account .btn__icon {
		width: 20px;
		height: 20px;
	}

	.site-header__toggle span {
		width: 16px;
	}
}

/* ==================================================================
 * ANIMATIONS DEMANDÉES PAR LE STUDIO
 * Notion « Retours site web - Envol », relevés le 2026-09-07.
 * ------------------------------------------------------------------ */

/* [R6] Hero d'accueil : la phrase s'écrit puis s'efface.
 * Le curseur est un pseudo-élément : il ne fait pas partie du texte,
 * donc rien n'est lu deux fois par un lecteur d'écran. La hauteur du
 * bloc est figée par le JS sur la plus longue phrase, la carte du
 * hero ne bouge donc pas d'un pixel pendant le cycle. */
.s-hero__box-placeholder.is-typing::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-left: 2px;
	background: currentColor;
	vertical-align: text-bottom;
	animation: envol-caret 1.05s steps(1, end) infinite;
}

@keyframes envol-caret {
	0%, 45% { opacity: 1; }
	50%, 95% { opacity: 0; }
	100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.s-hero__box-placeholder.is-typing::after {
		display: none;
	}
}

/* [R14] The App : le cercle grossit au survol pour appeler le clic.
 * On anime `scale` et non `transform` : le cercle est positionné en
 * absolu et n'a pas de transform à préserver, et c'est la propriété
 * déjà utilisée par le système d'apparition.
 * ⚠ Le bloc n'a aujourd'hui aucun lien : l'effet suggère un clic qui
 * ne mène nulle part tant que le studio n'a pas fourni la cible. */
.s-tel-demo__media::before {
	transition: scale var(--dur-hover) var(--ease-out);
}

.s-tel-demo__media:hover::before,
.s-tel-demo__media:focus-within::before {
	scale: 1.06;
}

/* [R22] [T04] Retreat, cartes hôtes : l'animation de la maquette ne
 * s'arrête pas au redressement, les trois cartes s'écartent aussi pour
 * devenir lisibles. Le système d'apparition révèle toujours vers
 * `transform: none` : l'état de REPOS doit donc être l'état d'arrivée,
 * trois cartes côte à côte, et c'est l'état masqué qui porte la pile de
 * départ, inclinaison plus rapprochement.
 * Avant ce correctif le repos gardait `margin-left: -11.75%` et
 * `-7.88%`, soit 158px et 106px de recouvrement mesurés à 1440px pour
 * 50px de padding : un quart de la colonne de texte des cartes 1 et 2
 * restait caché sous la carte suivante, même une fois l'animation
 * terminée, et aussi pour les visiteurs en `prefers-reduced-motion`,
 * qui n'ont jamais l'animation.
 * Le rapprochement passe par `translate3d` et non par les marges : une
 * marge est du layout, le système ne sait animer que des `transform`.
 * La largeur de carte se déduit du gap par `--hosts-gap` : les deux
 * valeurs ne peuvent plus diverger. */
@media (min-width: 1024px) {
	.s-hosts__grid {
		--hosts-gap: 40px;
		gap: var(--hosts-gap);
	}

	.s-hosts__card {
		flex: 0 0 calc((100% - 2 * var(--hosts-gap)) / 3);
		width: calc((100% - 2 * var(--hosts-gap)) / 3);
	}

	/* État d'arrivée : plus de marge négative, plus de rotation. Le
	 * décalage vertical de 86px des deux cartes latérales est conservé,
	 * c'est le rythme en escalier de la maquette. */
	.s-hosts__card:nth-child(3n + 1),
	.s-hosts__card:nth-child(3n + 2),
	.s-hosts__card:nth-child(3n) {
		margin-left: 0;
		transform: none;
	}

	/* État de départ : la pile de la maquette. Les deux cartes latérales
	 * convergent vers celle du milieu de 40% de leur largeur (168px à
	 * 1440px) et les TROIS sont inclinées. La carte du milieu était
	 * oubliée par le premier passage : son état masqué donnait une
	 * matrice sans rotation alors que sa règle de repos la montre à
	 * 6deg. */
	.s-hosts__card:nth-child(3n + 1) {
		--rv-tilt: -6deg;
		--rv-shift: 40%;
	}

	.s-hosts__card:nth-child(3n + 2) {
		--rv-tilt: 6deg;
		--rv-shift: 0px;
	}

	.s-hosts__card:nth-child(3n) {
		--rv-tilt: 6deg;
		--rv-shift: -40%;
	}
}

/* Entre 1024 et 1279 la carte tombe à 291px : le padding de 50px ne
 * laisserait que 191px de colonne de texte. On repasse au padding 30,
 * la colonne remonte à 231px. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.s-hosts__card {
		padding: 30px;
	}
}

/* État masqué. Il compose le rapprochement, la remontée de 24px et
 * l'inclinaison. `translate3d` en premier : la rotation s'applique
 * ensuite autour du centre déjà déplacé. Sous 1024px `--rv-shift` et
 * `--rv-tilt` ne sont pas déclarés, les valeurs de repli laissent le
 * mouvement vertical seul, comme avant.
 * Courbe `--ease-solid` et non `--ease-lift` : la première est la
 * courbe des cartes, la seconde est réservée aux boutons. Tant que le
 * mouvement faisait 24px de haut le point restait théorique, sur 168px
 * de course latérale il ne l'est plus.
 * Cette règle doit rester APRÈS le bloc ci-dessus : à spécificité égale
 * c'est l'ordre du fichier qui décide, et c'est elle qui doit l'emporter
 * sur le `transform: none` de l'état de repos. */
.js [data-rv="tilt"] {
	transform: translate3d(var(--rv-shift, 0px), 24px, 0) rotate(var(--rv-tilt, 0deg));
	transition-duration: var(--rv-card);
	transition-timing-function: var(--ease-solid);
}

/* [R2 suite] Marge de 20px à gauche dans la barre de nav.
 * Elle était à 10px, comme la maquette (logo à x=10 dans le composant
 * 12325:76011). Le PNG du logo est détouré horizontalement, l'encre
 * démarre à la colonne 0 : la marge visible des lettres est donc
 * exactement le padding de la barre.
 * On applique 20px des DEUX côtés pour rester symétrique. Le padding
 * vertical reste à 10px : le monter à 20 ferait passer la barre de 60
 * à 80px (le plus haut enfant fait 40), et casserait les 20px de marge
 * au-dessus et en dessous des lettres qu'on vient de caler. */
@media (min-width: 768px) {
	.site-header__bar {
		padding-inline: 20px;
	}
}

/* Hero d'accueil : suppression du petit filet vertical à gauche du
 * texte « How do you feel? ». Il venait de `.s-hero__box-text::before`
 * (1x22px), et le placeholder portait 12px de padding pour le
 * contourner. On retire les deux, sinon le texte resterait décalé. */
.s-hero__box-text::before {
	content: none;
}

.s-hero__box-placeholder {
	padding-left: 0;
}

/* Purchase, bloc « Support you can return to » : le texte était du
 * mauvais côté et passait sous le téléphone.
 *
 * La carte porte `--img-right`, qui la met en `row-reverse`. Mais
 * pour la variante `--bleu-lavande` l'image est en `position:
 * absolute` (téléphone incliné débordant en haut à droite, réglé
 * plus haut) : elle est donc HORS DU FLUX. Le seul enfant restant,
 * le contenu, se retrouvait poussé au bord droit par le
 * `row-reverse`, c'est-à-dire précisément sous le téléphone.
 *
 * Mesuré à 1920 : texte à x=1016 alors que la maquette le place à
 * x=220 (Frame 1000004797, carte à 130 + 90px de padding gauche).
 * On remet donc cette carte en `row` : le contenu reprend sa place
 * au bord gauche, le téléphone reste absolu à droite. */
@media (min-width: 1024px) {
	.s-story__card--bleu-lavande.s-story__card--img-right {
		flex-direction: row;
	}
}

/* Purchase, bloc « 84% feel better » : colonne de texte à 635px.
 * `.s-story__content` est plafonné à 565px par défaut, et seule la
 * variante `--bleu-lavande` remontait à 635. La maquette donne 635
 * aux DEUX blocs de la page (Frame 1000004795 et 1000004799, tous
 * deux w=635 ; c'est le paragraphe interne qui est indenté à 546).
 * `--rose-lavande` n'existe qu'ici sur tout le site, la portée est
 * donc close. */
@media (min-width: 1024px) {
	.s-story__card--rose-lavande .s-story__content {
		max-width: 635px;
	}
}

/* Purchase : téléphone incliné ramené vers le centre.
 * La maquette le fait déborder de 50px au-delà du bord droit de la
 * carte (Rectangle 37 à x=1289 pour une carte qui finit à 1790),
 * d'où le `right: -50px` d'origine. Écart assumé, demandé après
 * relecture : on le rentre au ras de la carte.
 * Un seul réglage, --tel-right : plus la valeur monte, plus le
 * téléphone va vers le centre.
 *   -50px  position de la maquette
 *     0px  au ras du bord de la carte  <- valeur actuelle
 *    40px  nettement rentré
 * Le texte s'arrête à x=855, le téléphone démarre à 1239 : aucun
 * risque de chevauchement avant environ 380px de décalage. */
@media (min-width: 1024px) {
	.s-story__card--bleu-lavande .s-story__image {
		--tel-right: 0px;
		right: var(--tel-right);
	}
}

/* Purchase : téléphone plus petit et davantage ramené vers le centre.
 * Trois réglages regroupés, la hauteur suit le ratio natif du PNG
 * (552x762) donc l'image ne peut pas se déformer.
 *   --tel-w      largeur. Maquette : 551px.
 *   --tel-right  décalage depuis le bord droit de la carte. Plus la
 *                valeur monte, plus le téléphone rentre. Maquette : -50px.
 *   --tel-top    débord vers le haut. Réduit proportionnellement à la
 *                largeur (460/551 = 0.835 sur les -220px d'origine),
 *                sinon une image plus petite flotte trop haut.
 * Le texte finit à x=855, le téléphone démarre à 1230 : la marge
 * reste large. */
@media (min-width: 1024px) {
	.s-story__card--bleu-lavande .s-story__image {
		--tel-w: 460px;
		--tel-right: 100px;
		--tel-top: -184px;

		width: var(--tel-w);
		height: calc(var(--tel-w) * 762 / 552);
		right: var(--tel-right);
		top: var(--tel-top);
	}
}

/* Purchase : plus d'air au-dessus du bloc au téléphone.
 * Le téléphone est en absolu avec un débord vers le haut (--tel-top),
 * si bien qu'il sortait de 114px AU-DESSUS de sa propre section et
 * empiétait sur les pictos. Les 70px de padding par défaut ne
 * suffisaient pas à l'accueillir.
 * On cible la section par son contenu plutôt que par un id de page :
 * la règle suit le bloc si le client le déplace.
 *   --tel-top vaut -184 : il faut donc au moins 184 de padding-top
 *   pour que le téléphone reste dans sa section. 220 laisse 36px de
 *   respiration en plus. */
@media (min-width: 1024px) {
	.s-story:has(.s-story__card--bleu-lavande) {
		padding-top: 220px;
	}
}

/* ==================================================================
 * [T18] Purchase, bloc « Support you can return to » : le téléphone
 * n'est plus recadré en dessous de 1024px, retour « image applatie ».
 *
 * Cause : la hauteur de 191px posée dans le bloc mobile sort de la
 * maquette de l'ACCUEIL (« Image et texte », 13328:42145), dont la
 * photo est en paysage. Le sélecteur `.s-story__image img` n'a pas de
 * portée de page, la valeur descend donc aussi sur le PNG du téléphone
 * de Purchase, lui en portrait (552x762). Avec l'`object-fit: cover`
 * de la règle de base, l'image est rendue en 290x400 dans une boîte de
 * 290x191 : 209px sont coupés, soit 52 pour cent de sa hauteur. Entre
 * 768 et 1023px le même défaut vient de l'`aspect-ratio: 688 / 452`,
 * également paysage.
 *
 * Correctif : ratio natif du PNG et aucun recadrage, comme au-dessus de
 * 1024px. Le ratio est écrit en dur volontairement : l'img porte
 * `sizes="auto, ..."`, donc `aspect-ratio: auto` rend la taille
 * intrinsèque instable.
 * La largeur est bornée à 290px, valeur de la boîte à 390px. Sans cette
 * borne le téléphone atteint 831x1148 à 1023px, alors que le desktop le
 * borne déjà à 460 via --tel-w.
 *
 * Portée : `--bleu-lavande` n'existe que sur Purchase et sur ce seul
 * bloc. L'accueil est en `--lavande-bleu`, les deux mots sont inversés,
 * et garde sa photo paysage en 290x191.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {

	.s-story__card--bleu-lavande .s-story__image {
		max-width: 290px;
		margin-inline: auto;
	}

	.s-story__card--bleu-lavande .s-story__image img {
		height: auto;
		aspect-ratio: 552 / 762;
		object-fit: contain;
		border-radius: 0;
	}
}

/* ==================================================================
 * Fonds vidéo (retours 10 et 20 du Notion).
 *
 * La vidéo ne REMPLACE pas le visuel de fond, elle le recouvre :
 * l'image reste le poster, donc elle s'affiche pendant le chargement
 * et sert de repli si la lecture est refusée (économiseur de données,
 * vieux navigateur, autoplay bloqué). Rien ne peut donc se retrouver
 * sur un fond vide.
 *
 * Le hero pose déjà son image en <img class="s-hero-page__bg"> avec
 * z-index -1 : la vidéo prend exactement la même géométrie.
 * Le bandeau CTA, lui, pose son image en background-image CSS, donc
 * la vidéo se cale simplement en absolu par-dessus.
 * ------------------------------------------------------------------ */
.s-hero-page__video,
.s-cta-band__video {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	pointer-events: none;
}

/* Le bandeau CTA n'était pas positionné : sans ça, la vidéo se
 * placerait par rapport à un ancêtre quelconque.
 *
 * `isolation: isolate` n'est pas décoratif, il est indispensable ici.
 * La vidéo est en z-index -1 et la section porte son visuel en
 * background-image CSS (posé en inline par cta-bandeau.php). Sans
 * contexte d'empilement sur la section, un enfant en z-index négatif
 * remonte dans le contexte de la racine et se peint AVANT le fond de
 * la section : le JPG du ciel recouvrait la vidéo, qui ne s'est donc
 * jamais vue sur l'accueil. C'est le traitement déjà appliqué à
 * `.s-hero-page`, la seule raison pour laquelle la vidéo du héros de
 * /retreats/ fonctionne alors que celle du bandeau ne fonctionnait pas.
 * Le contenu reste au-dessus, `.s-cta-band__content` est en z-index 1. */
.s-cta-band {
	position: relative;
	isolation: isolate;
}

.s-cta-band__content {
	position: relative;
	z-index: 1;
}

/* Mouvement réduit : on rend la main au visuel fixe. Le poster reste
 * affiché, personne ne se retrouve devant un cadre vide. */
@media (prefers-reduced-motion: reduce) {
	.s-hero__video,
	.s-hero-page__video,
	.s-cta-band__video {
		display: none;
	}
}

/* ==================================================================
 * MOBILE, hauteur des heros.
 *
 * `.s-hero-page` porte `min-height: clamp(560px, 58.4vw, 1121px)`.
 * Le 58.4vw vient du desktop (1121/1920) et y est juste, mais a 390px
 * de large il ne vaut que 228px : le clamp retombe sur son plancher de
 * 560 et le hero sort 240px trop court sur les quatre pages qui
 * l'utilisent. Il n'existait tout simplement aucune valeur mobile.
 *
 * Les maquettes mobiles donnent (verifie sur frame Figma) :
 *   Accueil 806 · App 806 · Buy Sub 1 806
 *   Buy Sub 2 801 · Retreat 798 (Rectangle 1, 13328:42717) · Partners 800
 * On pose 806 en base et on reprend les deux ecarts reels.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-hero,
	.s-hero-page {
		min-height: 806px;
	}

	.page-id-77 .s-hero-page {
		min-height: 798px;
	}

	.page-id-59 .s-hero-page {
		min-height: 800px;
	}
}

/* ==================================================================
 * MOBILE, hero de l'accueil cale sur la maquette.
 *
 * Trois defauts, tous herites du desktop faute de valeur mobile :
 *
 * 1. Le titre porte `clamp(44px, 3.9vw, 75px)`, dont le plancher de
 *    44 s'applique a 390px. L'echelle mobile dit 40 (--size-h1).
 *
 * 2. La grille du hero distribue ses `fr` a partir du minimum de la
 *    premiere rangee : `minmax(132px, 1.7fr)` fixe 1.7fr a 132, donc
 *    1fr a 77.6 et les 4.73fr du bas a 367. Total 132 + 480 + 367 =
 *    979 au lieu des 806 de la maquette. On neutralise donc la
 *    distribution en mobile : rangee haute calee sur les 144px du
 *    titre, rangee basse en 1fr qui absorbe le reste jusqu'au
 *    min-height. Le padding de 128px du contenu tombe, sinon il
 *    s'ajoute aux 144.
 *
 * 3. La carte vitree et son bouton n'ont aucune largeur mobile et
 *    s'etalent sur toute la colonne (350 et 316) au lieu des 253 et
 *    189 de la maquette.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-hero__title {
		font-size: var(--size-h1);
	}

	.s-hero {
		--hero-top-min: 144px;
		--hero-row-top: auto;
		--hero-bottom-min: 0px;
		--hero-row-bottom: 1fr;
	}

	.s-hero__content {
		padding-top: 0;
	}

	.s-hero__box {
		width: 253px;
		min-height: 189px;
		margin-inline: auto;
	}

	.s-hero__box-button {
		width: 189px;
	}
}

/* Accueil, ecart titre / paragraphe du hero : 22px dans la maquette
 * (correction de relecteur, l'inventaire initial disait 94). */
@media (max-width: 767px) {
	.s-hero__subtitle {
		margin-top: 22px;
	}
}

/* Hero des pages interieures : le H1 est a y=144 dans les maquettes
 * mobiles (verifie sur Retreat 13328:42718 et Partners), le padding
 * etait reste a 128. Il etait partage avec `.s-hero__content` de
 * l'accueil, desormais traite separement juste au-dessus. */
@media (max-width: 767px) {
	.s-hero-page__inner {
		padding-top: 144px;
	}
}

/* ==================================================================
 * MOBILE, carrousel temoignages cale sur la maquette.
 * Reference : instance `mobile temoignage` 13328:42135.
 *
 * La carte fait bien 260 de large mais n'avait PAS son padding de 30 :
 * le media et le texte s'etalaient donc sur 260 au lieu de 200, ce qui
 * change completement la silhouette de la carte (photo trop large,
 * citation sur moins de lignes).
 *
 * Geometrie Figma : carte 260 padding 30, media 200x273 radius 14,
 * bouton play 50x50 centre sur le media avec une icone de 28,
 * citation 200 de large, auteur 20px sous la citation.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-testimonials__card {
		padding: 30px;
	}

	.s-testimonials__media {
		height: 273px;
	}

	/* Bouton play : 50x50, icone 28. Le disque est blanc et le triangle
	 * violet (releve au pixel sur la maquette), ce que le site faisait
	 * deja bien. */
	.s-testimonials__play {
		width: 50px;
		height: 50px;
	}

	.s-testimonials__play img {
		width: 28px;
		height: 28px;
	}
}

/* ==================================================================
 * MOBILE, roue des advisors.
 * Reference : `mobile roue` dans Frame 1000005000 (13328:42139),
 * 349x466, anneau au-dessus, fleches et specialite en dessous.
 *
 * `.s-wheel` est en `display: flex` sans `flex-direction` : en mobile
 * l'anneau et la navigation se retrouvaient donc COTE A COTE sur la
 * meme rangee. L'anneau, comprime, tombait a 168px de large au lieu
 * de 349, et ses portraits a 29px au lieu de 59. Les regles mobiles
 * existantes (width: min(349px, 92vw), portraits a 17%) etaient
 * correctes mais sans effet, ecrasees par le flex.
 *
 * 466 = 400 (anneau, ratio 349/400) + 22 + 44 (fleches).
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-wheel {
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}

	.s-wheel__circle {
		flex: 0 0 auto;
	}
}

/* ==================================================================
 * MOBILE, cartes « Backed by research ».
 * Reference : instance `mobile doc` 13328:42148.
 *
 * La carte fait 238x344 dans la maquette, elle sortait a 238x608 :
 * le titre etait reste en 22px et la note en 18px, deux valeurs
 * desktop, ce qui faisait passer le titre de 3 a 6 lignes.
 *
 * Maquette, contenu de 178 de large :
 *   icone 34 centree, puis titre 178x63 (3 lignes de 21) a +20,
 *   note 178x63 a +30, bouton 153x44 a +30.
 *   63 / 3 = 21px de hauteur de ligne, soit 14px en 1.5.
 *
 * Gap entre cartes : 24 et non 14. Les cartes sont a x=20, 282 et
 * 544, donc 282 - 20 - 238 = 24. Mon lot 3 avait lu les 782px de
 * piste comme une largeur alors que c'est le bord droit de la
 * derniere carte, d'ou un gap sous-estime.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-cards--recherche .s-cards__card-title {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-cards--recherche .s-cards__note {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-cards--recherche .s-cards__grid {
		gap: 24px;
	}
}

/* Suite : rythme interne de la carte « Backed by research ».
 * Le gap valait 50 (desktop). La maquette groupe l'icone et le titre
 * dans un meme bloc de 117 (34 + 20 + 63), puis espace de 30 vers la
 * note et de 30 vers le bouton. Sur le site l'icone et le titre sont
 * freres, un gap uniforme ne peut donc pas exprimer les deux valeurs :
 * on pose 30 et on resserre le seul ecart icone/titre a 20.
 *   34 + 20 + 63 + 30 + 63 + 30 + 44 = 284, soit 344 avec le padding. */
@media (max-width: 767px) {
	.s-cards--recherche .s-cards__card {
		gap: 30px;
	}

	.s-cards--recherche .s-cards__card-title {
		margin-top: -10px;
	}
}

/* ==================================================================
 * MOBILE, passe visuelle sur l'accueil, frame par frame.
 *
 * Methode : capture du vrai site a 390px posee a cote du rendu du
 * noeud Figma correspondant, page « Mobile accueil » 13328:42073.
 * Toutes les valeurs ci-dessous sortent d'une mesure, la source est
 * citee section par section. Ecarts de hauteur constates au depart :
 *   logos -19, quizz +52, etapes +61, chiffres +157, roue +30,
 *   recherche +102, image-texte +91, bandeaux -145, faq +78.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* -- Logos, 13328:42150 (390x321) --------------------------------
	 * Le titre est centre dans sa boite de 370 (il etait cale a
	 * gauche), les logos font 80 de haut et non 64. */
	.s-logos__title {
		text-align: center;
	}

	.s-logos__list img {
		height: 80px;
	}

	/* -- Quizz, 13328:42088 (390x738) --------------------------------
	 * Carte 350x688 posee a 20 du bord : 40 de padding haut, titre de
	 * 58, 40, six options de 80 espacees de 10, 20 de padding bas.
	 * 20 + 688 + 30 = 738. */
	.s-quiz {
		padding-block: 20px 30px;
	}

	.s-quiz__title {
		margin-bottom: 40px;
	}

	.s-quiz__grid {
		gap: 10px;
	}

	/* -- Etapes, 13328:42089 (carte 350x1043) ------------------------
	 * 60 + 58 + 30 + 42 + 50 + 658 + 40 + 65 + 40 = 1043.
	 * Le bloc des etapes vaut 178 + 50 + 202 + 50 + 178 : cercle 100,
	 * 20, libelle 24, 10, texte. Titre et sous-titre sont plafonnes a
	 * 274 et centres, comme les boites de texte de la maquette.
	 * La carte suit de pres les temoignages, d'ou le padding haut de
	 * 10 : le fond bleu est continu entre les deux sections. */
	.s-steps {
		padding-block: 10px 30px;
	}

	.s-steps__card {
		padding: 60px 16px 40px;
	}

	.s-steps__title {
		max-width: 274px;
		margin-inline: auto;
	}

	.s-steps__subtitle {
		max-width: 274px;
		margin: 30px auto 0;
	}

	.s-steps__list {
		margin-top: 50px;
		gap: 50px;
	}

	.s-steps__step {
		gap: 10px;
	}

	.s-steps__label {
		margin-top: 10px;
	}

	/* La premiere etape porte un retour a la ligne saisi pour le
	 * desktop. La maquette mobile la donne sur une seule ligne. */
	.s-steps__step:first-child .s-steps__text br {
		display: none;
	}

	.s-steps__card .btn-gradient {
		margin-top: 40px;
		min-width: 243px;
		width: 243px;
	}

	/* -- Chiffres, 13328:42136 (390x815) -----------------------------
	 * 60 + titre 29 + 35 + 3 cartes de 197 espacees de 20 + 60 = 815.
	 * La carte vaut 30 + nombre 48 + 20 + libelle 48 + note 21 + 30 :
	 * le nombre etait reste en 48px (desktop) au lieu de 40, et la
	 * note en 16 au lieu de 14. Le titre est un H3, pas un H2. */
	.s-stats {
		padding-block: 60px;
	}

	.s-stats__title {
		font-size: var(--size-h3);
		margin-bottom: 35px;
	}

	.s-stats__grid {
		gap: 20px;
	}

	.s-stats__number {
		font-size: 40px;
	}

	.s-stats__note {
		font-size: 14px;
	}

	/* -- Titres de section qui introduisent une autre section --------
	 * La maquette ouvre a 60 et ne laisse rien dessous : c'est la
	 * section suivante qui pose l'ecart (30 pour la roue, 40 pour les
	 * cartes). Le sous-titre est a 30 du titre, pas a 20. */
	.s-heading:has(+ .s-wheel),
	.s-heading:has(+ .s-cards) {
		padding-block: 60px 0;
	}

	.s-heading__subtitle {
		margin-top: 30px;
	}

	/* -- Roue, 13328:42144 (349x466) ---------------------------------
	 * 370 (anneau) + 20 + 76 (navigation) = 466. L'anneau mesure
	 * 286x285 dans un cadre de 349x370, donc quasiment rond : le site
	 * en faisait une ellipse haute. Portraits a 50 (ils etaient a 59),
	 * portrait actif a 90, soit un facteur 1.8 et non 2.1. */
	.s-wheel {
		padding-block: 30px 20px;
		gap: 20px;
	}

	.s-wheel__circle {
		aspect-ratio: 349 / 370;
	}

	.s-wheel__ring {
		inset: 11.6% 9.2% 11.4% 8.9%;
	}

	.s-wheel__portrait {
		width: 14.3%;
	}

	.s-wheel__portrait--1 { top: 5.4%; }
	.s-wheel__portrait--2 { top: 24.6%; right: 5.7%; }
	.s-wheel__portrait--3 { bottom: 22.4%; right: 5.7%; }
	.s-wheel__portrait--4 { bottom: 5.4%; }
	.s-wheel__portrait--5 { bottom: 22.4%; left: 5.7%; }
	.s-wheel__portrait--6 { top: 24.6%; left: 5.7%; }

	.s-wheel__portrait.is-active {
		transform: scale(1.8);
	}

	.s-wheel__center {
		font-size: 20px;
		line-height: 36px;
	}

	.s-wheel__mobile-nav {
		height: 76px;
		margin: 0 auto;
	}

	.s-wheel__mobile-nav button {
		width: 50px;
		height: 50px;
	}

	/* -- Backed by research, 13328:42148 (390x603) -------------------
	 * 60 + titre 29 + 40 + cartes 344 + 40 + fleches 70 + 20 = 603.
	 * Le titre et les cartes etaient deux sections a 40 et 100 de
	 * padding, ce qui creusait 179 entre les deux au lieu de 40. */
	.s-cards--recherche {
		padding-block: 0 20px;
	}

	/* -- Image et texte, 13328:42145 (390x719) -----------------------
	 * 60 + carte 599 + 60. Carte : 30 + image 191 + 40 + titre 58 +
	 * 20 + citation 21 + 20 + texte 189 + 30. Citation et texte
	 * etaient restes en 18 et 16, soit deux lignes de plus chacun. */
	.s-story {
		padding-block: 60px;
	}

	.s-story__card {
		padding: 30px;
		gap: 40px;
	}

	.s-story__image img {
		height: 191px;
	}

	.s-story__content {
		gap: 20px;
	}

	.s-story__quote {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-story__text {
		font-size: 14px;
		line-height: 1.5;
	}

	/* -- Bandeau « You're not alone », 13328:42113 (390x806) ---------
	 * Le bandeau occupe 564 et le bandeau quiz les 242 restants.
	 * Contenu plafonne a 261 et centre : c'est ce qui casse le titre
	 * en deux lignes comme dans la maquette, il tenait sur une seule
	 * en pleine largeur. 100 + 96 + 44 + 42 + 44 + 65 + 173 = 564. */
	.s-cta-band--centre {
		padding-block: 100px 173px;
	}

	.s-cta-band--centre .s-cta-band__content {
		max-width: 261px;
		margin-inline: auto;
	}

	.s-cta-band--centre .s-cta-band__subtitle {
		margin-top: 44px;
		font-size: 14px;
		line-height: 1.5;
	}

	.s-cta-band--centre .s-cta-band__button {
		width: 226px;
		justify-content: space-between;
		padding: 20px 30px;
	}

	.s-cta-band--centre .s-cta-band__button img {
		width: 22px;
		height: 25px;
	}

	/* Bandeau quiz : la cle faisait 22x36, la maquette mobile la
	 * donne a 14x24, ce qui ramene le bouton de 78 a 64 et la carte
	 * a ses 182 de haut. */
	.s-quiz-band__button {
		font-size: 16px;
	}

	.s-quiz-band__button img {
		width: 14px;
		height: 24px;
	}

	/* -- FAQ, 13328:42146 (390x799) ----------------------------------
	 * La carte etait deja juste (717 contre 719), c'est le padding bas
	 * de la section qui valait 100 au lieu de 20. Ecart titre / liste
	 * a 40 : la premiere ligne de separation tombe alors a 258. */
	.s-faq {
		padding-block: 60px 20px;
	}

	.s-faq__card {
		gap: 40px;
	}

	/* Les boutons ronds de la maquette font 65 de haut : 20 de padding
	 * de part et d'autre d'une cle de 22x25. Ils sortaient a 61. */
	.btn-gradient,
	.s-quiz__cta,
	.s-cta-band__button,
	.s-stats__cta,
	.s-heading__cta,
	.s-double-cta__btn,
	.s-reviews__cta {
		padding: 20px 30px;
	}

	.btn-gradient img,
	.s-quiz__cta img,
	.s-cta-band__button img,
	.s-stats__cta img,
	.s-heading__cta img {
		width: 22px;
		height: 25px;
	}
}

/* ==================================================================
 * Suite : deux points restes ouverts apres la passe accueil.
 * ------------------------------------------------------------------ */

/* Les fleches de carrousel des cartes ne servent qu'en mobile : plus
 * haut la grille est une vraie grille de trois colonnes, elle ne
 * defile pas. Elles sont masquees par defaut et rendues en mobile. */
.s-cards__nav {
	display: none;
}

@media (max-width: 767px) {

	/* L'ecart titre / cartes valait 40 via `margin-top` sur la piste.
	 * Le padding haut de la section etant tombe a 0, cette marge
	 * fusionnait avec celle de la section et disparaissait : on la
	 * porte en padding, qui lui ne fusionne pas.
	 * 40 + 356 + 40 + 70 + 20 = 526, plus le titre de 89 = 615. */
	.s-cards--recherche {
		padding-block: 40px 20px;
	}

	.s-cards--recherche .s-cards__grid {
		margin-top: 0;
	}

	.s-cards__nav {
		display: flex;
		margin-top: 40px;
	}
}

/* ==================================================================
 * Accueil mobile, troisieme passe : ce que la comparaison des rendus
 * a fait apparaitre une fois les hauteurs alignees.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Logos : la maquette casse le titre apres « partners ». Sa boite
	 * fait 370 mais le texte n'en occupe que 294, donc un plafond a
	 * 310 reproduit la coupure sans figer de retour a la ligne. */
	.s-logos__title {
		max-width: 310px;
		margin-inline: auto;
	}

	/* Temoignages, 13328:42135 (390x850) ----------------------------
	 * 60 + titre 29 + 60 + carte 541 + 30 + fleches 70 + 60 = 850.
	 * La carte vaut 30 + media 273 + 20 + citation 144 + 20 + auteur
	 * 24 + 30 : la citation etait en 18 et l'auteur en 14, la
	 * maquette les donne tous les deux en 16 sur 24. */
	.s-testimonials {
		padding-block: 60px;
	}

	.s-testimonials__title {
		margin-bottom: 60px;
	}

	/* La piste porte 20px de padding lateral, mais le calage
	 * `scroll-snap-align: start` alignait le bord de la carte sur le
	 * bord du cadre de defilement : le navigateur faisait defiler ces
	 * 20px, la premiere carte collait donc au bord gauche. */
	.s-testimonials__track {
		scroll-padding-inline: 20px;
	}

	.s-testimonials__quote {
		font-size: 16px;
		line-height: 1.5;
	}

	.s-testimonials__author {
		font-size: 16px;
		line-height: 1.5;
	}

	.s-testimonials__nav {
		margin-top: 30px;
	}

	/* Fleche de 27 dans un rond de 70, partout : temoignages, avis,
	 * advisors et cartes « Backed by research ». Elle etait restee a
	 * 36, soit la valeur des ronds de 92 du desktop. */
	.s-testimonials__arrow img {
		width: 27px;
		height: 27px;
	}

	/* Bandeau « You're not alone » : la photo (Rectangle 29,
	 * 13328:42112) fait 390x806 et passe DERRIERE le bandeau quiz,
	 * exactement comme en desktop ou le bandeau remonte de 431 dans
	 * la photo. En mobile il remonte de 242, soit sa carte de 182
	 * plus ses 60 de padding bas : la carte tombe a 564 et le tout
	 * fait 806. */
	.home .s-cta-band--centre {
		min-height: 806px;
		padding-block: 100px 242px;
	}

	.home .s-cta-band--centre + .s-quiz-band {
		position: relative;
		z-index: 1;
		margin-top: -242px;
		padding-block: 0 60px;
	}

	/* FAQ : les questions etaient en 700. Mesure des chasses sur le
	 * rendu Figma (« Can this help with what I'm » a 183px d'encre
	 * contre 180.9 en 400, 185.8 en 500) : c'est du 500. */
	.s-faq__question {
		font-weight: 500;
	}
}

/* ==================================================================
 * Accueil mobile, quatrieme passe.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* La fleche de carrousel est dessinee dans un cadre d'icone de
	 * 27.39 mais ne mesure que 15.31 : le SVG du theme, lui, remplit
	 * toute sa boite. A 27px la fleche sortait donc 1.8 fois trop
	 * grosse. Le trace est le meme des deux cotes (meme rapport de
	 * 14.9 % entre la hampe et la boite), seule la taille changeait. */
	.s-testimonials__arrow img {
		width: 15px;
		height: 15px;
	}

	/* FAQ : la maquette fige chaque ligne a 70. Avec 15 de padding une
	 * question sur deux lignes montait a 73. A 14, les lignes simples
	 * tombent a 69 (la pastille de 40 commande) et les doubles a 71,
	 * soit 489 pour les sept contre 490 dans la maquette. */
	.s-faq__question {
		padding-block: 14px;
	}
}

/* ==================================================================
 * Accueil mobile, cinquieme passe : chasses et largeurs de texte.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Les boites de titre et de sous-titre des intertitres font 274
	 * dans la maquette (roue 13328:42139, recherche 13328:42148).
	 * En pleine largeur le sous-titre de la roue se coupait apres
	 * « experts » au lieu de « and ». */
	.s-heading:has(+ .s-wheel) .s-heading__title,
	.s-heading:has(+ .s-cards) .s-heading__title,
	.s-heading:has(+ .s-wheel) .s-heading__subtitle,
	.s-heading:has(+ .s-cards) .s-heading__subtitle {
		max-width: 274px;
		margin-inline: auto;
	}

	/* « Our board of advisors » est en graisse normale dans la
	 * maquette : 91px d'encre pour « Our board » en 20px, soit la
	 * chasse du 400 (96.1 d'avance) et pas celle du 500 (98.8). */
	.s-wheel__center {
		font-weight: 400;
	}
}

/* ==================================================================
 * MOBILE, page The App. Reference : page « Mobile App » 13328:42152.
 * Ecarts de depart, section par section :
 *   quizz -28, pictos +393, cartes « Why it works » +632,
 *   chiffre cle -20, temoignages -24, faq -40.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Le quizz est pose a 60 du haut sur The App et a 20 sur
	 * l'accueil : meme composant, deux calages dans la maquette. */
	.s-quiz {
		padding-block: 60px 20px;
	}

	.home .s-quiz {
		padding-block: 20px 30px;
	}

	/* Pictos, « clic 3 » 13328:42221 (392x994) --------------------
	 * 60 + titre 58 + 40 + etapes 506 + 40 + media 165 + 40 +
	 * bouton 65 + 20 = 994. Les ecarts verticaux valaient 83, la
	 * maquette en pose 40 partout, et le media faisait 320 au lieu
	 * de 165. Le titre tient sur deux lignes dans sa boite de 274. */
	.s-pictos {
		padding-block: 60px 20px;
	}

	.s-pictos__inner {
		gap: 40px;
	}

	.s-pictos__title {
		max-width: 274px;
		margin-inline: auto;
	}

	.s-pictos__item {
		gap: 20px;
	}

	/* Le libelle du milieu tient sur deux lignes dans la maquette
	 * (boite de 167). A 175 il passait sur une seule. */
	.s-pictos__label {
		max-width: 167px;
	}

	.s-pictos__media {
		height: 165px;
	}

	.s-pictos .btn-gradient {
		min-width: 243px;
		width: 243px;
	}

	/* Cartes « Why it works », 13328:42269 (390x987) --------------
	 * Carte 350x266 : 30 + photo 100 + 20 + titre 24 + 20 + texte
	 * 42 + 30. Elle sortait a 401 avec une photo de 160, un titre
	 * en 28 sur deux lignes et un texte en 16. */
	.s-cards--why {
		padding-block: 60px 20px;
	}

	.s-cards--why .s-cards__card {
		padding: 30px;
		gap: 20px;
	}

	.s-cards--why .s-cards__image {
		width: 100px;
		height: 100px;
	}

	.s-cards--why .s-cards__card-title {
		font-size: 16px;
		line-height: 1.5;
	}

	.s-cards--why .s-cards__text {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Les fleches n'ont de sens que sur la piste horizontale de la
	 * variante « recherche ». Les autres empilent leurs cartes. */
	.s-cards__nav {
		display: none;
	}

	.s-cards--recherche .s-cards__nav {
		display: flex;
	}
}

/* ==================================================================
 * Suite : trois reglages fins.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Les titres de « Why it works » portent un retour a la ligne
	 * saisi pour le desktop. La maquette mobile les donne sur une
	 * seule ligne, ce qui ramene la carte de 290 a 266. */
	.s-cards--why .s-cards__card-title br {
		display: none;
	}

	/* La carte « chiffre cle » remonte son titre de 20px en desktop.
	 * La maquette mobile (13328:42308) espace bien les deux titres
	 * de 20, d'ou une carte de 304 et non 284. */
	.s-stat-photo__title {
		margin-top: 0;
	}

	/* FAQ : la maquette pose 30 de marge a gauche et 25 a droite,
	 * pas 24 des deux cotes. Le texte des questions demarre alors a
	 * 50 comme le titre, et la pastille garde son bord droit a 345. */
	.s-faq__card {
		padding: 30px 25px 30px 30px;
	}
}

@media (max-width: 767px) {
	/* Le cadre du media passait bien a 165 mais l'image gardait ses
	 * 320 et debordait par-dessous : elle recouvrait le bouton. */
	.s-pictos__media img {
		height: 100%;
	}
}

/* ==================================================================
 * MOBILE, page Subscription. Reference : « Mobile Buy Subscription 1 »
 * 13328:42347. Ecarts de depart : pictos +178, premium +340,
 * tableau de prix -68.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Pictos a lignes (13328:42442) : cercle 90, 20, libelle 24, 10,
	 * texte en 16 sur 24. L'ecart cercle / libelle valait 28 et le
	 * texte 15. Un seul `gap` ne peut pas dire 20 puis 10, le texte
	 * remonte donc de 10. */
	.s-pictos__list--lines .s-pictos__item {
		gap: 20px;
	}

	.s-pictos__text {
		font-size: 16px;
		line-height: 1.5;
		margin-top: -10px;
	}

	/* Premium (13328:42509, carte 350x1228.75) -------------------
	 * Carte : 30 + badge 45 + 33 + titre 96 + 33 + intro 63 + 40 +
	 * avantages 257 + 40 + offre 561 + 30.
	 * Le titre etait en 36 au lieu de 40, l'intro en 20 au lieu de
	 * 14 et les avantages en 18 au lieu de 14. */
	.s-premium__card {
		padding: 30px;
		gap: 40px;
	}

	.s-premium__title {
		font-size: 40px;
	}

	.s-premium__text {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-premium__features li {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-premium__features li img,
	.s-premium__features li span:first-child {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
	}

	/* Offre : la maquette (mobile prix premium, 300x561.56) pose 20
	 * entre chaque bloc et 50 de marge haute et basse. Le site en
	 * mettait 40 partout, soit 120 de trop sur les six ecarts. */
	.s-premium__plans {
		gap: 20px;
	}

	.s-premium__tabs {
		gap: 10px;
	}

	.s-premium__plan {
		padding: 50px 30px;
		gap: 20px;
	}
}

/* ==================================================================
 * Subscription, suite : titres, listes et tableau de prix.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Tableau de prix (13328:42435 + mobile prix 13328:42508) ----
	 * Titre sur deux lignes dans sa boite de 274, sous-titre en 14
	 * (il etait en 18, donc sur trois lignes), periode en 14 et non
	 * en 20. L'ecart sous-titre / carte vaut 77 dans la maquette. */
	.s-pricing-table__title,
	.s-pricing-table__subtitle {
		max-width: 274px;
		margin-inline: auto;
	}

	.s-pricing-table__subtitle {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-pricing-table__mobile {
		margin-top: 77px;
	}

	.s-pricing-table__period {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Benefits (13328:42438 + 13328:42469) -----------------------
	 * 60 + titre 58 + 30 + note 42 + 40 + liste + 20. La note etait
	 * en 16 et a 16 du titre, les puces en 16 espacees de 30 alors
	 * que la maquette les donne en 14 espacees de 20. */
	.s-benefits {
		padding-block: 60px 20px;
	}

	.s-benefits__title,
	.s-benefits__note {
		max-width: 274px;
		margin-inline: auto;
	}

	.s-benefits__note {
		margin-top: 30px;
		font-size: 14px;
		line-height: 1.5;
	}

	.s-benefits__circle {
		gap: 20px;
	}

	.s-benefits__bubble {
		font-size: 14px;
		line-height: 1.5;
	}

	/* La maquette laisse 40 entre le bloc de titre et la liste, et
	 * 20 seulement entre les puces : le `gap` du conteneur ne dit
	 * qu'une valeur, la premiere puce complete l'autre. */
	.s-benefits__bubble:first-of-type {
		margin-top: 20px;
	}
}

/* ==================================================================
 * MOBILE, page Partners. Reference : « Mobile Partners » 13328:42936.
 * Ecarts de depart : advisors +161, checklist +239, avis -91,
 * cartes usages +43, formulaire +146.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Advisors (13328:43020 + 13328:43081) -----------------------
	 * 60 + titre 87 + 30 + sous-titre 126 + 20 + cartes 327 + 20 +
	 * fleches 70 + 21 = 761. Titre et sous-titre tiennent dans une
	 * boite de 274 (trois et six lignes), le sous-titre est en 14 et
	 * non en 20. */
	.s-advisors {
		padding-block: 60px 21px;
	}

	.s-advisors__title,
	.s-advisors__subtitle {
		max-width: 274px;
		margin-inline: auto;
	}

	.s-advisors__subtitle {
		margin-top: 30px;
		font-size: 14px;
		line-height: 1.5;
	}

	.s-advisors__grid {
		margin-top: 20px;
		gap: 20px;
	}

	/* Carte 221x287 : 30 + photo 100 + 30 + nom 42 + 13 + role 42 +
	 * 30. Elle sortait a 357 avec une photo de 120, un nom en 22 et
	 * un role en 17. Le `gap` vaut 30, le role remonte de 17 pour
	 * obtenir les 13 de la maquette. */
	.s-advisors__card {
		width: 221px;
		padding: 30px;
	}

	.s-advisors__card > img,
	.s-advisors__card > picture {
		width: 100px;
		height: 100px;
	}

	.s-advisors__name,
	.s-advisors__role {
		font-size: 14px;
		line-height: 1.5;
	}

	.s-advisors__role {
		margin-top: -17px;
	}

	.s-advisors__nav {
		margin-top: 20px;
	}

	/* Checklist de Partners (13328:42941 + 13328:42942) ----------
	 * L'image fait 191 de haut dans la maquette, pas 483, le texte
	 * occupe 290 de large et le sous-titre est en 14.
	 * Le calage est propre a cette page : la meme section sur
	 * Retreat suit une autre maquette, non reprise ici. */
	.page-id-59 .s-checklist {
		padding-block: 100px 20px;
	}

	/* Le mockup etait force a 191px de haut, une hauteur nue, sans
	 * aspect-ratio ni object-fit : object-fit valant `fill` par defaut,
	 * tel-complement.png (552x762, ratio 0,72) etait etire dans une
	 * boite de 350x191 (ratio 1,83), soit un facteur 2,5 en largeur.
	 * La valeur 191 venait du gabarit Figma de cette carte, mais le
	 * calque image y est vide : la maquette ne montre pas ce visuel,
	 * elle ne peut donc pas justifier de le deformer.
	 * `width: 100%` fige la largeur sur la carte, la taille resolue par
	 * srcset variant de 304 a 390 selon l'etat lazy, et `height: auto`
	 * rend la main au ratio natif. */
	.page-id-59 .s-checklist__media img {
		width: 100%;
		height: auto;
	}

	/* `padding: 0` collait le telephone en haut de carte mais supprimait
	 * aussi la marge basse : la puce du dernier item finissait a 0px du
	 * bord inferieur, ce que le retour appelle « le texte depasse de la
	 * zone ». On rend les 30px de padding de carte en bas seulement, le
	 * haut reste a 0 pour ne pas decoller le visuel. */
	.page-id-59 .s-checklist__card {
		padding-bottom: 30px;
	}

	.page-id-59 .s-checklist__content {
		padding-inline: 30px;
	}

	.page-id-59 .s-checklist__subtitle {
		font-size: 14px;
		line-height: 1.5;
	}

	.page-id-59 .s-checklist__list {
		max-width: 246px;
		margin-inline: auto;
	}
}

/* ==================================================================
 * Partners, suite : cartes « usages » et formulaire.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Cartes usages (13328:43036, carte 350x488) -----------------
	 * 30 + titre 21 + 30 + image 259 + 30 + texte 88 + 30. Le titre
	 * etait en 18 et le texte en 16, d'ou 501. L'ecart titre de
	 * section / cartes vaut 54 (20 de bas de bloc + 34), et la
	 * derniere carte touche le bas de la section. */
	.s-cards--usages {
		padding-block: 60px 0;
	}

	.s-cards--usages .s-cards__grid {
		margin-top: 54px;
	}

	.s-cards--usages .s-cards__card {
		padding: 30px;
	}

	.s-cards--usages .s-cards__card-title,
	.s-cards--usages .s-cards__text {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Formulaire : 60 au-dessus de la carte, 21 en dessous
	 * (13328:43090, carte de 1239.88 posee a 6013). */
	.s-contact-form {
		padding-block: 60px 21px;
	}
}

/* ==================================================================
 * RETOURS STUDIO EN « TO DO », base Notion « Retours site web - Envol »
 * relevee le 2026-09-14. Les tags [T..] renvoient au numero de ligne
 * dans la base, le premier lot de septembre porte des tags [R..].
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* [T07] [T11] [T13] [T16] [T19] « le burger est decale + le picto
	 * de mon compte a disparu », remonte cinq fois, une seule cause.
	 *
	 * Le picto n'a pas disparu, il est ecrase a 0 de large. Le bloc nav
	 * mobile pose `.site-header__account { width: 30px; padding: 0 }`,
	 * une classe, mais `.site-header__actions .btn { padding: 8px 14px }`
	 * en pose deux et l'emporte, bien qu'ecrite plus haut dans le
	 * fichier. Sur une boite border-box de 30px, 14 de padding de chaque
	 * cote plus le 1px de bordure de `.btn` ne laissent aucune largeur
	 * de contenu : 30 - 28 - 2 = 0. La regle globale `img { max-width:
	 * 100% }` se resout alors contre 0 et rabote les 20px declares sur
	 * `.btn__icon`. Mesure a 390px avant correctif : boite de contenu 0,
	 * icone rendue 0x20 pour un user.svg charge et complet en 18x19.
	 * Le bouton de langue subissait le meme ecrasement, son « EN »
	 * debordait simplement d'une boite de 0.
	 * On repose le padding a specificite egale, plus bas dans le fichier.
	 *
	 * Le burger, lui, ne portait pas la classe `btn` : son padding etait
	 * deja bon. Ce qui le faisait paraitre decale, ce sont ses trois
	 * barres de 16px dans une boite de contenu de 28px, en colonne, sans
	 * `align-items` : la valeur par defaut les calait au debut de l'axe
	 * transversal, donc a gauche, 0 de jeu a gauche contre 12 a droite.
	 * On les recentre, 6 de chaque cote. */
	.site-header__actions .site-header__account,
	.site-header__actions .site-header__lang {
		padding: 0;
	}

	.site-header__toggle {
		align-items: center;
	}

	/* [T08] « le bandeau avec les logos partenaires ne defile pas ».
	 *
	 * La rangee etait figee : `width: 626px` et `margin-inline: -128px`
	 * la posaient en debordement STATIQUE dans une section en
	 * `overflow: hidden`. Mesure a 390 : le premier logo occupait
	 * x=-118 a -4, donc entierement hors ecran, et le dernier etait
	 * coupe au bord. Le noeud Figma 13328:42150 n'est pas une rangee
	 * tronquee, c'est un bandeau defilant fige sur son premier frame.
	 * On repasse la rangee en piste de marquee : largeur naturelle, deux
	 * groupes identiques poses par logos.php, translation d'exactement
	 * un groupe. Plus aucune valeur calee sur 390, `max-content` et le
	 * -10px qui annule le padding de l'inner tiennent de 320 a 767.
	 * `gap: 0` sur la piste est obligatoire : la keyframe va a -50 pour
	 * cent de la piste, ce qui ne vaut un groupe pile que si rien ne
	 * s'intercale entre les deux groupes. Le gap vit donc sur le groupe,
	 * et son padding droit ferme la soudure.
	 * Vitesse : 22s calees sur les 4 logos ACF actuels, soit un groupe
	 * de 792px et 36 px/s. Si la liste ACF change, retuner pour garder
	 * cette vitesse : duree = largeur du groupe / 36. */
	.s-logos__list {
		width: max-content;
		max-width: none;
		margin-inline: -10px;
		gap: 0;
		justify-content: flex-start;
		animation: envol-marquee 22s linear infinite;
	}

	.s-logos__group,
	.s-logos__group[aria-hidden] {
		display: flex;
		align-items: center;
		gap: 40px;
		padding-right: 40px;
	}

	/* [T09] « bug sur le module what do you need support with right
	 * now ? », sur tous les clics et toutes les pages.
	 *
	 * Au clic le JS pose `.is-detail` sur la carte. La seule regle qui
	 * repond a ce selecteur est celle du desktop, `padding: 78px 96px`,
	 * calee sur la carte de 760px du Figma. Elle pese deux classes
	 * quand toutes les reprises mobiles visent `.s-quiz__card` seul :
	 * elle gagne donc la cascade a 390 aussi, une media query ne
	 * changeant pas le poids d'un selecteur. Mesure a 390 : la colonne
	 * de contenu tombait de 308 a 156px, la photo et la citation
	 * etaient ecrasees, le tag passait sur deux lignes et la carte
	 * montait a 1305 de haut au lieu de 925. On reprend le padding
	 * ferme du bloc mobile a specificite egale. */
	.s-quiz__card.is-detail {
		padding: 40px 20px 20px;
	}

	/* Garde-fous de la ligne tag plus croix : la croix garde son cercle
	 * de 44 meme si un libelle ACF est long, et les deux ne peuvent
	 * plus arriver au contact. */
	.s-quiz__detail-top {
		gap: 16px;
	}

	.s-quiz__close {
		flex-shrink: 0;
	}

	/* [T12] « la cle dans les boutons est ecrasee », mobile The App.
	 *
	 * Mesure a 390 : la cle rend 22x25 alors que key-violet.svg est un
	 * trace 22x36, soit un ratio de 0,88 contre 0,611 en natif, une cle
	 * 44 pour cent trop large. La capture client, prise a 414pt, donne
	 * la meme boite : le defaut ne depend pas de la largeur.
	 * Deux causes cumulees. Les assets de cle portent
	 * `preserveAspectRatio="none"`, ils s'etirent donc pour remplir leur
	 * boite au lieu de garder leurs proportions. Et la boite mobile vaut
	 * 22x25 : la hauteur vient du report tablette, au bon ratio, mais la
	 * largeur est restee celle du desktop. 22 sur 25 n'est le ratio de
	 * personne.
	 * `object-fit: contain` reinscrit la cle dans sa boite sans la
	 * deformer : les dimensions intrinseques restent 22x36, contain en
	 * deduit un rendu de 15,28x25, et l'etirement interne devient
	 * l'identite. La boite CSS ne bouge pas, les pilules gardent leurs
	 * 65 de haut et leurs largeurs, aucun bouton ne se decale. */
	.btn-gradient img,
	.s-quiz__cta img,
	.s-cta-band__button img,
	.s-stats__cta img,
	.s-heading__cta img,
	.s-cta-band--centre .s-cta-band__button img {
		object-fit: contain;
	}

	/* [T14] Partners : « manque les degrades et les espaces ».
	 *
	 * 1. Les espaces. Le bloc mobile pose `.s-reviews { padding-block: 0 }`,
	 *    valeur heritee du gabarit Retreat ou la section n'a ni titre,
	 *    ni sous-titre, ni CTA. Sur Partners elle a les trois : mesure a
	 *    390, le H2 est a 0 du bord haut et le bouton a 0 du bord bas.
	 *    Le titre colle donc au ciel de la section advisors et le bouton
	 *    colle au creme de la section suivante. On rend les 60px du
	 *    rythme mobile de la page.
	 *
	 * 2. Les degrades. `bg-ciel-partners.jpg` (1788x1920) est posee en
	 *    style inline sur advisors et sur avis, les deux en `cover`. A
	 *    390 de large c'est la hauteur qui commande l'echelle dans les
	 *    deux cas : chaque section affiche donc la photo ENTIERE, le
	 *    ciel est joue deux fois de suite, et a la jonction on passe du
	 *    rose du bas au bleu du haut en un seul pixel. Le desktop a deja
	 *    son correctif mais il est enferme dans un `min-width: 1024px`.
	 *    Meme methode ici : une seule echelle pour les deux sections, la
	 *    seconde decalee de la hauteur de la premiere. `auto` et non
	 *    `100%` pour garder le ratio.
	 *    628px est la hauteur de la section advisors, mesuree identique
	 *    de 320 a 767 (son titre et son sous-titre sont plafonnes et ses
	 *    cartes figees, rien ne s'y recompose). 1560px est le plafond du
	 *    fond : le total des deux sections vaut au plus 1554 et au moins
	 *    1505 sur cette plage, aucune bande nue.
	 *    `!important` est necessaire, advisors.php et avis.php ecrivent
	 *    `background-position` en style inline. */
	.page-id-59 .s-reviews {
		padding-block: 60px;
	}

	.page-id-59 .s-advisors[style],
	.page-id-59 .s-reviews[style] {
		background-size: auto 1560px !important;
		background-repeat: no-repeat !important;
	}

	.page-id-59 .s-advisors[style] {
		background-position: center 0 !important;
	}

	.page-id-59 .s-reviews[style] {
		background-position: center -628px !important;
	}

	/* [T17] « pbm de contour autour du logo paypal », page Purchase.
	 *
	 * La case de paiement se partage la largeur des options, soit
	 * (largeur - 135) / 2 de contenu : 127,5 a 390 et 139,5 a 414. Le
	 * logo est pose en hauteur fixe, 37 avec width auto, il vaut donc
	 * 137 de large a son ratio natif. A 414 il rentre tout juste, ce que
	 * montre la capture client. A 390 il ne rentre plus : flex-shrink le
	 * comprime a 127,5 et, comme le SVG porte `preserveAspectRatio:
	 * none`, le dessin s'etire au lieu de se caler.
	 * On contraint les DEUX dimensions en laissant width et height a
	 * auto, le navigateur applique alors les deux maxima en conservant
	 * le ratio. `max-height: 28` remet le logo en proportion de la case
	 * passee a 46 de haut en mobile, et le `max-width` garantit 12px
	 * d'air de chaque cote a toute largeur, y compris sous 343 ou la
	 * case devient plus etroite que le logo. */
	.s-checkout__payment-box img {
		width: auto;
		height: auto;
		max-width: calc(100% - 24px);
		max-height: 28px;
		object-fit: contain;
	}

	/* Case selectionnee : le liseret de 2px est exterieur et s'ajoute a
	 * la bordure de 1px, la case PayPal affichait donc un trait de 3px
	 * la ou sa voisine n'en a qu'un. Passe en interieur, il donne 2px
	 * lisibles sans deborder ni pousser le logo. */
	.s-checkout__payment-option input:checked + .s-checkout__payment-box {
		box-shadow: inset 0 0 0 1px var(--color-primary-0);
	}

	/* [T19] Retreats : le badge d'avis est en absolu sur le bas de
	 * `__inner`, donc a cheval sur la rangee de CTA. Une fois le bouton
	 * centre il le chevauchait de 58x48. On le remet dans le flux, ce
	 * que le theme fait DEJA en tablette : c'est le bloc mobile qui le
	 * repingle en absolu. L'ecart de 20 devient ainsi une marge reelle
	 * et non un padding calcule sur la hauteur du moment, la carte
	 * epousant du contenu ACF.
	 * La garde `:has(.s-hero-page__ctas)` laisse The App intact, son
	 * hero centre n'ayant pas de rangee de CTA. */
	.s-hero-page--center:has(.s-hero-page__ctas) .s-hero-page__rating {
		position: static;
		display: flex;
		width: max-content;
		max-width: 100%;
		margin: 20px auto 0;
	}

	/* [T20] Retreat : « decoller les boutons du slide aux images ».
	 * `.s-rooms__gallery-nav` est le premier enfant de `.s-rooms__body`
	 * et la photo est son frere pose juste au-dessus : tout l'espace
	 * entre la photo et les cercles est porte par le padding haut du
	 * body. La passe mobile l'ecrit en raccourci « 0 30px 30px », le
	 * haut vaut donc 0 et les cercles touchent le bas de la photo,
	 * mesure a 390 : 0 au-dessus des fleches, 40 en dessous. On redonne
	 * 30 en haut, aligne sur le padding lateral de la carte. Au-dessus
	 * de 768px la regle de base donne deja 35, rien a changer. */
	.s-rooms__body {
		padding-top: 30px;
	}
}

/* ==================================================================
 * [T21] Heros de The App et de Subscription : le badge d'avis etait
 * pose par-dessus le reste.
 *
 * Le bloc mobile re-epingle `.s-hero-page__rating` en `position:
 * absolute`, ancre en bas a droite du hero, alors que la regle
 * tablette le remet deja dans le flux. En absolu il ne reserve aucune
 * place et se superpose a ce qui occupe le bas du hero :
 *   The App      : il recouvrait la carte des stores, donc les pastilles
 *                  App Store et Google Play.
 *   Subscription : il recouvrait la rangee de CTA et le bouton
 *                  « Try the app for free ».
 * Retreats etait deja traite, mais par une regle qui exige un hero
 * centre AVEC rangee de CTA : The App est centre SANS rangee de CTA et
 * Subscription est cale a gauche, aucun des deux n'etait couvert.
 *
 * On remet donc le badge dans le flux pour tous les heros. L'ecart de
 * 20 devient une marge reelle et non un ancrage calcule sur la hauteur
 * du moment : la carte epouse du contenu ACF, si `rating_text` passe a
 * deux lignes elle grandit et l'ecart tient toujours.
 * Cale a droite, comme dans les deux maquettes qui le posent a x=276.
 * `.s-checkout__rating` n'est pas touche, il garde son ancrage.
 * La regle de Retreats pese trois classes et garde donc son badge
 * centre, ce qui a ete valide par le studio.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-hero-page__rating {
		position: static;
		display: flex;
		width: max-content;
		max-width: 100%;
		margin: 20px 0 0 auto;
	}
}

/* ==================================================================
 * [T22] Héros de The App : remise à la maquette 13328:42152.
 *
 * Écarts mesurés au pixel entre le rendu Figma et la préprod, à 390px :
 *   titre       encre de 215 contre 238, soit 44px là où la maquette
 *               en donne 40, la valeur de l'échelle mobile du projet ;
 *   carte stores 350x120 sur deux lignes, au milieu du héros (y 346),
 *               contre 340x54 sur une ligne, en bas (y 724 à 777) ;
 *   badge avis  148x64 horizontal à y 486, contre 91x85 vertical à
 *               y 620, posé 21px au-dessus de la carte stores ;
 *   cadrage     le téléphone de la photo tombe 68px trop à gauche.
 * ------------------------------------------------------------------ */

/* L'icône de téléchargement n'existe que dans la version compacte du
   badge. Les autres héros gardent leur badge horizontal, validé tel
   quel par le studio : elle y reste masquée jusqu'à décision. */
.s-hero-page__rating-icon {
	display: none;
}

@media (max-width: 767px) {

	/* Le plancher du clamp valait 44px alors que l'échelle mobile du
	   projet pose H1 à 40, ce que confirme la mesure d'encre sur la
	   maquette. Les cinq héros de page sont concernés, ils suivent
	   tous la même échelle. */
	.s-hero-page__title {
		font-size: var(--size-h1);
	}

	/* ---- The App ------------------------------------------------
	 *
	 * Les deux cartes s'ancrent sur la SECTION, qui fait 806 de haut,
	 * et non sur `.s-hero-page__inner`, qui est en `position: relative`
	 * et dont la hauteur suit le contenu : une fois les cartes sorties
	 * du flux, `__inner` retombe à 274 et un ancrage par le bas les
	 * remontait en haut du héros. On neutralise donc son positionnement
	 * sur cette page, la section prend le relais comme bloc conteneur.
	 */
	.page-id-48 .s-hero-page__inner,
	.page-id-164 .s-hero-page__inner,
	.page-id-59 .s-hero-page__inner,
	.page-id-113 .s-hero-page__inner {
		position: static;
	}

	/*
	 * Les deux cartes sont posées en bas du héros, l'une au-dessus de
	 * l'autre, comme dans la maquette. Le héros fait 806 de haut en
	 * mobile : la carte stores s'ancre à 29 du bas (806 - 777) et le
	 * badge à 103 (806 - 703), ce qui laisse les 21 d'écart voulus.
	 * Ancrage par le bas et non par le haut : si un libellé ACF
	 * s'allonge, les cartes grandissent vers le haut, vers la photo,
	 * et ne débordent jamais sous le héros. */
	.page-id-48 .s-hero-page__stores,
	.page-id-164 .s-hero-page__stores {
		position: absolute;
		left: 25px;
		right: 25px;
		bottom: 29px;
		width: auto;
		min-height: 54px;
		margin: 0;
		padding: 10px;
		gap: 5px;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.page-id-48 .s-hero-page__stores-label,
	.page-id-164 .s-hero-page__stores-label {
		flex: 0 0 auto;
		margin: 0 23px 0 0;
		font-size: 14px;
		line-height: 1.5;
		white-space: nowrap;
	}

	/* Les deux pastilles font 100x34 dans la maquette. Le SVG de
	   Google Play est en 180x53 et celui de l'App Store en 135x40 :
	   on borne la hauteur et on laisse la largeur suivre le ratio,
	   sinon la pastille Google Play sort plus large que sa voisine. */
	.page-id-48 .s-hero-page__stores a,
	.page-id-164 .s-hero-page__stores a {
		flex: 0 0 auto;
		line-height: 0;
	}

	.page-id-48 .s-hero-page__stores img,
	.page-id-164 .s-hero-page__stores img {
		width: auto;
		height: 34px;
	}

	/* Badge d'avis en version compacte : 91x85, bord violet, radius
	   13.5, et trois lignes empilées. Le balisage donne les étoiles
	   avant la note, la maquette l'inverse : `column-reverse` remet la
	   note en haut sans toucher au HTML. */
	.page-id-48 .s-hero-page__rating,
	.page-id-164 .s-hero-page__rating,
	.page-id-59 .s-hero-page__rating,
	.page-id-113 .s-hero-page__rating {
		position: absolute;
		right: 24px;
		bottom: var(--pastille-bas, 25px);
		left: auto;
		top: auto;
		width: 91px;
		min-height: 85px;
		margin: 0;
		padding: 10px;
		gap: 5px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--color-primary-0);
		border-radius: 13.5px;
		background: var(--color-white);
	}

	.page-id-48 .s-hero-page__rating-top,
	.page-id-164 .s-hero-page__rating-top,
	.page-id-59 .s-hero-page__rating-top,
	.page-id-113 .s-hero-page__rating-top {
		flex-direction: column-reverse;
		align-items: center;
		gap: 5px;
	}

	.page-id-48 .s-hero-page__rating-note,
	.page-id-164 .s-hero-page__rating-note,
	.page-id-59 .s-hero-page__rating-note,
	.page-id-113 .s-hero-page__rating-note {
		font-size: 16px;
		line-height: 1.5;
	}

	.page-id-48 .s-hero-page__rating-stars,
	.page-id-164 .s-hero-page__rating-stars,
	.page-id-59 .s-hero-page__rating-stars,
	.page-id-113 .s-hero-page__rating-stars {
		gap: 1px;
	}

	.page-id-48 .s-hero-page__rating-stars img,
	.page-id-164 .s-hero-page__rating-stars img,
	.page-id-59 .s-hero-page__rating-stars img,
	.page-id-113 .s-hero-page__rating-stars img {
		width: 10px;
		height: 10px;
	}

	/* La ligne du bas porte le libellé et l'icône, 21 de haut. */
	.page-id-48 .s-hero-page__rating-text,
	.page-id-164 .s-hero-page__rating-text,
	.page-id-59 .s-hero-page__rating-text,
	.page-id-113 .s-hero-page__rating-text {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		font-size: 12px;
		line-height: 1.75;
		white-space: nowrap;
	}

	.page-id-48 .s-hero-page__rating-icon,
	.page-id-164 .s-hero-page__rating-icon,
	.page-id-59 .s-hero-page__rating-icon,
	.page-id-113 .s-hero-page__rating-icon {
		display: block;
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
	}

	/* Le cadrage de la photo n'est PAS corrigé ici, et ce n'est pas un
	   oubli. La maquette montre le téléphone entier sur environ 230 de
	   large. L'asset servi est un paysage 1024x598 : pour remplir 806
	   de haut, `cover` l'agrandit de 1,348, sa largeur passe à 1380 et
	   le téléphone seul y mesure 593, plus large que le viewport. Aucun
	   `object-position` ne peut donc reproduire la maquette, seulement
	   choisir quelle portion est coupée. Mesuré à 50, 65 et 73 pour
	   cent : 50, la valeur du thème, reste le meilleur des trois.
	   Il faut un recadrage portrait de la photo pour le mobile. */
}

/* ==================================================================
 * [T23] Héros de page : recadrage vertical dédié au mobile, et carte
 * des stores qui ne déborde plus sur écran étroit.
 * ------------------------------------------------------------------ */

/* `<picture>` ne sert qu'à porter la source mobile : `display: contents`
   l'efface de la mise en page, l'image reste l'enfant direct de la
   section et garde son positionnement absolu. */
.s-hero-page__bg-wrap {
	display: contents;
}

@media (max-width: 767px) {

	/* La carte « Try it for free » tient sur une ligne à 390, la largeur
	 * de la maquette, mais elle n'y tient qu'à 1px près : 10 + 91 + 23 +
	 * 100 + 5 + 100 + 10 font 339 pour 340 de carte. En dessous, ou avec
	 * un libellé traduit plus long, les pastilles débordaient.
	 * Trois garde-fous qui n'entament pas le rendu à 390 :
	 *   `flex-wrap: wrap` autorise le passage à la ligne en dernier
	 *     recours plutôt qu'un débordement ;
	 *   les pastilles peuvent rétrécir, `object-fit: contain` leur fait
	 *     garder leur rapport pendant qu'elles le font ;
	 *   la marge du libellé se réduit avant elles, c'est le blanc le
	 *     moins coûteux à sacrifier.
	 * Mesuré à 320, 360, 375 et 390 : aucun débordement. */
	.page-id-48 .s-hero-page__stores,
	.page-id-164 .s-hero-page__stores {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* Le libelle d'un cote, les deux pastilles groupees de l'autre.
	 * `justify-content: space-between` ne suffirait pas : avec trois
	 * enfants il repartirait le blanc DEUX fois, une entre le libelle
	 * et la premiere pastille, une entre les deux pastilles, qui ne
	 * seraient donc plus groupees. Une marge automatique sur la
	 * premiere pastille absorbe tout le blanc disponible d'un coup :
	 * le libelle reste a gauche, la paire part a droite en gardant
	 * son seul `gap` de 5 entre ses deux elements.
	 * Au passage a la ligne, la marge automatique agit sur la nouvelle
	 * rangee et la paire y reste groupee, calee a droite. */
	.page-id-48 .s-hero-page__stores-label,
	.page-id-164 .s-hero-page__stores-label {
		margin-right: 0;
	}

	.page-id-48 .s-hero-page__stores a:first-of-type,
	.page-id-164 .s-hero-page__stores a:first-of-type {
		margin-left: auto;
	}

	.page-id-48 .s-hero-page__stores a,
	.page-id-164 .s-hero-page__stores a {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* La maquette dessine les pastilles en 100x34, soit un rapport de
	 * 2,94. Les vraies pastilles Apple et Google sont en 3,38 : à 34 de
	 * haut elles sortent à 115 de large, et 90 + 18 + 115 + 5 + 115 font
	 * 343 pour 320 de contenu, d'où le passage à la ligne. On les cale
	 * donc sur leur LARGEUR de maquette, 101, ce qui les met à 30 de
	 * haut. La carte garde ses 54 par son `min-height`, les pastilles y
	 * sont simplement centrées.
	 * 90 + 18 + 101 + 5 + 101 = 315 pour 320 : cinq pixels de jeu, au
	 * lieu du pixel unique qu'avait la maquette. */
	.page-id-48 .s-hero-page__stores img,
	.page-id-164 .s-hero-page__stores img {
		width: auto;
		/* Hauteur fluide plutot que figee : a 30 la rangee ne tenait sur
		 * une ligne qu'a partir de 390, et retombait sur deux des 375,
		 * la largeur de l'iPhone SE. A 7,2vw elle tient des 360, la
		 * largeur Android la plus repandue.
		 * Plafond 30 pour ne pas depasser la maquette au-dela de 390,
		 * plancher 20 pour rester lisible. */
		height: clamp(20px, 7.2vw, 30px);
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}
}

/* Sous 360px la rangee ne tient plus, et le repli separait les deux
 * pastilles : la premiere restait a droite du libelle, la seconde
 * passait seule a la ligne. On envoie plutot le libelle sur sa propre
 * ligne, la paire reste alors groupee en dessous. C'est la seule
 * largeur ou ce cas se produit, la barre de navigation elle-meme ne
 * tient pas sous 356px. */
@media (max-width: 359px) {

	.page-id-48 .s-hero-page__stores-label,
	.page-id-164 .s-hero-page__stores-label {
		flex: 1 0 100%;
	}

	.page-id-48 .s-hero-page__stores a:first-of-type,
	.page-id-164 .s-hero-page__stores a:first-of-type {
		margin-left: 0;
	}
}

/* ==================================================================
 * [T24] Pastille du nombre de téléchargements : Partners la reçoit
 * aussi, et sa mention s'écourte en mobile.
 * ------------------------------------------------------------------ */

/* Deux versions de la mention dans le balisage, une seule affichée.
   La longue est le défaut, la courte ne sort que sous 768px : la
   pastille n'y fait que 91px de large, une mention complète y
   déborderait. Le choix est en CSS et non en JS, il est donc pris dès
   le premier rendu, sans bascule visible. */
.s-hero-page__rating-short {
	display: none;
}

@media (max-width: 767px) {

	.s-hero-page__rating-long {
		display: none;
	}

	.s-hero-page__rating-short {
		display: inline;
	}

	/* Ancrage bas de la pastille. Sur The App elle laisse la place à la
	   carte des stores posée en dessous, d'où 103. Sur Partners, qui
	   n'a pas cette carte, la maquette la descend à 25 du bas
	   (13328:43091, y 689 à 775 dans un héros de 800). */
	.page-id-48 .s-hero-page__rating,
	.page-id-164 .s-hero-page__rating {
		--pastille-bas: 103px;
	}
}

/* ==================================================================
 * [T25] Heros cales a gauche : centres en mobile.
 *
 * Partners et Subscription sont les deux seuls heros en variante
 * `--left`, un choix qui vaut pour le desktop. Leurs maquettes mobiles
 * centrent pourtant tout : titre, sous-titre et rangee de CTA. Le
 * site les laissait en `text-align: left` avec une rangee de CTA en
 * `flex-start`, le bouton collait donc au bord gauche sous un texte
 * qui remplissait la largeur.
 * Cible `--left` et non les identifiants de page : la regle dit ce
 * qu'elle fait, et suivra si le studio ajoute un hero cale a gauche.
 *
 * La boite du sous-titre fait 292 dans les deux maquettes
 * (13328:43011 et 13328:42418), contre 350 sur le site : le texte y
 * tenait sur des lignes plus larges que le bouton juste en dessous.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-hero-page--left .s-hero-page__content {
		text-align: center;
	}

	.s-hero-page--left .s-hero-page__ctas {
		justify-content: center;
	}

	.s-hero-page--left .s-hero-page__subtitle {
		max-width: 292px;
		margin-inline: auto;
	}
}

/* ==================================================================
 * [T26] Accueil mobile, encart « How do you feel ? ».
 *
 * Deux defauts, une meme cause : la boite est en `justify-content:
 * space-between` avec `align-items: stretch`.
 *   Le bouton, qui porte une largeur de 189, ne s'etire pas et se cale
 *   donc au debut de l'axe transversal, c'est-a-dire a gauche : 17 de
 *   jeu a gauche contre 47 a droite.
 *   `space-between` colle le texte en haut et le bouton en bas, tout
 *   le blanc restant tombe entre les deux : 57 mesures, contre 30 dans
 *   la maquette (13328:42078, bloc de contenu 189x132 pose a 29 du
 *   haut, libelle a 0, bouton a 90).
 *
 * On reprend le rythme du modele : 29 en haut, 30 entre le texte et le
 * bouton, 28 en bas. Le contenu du site mesure 126 la ou celui de la
 * maquette en fait 132, ses lignes de texte faisant 21 et non 24 : le
 * `center` repartit ces 6px de reste a parts egales plutot que de les
 * laisser tous d'un cote.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.s-hero__box {
		padding: 29px 16px 28px;
		gap: 30px;
		justify-content: center;
	}

	.s-hero__box-button {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------
 * [T27] « Font / dimensions / block trop grands quand clique sur un
 * des symptomes What do you need support with », Accueil et The App,
 * mobile et desktop.
 *
 * Mesure avant correction : la carte ouverte fait 819 de haut a 1440
 * et 925 a 390. Sur un portable 1440x900, la zone utile du navigateur
 * tourne autour de 780 : la carte ne tient pas dans l'ecran, il faut
 * defiler pour lire un texte dont la citation est en 28px.
 *
 * Les valeurs de base venaient du gabarit Figma, cale sur une carte de
 * 760px de large. Elles ont ete reduites la ou elles sont ecrites,
 * pour que les paliers tablette et mobile deja en place continuent de
 * les reprendre : padding de carte 78/96 vers 50/56, photo 588 vers
 * 470, gouttiere de colonne 33 vers 24, croix 62 vers 48, titre du
 * symptome h3 vers h4, encart d'avis 40/39 vers 28/20, etoiles 28 vers
 * 22, citation 28 vers 21.
 *
 * Restent ici les deux points qui ne pouvaient pas se traiter sur la
 * regle de base : le bouton d'action, partage avec `.btn-gradient` et
 * tous les boutons ronds du site, et les reprises mobiles.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {

	/* Le bouton fait 96 de haut, un sixieme de la carte visee. Il est
	 * reduit dans le seul panneau du quizz : la regle partagee
	 * `.btn-gradient, .s-quiz__cta` pese une classe, celle-ci deux, les
	 * boutons ronds des autres sections ne bougent pas. */
	.s-quiz__panel .s-quiz__cta {
		gap: 40px;
		padding: 22px 40px;
		font-size: 18px;
	}

	.s-quiz__panel .s-quiz__cta img {
		width: 17px;
		height: 28px;
	}
}

@media (max-width: 767px) {
	.s-quiz__card.is-detail {
		padding: 30px 16px 20px;
	}

	/* La photo et le texte sont empiles : 40 d'ecart plus 300 de photo
	 * mangeaient la moitie du premier ecran. */
	.s-quiz__panel {
		gap: 24px;
	}

	.s-quiz__detail {
		gap: 20px;
	}

	.s-quiz__photo {
		height: 240px;
	}

	/* La pastille de lecture gardait ses 88px du desktop sur une photo
	 * qui n'en fait plus que 240. */
	.s-quiz__play {
		width: 64px;
		height: 64px;
	}

	.s-quiz__review {
		padding: 20px;
		gap: 16px;
	}

	.s-quiz__stars {
		gap: 8px;
	}

	.s-quiz__stars img {
		width: 20px;
		height: 20px;
	}
}

/* ------------------------------------------------------------------
 * [T28] « Trop de spacing / padding en bas de Listen for relief »,
 * Accueil desktop.
 *
 * Mesure a 1440 : carte 614x130, padding 21 en haut comme en bas, mais
 * 22px de blanc au-dessus du bouton et 38 en dessous. La carte est une
 * rangee flex en `align-items: flex-start` : le bouton, haut de 70, se
 * cale en haut, pendant que le bloc de texte, haut de 84, donne sa
 * hauteur a la carte. Ces 84 viennent de l'espace reserve a l'animation
 * de frappe, deux lignes de 24 sous un libelle de 24 et sa marge de 12.
 * L'ecart de 14 entre les deux colonnes tombe donc entierement sous le
 * bouton.
 *
 * Le bouton est centre verticalement : le blanc passe a 30 de chaque
 * cote sans toucher ni a la hauteur de la carte, ni a la reserve de
 * l'animation, ni au bloc mobile valide en septembre.
 *
 * Borne a 1024 et non a 768 : entre les deux, la carte passe en colonne
 * avec `align-items: stretch`, qui etire le bouton sur toute la largeur.
 * Un `center` y aurait rabattu le bouton a 189px de large, un changement
 * de rendu que le retour ne demande pas.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.s-hero__box {
		align-items: center;
	}
}

/* ------------------------------------------------------------------
 * [T29] Suite de [T28] : dans `.s-hero__box-text`, la phrase n'est pas
 * centree verticalement.
 *
 * Mesure a 1440 : le placeholder fait 48 de haut pour une phrase qui
 * n'occupe qu'une ligne de 20, soit 2px de vide au-dessus des glyphes
 * et 26 en dessous. La hauteur vient du `min-height` que le JS pose sur
 * la plus longue des six phrases, pour que la carte ne se retracte pas
 * a chaque effacement.
 *
 * La reserve n'est pas la cause, elle est la consequence. La colonne de
 * texte ne fait que 131px de large : c'est un element flex dimensionne
 * sur son contenu, et son contenu le plus large est le LIBELLE, « How
 * do you feel? », 131px. Les phrases, elles, vont jusqu'a 189px (« I'm
 * panicking or anxious »), 160 et 157 pour deux autres : la moitie
 * d'entre elles passait donc a la ligne, le JS relevait 48 et le
 * reservait sur les six. Le noeud Figma 13142:45533 ne montre rien de
 * tel : carte de 614x114, phrase « I'm in pain right now » sur une
 * seule ligne de 157px, dans un espace qui en autorise 355.
 *
 * On rend donc a la colonne la largeur que la maquette lui donne. Les
 * six phrases tiennent sur une ligne, le JS releve 24 au lieu de 48, et
 * la carte tombe d'elle-meme a 614x114, la valeur Figma au pixel. Le
 * bouton s'y pose a 22 du haut et 22 du bas, la aussi les valeurs de la
 * maquette.
 *
 * Borne a 1024 comme [T28] : en dessous la carte passe en colonne, ou
 * `flex` joue sur la hauteur et non sur la largeur. La colonne y est
 * deja pleine largeur, aucune phrase n'y passe a la ligne.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.s-hero__box-text {
		flex: 1;
	}
}

/* Garde-fou, sans effet tant que la reserve vaut une ligne : si une
 * phrase plus longue est ajoutee un jour et repasse la reserve a deux
 * lignes, le vide se partage de part et d'autre du texte au lieu de
 * tomber entierement dessous.
 *
 * `align-content` repartit le reste de place d'un conteneur de bloc
 * sans rien changer a son flux inline : le curseur de frappe, un
 * `::after` en `inline-block`, reste colle au dernier caractere. Un
 * `display: flex` aurait fait du texte et du curseur deux elements
 * distincts et decroche le curseur de la fin de la phrase. */
.s-hero__box-placeholder {
	align-content: center;
}

/* ------------------------------------------------------------------
 * [T30] « Tout le block How do you feel cliquable », accueil.
 *
 * Le lien existe deja, c'est le bouton « Listen for relief ». Plutot que
 * d'envelopper la carte dans une seconde ancre, ce qui donnerait une
 * ancre imbriquee, invalide en HTML et annoncee deux fois par un lecteur
 * d'ecran, on etend la zone cliquable du bouton a toute la carte par un
 * calque transparent.
 *
 * Le calque est un `::after` du bouton : il appartient donc au bouton
 * pour le survol comme pour le clic. Consequence utile, survoler
 * n'importe quel point de la carte declenche `:hover` sur le bouton, son
 * relief et son ombre suivent sans une regle de plus.
 *
 * Le bouton reste en `position: static` : c'est ce qui fait que le
 * calque s'ancre sur la carte, seul ancetre positionne, et la recouvre
 * entierement. Le rendu ne bouge pas, seule la surface cliquable change.
 * ------------------------------------------------------------------ */

.s-hero__box {
	position: relative;
	cursor: pointer;
}

.s-hero__box-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ------------------------------------------------------------------
 * [T31] Retour #2 du tableau du 06/10 : « Clickable mais pas de
 * redirect si clique sur How do you feel. Que quand clique sur Listen
 * for relief ».
 *
 * Le calque de [T30] couvrait bien la carte au repos, mais pas pendant
 * le clic. Au survol, le bouton prend `transform: translateY(-2px)`, et
 * a l'appui `scale(0.98)`. Or un element transforme devient le bloc
 * conteneur de ses descendants positionnes : le `::after` se retracte
 * alors a la taille du bouton. Le curseur pose sur le libelle ne
 * survole plus le calque, et un appui commence sur le calque se
 * relache sur le libelle. Le clic part alors vers l'ancetre commun des
 * deux, la carte, et non vers le lien : aucune navigation.
 *
 * Reproduit par de vrais evenements souris (deplacement, appui,
 * relachement). Le test du 30/09 par `elementFromPoint` ne pouvait pas
 * le voir, il ignore `:hover` et `:active`.
 *
 * Le bouton de la carte ne se transforme donc plus. Le relief passe sur
 * la carte, deja ancetre positionne du calque : la transformer ne
 * change rien au bloc conteneur. L'ombre du bouton au survol est
 * conservee, elle ne touche pas a la geometrie.
 * ------------------------------------------------------------------ */

.s-hero__box-button:hover,
.s-hero__box-button:active {
	transform: none;
}

.s-hero__box {
	transition: transform 200ms var(--ease-out);
}

.s-hero__box:hover {
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
 * [T32] Retour #9 : « Choose your subscription » mene au bloc 2, le
 * tableau des formules, ancre #pricing posee dans tableau-prix.php.
 *
 * En mobile le header fixe descend a 78px et le titre du tableau
 * arrivait a 60px du haut apres le saut : masque. La marge de
 * defilement decale l'arrivee sans toucher a la mise en page. En
 * desktop le titre tombait deja sous le header (130 contre 101).
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	#pricing {
		scroll-margin-top: 40px;
	}
}

/* ------------------------------------------------------------------
 * [T33] Retour #7 : « Logo Envol trop grand. Reduit logo par 60% ».
 *
 * Lu comme une reduction DE 60 % : 253x54 devient 101x22, soit la
 * taille du logo du header (98x21 en desktop), ce qui rend les deux
 * logos du site coherents. La colonne de marque garde sa largeur pour
 * ne pas decaler la grille des colonnes du footer.
 * ------------------------------------------------------------------ */

.site-footer__brand img {
	width: 101px;
}

@media (max-width: 767px) {
	.site-footer__brand img {
		width: 101px;
		max-width: 101px;
	}
}

/* ------------------------------------------------------------------
 * [T34] Retour #12 : en mobile, le compte passe de l'icone du header a
 * une entree du menu burger. L'entree est posee par header.php en fin
 * de liste, masquee par defaut, montree sous 768px seulement ; l'icone
 * y disparait. Entre 768 et 1279px le burger existe aussi, mais le
 * retour vise le mobile : l'icone y reste.
 * ------------------------------------------------------------------ */

.menu-item--account {
	display: none;
}

@media (max-width: 767px) {
	.menu-item--account {
		display: list-item;
	}

	.site-header__actions .site-header__account {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * [T35] Retours #6 et #8 : les formulaires newsletter et contact sont
 * branches (envol-core, classe Forms). Apres envoi le visiteur revient
 * sur le formulaire, ancre #newsletter ou #contact, avec un message.
 *
 * La marge de defilement garde le formulaire sous le header fixe, qui
 * descend a 101px en desktop et 78px en mobile.
 * ------------------------------------------------------------------ */

#newsletter,
#contact {
	scroll-margin-top: 130px;
}

@media (max-width: 767px) {
	#newsletter,
	#contact {
		scroll-margin-top: 100px;
	}
}

.envol-form-message {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.4;
}

.envol-form-message--ok {
	background: rgba(255, 255, 255, 0.75);
	color: var(--color-primary-0);
}

.envol-form-message--erreur {
	background: #fdecea;
	color: #9b1c1c;
}

.s-contact-form__form .envol-form-message {
	margin: 0 0 20px;
}

/* Releve au passage, sans ticket : entre 1024 et ~1100px la ligne du
 * newsletter cumulait l'icone, un intro fige a 436px et un champ qui ne
 * peut pas descendre sous sa largeur minimale. Elle sortait du conteneur
 * et faisait defiler la page lateralement (1143px pour 1024 a l'ecran).
 * Sur ce palier, l'intro et le champ se partagent la place restante. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.newsletter {
		gap: 24px;
		padding-inline: 28px;
	}

	.newsletter__icon {
		margin-inline: 0;
	}

	.newsletter__intro {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	.newsletter__form {
		flex: 1 1 0;
		min-width: 0;
	}

	.newsletter__input {
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
 * [T36] Retour #16 : « Photo coupe », page Purchase, bloc « People
 * feel the difference ».
 *
 * La photo est un portrait 600x900 (ratio 0,67) servi dans un cadre
 * paysage, 1,23 en desktop et 1,52 en mobile, en `object-fit: cover`
 * centre : le recadrage retirait le haut et le bas a parts egales, et
 * le haut de la tete partait avec. Le haut du crane est a 8 % de la
 * hauteur de l'image, le visage autour de 22 %.
 *
 * Calage a 10 % du haut : la tete entre en entier avec une marge, en
 * desktop (fenetre de 452px sur 831) comme en mobile (191 sur 435).
 *
 * Les deux autres photos de ce bloc ne sont recadrees qu'en largeur
 * (story-julie, paysage 1,78) ou pas du tout (tel-incline, ratio
 * identique au cadre) : la position verticale ne les change pas.
 * ------------------------------------------------------------------ */

.s-story__image img {
	object-position: 50% 10%;
}

/* ------------------------------------------------------------------
 * [T37] Retour #13 : en mobile, la personne selectionnee de la roue
 * des advisors s'affiche en grand, au centre.
 *
 * Avant : le texte « Our board of advisors » occupait le centre en 20px,
 * les portraits faisaient 50px et l'actif 90px par `scale(1.8)`, une
 * vignette de 100px etiree sur ecran retina, donc floue.
 *
 * Le medaillon central fait 40 % du cercle, 140px a 390, et recoit le
 * 300x300 du srcset. Le texte passe en legende sous la photo. Le
 * portrait actif du bas n'a plus besoin d'etre agrandi : il garde un
 * anneau violet qui situe la selection dans le cercle.
 *
 * Geometrie verifiee a 390 dans le repere du cercle (349x370) : photo
 * de 89 a 229 en hauteur, legende de 239 a ~273, portrait actif a
 * partir de 316, portraits lateraux hors de la colonne centrale.
 * ------------------------------------------------------------------ */

.s-wheel__focus {
	display: none;
}

@media (max-width: 767px) {
	.s-wheel__focus {
		display: block;
		position: absolute;
		top: 24%;
		left: 50%;
		translate: -50% 0;
		width: 40%;
		aspect-ratio: 1;
		border-radius: 50%;
		overflow: hidden;
		z-index: 1;
		box-shadow: 0 8px 24px rgba(25, 33, 61, 0.15);
	}

	.s-wheel__focus img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.s-wheel__center {
		inset: 64.5% 0 auto;
		translate: none;
		font-size: 13px;
		line-height: 1.3;
	}

	.s-wheel__portrait.is-active {
		transform: scale(1.15);
	}

	/* L'anneau va sur le conteneur : l'image porte un clip-path en cercle
	 * qui rognerait une ombre posee sur elle. */
	.s-wheel__portrait.is-active {
		box-shadow: 0 0 0 3px var(--color-primary-0);
	}
}

/* ------------------------------------------------------------------
 * [T38] Retour #14 : « Les buttons CTA trop gros. Diminue taille tous
 * les buttons desktop (sauf Homepage header) ».
 *
 * Toute la famille des boutons ronds mesurait 96px de haut en desktop :
 * 30px de padding de part et d'autre d'une cle de 36px, texte en 20px.
 * Meme reduction que celle du bouton du panneau quizz le 24/09 ([T27]),
 * pour que tous les boutons du site se retrouvent a la meme hauteur :
 * 22px de padding, cle de 17x28, texte en 18px, soit 72px de haut, un
 * quart de moins. Les largeurs minimales figees suivent la meme
 * proportion (388 -> 291, 331 -> 248).
 *
 * Exception demandee, le bouton « Listen for relief » du heros d'accueil
 * n'est pas concerne : il fait 70px et n'appartient pas a cette famille.
 * Les fleches de carrousel ne sont pas des CTA, elles ne bougent pas.
 * Desktop seulement : tablette et mobile ont deja leurs reglages.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.btn-gradient,
	.s-cta-band__button,
	.s-stats__cta,
	.s-heading__cta,
	.s-hero-page__cta,
	.s-reviews__cta,
	.s-double-cta__btn,
	.s-rooms__cta {
		padding: 22px 40px;
		font-size: 18px;
	}

	.btn-gradient,
	.s-cta-band__button,
	.s-stats__cta,
	.s-hero-page__cta,
	.s-heading__cta {
		gap: 40px;
	}

	.btn-gradient {
		min-width: 248px;
	}

	.s-reviews__cta,
	.s-heading__cta,
	.s-double-cta__btn {
		min-width: 291px;
	}

	.btn-gradient img,
	.s-cta-band__button img,
	.s-stats__cta img,
	.s-heading__cta img,
	.s-hero-page__cta img,
	.s-quiz-band__button img {
		width: 17px;
		height: 28px;
		object-fit: contain;
	}

	/* Le bandeau « Start the Quiz » est une longue pilule a contour qui
	 * imite un champ : sa largeur fait partie du dessin, seule sa hauteur
	 * descend. Il pouvait en revanche deborder de 5px a 1024 : il ne
	 * refusait pas de retrecir. */
	.s-quiz-band__button {
		padding: 20px 40px;
		flex-shrink: 1;
		min-width: 0;
	}
}

/* [T38, suite] Largeurs et hauteurs figees par des regles plus lourdes,
 * calees sur la maquette desktop : meme reduction d'un quart. Les
 * selecteurs reprennent le poids exact des regles d'origine pour les
 * battre par l'ordre du fichier. */
@media (min-width: 1024px) {
	.s-steps__card .btn-gradient {
		min-width: 248px;
	}

	/* 248 et non 230 : a 230 « Try for free » passait sur deux lignes. */
	.s-stats:not(.s-stats--photo) .s-stats__cta {
		width: 248px;
	}

	.s-cta-band--haut .s-cta-band__button {
		width: 291px;
	}

	.s-reviews__cta,
	.s-double-cta__btn,
	.s-rooms__cta {
		min-height: 72px;
	}
}

/* ------------------------------------------------------------------
 * [T39] Retour #15 : « Purchase + checkout, text + design trop grands.
 * Le checkout et remplir les donnees pour acheter prends trop de
 * place », desktop et mobile.
 *
 * Desktop, mesure a 1440 avec un produit au panier : carte de 726px,
 * titre en 40px, champs, choix du paiement et bouton a 72px de haut,
 * bouton en 22px. Ramenes a l'echelle des formulaires courants : champs
 * a 52px, bouton a 56px, titre a 32px, libelles a 15px, espacements
 * resserres.
 *
 * Mobile : les champs gardent 46px, une cible tactile confortable ;
 * seuls les espacements et les textes descendent. « Credit or Debit »
 * debordait de son cadre de 130px (texte en 18px, ~125px de large pour
 * un contenu utile de 98px) : il passe en 15px avec un padding reduit.
 *
 * Le checkout natif de WooCommerce, ou mene « Continue to payment »,
 * n'est pas retouche : il sera refait a l'installation de Stripe.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.s-checkout__card {
		padding: 32px;
	}

	.s-checkout__title {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.s-checkout__box {
		padding: 24px;
		gap: 20px;
	}

	.s-checkout__plan-badge {
		width: 108px;
		height: 80px;
		min-height: 0;
		font-size: 17px;
	}

	.s-checkout__plan-name {
		font-size: 16px;
	}

	.s-checkout__plan-price {
		font-size: 30px;
		margin-top: 4px;
	}

	.s-checkout__change {
		padding: 10px 16px;
		font-size: 15px;
	}

	.s-checkout__field {
		gap: 6px;
	}

	.s-checkout__field label,
	.s-checkout__payment-label {
		font-size: 15px;
	}

	.s-checkout__field input[type="email"],
	.s-checkout__qty,
	.s-checkout__payment-box {
		height: 52px;
		min-height: 0;
		font-size: 16px;
	}

	.s-checkout__qty input {
		font-size: 17px;
	}

	.s-checkout__submit {
		height: 56px;
		min-height: 0;
		font-size: 18px;
	}

	.s-checkout__legal {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.s-checkout__box {
		gap: 20px;
	}

	.s-checkout__plan {
		gap: 16px;
	}

	.s-checkout__plan-name {
		font-size: 16px;
	}

	.s-checkout__plan-price {
		font-size: 24px;
	}

	.s-checkout__change {
		padding: 10px 16px;
		font-size: 15px;
	}

	.s-checkout__field label,
	.s-checkout__payment-label {
		font-size: 15px;
	}

	.s-checkout__payment {
		gap: 12px;
	}

	.s-checkout__payment-box {
		padding-inline: 8px;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* The App — « Try it now » avec extrait audio : le média devient un bouton.
   Le cercle s'épaissit pendant la lecture. */
.s-tel-demo__media--audio {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.s-tel-demo__media--audio:focus-visible {
	outline: 2px solid var(--color-primary-0);
	outline-offset: 4px;
	border-radius: 24px;
}

.s-tel-demo__media--audio.is-playing::before {
	border-width: 3px;
}

/* ENVOL PRIVACY POLICY */

.envol-privacy-content {
    max-width: 900px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    text-align: left;
}

/* Main headings */
.envol-privacy-content h2,
.envol-privacy-content h3 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    margin: 40px 0 16px;
}

/* Subheadings */
.envol-privacy-content h4 {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
    margin: 28px 0 12px;
}

/* Paragraphs */
.envol-privacy-content p {
    margin: 0 0 18px;
}

/* Lists */
.envol-privacy-content ul {
    margin: 12px 0 24px;
    padding-left: 25px;
}

.envol-privacy-content li {
    margin-bottom: 6px;
}

/* Table */
.envol-privacy-content table {
    width: 100%;
    margin: 24px 0;
    font-size: 16px;
}

.envol-privacy-content th,
.envol-privacy-content td {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

/* ==========================================================
   ENVOL — TESTIMONIAL VIDEO POPUP
   ========================================================== */

/* Keep popup hidden when closed */
.envol-video-modal[hidden] {
    display: none !important;
}

/* Dark overlay covering the entire screen */
.envol-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 35, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Video container */
.envol-video-modal__content {
    position: relative;
    width: fit-content;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
}

/* Video player */
.envol-video-modal__player {
    display: block;
    width: auto;
    max-width: min(900px, 90vw);
    max-height: 85vh;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}

/* Close button */
.envol-video-modal__close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #532b87;
    font-family: Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Video play buttons: retain existing Envol design */
button.s-testimonials__play {
    border: 0;
    padding: 0;
    cursor: pointer;
}

button.s-testimonials__play:active {
    transform: translate(-50%, -50%) scale(0.96);
}

/* Mobile */
@media (max-width: 767px) {
    .envol-video-modal {
        padding: 16px;
    }

    .envol-video-modal__player {
        max-width: calc(100vw - 32px);
        max-height: 80vh;
    }

    .envol-video-modal__close {
        top: -15px;
        right: -8px;
        width: 38px;
        height: 38px;
        font-size: 26px;
    }
}

/* Retreats — conditions d'annulation sous les cartes des chambres (23/10/2026). */
.s-rooms__conditions {
	max-width: 760px;
	margin: 48px auto 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

.s-rooms__conditions strong {
	color: var(--color-primary-0);
}

.s-rooms__conditions ul {
	margin: 12px 0 0;
	padding-left: 1.2em;
	list-style: disc;
}

.s-rooms__conditions li + li {
	margin-top: 8px;
}