.wf-scsl{--scsl-step:100vh;--scsl-off:0px;--scsl-pad:48px;--scsl-gap:64px;--scsl-cols:minmax(0,50fr) minmax(0,50fr);--scsl-ar:4 / 5;--scsl-rn:0.8;--scsl-fit:cover;--scsl-radius:0px;--scsl-tmax:520px;--scsl-ts:48px;--scsl-ts-m:30px;--scsl-tw:600;--scsl-xs:17px;--scsl-xs-m:16px;--scsl-mimg:50;--scsl-btn-r:999px;--scsl-btn-c:#ffffff;}
/* WF Slider au scroll — styles communs.
   Chaque instance pose ses réglages en variables (--scsl-*) sur sa racine ; le script pose
   la progression sur chaque image (--in, --out, --d) et chaque texte (--tin, --tout).
   Les réglages mobiles passent par des propriétés sur les enfants, jamais en redéfinissant
   une variable : le style en ligne de la racine gagnerait. */

.wf-scsl {
	--scsl-vh: 100vh;
	--scsl-px: clamp(20px, 5vw, 72px);
	position: relative;
	background: var(--scsl-bg, transparent);
	color: var(--scsl-color, inherit);
}
@supports (height: 100svh) {
	.wf-scsl { --scsl-vh: 100svh; }
}

/* ── Zone figée ── */
.wf-scsl__track {
	position: relative;
	height: calc(var(--scsl-vh) - var(--scsl-off, 0px) + var(--scsl-n, 1) * var(--scsl-step, 100vh));
}
.wf-scsl__stage {
	position: sticky;
	top: var(--scsl-off, 0px);
	height: calc(var(--scsl-vh) - var(--scsl-off, 0px));
	box-sizing: border-box;
	padding: var(--scsl-pad, 48px) 0;
	overflow: hidden;
	display: flex;
}
/* Avec un fond propre, le contenu ne colle pas aux bords de l'aplat. */
.wf-scsl.has-bg .wf-scsl__stage { padding-left: var(--scsl-px); padding-right: var(--scsl-px); }
.wf-scsl__grid {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: var(--scsl-cols, minmax(0, 1fr) minmax(0, 1fr));
	column-gap: var(--scsl-gap, 64px);
	align-items: center;
}
.wf-scsl--img-right .wf-scsl__media { order: 2; }

/* ── Image ── */
.wf-scsl__media {
	position: relative;
	justify-self: center;
	width: min(100%, calc((var(--scsl-vh) - var(--scsl-off, 0px) - 2 * var(--scsl-pad, 48px)) * var(--scsl-rn, .8)));
	aspect-ratio: var(--scsl-ar, 4 / 5);
	max-height: 100%;
	border-radius: var(--scsl-radius, 0px);
	overflow: hidden;
	isolation: isolate;
}
.wf-scsl.is-free .wf-scsl__media {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
.wf-scsl__img {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	z-index: calc(var(--i, 0) + 1);
}
.wf-scsl__img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--scsl-fit, cover);
	transform: translate3d(0, var(--par-y, 0px), 0) scale(calc(var(--par-s, 1) * var(--zs, 1)));
	transform-origin: 50% 50%;
}
.wf-scsl.is-par:not(.is-m) .wf-scsl__img { --par-s: 1.16; --par-y: calc(var(--d, 0) * -7%); }
.wf-scsl.is-par.is-par-strong:not(.is-m) .wf-scsl__img { --par-s: 1.28; --par-y: calc(var(--d, 0) * -12%); }
/* Rideau : la partie visible reste toujours couverte, la parallaxe forte se passe de zoom
   (image à 40 % de la vitesse du scroll, comme dsgn interior). */
.wf-scsl.is-par.is-par-strong.wf-scsl--tr-curtain:not(.is-m) .wf-scsl__img { --par-s: 1; --par-y: calc(var(--d, 0) * -40%); }
.wf-scsl__img.is-empty { background: hsl(calc(28 + var(--i, 0) * 47) 20% 80%); }
.wf-scsl__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(48px, 9vw, 140px);
	font-weight: 700;
	line-height: 1;
	color: rgba(0, 0, 0, .22);
}
.wf-scsl.has-ov .wf-scsl__img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--scsl-ov, #000);
	opacity: var(--scsl-ov-o, 0);
	pointer-events: none;
}

