/**
 * Merci Follain — thème « déjanté » aux couleurs de la marque (tout le site sauf la projection).
 *
 * Demande du 29/10 : site très visuel aux codes couleurs de Merci Follain
 * (merci-follaind.com, kit Elementor « Merci Follain ») : bleu nuit #0F1B2D,
 * rouge #E94A2D, jaune #F9B133, turquoise #0E7C74, magenta #E60D7F, blanc
 * cassé #FAF8F5 ; titres Manrope 800, texte Inter. Image d'accueil bien
 * visible, porte de garage sur « Découvrir la suite », animations partout.
 *
 * Imprimée après mf-theme-clair.css, qu'elle remplace visuellement : à
 * spécificité égale, ses règles l'emportent. Elle réattribue les jetons
 * --mf-* d'Elementor par contexte (clair, sombre, jaune, turquoise) : les
 * classes globales mf-* suivent sans être modifiées dans Elementor.
 * Les effets animés sont posés par mf-dejante.js (classes dj-*).
 *
 * Mouvement : tout ce qui se déplace dépend de html.dj-mouvement, posé dans
 * l'en-tête de la page pour tous les visiteurs, même si le système demande de
 * réduire les animations (choix de la propriétaire). Le bouton « Pause » le
 * remplace par html.dj-calme : il ne reste alors que des fondus.
 *
 * Désactiver : add_filter( 'mf_experience_dejante', '__return_false' ).
 *
 * Contrastes (WCAG AA) : bleu nuit sur blanc cassé 16:1, sur jaune 10:1 ;
 * blanc cassé sur bleu nuit 16:1, sur turquoise 4,8:1 ; texte doux #5E6C82
 * sur blanc cassé 5:1 ; rouge foncé #B23219 sur blanc cassé 5,9:1 ; #B9C5D6
 * sur bleu nuit 9,6:1. Le rouge vif, le magenta et le jaune sur fond clair
 * ne servent qu'aux décors, aux grands titres et aux aplats.
 *
 * Sommaire : 1. Polices  2. Jetons  3. Contextes  4. Typographie
 * 5. Boutons  6. Cartes  7. En-tête et pied  8. Ouverture  9. Sections
 * 10. Pellicule  11. Apparitions  12. Effets (dj-*)  13. Porte de garage
 * 14. Mouvements réduits, pause, impression.
 */

/* 1. Polices de la marque (fichiers locaux : aucun appel à un service tiers) */

