/* ==========================================================================
   Sugarman — Accueil v4 (variante A, docs/04) : chaque scène a sa propre grammaire visuelle.
   Chaque photo ou vidéo n'apparaît qu'une fois : hero, Épilation, Massages, Conseils, Final.
   ========================================================================== */

/* Grain photographique léger (texture, pas un dégradé) */
.sm-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .14;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 1. Hero : la matière filmée, le message, la réservation ---------- */
.sm-h {
	position: relative;
	min-height: 100svh;
	margin-block: 0 !important;
	padding: 6.5rem var(--sm-pad) clamp(1.5rem, 5vh, 3.5rem) !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--sm-obsidian);
	color: var(--sm-ivory);
	overflow: hidden;
	isolation: isolate;
}
.sm-h__media { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; overflow: hidden; }
.sm-h__media img, .sm-h__media video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform-origin: 60% 45%; }
/* Lisibilité : voile chaud à gauche et en bas, la matière reste lumineuse à droite. */
.sm-h__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 16, 14, .92) 0%, rgba(20, 16, 14, .72) 34%, rgba(20, 16, 14, .12) 72%),
		linear-gradient(0deg, rgba(20, 16, 14, .85) 0%, rgba(20, 16, 14, 0) 45%);
}
.sm-h__content { position: relative; z-index: 2; max-width: 46rem; }
.sm-h__title {
	margin: 0 0 1.25rem !important;
	font-size: clamp(2.35rem, min(8.4vw, 13.5svh), 8.25rem) !important;
	line-height: .95 !important;
	letter-spacing: -.035em !important;
}
.sm-h__title em { color: var(--sm-honey); }
.sm-h__lead { max-width: 36rem; margin: 0 0 1.75rem !important; font-size: clamp(.98rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(242, 233, 222, .86); }
.sm-h__lead strong { color: var(--sm-ivory); font-weight: 600; }
.sm-h .wp-block-buttons { gap: .75rem !important; }
.sm-h__proof { margin: 1.5rem 0 0 !important; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 233, 222, .7); }
.sm-h__proof a { text-decoration: none; }
.sm-h__proof strong { color: var(--sm-honey); }

/* Lent mouvement de caméra sur la photographie : aucune attente, aucune intro bloquante. */
@keyframes sm-kenburns { from { transform: scale(1.14) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
.sm-kenburns img, .sm-kenburns video { animation: sm-kenburns 22s cubic-bezier(.2, .6, .2, 1) both; }

/* ---------- 2. Méthode : un plan-séquence, trois chapitres au scroll ---------- */
.sm-film { position: relative; margin-block: 0 !important; padding: 0 !important; background: var(--sm-obsidian); color: var(--sm-ivory); }
.sm-film__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; margin: 0 !important; }
.sm-film__stage .sm-film__media { position: absolute !important; inset: 0; margin: 0 !important; }
.sm-film__stage .sm-film__media img, .sm-film__stage .sm-film__media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: 32% 42%; }
.sm-film__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 16, 14, .9) 0%, rgba(20, 16, 14, .45) 45%, rgba(20, 16, 14, .3) 100%); pointer-events: none; }
.sm-film__chapters { position: relative; z-index: 2; margin-top: -100svh !important; }
.sm-film__chapter { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--sm-pad) clamp(3rem, 12vh, 7rem); margin: 0 !important; }
.sm-film__chapter > * { max-width: 34rem; }
.sm-film__chapter:nth-child(2) { align-items: flex-end; text-align: right; }
.sm-film__chapter:nth-child(2) > * { margin-left: auto !important; }
.sm-film__kicker { font-size: .72rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sm-honey); margin: 0 0 1rem !important; }
.sm-film__chapter h2, .sm-film__chapter h3 { font-size: clamp(2.2rem, 5.2vw, 5.4rem) !important; line-height: .98 !important; margin: 0 0 1.25rem !important; text-shadow: 0 2px 40px rgba(20, 16, 14, .6); }
.sm-film__chapter p:not(.sm-film__kicker) { color: rgba(242, 233, 222, .88); text-shadow: 0 1px 20px rgba(20, 16, 14, .8); }
.sm-film__progress { position: absolute; left: var(--sm-pad); right: var(--sm-pad); top: 6rem; z-index: 3; height: 1px; background: rgba(242, 233, 222, .2); margin: 0 !important; }
.sm-film__progress::after { content: ""; position: absolute; inset: 0; background: var(--sm-honey); transform-origin: left; transform: scaleX(var(--sm-p, 0)); }

