/**
 * Pages hôtes (3.89) : « Devenir hôte » et « Recevoir vos paiements ».
 *
 * Simulateur de revenus, étapes qui s'allument l'une après l'autre au
 * défilement, cartes qui apparaissent. Les états de départ (estompé, décalé)
 * ne s'appliquent que lorsque le script a posé sa classe : sans script,
 * tout reste visible.
 *
 * @package HauntedLodgesCore
 */

/* ============================================================ Simulateur */

html body .hl-simu {
	--s-velours: #150e10;
	--s-rouge: #961b1b;
	--s-pierre-7: #6b6151;
	--s-pierre-5: #948670;
	--s-pierre-3: #bcb2a1;
	--s-pierre-2: #ddd7cc;
	--s-pierre-1: #eeebe5;
	--s-clair: #fbfaf8;
	--s-courbe: cubic-bezier( 0.22, 1, 0.36, 1 );
	margin: 0 0 clamp( 64px, 8vw, 112px );
}

html body .hl-simu__tete {
	max-width: 640px;
	margin: 0 0 28px;
}

html body .hl-simu__tete h2 {
	margin: 0 0 12px !important;
}

html body .hl-simu__tete p {
	margin: 0 !important;
	color: var( --s-pierre-7 );
	font-size: 17px;
	line-height: 1.6;
}

html body .hl-simu__corps {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	overflow: hidden;
	border: 1px solid var( --s-pierre-1 );
	border-radius: 28px;
	background: var( --s-clair );
}

/* ---------------------------------------------------------- Réglages */

html body .hl-simu__reglages {
	display: flex;
	flex-direction: column;
	gap: 34px;
	margin: 0;
	padding: 40px;
}

html body .hl-simu__types {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

html body .hl-simu__types legend {
	margin: 0 0 12px;
	padding: 0;
	color: var( --s-velours );
	font-size: 15px;
	font-weight: 600;
}

html body .hl-simu__choix {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
}

html body .hl-simu__type {
	position: relative;
	margin: 0;
	cursor: pointer;
}

html body .hl-simu__type input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

html body .hl-simu__type-carte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px 12px;
	border: 1px solid var( --s-pierre-2 );
	border-radius: 16px;
	background: #fff;
	color: var( --s-pierre-7 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, transform 0.35s var( --s-courbe );
}

html body .hl-simu__type-carte img {
	width: auto;
	height: 30px;
	margin: 0;
	opacity: 0.55;
	filter: grayscale( 1 );
	transition: opacity 0.3s ease, filter 0.3s ease, transform 0.45s var( --s-courbe );
}

html body .hl-simu__type:hover .hl-simu__type-carte {
	border-color: var( --s-pierre-3 );
	transform: translateY( -1px );
}

html body .hl-simu__type input:checked + .hl-simu__type-carte {
	border-color: var( --s-rouge );
	box-shadow: 0 0 0 3px rgba( 150, 27, 27, 0.08 );
	color: var( --s-velours );
}

html body .hl-simu__type input:checked + .hl-simu__type-carte img {
	opacity: 1;
	filter: none;
	transform: scale( 1.08 );
}

html body .hl-simu__type input:focus-visible + .hl-simu__type-carte {
	outline: 2px solid var( --s-rouge );
	outline-offset: 2px;
}

html body .hl-simu__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
}

html body .hl-simu__ligne label {
	margin: 0;
	color: var( --s-velours );
	font-size: 15px;
	font-weight: 600;
}

html body .hl-simu__ligne output {
	color: var( --s-velours );
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 32px;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
	white-space: nowrap;
}

/* Curseur : piste pierre, partie remplie rouge, poignée blanche cerclée. */
html body .hl-simu input[type="range"] {
	--p: 50%;
	display: block;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

html body .hl-simu input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient( to right, var( --s-rouge ) var( --p ), var( --s-pierre-2 ) var( --p ) );
}

html body .hl-simu input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var( --s-pierre-2 );
}