@font-face {
	font-family: "MF Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "MF Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "MF Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "MF Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Jetons de la marque ------------------------------------------------- */

body.mf-dj {
	--dj-nuit: #0f1b2d;
	--dj-nuit-2: #1a2b45;
	--dj-nuit-3: #08111f;
	/* Rouge et jaune suivent les variables Elementor mf-rouge et mf-jaune ; les
	   autres couleurs de la marque n'existent pas dans le kit et se règlent ici. */
	--dj-rouge: var(--mf-rouge, #e94a2d);
	--dj-rouge-bouton: #d23f23;
	--dj-rouge-fonce: #b23219;
	--dj-jaune: var(--mf-jaune, #f9b133);
	--dj-turquoise: #0e7c74;
	--dj-turquoise-fonce: #0a5f59;
	--dj-magenta: #e60d7f;
	--dj-creme: #faf8f5;
	--dj-gris: #e2e2e2;
	--dj-texte-doux: #5e6c82;
	--dj-doux-sombre: #b9c5d6;
	--dj-orange: #f17e30;
	--dj-flamme: linear-gradient(100deg, var(--dj-rouge) 0%, var(--dj-orange) 45%, var(--dj-jaune) 100%);
	--dj-vague: linear-gradient(90deg, var(--dj-turquoise), var(--dj-magenta));
	--dj-arc: linear-gradient(90deg, var(--dj-rouge), var(--dj-jaune), var(--dj-magenta), var(--dj-turquoise), var(--dj-rouge));
	--dj-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dj-doux: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dj-rayon: 22px;
	--dj-trait: 3px;

	/* Polices : Manrope pour les titres et repères, Inter pour le texte. */
	--mf-police-titre: "MF Manrope", "Manrope", system-ui, sans-serif;
	--mf-police-texte: "MF Inter", "Inter", system-ui, sans-serif;
	--mf-police-repere: "MF Manrope", "Manrope", system-ui, sans-serif;

	background-color: var(--dj-creme);
}

body.mf-dj.mf-experience:not(.mf-mode-projection),
body.mf-dj.elementor-page:not(.mf-mode-projection) {
	background-color: var(--dj-creme);
}

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

/* Titres qui reçoivent le focus par script (arrivée de la porte de garage,
   fin de l'introduction) : pas de cadre, le lecteur d'écran annonce le titre. */
body.mf-dj :is(h1, h2, h3)[tabindex="-1"]:focus {
	outline: none;
}

body.mf-dj ::selection {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
}

/* 3. Contextes : les jetons --mf-* d'Elementor reçoivent un rôle par fond --- */

/* Clair (blanc cassé, cartes blanches). */
body.mf-dj,
body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-valeur, .mf-episode) {
	--mf-nuit: var(--dj-nuit);
	--mf-creme: var(--dj-nuit);
	--mf-acier: var(--dj-texte-doux);
	--mf-noir: var(--dj-nuit);
	--mf-anthracite: var(--dj-nuit);
	--mf-cuivre: var(--dj-rouge-fonce);
	--mf-cuivre-fonce: var(--dj-rouge-fonce);
	--mf-braise: var(--dj-rouge);
	--mf-texte: var(--dj-nuit);
	--mf-texte-doux: var(--dj-texte-doux);
	--mf-gris: var(--dj-creme);
	--mf-gris-clair: #ffffff;
	--mf-gris-soutenu: var(--dj-gris);
	--mf-rouge-fonce: var(--dj-rouge-fonce);
	--dj-ombre-bouton: var(--dj-nuit);
}

/* Sombre (bleu nuit) : ouverture, sections noires et anthracite, en-tête, pied. */
body.mf-dj :is(.mf-hero, .mf-section--noir, .mf-section--anthracite, #solutions, .mf-entete, header.mf-rangee, .mf-pellicule-bande, .dj-sombre) {
	--mf-creme: var(--dj-creme);
	--mf-acier: var(--dj-doux-sombre);
	--mf-anthracite: var(--dj-nuit-2);
	--mf-cuivre: var(--dj-jaune);
	--mf-cuivre-fonce: var(--dj-jaune);
	--mf-texte: var(--dj-creme);
	--mf-texte-doux: var(--dj-doux-sombre);
	--dj-ombre-bouton: var(--dj-rouge);
}

/* Jaune (la philosophie) et papier (pages de récit). */
body.mf-dj :is(#philosophie, .mf-section--papier) {
	--mf-creme: var(--dj-nuit);
	--mf-nuit: var(--dj-nuit);
	--mf-acier: #33425a;
	--mf-anthracite: var(--dj-nuit);
	--mf-cuivre: var(--dj-nuit);
	--mf-cuivre-fonce: var(--dj-nuit);
	--mf-texte: var(--dj-nuit);
	--mf-texte-doux: #33425a;
	--dj-ombre-bouton: var(--dj-nuit);
}

body.mf-dj .mf-section--papier:not(#philosophie) {
	--mf-cuivre: var(--dj-rouge-fonce);
	--mf-cuivre-fonce: var(--dj-rouge-fonce);
	--mf-acier: var(--dj-texte-doux);
	--mf-texte-doux: var(--dj-texte-doux);
}

/* Turquoise (rejoindre l'aventure) : le blanc cassé est le seul texte lisible. */
body.mf-dj #participer {
	--mf-creme: var(--dj-creme);
	--mf-acier: var(--dj-creme);
	--mf-anthracite: var(--dj-nuit);
	--mf-cuivre: var(--dj-creme);
	--mf-cuivre-fonce: var(--dj-creme);
	--mf-texte: var(--dj-creme);
	--mf-texte-doux: var(--dj-creme);
	--dj-ombre-bouton: var(--dj-nuit);
}

/* Les cartes posées dans ces sections reviennent au contexte clair. */
body.mf-dj :is(#solutions, #participer, #philosophie, .mf-section--noir, .mf-section--anthracite) :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-valeur, .mf-episode) {
	--mf-creme: var(--dj-nuit);
	--mf-nuit: var(--dj-nuit);
	--mf-acier: var(--dj-texte-doux);
	--mf-anthracite: var(--dj-nuit);
	--mf-cuivre: var(--dj-rouge-fonce);
	--mf-cuivre-fonce: var(--dj-rouge-fonce);
	--mf-texte: var(--dj-nuit);
	--mf-texte-doux: var(--dj-texte-doux);
	--dj-ombre-bouton: var(--dj-nuit);
}

/* 4. Typographie ---------------------------------------------------------- */

body.mf-dj .elementor {
	font-family: var(--mf-police-texte);
}

body.mf-dj :is(.mf-titre-display, .mf-titre-section, .mf-titre-carte, .mf-citation-ligne1, .mf-panneau-nom, .mf-etape-titre, .mf-marque) {
	font-family: var(--mf-police-titre);
	font-weight: 800;
	font-style: normal;
}

body.mf-dj .mf-titre-section {
	position: relative;
	font-size: clamp(2.3rem, 5.2vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* Un trait de flamme se dessine sous chaque titre de section. */
body.mf-dj .mf-titre-section::after {
	content: "";
	display: block;
	width: clamp(4rem, 9vw, 7rem);
	height: 0.32em;
	max-height: 14px;
	margin-top: 0.3em;
	border-radius: 999px;
	background-image: var(--dj-flamme);
	transform-origin: 0 50%;
}

body.mf-dj .mf-titre-carte {
	font-size: clamp(1.3rem, 1.9vw, 1.7rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

body.mf-dj .mf-texte {
	font-family: var(--mf-police-texte);
	line-height: 1.7;
}

body.mf-dj .mf-texte--lead {
	font-weight: 400;
	font-size: clamp(1.15rem, 1.55vw, 1.4rem);
	line-height: 1.55;
}

body.mf-dj .mf-texte--fort {
	font-family: var(--mf-police-titre);
	font-weight: 800;
	font-style: normal;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body.mf-dj .mf-legende {
	font-family: var(--mf-police-texte);
	font-size: 0.875rem;
}

/* Surtitres de section : autocollants jaunes légèrement de travers. */
body.mf-dj :is(.mf-pile, .mf-hero-scene2) > .mf-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: fit-content;
	padding: 0.55rem 1rem 0.5rem;
	font-family: var(--mf-police-repere);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: 2px solid var(--dj-nuit);
	border-radius: 999px;
	box-shadow: 3px 3px 0 var(--dj-nuit);
	--dj-penche: -2deg;
	rotate: var(--dj-penche);
}

body.mf-dj :is(.mf-pile, .mf-hero-scene2) > .mf-kicker::before {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: var(--dj-rouge);
	box-shadow: 0 0 0 2px var(--dj-nuit);
}

body.mf-dj :is(#philosophie, .mf-section--papier) .mf-pile > .mf-kicker {
	color: var(--dj-jaune);
	background-color: var(--dj-nuit);
	border-color: var(--dj-nuit);
	box-shadow: 3px 3px 0 var(--dj-rouge);
}

body.mf-dj :is(.mf-section--noir, .mf-section--anthracite, #solutions, .mf-hero) :is(.mf-pile, .mf-hero-scene2) > .mf-kicker {
	box-shadow: 3px 3px 0 var(--dj-rouge);
	border-color: var(--dj-jaune);
}

body.mf-dj .mf-ligne-titre {
	font-family: var(--mf-police-repere);
	font-weight: 800;
	letter-spacing: 0.14em;
}

body.mf-dj .mf-badge {
	font-family: var(--mf-police-repere);
	font-weight: 800;
	letter-spacing: 0.1em;
	border-width: 2px;
	border-color: currentColor;
}

/* Badges « à l'étude », « bientôt » : autocollants penchés. */
body.mf-dj .mf-badge--cuivre {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-nuit);
	box-shadow: 2px 2px 0 var(--dj-nuit);
	--dj-penche: -3deg;
	rotate: var(--dj-penche);
	transition: rotate 0.4s var(--dj-ressort), scale 0.4s var(--dj-ressort);
}

body.mf-dj .mf-note {
	color: var(--dj-nuit);
	background-color: rgba(255, 255, 255, 0.75);
	border-left: 6px solid var(--dj-magenta);
	border-radius: 0 14px 14px 0;
}

body.mf-dj :is(.mf-section--noir, .mf-section--anthracite, #solutions) .mf-note {
	color: var(--dj-creme);
	background-color: rgba(255, 255, 255, 0.07);
}

/* Note posée dans une carte blanche, même au sein d'une section sombre. */
body.mf-dj :is(#solutions, .mf-section) :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-valeur) .mf-note {
	color: var(--dj-nuit);
	background-color: color-mix(in srgb, var(--dj-jaune) 16%, #ffffff);
}

body.mf-dj .mf-liste li::marker,
body.mf-dj .mf-note li::marker {
	color: var(--dj-rouge);
}

/* Grands chiffres (01, 02…) en dégradé de flamme. */
body.mf-dj :is(.mf-numero, .mf-valeur > .mf-kicker) {
	display: inline-block;
	width: fit-content;
	padding: 0;
	font-family: var(--mf-police-titre);
	font-weight: 800;
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--dj-rouge-fonce);
	background: none;
	border: 0;
	box-shadow: none;
	rotate: none;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	/* Rouge foncé, rouge puis magenta : au moins 3:1 sur les cartes blanches
	   (le jaune de la flamme y descendrait à 1,85:1). */
	body.mf-dj :is(.mf-numero, .mf-valeur > .mf-kicker) {
		color: transparent;
		background-image: linear-gradient(100deg, var(--dj-rouge-fonce), var(--dj-rouge) 55%, var(--dj-magenta));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	body.mf-dj #philosophie .mf-valeur > .mf-kicker {
		background-image: linear-gradient(100deg, var(--dj-rouge-fonce), var(--dj-magenta));
	}
}

/* Mots en capitales d'un titre (MERCI FOLLAIN) : dégradé de flamme vivant. */
body.mf-dj .dj-mot-feu {
	color: var(--dj-rouge);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	body.mf-dj .dj-mot-feu {
		color: transparent;
		background-image: linear-gradient(100deg, var(--dj-rouge), var(--dj-orange), var(--dj-jaune), var(--dj-orange), var(--dj-rouge));
		background-size: 300% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* 5. Boutons -------------------------------------------------------------- */

body.mf-dj .mf-bouton {
	position: relative;
	min-height: 48px;
	padding: 0.95rem 1.6rem;
	font-family: var(--mf-police-repere);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 999px;
	box-shadow: 5px 5px 0 var(--dj-ombre-bouton, var(--dj-nuit));
	transform: translate(calc(var(--dj-mx, 0px) - var(--dj-leve, 0px)), calc(var(--dj-my, 0px) - var(--dj-leve, 0px)));
	transition:
		background-color 0.25s,
		color 0.25s,
		border-color 0.25s,
		box-shadow 0.3s var(--dj-ressort),
		transform 0.3s var(--dj-ressort);
}

body.mf-dj .mf-bouton:is(:hover, :focus-visible) {
	--dj-leve: 3px;
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-nuit);
	box-shadow: 9px 9px 0 var(--dj-ombre-bouton, var(--dj-nuit));
}

body.mf-dj .mf-bouton:active {
	--dj-leve: -3px;
	box-shadow: 0 0 0 var(--dj-ombre-bouton, var(--dj-nuit));
	transition-duration: 0.08s;
}

body.mf-dj :is(.mf-section--noir, .mf-section--anthracite, #solutions, .mf-hero) .mf-bouton:not(.mf-bouton--fantome, .mf-bouton--discret) {
	border-color: var(--dj-jaune);
}

/* Bouton fantôme : contour épais, se remplit de jaune au survol. */
body.mf-dj .mf-bouton--fantome {
	color: var(--mf-creme);
	background-color: transparent;
	border-color: currentColor;
	box-shadow: 5px 5px 0 color-mix(in srgb, currentColor 25%, transparent);
}

body.mf-dj .mf-bouton--fantome:is(:hover, :focus-visible) {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-nuit);
	box-shadow: 9px 9px 0 var(--dj-ombre-bouton, var(--dj-nuit));
}

/* Bouton discret (son, passer l'introduction, menu) : pastille de verre. */
body.mf-dj .mf-bouton--discret {
	min-height: 44px;
	padding: 0.6rem 1.05rem;
	font-size: 0.8rem;
	color: var(--dj-creme);
	background-color: rgba(15, 27, 45, 0.55);
	border: 2px solid rgba(250, 248, 245, 0.45);
	box-shadow: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.mf-dj .mf-bouton--discret:is(:hover, :focus-visible) {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-jaune);
	box-shadow: 4px 4px 0 var(--dj-rouge);
}

/* La règle « soulèvement » de mf-experience.css est remplacée par l'aimant. */
body.mf-dj.mf-experience .mf-bouton:is(:hover, :focus-visible) {
	transform: translate(calc(var(--dj-mx, 0px) - var(--dj-leve, 0px)), calc(var(--dj-my, 0px) - var(--dj-leve, 0px)));
}

/* 6. Cartes : blanches, cernées de bleu nuit, ombre décalée colorée -------- */

body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation) {
	position: relative;
	isolation: isolate;
	color: var(--dj-nuit);
	background-color: #ffffff;
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: var(--dj-rayon);
	box-shadow: 9px 9px 0 var(--dj-ombre, var(--dj-rouge));
	transform: perspective(900px) rotateX(var(--dj-rx, 0deg)) rotateY(var(--dj-ry, 0deg)) translateY(var(--dj-ty, 0px));
	transition:
		opacity 1s var(--dj-doux) var(--mf-delai, 0s),
		translate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		rotate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		scale 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		clip-path 1.2s var(--dj-doux) var(--mf-delai, 0s),
		transform 0.35s var(--dj-doux),
		box-shadow 0.35s var(--dj-ressort);
}

/* Couleur de l'ombre : rouge, jaune, turquoise, magenta, à tour de rôle. */
body.mf-dj :is(.mf-grille-3, .mf-grille-2, .mf-rangee, .mf-inner) > :nth-child(4n + 1) { --dj-ombre: var(--dj-rouge); --dj-accent: var(--dj-rouge); }
body.mf-dj :is(.mf-grille-3, .mf-grille-2, .mf-rangee, .mf-inner) > :nth-child(4n + 2) { --dj-ombre: var(--dj-jaune); --dj-accent: var(--dj-jaune); }
body.mf-dj :is(.mf-grille-3, .mf-grille-2, .mf-rangee, .mf-inner) > :nth-child(4n + 3) { --dj-ombre: var(--dj-turquoise); --dj-accent: var(--dj-turquoise); }
body.mf-dj :is(.mf-grille-3, .mf-grille-2, .mf-rangee, .mf-inner) > :nth-child(4n + 4) { --dj-ombre: var(--dj-magenta); --dj-accent: var(--dj-magenta); }

body.mf-dj #participer :is(.mf-carte, .mf-consultation) {
	--dj-ombre: var(--dj-nuit);
}

body.mf-dj .mf-consultation {
	border-style: dashed;
	--dj-ombre: var(--dj-jaune);
}

body.mf-dj.mf-experience :is(.mf-carte, .mf-panneau, .mf-episode, .mf-tableau-col):is(:hover, :focus-within),
body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation):is(:hover, :focus-within) {
	--dj-ty: -8px;
	transform: perspective(900px) rotateX(var(--dj-rx, 0deg)) rotateY(var(--dj-ry, 0deg)) translateY(var(--dj-ty, 0px));
	box-shadow: 15px 15px 0 var(--dj-ombre, var(--dj-rouge));
}

/* Épisode : article sans fond, seule l'affiche porte l'ombre. */
body.mf-dj.mf-experience .mf-episode:is(:hover, :focus-within) {
	box-shadow: none;
}

body.mf-dj .mf-episode:is(:hover, :focus-within) .mf-episode-affiche {
	box-shadow: 14px 14px 0 var(--dj-ombre, var(--dj-rouge));
}

/* Reflet qui suit la souris (position posée par le script). */
body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-episode)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--dj-gx, 50%) var(--dj-gy, 0%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%);
	mix-blend-mode: soft-light;
	transition: opacity 0.35s ease;
}