/* ---------- 2 bis. Méthode typographique (variante A) : trois numéros, un fil ambré ---------- */
.sm-film--typo .sm-film__stage {
	--sm-numsize: clamp(9rem, 40svh, 30rem);
	background:
		radial-gradient(ellipse 46% 42% at 80% 82%, rgba(173, 112, 55, .2), transparent 70%),
		var(--sm-obsidian);
}
.sm-film--typo .sm-film__stage::after { display: none; }
.sm-film__num {
	position: absolute;
	/* Marge intérieure : l'approche négative ferait déborder le dernier chiffre du cadre masqué. */
	right: calc(var(--sm-pad) - .12em);
	padding: 0 .12em 0 .04em !important;
	bottom: clamp(2rem, 9vh, 6rem);
	height: 1em;
	margin: 0 !important;
	overflow: hidden;
	font-family: var(--sm-display);
	font-size: var(--sm-numsize) !important;
	font-weight: 200;
	line-height: 1 !important;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233, 185, 121, .6);
}
/* Le numéro courant se remplit de miel, de bas en haut, au fil du chapitre.
   Le remplissage est porté par chaque numéro (Chrome ignore les transformations des enfants pour background-clip). */
.sm-film__num span {
	display: block;
	height: 1em;
	transform: translateY(calc(var(--sm-step, 0) * -100%));
	background: linear-gradient(0deg, var(--sm-honey) var(--sm-fill, 100%), transparent var(--sm-fill, 100%));
	-webkit-background-clip: text;
	background-clip: text;
}
.sm-film__thread {
	position: absolute;
	top: 0;
	right: calc(var(--sm-pad) + var(--sm-numsize) * .5);
	width: 2px;
	height: calc(100% - clamp(2rem, 9vh, 6rem) - var(--sm-numsize) * .9);
	margin: 0 !important;
}
.sm-film__thread::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(233, 185, 121, 0), var(--sm-honey) 30%, var(--sm-amber));
	transform-origin: top;
	transform: scaleY(var(--sm-p, 1));
}
.sm-film__thread::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(var(--sm-p, 1) * 100%);
	width: 14px;
	height: 19px;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: radial-gradient(circle at 38% 34%, #fff3dc 0 12%, var(--sm-honey) 30%, var(--sm-amber) 80%);
	box-shadow: 0 0 24px 6px rgba(233, 185, 121, .35);
	transform: translate(-50%, -40%);
}
/* Sommaire en colonne, à gauche du fil : il ne croise jamais le texte des chapitres. */
.sm-film__steps {
	position: absolute;
	right: calc(var(--sm-pad) + var(--sm-numsize) * .5 + 2rem);
	top: clamp(6rem, 16vh, 9rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .9rem;
	margin: 0 !important;
	font-size: .7rem !important;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	z-index: 3;
}
.sm-film__steps span { color: rgba(242, 233, 222, .35); transition: color .6s var(--sm-ease); }
.sm-film__steps span::after { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin-left: .7rem; vertical-align: middle; background: currentColor; transform-origin: right; transform: scaleX(.4); transition: transform .8s var(--sm-ease); }
.sm-film__steps span.is-active { color: var(--sm-honey); }
.sm-film__steps span.is-active::after { transform: scaleX(1); }
.sm-film--typo .sm-film__chapter:nth-child(2) { align-items: flex-start; text-align: left; }
.sm-film--typo .sm-film__chapter:nth-child(2) > * { margin-left: 0 !important; }
.sm-film--typo .sm-film__chapter > * { max-width: min(34rem, 52vw); }

/* ---------- 3. Univers Épilation : la matière tombe dans la page ---------- */
.sm-u-sucre {
	--sm-sucre-pad: clamp(5rem, 10vw, 8rem);
	position: relative;
	min-height: 100svh;
	margin-block: 0 !important;
	padding: var(--sm-sucre-pad) var(--sm-pad) !important;
	background: #a86a32;
	color: var(--sm-obsidian);
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	column-gap: var(--sm-gap);
}
.sm-u-sucre > * { margin: 0 !important; }
.sm-u-sucre__kicker { grid-column: 1 / -1; grid-row: 1; font-size: .72rem !important; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; position: relative; z-index: 3; }
/* Une colonne verticale qui part du bord haut, comme un fil de pâte qui descend, et s'arrondit en goutte. */
.sm-u-sucre__strand {
	grid-column: 8 / span 4;
	grid-row: 1 / span 3;
	align-self: stretch;
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--sm-sucre-pad)) !important;
	margin-bottom: calc(-.25 * var(--sm-sucre-pad)) !important;
	overflow: hidden;
	border-radius: 0 0 999px 999px;
	box-shadow: 0 50px 120px rgba(66, 48, 37, .45);
}
.sm-u-sucre__strand img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 0%; transform-origin: 50% 0; }
.sm-u-sucre__title {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: center;
	position: relative;
	z-index: 2;
	font-size: clamp(3.4rem, 15vw, 16rem) !important;
	line-height: .82 !important;
	letter-spacing: -.055em !important;
	font-weight: 300;
	color: var(--sm-ivory);
	text-shadow: 0 10px 60px rgba(66, 48, 37, .35);
}
.sm-u-sucre__title em { display: block; padding-left: 12vw; color: var(--sm-obsidian); }
.sm-u-sucre__body { grid-column: 1 / span 5; grid-row: 3; position: relative; z-index: 3; }
.sm-u-sucre__body p { max-width: 30rem; margin: 0 0 1rem !important; color: rgba(20, 16, 14, .86); }
.sm-u-sucre__prices { font-family: var(--sm-display); font-size: 1.15rem !important; line-height: 1.6 !important; }
.sm-u-sucre .wp-block-button:not(.is-style-ligne) .wp-block-button__link { background: var(--sm-obsidian); color: var(--sm-ivory); }
.sm-u-sucre .wp-block-button:not(.is-style-ligne) .wp-block-button__link:hover { background: var(--sm-ivory); color: var(--sm-obsidian); }
.sm-u-sucre .wp-block-button.is-style-ligne .wp-block-button__link { box-shadow: inset 0 0 0 1px rgba(20, 16, 14, .5); color: var(--sm-obsidian); }
.sm-u-sucre .wp-block-button.is-style-ligne .wp-block-button__link:hover { background: var(--sm-obsidian); color: var(--sm-ivory); }

