/*
 * Pellicule des sites d'adhérents ([sites_adherents]).
 *
 * Bande de négatif noire dans les deux modes du thème (comme un vrai film).
 * Les perforations sont dessinées sur la piste elle-même pour défiler avec les
 * vues. Période des perforations : 11px ; une vue + son espacement = 88px
 * (8 périodes), ce qui rend la boucle à -50 % parfaitement raccord.
 */
.sps-film {
	--sps-film-bg: #161512;
	--sps-film-hole: #e9e3d4;
	--sps-film-mark: #e8a33d;
	flex: 0 1 440px;
	min-width: 0;
	max-width: 440px;
	overflow: hidden;
	border-radius: 3px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sps-film__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 11px 0;
	list-style: none;
	background:
		repeating-linear-gradient(90deg, transparent 0 5px, var(--sps-film-hole) 5px 10px, transparent 10px 11px) left top 3px / 100% 5px no-repeat,
		repeating-linear-gradient(90deg, transparent 0 5px, var(--sps-film-hole) 5px 10px, transparent 10px 11px) left bottom 3px / 100% 5px no-repeat,
		var(--sps-film-bg);
	animation: sps-film-scroll var(--sps-film-duration, 48s) linear infinite;
}

.sps-film:hover .sps-film__track,
.sps-film:focus-within .sps-film__track {
	animation-play-state: paused;
}

@keyframes sps-film-scroll {
	to { transform: translateX(-50%); }
}

.sps-film__frame {
	flex: 0 0 77px;
	margin: 0 11px 0 0;
	padding: 0;
}

.sps-film__frame a {
	position: relative;
	display: block;
	width: 77px;
	height: 50px;
	border-radius: 2px;
	overflow: hidden;
	outline-offset: 2px;
}

.sps-film__frame img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	/* Hueman arrondit toutes les images (réglage image-border-radius) */
	border-radius: 0 !important;
	object-fit: cover;
	filter: sepia(0.45) saturate(0.85) contrast(1.05);
	transition: filter 0.2s ease;
}

.sps-film__frame a:hover img,
.sps-film__frame a:focus-visible img {
	filter: none;
}

.sps-film__frame a:focus-visible {
	outline: 2px solid var(--sps-film-mark);
}

/* Marquage façon bord de pellicule */
.sps-film__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1px 3px;
	font: 700 0.5625rem/1.3 ui-monospace, "DejaVu Sans Mono", monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sps-film-mark);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.sps-film { overflow-x: auto; }
	.sps-film__track { animation: none; }
	.sps-film__frame[aria-hidden="true"] { display: none; }
}

@media (max-width: 900px) {
	.sps-film { display: none; }
}