/**
 * Carousel horizontal — piste à défilement et flèches de navigation.
 *
 * Figma : flèches cerclées de 30 px alignées sur les bords du conteneur,
 * au-dessus de la piste ; 3 cartes visibles à 1200 px, gouttière 24 px.
 *
 * Emplacement : assets/css/components/carousel.css
 */

.carousel {
	position: relative;
}

/* ── Flèches ───────────────────────────────────────────────── */

.carousel__nav {
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--space-5);   /* Figma : 26 px entre les flèches et les cartes */
}

.carousel__fleche {
	display: inline-flex;
	padding: 0;
	color: var(--color-text);
	background: none;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition:
		color var(--duration) var(--ease),
		opacity var(--duration) var(--ease);
}

.carousel__icone {
	width: 30px;
	height: 30px;
}

/* Une seule icône dans le thème : la flèche « précédent » est retournée. */
.carousel__fleche--prev .carousel__icone {
	transform: rotate(180deg);
}

.carousel__fleche:hover,
.carousel__fleche:focus-visible {
	color: var(--color-accent);
}

.carousel__fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Rien à faire défiler : le script masque la navigation plutôt que d'afficher
   deux flèches inertes. visibility plutôt que display pour que la rangée garde
   sa place — le rythme vertical reste le même qu'on ait 3 partenaires ou 6. */
.carousel[data-carousel-fixe] .carousel__nav {
	visibility: hidden;
}


/* ============================================================
   Variante pagineur

   La maquette de « Regards croisés » ne met pas de flèches au-dessus des
   cartes : elle pose une suite de numéros en bas à droite, suivie d'une seule
   flèche. Les numéros donnent l'accès direct, la flèche avance d'une page —
   rien n'est perdu de ce que faisait la flèche « précédent ».
   ============================================================ */

.carousel--pagineur {
	display: flex;
	flex-direction: column;
}

/* order : la rangée passe sous la piste sans toucher à l'ordre du document,
   où elle doit rester avant pour que le clavier la rencontre en premier. */
.carousel--pagineur .carousel__nav {
	order: 1;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	margin-block: var(--space-8) 0;   /* Figma : 67 px sous les cartes */
}

.carousel--pagineur .carousel__fleche--prev {
	display: none;
}

/* Une seule page : ni numéros ni flèche à afficher, et rien à réserver
   puisque la maquette ne pose aucune rangée au-dessus des cartes. */
.carousel--pagineur[data-carousel-fixe] .carousel__nav {
	display: none;
}

.carousel__pages {
	display: flex;
	align-items: center;
	font-size: var(--fs-lead);
	line-height: 1;
	color: var(--color-text);
}

/* Le trait d'union de la maquette : une décoration, pas un caractère à lire. */
.carousel__pages > * + *::before {
	content: '-';
	margin-inline: 0.15em;
}

.carousel__page {
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--duration) var(--ease);
}

.carousel__page:hover,
.carousel__page:focus-visible {
	color: var(--color-accent);
}

.carousel__page[aria-current='true'] {
	font-weight: var(--fw-bold);
}

/* ── Piste ─────────────────────────────────────────────────── */

/* --carousel-gap sert à la fois d'écart et de terme dans le calcul de la
   largeur des colonnes : redéfinir l'un sans l'autre fait déborder la piste,
   et le dernier élément se retrouve rogné par overflow. Une section qui veut
   une autre gouttière ne surcharge donc que cette variable. */
.carousel__piste {
	--carousel-gap: var(--space-5);   /* Figma : ~24 px entre les cartes */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;          /* mobile : une carte par écran */
	gap: var(--carousel-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;        /* le repère visuel, ce sont les flèches */
}

.carousel__piste::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	scroll-snap-align: start;
}

/* Une piste peut contenir moins d'éléments qu'elle ne montre de colonnes : le
   Coup d'cœur d'un champion qui ne nous a confié qu'une ou deux photographies.
   La grille les posait à gauche, laissant le reste du bloc vide, ce qui se lit
   comme un chargement inachevé. Centrées, elles se lisent comme un choix.

   Le comptage se fait par la négative, faute de sélecteur qui compte : « pas
   de troisième élément » vaut « un ou deux ». Au-delà, la piste défile et doit
   commencer à gauche. En dessous de 768 px la colonne fait déjà toute la
   largeur, la règle n'y change rien. */
@media (min-width: 768px) {

	.carousel__piste:not(:has(> .carousel__item:nth-child(3))) {
		justify-content: center;
	}

}

@media (min-width: 1200px) {

	.carousel__piste:not(:has(> .carousel__item:nth-child(4))) {
		justify-content: center;
	}

}


/* ============================================================
   Mobile — la navigation passe sous la piste

   Figma 01_MOB pose les flèches sous les cartes, centrées : au-dessus,
   elles occuperaient une rangée entière pour deux boutons de 30 px, alors
   que la largeur manque déjà.
   ============================================================ */

@media (max-width: 767px) {

	.carousel {
		display: flex;
		flex-direction: column;
	}

	/* order plutôt qu'un déplacement dans le document : au clavier, la
	   navigation doit rester rencontrée avant la piste. */
	.carousel__nav {
		order: 1;
		justify-content: center;
		gap: var(--space-5);
		margin-block: var(--space-6) 0;
	}

	/* Cibles tactiles. La flèche fait 30 px de côté et le numéro « 1 » sept sur
	   dix-sept : le second passe sous le minimum de 24 px du critère « taille
	   de cible », et ni l'un ni l'autre n'atteint les 44 px confortables au
	   doigt. Le retrait élargit la zone sensible sans toucher au dessin, et
	   l'écart de la rangée reprend ce qu'il ajoute. */
	.carousel__fleche {
		padding: var(--space-2);
	}

	.carousel--pagineur .carousel__page {
		min-width: 44px;
		padding-block: var(--space-4);
	}

}


/* ============================================================
   Tablette 768px — deux cartes
   ============================================================ */

@media (min-width: 768px) {

	.carousel__piste {
		grid-auto-columns: calc((100% - var(--carousel-gap)) / 2);
	}

}


/* ============================================================
   Desktop 1200px — trois cartes (Figma)
   ============================================================ */

@media (min-width: 1200px) {

	.carousel__piste {
		grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
	}

}


/* Le défilement animé suit la préférence système. */
@media (prefers-reduced-motion: reduce) {

	.carousel__piste {
		scroll-behavior: auto;
	}

}