/*
 * Merci Follain — mode projection (écran de 3 m, Full HD et 4K).
 *
 * Sans script, la page /projection/ reste une page lisible : les scènes
 * s'enchaînent verticalement. Avec le script, html reçoit .mf-projection-active :
 * une scène plein écran à la fois, la pellicule en bas, les commandes en haut.
 * Les tailles sont exprimées en vw / vh pour suivre la définition de l'écran.
 */

html.mf-projection-active {
	margin-top: 0 !important;
	overflow: hidden;
}

html.mf-projection-active body {
	overflow: hidden;
	background-color: var(--mf-noir, #05080c);
}

html.mf-projection-active #wpadminbar,
html.mf-projection-active #mf-son,
html.mf-projection-active .mf-proj-chronologie {
	display: none !important;
}

.mf-projection-active #projection {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	color: var(--mf-creme, #f5f2ec);
	background-color: var(--mf-noir, #05080c);
}

.mf-projection-active #projection.is-idle,
.mf-projection-active #projection.is-idle * {
	cursor: none;
}

/* Scènes : une seule visible, fondu lent entre deux scènes. */
.mf-projection-active #projection > .mf-proj-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4vh;
	min-height: 0;
	height: 100%;
	padding: 7vh 8vw 21vh;
	margin: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.6s ease, visibility 0s linear 1.6s;
}

.mf-projection-active #projection > .mf-proj-scene.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.6s ease, visibility 0s;
}

/* Apparition progressive du texte de la scène active. */
.mf-projection-active .mf-proj-scene > :not(.mf-proj-fond),
.mf-projection-active .mf-proj-etape > *,
.mf-projection-active .mf-proj-scene .mf-citation > * {
	opacity: 0;
	transform: translateY(1.4vh);
	transition: opacity 1.5s ease, transform 1.5s ease;
}

.mf-projection-active .mf-proj-scene.is-active > :not(.mf-proj-fond),
.mf-projection-active .mf-proj-scene.is-active .mf-proj-etape > *,
.mf-projection-active .mf-proj-scene.is-active .mf-citation > * {
	opacity: 1;
	transform: none;
}

.mf-projection-active .mf-proj-scene.is-active > :nth-child(2),
.mf-projection-active .mf-proj-scene.is-active .mf-proj-etape > :nth-child(2),
.mf-projection-active .mf-proj-scene.is-active .mf-citation > :nth-child(2) {
	transition-delay: 1.2s;
}

.mf-projection-active .mf-proj-scene.is-active > :nth-child(3),
.mf-projection-active .mf-proj-scene.is-active .mf-proj-etape > :nth-child(3),
.mf-projection-active .mf-proj-scene.is-active .mf-citation > :nth-child(3) {
	transition-delay: 2.4s;
}

.mf-projection-active .mf-proj-scene.is-active > :nth-child(4),
.mf-projection-active .mf-proj-scene.is-active .mf-citation > :nth-child(4) {
	transition-delay: 3.6s;
}

.mf-projection-active .mf-proj-scene.is-active > :nth-child(5) {
	transition-delay: 4.6s;
}

/* Fond photographique : lent mouvement de caméra pendant la scène. */
@keyframes mf-proj-travelling {
	from {
		transform: scale(1.07);
	}

	to {
		transform: scale(1);
	}
}

html.mf-projection-active .mf-proj-fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.55;
}

.mf-projection-active .mf-proj-scene.is-active .mf-proj-fond {
	animation: mf-proj-travelling 24s ease-out both;
}

/* Voile de lisibilité sous le texte. */
.mf-projection-active .mf-proj-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 45%, rgba(5, 8, 12, 0.15) 0%, rgba(5, 8, 12, 0.65) 70%),
		linear-gradient(180deg, rgba(5, 8, 12, 0.35) 0%, rgba(5, 8, 12, 0) 35%, rgba(5, 8, 12, 0.85) 100%);
}

/* Textes lisibles à distance. */
html.mf-projection-active .mf-proj-titre {
	max-width: 82vw;
	font-size: clamp(2.6rem, 5.6vw, 13rem);
	line-height: 1.06;
}

html.mf-projection-active .mf-proj-texte {
	max-width: 74vw;
	font-size: clamp(1.8rem, 3.6vw, 8.5rem);
	line-height: 1.2;
}

html.mf-projection-active .mf-proj-url {
	font-size: clamp(1.2rem, 2vw, 4.8rem);
}

html.mf-projection-active .mf-citation {
	max-width: 80vw;
}

html.mf-projection-active .mf-citation-ligne1 {
	font-size: clamp(2.4rem, 5vw, 12rem);
}

html.mf-projection-active .mf-citation-ligne2 {
	font-size: clamp(2rem, 4vw, 9.5rem);
}

html.mf-projection-active .mf-citation-ligne3 {
	font-size: clamp(1.6rem, 2.8vw, 6.5rem);
}

