/* =========================================================
   CLP Logos — Le Compagnon Leprince
   Défilé infini · grille encadrée · vitrine sombre · ligne épurée
   Vert #1a6bbf · Gris foncé #3a4660 · polices du thème Modins
   ========================================================= */
.clp-logos {
	--clp-accent: #1a6bbf;
	--clp-gris: #3a4660;
	--clp-logos-pad-x: 0px;
	--clp-logos-gap: 54px;
	--clp-logos-h: 52px;
	--clp-logos-speed: 30s;
	padding-left: var(--clp-logos-pad-x);
	padding-right: var(--clp-logos-pad-x);
}
.clp-logos *, .clp-logos *::before, .clp-logos *::after { box-sizing: border-box; }

/* ---------- En-tête (signature de la suite) ---------- */
.clp-logos__header { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.clp-logos__eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--modins-heading-font-family, inherit);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--clp-accent);
	margin-bottom: 12px;
}
.clp-logos__eyebrow::before,
.clp-logos__eyebrow::after {
	content: '';
	width: 30px;
	height: 2px;
	background: var(--clp-accent);
	border-radius: 2px;
	flex: 0 0 auto;
	opacity: .65;
}
.clp-logos__eyebrow::before { margin-right: 12px !important; }
.clp-logos__eyebrow::after  { margin-left: 12px !important; }

.clp-logos__title {
	font-family: var(--modins-heading-font-family, inherit);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: normal;
	color: var(--clp-gris);
	margin: 0 0 12px;
	text-transform: none;
}
.clp-logos__title em { font-style: normal; color: var(--clp-accent); position: relative; }
.clp-logos__title em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: .02em;
	height: .3em;
	background: var(--clp-accent);
	opacity: .14;
	border-radius: 3px;
	z-index: -1;
}
.clp-logos__subtitle {
	font-family: var(--modins-font-sans-serif, inherit);
	font-size: 1rem;
	line-height: 1.7;
	color: #59657a;
	margin: 0;
}

/* ---------- Item logo / badge texte ---------- */
.clp-logos__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease, filter .45s ease;
}
a.clp-logos__item:hover { text-decoration: none; transform: translateY(-4px); }
.clp-logos__img {
	display: block;
	height: var(--clp-logos-h) !important;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	border: 0;
	vertical-align: top;
}
/* Traitement des logos */
.clp-logos--lg-gray .clp-logos__img {
	filter: grayscale(1);
	opacity: .62;
}
.clp-logos--lg-gray .clp-logos__item:hover .clp-logos__img {
	filter: grayscale(0);
	opacity: 1;
}
.clp-logos--lg-white .clp-logos__img { filter: brightness(0) invert(1); opacity: .8; }
.clp-logos--lg-white .clp-logos__item:hover .clp-logos__img { opacity: 1; }
/* Reflet au sol */
.clp-logos--reflect .clp-logos__img {
	-webkit-box-reflect: below 3px linear-gradient(transparent 62%, rgba(0, 0, 0, .16));
}
/* Badge texte (sans image) — élégance capitale espacée */
.clp-logos__name {
	font-family: var(--modins-heading-font-family, inherit);
	font-size: calc(var(--clp-logos-h) * .34);
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #6E7680;
	white-space: nowrap;
	line-height: 1.2;
	transition: color .35s ease;
}
.clp-logos__item:hover .clp-logos__name { color: var(--clp-accent); }

/* =========================================================
   DESIGN 1 — DÉFILÉ INFINI
   ========================================================= */
