/* =============================================================================
   CARROUSEL CENTRÉ — moteur partagé (Formations, Actualités).

   Sans script : une rangée défilante au doigt, avec aimantation (scroll-snap).
   Avec script (.is-pret) : la carte active est au centre, les autres
   s'étagent de part et d'autre selon leur distance --pos (−2 … 2), posée par
   carrousel.js. Le carrousel tourne en boucle.

   Chaque widget règle :
     --pas      distance entre deux centres de cartes
     --large    largeur d'une carte
     --haut     hauteur réservée à la piste
   et l'habillage de ses cartes selon --pos / --abs / .is-actif.
   ============================================================================= */

.cci-carrousel {
	--pas: 21rem;
	--large: 19.375rem;
	--haut: 27.25rem;
	position: relative;
}

.cci-carrousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.625rem;
	margin-bottom: 1rem;
	width: min(100% - var(--gutter) * 2, var(--container));
	margin-inline: auto;
}

.cci-carrousel__btn {
	display: grid;
	place-items: center;
	width: 3.4375rem;            /* 55 */
	height: 3.4375rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--carrousel-btn, var(--marine));
	color: var(--blanc);
	transition: background-color 0.25s ease, transform 0.3s var(--ease-out);
}

.cci-carrousel__btn:hover {
	background: var(--rouge);
}

.cci-carrousel__btn:active {
	transform: scale(0.94);
}

.cci-carrousel__btn .icon {
	width: 1.375rem;
	height: 1.375rem;
}

.cci-carrousel__btn[data-prec] .icon {
	transform: scaleX(-1);
}

/* --- Sans script ------------------------------------------------------------- */
.cci-carrousel__piste {
	display: flex;
	gap: calc(var(--pas) - var(--large));
	margin: 0;
	padding: 1rem var(--gutter) 2rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cci-carrousel__piste::-webkit-scrollbar {
	display: none;
}

.cci-carrousel__item {
	flex: none;
	width: var(--large);
	scroll-snap-align: center;
}

/* --- Avec script -------------------------------------------------------------- */
.cci-carrousel.is-pret .cci-carrousel__fenetre {
	/* Rogné à l'horizontale seulement : les cartes inclinées des actualités
	   dépassent en haut et en bas, elles ne doivent pas être coupées. */
	overflow-x: clip;
	overflow-y: visible;
	/* Fondu sur les bords, comme la maquette (dégradés crème de 281 px). */
	-webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) var(--fondu, 14%), rgba(0, 0, 0, 1) calc(100% - var(--fondu, 14%)), transparent);
	mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) var(--fondu, 14%), rgba(0, 0, 0, 1) calc(100% - var(--fondu, 14%)), transparent);
	touch-action: pan-y;
}

.cci-carrousel.is-pret .cci-carrousel__piste {
	position: relative;
	display: block;
	height: var(--haut);
	padding: 0;
	overflow: visible;
}

.cci-carrousel.is-pret .cci-carrousel__item {
	--pos: 0;
	--abs: 0;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(calc(-50% + var(--pos) * var(--pas)));
	opacity: calc(1 - max(0, var(--abs) - 2));
	transition: transform 0.8s var(--ease-out), opacity 0.5s ease;
	cursor: pointer;
}

.cci-carrousel.is-pret .cci-carrousel__item.is-actif {
	z-index: 2;
	cursor: auto;
}

.cci-carrousel.is-pret .cci-carrousel__item.sans-transition {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.cci-carrousel.is-pret .cci-carrousel__item {
		transition-duration: 0.01ms;
	}
}