/* Recrutement Circulaire — mouvement : apparitions, rotation du label, défilement des logos, survols. */

/*
 * Apparition au défilement : uniquement si le script a démarré (classe rc-js sur <html>).
 * Le glissement passe par « translate » et non « transform » : un élément qui apparaît et se lève au survol
 * (cartes, vignettes) garde ainsi son propre « transform » pour le survol.
 */
.rc-js [data-rc-apparition] { opacity: 0; translate: 0 28px; transition: opacity .8s var(--rc-courbe) var(--rc-delai, 0ms), translate .8s var(--rc-courbe) var(--rc-delai, 0ms); }
.rc-js [data-rc-apparition].is-visible { opacity: 1; translate: none; }

/* Titres et slogans : mot par mot */
.rc-mot { display: inline-block; }
.rc-js [data-rc-mots] .rc-mot { opacity: 0; transform: translateY(.35em); transition: opacity .6s var(--rc-courbe), transform .6s var(--rc-courbe); transition-delay: calc(var(--i) * 50ms); }
.rc-js [data-rc-mots].is-visible .rc-mot { opacity: 1; transform: none; }

/* Premier écran (premier bloc de la page) : il n'attend pas le script, l'animation démarre dès le premier rendu (LCP, référencement). */
@keyframes rc-entree { from { opacity: 0; translate: 0 28px; } }
@keyframes rc-entree-glisse { from { translate: 0 28px; } }
@keyframes rc-entree-mot { from { opacity: 0; transform: translateY(.35em); } }
#contenu > :first-child [data-rc-apparition], #contenu > :first-child[data-rc-apparition] { opacity: 1; translate: none; animation: rc-entree .8s var(--rc-courbe) both; }
/* Un bloc qui contient une image (photo du hero) ne fait que glisser : Chrome ne retient pas comme LCP une image peinte d'abord à opacité nulle. */
#contenu > :first-child [data-rc-apparition]:has(img), #contenu > :first-child[data-rc-apparition]:has(img) { animation-name: rc-entree-glisse; }
#contenu > :first-child [data-rc-mots] .rc-mot { opacity: 1; transform: none; transition: none; animation: rc-entree-mot .6s var(--rc-courbe) both; animation-delay: calc(var(--i) * 50ms); }

/* Label : l'étoile et son ombre tournent, le contenu reste fixe. L'ombre tourne autour de son propre centre (décalé). */
@keyframes rc-tour { to { transform: rotate(360deg); } }
.rc-label__ombre, .rc-label__etoile { animation: rc-tour 40s linear infinite; }
.rc-label__ombre { transform-origin: 54.1% 54.1%; }

/*
 * Bandeau de logos : la piste contient la liste plusieurs fois (autant de listes dans chaque moitié, la moitié étant plus large
 * que la fenêtre). Elle avance de la moitié de sa largeur puis recommence, sans saut. La durée (--rc-duree) est posée par le
 * gabarit : 5 s par logo d'une moitié, donc une vitesse constante.
 */
@keyframes rc-defile { to { transform: translateX(-50%); } }
.rc-logos__piste { animation: rc-defile var(--rc-duree, 40s) linear infinite; }
.rc-logos:hover .rc-logos__piste { animation-play-state: paused; }
/* Au clavier : la piste revient au début, où se trouve la liste lue (les logos atteints sont visibles), sans fondu sur les bords. */
.rc-logos:focus-within .rc-logos__piste { animation: none; }
.rc-logos:focus-within .rc-logos__fenetre { -webkit-mask: none; mask: none; }

/* Survols. Les éléments qui apparaissent ET se lèvent déclarent ici leurs deux transitions (la règle d'apparition l'emporterait sinon). */
.rc-survol-zoom img { transition: transform .6s var(--rc-courbe); }
.rc-survol-zoom:hover img { transform: scale(1.02); }
.rc-survol-leve { transition: transform .4s var(--rc-courbe); }
.rc-survol-leve:hover { transform: translateY(-4px); }
.rc-js .rc-survol-leve[data-rc-apparition] { transition: opacity .8s var(--rc-courbe) var(--rc-delai, 0ms), translate .8s var(--rc-courbe) var(--rc-delai, 0ms), transform .4s var(--rc-courbe); }

/* Le visiteur a demandé moins d'animations : tout est immobile et visible */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
	.rc-js [data-rc-apparition], .rc-js [data-rc-mots] .rc-mot { opacity: 1; translate: none; transform: none; }
	.rc-survol-zoom:hover img, .rc-survol-leve:hover, .rc-btn:hover { transform: none; }
	/* Bandeau de logos : une seule liste, centrée, qui passe à la ligne ; les copies sont masquées. */
	.rc-logos__fenetre { padding-inline: 24px; -webkit-mask: none; mask: none; }
	.rc-logos__piste { width: auto; justify-content: center; }
	.rc-logos__liste[aria-hidden="true"] { display: none; }
	.rc-logos__liste { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 32px 48px; padding-right: 0; }
}

/* Impression : tout est visible, même sous rc-js */
@media print {
	[data-rc-apparition], .rc-mot { opacity: 1 !important; translate: none !important; transform: none !important; transition: none !important; animation: none !important; }
}