/**
 * Merci Follain — thème clair rouge, jaune, gris (tout le site sauf la projection).
 *
 * Demandes du 27/10 : palette rouge #E94A2D, jaune #F9B133, gris #E2E2E2, puis
 * « remplacer le noir par le gris » pour un site plus simple et plus chaleureux,
 * d'abord sur l'accueil et « Notre histoire », ensuite sur tout le site.
 * Chargée par le plugin sur toutes les pages, sauf la projection (mode
 * projection), qui garde le thème sombre adapté à l'écran de projection.
 *
 * Les couleurs se modifient dans Elementor (Variables) : mf-gris,
 * mf-gris-soutenu, mf-gris-clair, mf-texte, mf-texte-doux, mf-jaune, mf-rouge,
 * mf-rouge-fonce. Cette feuille fixe seulement leur rôle :
 * fonds gris ; texte gris très foncé ; jaune en aplat (boutons, encadrés) ;
 * rouge en décor (filets, contours, progression) ; rouge foncé pour les
 * accents en texte, le focus et l'étape sélectionnée, seul rouge lisible sur
 * le gris. Les sélecteurs commencent par body:not(.mf-mode-projection) : la
 * classe ajoutée suffit à l'emporter sur les classes Elementor (0,2,0), et la
 * feuille est imprimée après mf-experience.css quand celle-ci est chargée.
 *
 * Contrastes calculés (WCAG AA) : texte ≥ 10:1 ; texte doux et rouge foncé
 * ≥ 4,93:1 sur les fonds unis, ≥ 4,66:1 au pire sur les images atténuées de
 * l'ouverture et de la conclusion ; bouton 8,2:1 ; focus ≥ 4,85:1.
 */