body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-episode).dj-incline::after {
	opacity: 1;
}

body.mf-dj .mf-option {
	opacity: 1;
	color: var(--dj-nuit);
	background-color: var(--dj-creme);
	border: 2px dashed var(--dj-nuit);
	border-radius: 14px;
	transition: rotate 0.4s var(--dj-ressort), background-color 0.3s;
}

body.mf-dj .mf-option:hover {
	--dj-penche: -1.5deg;
	rotate: var(--dj-penche);
	background-color: color-mix(in srgb, var(--dj-jaune) 30%, #ffffff);
}

/* Valeurs (reconstruire, philosophie) : tuiles avec un trait de flamme. */
body.mf-dj .mf-valeur {
	position: relative;
	padding: 2.4rem 1.5rem 1.6rem;
	color: var(--dj-nuit);
	background-color: #ffffff;
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 18px;
	box-shadow: 6px 6px 0 var(--dj-ombre, var(--dj-rouge));
	transition:
		opacity 1s var(--dj-doux) var(--mf-delai, 0s),
		translate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		rotate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		scale 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		transform 0.35s var(--dj-doux),
		box-shadow 0.35s var(--dj-ressort);
}

/* Tuiles étroites (5 par ligne) : titre plus petit, coupure des mots longs. */
body.mf-dj .mf-valeur .mf-titre-carte {
	font-size: clamp(1.1rem, 1.3vw, 1.35rem);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

body.mf-dj .mf-valeur:hover {
	transform: translateY(-6px) rotate(-1deg);
	box-shadow: 11px 11px 0 var(--dj-ombre, var(--dj-rouge));
}

body.mf-dj .mf-valeur::before,
html.mf-anim body.mf-dj .mf-valeur.mf-revele::before {
	content: "";
	position: absolute;
	top: 1rem;
	right: auto;
	left: 1.5rem;
	width: 3rem;
	height: 7px;
	opacity: 1;
	border-radius: 999px;
	background: var(--dj-flamme);
	transform-origin: 0 50%;
}

/* Panneaux des trois activités. */
body.mf-dj .mf-panneau {
	gap: 1.1rem;
	padding: clamp(1.4rem, 2.6vw, 2.2rem);
	padding-top: calc(clamp(1.4rem, 2.6vw, 2.2rem) + 10px);
}

body.mf-dj .mf-panneau::before,
html.mf-anim body.mf-dj .mf-panneau.mf-revele::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 12px;
	opacity: 1;
	border-radius: calc(var(--dj-rayon) - var(--dj-trait)) calc(var(--dj-rayon) - var(--dj-trait)) 0 0;
	background: var(--dj-accent, var(--dj-rouge));
	transform-origin: 0 50%;
	pointer-events: none;
}

/* Surlignage aux couleurs de l'activité, ligne par ligne si le nom passe à la ligne. */
body.mf-dj .mf-panneau-nom {
	width: fit-content;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	letter-spacing: 0.01em;
	color: var(--dj-nuit);
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, var(--dj-accent, var(--dj-jaune)) 55%, transparent);
	text-decoration-thickness: 0.42em;
	text-underline-offset: -0.3em;
	text-decoration-skip-ink: none;
}

body.mf-dj .mf-panneau-message {
	font-family: var(--mf-police-texte);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	font-style: italic;
	color: var(--dj-rouge-fonce);
}

body.mf-dj :is(.mf-panneau, .mf-carte, .mf-pile, .mf-episode) img.mf-media,
body.mf-dj .mf-episode-affiche {
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 14px;
}

body.mf-dj .mf-panneau:hover .mf-badge--cuivre,
body.mf-dj .mf-carte:hover .mf-badge--cuivre {
	--dj-penche: 3deg;
	rotate: var(--dj-penche);
	scale: 1.08;
}

body.mf-dj .mf-panneau img.mf-media {
	transition: scale 0.6s var(--dj-ressort), filter 0.4s;
}

body.mf-dj .mf-panneau:hover img.mf-media {
	scale: 1.03;
	filter: saturate(1.3) brightness(1.08);
}

/* Image de carte qui sert de lien (réglage « Lien de l'image » du composant
   « MF — Carte enjeu ») : le lien Elementor, remis à zéro (« all: unset »), prend
   toute la largeur ; une étiquette signale le site externe. */
body.mf-dj .mf-carte > .e-image-link-base {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 14px;
	cursor: pointer;
}

body.mf-dj .mf-carte > .e-image-link-base:focus-visible {
	outline: 3px solid var(--dj-rouge-fonce);
	outline-offset: 4px;
}

body.mf-dj .mf-carte > .e-image-link-base img {
	transition: scale 0.5s var(--dj-ressort), box-shadow 0.4s var(--dj-ressort);
}

body.mf-dj .mf-carte > .e-image-link-base:is(:hover, :focus-visible) img {
	scale: 1.03;
	box-shadow: 6px 6px 0 var(--dj-jaune);
}

/* Aussi sur les logos des panneaux « activité » (#solutions, voir plus bas). */
/* Texte de remplacement : le nom du lien contient l'étiquette visible (WCAG 2.5.3)
   et annonce le nouvel onglet ; la flèche n'est pas lue. */
body.mf-dj :is(.mf-carte, #solutions .mf-panneau) > .e-image-link-base[target="_blank"]::after {
	content: "Voir le site ↗";
	content: "Voir le site ↗" / "Voir le site, nouvel onglet";
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.4rem 0.75rem;
	font: 800 0.72rem/1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: 2px solid var(--dj-nuit);
	border-radius: 999px;
	box-shadow: 2px 2px 0 var(--dj-nuit);
	rotate: -3deg;
	transition: rotate 0.4s var(--dj-ressort), scale 0.4s var(--dj-ressort);
}

body.mf-dj :is(.mf-carte, #solutions .mf-panneau) > .e-image-link-base[target="_blank"]:is(:hover, :focus-visible)::after {
	rotate: 2deg;
	scale: 1.08;
}

/* Logo Merci Follain dans une carte : affiché en entier et centré sur un fond
   clair chaud, au lieu d'être recadré comme une photo (le nom était coupé). */
body.mf-dj img.mf-media[src*="Logo-MERCI-FOLLAIN"] {
	object-fit: contain;
	padding: clamp(0.75rem, 2.5vw, 1.25rem) clamp(0.75rem, 2.5vw, 1.25rem) clamp(1.75rem, 4vw, 2.5rem);
	background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fff4e0 55%, #ffe1bd 100%);
}

/* Visuels d'attente (fichiers mf-*.webp) : bleu nuit d'origine, déjà dans la palette. */
body.mf-dj img[src*="/uploads/2026/10/mf-"] {
	filter: saturate(1.15);
}

/* Épisodes : affiches qui se penchent. */
body.mf-dj .mf-episode {
	position: relative;
	transform: perspective(900px) rotateX(var(--dj-rx, 0deg)) rotateY(var(--dj-ry, 0deg)) translateY(var(--dj-ty, 0px));
	transition:
		opacity 1s var(--dj-doux) var(--mf-delai, 0s),
		translate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		rotate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		scale 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		transform 0.35s var(--dj-doux);
}

body.mf-dj .mf-episode .mf-episode-affiche {
	box-shadow: 9px 9px 0 var(--dj-ombre, var(--dj-rouge));
	filter: saturate(1.1);
}

/* 7. En-tête et pied de page ---------------------------------------------- */

body.mf-dj .mf-entete {
	justify-content: flex-start;
}

body.mf-dj .mf-entete > .mf-marque {
	margin-inline-end: auto;
}

body.mf-dj .mf-marque {
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--mf-creme);
}

body.mf-dj .mf-marque a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

body.mf-dj .dj-logo {
	display: block;
	width: auto;
	height: 46px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
	transition: rotate 0.5s var(--dj-ressort), scale 0.5s var(--dj-ressort);
}

body.mf-dj .mf-marque a:is(:hover, :focus-visible) .dj-logo {
	rotate: -8deg;
	scale: 1.12;
}

body.mf-dj footer.mf-section .dj-logo {
	height: 88px;
}

body.mf-dj .mf-lien {
	font-family: var(--mf-police-repere);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: 0.08em;
}

body.mf-dj .mf-lien:is(:hover, :focus-visible),
body.mf-dj.mf-experience .mf-nav [aria-current="page"] {
	color: var(--mf-cuivre);
}

body.mf-dj.mf-experience .mf-nav .mf-lien {
	background-image: linear-gradient(var(--dj-jaune), var(--dj-jaune));
	background-size: 0 3px;
}

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