/* Transitions de l'image : --in (0 → 1) = arrivée, --out (0 → 1) = recouverte par la suivante. */
.wf-scsl--tr-curtain .wf-scsl__img { clip-path: inset(calc((1 - var(--in, 1)) * 100%) 0 0 0); }
.wf-scsl--tr-fade .wf-scsl__img,
.wf-scsl--tr-zoom .wf-scsl__img { opacity: var(--in, 1); }
.wf-scsl--tr-zoom .wf-scsl__img { --zs: calc(1 + .18 * (1 - var(--in, 1))); }
.wf-scsl--tr-slide .wf-scsl__img { transform: translate3d(0, calc((1 - var(--in, 1)) * 100% - var(--out, 0) * 30%), 0); }

/* ── Texte ── */
.wf-scsl__col {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
}
.wf-scsl__texts {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
}
.wf-scsl--v-top .wf-scsl__texts { align-content: start; }
.wf-scsl--v-bottom .wf-scsl__texts { align-content: end; }
.wf-scsl__text {
	grid-area: 1 / 1;
	max-width: var(--scsl-tmax, 520px);
	pointer-events: none;
	opacity: calc(var(--tin, 1) * (1 - var(--tout, 0)));
}
.wf-scsl__text.is-active { pointer-events: auto; }
.wf-scsl--tx-slide .wf-scsl__text > * {
	transform: translate3d(0, calc((1 - var(--tin, 1) - var(--tout, 0)) * var(--k, 1) * 28px), 0);
}
/* Découpé : le texte reste fixe, la ligne du rideau le coupe comme sa photo ; le contenu dérive un peu. */
.wf-scsl--tx-clip .wf-scsl__text {
	opacity: 1;
	clip-path: inset(calc((1 - var(--in, 1)) * 100%) 0 calc(var(--out, 0) * 100%) 0);
}
.wf-scsl--tx-clip.is-par:not(.is-m) .wf-scsl__text > * { transform: translate3d(0, calc(var(--d, 0) * -24px), 0); }
.wf-scsl--tx-clip.is-par-strong:not(.is-m) .wf-scsl__text > * { transform: translate3d(0, calc(var(--d, 0) * -60px), 0); }
.wf-scsl__eyebrow { --k: 1; }
.wf-scsl__title { --k: 1.3; }
.wf-scsl__body { --k: 1.6; }
.wf-scsl__actions { --k: 1.9; }

.wf-scsl .wf-scsl__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--scsl-eyebrow, currentColor);
}
.wf-scsl .wf-scsl__title {
	margin: 0;
	font-size: var(--scsl-ts, 48px);
	font-weight: var(--scsl-tw, 600);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: none;
	color: inherit;
}
.wf-scsl.has-tf .wf-scsl__title { font-family: var(--scsl-tf); }
.wf-scsl .wf-scsl__body {
	margin: 20px 0 0;
	font-size: var(--scsl-xs, 17px);
	line-height: 1.6;
	opacity: .85;
}
.wf-scsl__actions { margin-top: 28px; }