/* ---------- 4. Univers Massages : un écran large qui s'ouvre lentement ---------- */
.sm-u-massage {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(6rem, 12vw, 10rem) var(--sm-pad) !important;
	background: #f6efe6;
	color: var(--sm-obsidian);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sm-gap);
	row-gap: 0;
	align-items: end;
}
.sm-u-massage > * { margin: 0 !important; }
.sm-u-massage__kicker { grid-column: 1 / span 4; grid-row: 1; font-size: .72rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sm-amber); }
.sm-u-massage__title {
	grid-column: 1 / -1;
	grid-row: 2;
	position: relative;
	z-index: 2;
	margin-bottom: -.32em !important;
	padding-left: 24%;
	font-size: clamp(4rem, 15vw, 16rem) !important;
	font-weight: 200;
	font-style: italic;
	line-height: .9 !important;
	letter-spacing: -.045em;
	color: var(--sm-amber);
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	pointer-events: none;
}
.sm-u-massage__screen {
	grid-column: 4 / -1;
	grid-row: 3;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px;
	background: var(--sm-obsidian);
}
.sm-u-massage__screen video, .sm-u-massage__screen img { width: 100%; height: 100%; object-fit: cover; transform-origin: 55% 45%; }
.sm-u-massage__body { grid-column: 1 / span 3; grid-row: 3; align-self: end; padding-right: 1rem; }
.sm-u-massage__body p { font-size: 1rem; line-height: 1.7; color: rgba(20, 16, 14, .78); margin: 0 0 1.25rem !important; }
.sm-u-massage__price { font-family: var(--sm-display); font-size: 1.08rem !important; color: var(--sm-amber) !important; }
.sm-u-massage__line { display: none; }

