/*
 * Logos clients, sous le hero de l'accueil. La galerie est une galerie de blocs cœur : on y ajoute,
 * retire ou réordonne les logos dans l'éditeur (lien personnalisé = réalisation liée).
 * logos.js la transforme en deux lignes qui défilent en sens opposés ; sans script, ou si
 * l'utilisateur a demandé moins d'animations, les logos restent en grille fixe.
 * Les logos d'origine sont blancs : on les passe en noir (filtre) et on règle l'opacité.
 */

/* La section suit le hero sans espace. */
.cp-hero-part + .cp-main { margin-block-start: 0; }
.cp-main > .cp-refs-part { margin-block: 0; }

.cp-refs {
	--cp-refs-navy: var(--wp--preset--color--navy, #000033);
	--cp-refs-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-refs-mute: var(--wp--preset--color--mute, #555B6B);
	--cp-refs-line: var(--wp--preset--color--line, #E3E5EC);
	margin: 0 !important;
	padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
	background: var(--wp--preset--color--mist, #F3F4F8);
	overflow: hidden;
}
.cp-refs,
.cp-refs * { box-sizing: border-box; }
.cp-refs > *,
.cp-refs__head > * { margin-block: 0 !important; }

/* ---------- En-tête ---------- */
.cp-refs__head { margin-bottom: clamp(36px, 4vw, 56px) !important; }
.cp-refs .cp-refs__title { color: var(--cp-refs-navy); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.cp-refs a:focus-visible { outline: 2px solid var(--cp-refs-orange); outline-offset: 3px; }

/* ---------- Galerie, avant script : grille fixe ---------- */
.cp-refs .wp-block-gallery.cp-refs__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 0 !important;
}
.cp-refs .wp-block-gallery.cp-refs__logos > figure.wp-block-image {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding-inline: clamp(18px, 2.4vw, 34px);
}
.cp-refs .wp-block-gallery.cp-refs__logos > figure.wp-block-image img {
	width: auto !important;
	height: 58px !important;
	object-fit: contain !important;
	filter: brightness(0);
	opacity: .62;
}

/* ---------- Défilement (construit par logos.js) ---------- */
.cp-refs > .cp-refs__marquee {
	max-width: none !important;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}
.cp-refs__marquee {
	display: grid;
	gap: clamp(10px, 1.6vw, 20px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cp-refs__row { display: flex; width: max-content; animation: cp-refs-scroll var(--cp-refs-dur, 90s) linear infinite; }
.cp-refs__row--rev { animation-direction: reverse; }
.cp-refs:hover .cp-refs__row,
.cp-refs:focus-within .cp-refs__row,
.cp-refs.is-paused .cp-refs__row { animation-play-state: paused; }
@keyframes cp-refs-scroll { to { transform: translateX(-50%); } }
.cp-refs__set { display: flex; align-items: center; }
.cp-refs__item {
	position: relative;
	display: grid;
	place-items: center;
	height: 96px;
	padding-inline: clamp(22px, 2.6vw, 38px);
	color: inherit;
	text-decoration: none;
}
/* Fenêtre à la taille de la zone dessinée du logo ; l'image y est décalée de ses marges transparentes. */
.cp-refs__crop { position: relative; display: block; overflow: hidden; }
.cp-refs__crop img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: none !important;
	height: auto;
	filter: brightness(0);
	opacity: .62;
	transition: opacity .2s;
}
.cp-refs__crop { transition: transform .2s; }
a.cp-refs__item:hover .cp-refs__crop,
a.cp-refs__item:focus-visible .cp-refs__crop { transform: translateY(-2px); }
a.cp-refs__item:hover img,
a.cp-refs__item:focus-visible img { opacity: 1; }
a.cp-refs__item::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: 18px;
	height: 2px;
	margin-left: -9px;
	border-radius: 2px;
	background: var(--cp-refs-orange);
	opacity: 0;
	transition: opacity .2s;
}
a.cp-refs__item:hover::after,
a.cp-refs__item:focus-visible::after { opacity: 1; }
.cp-refs a.cp-refs__item:focus-visible { outline-offset: -4px; }

.cp-refs__foot { display: flex; justify-content: flex-end; margin-top: 18px !important; }
.cp-refs__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--cp-refs-line);
	border-radius: 8px;
	background: #fff;
	color: var(--cp-refs-mute);
	font: 600 13px/1.4 var(--wp--preset--font-family--titillium, sans-serif);
	cursor: pointer;
}
.cp-refs__pause:hover { border-color: #C9CCD8; color: var(--cp-refs-navy); }
.cp-refs__pause svg { width: 12px; height: 12px; }
.cp-refs__pause:focus-visible { outline: 2px solid var(--cp-refs-orange); outline-offset: 2px; }

/* ---------- Éditeur : la galerie reste en grille, sur fond clair ---------- */
.editor-styles-wrapper .cp-refs .wp-block-gallery.cp-refs__logos > figure.wp-block-image img { opacity: 1; }

/* ---------- Points de rupture ---------- */
@media (max-width: 820px) {
	.cp-refs__item { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-refs__row { width: auto; animation: none; }
	.cp-refs__set[aria-hidden] { display: none; }
	.cp-refs__set { flex-wrap: wrap; justify-content: center; }
	.cp-refs__marquee { -webkit-mask-image: none; mask-image: none; }
	.cp-refs__foot { display: none; }
}