/* CTAB — Diaporamas
   Palette institutionnelle : #3F6731 (vert foncé), #6E9F33 (vert), #54B435 (vert vif) */

.ctab-sl {
	--ctab-sl-vert: #6E9F33;
	--ctab-sl-vert-vif: #54B435;
	--ctab-sl-transition: 700ms;
	--ctab-sl-rayon: 0px;

	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--ctab-sl-rayon);
	background: transparent;

	/* Le cœur de la correction : la hauteur découle du ratio de l'image.
	   L'ancien diaporama imposait 600 px de haut à des images de 1100x298,
	   qui se retrouvaient centrées entre deux bandes vides de 94 px.
	   Ici la boîte épouse l'image : aucune bande n'est possible. */
	aspect-ratio: var(--ctab-sl-ratio, 1100 / 298);
}

/* Repli lorsqu'une hauteur fixe est demandée dans les réglages. */
.ctab-sl[style*="--ctab-sl-hauteur"] {
	aspect-ratio: auto;
	height: var(--ctab-sl-hauteur);
}

.ctab-sl__piste {
	position: absolute;
	inset: 0;
}

.ctab-sl__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ctab-sl__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* La diapositive sortante reste visible le temps de la transition. */
.ctab-sl__slide.is-sortante {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.ctab-sl__media {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.ctab-sl__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ctab-sl__media:focus-visible {
	outline: 3px solid var(--ctab-sl-vert-vif);
	outline-offset: -3px;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* 1. Fondu */
.ctab-sl--fondu .ctab-sl__slide {
	transition: opacity var(--ctab-sl-transition) ease, visibility var(--ctab-sl-transition);
}

/* 2. Glissement horizontal — sens de lecture respecté en arabe. */
.ctab-sl--glissement .ctab-sl__slide {
	transform: translateX(100%);
	transition: transform var(--ctab-sl-transition) cubic-bezier(.4, 0, .2, 1), visibility var(--ctab-sl-transition);
	opacity: 1;
}
.ctab-sl--glissement .ctab-sl__slide.is-active { transform: translateX(0); }
.ctab-sl--glissement .ctab-sl__slide.is-sortante { transform: translateX(-100%); }
.ctab-sl--glissement[data-sens="arriere"] .ctab-sl__slide { transform: translateX(-100%); }
.ctab-sl--glissement[data-sens="arriere"] .ctab-sl__slide.is-active { transform: translateX(0); }
.ctab-sl--glissement[data-sens="arriere"] .ctab-sl__slide.is-sortante { transform: translateX(100%); }

[dir="rtl"] .ctab-sl--glissement .ctab-sl__slide { transform: translateX(-100%); }
[dir="rtl"] .ctab-sl--glissement .ctab-sl__slide.is-active { transform: translateX(0); }
[dir="rtl"] .ctab-sl--glissement .ctab-sl__slide.is-sortante { transform: translateX(100%); }

/* 3. Glissement vertical */
.ctab-sl--vertical .ctab-sl__slide {
	transform: translateY(100%);
	transition: transform var(--ctab-sl-transition) cubic-bezier(.4, 0, .2, 1), visibility var(--ctab-sl-transition);
	opacity: 1;
}
.ctab-sl--vertical .ctab-sl__slide.is-active { transform: translateY(0); }
.ctab-sl--vertical .ctab-sl__slide.is-sortante { transform: translateY(-100%); }
.ctab-sl--vertical[data-sens="arriere"] .ctab-sl__slide { transform: translateY(-100%); }
.ctab-sl--vertical[data-sens="arriere"] .ctab-sl__slide.is-active { transform: translateY(0); }
.ctab-sl--vertical[data-sens="arriere"] .ctab-sl__slide.is-sortante { transform: translateY(100%); }

/* 4. Zoom */
.ctab-sl--zoom .ctab-sl__slide {
	transform: scale(1.12);
	transition: opacity var(--ctab-sl-transition) ease,
	            transform var(--ctab-sl-transition) ease,
	            visibility var(--ctab-sl-transition);
}
.ctab-sl--zoom .ctab-sl__slide.is-active { transform: scale(1); }
.ctab-sl--zoom .ctab-sl__slide.is-sortante { transform: scale(.94); opacity: 0; }

/* 5. Poussé — les deux diapositives se déplacent ensemble. */
.ctab-sl--pousse .ctab-sl__piste {
	display: flex;
	width: 100%;
	transition: transform var(--ctab-sl-transition) cubic-bezier(.4, 0, .2, 1);
}
.ctab-sl--pousse .ctab-sl__slide {
	position: relative;
	inset: auto;
	flex: 0 0 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 6. Coupe franche — changement instantané. */
.ctab-sl--coupe .ctab-sl__slide {
	transition: none;
}

/* ==========================================================================
   FLÈCHES ET PASTILLES
   ========================================================================== */

.ctab-sl__fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 2px 10px rgba(63, 103, 49, .22);
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background .2s ease;
}

.ctab-sl:hover .ctab-sl__fleche,
.ctab-sl:focus-within .ctab-sl__fleche {
	opacity: 1;
}

.ctab-sl__fleche:hover,
.ctab-sl__fleche:focus-visible {
	background: #fff;
	opacity: 1;
}

.ctab-sl__fleche:focus-visible {
	outline: 3px solid var(--ctab-sl-vert-vif);
	outline-offset: 2px;
}

.ctab-sl__fleche--prec { inset-inline-start: 14px; }
.ctab-sl__fleche--suiv { inset-inline-end: 14px; }

/* Le chevron est dessiné en CSS : aucune police d'icônes à charger. */
.ctab-sl__fleche span {
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--ctab-sl-vert);
	border-bottom: 2.5px solid var(--ctab-sl-vert);
}
.ctab-sl__fleche--prec span { transform: rotate(135deg); margin-inline-start: 4px; }
.ctab-sl__fleche--suiv span { transform: rotate(-45deg); margin-inline-end: 4px; }

[dir="rtl"] .ctab-sl__fleche--prec span { transform: rotate(-45deg); }
[dir="rtl"] .ctab-sl__fleche--suiv span { transform: rotate(135deg); }

.ctab-sl__points {
	position: absolute;
	inset-inline: 0;
	bottom: 12px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.ctab-sl__point {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}

.ctab-sl__point.is-active {
	width: 26px;
	border-radius: 5px;
	background: var(--ctab-sl-vert-vif);
}

.ctab-sl__point:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {
	.ctab-sl__fleche { width: 36px; height: 36px; opacity: 1; }
	.ctab-sl__fleche--prec { inset-inline-start: 8px; }
	.ctab-sl__fleche--suiv { inset-inline-end: 8px; }
	.ctab-sl__points { bottom: 8px; gap: 6px; }
	.ctab-sl__point { width: 8px; height: 8px; }
	.ctab-sl__point.is-active { width: 20px; }
}

@media (max-width: 480px) {
	/* Sur un écran étroit, les flèches masquent l'image : on ne garde que
	   les pastilles, et le balayage tactile reste disponible. */
	.ctab-sl__fleche { display: none; }
}

/* ==========================================================================
   ACCESSIBILITÉ — respect de « réduire les animations »
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ctab-sl__slide,
	.ctab-sl__piste {
		transition: none !important;
		transform: none !important;
	}
	.ctab-sl__slide { opacity: 0; }
	.ctab-sl__slide.is-active { opacity: 1; }
	.ctab-sl--pousse .ctab-sl__slide { opacity: 1; }
}