/*
 * Carrousel des derniers articles : voir 40-carrousel.php.
 * Présentation calquée sur l'ancien slider « design-3 » (mesures relevées le 2026-11-14).
 */
.afaj-carrousel {
	position: relative;
	max-width: 740px;
	margin: 24px auto 0;
	padding-bottom: 18px; /* les flèches dépassent de 18 px sous l'image */
}
.afaj-carrousel .wp-block-post-template {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory; /* glissement au doigt ; coupé par le JS pendant ses animations */
	scrollbar-width: none;
	padding: 0;
	margin: 0;
}
.afaj-carrousel .wp-block-post-template::-webkit-scrollbar { display: none; }
.afaj-carrousel .wp-block-post-template > li {
	flex: 0 0 100%; /* un seul article visible à la fois */
	scroll-snap-align: start;
	margin: 0 !important;
}

/* Diapositive : image 350 px, calée en haut */
.afaj-carrousel .afaj-slide {
	position: relative;
	overflow: hidden;
	background: #f1f1f1;
	margin: 0;
}
.afaj-slide .wp-block-post-featured-image { margin: 0; }
.afaj-slide .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 350px !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: top center;
}

/* Étiquettes de catégorie, coin supérieur gauche */
.afaj-carrousel .afaj-slide .afaj-slide-cats {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 2px;
	font-size: 10px;
	line-height: 17px;
	color: transparent; /* masque le séparateur « , » */
}
.afaj-carrousel .afaj-slide .afaj-slide-cats a {
	display: inline-block;
	margin: 2px;
	padding: 3px 8px;
	border-radius: 0;
	color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background .5s ease-out;
}
.afaj-carrousel .afaj-slide .afaj-slide-cats a:nth-of-type(4n+1) { background: var(--wp--preset--color--ti-accent, #325ce8); }
.afaj-carrousel .afaj-slide .afaj-slide-cats a:nth-of-type(4n+2) { background: #3498db; }
.afaj-carrousel .afaj-slide .afaj-slide-cats a:nth-of-type(4n+3) { background: #e74c3c; }
.afaj-carrousel .afaj-slide .afaj-slide-cats a:nth-of-type(4n+4) { background: #34495e; }
.afaj-carrousel .afaj-slide .afaj-slide-cats a:hover,
.afaj-carrousel .afaj-slide .afaj-slide-cats a:focus { background: #333; }

/* Bandeau de texte : 46 % du bas de l'image, gris semi-transparent */
.afaj-carrousel .afaj-slide-texte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 30px 35px;
	background: rgba(51, 51, 51, .5);
	color: #fff;
}
.afaj-carrousel .afaj-slide-texte .wp-block-post-title {
	margin: 5px 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
}
.afaj-carrousel .afaj-slide-texte .wp-block-post-title a,
.afaj-carrousel .afaj-slide-texte .wp-block-post-date,
.afaj-carrousel .afaj-slide-texte .wp-block-post-date a { color: #fff; text-decoration: none; }
.afaj-carrousel .afaj-slide-texte .wp-block-post-date {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 22px;
}
.afaj-carrousel .afaj-slide-texte .wp-block-post-date::after {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	background: #e96656;
}

/* Navigation : points en bas à gauche, flèches en bas à droite, par-dessus l'image */
.afaj-carrousel-nav { position: static; margin: 0 !important; } /* annule l'espacement automatique entre blocs (layout « flow ») */
.afaj-carrousel-points {
	position: absolute;
	left: 15px;
	bottom: 13px;
	display: flex;
	gap: 4px;
	z-index: 2;
}
.afaj-carrousel-points button {
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	padding: 0;
	border: 2px solid #444;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.afaj-carrousel-points button[aria-current="true"] { background: #8d8c8c; }
.afaj-carrousel-fleches {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 1px;
	z-index: 2;
}
.afaj-carrousel-fleches button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	cursor: pointer;
}
.afaj-carrousel-fleches svg { width: 20px; height: 20px; }
.afaj-carrousel button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
	.afaj-carrousel .afaj-slide-texte { padding: 12px 16px 30px; }
	.afaj-carrousel .afaj-slide-texte .wp-block-post-title { font-size: 18px; line-height: 22px; }
}