/**
 * Bloc Partenaires — grille et bandeau défilant.
 *
 * Le même bloc rend les deux : `--grid` sur la page « Nos Partenaires »,
 * `--marquee` sur l'accueil.
 */

.vc-partners {
	margin: 3rem 0;
}

.vc-partners-title {
	font-size: 1.4rem;
	letter-spacing: .04em;
	margin: 0 0 1.5rem;
	text-align: center;
	text-transform: uppercase;
}

.vc-partner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	justify-content: center;
	text-decoration: none;
}

/* Les logos gardent leurs couleurs d'origine (demande du club : pas de noir et
   blanc). Le survol les grossit légèrement pour signaler qu'ils sont cliquables. */
.vc-partner-image {
	height: auto;
	max-height: 70px;
	max-width: 100%;
	object-fit: contain;
	transition: transform .25s ease;
	width: auto;
}

.vc-partner:hover .vc-partner-image,
.vc-partner:focus-visible .vc-partner-image {
	transform: scale( 1.12 );
}

@media ( prefers-reduced-motion: reduce ) {
	.vc-partner-image { transition: none; }
}

.vc-partner-name {
	font-weight: 600;
}

.vc-partner-desc {
	color: #5b6156;
	font-size: .85rem;
	text-align: center;
}

/* ─── Grille ─────────────────────────────────────────────────────────────── */

/* Un groupe par catégorie (sponsors → partenaires → principaux). L'intertitre
   n'apparaît que lorsque plusieurs catégories sont affichées. */
.vc-partners-group + .vc-partners-group {
	margin-top: 2.5rem;
}

.vc-partners-group-title {
	font-size: 1.05rem;
	letter-spacing: .06em;
	margin: 0 0 1rem;
	text-align: center;
	text-transform: uppercase;
}

.vc-partners-list {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-partner-card {
	align-items: center;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, .07 );
	border-radius: 8px;
	display: flex;
	justify-content: center;
	min-height: 130px;
	padding: 1.25rem;
}

/* ─── Bandeau défilant ───────────────────────────────────────────────────── */

.vc-partners--marquee .vc-partners-viewport {
	display: flex;
	gap: 3rem;
	overflow: hidden;
	/* Les logos n'apparaissent ni ne disparaissent d'un coup au bord du cadre. */
	mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
	-webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
}

.vc-partners-track {
	align-items: center;
	animation: vc-partners-scroll 40s linear infinite;
	display: flex;
	flex-shrink: 0;
	gap: 3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-partner-logo {
	flex: 0 0 auto;
	width: 150px;
}

/* Deux pistes identiques défilent côte à côte ; la seconde prend la place de la
   première quand celle-ci sort du cadre, d'où la boucle sans raccord. */
@keyframes vc-partners-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( calc( -100% - 3rem ) ); }
}

.vc-partners--marquee:hover .vc-partners-track {
	animation-play-state: paused;
}

/* Une animation qui ne s'arrête jamais est pénible, voire nauséeuse, pour qui
   demande à réduire les mouvements : le bandeau redevient une grille. */
@media ( prefers-reduced-motion: reduce ) {
	.vc-partners-track {
		animation: none;
	}

	.vc-partners--marquee .vc-partners-viewport {
		flex-wrap: wrap;
		justify-content: center;
		mask-image: none;
		-webkit-mask-image: none;
	}

	.vc-partners--marquee .vc-partners-track[aria-hidden="true"] {
		display: none;
	}

	.vc-partners-track {
		flex-wrap: wrap;
		justify-content: center;
	}
}