/* En-tête : transparent sur l'image d'accueil, bleu nuit ailleurs et au défilement. */
body.mf-dj.mf-experience .mf-entete.is-scrolled,
body.mf-dj.mf-experience .mf-entete.is-open,
body.mf-dj.mf-experience:not(.mf-mode-accueil) .mf-entete {
	background-color: rgba(15, 27, 45, 0.92);
	background-image: var(--dj-arc);
	background-size: 100% 3px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	box-shadow: 0 10px 30px -18px rgba(8, 17, 31, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

body.mf-dj .mf-menu-bouton {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-jaune);
}

@media (max-width: 1279px) {
	html.mf-js body.mf-dj .mf-nav {
		background-color: var(--dj-nuit);
		border-bottom: 3px solid var(--dj-jaune);
	}

	html.mf-js body.mf-dj .mf-nav .mf-lien {
		border-bottom-color: rgba(250, 248, 245, 0.12);
	}
}

/* Bandeau des pages annexes. */
body.mf-dj header.mf-rangee {
	color: var(--dj-creme);
	background-color: var(--dj-nuit);
	background-image: var(--dj-arc);
	background-size: 100% 4px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	border-bottom: 0;
}

body.mf-dj footer.mf-section {
	background-color: var(--dj-nuit-3);
	background-image: var(--dj-arc);
	background-size: 100% 8px;
	background-repeat: no-repeat;
	background-position: 0 0;
	border-top: 0;
}

/* 8. Ouverture : l'image bien visible ---------------------------------- */

body.mf-dj .mf-hero {
	background-color: var(--dj-nuit);
}

body.mf-dj .mf-hero .mf-hero-image {
	opacity: 1;
	filter: saturate(1.25) contrast(1.06);
}

/* Voile : sombre à gauche (sous le texte), image intacte à droite (l'incendie). */
body.mf-dj .mf-hero .mf-hero-voile {
	background-image:
		radial-gradient(ellipse 42% 38% at 50% 50%, rgba(15, 27, 45, 0.5), rgba(15, 27, 45, 0) 100%),
		linear-gradient(90deg, rgba(15, 27, 45, 0.9) 0%, rgba(15, 27, 45, 0.8) 40%, rgba(15, 27, 45, 0.62) 55%, rgba(15, 27, 45, 0.3) 70%, rgba(15, 27, 45, 0.06) 85%, rgba(15, 27, 45, 0) 100%),
		linear-gradient(0deg, rgba(15, 27, 45, 0.9) 0%, rgba(15, 27, 45, 0) 30%),
		linear-gradient(180deg, rgba(15, 27, 45, 0.55) 0%, rgba(15, 27, 45, 0) 18%);
}

/* Conclusion : image d'ambiance plus présente. */
body.mf-dj #conclusion .mf-hero-image {
	opacity: 0.6;
}

body.mf-dj #conclusion .mf-hero-voile {
	background-image:
		radial-gradient(ellipse at 50% 50%, rgba(15, 27, 45, 0.35) 0%, rgba(15, 27, 45, 0.85) 75%),
		linear-gradient(0deg, rgba(15, 27, 45, 0.7), rgba(15, 27, 45, 0) 40%);
}

/* Lueur de flamme derrière le titre (remplace la lueur jaune). */
body.mf-dj.mf-experience .mf-hero::before {
	top: 55%;
	left: 28%;
	width: min(80vw, 66rem);
	background: radial-gradient(closest-side, rgba(233, 74, 45, 0.32), rgba(249, 177, 51, 0.14) 55%, rgba(230, 13, 127, 0) 100%);
	mix-blend-mode: screen;
}

/* Grain de pellicule très léger. */
body.mf-dj .mf-hero::after {
	content: "";
	position: absolute;
	inset: -50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body.mf-dj .mf-hero :is(.mf-titre-display, .mf-hero-murmure, .mf-texte, .mf-kicker) {
	text-shadow: 0 2px 24px rgba(8, 17, 31, 0.65);
}

body.mf-dj .mf-hero .mf-kicker {
	text-shadow: none;
}

/* Sur grand écran, le titre reste à gauche, sous le voile, loin des flammes. */
@media (min-width: 1025px) {
	body.mf-dj .mf-hero-scene2 {
		max-width: min(60rem, 52vw);
	}
}

body.mf-dj .mf-titre-display {
	font-size: clamp(2.2rem, min(5.6vw, 7.6vh), 6.2rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--dj-creme);
}

body.mf-dj .mf-hero-scene2 h1 > span:last-of-type {
	color: var(--dj-jaune);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	body.mf-dj .mf-hero-scene2 h1 > span:last-of-type {
		color: transparent;
		background-image: linear-gradient(100deg, var(--dj-jaune) 0%, var(--dj-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: none;
		filter: drop-shadow(0 3px 18px rgba(8, 17, 31, 0.55));
	}
}

body.mf-dj .mf-hero-murmure {
	font-family: var(--mf-police-titre);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(2.4rem, min(6vw, 7vh), 5.4rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--dj-creme);
}

body.mf-dj .mf-hero-scene1 > :nth-child(2) { color: var(--dj-jaune); }
body.mf-dj .mf-hero-scene1 > :nth-child(3) { color: var(--dj-creme); }

body.mf-dj .mf-hero-scene2 > .mf-texte {
	font-family: var(--mf-police-texte);
	font-weight: 500;
	font-style: normal;
	color: var(--dj-creme);
}

/* « Découvrir la suite » : grosse pastille jaune qui appelle le clic. */
body.mf-dj .mf-hero .mf-hero-indice a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 56px;
	padding: 0.7rem 0.75rem 0.7rem 1.5rem;
	font-family: var(--mf-police-repere);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 999px;
	box-shadow: 6px 6px 0 var(--dj-rouge);
	cursor: pointer;
	transform: translate(calc(var(--dj-mx, 0px) - var(--dj-leve, 0px)), calc(var(--dj-my, 0px) - var(--dj-leve, 0px)));
	transition: box-shadow 0.3s var(--dj-ressort), transform 0.3s var(--dj-ressort), background-color 0.25s;
}

body.mf-dj .mf-hero .mf-hero-indice a:is(:hover, :focus-visible) {
	--dj-leve: 3px;
	color: var(--dj-nuit);
	box-shadow: 10px 10px 0 var(--dj-rouge);
}

body.mf-dj .mf-hero .mf-hero-indice a:focus-visible {
	outline: 3px solid var(--dj-creme);
	outline-offset: 5px;
}

body.mf-dj .dj-fleche {
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--dj-jaune);
	background-color: var(--dj-nuit);
	border-radius: 50%;
}

/* Anneau qui pulse autour de la pastille. */
body.mf-dj .mf-hero .mf-hero-indice a::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 3px solid var(--dj-jaune);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

/* Commandes du bas : son et « passer » à gauche, la pastille à droite. La rangée
   Elementor prend toute la largeur ; des espaces insécables poussaient le lien
   à droite, le script les retire. */
body.mf-dj .mf-hero-commandes {
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 1rem;
}

body.mf-dj .mf-hero-commandes > .mf-rangee {
	width: auto;
	flex: 0 1 auto;
}

body.mf-dj .mf-hero-commandes > .mf-hero-indice {
	flex: none;
	margin: 0 0 0 auto;
}

@media (max-width: 767px) {
	body.mf-dj .mf-hero-commandes {
		flex-wrap: wrap;
	}

	body.mf-dj .mf-hero-commandes > .mf-hero-indice {
		margin: 0.5rem 0 0;
	}
}

/* 9. Sections ------------------------------------------------------------ */

body.mf-dj .mf-section {
	background-color: var(--dj-creme);
}

body.mf-dj :is(.mf-section--noir, .mf-section--anthracite) {
	background-color: var(--dj-nuit);
}

/* Respiration : la classe Elementor .mf-section ne laisse qu'environ 22 px en
   haut et 30 px en bas, et les rubans défilants mordent de 2 à 3 rem sur les
   sections voisines. Le pied de page garde ses marges. */
body.mf-dj .mf-section:not(footer) {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

body.mf-dj .dj-bandeau + .mf-section:not(footer) {
	padding-block-start: calc(clamp(3.5rem, 7vw, 6.5rem) + 2.5rem);
}

body.mf-dj .mf-section:not(footer):has(+ .dj-bandeau) {
	padding-block-end: calc(clamp(3.5rem, 7vw, 6.5rem) + 2.5rem);
}

/* Première section sous l'en-tête fixe (Notre histoire) : la marge prévue dans Elementor. */
body.mf-dj .mf-entete + .mf-section {
	padding-block-start: max(8rem, var(--mf-section-y, 8rem));
}

body.mf-dj .mf-section--papier {
	background-color: #fff2d8;
}

body.mf-dj #reconstruire {
	background-image:
		radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--dj-jaune) 30%, transparent) 0, transparent 32%),
		radial-gradient(circle at 4% 92%, color-mix(in srgb, var(--dj-magenta) 12%, transparent) 0, transparent 30%),
		linear-gradient(180deg, var(--dj-creme) 50%, color-mix(in srgb, var(--dj-rouge) 9%, var(--dj-creme)) 100%);
}

body.mf-dj #reconstruire img.mf-media {
	filter: saturate(1.15);
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 18px;
	box-shadow: 10px 10px 0 var(--dj-ombre, var(--dj-turquoise));
}

/* « Demain » : l'esquisse du nouveau projet (fond transparent, très large) est
   montrée en entier sur fond blanc. */
body.mf-dj #reconstruire img.mf-media[src*="nouveau-projet"] {
	object-fit: contain;
	padding: 4% 3%;
	background-color: #ffffff;
}

/* Légendes « Aujourd'hui » / « Demain » : lisibles, pas en petit italique gris. */
body.mf-dj #reconstruire .mf-pile > .mf-legende {
	font-family: var(--mf-police-repere);
	font-weight: 800;
	font-style: normal;
	font-size: 0.95rem;
	color: var(--dj-nuit);
}

/* Flèche « aujourd'hui → demain » entre la maison en ruine et le nouveau projet ;
   vers le bas quand les deux images sont l'une sous l'autre. */
body.mf-dj #reconstruire .mf-grille-3:has(> .mf-pile > img.mf-media) {
	container-type: inline-size;
}

body.mf-dj #reconstruire .mf-grille-3:has(> .mf-pile > img.mf-media) > .mf-pile:nth-child(2) {
	position: relative;
}

body.mf-dj #reconstruire .mf-grille-3:has(> .mf-pile > img.mf-media) > .mf-pile:nth-child(2)::before {
	content: "↓";
	content: "↓" / "";
	position: absolute;
	top: -14px;
	left: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-left: -28px;
	font: 800 1.6rem/1 var(--mf-police-titre, sans-serif);
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 50%;
	box-shadow: 4px 4px 0 var(--dj-rouge);
	rotate: -6deg;
	--dj-pousse: 0 4px;
}

@container (min-width: 47rem) {
	body.mf-dj #reconstruire .mf-grille-3:has(> .mf-pile > img.mf-media) > .mf-pile:nth-child(2)::before {
		content: "→";
		content: "→" / "";
		top: 40%;
		left: calc(-1 * clamp(1.25rem, 2.5vw, 2rem) / 2);
		--dj-pousse: 4px 0;
	}
}

html.dj-mouvement:not(.dj-calme) body.mf-dj #reconstruire .mf-grille-3:has(> .mf-pile > img.mf-media) > .mf-pile:nth-child(2)::before {
	animation: dj-pousse 1.6s var(--dj-ressort) infinite alternate;
}

