/*
 * Les mouvements de l'accueil (novembre 2026), choisis par Miguel sur la proposition
 * https://claude.ai/artifact/V4nUZpZDzEj26W7arfsJe2 et mesurés sur la copie locale.
 *
 * Chargée seulement sur l'accueil. Elle vise le balisage que rll-accueil.php imprime
 * aujourd'hui (`.rll-acc .ac-…`) ; quand l'accueil sera refait en blocs (lot 3), ces règles
 * suivront la composition qui reprendra le passage « Dans les têtes → Écrit ».
 *
 * Tout est en CSS, sans bibliothèque. Le texte n'est jamais caché : seules des cases et un filet
 * bougent. Sans prise en charge des animations liées au défilement (Firefox aujourd'hui), ou pour
 * un visiteur qui a demandé moins d'animations, la section s'affiche telle qu'en ligne.
 */

/* ------------------------------------------------------------------ */
/* Le moment fort : des têtes à l'écrit                                */
/* ------------------------------------------------------------------ */

/* La flèche du passage se trace déjà au défilement (accueil.css). Dans la foulée, les cases
   vides de « Dans les têtes » pâlissent, les trois lignes de « Écrit » se remplissent l'une
   après l'autre, et le cadre de « Écrit » prend sa couleur : ce qui était dans les têtes est
   maintenant écrit, et tient. Chaque élément suit sa propre position à l'écran : la séquence
   joue pendant que le visiteur fait défiler la section, du bas de l'écran vers son milieu. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rll-acc .ac-colonne--tetes .ac-colonne__liste li::before {
			animation: rv-palir linear both;
			animation-timeline: view();
			animation-range: cover 10% cover 28%;
		}

		/* Le contour de la case est un trait, pas une ombre : il reste quand elle est vide. */
		.rll-acc .ac-colonne--ecrit .ac-colonne__liste li::before {
			outline: var(--wp--custom--trait--fin) solid var(--wp--preset--color--primary);
			outline-offset: calc(-1 * var(--wp--custom--trait--fin));
			animation: rv-remplir linear both;
			animation-timeline: view();
		}

		.rll-acc .ac-colonne--ecrit .ac-colonne__liste li:nth-child(1)::before {
			animation-range: cover 16% cover 26%;
		}

		.rll-acc .ac-colonne--ecrit .ac-colonne__liste li:nth-child(2)::before {
			animation-range: cover 21% cover 31%;
		}

		.rll-acc .ac-colonne--ecrit .ac-colonne__liste li:nth-child(3)::before {
			animation-range: cover 26% cover 36%;
		}

		.rll-acc .ac-colonne--ecrit {
			animation: rv-tenir linear both;
			animation-timeline: view();
			animation-range: cover 14% cover 34%;
		}
	}
}

@keyframes rv-palir {
	to {
		opacity: .35;
	}
}

@keyframes rv-remplir {
	from {
		background: transparent;
	}

	to {
		background: var(--wp--preset--color--primary);
	}
}

@keyframes rv-tenir {
	from {
		border-color: var(--wp--preset--color--rllfilet);
	}

	to {
		border-color: var(--wp--preset--color--primary);
	}
}

/* ------------------------------------------------------------------ */
/* Les retours d'action                                                */
/* ------------------------------------------------------------------ */

/* La flèche d'un lien avance déjà au survol de la souris (accueil.css). Elle avance aussi
   quand on arrive sur le lien au clavier, et ne bouge plus pour qui a demandé moins
   d'animations. Les cartes « Ce qu'on sait faire » ne sont pas des liens : elles ne prennent
   aucun signe de clic. */
.rll-acc a:focus-visible .ac-fleche-lien {
	transform: translateX(var(--ac-e1));
}

@media (prefers-reduced-motion: reduce) {
	.rll-acc .ac-fleche-lien,
	.rll-acc .ac-savoir__icone {
		transition: none;
	}

	.rll-acc a:hover .ac-fleche-lien,
	.rll-acc a:focus-visible .ac-fleche-lien,
	.rll-acc .ac-savoir:hover .ac-savoir__icone {
		transform: none;
	}
}