html body .hl-simu input[type="range"]::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var( --s-rouge );
}

html body .hl-simu input[type="range"]::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border: 2px solid var( --s-rouge );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba( 21, 14, 16, 0.18 );
	transition: transform 0.25s var( --s-courbe ), box-shadow 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

html body .hl-simu input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var( --s-rouge );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba( 21, 14, 16, 0.18 );
}

html body .hl-simu input[type="range"]:hover::-webkit-slider-thumb {
	transform: scale( 1.1 );
}

html body .hl-simu input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: 0 0 0 8px rgba( 150, 27, 27, 0.12 );
	transform: scale( 1.15 );
}

html body .hl-simu input[type="range"]:focus-visible {
	outline: 0;
}

html body .hl-simu input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba( 150, 27, 27, 0.25 );
}

/* ---------------------------------------------------------- Résultat */

html body .hl-simu__resultat {
	display: flex;
	flex-direction: column;
	padding: 40px;
	background: var( --s-velours );
	color: var( --s-pierre-2 );
}

html body p.hl-simu__libelle {
	margin: 0 0 6px !important;
	color: var( --s-pierre-3 ) !important;
	font-size: 15px !important;
}

html body p.hl-simu__montant {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0 0 22px !important;
	color: var( --s-clair ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: clamp( 56px, 6vw, 84px ) !important;
	font-weight: 500 !important;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1 !important;
}

html body .hl-simu__montant .hl-simu__chiffre {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 500 !important;
	white-space: nowrap;
}

html body .hl-simu__montant small {
	color: var( --s-pierre-3 );
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
}

/* La barre montre la part de l'hôte face à la commission. */
html body .hl-simu__barre {
	height: 8px;
	margin: 0 0 24px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 150, 27, 27, 0.55 );
}

html body .hl-simu__barre-part {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --s-clair );
	transform-origin: left;
	transition: width 0.6s var( --s-courbe );
}

html body .hl-simu__detail {
	display: grid;
	gap: 10px;
	margin: 0 0 22px !important;
	padding: 0 0 20px;
	border-bottom: 1px solid rgba( 247, 246, 243, 0.12 );
}

html body .hl-simu__detail > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 15px;
}

html body .hl-simu__detail dt {
	color: var( --s-pierre-3 );
	font-weight: 500;
}