/* Jetons : les anciens rôles « sombre » et « clair » sont inversés. */
body:not(.mf-mode-projection) {
	--mf-nuit: var(--mf-texte, #262626);
	--mf-creme: var(--mf-texte, #262626);
	--mf-acier: var(--mf-texte-doux, #575757);
	--mf-noir: var(--mf-gris-soutenu, #d6d6d6);
	--mf-cuivre: var(--mf-rouge-fonce, #a62811);
	--mf-cuivre-fonce: var(--mf-rouge-fonce, #a62811);
	--mf-braise: var(--mf-rouge, #e94a2d);
}

body.mf-experience:not(.mf-mode-projection) {
	background-color: var(--mf-gris, #e2e2e2);
}

/* Fonds des sections (l'ordre compte : les variantes après la base). */
body:not(.mf-mode-projection) .mf-hero,
body:not(.mf-mode-projection) .mf-section {
	background-color: var(--mf-gris, #e2e2e2);
}

body:not(.mf-mode-projection) .mf-section--anthracite,
body:not(.mf-mode-projection) .mf-section--noir {
	background-color: var(--mf-gris-soutenu, #d6d6d6);
}

body:not(.mf-mode-projection) .mf-section--papier {
	background-color: var(--mf-gris-clair, #f5f5f5);
}

body:not(.mf-mode-projection) #reconstruire {
	background-image: linear-gradient(180deg, var(--mf-gris, #e2e2e2) 55%, color-mix(in srgb, var(--mf-rouge, #e94a2d) 10%, var(--mf-gris, #e2e2e2)) 100%);
}

/* Ouverture : image d'attente très atténuée sous un voile clair. */
body:not(.mf-mode-projection) .mf-hero-image {
	opacity: 0.15;
}

body:not(.mf-mode-projection) .mf-hero-voile {
	background-image: radial-gradient(ellipse at 50% 38%, rgba(226, 226, 226, 0.6) 0%, rgba(226, 226, 226, 0.8) 55%, #e2e2e2 100%);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	body:not(.mf-mode-projection) .mf-hero-voile {
		background-image: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--mf-gris, #e2e2e2) 60%, transparent) 0%, color-mix(in srgb, var(--mf-gris, #e2e2e2) 80%, transparent) 55%, var(--mf-gris, #e2e2e2) 100%);
	}
}

/* Visuels d'attente (fichiers mf-*.webp de 2026/10, sombres et étiquetés
   « à fournir ») : éclaircis en gris sur le thème clair. Les vraies photos,
   qui porteront un autre nom de fichier, s'affichent sans filtre. */
body:not(.mf-mode-projection) img[src*="/uploads/2026/10/mf-"] {
	filter: invert(0.86) grayscale(1);
}

/* Cartes, panneaux, tableaux et puces : surfaces claires. */
body:not(.mf-mode-projection) .mf-carte {
	background-color: rgba(255, 255, 255, 0.6);
}

body:not(.mf-mode-projection) .mf-panneau,
body:not(.mf-mode-projection) .mf-etape {
	background-color: var(--mf-gris-clair, #f5f5f5);
}

body:not(.mf-mode-projection) .mf-panneau {
	border-top-color: var(--mf-jaune, #f9b133);
}

body:not(.mf-mode-projection) .mf-tableau-col {
	background-color: rgba(255, 255, 255, 0.55);
}

body:not(.mf-mode-projection) .mf-consultation {
	background-color: rgba(255, 255, 255, 0.5);
}

body:not(.mf-mode-projection) .mf-placeholder-tag {
	background-color: rgba(255, 255, 255, 0.8);
}

body:not(.mf-mode-projection) .mf-badge {
	border-color: color-mix(in srgb, var(--mf-texte-doux, #575757) 55%, transparent);
}

body:not(.mf-mode-projection) .mf-badge--cuivre {
	border-color: color-mix(in srgb, var(--mf-rouge-fonce, #a62811) 75%, transparent);
}

/* Options de la consultation : texte pleinement lisible (5,98:1 au lieu de
   4,26:1 avec l'opacité de 80 %), le pointillé signale qu'elle n'est pas ouverte. */
body:not(.mf-mode-projection) .mf-option {
	opacity: 1;
	border-style: dashed;
}

/* Décor : un seul rouge, le rouge vif, pour les filets, contours et pointillés.
   Le rouge foncé reste réservé au texte, au focus et à l'étape sélectionnée. */
body:not(.mf-mode-projection) .mf-carte {
	border-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 22%, transparent);
}

body:not(.mf-mode-projection) .mf-etape {
	border-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 18%, transparent);
}

body:not(.mf-mode-projection) .mf-consultation {
	border-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 55%, transparent);
}

body:not(.mf-mode-projection) .mf-zone-docs {
	border-top-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 40%, transparent);
}

body:not(.mf-mode-projection) .mf-placeholder-tag {
	border-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 70%, transparent);
}

body:not(.mf-mode-projection) #pied-de-page {
	border-top-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 25%, transparent);
}

body:not(.mf-mode-projection) .mf-note {
	background-color: color-mix(in srgb, var(--mf-jaune, #f9b133) 22%, transparent);
	border-left-color: var(--mf-jaune, #f9b133);
}

/* Boutons : jaune en aplat ; au survol, rouge foncé et texte blanc (7,2:1). */
body:not(.mf-mode-projection) .mf-bouton {
	background-color: var(--mf-jaune, #f9b133);
	border-color: var(--mf-jaune, #f9b133);
}

body:not(.mf-mode-projection) .mf-bouton:hover,
body:not(.mf-mode-projection) .mf-bouton:focus-visible {
	color: #ffffff;
	background-color: var(--mf-rouge-fonce, #a62811);
	border-color: var(--mf-rouge-fonce, #a62811);
}

body:not(.mf-mode-projection) .mf-bouton--fantome {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--mf-texte, #262626) 55%, transparent);
}

body:not(.mf-mode-projection) .mf-bouton--fantome:hover,
body:not(.mf-mode-projection) .mf-bouton--fantome:focus-visible {
	color: var(--mf-texte, #262626);
	background-color: var(--mf-jaune, #f9b133);
	border-color: var(--mf-jaune, #f9b133);
}

body:not(.mf-mode-projection) .mf-bouton--discret {
	background-color: rgba(255, 255, 255, 0.65);
	border-color: color-mix(in srgb, var(--mf-texte, #262626) 30%, transparent);
}

body:not(.mf-mode-projection) .mf-bouton--discret:hover,
body:not(.mf-mode-projection) .mf-bouton--discret:focus-visible {
	color: var(--mf-rouge-fonce, #a62811);
	background-color: rgba(255, 255, 255, 0.95);
	border-color: var(--mf-rouge-fonce, #a62811);
}

/* En-tête et menu compact. */
body.mf-experience:not(.mf-mode-projection) .mf-entete.is-scrolled,
body.mf-experience:not(.mf-mode-projection) .mf-entete.is-open {
	background-color: rgba(226, 226, 226, 0.94);
	box-shadow: 0 2px 0 rgba(233, 74, 45, 0.45);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	body.mf-experience:not(.mf-mode-projection) .mf-entete.is-scrolled,
	body.mf-experience:not(.mf-mode-projection) .mf-entete.is-open {
		background-color: color-mix(in srgb, var(--mf-gris, #e2e2e2) 94%, transparent);
		box-shadow: 0 2px 0 color-mix(in srgb, var(--mf-rouge, #e94a2d) 45%, transparent);
	}
}

@media (max-width: 1279px) {
	html.mf-js body:not(.mf-mode-projection) .mf-nav {
		background-color: var(--mf-gris-clair, #f5f5f5);
		border-bottom-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 25%, transparent);
	}
}

/* Pellicule : bande grise perforée de blanc, onglets clairs, sélection rouge. */
body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-pellicule-bande {
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 10px, transparent 10px 22px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 10px, transparent 10px 22px);
}

body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-etape {
	background-color: var(--mf-gris-clair, #f5f5f5);
}

body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
	border-color: var(--mf-rouge-fonce, #a62811);
	box-shadow: inset 0 0 0 1px var(--mf-rouge-fonce, #a62811);
}

body:not(.mf-mode-projection) .mf-pellicule__visuel::after {
	box-shadow: inset 0 0 80px rgba(38, 38, 38, 0.18);
}

body:not(.mf-mode-projection) .mf-pellicule__fleche {
	background-color: rgba(255, 255, 255, 0.7);
}

body:not(.mf-mode-projection) .mf-pellicule__barre > span {
	background-color: var(--mf-rouge, #e94a2d);
}

@media (max-width: 767px) {
	body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-pellicule-bande {
		background-image: none;
	}

	body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] {
		background-color: var(--mf-jaune, #f9b133);
	}

	body:not(.mf-mode-projection) .mf-pellicule.is-enhanced .mf-etape[aria-selected="true"] .mf-etape-repere {
		color: var(--mf-texte, #262626);
	}
}

/* Pages annexes : fond de page gris et filet rouge sous le bandeau du haut. */
body.elementor-page:not(.mf-mode-projection) {
	background-color: var(--mf-gris, #e2e2e2);
}

body:not(.mf-mode-projection) header.mf-rangee {
	border-bottom-color: color-mix(in srgb, var(--mf-rouge, #e94a2d) 25%, transparent);
}