.clp-logos--defile .clp-logos__band {
	position: relative;
	overflow: hidden;
	padding: 20px 0;
	/* fondu élégant sur les bords */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clp-logos__track {
	display: flex;
	width: max-content;
	animation: clpLogosScroll var(--clp-logos-speed) linear infinite;
}
.clp-logos--reverse .clp-logos__track { animation-direction: reverse; }
/* Quand le JS pilote le défilé (drag + inertie + loupe), l'animation CSS s'efface */
.clp-logos__band.is-js .clp-logos__track { animation: none; }
.clp-logos__band.is-js { cursor: grab; }
.clp-logos__band.is-js.is-dragging { cursor: grabbing; }
.clp-logos__band.is-js .clp-logos__item { -webkit-user-drag: none; user-select: none; }
.clp-logos__band.is-js .clp-logos__img { pointer-events: none; }
.clp-logos__set {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-right: var(--clp-logos-gap);
}
.clp-logos__set .clp-logos__item { margin-right: var(--clp-logos-gap) !important; }
@keyframes clpLogosScroll { to { transform: translateX(-50%); } }

/* =========================================================
   DESIGN 2 — GRILLE ENCADRÉE
   ========================================================= */
.clp-logos--grille .clp-logos__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--clp-logos-gap) * .35);
	max-width: 1040px;
	margin: 0 auto;
}
.clp-logos--grille .clp-logos__item {
	background: #fff;
	border: 1px solid rgba(58, 70, 96, .10);
	border-radius: 16px;
	padding: 22px 30px;
	min-width: 170px;
	min-height: calc(var(--clp-logos-h) + 44px);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, filter .45s ease;
}
.clp-logos--grille .clp-logos__item:hover {
	transform: translateY(-5px);
	border-color: rgba(26, 107, 191, .4);
	box-shadow: 0 18px 38px rgba(58, 70, 96, .12);
}

/* =========================================================
   DESIGN 3 — VITRINE SOMBRE
   ========================================================= */
