/* ============================================================
   CD — Défilé de logos (marquee)
   ------------------------------------------------------------
   - 1 à 3 rangées, sens alterné (JS pose data-dir).
   - Auto : animation CSS translateX(-50%) ; le moteur duplique
     la séquence pour que -50% = une copie (boucle sans couture).
   - Au scroll : le moteur pose transform directement (pas d'anim).
   - Filtre : niveaux de gris (filter) ou monochrome (masque CSS).
   ============================================================ */

.ck-marquee {
	--ck-logo-h: 44px;
	--ck-gap: 56px;
	--ck-row-gap: 28px;
	--ck-logo-op: 1;
	--ck-gs: 100%;
	--ck-fade-w: 80px;
	display: flex;
	flex-direction: column;
	gap: var(--ck-row-gap);
	width: 100%;
	overflow: hidden;
}

/* Fondu des bords (masque en dégradé sur les côtés). */
.ck-marquee--fade {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ck-fade-w), #000 calc(100% - var(--ck-fade-w)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--ck-fade-w), #000 calc(100% - var(--ck-fade-w)), transparent 100%);
}

.ck-mq-row {
	width: 100%;
	overflow: hidden;
}

.ck-mq-track {
	display: flex;
	align-items: center;
	gap: var(--ck-gap);
	width: max-content;
	will-change: transform;
}

/* Un logo (lien ou non) */
.ck-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

/* Image classique (aucun filtre / niveaux de gris).
   Hauteur/ largeur en !important : Elementor et certains thèmes posent un
   `img { height: auto }` qui écraserait la hauteur (logo réduit à 0). */
.ck-marquee .ck-logo__img {
	height: var(--ck-logo-h) !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
	opacity: var(--ck-logo-op, 1);
	transition: filter .3s ease, opacity .3s ease;
}

/* Niveaux de gris : vrai filtre CSS, l'image reste lisible. */
.ck-marquee--grayscale .ck-logo__img {
	filter: grayscale(var(--ck-gs, 100%));
}

/* Monochrome : filtre duotone SVG (--ck-duo posé sur la racine par le PHP).
   Recolore par luminance → foncé = couleur choisie, blanc = blanc. Le logo
   reste lisible (≠ aplat) et un fond blanc n'est pas transformé en bloc. */
.ck-marquee--monochrome .ck-logo__img {
	filter: var(--ck-duo);
}

/* Révélation au survol : on retire le filtre → couleurs d'origine. */
.ck-marquee--reveal .ck-logo:hover .ck-logo__img {
	filter: none;
	opacity: 1;
}

/* Défilement automatique : anim posée par le moteur (durée + sens inline). */
@keyframes ck-mq-move {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause au survol (mode auto uniquement). */
.ck-marquee--auto[data-pause="1"]:hover .ck-mq-track {
	animation-play-state: paused;
}

/* Accessibilité : on coupe tout mouvement si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
	.ck-mq-track {
		animation: none !important;
		transform: none !important;
	}
}