@keyframes dj-pousse {
	from { translate: 0 0; }
	to { translate: var(--dj-pousse, 4px 0); }
}

/* « Ce que propose la holding » : la salle d'exposition révélée par la porte. */
body.mf-dj #solutions {
	color: var(--dj-creme);
	background-color: var(--dj-nuit);
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(249, 177, 51, 0.24), rgba(249, 177, 51, 0) 70%),
		linear-gradient(rgba(250, 248, 245, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(250, 248, 245, 0.05) 1px, transparent 1px);
	background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Les trois activités : chaque panneau s'ouvre sur son visuel, pleine largeur sous
   le bandeau de couleur. Les logos (fichiers « logo-… » : Merci Follain, Follain
   Building) s'affichent en entier et en grand sur fond noir, le fond d'origine du
   logo Follain Building ; sans logo (Follain RSI), le visuel d'attente garde ce
   cadre. Des halos aux couleurs des trois activités éclairent la salle. */
body.mf-dj #solutions {
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(249, 177, 51, 0.3), rgba(249, 177, 51, 0) 70%),
		radial-gradient(circle at 12% 78%, rgba(233, 74, 45, 0.22), rgba(233, 74, 45, 0) 32%),
		radial-gradient(circle at 50% 88%, rgba(249, 177, 51, 0.16), rgba(249, 177, 51, 0) 30%),
		radial-gradient(circle at 88% 78%, rgba(14, 124, 116, 0.3), rgba(14, 124, 116, 0) 32%),
		linear-gradient(rgba(250, 248, 245, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(250, 248, 245, 0.05) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}

body.mf-dj #solutions .mf-panneau {
	--dj-pad: clamp(1.4rem, 2.6vw, 2.2rem);
	overflow: hidden;
}

body.mf-dj #solutions .mf-panneau > img.mf-media:first-child {
	width: calc(100% + 2 * var(--dj-pad));
	max-width: none;
	margin: calc(-1 * var(--dj-pad) + 2px) calc(-1 * var(--dj-pad)) 0.4rem;
	aspect-ratio: 16 / 9;
	object-position: 50% 100%;
	border: 0;
	border-bottom: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 0;
	box-shadow: none;
}

body.mf-dj #solutions .mf-panneau > img.mf-media[src*="/logo-"] {
	aspect-ratio: 3 / 1;
	object-fit: contain;
	object-position: 50% 50%;
	padding: 5% 8%;
	background-color: #000000;
	filter: none;
}

/* Panneaux plus courts : liste sur deux colonnes dès que le panneau est assez
   large, espacements resserrés. */
body.mf-dj #solutions .mf-panneau {
	container-type: inline-size;
	gap: 0.85rem;
}

body.mf-dj #solutions .mf-panneau .mf-titre-carte {
	font-size: clamp(1.2rem, 1.7vw, 1.5rem);
}

@container (min-width: 30rem) {
	body.mf-dj #solutions .mf-panneau .mf-liste ul {
		columns: 2;
		column-gap: 1.75rem;
	}

	body.mf-dj #solutions .mf-panneau .mf-liste li {
		break-inside: avoid;
	}
}

body.mf-dj #solutions .mf-panneau:hover > img.mf-media[src*="/logo-"] {
	scale: 1.05;
	filter: drop-shadow(0 0 18px rgba(233, 74, 45, 0.45));
}

body.mf-dj #solutions .mf-panneau-nom {
	font-size: clamp(1.55rem, 2.2vw, 2.1rem);
}

/* Logo qui mène au site de l'activité (réglage « Lien du visuel » du composant
   « MF — Panneau activité », 12/11 : merci-follain.com, follain-building.com).
   Le lien Elementor, remis à zéro (« all: unset »), prend la place du bandeau
   pleine largeur et l'image le remplit ; l'étiquette « Voir le site ↗ » des
   cartes « enjeu » signale le site externe (règle plus haut). */
body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child {
	position: relative;
	display: block;
	width: calc(100% + 2 * var(--dj-pad));
	max-width: none;
	margin: calc(-1 * var(--dj-pad) + 2px) calc(-1 * var(--dj-pad)) 0.4rem;
	overflow: hidden;
	background-color: #000000;
	border-bottom: var(--dj-trait) solid var(--dj-nuit);
	cursor: pointer;
}

body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child > img.mf-media {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	aspect-ratio: 16 / 9;
	object-position: 50% 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.mf-dj #solutions .mf-panneau > .e-image-link-base > img.mf-media[src*="/logo-"] {
	aspect-ratio: 3 / 1;
	object-fit: contain;
	object-position: 50% 50%;
	padding: 5% 8%;
	background-color: #000000;
	filter: none;
}

/* Halo rouge au survol : porté par le lien (sur l'image, il serait coupé par le
   « overflow: hidden » du lien) ; le logo grossit à l'intérieur du bandeau. */
body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child {
	transition: filter 0.4s;
}

body.mf-dj #solutions .mf-panneau:hover > .e-image-link-base:first-child,
body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child:focus-visible {
	filter: drop-shadow(0 0 18px rgba(233, 74, 45, 0.45));
}

html.dj-mouvement body.mf-dj #solutions .mf-panneau:hover > .e-image-link-base > img.mf-media[src*="/logo-"] {
	scale: 1.05;
}

/* Panneau étroit (téléphone) : étiquette plus petite, dans le coin, pour ne pas
   couvrir le nom du logo. */
@container (max-width: 24rem) {
	body.mf-dj #solutions .mf-panneau > .e-image-link-base[target="_blank"]::after {
		right: 0.4rem;
		bottom: 0.4rem;
		padding: 0.3rem 0.55rem;
		font-size: 0.6rem;
	}
}

/* Contour de focus : le panneau coupe ce qui dépasse, et un « outline » du lien
   serait peint sous l'image (Chrome, Safari) ; un cadre jaune est donc tracé
   au-dessus de l'image, dans le bandeau. */
body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child:focus-visible {
	outline: none;
}

body.mf-dj #solutions .mf-panneau > .e-image-link-base:first-child:focus-visible::before {
	content: "";
	position: absolute;
	inset: 5px;
	z-index: 2;
	border: 3px solid var(--dj-jaune);
	border-radius: 6px;
	pointer-events: none;
}

/* Bouton vers le site de l'activité (lien externe, nouvel onglet) : aplat jaune
   à la place du bouton fantôme, ombre rouge, flèche ↗ (lue « nouvel onglet »). */
body.mf-dj #solutions .mf-panneau .mf-bouton[target="_blank"] {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-nuit);
	box-shadow: 5px 5px 0 var(--dj-rouge);
}

body.mf-dj #solutions .mf-panneau .mf-bouton[target="_blank"]:is(:hover, :focus-visible) {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border-color: var(--dj-nuit);
	box-shadow: 9px 9px 0 var(--dj-rouge);
}

body.mf-dj #solutions .mf-panneau .mf-bouton[target="_blank"]:active {
	box-shadow: 0 0 0 var(--dj-rouge);
}

body.mf-dj #solutions .mf-panneau .mf-bouton[target="_blank"]::after {
	content: "↗";
	content: "↗" / ", nouvel onglet";
	margin-inline-start: 0.5em;
}

/* Philosophie : grand aplat jaune. */
body.mf-dj #philosophie {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	background-image:
		radial-gradient(circle at 100% 0%, rgba(233, 74, 45, 0.35), transparent 38%),
		radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.45), transparent 40%);
}

body.mf-dj #philosophie .mf-titre-section {
	font-size: clamp(2.9rem, 8vw, 7.5rem);
	letter-spacing: -0.05em;
	line-height: 0.92;
}

body.mf-dj #philosophie .mf-titre-section::after {
	background-image: linear-gradient(90deg, var(--dj-nuit), var(--dj-rouge-fonce));
}

body.mf-dj #philosophie .mf-texte--fort {
	font-size: clamp(1.9rem, 4.2vw, 3.6rem);
	color: var(--dj-nuit);
}

body.mf-dj #philosophie .mf-legende {
	color: var(--dj-nuit);
}

/* Territoire : bleu nuit avec deux halos. */
body.mf-dj #territoire {
	background-image:
		radial-gradient(circle at 0% 0%, rgba(14, 124, 116, 0.45), transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(230, 13, 127, 0.28), transparent 42%);
}

/* Rejoindre l'aventure : turquoise. */
body.mf-dj #participer {
	color: var(--dj-creme);
	background-color: var(--dj-turquoise);
	background-image:
		radial-gradient(circle at 90% 10%, rgba(249, 177, 51, 0.35), transparent 35%),
		radial-gradient(circle at 10% 90%, rgba(15, 27, 45, 0.45), transparent 45%);
}

/* Citations (le moment, la conclusion). */
body.mf-dj .mf-citation-ligne1 {
	font-size: clamp(2.3rem, 6vw, 5.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--dj-creme);
}

body.mf-dj .mf-citation-ligne2 {
	font-family: var(--mf-police-titre);
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.02em;
	color: var(--dj-jaune);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	body.mf-dj .mf-citation-ligne2 {
		color: transparent;
		background-image: var(--dj-flamme);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

body.mf-dj .mf-citation-ligne3 {
	font-family: var(--mf-police-texte);
	font-style: italic;
	font-weight: 400;
	color: var(--dj-doux-sombre);
}

body.mf-dj .mf-signature {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--mf-police-repere);
	font-weight: 800;
	/* Jaune sur fond sombre, rouge foncé sur fond clair (jeton du contexte). */
	color: var(--mf-cuivre);
}

body.mf-dj .mf-signature::before {
	content: "";
	width: 2.5rem;
	height: 4px;
	border-radius: 999px;
	background: var(--dj-vague);
}

/* Le moment : la citation flotte sur deux halos de braise. */
body.mf-dj #moment::before,
body.mf-dj #moment::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: min(60vw, 46rem);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.55;
}

body.mf-dj #moment::before {
	top: -12%;
	left: -10%;
	background: radial-gradient(closest-side, rgba(233, 74, 45, 0.75), transparent);
}

body.mf-dj #moment::after {
	right: -12%;
	bottom: -18%;
	background: radial-gradient(closest-side, rgba(230, 13, 127, 0.55), transparent);
}

