/* MFR - Logos obligatoires : affichage front responsive (logos entiers, sans déformation)
   Carousel : 3 logos NETS par vue sur PC, 2 sur tablette, 1 sur mobile. */

.mflo-partners {
	--mflo-h: 90px;
	--mflo-gap: 40px;
	--mflo-per: 3;   /* nombre de logos affichés par vue (surchargé par le JS / le média mobile) */
	--mflo-arrow: 52px; /* largeur de la gouttière réservée à chaque flèche */
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

.mflo-partners * { box-sizing: border-box; }

.mflo-partners-title {
	text-align: center;
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 700;
}

/* Le conteneur porte les gouttières des flèches (HORS de la zone masquée),
   ainsi la fenêtre masque exactement à la limite des N logos : jamais de demi-logo. */
.mflo-carousel { position: relative; }
.mflo-partners.mflo-is-carousel .mflo-carousel {
	padding: 0 var(--mflo-arrow);
}

/* Fenêtre du carousel : masque horizontalement pile à la largeur de N logos.
   Pas de padding horizontal ici -> aucun logo ne dépasse. Padding vertical
   uniquement, pour laisser de l'air en haut/bas (logos jamais rognés). */
.mflo-viewport {
	overflow: hidden;
	width: 100%;
	padding: 12px 0;
}

/* Piste : rangée horizontale qui se déplace en translation. */
.mflo-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	transition: transform .3s ease;
	will-change: transform;
}

/* Moins de logos que la capacité d'une vue : on les centre, pas de défilement. */
.mflo-partners:not(.mflo-is-carousel) .mflo-grid { justify-content: center; }

/* Flèches : positionnées dans les gouttières du conteneur (à côté des logos,
   jamais par-dessus). Couleur #CDAC5F forcée dans TOUS les états. */
.mflo-partners .mflo-arrow,
.mflo-partners .mflo-arrow:link,
.mflo-partners .mflo-arrow:visited,
.mflo-partners .mflo-arrow:hover,
.mflo-partners .mflo-arrow:focus,
.mflo-partners .mflo-arrow:active,
.mflo-partners .mflo-arrow:focus-visible {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50% !important;
	align-items: center;
	justify-content: center;
	z-index: 3;
	cursor: pointer;
	background: #CDAC5F !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
	text-shadow: none !important;
	outline: none !important;
	font-size: 24px !important;
	line-height: 1 !important;
	padding: 0 !important;
	font-family: inherit !important;
}
.mflo-arrow-prev { left: 0; }
.mflo-arrow-next { right: 0; }
.mflo-partners .mflo-arrow { display: none; }
.mflo-partners.mflo-is-carousel .mflo-arrow { display: flex; }

/* Chaque logo occupe exactement 1/N de la largeur de la fenêtre (N = logos par vue).
   L'espacement entre logos passe par le padding interne pour que les translations
   en % soient exactes (pas de décalage dû à un gap). */
.mflo-item {
	flex: 0 0 calc(100% / var(--mflo-per));
	max-width: calc(100% / var(--mflo-per));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--mflo-h);
	padding: 0 calc(var(--mflo-gap) / 2);
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease;
}

/* Le logo garde ses proportions : contenu entier, jamais déformé ni rogné. */
.mflo-item .mflo-logo,
.mflo-item img {
	display: block;
	height: auto;
	width: auto;
	max-height: var(--mflo-h);
	max-width: 100%;
	object-fit: contain;
}

/* Liens : léger effet au survol, sans déformer le logo */
a.mflo-item:hover { transform: translateY(-2px); }
a.mflo-item:focus-visible { outline: 2px solid #CDAC5F; outline-offset: 4px; border-radius: 4px; }

/* Option niveaux de gris (couleur au survol) — carousel ET grille statique */
.mflo-grayscale .mflo-item img,
.mflo-grayscale .mflo-static-item img { filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.mflo-grayscale .mflo-item:hover img,
.mflo-grayscale a.mflo-item:focus-visible img,
.mflo-grayscale .mflo-static-item:hover img,
.mflo-grayscale a.mflo-static-item:focus-visible img { filter: grayscale(0); opacity: 1; }

/* ==================================================================
   Affichage STATIQUE en grille (shortcode [mfr_logos_obligatoires_statique])
   2 logos par ligne par défaut, sur tous les écrans. Aucun carousel,
   logos entiers, sans déformation ni recadrage.
   ================================================================== */
.mflo-static {
	--mflo-h: 90px;
	--mflo-gap: 40px;
	--mflo-cols: 2;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}
.mflo-static * { box-sizing: border-box; }

.mflo-static-grid {
	display: grid;
	grid-template-columns: repeat(var(--mflo-cols), 1fr);
	gap: var(--mflo-gap);
	align-items: center;
	justify-items: center;
}

.mflo-static-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--mflo-h);
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease;
}
.mflo-static-item .mflo-logo,
.mflo-static-item img {
	display: block;
	height: auto;
	width: auto;
	max-height: var(--mflo-h);
	max-width: 100%;
	object-fit: contain;
}
a.mflo-static-item:hover { transform: translateY(-2px); }
a.mflo-static-item:focus-visible { outline: 2px solid #CDAC5F; outline-offset: 4px; border-radius: 4px; }

/* La grille statique garde 2 colonnes partout ; on réduit juste la hauteur
   et l'espacement sur petits écrans pour rester propre et lisible. */
@media (max-width: 782px) {
	.mflo-static { --mflo-gap: 24px; }
	.mflo-static-item { height: calc(var(--mflo-h) * 0.85); }
	.mflo-static-item img { max-height: calc(var(--mflo-h) * 0.85); }
}
@media (max-width: 480px) {
	.mflo-static { --mflo-gap: 16px; }
	.mflo-static-item { height: calc(var(--mflo-h) * 0.72); }
	.mflo-static-item img { max-height: calc(var(--mflo-h) * 0.72); }
}

/* Tablette : 2 logos par vue. */
@media (max-width: 1024px) {
	.mflo-partners { --mflo-per: 2; --mflo-gap: 32px; }
}

/* Mobile : 1 logo par vue, hauteur réduite pour rester lisible. */
@media (max-width: 782px) {
	.mflo-partners { --mflo-gap: 28px; --mflo-per: 1; --mflo-arrow: 44px; }
	.mflo-item { height: calc(var(--mflo-h) * 0.85); }
	.mflo-item img { max-height: calc(var(--mflo-h) * 0.85); }
}

@media (max-width: 480px) {
	.mflo-partners { --mflo-gap: 22px; --mflo-arrow: 38px; }
	.mflo-item { height: calc(var(--mflo-h) * 0.72); }
	.mflo-item img { max-height: calc(var(--mflo-h) * 0.72); }
}