/* ---------- 5. Univers Sculp' : architecture, ondes, précision ---------- */
.sm-u-sculp {
	position: relative;
	min-height: 100svh;
	margin-block: 0 !important;
	padding: clamp(5rem, 10vw, 8rem) var(--sm-pad) !important;
	background: #0e0c0b;
	color: var(--sm-ivory);
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	column-gap: var(--sm-gap);
}
.sm-u-sculp > * { margin: 0 !important; }
/* Trame d'architecte : lignes qui se tracent au scroll (variable --sm-draw). */
.sm-u-sculp::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(90deg, rgba(242, 233, 222, .09) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
		linear-gradient(rgba(242, 233, 222, .09) 1px, transparent 1px) 0 0 / 100% 25%;
	clip-path: inset(0 calc(100% - var(--sm-draw, 100%)) 0 0);
	pointer-events: none;
}
.sm-u-sculp__ghost {
	grid-column: 1 / -1;
	grid-row: 1 / span 3;
	align-self: center;
	justify-self: center;
	position: relative;
	z-index: 0;
	font-family: var(--sm-display);
	font-size: clamp(8rem, 34vw, 34rem) !important;
	font-weight: 200;
	line-height: .8 !important;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233, 185, 121, .2);
	pointer-events: none;
	user-select: none;
}
.sm-u-sculp__kicker { grid-column: 1 / span 4; grid-row: 1; position: relative; z-index: 3; font-size: .72rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sm-honey); }
/* Ondes : cercles concentriques (mesure) et deux impulsions qui se propagent. */
.sm-u-sculp__waves {
	grid-column: 5 / span 4;
	grid-row: 1 / span 3;
	align-self: center;
	position: relative;
	z-index: 2;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background:
		linear-gradient(90deg, transparent calc(50% - .5px), rgba(242, 233, 222, .22) 50%, transparent calc(50% + .5px)),
		linear-gradient(0deg, transparent calc(50% - .5px), rgba(242, 233, 222, .22) 50%, transparent calc(50% + .5px)),
		repeating-radial-gradient(circle at 50% 50%, rgba(233, 185, 121, .3) 0 1px, transparent 1.5px 6.25%),
		radial-gradient(circle at 50% 50%, rgba(173, 112, 55, .28), transparent 62%);
	-webkit-mask: radial-gradient(circle, #000 52%, transparent 71%);
	mask: radial-gradient(circle, #000 52%, transparent 71%);
}
.sm-u-sculp__waves::before,
.sm-u-sculp__waves::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--sm-honey);
	box-shadow: 0 0 30px rgba(233, 185, 121, .35), inset 0 0 30px rgba(233, 185, 121, .2);
	animation: sm-wave 4.2s cubic-bezier(.2, .6, .2, 1) infinite;
}
.sm-u-sculp__waves::after { animation-delay: 2.1s; }
@keyframes sm-wave { 0% { transform: scale(.12); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.sm-u-sculp__freq {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	font-family: var(--sm-display);
	font-size: clamp(3rem, 6.5vw, 6.5rem) !important;
	font-weight: 200;
	line-height: 1 !important;
	letter-spacing: -.05em;
	color: var(--sm-honey);
	text-shadow: 0 0 40px rgba(233, 185, 121, .45);
}
.sm-u-sculp__notes { grid-column: 9 / -1; grid-row: 2; align-self: center; position: relative; z-index: 3; list-style: none; padding: 0 !important; }
.sm-u-sculp__notes li { position: relative; padding: 1rem 0 1rem 4.5rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(242, 233, 222, .12); }
.sm-u-sculp__notes li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3.5rem; height: 1px; background: var(--sm-honey); transform-origin: left; transform: scaleX(var(--sm-draw-n, 1)); }
.sm-u-sculp__notes li span, .sm-u-sculp__notes li em { display: block; margin-top: .3rem; font-family: var(--wp--preset--font-family--sans); font-size: .9rem; font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; color: rgba(242, 233, 222, .7); }
.sm-u-sculp__body { grid-column: 1 / span 4; grid-row: 3; position: relative; z-index: 3; }
.sm-u-sculp__body h2 { font-size: clamp(2.2rem, 4.4vw, 4.5rem) !important; margin: 0 0 1rem !important; line-height: 1 !important; }
.sm-u-sculp__body p { color: rgba(242, 233, 222, .78); max-width: 26rem; }

/* ---------- 6. Steeve : portrait éditorial (prénom, parcours, portrait, signature) ---------- */
.sm-steeve {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(6rem, 11vw, 10rem) var(--sm-pad) clamp(5rem, 9vw, 8rem) !important;
	background:
		radial-gradient(60% 55% at 82% 30%, rgba(233, 185, 121, .16), transparent 70%),
		radial-gradient(50% 40% at 10% 95%, rgba(173, 112, 55, .14), transparent 70%),
		linear-gradient(180deg, #3a2a20 0%, var(--sm-cacao) 45%, #36271e 100%);
	color: var(--sm-ivory);
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sm-gap);
	align-items: start;
}
.sm-steeve > * { margin: 0 !important; }
/* Fin grain de papier : chaleur sans image. */
.sm-steeve::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.sm-steeve > * { position: relative; z-index: 1; }

.sm-steeve__kicker {
	grid-column: 1 / span 3; grid-row: 1;
	font-size: .72rem !important; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sm-honey);
	display: flex; align-items: center; gap: .9rem;
}
.sm-steeve__kicker::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }

/* Le parcours : Londres → Nantes, le trait se dessine. */
.sm-steeve__route {
	grid-column: 4 / span 4; grid-row: 1; align-self: center;
	display: flex; align-items: center; gap: 1rem;
	font-size: .72rem !important; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 233, 222, .62);
}
.sm-steeve__route span:nth-child(2) {
	flex: 1; display: flex; align-items: center; gap: .9rem; justify-content: center;
	font-family: var(--sm-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--sm-honey);
}
.sm-steeve__route span:nth-child(2)::before, .sm-steeve__route span:nth-child(2)::after {
	content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(233, 185, 121, .2), var(--sm-honey));
	transform-origin: left; transform: scaleX(var(--sm-route, 1));
}
.sm-steeve__route span:last-child { color: var(--sm-ivory); font-weight: 600; }