html.mf-projection-active .mf-signature {
	font-size: clamp(1rem, 1.4vw, 3.2rem);
}

/* Scènes construites à partir des étapes de la pellicule. */
.mf-proj-etape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2vh;
	max-width: 76vw;
}

body.mf-experience .mf-proj-etape .mf-etape-repere,
body.mf-experience .mf-proj-etape .mf-etape-titre,
body.mf-experience .mf-proj-etape .mf-etape-resume {
	padding: 0;
	margin: 0;
}

body.mf-experience .mf-proj-etape .mf-etape-repere {
	font-size: clamp(3rem, 8vw, 19rem);
	line-height: 0.9;
}

body.mf-experience .mf-proj-etape .mf-etape-titre {
	font-size: clamp(2rem, 4vw, 9.5rem);
}

body.mf-experience .mf-proj-etape .mf-etape-resume {
	max-width: 60vw;
	font-size: clamp(1.3rem, 2.1vw, 5rem);
	line-height: 1.4;
	color: var(--mf-creme, #f5f2ec);
}

/* Pellicule chronologique en bas de l'écran. */
.mf-proj-pellicule {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6vw;
	padding: 3.2vh 3vw 3vh;
	background:
		repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.16) 0 0.6vw, transparent 0.6vw 1.3vw) 0 1.1vh / 100% 0.45vh no-repeat,
		linear-gradient(0deg, rgba(5, 8, 12, 0.96) 0%, rgba(5, 8, 12, 0.75) 70%, rgba(5, 8, 12, 0) 100%);
}

.mf-proj-pellicule button {
	padding: 1vh 1.2vw;
	font: 600 clamp(0.9rem, 1.35vw, 3.2rem) / 1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mf-acier, #98a5b0);
	background: transparent;
	border: 0;
	border-top: 0.3vh solid rgba(245, 242, 236, 0.18);
	cursor: pointer;
	transition: color 0.6s ease, border-color 0.6s ease;
}

.mf-proj-pellicule button:hover,
.mf-proj-pellicule button.is-current {
	color: var(--mf-cuivre, #d6a56d);
	border-top-color: var(--mf-cuivre, #d6a56d);
}

.mf-proj-pellicule.is-hors-chronologie button {
	opacity: 0.55;
}

/* Temps restant de la scène. */
.mf-proj-temps {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	height: 0.35vh;
	min-height: 3px;
	background-color: rgba(245, 242, 236, 0.1);
}

.mf-proj-temps > span {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--mf-cuivre, #d6a56d);
}

/* Commandes du présentateur (masquées après 3 s d'inactivité de la souris). */
.mf-proj-commandes {
	position: absolute;
	top: 2vh;
	right: 2vw;
	z-index: 7;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	max-width: 60vw;
	transition: opacity 0.5s ease;
}

.mf-proj-commandes button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	font: 600 clamp(0.8rem, 0.9vw, 1.8rem) / 1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mf-creme, #f5f2ec);
	background-color: rgba(5, 8, 12, 0.6);
	border: 1px solid rgba(245, 242, 236, 0.35);
	border-radius: 2px;
	cursor: pointer;
}

.mf-proj-commandes button:hover,
.mf-proj-commandes button[aria-pressed="true"] {
	color: var(--mf-cuivre, #d6a56d);
	border-color: var(--mf-cuivre, #d6a56d);
}

.mf-proj-commandes button[aria-disabled="true"] {
	opacity: 0.5;
}

.mf-proj-aide {
	flex-basis: 100%;
	margin: 0.3rem 0 0;
	font: 400 clamp(0.75rem, 0.8vw, 1.6rem) / 1.4 var(--mf-police-texte, sans-serif);
	text-align: right;
	color: var(--mf-acier, #98a5b0);
}

.mf-projection-active #projection.is-idle .mf-proj-commandes {
	opacity: 0;
	pointer-events: none;
}

/* Une commande qui a le focus clavier reste visible, avec son contour. */
.mf-projection-active #projection.is-idle .mf-proj-commandes:has(:focus-visible) {
	opacity: 1;
	pointer-events: auto;
}

.mf-projection-active #projection.is-idle .mf-proj-commandes:has(:focus-visible) * {
	cursor: auto;
}

/* Bandeau « En pause ». */
.mf-proj-pause {
	position: absolute;
	top: 2vh;
	left: 2vw;
	z-index: 7;
	margin: 0;
	padding: 0.5rem 0.8rem;
	font: 600 clamp(0.8rem, 0.9vw, 1.8rem) / 1 var(--mf-police-repere, sans-serif);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mf-nuit, #0b1118);
	background-color: var(--mf-cuivre, #d6a56d);
}

.mf-proj-pause[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mf-projection-active #projection > .mf-proj-scene,
	.mf-projection-active .mf-proj-scene * {
		transition: none !important;
		animation: none !important;
	}
}