.clp-logos--sombre {
	background: linear-gradient(135deg, #273246, #3a4660);
	border-radius: 22px;
	padding: 44px calc(var(--clp-logos-pad-x) + 44px);
}
.clp-logos--sombre .clp-logos__title { color: #fff; }
.clp-logos--sombre .clp-logos__subtitle { color: rgba(255, 255, 255, .72); }
.clp-logos--sombre .clp-logos__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(var(--clp-logos-gap) * .5);
}
.clp-logos--sombre .clp-logos__item {
	position: relative;
	padding: 8px 0;
}
/* séparateurs verticaux fins entre les logos */
.clp-logos--sombre .clp-logos__item + .clp-logos__item::before {
	content: '';
	position: absolute;
	left: calc(var(--clp-logos-gap) * -0.25);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: rgba(255, 255, 255, .14);
}
.clp-logos--sombre.clp-logos--lg-white .clp-logos__img { filter: brightness(0) invert(1); opacity: .72; }
.clp-logos--sombre.clp-logos--lg-white .clp-logos__item:hover .clp-logos__img { filter: brightness(0) invert(1); opacity: 1; }
.clp-logos--sombre.clp-logos--lg-gray .clp-logos__img { filter: grayscale(1) brightness(1.6); }
.clp-logos--sombre.clp-logos--lg-gray .clp-logos__item:hover .clp-logos__img { filter: grayscale(0); opacity: 1; }
.clp-logos--sombre.clp-logos--reflect .clp-logos__img {
	-webkit-box-reflect: below 3px linear-gradient(transparent 62%, rgba(255, 255, 255, .1));
}
.clp-logos--sombre .clp-logos__name { color: rgba(255, 255, 255, .72); }
.clp-logos--sombre .clp-logos__item:hover .clp-logos__name { color: #7cc0f0; }

/* =========================================================
   DESIGN 4 — LIGNE ÉPURÉE
   ========================================================= */
.clp-logos--ligne .clp-logos__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(var(--clp-logos-gap) * .5);
	padding: 16px 0;
	border-top: 1px solid rgba(58, 70, 96, .12);
	border-bottom: 1px solid rgba(58, 70, 96, .12);
}
.clp-logos--ligne .clp-logos__item { position: relative; }
.clp-logos--ligne .clp-logos__item + .clp-logos__item::before {
	content: '';
	position: absolute;
	left: calc(var(--clp-logos-gap) * -0.25 - 2px);
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(26, 107, 191, .5);
}

/* ---------- Reveals cascade ---------- */
.clp-logos [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.clp-logos.is-in [data-reveal] { opacity: 1; transform: none; }
.clp-logos:not(.clp-logos--defile) .clp-logos__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, filter .45s ease;
	transition-delay: calc(var(--clp-l-i, 0) * 70ms + .1s);
}
.clp-logos.is-in:not(.clp-logos--defile) .clp-logos__item { opacity: 1; transform: none; transition-delay: calc(var(--clp-l-i, 0) * 70ms + .1s), calc(var(--clp-l-i, 0) * 70ms + .1s), 0s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
	.clp-logos [data-reveal], .clp-logos .clp-logos__item { opacity: 1; transform: none; transition: none; }
	.clp-logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	.clp-logos--defile .clp-logos__band { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px) {
	.clp-logos { --clp-logos-gap: 38px; }
	.clp-logos--sombre { padding: 34px calc(var(--clp-logos-pad-x) + 22px); }
	.clp-logos--grille .clp-logos__item { min-width: 140px; padding: 16px 20px; }
}
@media (max-width: 640px) {
	.clp-logos { --clp-logos-gap: 28px; }
	.clp-logos__header { margin-bottom: 24px; }
	.clp-logos__img { max-width: 150px; }
	.clp-logos--grille .clp-logos__item { min-width: calc(50% - 10px); }
	.clp-logos__eyebrow::before, .clp-logos__eyebrow::after { width: 20px; }
	/* Tactile : logos gris révélés en couleur d'office (pas de survol) */
	.clp-logos--lg-gray .clp-logos__img { filter: grayscale(0); opacity: 1; }
}

/* =========================================================
   INNOVATIONS v1.1 — projecteur, infobulles, double bandeau
   ========================================================= */
/* Effet projecteur : le logo survolé reste net, les autres s'estompent */
.clp-logos--spotlight .clp-logos__list:hover .clp-logos__item {
	opacity: .3;
	filter: grayscale(1) blur(.6px);
}
.clp-logos--spotlight .clp-logos__list:hover .clp-logos__item:hover {
	opacity: 1;
	filter: none;
	transform: translateY(-4px) scale(1.07);
	z-index: 2;
}
.clp-logos--spotlight.clp-logos--lg-gray .clp-logos__list:hover .clp-logos__item:hover .clp-logos__img {
	filter: grayscale(0);
	opacity: 1;
}
/* Loupe magnétique : le transform est piloté par le JS */
.clp-logos__band.is-js .clp-logos__item { transition: none; will-change: transform; }

/* Infobulle nom au survol (logos avec image uniquement) */
.clp-logos--names .clp-logos__item { position: relative; }
.clp-logos--names .clp-logos__item:not(.clp-logos__item--text)::after {
	content: attr(data-name);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(6px) scale(.92);
	font-family: var(--modins-heading-font-family, inherit);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .8px;
	white-space: nowrap;
	color: #fff;
	background: var(--clp-gris);
	border-radius: 20px;
	padding: 6px 13px;
	box-shadow: 0 10px 24px rgba(58, 70, 96, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3);
	z-index: 5;
}
.clp-logos--names .clp-logos__item:not(.clp-logos__item--text)::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	border: 5px solid transparent;
	border-top-color: var(--clp-gris);
	opacity: 0;
	transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3);
	z-index: 5;
	pointer-events: none;
}
.clp-logos--names .clp-logos__item:not(.clp-logos__item--text):hover::after,
.clp-logos--names .clp-logos__item:not(.clp-logos__item--text):hover::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
}
.clp-logos--names.clp-logos--sombre .clp-logos__item:not(.clp-logos__item--text)::after {
	background: var(--clp-accent);
}
.clp-logos--names.clp-logos--sombre .clp-logos__item:not(.clp-logos__item--text)::before {
	border-top-color: var(--clp-accent);
}

/* Double bandeau croisé : la 2e rangée en sens inverse, un peu plus lente */
.clp-logos__band--second { margin-top: 4px; }
.clp-logos__track--reverse {
	animation-direction: reverse;
	animation-duration: calc(var(--clp-logos-speed) * 1.18);
}
.clp-logos--reverse .clp-logos__track--reverse { animation-direction: normal; }

/* L'infobulle a besoin d'air au-dessus du bandeau */
.clp-logos--names .clp-logos__band { padding-top: 46px; }

@media (prefers-reduced-motion: reduce) {
	.clp-logos--spotlight .clp-logos__list:hover .clp-logos__item { opacity: 1; filter: none; transform: none; }
	.clp-logos__track--reverse { animation: none; }
}
@media (max-width: 880px) {
	/* Pas de survol sur tactile : projecteur et infobulles neutralisés */
	.clp-logos--spotlight .clp-logos__list:hover .clp-logos__item { opacity: 1; filter: none; }
	.clp-logos--names .clp-logos__band { padding-top: 20px; }
}