/* Le prénom, en très grand, posé sur le portrait. */
.sm-steeve__name {
	grid-column: 1 / -1; grid-row: 2; z-index: 3 !important;
	margin-top: clamp(1.5rem, 4vw, 3.5rem) !important;
	font-family: var(--sm-display);
	font-size: clamp(5.5rem, 27vw, 28rem) !important;
	font-weight: 200 !important;
	font-style: italic;
	line-height: .8 !important;
	letter-spacing: -.055em !important;
	color: var(--sm-honey);
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	text-shadow: 0 .04em .3em rgba(20, 16, 14, .35);
	pointer-events: none;
}
.sm-steeve__name .sm-ch { display: inline-block; }

/* Emplacement du portrait : arche, monogramme tant qu'aucune photo n'est posée. */
.sm-steeve__portrait {
	grid-column: 7 / -1; grid-row: 2 / span 2; z-index: 1 !important;
	justify-self: end; width: 92% !important;
	margin-top: clamp(3rem, 7vw, 6rem) !important;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 4px 4px;
	overflow: hidden;
	background: radial-gradient(80% 60% at 50% 30%, rgba(233, 185, 121, .22), transparent 70%), #2b1f18;
	box-shadow: inset 0 0 0 1px rgba(233, 185, 121, .28), 0 2.5rem 5rem -2rem rgba(0, 0, 0, .55);
	display: grid; place-items: center;
}
.sm-steeve__portrait::after {
	content: ""; position: absolute; inset: .9rem; border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(233, 185, 121, .14);
}
.sm-steeve__portrait > * { grid-area: 1 / 1; margin: 0 !important; }
.sm-steeve__portrait figure, .sm-steeve__portrait img { width: 100%; height: 100%; object-fit: cover; }
.sm-steeve__monogram {
	font-family: var(--sm-display); font-style: italic; font-weight: 200;
	font-size: clamp(9rem, 22vw, 24rem) !important; line-height: 1 !important;
	color: transparent; -webkit-text-stroke: 1px rgba(233, 185, 121, .6);
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	transform: translateY(4%);
}
.sm-steeve__portrait:has(img) .sm-steeve__monogram { display: none; }
/* Portrait de Steeve dans l'arche : cadrage sur le visage, voile chaud en pied pour la légende. */
.sm-steeve__photo { position: relative; width: 100%; height: 100%; }
.sm-steeve__photo img { object-position: 50% 22%; filter: saturate(.96) contrast(1.02); }
.sm-steeve__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 30, 23, 0) 58%, rgba(42, 30, 23, .78) 100%); pointer-events: none; }
.sm-steeve__legende {
	z-index: 2; align-self: end; justify-self: start; margin: 0 0 1.6rem 1.8rem !important;
	font-size: .68rem !important; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sm-honey);
	display: flex; align-items: center; gap: .75rem;
}
.sm-steeve__legende::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.sm-steeve__portrait:not(:has(img)) .sm-steeve__legende { display: none; }

/* Le récit : une ouverture en grand corps, puis deux colonnes aérées. */
.sm-steeve__story {
	grid-column: 1 / span 6; grid-row: 3;
	margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--sm-gap);
	font-size: 1.02rem; line-height: 1.8; color: rgba(242, 233, 222, .8);
}
.sm-steeve__story p { margin: 0 !important; }
.sm-steeve__lead {
	grid-column: 1 / -1;
	font-family: var(--sm-display);
	font-size: clamp(1.35rem, 2.05vw, 1.95rem) !important;
	font-weight: 300; line-height: 1.42 !important; letter-spacing: -.01em;
	color: var(--sm-ivory);
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(242, 233, 222, .16);
}
.sm-steeve__lead::first-letter {
	float: left; font-size: 3.6em; line-height: .78; padding: .06em .12em 0 0;
	font-style: italic; font-weight: 200; color: var(--sm-honey);
}
.sm-steeve__story p:last-child { color: var(--sm-ivory); }

