/*
 * Accessible Carousel with Buttons
 * Pattern ARIA APG : carousel-1-prev-next (sans auto-rotation)
 */

.afe-carousel {
	position: relative;
	width: 100%;
	height: 100%;
}

.afe-carousel__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

/*
 * Une seule slide visible à la fois, fondu enchaîné entre les slides.
 *
 * Technique : CSS Grid "stack" — toutes les slides occupent la même cellule,
 * le conteneur prend automatiquement la hauteur de la slide la plus haute.
 * On évite ainsi `position: absolute` qui ferait s'effondrer la hauteur.
 *
 * Les slides inactives reçoivent l'attribut HTML `inert` (géré en JS)
 * qui les retire du focus clavier ET de l'arbre d'accessibilité,
 * comme `hidden`, mais en restant visible pour CSS donc animable.
 */
.afe-carousel__items {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas: "afe-stack";
}

.afe-carousel__item {
	grid-area: afe-stack;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.afe-carousel__item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
	z-index: 1;
}

.afe-carousel__item .e-loop-item {
	width: 100%;
	height: 100%;
}

/* Respecte la préférence système "réduire les animations" (RGAA 13.8). */
@media (prefers-reduced-motion: reduce) {
	.afe-carousel__item,
	.afe-carousel__item.is-active {
		transition: none;
	}
}

/*
 * Boutons de navigation prev/next.
 * Positionnement absolu de chaque côté, centrés verticalement.
 */
.afe-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	padding: 0;

	background: #F9B819;
	color: #231F20;
	border: 2px solid transparent;
	border-radius: 50%;

	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.afe-carousel .afe-carousel__btn{
	padding: 0.4rem;
}

.afe-carousel__btn svg{
	height: 1rem;
	width: 1rem;
}

.afe-carousel__btn svg path{
	fill: #ffffff;
}

.afe-carousel__btn:hover svg path,
.afe-carousel__btn:focus-visible svg path{
	fill: #231F20;
}

.afe-carousel__btn--prev {
	left: 8px;
}

.afe-carousel__btn--next {
	right: 8px;
}

/* Editor notice (visible uniquement en mode édition). */
.afe-carousel__notice {
	font-family: inherit;
}