/* Quelquesfilms Core — carrousel natif (remplace Slick sur le widget « Sequex Post Carousel »).
   Nombre de cartes visibles : --qf-carousel-columns (réglage du widget) sur grand écran,
   réduit par paliers ; les paliers sont repris dans CarouselModule::sizes() pour le srcset. */
.qf-carousel {
	--qf-carousel-gap: 20px;
	--qf-carousel-per-view: var(--qf-carousel-columns, 3);
	--qf-carousel-accent: #2196f3;
	position: relative;
}

@media (max-width: 1169px) {
	.qf-carousel {
		--qf-carousel-per-view: min(var(--qf-carousel-columns, 3), 4);
	}
}

@media (max-width: 1023px) {
	.qf-carousel {
		--qf-carousel-per-view: min(var(--qf-carousel-columns, 3), 3);
	}
}

/* Petits écrans : mêmes paliers que l'ancien Slick (2 cartes, puis 1 en pleine largeur). */
@media (max-width: 767px) {
	.qf-carousel {
		--qf-carousel-gap: 12px;
		--qf-carousel-per-view: min(var(--qf-carousel-columns, 3), 2);
	}
}

@media (max-width: 479px) {
	.qf-carousel {
		--qf-carousel-per-view: min(var(--qf-carousel-columns, 3), 1);
	}
}

.qf-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/* Les boutons remplacent la barre de défilement une fois le script prêt ; sans JS, elle reste. */
.qf-carousel.is-ready .qf-carousel__viewport {
	scrollbar-width: none;
}

.qf-carousel.is-ready .qf-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.qf-carousel__viewport:focus-visible {
	outline: 2px solid var(--qf-carousel-accent);
	outline-offset: 4px;
}

.qf-carousel__track {
	display: flex;
	gap: var(--qf-carousel-gap);
	margin: 0;
	padding: 0 0 5px;
	list-style: none;
}

.qf-carousel__slide {
	flex: 0 0 calc((100% - (var(--qf-carousel-per-view) - 1) * var(--qf-carousel-gap)) / var(--qf-carousel-per-view));
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.qf-carousel__slide .card-masonry,
.qf-carousel__slide .card {
	margin: 0;
}

.qf-carousel__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Affiches : même format 3:4 que les vignettes du site (module thumbnails). */
.qf-carousel__image--poster {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Sélecteurs renforcés : Sequex stylise tous les button[type="button"]:not(.btn):not(.slick-arrow). */
.qf-carousel button.qf-carousel__button[type="button"]:not([hidden]) {
	display: flex;
}

.qf-carousel button.qf-carousel__button[type="button"] {
	position: absolute;
	top: 50%;
	z-index: 9;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--qf-carousel-accent);
	color: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease-out;
}

/* Flèches à cheval sur le bord des affiches (centre du bouton sur le bord), comme le mode « showcase » de Sequex. */
.qf-carousel__button--prev {
	inset-inline-start: -22px;
}

.qf-carousel__button--next {
	inset-inline-end: -22px;
}

/* Sous 576 px (conteneur Bootstrap fluide), la marge de page ne fait que 15 px : la flèche ne doit pas sortir de l'écran. */
@media (max-width: 575px) {
	.qf-carousel__button--prev {
		inset-inline-start: -14px;
	}

	.qf-carousel__button--next {
		inset-inline-end: -14px;
	}
}

[dir="rtl"] .qf-carousel button.qf-carousel__button[type="button"] svg {
	transform: scaleX(-1);
}

.qf-carousel button.qf-carousel__button[type="button"]:hover,
.qf-carousel button.qf-carousel__button[type="button"]:focus {
	background: #1e88e5;
	color: #fff;
}

.qf-carousel button.qf-carousel__button[type="button"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

/* Bout de course : la flèche reste affichée mais grisée, comme .slick-disabled. */
.qf-carousel button.qf-carousel__button[type="button"][aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.qf-carousel button.qf-carousel__button[type="button"][aria-disabled="true"]:hover {
	background: var(--qf-carousel-accent);
}

@media (prefers-reduced-motion: reduce) {
	.qf-carousel button.qf-carousel__button[type="button"] {
		transition: none;
	}
}