/* La signature. */
.sm-steeve .wp-block-quote.sm-steeve__sign {
	grid-column: 1 / -1; grid-row: 4;
	margin-top: clamp(5rem, 10vw, 9rem) !important;
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	border-top: 1px solid rgba(242, 233, 222, .16);
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sm-gap);
}
.sm-steeve__sign p {
	grid-column: 2 / -1;
	font-size: clamp(2.6rem, 6.6vw, 7.25rem) !important; font-weight: 200 !important; font-style: normal !important;
	line-height: .98 !important; letter-spacing: -.035em !important;
	color: var(--sm-ivory);
}
.sm-steeve__sign p::before, .sm-steeve__sign p::after { content: none !important; }
.sm-steeve__sign p span { display: block; }
.sm-steeve__sign p > span:last-child { color: var(--sm-honey); font-style: italic; padding-left: 1.1em; }
.sm-steeve__sign p .sm-line { display: block; overflow: hidden; padding-bottom: .08em; }
.sm-steeve__sign::before {
	content: "“"; grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
	font-family: var(--sm-display); font-size: clamp(5rem, 10vw, 10rem); line-height: .7; color: var(--sm-amber); padding-right: .1em;
	transform: translateY(calc((var(--sm-q, .5) - .5) * 4rem));
}
.sm-steeve__sign cite {
	grid-column: 2 / -1; margin-top: 2rem !important;
	display: flex !important; align-items: center; gap: 1rem; color: rgba(242, 233, 222, .7) !important;
}
.sm-steeve__sign cite::before { content: ""; width: 3rem; height: 1px; background: var(--sm-honey); }
.sm-steeve .sm-arrow { grid-column: 2 / span 6; grid-row: 5; margin-top: 2.5rem !important; }

/* ---------- 7. Citation client ---------- */
.sm-citation {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(6rem, 14vw, 12rem) var(--sm-pad) !important;
	background: var(--sm-ivory);
	color: var(--sm-obsidian);
	text-align: center;
}
.sm-citation > * { max-width: 62rem; margin-inline: auto !important; }
.sm-citation__quote { font-family: var(--sm-display); font-size: clamp(1.8rem, 4.2vw, 4.2rem) !important; font-weight: 300; line-height: 1.1 !important; letter-spacing: -.02em; margin: 0 auto 1.5rem !important; }
.sm-citation__quote::before { content: "«\00a0"; color: var(--sm-amber); }
.sm-citation__quote::after { content: "\00a0»"; color: var(--sm-amber); }
.sm-citation__source { font-size: .75rem !important; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: clamp(3rem, 6vw, 5rem) !important; }
.sm-citation__score { display: inline-flex !important; align-items: baseline; gap: 1.25rem; margin: 0 auto !important; padding-top: 2rem; border-top: 1px solid rgba(20, 16, 14, .15); }
.sm-citation__score p { margin: 0 !important; }
.sm-citation__note { font-family: var(--sm-display); font-size: clamp(3.5rem, 7vw, 6rem) !important; font-weight: 200; line-height: 1 !important; }
.sm-citation__meta { text-align: left; font-size: .9rem; line-height: 1.5; }
.sm-citation__meta a { color: var(--sm-amber); }

/* ---------- 8. Conseils : page de magazine ---------- */
.sm-mag {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(6rem, 12vw, 10rem) var(--sm-pad) !important;
	background: var(--sm-sand);
	color: var(--sm-obsidian);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sm-gap);
	row-gap: 2rem;
	align-items: start;
}
.sm-mag > * { margin: 0 !important; }
.sm-mag__media { grid-column: 1 / span 4; grid-row: 1 / span 4; margin: 0 !important; overflow: hidden; }
.sm-mag__media { position: relative; }
.sm-mag__media img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: 45% 60%; transform-origin: 50% 60%; }
.sm-mag__media figcaption { margin-top: .75rem; font-size: .75rem; letter-spacing: .06em; opacity: .65; text-align: left; }
.sm-mag__kicker { grid-column: 6 / -1; font-size: .72rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sm-amber); border-bottom: 1px solid rgba(20, 16, 14, .2); padding-bottom: .9rem; }
.sm-mag__title { grid-column: 6 / -1; font-size: clamp(2.6rem, 5.5vw, 5.6rem) !important; line-height: .96 !important; }
.sm-mag__lead { grid-column: 6 / span 6; font-family: var(--sm-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important; line-height: 1.4 !important; font-weight: 300; }
.sm-mag__cols { grid-column: 6 / -1; column-count: 2; column-gap: clamp(1.5rem, 3vw, 3rem); column-rule: 1px solid rgba(20, 16, 14, .15); font-size: .98rem; line-height: 1.75; }
.sm-mag__cols h3 { font-size: .75rem !important; font-family: var(--wp--preset--font-family--sans); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sm-amber); margin: 0 0 .6rem !important; break-after: avoid; }
.sm-mag__cols p { margin: 0 0 1.25rem !important; }
.sm-mag__pull { grid-column: 6 / -1; font-family: var(--sm-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.8rem) !important; line-height: 1.15 !important; color: var(--sm-amber); padding-left: 1.5rem; border-left: 2px solid var(--sm-amber); }
.sm-mag .sm-arrow { grid-column: 6 / -1; }

