/*
 * Merci Follain — couche d'interaction de la page d'accueil.
 *
 * Le design (couleurs, typographies, espacements, grilles) vit dans Elementor :
 * variables globales --mf-* et classes globales mf-*. Ce fichier ne gère que
 * ce qu'Elementor ne sait pas exprimer : états pilotés par le script (.is-*),
 * séquence d'ouverture, pellicule interactive et accessibilité.
 *
 * Classes posées par le plugin :
 *   html.mf-js      script d'en-tête actif (hors éditeur Elementor)
 *   html.mf-anim    script principal chargé (révélations au défilement)
 *   body.mf-experience, body.mf-mode-accueil | body.mf-mode-projection
 */

/* 1. Socle ------------------------------------------------------------- */

body.mf-experience {
	background-color: var(--mf-noir, #05080c);
}

html.mf-js {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body.mf-experience :focus-visible {
	outline: 2px solid var(--mf-cuivre, #d6a56d);
	outline-offset: 3px;
}

body.mf-experience .mf-section--papier :focus-visible {
	outline-color: var(--mf-nuit, #0b1118);
}

/* Texte réservé aux lecteurs d'écran. */
.mf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Liens placés dans des paragraphes (marque, indice de défilement). */
.mf-experience .mf-marque a,
.mf-experience .mf-hero-indice a {
	color: inherit;
	text-decoration: none;
}

/* Champs facultatifs des composants laissés vides. */
.mf-experience .mf-citation-ligne3:empty,
.mf-experience .mf-panneau-message:empty,
.mf-experience .mf-note:empty,
.mf-experience .mf-etape-credit:empty,
.mf-experience .mf-etape-statut:empty,
.mf-experience .mf-badge:empty {
	display: none;
}

/* Listes saisies dans les paragraphes Elementor. */
.mf-experience .mf-liste ul,
.mf-experience .mf-note ul {
	margin: 0.6rem 0 0;
	padding-left: 1.15rem;
}

.mf-experience .mf-liste li,
.mf-experience .mf-note li {
	margin: 0.3rem 0;
}

.mf-experience .mf-liste li::marker,
.mf-experience .mf-note li::marker {
	color: var(--mf-cuivre, #d6a56d);
}

.mf-experience .mf-note strong,
.mf-experience .mf-liste strong {
	font-weight: 700;
}

/* La barre d'administration WordPress (personnes connectées) ne masque pas l'en-tête. */
body.admin-bar .mf-entete {
	top: 32px;
}

/* La barre d'administration décale aussi la page : l'ouverture garde la hauteur de l'écran. */
body.admin-bar .mf-hero {
	min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .mf-entete {
		top: 46px;
	}

	body.admin-bar .mf-hero {
		min-height: calc(100svh - 46px);
	}
}

/* 2. En-tête ------------------------------------------------------------ */

body.mf-experience .mf-entete.is-scrolled,
body.mf-experience .mf-entete.is-open {
	background-color: rgba(11, 17, 24, 0.9);
	box-shadow: 0 1px 0 rgba(214, 165, 109, 0.2);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--mf-cuivre, #d6a56d) 20%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Lien de la page affichée dans la navigation. */
body.mf-experience .mf-nav [aria-current="page"] {
	color: var(--mf-cuivre, #d6a56d);
}

/* Menu compact jusqu'à 1279 px : en dessous, la marque et les six liens ne
   tiennent plus sur une ligne et l'en-tête passerait sur deux lignes. */
@media (max-width: 1279px) {
	html.mf-js .mf-menu-bouton {
		display: inline-flex !important;
	}

	html.mf-js .mf-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem var(--mf-gouttiere, 1.25rem) 1.25rem;
		background-color: rgba(11, 17, 24, 0.97);
		border-bottom: 1px solid rgba(214, 165, 109, 0.25);
		border-bottom: 1px solid color-mix(in srgb, var(--mf-cuivre, #d6a56d) 25%, transparent);
	}

	html.mf-js .mf-entete.is-open .mf-nav {
		display: flex;
		/* Téléphone en paysage ou zoom fort : le panneau défile au lieu de sortir de l'écran. */
		max-height: calc(100vh - var(--mf-entete-h, 4.5rem));
		max-height: calc(100dvh - var(--mf-entete-h, 4.5rem));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	html.mf-js .mf-nav .mf-lien {
		width: 100%;
		justify-content: flex-start;
		padding: 0.85rem 0;
		border-bottom: 1px solid rgba(245, 242, 236, 0.08);
		border-bottom: 1px solid color-mix(in srgb, var(--mf-creme, #f5f2ec) 8%, transparent);
	}
}

/* 3. Ouverture (hero) ------------------------------------------------------ */

@keyframes mf-fondu-entree {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mf-fondu-sortie {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes mf-apparition {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mf-travelling {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}

/* Séquence : « Viens… », « Écoute… », « Et lis mon histoire. », puis la révélation.
   Un seul mouvement à la fois, aucun clignotement. Durée totale : environ 15 s,
   dont 2 s de lecture ajoutées le 12/11 (« Et lis mon histoire. » reste plus
   longtemps à l'écran, la suite est décalée d'autant).
   Elle se joue aussi quand le système demande de réduire les animations, mais
   en fondus d'opacité seulement (voir plus bas) ; « Passer l'introduction »
   permet toujours de l'arrêter. */
@media all {
	html.mf-js .mf-hero-scenes {
		display: grid;
	}

	html.mf-js .mf-hero-scene1,
	html.mf-js .mf-hero-scene2 {
		grid-area: 1 / 1;
	}

	html.mf-js .mf-hero-scene1 {
		align-self: center;
		justify-self: center;
		animation: mf-fondu-sortie 1.1s ease-in 8.4s forwards;
	}

	html.mf-js .mf-hero-scene1 > *,
	html.mf-js .mf-hero-scene2 > *,
	html.mf-js .mf-hero-scene2 h1 > span {
		opacity: 0;
		animation: mf-fondu-entree 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	}

	html.mf-js .mf-hero-scene1 > :nth-child(1) { animation-delay: 0.7s; }
	html.mf-js .mf-hero-scene1 > :nth-child(2) { animation-delay: 2.2s; }
	html.mf-js .mf-hero-scene1 > :nth-child(3) { animation-delay: 3.7s; }

	html.mf-js .mf-hero-scene2 > :nth-child(1) { animation-delay: 9.2s; }

	/* Le titre reste en place ; ce sont ses deux lignes qui apparaissent. */
	html.mf-js .mf-hero-scene2 > h1 {
		opacity: 1;
		animation: none;
	}

	html.mf-js .mf-hero-scene2 h1 > span {
		display: inline-block;
	}

	html.mf-js .mf-hero-scene2 h1 > span:first-of-type { animation-delay: 9.6s; }
	html.mf-js .mf-hero-scene2 h1 > span:last-of-type { animation-delay: 11.3s; }
	html.mf-js .mf-hero-scene2 > :nth-child(3) { animation-delay: 13s; }
	html.mf-js .mf-hero-scene2 > :nth-child(4) { animation-delay: 13.8s; }

	html.mf-js .mf-hero-commandes {
		opacity: 0;
		animation: mf-apparition 1.2s ease-out 1.2s forwards;
	}

	html.mf-js .mf-hero-media {
		opacity: 0;
		animation: mf-apparition 2.8s ease-out 0.1s forwards;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html.mf-js .mf-hero-image {
		transform-origin: 50% 40%;
		animation: mf-travelling 15s ease-out forwards;
	}
}

/* Mouvements réduits : mêmes temps, mais fondus sans déplacement. */
@media (prefers-reduced-motion: reduce) {
	html.mf-js .mf-hero-scene1 > *,
	html.mf-js .mf-hero-scene2 > *,
	html.mf-js .mf-hero-scene2 h1 > span {
		animation-name: mf-apparition;
	}
}

/* Introduction passée par le visiteur : état final immédiat. */
.mf-hero.is-skipped .mf-hero-scene1 {
	display: none;
}

.mf-hero.is-skipped,
.mf-hero.is-skipped * {
	animation: none !important;
}

.mf-hero.is-skipped .mf-hero-media,
.mf-hero.is-skipped .mf-hero-commandes,
.mf-hero.is-skipped .mf-hero-scene2 > *,
.mf-hero.is-skipped .mf-hero-scene2 h1 > span {
	opacity: 1 !important;
	transform: none !important;
}

/* « Passer l'introduction » disparaît quand il n'y a plus rien à passer. */
.mf-hero.is-done #mf-passer {
	display: none !important;
}

/* Contrôle du son sans fichier audio : visible mais signalé comme indisponible. */
#mf-son[aria-disabled="true"] {
	opacity: 0.65;
	cursor: default;
}

/* 4. Citations : révélation lente au défilement --------------------------- */

/* En projection, chaque scène gère l'apparition de sa citation (mf-projection.css).
   Ailleurs : fondu dans tous les cas, montée de 18 px si les mouvements sont permis. */
html.mf-anim:not(.mf-mode-projection) .mf-citation > * {
	opacity: 0;
	transition:
		opacity 1.6s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.mf-anim .mf-citation.is-visible > * {
	opacity: 1;
	transform: none;
}

html.mf-anim .mf-citation.is-visible > :nth-child(2) { transition-delay: 1.3s; }
html.mf-anim .mf-citation.is-visible > :nth-child(3) { transition-delay: 2.5s; }
html.mf-anim .mf-citation.is-visible > :nth-child(4) { transition-delay: 3.4s; }

@media (prefers-reduced-motion: no-preference) {
	html.mf-anim:not(.mf-mode-projection) .mf-citation:not(.is-visible) > * {
		transform: translateY(18px);
	}
}

/* 5. Pellicule chronologique ------------------------------------------------
   Sans script (ou dans l'éditeur), les étapes s'affichent en grille de cartes.
   Le script ajoute .is-enhanced : une scène principale au-dessus, une bande
   de pellicule horizontale en dessous, des flèches et une progression. */

.mf-pellicule.is-enhanced .mf-pellicule-bande {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.75rem;
	padding: 1.15rem 0.9rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--mf-cuivre, #d6a56d) var(--mf-noir, #05080c);
	background-color: var(--mf-noir, #05080c);
	background-image:
		repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.18) 0 10px, transparent 10px 22px),
		repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.18) 0 10px, transparent 10px 22px);
	background-image:
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--mf-creme, #f5f2ec) 18%, transparent) 0 10px, transparent 10px 22px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--mf-creme, #f5f2ec) 18%, transparent) 0 10px, transparent 10px 22px);
	background-repeat: no-repeat;
	background-size: 100% 5px, 100% 5px;
	background-position: 0 5px, 0 calc(100% - 5px);
	border-radius: 4px;
}

.mf-pellicule.is-enhanced .mf-etape {
	flex: 0 0 clamp(9.5rem, 15vw, 12.5rem);
	gap: 0.35rem;
	padding: 0 0 0.65rem;
	scroll-snap-align: start;
	cursor: pointer;
	background-color: var(--mf-nuit, #0b1118);
	border-color: rgba(245, 242, 236, 0.12);
	border-color: color-mix(in srgb, var(--mf-creme, #f5f2ec) 12%, transparent);
	transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Seule la vignette des étapes non sélectionnées est atténuée : le texte garde
   un contraste suffisant (l'atténuation de tout l'onglet donnait 4,42:1). */
.mf-pellicule.is-enhanced .mf-etape .mf-etape-image {
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

.mf-pellicule.is-enhanced .mf-etape:hover .mf-etape-image,
.mf-pellicule.is-enhanced .mf-etape:focus-visible .mf-etape-image,
.mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] .mf-etape-image {
	opacity: 1;
}

.mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
	opacity: 1;
	border-color: var(--mf-cuivre, #d6a56d);
	box-shadow: inset 0 0 0 1px var(--mf-cuivre, #d6a56d);
}

.mf-pellicule.is-enhanced .mf-etape:focus-visible {
	outline: 2px solid var(--mf-creme, #f5f2ec);
	outline-offset: 2px;
}

.mf-pellicule.is-enhanced .mf-etape .mf-etape-resume,
.mf-pellicule.is-enhanced .mf-etape .mf-etape-recit,
.mf-pellicule.is-enhanced .mf-etape .mf-etape-credit,
.mf-pellicule.is-enhanced .mf-etape .mf-etape-statut {
	display: none;
}

.mf-pellicule.is-enhanced .mf-etape .mf-etape-image {
	aspect-ratio: 3 / 2;
}

.mf-pellicule.is-enhanced .mf-etape .mf-etape-repere {
	padding: 0.25rem 0.75rem 0;
	font-size: 1.05rem;
}

.mf-pellicule.is-enhanced .mf-etape .mf-etape-titre {
	padding: 0 0.75rem;
	font-family: var(--mf-police-texte, sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Scène principale. */
.mf-pellicule__scene {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: center;
	min-height: clamp(18rem, 40vw, 33rem);
}

.mf-pellicule__visuel {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--mf-noir, #05080c);
	border-radius: 4px;
}

body.mf-experience .mf-pellicule__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(0.12) saturate(0.9) contrast(1.05);
}

/* « Demain » : le plan du projet (fichier « plan-projet… ») est montré en entier
   sur fond blanc, pas recadré (12/11). */
body.mf-experience :is(.mf-pellicule__visuel, .mf-etape) img[src*="plan-projet"] {
	object-fit: contain;
	background-color: #ffffff;
}

/* « 2004 » : photo très large, cadrée sur la maison plutôt qu'au centre (12/11). */
body.mf-experience :is(.mf-pellicule__visuel, .mf-etape) img[src*="maison-follain-2004"] {
	object-position: 30% 50%;
}

.mf-pellicule__visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 120px rgba(5, 8, 12, 0.7);
}

.mf-pellicule__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
}

body.mf-experience .mf-pellicule__texte .mf-etape-repere,
body.mf-experience .mf-pellicule__texte .mf-etape-titre,
body.mf-experience .mf-pellicule__texte .mf-etape-resume,
body.mf-experience .mf-pellicule__texte .mf-etape-recit,
body.mf-experience .mf-pellicule__texte .mf-etape-credit {
	padding: 0;
}

body.mf-experience .mf-pellicule__texte .mf-etape-repere {
	font-size: clamp(2.6rem, 5vw, 4.25rem);
	line-height: 0.9;
}

body.mf-experience .mf-pellicule__texte .mf-etape-titre {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

body.mf-experience .mf-pellicule__texte .mf-etape-resume {
	font-size: 1.125rem;
}

body.mf-experience .mf-pellicule__texte .mf-etape-statut {
	margin: 0;
}

.mf-pellicule__visuel img,
.mf-pellicule__texte {
	transition: opacity 0.5s ease;
}

.mf-pellicule__scene.is-changing .mf-pellicule__visuel img,
.mf-pellicule__scene.is-changing .mf-pellicule__texte {
	opacity: 0;
}

/* Flèches et progression. */
.mf-pellicule__commandes {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mf-pellicule__fleches {
	display: flex;
	gap: 0.5rem;
}

.mf-pellicule__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	font: 600 1.15rem/1 var(--mf-police-repere, sans-serif);
	color: var(--mf-creme, #f5f2ec);
	background-color: rgba(5, 8, 12, 0.5);
	border: 1px solid rgba(245, 242, 236, 0.35);
	border: 1px solid color-mix(in srgb, var(--mf-creme, #f5f2ec) 35%, transparent);
	border-radius: 2px;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.mf-pellicule__fleche:hover {
	color: var(--mf-cuivre, #d6a56d);
	border-color: var(--mf-cuivre, #d6a56d);
}

.mf-pellicule__fleche:disabled,
.mf-pellicule__fleche[aria-disabled="true"]:not(:focus-visible) {
	opacity: 0.35;
	cursor: default;
}

.mf-pellicule__barre {
	position: relative;
	flex: 1;
	height: 2px;
	overflow: hidden;
	background-color: rgba(245, 242, 236, 0.14);
	background-color: color-mix(in srgb, var(--mf-creme, #f5f2ec) 14%, transparent);
}

.mf-pellicule__barre > span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background-color: var(--mf-cuivre, #d6a56d);
	transition: width 0.5s ease;
}

.mf-pellicule__progression {
	margin: 0;
	font: 600 0.875rem/1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mf-acier, #98a5b0);
	white-space: nowrap;
}

/* Mobile : une photographie à la fois, repères en pastilles qui passent à la
   ligne. Aucun défilement horizontal. */
@media (max-width: 767px) {
	.mf-pellicule__scene {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.mf-pellicule.is-enhanced .mf-pellicule-bande {
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0;
		overflow: visible;
		background: none;
	}

	.mf-pellicule.is-enhanced .mf-etape {
		flex: 0 0 auto;
		padding: 0.6rem 0.95rem;
		border-radius: 999px;
		opacity: 1;
	}

	.mf-pellicule.is-enhanced .mf-etape .mf-etape-image,
	.mf-pellicule.is-enhanced .mf-etape .mf-etape-titre {
		display: none;
	}

	.mf-pellicule.is-enhanced .mf-etape .mf-etape-repere {
		padding: 0;
		font-size: 0.95rem;
	}

	.mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
		background-color: var(--mf-cuivre, #d6a56d);
	}

	.mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] .mf-etape-repere {
		color: var(--mf-nuit, #0b1118);
	}
}

/* 6. Accueil vivant (niveau « cinéma ») -------------------------------------
   Apparitions au défilement, titres mot à mot, traits dessinés, survols,
   parallaxe, lueur de l'ouverture et barre de lecture. Les classes .mf-revele,
   .mf-mot et .mf-parallaxe-fond sont posées par mf-experience.js : sans script,
   tout reste visible et immobile. Quand le système demande de réduire les
   animations, il ne reste que des fondus d'opacité (choix de la propriétaire,
   conforme WCAG) : ni montée, ni dévoilement, ni parallaxe, ni oscillation.
   Aucune animation ne dure plus de 5 s sans geste du visiteur, hormis
   l'ouverture, que « Passer l'introduction » arrête. */

/* Barre de lecture : fin trait rouge proportionnel au défilement. */
.mf-progression-lecture {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 101;
	height: 3px;
	background-color: var(--mf-rouge, #e94a2d);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

body.admin-bar .mf-progression-lecture {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .mf-progression-lecture {
		top: 46px;
	}
}

/* Lueur chaude (jaune très doux) derrière le titre de l'ouverture. */
body.mf-experience .mf-hero::before {
	content: "";
	position: absolute;
	top: 46%;
	left: 50%;
	width: min(70vw, 62rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(249, 177, 51, 0.32), rgba(249, 177, 51, 0));
	pointer-events: none;
}

/* Survols : cartes et panneaux se soulèvent, boutons et liens réagissent.
   Les blocs animés reprennent ces transitions dans la règle .mf-revele. */
body.mf-experience :is(.mf-carte, .mf-panneau, .mf-episode, .mf-tableau-col) {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

body.mf-experience .mf-bouton {
	transition:
		background-color 0.3s,
		color 0.3s,
		border-color 0.3s,
		transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.3s;
}

@media (hover: hover) {
	body.mf-experience :is(.mf-carte, .mf-panneau, .mf-episode, .mf-tableau-col):is(:hover, :focus-within) {
		box-shadow: 0 22px 40px -24px rgba(38, 38, 38, 0.45);
	}
}

/* Liens du menu : un trait se dessine sous le lien survolé ou en cours. */
body.mf-experience .mf-nav .mf-lien {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: color 0.25s, background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.mf-experience .mf-nav .mf-lien:is(:hover, :focus-visible, [aria-current="page"]) {
	background-size: 100% 2px;
}

/* Apparitions au défilement (fondu ; la montée s'ajoute plus bas). */
html.mf-anim .mf-revele {
	opacity: 0;
	transition:
		opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mf-delai, 0s),
		translate 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mf-delai, 0s),
		clip-path 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mf-delai, 0s),
		scale 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mf-delai, 0s),
		transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.45s ease;
}

html.mf-anim .mf-revele.is-visible {
	opacity: 1;
}

/* Titres : le titre reste en place, ses mots apparaissent l'un après l'autre. */
html.mf-anim .mf-revele--mots {
	opacity: 1;
}

html.mf-anim .mf-revele--mots .mf-mot {
	display: inline-block;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 70ms);
}

html.mf-anim .mf-revele--mots.is-visible .mf-mot {
	opacity: 1;
}

/* Traits dessinés : filet rouge des axes et des valeurs, barre jaune des panneaux. */
body.mf-experience .mf-valeur {
	position: relative;
}

html.mf-anim :is(.mf-valeur, .mf-panneau).mf-revele::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	opacity: 0;
	transform-origin: 0 50%;
	pointer-events: none;
	transition:
		opacity 0.9s ease calc(var(--mf-delai, 0s) + 0.35s),
		transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mf-delai, 0s) + 0.35s);
}

html.mf-anim .mf-valeur.mf-revele::before {
	top: -1px;
	height: 2px;
	background-color: var(--mf-rouge, #e94a2d);
}

html.mf-anim .mf-panneau.mf-revele::before {
	top: -2px;
	height: 4px;
	background-color: var(--mf-jaune, #f9b133);
}

html.mf-anim :is(.mf-valeur, .mf-panneau).mf-revele.is-visible::before {
	opacity: 1;
}

/* Avec mouvements autorisés : montées, dévoilements, dessins, parallaxe. */
@media (prefers-reduced-motion: no-preference) {
	html.mf-anim .mf-revele {
		translate: 0 40px;
	}

	html.mf-anim .mf-revele.is-visible {
		translate: 0 0;
	}

	/* Images : dévoilées de bas en haut, avec un léger recul. */
	html.mf-anim .mf-revele--image {
		translate: none;
		clip-path: inset(100% 0 0 0);
		scale: 1.06;
	}

	html.mf-anim .mf-revele--image.is-visible {
		clip-path: inset(0 0 0 0);
		scale: 1;
	}

	html.mf-anim .mf-revele--mots {
		translate: none;
	}

	html.mf-anim .mf-revele--mots .mf-mot {
		translate: 0 0.55em;
		transition:
			opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 70ms),
			translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 70ms);
	}

	html.mf-anim .mf-revele--mots.is-visible .mf-mot {
		translate: 0 0;
	}

	html.mf-anim :is(.mf-valeur, .mf-panneau).mf-revele::before {
		transform: scaleX(0);
	}

	html.mf-anim :is(.mf-valeur, .mf-panneau).mf-revele.is-visible::before {
		transform: scaleX(1);
	}

	@media (hover: hover) {
		body.mf-experience :is(.mf-carte, .mf-panneau, .mf-episode, .mf-tableau-col):is(:hover, :focus-within) {
			transform: translateY(-6px);
		}

		body.mf-experience .mf-bouton:is(:hover, :focus-visible) {
			transform: translateY(-2px);
			box-shadow: 0 10px 20px -12px rgba(38, 38, 38, 0.5);
		}
	}

	/* Parallaxe : image de fond agrandie pour que son cadre ne montre aucun bord. */
	.mf-parallaxe-fond {
		scale: 1.18;
	}

	/* La lueur respire pendant l'introduction (2 × 7,6 s), puis se repose. */
	html.mf-js .mf-hero::before {
		animation: mf-respiration 7.6s ease-in-out 2 both;
	}

	/* « Découvrir la suite » invite trois fois à descendre, puis s'arrête. */
	.mf-hero.is-done .mf-hero-indice a {
		display: inline-block;
		animation: mf-oscillation 1.6s ease-in-out 0.6s 3;
	}
}

@keyframes mf-respiration {
	0%,
	100% {
		opacity: 0.55;
		scale: 0.92;
	}

	50% {
		opacity: 1;
		scale: 1.06;
	}
}

@keyframes mf-oscillation {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 6px;
	}
}

/* Impression : tout est visible, sans barre de lecture. */
@media print {
	html.mf-anim .mf-revele,
	html.mf-anim .mf-mot {
		opacity: 1 !important;
		clip-path: none !important;
		translate: none !important;
		scale: none !important;
	}

	.mf-progression-lecture {
		display: none;
	}
}

/* 7. Mouvements réduits ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html.mf-js {
		scroll-behavior: auto;
	}

	/* Tout mouvement est coupé, sauf les fondus voulus : introduction de
	   l'ouverture et apparitions au défilement (opacité seulement).
	   html.dj-mouvement (thème « déjanté » actif et pas en pause, voir
	   mf-dejante.js) lève cette coupure. */
	html:not(.dj-mouvement) .mf-experience *:not(.mf-hero, .mf-hero *, .mf-revele, .mf-mot),
	html:not(.dj-mouvement) .mf-experience *:not(.mf-hero, .mf-hero *, .mf-revele, .mf-mot)::before,
	html:not(.dj-mouvement) .mf-experience *:not(.mf-hero, .mf-hero *, .mf-revele, .mf-mot)::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}

	/* Citations (hors projection) : leur fondu est conservé, sans montée. */
	html:not(.dj-mouvement) body.mf-experience:not(.mf-mode-projection) .mf-citation > * {
		transition-property: opacity !important;
		transition-duration: 1.6s !important;
	}

	html:not(.dj-mouvement) body.mf-experience:not(.mf-mode-projection) .mf-citation.is-visible > :nth-child(2) { transition-delay: 1.3s !important; }
	html:not(.dj-mouvement) body.mf-experience:not(.mf-mode-projection) .mf-citation.is-visible > :nth-child(3) { transition-delay: 2.5s !important; }
	html:not(.dj-mouvement) body.mf-experience:not(.mf-mode-projection) .mf-citation.is-visible > :nth-child(4) { transition-delay: 3.4s !important; }
}