/* ──────────────────────────────────────────────────────────────────────────
 * L'INTRO — le voile plein écran, et rien d'autre.
 *
 * Cette feuille vit À PART de `css/site.css`, qui est la copie conforme du
 * prototype et qu'une porte refuse de voir diverger. L'intro n'existe pas dans
 * le prototype : c'est un comportement du site servi.
 *
 * LE VOILE EST POSÉ PAR LE SERVEUR, pas par JavaScript. S'il était injecté
 * après coup, la page paraîtrait une fraction de seconde avant d'être
 * recouverte — c'est le défaut de toutes les intros faites au script, et il se
 * voit. Il est donc dans le HTML dès la première image, et c'est le script qui
 * le RETIRE.
 *
 * UNE CLASSE, PAS UN IDENTIFIANT. Le standard de la maison refuse les
 * sélecteurs d'id, et il a raison : un id ne se réutilise pas, et il écrase
 * tout le reste dans la cascade. Le voile n'avait aucun besoin d'un id — le
 * script le trouve aussi bien par sa classe.
 *
 * COROLLAIRE : si JavaScript ne s'exécute pas, le voile resterait pour
 * toujours. D'où la règle `no-js` plus bas, et le filet de six secondes côté
 * script.
 * ────────────────────────────────────────────────────────────────────────── */

.fabrique-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--blanc-casse, #fefefe);
	transition: opacity .6s ease, visibility 0s linear .6s;
}

/* LE LOGO, EN VECTORIEL ET EN LIGNE. Il occupe 62 % de la largeur, jamais
   plus de 46 % de la hauteur : sur un écran large et bas, c'est la hauteur qui
   contraint, pas la largeur. */
.fabrique-intro .intro-logo {
	width: min(62vw, 980px);
	max-height: 46vh;
	/* RÈGLE 3 de la maison : rien ici n'intercepte le pointeur. */
	pointer-events: none;
	/* Les pièces sont posées hors cadre au premier rendu ; sans ce masque, on
	   verrait le logo entier une fraction de seconde avant qu'elles ne partent. */
	opacity: 0;
}

.fabrique-intro.intro-prete .intro-logo { opacity: 1; }

.fabrique-intro .intro-logo svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 46vh;
	/* Les pièces sortent du cadre pendant la chute et le souffle : sans ça,
	   le viewBox les rognerait et elles apparaîtraient au bord. */
	overflow: visible;
}

@media (max-width: 680px) {
	.fabrique-intro .intro-logo { width: 84vw; }
}

/* Le voile se retire en fondu, puis sort de l'arbre. */
.fabrique-intro.intro-finie {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Le défilement est gelé PENDANT l'intro, et seulement pendant. La classe est
   posée par le serveur et retirée par le script — y compris par le filet de
   sécurité, pour qu'une page bloquée ne le reste pas. */
html.intro-ouverte,
html.intro-ouverte body {
	overflow: hidden;
}

/* La sortie, toujours atteignable : bouton visible, au clavier comme au doigt. */
.fabrique-intro .intro-passer {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--encre, #0a0303);
	background: transparent;
	color: var(--wp--preset--color--encre, #0a0303);
	font-family: var(--wp--preset--font-family--titre, inherit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.fabrique-intro .intro-passer:hover,
.fabrique-intro .intro-passer:focus-visible {
	background: var(--wp--preset--color--encre, #0a0303);
	color: var(--wp--preset--color--blanc-casse, #fefefe);
}

/* SANS JAVASCRIPT, PAS DE VOILE. `no-js` est sur `<html>` au chargement et le
   script l'enlève immédiatement : si le script ne tourne pas, la classe reste
   et le voile n'est jamais affiché. Un site qui se cache derrière une animation
   que le navigateur ne sait pas jouer est un site mort. */
html.no-js .fabrique-intro { display: none; }
html.no-js, html.no-js body { overflow: auto; }

/* Et une préférence de mouvement réduit ne voit jamais l'intro — y compris
   avant que le script ait eu le temps de s'exécuter. */
@media (prefers-reduced-motion: reduce) {
	.fabrique-intro { display: none; }
	html.intro-ouverte, html.intro-ouverte body { overflow: auto; }
}