/* ── Bouton ── */
.wf-scsl .wf-scsl__btn,
.wf-scsl .wf-scsl__btn:hover {
	color: inherit;
	text-decoration: none;
}
.wf-scsl.has-btn .wf-scsl__btn,
.wf-scsl.has-btn .wf-scsl__btn:hover { color: var(--scsl-btn); }
.wf-scsl__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	box-sizing: border-box;
	border: 1.5px solid currentColor;
	border-radius: var(--scsl-btn-r, 999px);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity .2s, gap .2s;
}
.wf-scsl--btn-filled .wf-scsl__btn { background: currentColor; }
.wf-scsl--btn-filled .wf-scsl__btn > span { color: var(--scsl-btn-c, #fff); }
.wf-scsl--btn-filled .wf-scsl__btn:hover,
.wf-scsl--btn-outline .wf-scsl__btn:hover { opacity: .82; }
.wf-scsl--btn-arrow .wf-scsl__btn {
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
}
.wf-scsl--btn-arrow .wf-scsl__btn:hover { gap: 16px; }

/* ── Indicateurs ── */
.wf-scsl__ind {
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	color: var(--scsl-ind, currentColor);
}
.wf-scsl__ind button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.wf-scsl__num {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}
.wf-scsl__sep { margin: 0 .45em; opacity: .4; }
.wf-scsl .wf-scsl__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .55;
	transition: opacity .2s;
}
.wf-scsl .wf-scsl__arrow:hover { opacity: 1; }

.wf-scsl__bar {
	position: relative;
	width: 100%;
	max-width: 280px;
	height: 2px;
	margin-top: 40px;
}
.wf-scsl__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: .2;
}
.wf-scsl__barfill {
	position: absolute;
	inset: 0;
	background: currentColor;
	transform: scaleX(var(--p, 0));
	transform-origin: 0 50%;
}
.wf-scsl__segs {
	position: absolute;
	left: 0;
	right: 0;
	top: -21px;
	height: 44px;
	display: flex;
}
.wf-scsl .wf-scsl__seg { flex: 1 1 0; height: 44px; }

.wf-scsl__dots { gap: 0; margin-left: -11px; }
.wf-scsl__dot {
	display: grid;
	place-items: center;
	width: 30px;
	height: 44px;
}
.wf-scsl__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: currentColor;
	opacity: .3;
	transition: width .35s, opacity .35s;
}
.wf-scsl__dot.is-active::before { width: 22px; opacity: 1; }