/* ---------- 9. FAQ minimaliste ---------- */
.sm-faqmin {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(6rem, 12vw, 10rem) var(--sm-pad) !important;
	background: var(--sm-obsidian);
	color: var(--sm-ivory);
}
.sm-faqmin > * { max-width: 1100px; margin-inline: auto !important; }
.sm-faqmin__kicker { font-size: .72rem !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sm-honey); margin-bottom: 1.5rem !important; }
.sm-faqmin h2 { font-size: 1rem !important; font-family: var(--wp--preset--font-family--sans); font-weight: 400; letter-spacing: 0; opacity: .6; margin: 0 auto 3rem !important; }
.sm-faqmin .wp-block-details { border-top: 1px solid rgba(242, 233, 222, .14); margin: 0 auto !important; }
.sm-faqmin .wp-block-details:last-of-type { border-bottom: 1px solid rgba(242, 233, 222, .14); }
.sm-faqmin .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	padding: clamp(1.4rem, 3vw, 2.4rem) 0;
	font-family: var(--sm-display);
	font-size: clamp(1.45rem, 3.2vw, 3rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	transition: color .5s var(--sm-ease), transform .6s var(--sm-ease);
}
.sm-faqmin .wp-block-details summary::-webkit-details-marker { display: none; }
.sm-faqmin .wp-block-details summary::after { content: "+"; font-family: var(--wp--preset--font-family--sans); font-size: 1.2rem; font-weight: 300; opacity: .6; transition: transform .6s var(--sm-ease); }
.sm-faqmin .wp-block-details[open] summary::after { transform: rotate(45deg); }
.sm-faqmin .wp-block-details summary:hover, .sm-faqmin .wp-block-details summary:focus-visible { color: var(--sm-honey); transform: translateX(.4rem); }
.sm-faqmin .wp-block-details > :not(summary) { max-width: 44rem; margin: 0 0 2rem !important; color: rgba(242, 233, 222, .75); font-size: 1.02rem; line-height: 1.7; }
.sm-faqmin .sm-arrow { margin-top: 3rem !important; }