html body .hl-simu__detail dd {
	margin: 0;
	color: var( --s-pierre-2 );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

html body .hl-simu__detail dd[data-simu="commission"] {
	color: #e3a4a4;
}

html body .hl-simu__detail .is-total dt,
html body .hl-simu__detail .is-total dd {
	color: var( --s-clair );
	font-weight: 700;
}

html body p.hl-simu__an {
	margin: 0 0 18px !important;
	color: var( --s-pierre-2 ) !important;
	font-size: 15px !important;
}

html body .hl-simu__an strong {
	color: var( --s-clair );
	font-weight: 700;
}

html body p.hl-simu__note {
	margin: auto 0 0 !important;
	color: var( --s-pierre-5 ) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

@media ( max-width: 991px ) {
	html body .hl-simu__corps {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	html body .hl-simu__reglages,
	html body .hl-simu__resultat {
		padding: 26px 22px;
	}

	html body .hl-simu__reglages {
		gap: 28px;
	}

	html body .hl-simu__corps {
		border-radius: 24px;
	}

	html body .hl-simu__type-carte {
		padding: 12px 4px 10px;
		font-size: 13px;
	}

	html body .hl-simu__ligne output {
		font-size: 28px;
	}
}

/* ================================================ Étapes qui s'allument */

/* Devenir hôte : chiffres pierre, puis rouges ; le trait du dessus se
   dessine de gauche à droite. */
html body.hl-page-hote ol.hl-hote-etapes.hl-anim li {
	opacity: 0.35;
	transform: translateY( 8px );
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li::before {
	color: #bcb2a1;
	transition: color 0.5s ease;
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li + li {
	border-top-color: transparent;
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li + li::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 1px;
	background: #ddd7cc;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li.is-on {
	opacity: 1;
	transform: none;
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li.is-on::before {
	color: #961b1b;
}

html body.hl-page-hote ol.hl-hote-etapes.hl-anim li.is-on::after {
	transform: scaleX( 1 );
}

/* Recevoir vos paiements : pastilles qui se remplissent, fil qui descend. */
html body.hl-page-aide ol.hl-aide-etapes.hl-anim li {
	opacity: 0.4;
	transition: opacity 0.5s ease;
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li::before {
	background: #ddd7cc;
	color: #6b6151;
	transform: scale( 0.86 );
	transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li:not( :last-child )::after {
	transform: scaleY( 0 );
	transform-origin: top;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.15s;
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li.is-on {
	opacity: 1;
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li.is-on::before {
	background: #150e10;
	color: #fbfaf8;
	transform: none;
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li.is-on:last-child::before {
	background: #961b1b;
}

html body.hl-page-aide ol.hl-aide-etapes.hl-anim li.is-on:not( :last-child )::after {
	transform: scaleY( 1 );
}

/* ================================================== Cartes au défilement */

html body .hl-apparait {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: calc( var( --i, 0 ) * 90ms );
}

html body .hl-apparait.is-vu {
	opacity: 1;
	transform: none;
}

/* Photo du hero : le cadre s'ouvre une seule fois, à l'arrivée. */
html body.hl-page-hote figure.hl-hote-photo.hl-anim {
	animation: hl-hote-cadre 1.1s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.1s both;
}

html body.hl-page-hote figure.hl-hote-photo.hl-anim img {
	animation: hl-hote-zoom 1.6s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.1s both;
}

@keyframes hl-hote-cadre {
	from {
		clip-path: inset( 6% 6% 6% 6% round 28px );
		opacity: 0;
	}
	to {
		clip-path: inset( 0 0 0 0 round 28px );
		opacity: 1;
	}
}

@keyframes hl-hote-zoom {
	from {
		transform: scale( 1.08 );
	}
	to {
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-apparait,
	html body :is( ol.hl-hote-etapes, ol.hl-aide-etapes ).hl-anim li,
	html body :is( ol.hl-hote-etapes, ol.hl-aide-etapes ).hl-anim li::before,
	html body :is( ol.hl-hote-etapes, ol.hl-aide-etapes ).hl-anim li::after {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	html body.hl-page-hote figure.hl-hote-photo.hl-anim,
	html body.hl-page-hote figure.hl-hote-photo.hl-anim img {
		animation: none !important;
	}
}

/* ======================================================= Parcours 3.93
   « Comment ça se passe » : étapes à gauche, scène animée à droite. */

html body .hl-parcours {
	--c: cubic-bezier( 0.22, 1, 0.36, 1 );
	margin: 0 0 clamp( 72px, 9vw, 120px );
}

html body .hl-parcours__tete {
	max-width: 640px;
	margin: 0 0 32px;
}

html body .hl-parcours__tete h2 {
	margin: 0 0 12px !important;
}

html body .hl-parcours__tete p {
	margin: 0 !important;
	color: #6b6151;
	font-size: 17px;
	line-height: 1.6;
}

html body .hl-parcours__corps {
	display: grid;
	grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
	align-items: center;
	gap: clamp( 28px, 4vw, 56px );
}

html body ol.hl-parcours__liste {
	display: grid;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

html body .hl-parcours__etape {
	margin: 0 !important;
	padding: 0 !important;
}

html body .hl-parcours__etape::before {
	display: none !important;
}

html body button.hl-parcours__bouton {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax( 0, 1fr );
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 20px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.4s ease;
}

html body button.hl-parcours__bouton:hover {
	background: rgba( 255, 255, 255, 0.6 );
}

html body .hl-parcours__etape.is-active button.hl-parcours__bouton {
	border-color: #eeebe5;
	background: #fff;
	box-shadow: 0 16px 32px -24px rgba( 21, 14, 16, 0.35 );
}

html body button.hl-parcours__bouton:focus-visible {
	outline: 2px solid #961b1b;
	outline-offset: 2px;
}

html body .hl-parcours__numero {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #eeebe5;
	color: #6b6151;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var( --c );
}

html body .hl-parcours__etape.is-active .hl-parcours__numero {
	background: #961b1b;
	color: #fff;
	transform: scale( 1.05 );
}

html body .hl-parcours__textes {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 7px;
}

html body .hl-parcours__textes strong {
	color: #150e10;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* Le texte de l'étape active s'ouvre en hauteur. */
html body .hl-parcours__textes span {
	color: #6b6151;
	font-size: 15px;
	line-height: 1.55;
	opacity: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.5s var( --c ), opacity 0.4s ease;
}

html body .hl-parcours__etape.is-active .hl-parcours__textes span {
	max-height: 120px;
	opacity: 1;
}

html body .hl-parcours__duree {
	position: absolute;
	right: 20px;
	bottom: 0;
	left: 20px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: transparent;
}

html body .hl-parcours__duree span {
	display: block;
	width: 100%;
	height: 100%;
	background: #961b1b;
	transform: scaleX( 0 );
	transform-origin: left;
}

html body .hl-parcours.is-lecture .hl-parcours__etape.is-active .hl-parcours__duree span {
	animation: hl-parcours-duree var( --duree, 5200ms ) linear both;
}

html body .hl-parcours.is-pause .hl-parcours__etape.is-active .hl-parcours__duree span {
	animation-play-state: paused;
}

@keyframes hl-parcours-duree {
	to {
		transform: scaleX( 1 );
	}
}

/* Scène. */
html body .hl-parcours__scene {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 28px;
	background: radial-gradient( circle at 75% 15%, rgba( 150, 27, 27, 0.38 ), transparent 55% ), #150e10;
}

html body .hl-scene {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

html body .hl-scene.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s;
}

/* Carte d'annonce factice. */
html body .hl-mock-carte {
	width: min( 62%, 340px );
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 60px -30px rgba( 0, 0, 0, 0.6 );
}

html body .hl-mock-photo {
	aspect-ratio: 16 / 10;
	background: #6b6151 center / cover no-repeat;
}

html body .hl-mock-corps {
	display: grid;
	gap: 4px;
	padding: 14px 16px 16px;
}

html body .hl-mock-titre {
	overflow: hidden;
	color: #150e10;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

html body .hl-mock-lieu {
	color: #6b6151;
	font-size: 12px;
}

html body .hl-mock-bas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

html body .hl-mock-prix {
	color: #961b1b;
	font-size: 15px;
	font-weight: 700;
}

html body .hl-mock-prix small {
	color: #6b6151;
	font-weight: 500;
}

html body .hl-mock-tetes {
	display: flex;
	gap: 3px;
}

html body .hl-mock-tetes img {
	width: 22px;
	height: 22px;
	margin: 0;
}

/* Scène 1 : l'annonce se compose. */
html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-carte {
	animation: hl-m-monte 0.8s var( --c ) both;
}

html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-photo {
	animation: hl-m-photo 1s var( --c ) 0.3s both;
}

html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-titre {
	animation: hl-m-ecrit 1.1s steps( 24, end ) 0.9s both;
}

html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-lieu {
	animation: hl-m-apparait 0.5s ease 2s both;
}

html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-prix {
	animation: hl-m-pop 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 ) 2.4s both;
}

html body .hl-scene.is-active[data-scene="annonce"] .hl-mock-tetes img {
	animation: hl-m-pop 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
	animation-delay: calc( 2.8s + var( --i, 0 ) * 0.18s );
}

/* Scène 2 : relecture et tampon. */
html body .hl-scene[data-scene="relecture"] .hl-mock-carte {
	filter: saturate( 0.9 );
}

html body .hl-mock-loupe {
	position: absolute;
	top: 30%;
	left: 22%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	box-shadow: 0 12px 28px -10px rgba( 0, 0, 0, 0.5 );
	opacity: 0;
}

html body .hl-mock-loupe svg {
	width: 28px;
	height: 28px;
	fill: #150e10;
}

html body .hl-scene.is-active .hl-mock-loupe {
	animation: hl-m-loupe 2.2s var( --c ) 0.3s both;
}

html body .hl-mock-tampon {
	position: absolute;
	right: 16%;
	bottom: 20%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 2px solid #961b1b;
	border-radius: 12px;
	background: #fff;
	color: #961b1b;
	font-size: 15px;
	font-weight: 800;
	opacity: 0;
	transform: rotate( -8deg );
}

html body .hl-mock-tampon::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

html body .hl-scene.is-active .hl-mock-tampon {
	animation: hl-m-tampon 0.55s cubic-bezier( 0.34, 1.56, 0.64, 1 ) 2.3s both;
}

/* Scène 3 : une demande acceptée. */
html body .hl-mock-notif {
	position: relative;
	display: grid;
	gap: 12px;
	width: min( 72%, 380px );
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 60px -30px rgba( 0, 0, 0, 0.6 );
}

html body .hl-mock-notif__tete {
	display: flex;
	align-items: center;
	gap: 12px;
}

html body .hl-mock-notif__tete strong {
	display: block;
	color: #150e10;
	font-size: 16px;
}

html body .hl-mock-notif__tete small {
	color: #6b6151;
	font-size: 13px;
}

html body .hl-mock-avatar {
	display: grid;
	flex: 0 0 42px;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #961b1b;
	color: #fff;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	font-weight: 600;
}

html body .hl-mock-notif__dates {
	padding: 10px 12px;
	border-radius: 12px;
	background: #f7f6f3;
	color: #150e10;
	font-size: 14px;
	font-weight: 600;
}

html body .hl-mock-notif__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

html body .hl-mock-btn {
	display: grid;
	place-items: center;
	height: 40px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
}

html body .hl-mock-btn.is-non {
	border: 1px solid #ddd7cc;
	color: #6b6151;
}

html body .hl-mock-btn.is-oui {
	background: #150e10;
	color: #fff;
}

html body .hl-mock-confirme {
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	display: grid;
	place-items: center;
	height: 40px;
	border-radius: 999px;
	background: #e7efe2;
	color: #3b6b2a;
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
}

html body .hl-mock-doigt {
	position: absolute;
	top: 70%;
	left: 70%;
	width: 34px;
	height: 34px;
	border: 2px solid rgba( 255, 255, 255, 0.95 );
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.35 );
	opacity: 0;
}

html body .hl-scene.is-active .hl-mock-notif {
	animation: hl-m-descend 0.7s var( --c ) both;
}

html body .hl-scene.is-active .hl-mock-doigt {
	animation: hl-m-doigt 1.6s var( --c ) 0.9s both;
}

html body .hl-scene.is-active .hl-mock-btn.is-oui {
	animation: hl-m-appui 0.4s ease 2.2s both;
}

html body .hl-scene.is-active .hl-mock-notif__actions {
	animation: hl-m-disparait 0.3s ease 2.7s both;
}

html body .hl-scene.is-active .hl-mock-confirme {
	animation: hl-m-pop 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 ) 2.9s both;
}

/* Scène 4 : le paiement se partage. */
html body .hl-mock-paiement {
	display: grid;
	gap: 16px;
	width: min( 76%, 400px );
	padding: 24px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 60px -30px rgba( 0, 0, 0, 0.6 );
}

html body .hl-mock-paiement__total small {
	display: block;
	color: #6b6151;
	font-size: 13px;
}

html body .hl-mock-paiement__total strong {
	color: #150e10;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
}

html body .hl-mock-partage {
	display: flex;
	height: 14px;
	overflow: hidden;
	border-radius: 999px;
	background: #eeebe5;
}

html body .hl-mock-partage__part {
	width: calc( var( --part, 0.9 ) * 100% );
	height: 100%;
	background: #150e10;
}

html body .hl-mock-partage__com {
	flex: 1 1 auto;
	height: 100%;
	background: #961b1b;
}

html body .hl-mock-legende {
	display: grid;
	gap: 6px;
	color: #6b6151;
	font-size: 14px;
}

html body .hl-mock-legende > span {
	display: flex;
	align-items: center;
	gap: 8px;
}

html body .hl-mock-legende strong {
	margin-left: auto;
	color: #150e10;
}

html body .hl-mock-legende i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

html body .hl-mock-legende i.is-part {
	background: #150e10;
}

html body .hl-mock-legende i.is-com {
	background: #961b1b;
}

html body .hl-mock-banque {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #f7f6f3;
	color: #150e10;
	font-size: 14px;
	font-weight: 600;
}

html body .hl-mock-banque svg {
	width: 20px;
	height: 20px;
	fill: #961b1b;
}

html body .hl-scene.is-active .hl-mock-paiement {
	animation: hl-m-monte 0.7s var( --c ) both;
}

html body .hl-scene.is-active .hl-mock-partage__part {
	animation: hl-m-barre 1.1s var( --c ) 0.6s both;
}

html body .hl-scene.is-active .hl-mock-partage__com {
	animation: hl-m-apparait 0.4s ease 1.5s both;
}

html body .hl-scene.is-active .hl-mock-legende {
	animation: hl-m-apparait 0.5s ease 1.7s both;
}

html body .hl-scene.is-active .hl-mock-banque {
	animation: hl-m-glisse 0.6s var( --c ) 2.4s both;
}

@keyframes hl-m-monte {
	from { opacity: 0; transform: translateY( 24px ) scale( 0.97 ); }
}

@keyframes hl-m-descend {
	from { opacity: 0; transform: translateY( -28px ); }
}

@keyframes hl-m-photo {
	from { clip-path: inset( 100% 0 0 0 ); }
	to { clip-path: inset( 0 0 0 0 ); }
}

@keyframes hl-m-ecrit {
	from { clip-path: inset( 0 100% 0 0 ); }
	to { clip-path: inset( 0 0 0 0 ); }
}

@keyframes hl-m-apparait {
	from { opacity: 0; }
}

@keyframes hl-m-disparait {
	to { opacity: 0; }
}

@keyframes hl-m-pop {
	from { opacity: 0; transform: scale( 0.5 ); }
	to { opacity: 1; transform: none; }
}

@keyframes hl-m-loupe {
	0% { opacity: 0; transform: translate( 0, 0 ); }
	15% { opacity: 1; }
	45% { transform: translate( 120%, 40% ); }
	75% { opacity: 1; transform: translate( 40%, 110% ); }
	100% { opacity: 0; transform: translate( 160%, 90% ); }
}

@keyframes hl-m-tampon {
	from { opacity: 0; transform: rotate( -8deg ) scale( 1.8 ); }
	to { opacity: 1; transform: rotate( -8deg ) scale( 1 ); }
}

@keyframes hl-m-doigt {
	0% { opacity: 0; transform: translate( -60px, 50px ); }
	30% { opacity: 1; }
	70% { opacity: 1; transform: translate( 0, 0 ) scale( 1 ); }
	82% { transform: scale( 0.78 ); }
	100% { opacity: 0; transform: scale( 1.4 ); }
}

@keyframes hl-m-appui {
	50% { background: #961b1b; transform: scale( 0.94 ); }
	100% { background: #961b1b; }
}

@keyframes hl-m-barre {
	from { width: 0; }
}

@keyframes hl-m-glisse {
	from { opacity: 0; transform: translateX( -20px ); }
}

/* ============================================== Trajet de l'argent 3.93 */

html body .hl-trajet {
	margin: 8px 0 20px;
	padding: 28px 28px 32px;
	border: 1px solid #eeebe5;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 16px 32px -24px rgba( 21, 14, 16, 0.28 );
}

html body p.hl-trajet__exemple {
	margin: 0 0 24px !important;
	color: #6b6151 !important;
	font-size: 14px !important;
	font-weight: 600;
}

html body .hl-trajet__voie {
	position: relative;
}

html body ol.hl-trajet__piste {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

html body ol.hl-trajet__piste::before {
	content: "";
	position: absolute;
	top: 30px;
	right: 12.5%;
	left: 12.5%;
	height: 2px;
	background: repeating-linear-gradient( 90deg, #ddd7cc 0 8px, transparent 8px 14px );
}

html body .hl-trajet__noeud {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	color: #6b6151;
	font-size: 14px !important;
	line-height: 1.5;
	text-align: center;
}

html body .hl-trajet__noeud::before {
	display: none !important;
}

html body .hl-trajet__rond {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 8px;
	border: 1px solid #eeebe5;
	border-radius: 50%;
	background: #fbfaf8;
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

html body .hl-trajet__rond svg {
	width: 26px;
	height: 26px;
	fill: #150e10;
	transition: fill 0.4s ease;
}

html body .hl-trajet__noeud strong {
	color: #150e10;
	font-size: 15px;
	font-weight: 700;
}

html body .hl-trajet__noeud.is-on .hl-trajet__rond {
	border-color: #150e10;
	background: #150e10;
}

html body .hl-trajet__noeud.is-on .hl-trajet__rond svg {
	fill: #fff;
}

html body .hl-trajet__piece {
	position: absolute;
	top: 15px;
	left: calc( 12.5% - 16px );
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #961b1b;
	box-shadow: 0 6px 16px -4px rgba( 150, 27, 27, 0.6 );
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	opacity: 0;
	transition: left 1s cubic-bezier( 0.65, 0, 0.35, 1 ), opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

html body .hl-trajet.is-vu .hl-trajet__piece {
	opacity: 1;
}

/* Échéancier acompte et solde. */
html body .hl-echeancier {
	margin: 0 0 28px;
	padding: 26px 28px;
	border-radius: 24px;
	background: #150e10;
	color: #ddd7cc;
}

html body p.hl-echeancier__titre {
	margin: 0 0 22px !important;
	color: #fbfaf8 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 500;
	line-height: 1.2 !important;
}

html body .hl-echeancier__frise {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

html body .hl-echeancier__barre {
	grid-column: 1 / -1;
	position: relative;
	display: block;
	height: 6px;
	margin: 0 0 6px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 247, 246, 243, 0.12 );
}

html body .hl-echeancier__barre span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 90deg, #961b1b var( --acompte, 30% ), #fbfaf8 var( --acompte, 30% ) );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 2.4s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.3s;
}

html body .hl-echeancier.is-vu .hl-echeancier__barre span {
	transform: scaleX( 1 );
}

html body .hl-echeancier__jalon {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	border: 1px solid rgba( 247, 246, 243, 0.1 );
	border-radius: 18px;
	background: rgba( 247, 246, 243, 0.04 );
	opacity: 0.35;
	transform: translateY( 8px );
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
}

html body .hl-echeancier.is-vu .hl-echeancier__jalon.is-a {
	opacity: 1;
	transform: none;
	transition-delay: 0.4s;
}

html body .hl-echeancier.is-vu .hl-echeancier__jalon.is-b {
	opacity: 1;
	transform: none;
	transition-delay: 2s;
}

html body .hl-echeancier__jalon strong {
	color: #fbfaf8;
	font-size: 16px;
}

html body .hl-echeancier__jalon span {
	color: #bcb2a1;
	font-size: 14px;
}

html body .hl-echeancier__jalon em {
	margin-top: 6px;
	color: #e3a4a4;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
}

html body p.hl-echeancier__note {
	margin: 18px 0 0 !important;
	color: #948670 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* ================================== « Ce qu'il faut savoir », pleine largeur */

html body.hl-page-hote .hl-hote-savoir {
	position: static !important;
	display: grid;
	grid-template-columns: minmax( 0, 0.75fr ) minmax( 0, 1.25fr );
	gap: 24px 48px;
	margin: 0 0 clamp( 40px, 6vw, 72px );
	padding: clamp( 32px, 4vw, 52px ) !important;
	border-radius: 28px !important;
}

html body.hl-page-hote .hl-hote-savoir > h2 {
	margin: 0 !important;
	color: #fbfaf8 !important;
	font-size: clamp( 34px, 3.4vw, 46px ) !important;
	line-height: 1.05 !important;
}

html body.hl-page-hote .hl-hote-savoir > ul {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
}

html body.hl-page-hote .hl-hote-savoir > ul > li {
	margin: 0 !important;
	padding: 16px 18px 16px 44px !important;
	border: 1px solid rgba( 247, 246, 243, 0.1 ) !important;
	border-radius: 16px;
	background: rgba( 247, 246, 243, 0.04 );
	color: #ddd7cc !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

html body.hl-page-hote .hl-hote-savoir > ul > li::before {
	top: 22px !important;
	left: 20px !important;
}

html body.hl-page-hote .hl-hote-savoir > .hl-hote-action {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 8px 0 0 !important;
}

html body.hl-page-hote .hl-hote-savoir > .hl-hote-action .hl-hote-note {
	margin: 0 !important;
	max-width: 40ch;
}

/* ============================================================== Mobile */

@media ( max-width: 991px ) {
	html body .hl-parcours__corps {
		grid-template-columns: 1fr;
	}

	html body .hl-parcours__scene {
		order: -1;
		aspect-ratio: 4 / 3;
	}

	html body.hl-page-hote .hl-hote-savoir {
		grid-template-columns: 1fr;
	}

	html body.hl-page-hote .hl-hote-savoir > .hl-hote-action {
		grid-column: 1;
	}
}

@media ( max-width: 700px ) {
	html body ol.hl-trajet__piste {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	html body ol.hl-trajet__piste::before {
		top: 30px;
		bottom: 30px;
		left: 30px;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient( 180deg, #ddd7cc 0 8px, transparent 8px 14px );
	}

	html body .hl-trajet__noeud {
		display: grid;
		grid-template-columns: 60px minmax( 0, 1fr );
		column-gap: 16px;
		align-items: center;
		text-align: left;
	}

	html body .hl-trajet__rond {
		grid-row: span 2;
		margin: 0;
	}

	html body .hl-trajet__piece {
		display: none;
	}

	html body .hl-echeancier__frise {
		grid-template-columns: 1fr;
	}

	html body.hl-page-hote .hl-hote-savoir > ul {
		grid-template-columns: 1fr;
	}

	html body .hl-mock-carte,
	html body .hl-mock-notif,
	html body .hl-mock-paiement {
		width: 84%;
	}

	html body .hl-mock-paiement__total strong {
		font-size: 34px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-scene *,
	html body .hl-trajet *,
	html body .hl-echeancier * {
		animation: none !important;
		transition: none !important;
	}

	html body .hl-mock-tampon,
	html body .hl-mock-confirme {
		opacity: 1;
	}

	html body .hl-mock-notif__actions,
	html body .hl-mock-loupe,
	html body .hl-mock-doigt {
		display: none;
	}

	html body .hl-echeancier__barre span {
		transform: none;
	}

	html body .hl-echeancier__jalon {
		opacity: 1;
		transform: none;
	}
}

/* « Ce qu'il faut savoir » : titre et bouton à gauche, points à droite. */
@media ( min-width: 992px ) {
	html body.hl-page-hote .hl-hote-savoir {
		grid-template-rows: auto 1fr;
	}

	html body.hl-page-hote .hl-hote-savoir > h2 {
		grid-column: 1;
		grid-row: 1;
	}

	html body.hl-page-hote .hl-hote-savoir > ul {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	html body.hl-page-hote .hl-hote-savoir > .hl-hote-action {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		flex-direction: column;
		align-items: flex-start;
	}
}