/* ── Plein écran : la photo occupe toute la zone, le texte est posé dessus ── */
.wf-scsl--lay-overlay { color: var(--scsl-color, #fff); }
.wf-scsl.wf-scsl--lay-overlay .wf-scsl__stage { padding: 0; }
.wf-scsl--lay-overlay .wf-scsl__grid { position: relative; display: block; }
.wf-scsl.wf-scsl--lay-overlay .wf-scsl__media {
	position: absolute;
	inset: 0;
	justify-self: stretch;
	width: auto;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
}
.wf-scsl.wf-scsl--lay-overlay .wf-scsl__col { position: absolute; inset: 0; z-index: 2; height: auto; }
.wf-scsl--lay-overlay .wf-scsl__texts { position: absolute; inset: 0; display: block; }
/* Chaque texte couvre toute la zone : sa découpe tombe sur la même ligne que celle de la photo. */
.wf-scsl.wf-scsl--lay-overlay .wf-scsl__text {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	max-width: none;
	padding: calc(var(--scsl-pad, 48px) + 56px) var(--scsl-px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
}
.wf-scsl--lay-overlay .wf-scsl__text > * { max-width: var(--scsl-tmax, 520px); }
/* Bouton plein blanc sur la photo : libellé sombre par défaut. */
.wf-scsl--lay-overlay.wf-scsl--btn-filled .wf-scsl__btn > span { color: var(--scsl-btn-c, #1b1b1b); }
.wf-scsl--lay-overlay.wf-scsl--v-top .wf-scsl__text { justify-content: flex-start; }
.wf-scsl--lay-overlay.wf-scsl--v-bottom .wf-scsl__text { justify-content: flex-end; }
.wf-scsl--lay-overlay.wf-scsl--h-center .wf-scsl__text { align-items: center; text-align: center; }
.wf-scsl--lay-overlay.wf-scsl--h-right .wf-scsl__text { align-items: flex-end; text-align: right; }
.wf-scsl.wf-scsl--lay-overlay .wf-scsl__ind {
	position: absolute;
	left: var(--scsl-px);
	right: var(--scsl-px);
	bottom: max(24px, var(--scsl-pad, 48px));
	margin: 0;
	justify-content: flex-start;
}
.wf-scsl--lay-overlay.wf-scsl--h-center .wf-scsl__ind { justify-content: center; }
.wf-scsl--lay-overlay.wf-scsl--h-right .wf-scsl__ind { justify-content: flex-end; }
.wf-scsl.wf-scsl--lay-overlay.wf-scsl--h-center .wf-scsl__bar { margin: 0 auto; }
.wf-scsl.wf-scsl--lay-overlay.wf-scsl--h-right .wf-scsl__bar { margin: 0 0 0 auto; }

/* ── Mobile (classe posée selon le point de rupture réglé) ── */
.wf-scsl.is-m .wf-scsl__title { font-size: var(--scsl-ts-m, 30px); }
.wf-scsl.is-m .wf-scsl__body { font-size: var(--scsl-xs-m, 16px); }
@media (max-width: 639px) {
	.wf-scsl .wf-scsl__title { font-size: var(--scsl-ts-m, 30px); }
	.wf-scsl .wf-scsl__body { font-size: var(--scsl-xs-m, 16px); }
}

/* Sticky simplifié (côte à côte) : image en haut, texte dessous. En plein écran, la disposition reste. */
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__stage {
	padding-top: calc(var(--scsl-pad, 48px) * .5);
	padding-bottom: calc(var(--scsl-pad, 48px) * .5);
}
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
}
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__media {
	order: 0;
	flex: none;
	width: 100%;
	height: calc((var(--scsl-vh) - var(--scsl-off, 0px)) * var(--scsl-mimg, 50) / 100);
	max-height: none;
	aspect-ratio: auto;
}
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__col { flex: 1 1 auto; height: auto; }
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__ind { margin-top: 12px; }
.wf-scsl--lay-split.is-m.wf-scsl--m-sticky .wf-scsl__bar { margin-top: 24px; }

/* Slides empilées : plus de zone figée, image puis texte pour chaque slide. */
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__track { height: auto; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__stage {
	position: static;
	height: auto;
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
	display: block;
}
.wf-scsl.has-bg.is-m.wf-scsl--m-stack .wf-scsl__stage { padding-top: 32px; padding-bottom: 32px; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__grid { display: flex; flex-direction: column; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__media,
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__col,
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__texts { display: contents; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__img {
	--in: 1 !important;
	--out: 0 !important;
	--d: 0 !important;
	position: relative;
	inset: auto;
	z-index: auto;
	order: calc(var(--i, 0) * 2);
	aspect-ratio: var(--scsl-ar, 4 / 5);
	border-radius: var(--scsl-radius, 0px);
	clip-path: none;
	opacity: 1;
	transform: none;
}
.wf-scsl.is-m.wf-scsl--m-stack.is-free .wf-scsl__img:not(.is-empty) { aspect-ratio: auto; }
.wf-scsl.is-m.wf-scsl--m-stack.is-free .wf-scsl__img img { height: auto; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__img img { transform: none; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__text {
	--tin: 1 !important;
	--tout: 0 !important;
	order: calc(var(--i, 0) * 2 + 1);
	max-width: none;
	margin: 20px 0 48px;
	opacity: 1;
	pointer-events: auto;
	clip-path: none;
}
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__text:last-child { margin-bottom: 0; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__text > * { transform: none; }
.wf-scsl.is-m.wf-scsl--m-stack .wf-scsl__ind { display: none; }

/* Plein écran empilé : chaque texte posé sur sa photo, une rangée de grille par slide. */
.wf-scsl.wf-scsl--lay-overlay.is-m.wf-scsl--m-stack .wf-scsl__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 16px;
}
.wf-scsl.wf-scsl--lay-overlay.is-m.wf-scsl--m-stack .wf-scsl__img {
	grid-row: var(--row);
	grid-column: 1;
	align-self: stretch;
	min-height: 0;
}
.wf-scsl.wf-scsl--lay-overlay.is-m.wf-scsl--m-stack .wf-scsl__text {
	grid-row: var(--row);
	grid-column: 1;
	align-self: stretch;
	position: relative;
	inset: auto;
	z-index: 2;
	margin: 0;
	padding: 40px 24px;
}