body.mf-dj #moment > * {
	position: relative;
	z-index: 1;
}

/* 10. Pellicule chronologique (Notre histoire) ----------------------------- */

body.mf-dj .mf-pellicule.is-enhanced .mf-pellicule-bande {
	background-color: var(--dj-nuit);
	background-image:
		repeating-linear-gradient(90deg, var(--dj-jaune) 0 10px, transparent 10px 22px),
		repeating-linear-gradient(90deg, var(--dj-jaune) 0 10px, transparent 10px 22px);
	border-radius: 16px;
	box-shadow: 8px 8px 0 var(--dj-rouge);
	scrollbar-color: var(--dj-jaune) var(--dj-nuit);
}

body.mf-dj .mf-etape,
body.mf-dj .mf-pellicule.is-enhanced .mf-etape {
	color: var(--dj-creme);
	background-color: var(--dj-nuit-2);
	border: 2px solid rgba(250, 248, 245, 0.16);
	border-radius: 12px;
}

body.mf-dj .mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
	border-color: var(--dj-jaune);
	box-shadow: inset 0 0 0 2px var(--dj-jaune), 0 0 24px -6px rgba(249, 177, 51, 0.8);
}

body.mf-dj .mf-pellicule.is-enhanced .mf-etape:hover {
	border-color: var(--dj-magenta);
}

body.mf-dj .mf-pellicule.is-enhanced .mf-etape:focus-visible {
	outline-color: var(--dj-jaune);
}

body.mf-dj .mf-pellicule__visuel {
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 18px;
	box-shadow: 10px 10px 0 var(--dj-turquoise);
}

body.mf-dj.mf-experience .mf-pellicule__visuel img {
	filter: saturate(1.15) contrast(1.05);
}

body.mf-dj .mf-pellicule__visuel::after {
	box-shadow: inset 0 0 60px rgba(15, 27, 45, 0.35);
}

body.mf-dj .mf-pellicule__fleche {
	color: var(--dj-nuit);
	background-color: var(--dj-jaune);
	border: var(--dj-trait) solid var(--dj-nuit);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--dj-nuit);
	transition: transform 0.25s var(--dj-ressort), box-shadow 0.25s var(--dj-ressort);
}

body.mf-dj .mf-pellicule__fleche:hover {
	color: var(--dj-nuit);
	border-color: var(--dj-nuit);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--dj-rouge);
}

body.mf-dj .mf-pellicule__barre {
	height: 6px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--mf-creme) 16%, transparent);
}

body.mf-dj .mf-pellicule__barre > span {
	border-radius: 999px;
	background-color: var(--dj-rouge);
	background-image: var(--dj-flamme);
}

body.mf-dj .mf-pellicule__texte .mf-etape-repere {
	font-weight: 800;
	color: var(--dj-rouge-fonce);
}

body.mf-dj .mf-etape-repere {
	font-weight: 800;
}

@media (max-width: 767px) {
	body.mf-dj .mf-pellicule.is-enhanced .mf-pellicule-bande {
		background: none;
		box-shadow: none;
	}

	body.mf-dj .mf-pellicule.is-enhanced .mf-etape {
		border-radius: 999px;
	}

	body.mf-dj .mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
		background-color: var(--dj-jaune);
		box-shadow: 3px 3px 0 var(--dj-nuit);
	}

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

	/* Sans la bande sombre, le contour de focus jaune ne se verrait pas sur le blanc cassé. */
	body.mf-dj .mf-pellicule.is-enhanced .mf-etape:focus-visible {
		outline-color: var(--dj-nuit);
	}
}

/* Barre de lecture : arc-en-ciel de la marque, plus épaisse. */
body.mf-dj .mf-progression-lecture {
	height: 5px;
	background-color: var(--dj-rouge);
	background-image: var(--dj-arc);
	box-shadow: 0 0 14px rgba(249, 177, 51, 0.7);
}

/* 11. Apparitions au défilement (version « claque ») ----------------------
   Les classes .mf-revele et .mf-mot sont posées par mf-experience.js (accueil,
   Notre histoire) ou par mf-dejante.js (autres pages). html.dj-anim est posé
   par mf-dejante.js : sans script, tout reste visible. */

html.dj-anim body.mf-dj .mf-revele {
	opacity: 0;
	transition:
		opacity 0.9s var(--dj-doux) var(--mf-delai, 0s),
		translate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		rotate 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		scale 1.1s var(--dj-ressort) var(--mf-delai, 0s),
		clip-path 1.3s var(--dj-doux) var(--mf-delai, 0s),
		filter 0.9s var(--dj-doux) var(--mf-delai, 0s),
		transform 0.35s var(--dj-doux),
		box-shadow 0.35s var(--dj-ressort);
}

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

html.dj-anim body.mf-dj .mf-revele--mots {
	opacity: 1;
}

html.dj-anim body.mf-dj .mf-revele--mots .mf-mot {
	display: inline-block;
	opacity: 0;
	transition:
		opacity 0.6s var(--dj-doux) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 65ms),
		translate 0.9s var(--dj-ressort) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 65ms),
		rotate 0.9s var(--dj-ressort) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 65ms),
		scale 0.9s var(--dj-ressort) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 65ms),
		filter 0.6s var(--dj-doux) calc(var(--mf-delai, 0s) + var(--mf-i, 0) * 65ms);
}

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