/* ---------- 11. Final : l'invitation ---------- */
.sm-fin {
	position: relative;
	min-height: 100svh;
	margin-block: 0 !important;
	padding: clamp(6rem, 12vw, 9rem) var(--sm-pad) !important;
	display: grid;
	place-items: center;
	text-align: center;
	background: var(--sm-obsidian);
	color: var(--sm-obsidian);
	overflow: hidden;
	isolation: isolate;
}
.sm-fin__media { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; }
.sm-fin__media { overflow: hidden; }
.sm-fin__media img, .sm-fin__media video { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.sm-fin__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20, 16, 14, .5), rgba(20, 16, 14, .86) 78%); }
.sm-fin__body { position: relative; z-index: 2; max-width: 64rem; }
.sm-fin__kicker { font-size: .72rem !important; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1.5rem !important; color: var(--sm-honey); }
.sm-fin__title { font-size: clamp(2.6rem, 8vw, 8.5rem) !important; line-height: .92 !important; letter-spacing: -.04em !important; margin: 0 auto 2.5rem !important; color: var(--sm-ivory); text-shadow: 0 6px 50px rgba(66, 48, 37, .45); }
.sm-fin__title em { color: var(--sm-honey); }
.sm-fin .wp-block-buttons { justify-content: center; }
.sm-fin .wp-block-button:not(.is-style-ligne) .wp-block-button__link { background: var(--sm-honey); color: var(--sm-obsidian); font-size: .8rem; padding: 1.25rem 2.25rem; }
.sm-fin .wp-block-button:not(.is-style-ligne) .wp-block-button__link:hover { background: var(--sm-ivory); color: var(--sm-obsidian); }
.sm-fin .wp-block-button.is-style-ligne .wp-block-button__link { box-shadow: inset 0 0 0 1px rgba(20, 16, 14, .55); color: var(--sm-obsidian); }
.sm-fin__meta { margin-top: 1.5rem !important; font-size: .9rem; color: rgba(242, 233, 222, .85); }
.sm-fin__meta a { color: inherit; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 781px) {
	.sm-h { padding-top: 5.5rem !important; }
	.sm-h__media img { object-position: 70% 50%; }
	.sm-h__media::after { background: linear-gradient(0deg, rgba(20, 16, 14, .95) 0%, rgba(20, 16, 14, .78) 55%, rgba(20, 16, 14, .35) 100%); }
	.sm-h__title { font-size: clamp(2.2rem, 11vw, 3.6rem) !important; }
	.sm-h__lead { font-size: .95rem; margin-bottom: 1.25rem !important; }
	.sm-h .wp-block-button__link { padding: .95rem 1.3rem; }
	.sm-h__proof { margin-top: 1rem !important; }

	.sm-film__chapter:nth-child(2) { align-items: flex-start; text-align: left; }
	.sm-film__chapter:nth-child(2) > * { margin-left: 0 !important; }

	.sm-u-sucre, .sm-u-sculp, .sm-u-massage, .sm-mag { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.sm-u-sucre > *, .sm-u-sculp > *, .sm-u-massage > *, .sm-mag > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
	.sm-film__num { --sm-numsize: 34vw; font-size: 34vw !important; top: 5.25rem; bottom: auto; }
	.sm-film--typo .sm-film__stage { --sm-numsize: 34vw; }
	.sm-film__thread { top: calc(5.25rem + 34vw); height: 22svh; }
	.sm-film__steps { display: none; }
	.sm-film--typo .sm-film__chapter > * { max-width: none; }
	.sm-u-sucre { row-gap: 2rem; }
	.sm-u-sucre__strand { width: 72%; height: 62svh; justify-self: end; margin-bottom: 0 !important; }
	.sm-u-sucre__title { margin-top: -22vw !important; font-size: 19vw !important; }
	.sm-u-massage { row-gap: 1.25rem; }
	.sm-u-massage__title { padding-left: 0; margin-bottom: -.28em !important; font-size: 22vw !important; }
	.sm-u-massage__body { padding-right: 0; margin-top: 1rem !important; }
	.sm-u-sculp { row-gap: 2.5rem; }
	.sm-u-sculp__waves { width: 78%; justify-self: center; }
	.sm-u-sculp__ghost { position: absolute; top: 12%; left: -4%; font-size: 52vw !important; }
	.sm-steeve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sm-steeve__kicker { grid-column: 1 / -1; grid-row: 1; }
	.sm-steeve__name { grid-column: 1 / -1; grid-row: 2; font-size: 27vw !important; margin-top: 2rem !important; }
	/* Mobile : le prénom ne chevauche plus l'arche, pour garder le visage entièrement visible. */
	.sm-steeve__portrait { grid-column: 1 / -1; grid-row: 3; width: 84% !important; justify-self: end; margin-top: 1.25rem !important; }
	.sm-steeve__route { grid-column: 1 / -1; grid-row: 4; margin-top: 2rem !important; gap: .6rem; letter-spacing: .16em; }
	.sm-steeve__route span:nth-child(2) { font-size: .92rem; gap: .5rem; }
	.sm-steeve__story { grid-column: 1 / -1; grid-row: 5; grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem !important; gap: 1.5rem; }
	.sm-steeve .wp-block-quote.sm-steeve__sign { grid-column: 1 / -1; grid-row: 6; margin-top: 4rem !important; grid-template-columns: minmax(0, 1fr); }
	.sm-steeve__sign::before { display: none; }
	.sm-steeve__sign p, .sm-steeve__sign cite { grid-column: 1; }
	.sm-steeve__sign p { font-size: clamp(2.3rem, 11.5vw, 3.6rem) !important; }
	.sm-steeve__sign p > span:last-child { padding-left: 0; }
	.sm-steeve .sm-arrow { grid-column: 1 / -1; grid-row: 7; }
	.sm-mag__media img { aspect-ratio: 4 / 3; }
	.sm-mag__cols { column-count: 1; }
	.sm-citation__score { flex-direction: column; align-items: center; gap: .5rem; }
	.sm-citation__meta { text-align: center; }
}

/* Petits écrans courts (320 × 568) : tout le hero, CTA compris, tient dans l'écran. */
@media (max-width: 360px), (max-height: 620px) and (max-width: 781px) {
	.sm-h { padding-top: 4.75rem !important; padding-bottom: 1.25rem !important; }
	.sm-h__title { font-size: 2.15rem !important; margin-bottom: .9rem !important; }
	.sm-h__lead { font-size: .88rem; line-height: 1.5; margin-bottom: 1rem !important; }
	.sm-h .wp-block-button__link { padding: .85rem 1.1rem; font-size: .68rem; }
	.sm-h__proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-kenburns img, .sm-kenburns video, .sm-u-sculp__waves::before, .sm-u-sculp__waves::after { animation: none !important; }
	.sm-u-sculp__waves::before { transform: scale(.66); opacity: .5; }
	.sm-u-sculp__waves::after { display: none; }
}