/* ==========================================================================
   Références clients (page-templates/tpl-references.php) — pas de maquette XD.
   Modèle : www.arxit.com/clients (retour client du 28/10/2026) : une seule grille de logos en couleur,
   4 par rangée, logo à 65 % de sa colonne (160px de haut au plus), zoom ×1,15 au survol (0,25 s),
   sans titre de région ; en mode sombre, la version blanche du logo (« Version mode sombre »), sans fond.
   ========================================================================== */

.references-page { padding-block: clamp(48px, 4.84vw, 93px) clamp(56px, 6.25vw, 120px); }
.references-page__intro { max-width: 900px; margin: calc(clamp(32px, 4.1vw, 78px) * -.5) 0 clamp(32px, 3.6vw, 70px); font-size: var(--fs-22); line-height: 1.36; }

.references-page__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: clamp(48px, 5.2vw, 100px) clamp(16px, 2.1vw, 41px); /* arxit.com : 100px sous chaque logo */
}
.references-page__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(80px, 6vw, 115px);
}
.references-page__item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.references-page__item img {
	display: block;
	width: auto;
	max-width: 65%;
	height: auto;
	max-height: clamp(100px, 8.3vw, 160px);
	transition: transform .25s;
}
.references-page__item a img { max-width: 65%; }
.references-page__item:hover img { transform: scale(1.15); }
.references-page__name { font-size: var(--fs-20); font-weight: 700; color: var(--c-text-strong); text-align: center; }

@media (max-width: 1140px) {
	.references-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.references-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}