/* Le trait sous le titre se dessine après les mots. */
html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots.mf-titre-section::after {
	transform: scaleX(0);
	transition: transform 0.9s var(--dj-ressort) calc(var(--mf-delai, 0s) + 0.5s);
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots.mf-titre-section.is-visible::after {
	transform: scaleX(1);
}

/* Traits des valeurs et des panneaux : dessinés à l'apparition. */
html.dj-anim.dj-mouvement body.mf-dj :is(.mf-valeur, .mf-panneau).mf-revele::before {
	transform: scaleX(0);
	transition: transform 0.9s var(--dj-ressort) calc(var(--mf-delai, 0s) + 0.45s);
}

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

/* Blocs : montent, se redressent et rebondissent. */
html.dj-anim.dj-mouvement body.mf-dj .mf-revele {
	translate: 0 70px;
	rotate: -2.5deg;
	scale: 0.94;
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele:nth-child(even) {
	rotate: 2.5deg;
}

/* Fin d'apparition : les autocollants retrouvent leur penché (--dj-penche). */
html.dj-anim.dj-mouvement body.mf-dj .mf-revele.is-visible {
	translate: 0 0;
	rotate: var(--dj-penche, 0deg);
	scale: 1;
}

/* Images : ouverture en iris, comme au cinéma. */
html.dj-anim.dj-mouvement body.mf-dj .mf-revele--image {
	translate: none;
	rotate: none;
	clip-path: circle(0% at 50% 50%);
	scale: 1.15;
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele--image.is-visible {
	clip-path: circle(75% at 50% 50%);
	scale: 1;
}

/* Titres : chaque mot tombe, tourne et rebondit. */
html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots {
	translate: none;
	rotate: none;
	scale: none;
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots .mf-mot {
	translate: 0 0.9em;
	rotate: 14deg;
	scale: 0.4;
	filter: blur(6px);
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots .mf-mot:nth-child(even) {
	rotate: -14deg;
}

html.dj-anim.dj-mouvement body.mf-dj .mf-revele--mots.is-visible .mf-mot {
	translate: 0 0;
	rotate: 0deg;
	scale: 1;
	filter: none;
}

/* Citations : flou qui se fait net. */
/* Longhands : les délais ligne par ligne de mf-experience.css restent en place. */
html.mf-anim.dj-mouvement body.mf-dj:not(.mf-mode-projection) .mf-citation > * {
	transition-property: opacity, transform, scale, filter;
	transition-duration: 1.4s, 1.4s, 1.4s, 1.2s;
	transition-timing-function: var(--dj-doux), var(--dj-ressort), var(--dj-ressort), var(--dj-doux);
}

html.mf-anim.dj-mouvement body.mf-dj:not(.mf-mode-projection) .mf-citation:not(.is-visible) > * {
	scale: 0.9;
	filter: blur(10px);
}

/* Intro de l'accueil : chaque murmure claque à l'écran. */
html.mf-js.dj-mouvement body.mf-dj .mf-hero-scene1 > *,
html.mf-js.dj-mouvement body.mf-dj .mf-hero-scene2 h1 > span {
	animation-name: dj-claque;
	animation-duration: 1.1s;
	animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}

html.mf-js.dj-mouvement body.mf-dj .mf-hero-scene2 > :not(h1) {
	animation-name: dj-surgit;
	animation-duration: 0.9s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dj-claque {
	0% {
		opacity: 0;
		transform: scale(1.9) rotate(-4deg);
		filter: blur(14px);
		text-shadow: -12px 0 0 rgba(230, 13, 127, 0.8), 12px 0 0 rgba(14, 124, 116, 0.8);
	}

	45% {
		opacity: 1;
		transform: scale(0.94) rotate(1deg);
		filter: blur(0);
	}

	62% {
		transform: scale(1.04) rotate(0deg);
		text-shadow: -3px 0 0 rgba(230, 13, 127, 0.7), 3px 0 0 rgba(14, 124, 116, 0.7);
	}

	/* Filtre et ombre finaux non précisés : ceux de l'élément (ombre portée du dégradé). */
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes dj-surgit {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.85);
	}

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

/* Mouvements de mf-experience.css prévus pour « aucune préférence » du système :
   rétablis aussi quand le système demande de réduire les animations. */
html.mf-js.dj-mouvement body.mf-dj .mf-hero .mf-hero-image {
	transform-origin: 50% 40%;
	animation: mf-travelling 15s ease-out forwards;
}

html.dj-mouvement body.mf-dj .mf-parallaxe-fond {
	scale: 1.18;
}

/* 12. Effets posés par mf-dejante.js ------------------------------------- */

/* Braises qui montent de l'incendie (toile). */
.dj-braises {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Bandeaux défilants (deux rubans croisés). Navigateurs sans overflow: clip
   (Safari 15 et avant) : la page elle-même coupe ce qui dépasse. */
@supports not (overflow-x: clip) {
	body.mf-dj {
		overflow-x: hidden;
	}
}

/* Bandeaux défilants (deux rubans croisés). */
.dj-bandeau {
	position: relative;
	z-index: 5;
	overflow-x: clip;
	overflow-y: visible;
	height: clamp(3.4rem, 6vw, 4.6rem);
	margin-block: calc(clamp(3.4rem, 6vw, 4.6rem) / -2);
	pointer-events: none;
}

.dj-bandeau__ruban {
	position: absolute;
	top: 0;
	left: -5%;
	width: 110%;
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-block: var(--dj-trait, 3px) solid var(--dj-nuit, #0f1b2d);
	box-shadow: 0 10px 0 rgba(8, 17, 31, 0.25);
}

.dj-bandeau__ruban--a {
	color: var(--dj-nuit, #0f1b2d);
	background-color: var(--dj-jaune, #f9b133);
	rotate: -2.2deg;
}

.dj-bandeau__ruban--b {
	color: var(--dj-creme, #faf8f5);
	background-color: var(--dj-magenta, #e60d7f);
	rotate: 1.6deg;
}

.dj-bandeau--activites .dj-bandeau__ruban--b {
	background-color: var(--dj-turquoise, #0e7c74);
}

.dj-bandeau__piste {
	display: flex;
	flex: none;
	width: max-content;
	will-change: transform;
}

.dj-bandeau__groupe {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1.4rem;
	padding-inline-end: 1.4rem;
	font-family: var(--mf-police-titre, sans-serif);
	font-weight: 800;
	font-size: clamp(1.1rem, 2.2vw, 1.75rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dj-bandeau__etoile {
	display: inline-block;
	color: var(--dj-rouge, #e94a2d);
}

.dj-bandeau__ruban--b .dj-bandeau__etoile {
	color: var(--dj-jaune, #f9b133);
}

/* Confettis et poussière (particules temporaires). */
.dj-particules {
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	overflow: hidden;
	pointer-events: none;
}

.dj-particule {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	will-change: transform, opacity;
}

.dj-particule--rond { border-radius: 50%; }
.dj-particule--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dj-particule--trait { width: 4px; height: 16px; border-radius: 2px; }
.dj-particule--poussiere { border-radius: 50%; filter: blur(3px); }

/* Barre de volume de la musique et bouton « Pause » (dans l'en-tête). */
:is(.dj-calme-bouton, .dj-volume) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-inline-start: 0.75rem;
	color: var(--dj-creme, #faf8f5);
	background-color: rgba(15, 27, 45, 0.55);
	border: 2px solid rgba(250, 248, 245, 0.4);
	border-radius: 999px;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.dj-calme-bouton {
	gap: 0.4rem;
	min-width: 44px;
	padding: 0 0.8rem;
	font: 800 0.72rem/1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.dj-volume + .dj-calme-bouton {
	margin-inline-start: 0.5rem;
}

.dj-calme-bouton:hover,
.dj-calme-bouton:focus-visible {
	color: var(--dj-nuit, #0f1b2d);
	background-color: var(--dj-jaune, #f9b133);
	border-color: var(--dj-jaune, #f9b133);
}

:is(.dj-calme-bouton, .dj-volume__haut-parleur):focus-visible {
	outline: 2px solid var(--dj-creme, #faf8f5);
	outline-offset: 3px;
}

.dj-calme-bouton__icone {
	font-size: 0.85rem;
}

/* Volume : haut-parleur (coupe ou relance) et curseur rempli de jaune jusqu'au niveau. */
.dj-volume {
	--dj-niveau: 10%;
	gap: 0.3rem;
	padding: 0 0.85rem 0 0.2rem;
}

.dj-volume.is-joue {
	border-color: var(--dj-jaune, #f9b133);
}

.dj-volume__haut-parleur {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}

.dj-volume__haut-parleur:hover,
.dj-volume__haut-parleur:focus-visible {
	color: var(--dj-nuit, #0f1b2d);
	background-color: var(--dj-jaune, #f9b133);
}

.dj-volume__corps {
	fill: currentColor;
}

.dj-volume__onde,
.dj-volume__croix {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.dj-volume__croix,
.dj-volume.is-muet .dj-volume__onde {
	display: none;
}

.dj-volume.is-muet .dj-volume__croix {
	display: inline;
}

.dj-volume:not(.is-fort) .dj-volume__onde--2 {
	opacity: 0.3;
}

/* Pendant la lecture, les ondes du haut-parleur battent doucement. */
html.dj-mouvement:not(.dj-calme) .dj-volume.is-joue .dj-volume__onde {
	animation: dj-onde 1.1s ease-in-out infinite alternate;
}

html.dj-mouvement:not(.dj-calme) .dj-volume.is-joue .dj-volume__onde--2 {
	animation-delay: -0.55s;
}

@keyframes dj-onde {
	from { stroke-opacity: 0.35; }
	to { stroke-opacity: 1; }
}

.dj-volume__barre {
	-webkit-appearance: none;
	appearance: none;
	width: 88px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.dj-volume__barre:focus-visible {
	outline: 2px solid var(--dj-creme, #faf8f5);
	outline-offset: 4px;
	border-radius: 999px;
}

.dj-volume__barre::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dj-jaune, #f9b133) 0 var(--dj-niveau), rgba(250, 248, 245, 0.45) var(--dj-niveau) 100%);
}

.dj-volume__barre::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -5px;
	border-radius: 50%;
	background-color: var(--dj-jaune, #f9b133);
	border: 2px solid var(--dj-nuit, #0f1b2d);
	box-shadow: 0 0 0 2px var(--dj-jaune, #f9b133);
}

.dj-volume__barre::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background-color: rgba(250, 248, 245, 0.45);
}

.dj-volume__barre::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background-color: var(--dj-jaune, #f9b133);
}

.dj-volume__barre::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--dj-jaune, #f9b133);
	border: 2px solid var(--dj-nuit, #0f1b2d);
	box-shadow: 0 0 0 2px var(--dj-jaune, #f9b133);
}

:is(.dj-calme-bouton--flottant, .dj-volume--flottant) {
	position: fixed;
	bottom: 1rem;
	z-index: 90;
	background-color: var(--dj-nuit, #0f1b2d);
}

.dj-calme-bouton--flottant {
	left: 1rem;
}

.dj-volume--flottant {
	left: 4.5rem;
}

/* Entre 1280 et 1560 px, la marque, le logo, les six liens, le volume et
   « Pause » doivent tenir sur une ligne : la barre et les liens se resserrent,
   « Pause » se réduit à son icône (mesuré : il manquait jusqu'à 70 px). */
@media (min-width: 1280px) and (max-width: 1560px) {
	body.mf-dj .mf-entete .mf-nav {
		gap: 0.15rem 0.6rem;
	}

	body.mf-dj .mf-entete .mf-lien {
		font-size: 0.8rem;
		letter-spacing: 0.02em;
	}

	body.mf-dj .mf-entete :is(.dj-calme-bouton, .dj-volume) {
		margin-inline-start: 0.5rem;
	}

	body.mf-dj .mf-entete .dj-calme-bouton {
		padding: 0;
	}

	body.mf-dj .mf-entete .dj-volume__barre {
		width: 52px;
	}
}

/* Téléphone : le logo seul (le nom reste lu par les lecteurs d'écran), Menu,
   volume et Pause sur une seule ligne. */
@media (max-width: 480px) {
	body.mf-dj :is(.mf-entete, header.mf-rangee) {
		gap: 0.5rem;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .mf-marque a {
		font-size: 0;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-logo {
		height: 40px;
	}

	body.mf-dj .mf-entete .mf-menu-bouton {
		padding-inline: 0.85rem;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) :is(.dj-calme-bouton, .dj-volume) {
		margin-inline-start: 0;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-volume {
		padding-inline-end: 0.6rem;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-volume__barre {
		width: 64px;
	}

	/* Pages annexes : volume et Pause à droite de la marque, « Retour » dessous. */
	body.mf-dj header.mf-rangee .dj-volume {
		order: 1;
		margin-inline-start: auto;
	}

	body.mf-dj header.mf-rangee .dj-calme-bouton {
		order: 2;
	}

	body.mf-dj header.mf-rangee > .mf-lien {
		order: 3;
		flex-basis: 100%;
	}
}

/* Très petits téléphones (moins de 375 px) : barre et bouton Menu plus courts. */
@media (max-width: 374px) {
	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-volume__barre {
		width: 50px;
	}

	body.mf-dj .mf-entete .mf-menu-bouton {
		padding-inline: 0.7rem;
	}
}

/* 320 px : encore 22 px à gagner. */
@media (max-width: 340px) {
	body.mf-dj :is(.mf-entete, header.mf-rangee) {
		gap: 0.35rem;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-volume__barre {
		width: 38px;
	}

	body.mf-dj :is(.mf-entete, header.mf-rangee) .dj-volume__haut-parleur {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 1560px) {
	.dj-calme-bouton__texte {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* 13. Porte de garage ----------------------------------------------------- */

.dj-garage {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}

.dj-garage.is-active {
	pointer-events: auto;
	visibility: visible;
	cursor: progress;
}

.dj-garage__porte {
	position: absolute;
	top: 0;
	right: -3vw;
	left: -3vw;
	height: 100%;
	display: flex;
	flex-direction: column;
	transform: translateY(-104%);
	background-color: #0b1626;
	box-shadow: 0 30px 60px rgba(8, 17, 31, 0.6);
	will-change: transform;
}

.dj-garage__lame {
	position: relative;
	flex: 1;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0) 8%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.45) 100%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 90px),
		linear-gradient(180deg, #1d3050 0%, #15253d 45%, #0f1b2d 100%);
	border-bottom: 3px solid #050b14;
	transform-origin: 50% 0;
}

/* Rainure centrale de chaque lame. */
.dj-garage__lame::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	background: rgba(5, 11, 20, 0.55);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Lame du bas : bandes de sécurité jaunes et bleu nuit. */
.dj-garage__lame--seuil {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.35)),
		repeating-linear-gradient(-45deg, var(--dj-jaune, #f9b133) 0 34px, var(--dj-nuit, #0f1b2d) 34px 68px);
}

.dj-garage__lame--seuil::after {
	display: none;
}

/* Enseigne peinte au centre de la porte. */
.dj-garage__enseigne {
	position: absolute;
	top: 46%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.5rem, 1.6vh, 1rem);
	width: min(92vw, 56rem);
	padding: clamp(1.25rem, 3.5vh, 2.5rem) clamp(1.25rem, 4vw, 3rem);
	text-align: center;
	color: var(--dj-creme, #faf8f5);
	background-color: rgba(8, 17, 31, 0.72);
	border: 4px solid var(--dj-jaune, #f9b133);
	border-radius: 28px;
	box-shadow: 10px 10px 0 var(--dj-rouge, #e94a2d), inset 0 0 0 3px rgba(8, 17, 31, 0.9), inset 0 0 0 6px rgba(249, 177, 51, 0.35);
	transform: translate(-50%, -50%) rotate(-1.5deg);
}

.dj-garage__logo {
	display: block;
	width: auto;
	height: clamp(5rem, 18vh, 10rem);
	filter: drop-shadow(0 6px 18px rgba(233, 74, 45, 0.55));
}

.dj-garage__titre {
	margin: 0;
	font-family: var(--mf-police-titre, sans-serif);
	font-weight: 800;
	font-size: clamp(1.7rem, min(5vw, 6vh), 3.6rem);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.dj-garage__noms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-garage__noms li {
	padding: 0.45rem 0.9rem;
	font-family: var(--mf-police-repere, sans-serif);
	font-weight: 800;
	font-size: clamp(0.75rem, 1.5vw, 1rem);
	letter-spacing: 0.1em;
	color: var(--dj-nuit, #0f1b2d);
	background-color: var(--dj-jaune, #f9b133);
	border-radius: 999px;
}

.dj-garage__noms li:nth-child(3n + 2) { background-color: var(--dj-rouge, #e94a2d); color: #ffffff; }
.dj-garage__noms li:nth-child(3n + 3) { background-color: var(--dj-turquoise, #0e7c74); color: #ffffff; }

/* Néon « Ouverture » qui grésille. */
.dj-garage__neon {
	margin: 0.25rem 0 0;
	font-family: var(--mf-police-titre, sans-serif);
	font-weight: 800;
	font-size: clamp(1rem, 2.4vw, 1.5rem);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: #ffd88a;
	text-shadow: 0 0 6px #f9b133, 0 0 18px #e94a2d, 0 0 36px #e94a2d;
}

html.dj-mouvement .dj-garage.is-attente .dj-garage__neon {
	animation: dj-neon 0.9s steps(1, end) infinite;
}

.dj-garage__poignee {
	position: absolute;
	bottom: calc(100% / 9 + 1.2rem);
	left: 50%;
	width: clamp(7rem, 16vw, 11rem);
	height: 1.1rem;
	translate: -50% 0;
	background: linear-gradient(180deg, #c9d3e0, #7c8aa0);
	border: 2px solid #050b14;
	border-radius: 999px;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

/* Linteau avec deux gyrophares. */
.dj-garage__linteau {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: clamp(2.6rem, 6vh, 3.4rem);
	padding-inline: clamp(1rem, 4vw, 3rem);
	background-image: linear-gradient(180deg, #1d2a3d, #0a121e);
	border-bottom: 4px solid var(--dj-jaune, #f9b133);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
	transform: translateY(-110%);
}

.dj-garage__gyro {
	position: relative;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50% 50% 4px 4px;
	background: radial-gradient(circle at 50% 40%, #ffe3a3, #f17e30 60%, #a33a12);
	box-shadow: 0 0 0 3px #050b14;
}

html.dj-mouvement .dj-garage.is-alerte .dj-garage__gyro {
	animation: dj-gyro 0.5s steps(2, jump-none) infinite;
}

html.dj-mouvement .dj-garage.is-alerte .dj-garage__gyro:last-child {
	animation-delay: 0.25s;
}

/* Lumière chaude qui passe sous la porte à l'ouverture. */
.dj-garage__lumiere {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 70%;
	opacity: 0;
	background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 226, 160, 0.95), rgba(249, 177, 51, 0.45) 40%, rgba(233, 74, 45, 0) 75%);
	mix-blend-mode: screen;
	pointer-events: none;
}

.dj-garage__flash {
	position: absolute;
	inset: 0;
	z-index: 4;
	opacity: 0;
	background-color: #ffffff;
	pointer-events: none;
}

.dj-garage__consigne {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 5;
	margin: 0;
	padding: 0.4rem 0.8rem;
	font: 700 0.75rem/1.2 var(--mf-police-texte, sans-serif);
	color: var(--dj-creme, #faf8f5);
	background-color: rgba(8, 17, 31, 0.7);
	border-radius: 999px;
	opacity: 0.85;
}

/* Contenu révélé : transitions suspendues le temps de la mise en scène. */
.dj-sans-transition,
.dj-sans-transition *,
.dj-sans-transition *::before,
.dj-sans-transition *::after {
	transition: none !important;
}

@keyframes dj-neon {
	0%, 100% { opacity: 1; }
	12% { opacity: 0.25; }
	16% { opacity: 1; }
	47% { opacity: 0.6; }
	50% { opacity: 1; }
}

@keyframes dj-gyro {
	0% {
		filter: brightness(1.6);
		box-shadow: 0 0 0 3px #050b14, 0 0 22px 10px rgba(241, 126, 48, 0.85), 0 0 70px 30px rgba(249, 177, 51, 0.35);
	}

	100% {
		filter: brightness(0.6);
		box-shadow: 0 0 0 3px #050b14;
	}
}

/* Animations continues (coupées par le bouton Pause). */
html.dj-mouvement:not(.dj-calme) body.mf-dj .dj-mot-feu {
	animation: dj-feu 5s ease-in-out infinite alternate;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj.mf-experience .mf-hero::before {
	animation: dj-lueur 9s ease-in-out infinite alternate;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj .mf-hero::after {
	animation: dj-grain 0.9s steps(4) infinite;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj .mf-hero .mf-hero-indice a::before {
	animation: dj-pulse 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj .dj-fleche {
	animation: dj-rebond 1.4s var(--dj-ressort) infinite;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj #moment::before {
	animation: dj-derive 14s ease-in-out infinite alternate;
}

html.dj-mouvement:not(.dj-calme) body.mf-dj #moment::after {
	animation: dj-derive 17s ease-in-out infinite alternate-reverse;
}

html.dj-mouvement:not(.dj-calme) .dj-bandeau:not(.is-hors-champ) .dj-bandeau__ruban--a .dj-bandeau__piste {
	animation: dj-defile 38s linear infinite;
}

html.dj-mouvement:not(.dj-calme) .dj-bandeau:not(.is-hors-champ) .dj-bandeau__ruban--b .dj-bandeau__piste {
	animation: dj-defile 46s linear infinite reverse;
}


/* Pause : la lueur de l'ouverture s'arrête (sans cette règle, la respiration de
   mf-experience.css repartirait pour 15 s). Ruban hors de l'écran : figé. */
html.dj-calme body.mf-dj .mf-hero::before {
	animation: none;
}

@keyframes dj-feu {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

@keyframes dj-lueur {
	0% { opacity: 0.7; scale: 0.9; translate: -50% -50%; }
	50% { opacity: 1; scale: 1.08; translate: -44% -54%; }
	100% { opacity: 0.8; scale: 1; translate: -54% -46%; }
}

@keyframes dj-grain {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-3%, 2%); }
	50% { transform: translate(2%, -3%); }
	75% { transform: translate(-2%, -1%); }
	100% { transform: translate(1%, 3%); }
}

@keyframes dj-pulse {
	0% { opacity: 0.9; scale: 1; }
	100% { opacity: 0; scale: 1.35; }
}

@keyframes dj-rebond {
	0%, 100% { translate: 0 -3px; }
	50% { translate: 0 4px; }
}

@keyframes dj-derive {
	from { translate: 0 0; scale: 1; }
	to { translate: 12vw 8vh; scale: 1.2; }
}

@keyframes dj-defile {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}


/* 14. Mouvements réduits, pause, impression ------------------------------- */

/* En pause (bouton « Pause ») : rien ne se déplace. */
html:not(.dj-mouvement) body.mf-dj .mf-bouton,
html:not(.dj-mouvement) body.mf-dj .mf-hero .mf-hero-indice a {
	transform: none;
}

html:not(.dj-mouvement) body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-episode, .mf-valeur),
html:not(.dj-mouvement) body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-episode, .mf-valeur):is(:hover, :focus-within) {
	--dj-ty: 0px;
	--dj-rx: 0deg;
	--dj-ry: 0deg;
	transform: none;
}

/* Les penchés fixes restent ; seuls les mouvements au survol sont coupés. */
html:not(.dj-mouvement) body.mf-dj :is(.mf-panneau, .mf-carte):hover .mf-badge--cuivre {
	--dj-penche: -3deg;
	rotate: var(--dj-penche);
	scale: none;
}

html:not(.dj-mouvement) body.mf-dj .mf-option:hover {
	--dj-penche: 0deg;
}

html:not(.dj-mouvement) body.mf-dj .mf-option:hover,
html:not(.dj-mouvement) body.mf-dj .mf-marque a:is(:hover, :focus-visible) .dj-logo,
html:not(.dj-mouvement) body.mf-dj .mf-panneau:hover img.mf-media {
	rotate: none;
	scale: none;
}

html:not(.dj-mouvement) body.mf-dj .mf-titre-section::after {
	transform: none !important;
}

@media print {
	.dj-bandeau,
	.dj-garage,
	.dj-particules,
	.dj-braises,
	.dj-calme-bouton,
	.dj-volume {
		display: none !important;
	}

	html.dj-anim body.mf-dj .mf-revele,
	html.dj-anim body.mf-dj .mf-mot {
		opacity: 1 !important;
		clip-path: none !important;
		translate: none !important;
		rotate: none !important;
		scale: none !important;
		filter: none !important;
	}

	body.mf-dj :is(.mf-carte, .mf-panneau, .mf-tableau-col, .mf-consultation, .mf-valeur) {
		box-shadow: none;
	}
}