/* =========================================================================
   Colorisation des images
   -------------------------------------------------------------------------
   Styles « monochrome » : chaque pixel opaque prend la couleur choisie, la
   transparence est conservée. Le filtre SVG correspondant est écrit dans le
   pied de page par inc/colorisation.php (et injecté dans le canevas de
   l'éditeur par assets/js/colorisation-editeur.js).

   Le style se pose sur une image, ou sur un groupe, des colonnes ou une
   galerie : toutes les images contenues sont alors colorisées.
   ========================================================================= */

.is-style-monochrome-bleu img,
.is-style-monochrome-jaune img,
.is-style-monochrome-blanc img {
	transition: filter 220ms ease;
}

.is-style-monochrome-bleu img  { filter: url( "#egal-mono-bleu" ); }
.is-style-monochrome-jaune img { filter: url( "#egal-mono-jaune" ); }
.is-style-monochrome-blanc img { filter: url( "#egal-mono-blanc" ); }

/* Au survol de l'image — ou au focus clavier quand elle est dans un lien —
   les couleurs d'origine reviennent. Le survol porte sur chaque image, pas
   sur le groupe : une rangée de logos se révèle donc un par un. */
.is-style-monochrome-bleu img:hover,
.is-style-monochrome-jaune img:hover,
.is-style-monochrome-blanc img:hover,
.is-style-monochrome-bleu a:hover img,
.is-style-monochrome-jaune a:hover img,
.is-style-monochrome-blanc a:hover img,
.is-style-monochrome-bleu a:focus-visible img,
.is-style-monochrome-jaune a:focus-visible img,
.is-style-monochrome-blanc a:focus-visible img {
	filter: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.is-style-monochrome-bleu img,
	.is-style-monochrome-jaune img,
	.is-style-monochrome-blanc img {
		transition: none;
	}
}