/*
 * CSS des COMPOSITIONS.
 *
 * Le fond du héros Éducation aux médias, repris tel quel des maquettes V2 : sa
 * géométrie est dessinée à la main, lame par lame, et n'a pas vocation à être
 * réglée dans l'éditeur. Les textes et les boutons, eux, sont des blocs posés
 * par-dessus.
 *
 * Le héros d'accueil, lui, N'EST PLUS une composition : c'est le bloc Héros
 * fendu (§ 12 de blocks.css), où les photos et la forme qui les sépare se
 * règlent dans l'éditeur.
 *
 * SOMMAIRE
 *   1. Fond du héros EAM — la pluie de lames du diaphragme
 *   2. Titre alternant
 */


/* ==========================================================================
   1. FOND DU HÉROS ÉDUCATION AUX MÉDIAS
   --------------------------------------------------------------------------
   Vingt-cinq lames du diaphragme semées sur la largeur, dont cinq habillées
   d'une photographie. Repris tel quel du prototype.

   Le <defs> vit DANS le même <svg> que les <use> qui le référencent, et c'est
   nécessaire : le canevas de l'éditeur est une iframe, où un identifiant
   déclaré ailleurs dans la page n'existe pas. Le prototype posait ses <defs>
   en haut du <body> ; les formes seraient restées vides côté rédaction.
   ========================================================================== */

.cimo-hero-blades {
	position: absolute;
	/*
	 * Le prototype dimensionne en vw (114vw de large, calé à −7 %). En
	 * pourcentage de la section, l'aperçu de l'éditeur correspond exactement
	 * au site ; en vw, l'écart mesuré atteint 11 %, parce que vw se rapporte
	 * alors à la largeur du canevas.
	 */
	top: -6%;
	right: -7%;
	width: 114%;
	z-index: 0;
	pointer-events: none;
}

.cimo-hero-blades svg {
	display: block;
	width: 100%;
	height: auto;
	/* Ce SVG porte ses propres dimensions : il échappe au bridage à 50 px
	   des SVG sans dimensions, posé au § 2 de style.css. */
	max-height: none;
}

/* Les deux teintes de lames. Elles viennent de la palette : un changement de
   charte dans theme.json se propage au fond du héros. */
.cimo-hero-blades .blade-dark {
	fill: var( --cimo-teal );
}

.cimo-hero-blades .blade-light {
	fill: var( --cimo-yellow );
}


/* ==========================================================================
   2. TITRE ALTERNANT
   --------------------------------------------------------------------------
   Deux phrases qui se relaient dans le héros d'accueil. Pour l'obtenir, poser
   deux blocs Texte dans un Empilement et donner à celui-ci la classe
   « cimo-loop » : les enfants sont superposés et défilent à tour de rôle.
   ========================================================================== */

.cimo-loop {
	display: grid;
	overflow: hidden;
}

.cimo-loop > * {
	/* Superposés dans la même cellule : la hauteur du bloc est celle de la
	   phrase la plus haute, et rien ne saute d'une phrase à l'autre. */
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateX( 100% );
	animation: cimo-loop 6s infinite ease-in-out;
}

.cimo-loop > * + * {
	/* La seconde phrase entre quand la première est sortie. */
	animation-delay: 3s;
}

/*
 * Découpage des six secondes :
 *   0 → 8 %    entrée par la droite
 *   8 → 42 %   immobile, lisible
 *   42 → 50 %  sortie par la gauche
 *   50 → 100 % hors champ, pendant que l'autre phrase défile
 */
@keyframes cimo-loop {
	0% { transform: translateX( 100% ); opacity: 0; }
	8% { transform: translateX( 0 ); opacity: 1; }
	42% { transform: translateX( 0 ); opacity: 1; }
	50% { transform: translateX( -100% ); opacity: 0; }
	100% { transform: translateX( -100% ); opacity: 0; }
}

/*
 * Mouvement réduit : l'animation est coupée et seule la première phrase
 * reste. Un texte qui défile en boucle est inutilisable pour qui souffre de
 * troubles vestibulaires ou lit lentement — et le prototype ne prévoyait
 * aucun recours.
 */
@media ( prefers-reduced-motion: reduce ) {
	.cimo-loop > * {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.cimo-loop > * + * {
		display: none;
	}
}