/*
 * Bloc "Derniere actu" : texte a gauche ([scf_actu_texte]), images a droite
 * ([scf_actu_carrousel]). Logique : inc/actualites.php + assets/js/actualites.js
 *
 * Reglages du carrousel (a ajuster ici si le rendu doit bouger) :
 *   --scf-actu-slide  largeur d'une image, en % de la largeur du bloc
 *   --scf-actu-shift  decalage des images voisines, en % de la largeur d'une image
 *   --scf-actu-tilt   inclinaison des images voisines
 *   --scf-actu-arrow  diametre des fleches
 */

/* ---- Texte (fondu enchaine) ------------------------------------------- */

/*
 * Les textes sont empiles dans une meme cellule de grille : le bloc garde la
 * hauteur du texte le plus long, rien ne bouge autour (titre, bouton).
 */
.scf-actu-text {
	display: grid;
}

.scf-actu-text__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.scf-actu-text__item.is-active {
	opacity: 1;
	visibility: visible;
}

/* La typographie reste celle reglee dans Elementor sur le widget. */
.scf-actu-text p {
	margin: 0;
	color: inherit;
}

.scf-actu-text p + p {
	margin-top: 0.4em;
}

/* ---- Carrousel d'images ------------------------------------------------ */

.scf-actu-carousel {
	--scf-actu-slide: 61%;
	--scf-actu-shift: 32%;
	--scf-actu-tilt: 4deg;
	--scf-actu-tilt-active: 0deg; /* l'image au premier plan reste droite */
	--scf-actu-scale: 0.86;
	--scf-actu-arrow: 34px;

	position: relative;
	width: 100%;
}

/*
 * Hauteur de la scene = largeur d'une image (les images sont carrees) :
 * le padding en % se calcule sur la largeur du bloc.
 */
.scf-actu-carousel__stage {
	position: relative;
	padding-top: var(--scf-actu-slide);
}

.scf-actu-carousel__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--scf-actu-slide);
	aspect-ratio: 1 / 1;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

.scf-actu-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voisines : en retrait, derriere, penchees. */
.scf-actu-carousel__slide.is-prev {
	opacity: 1;
	z-index: 1;
	transform: translate(calc(-50% - var(--scf-actu-shift)), -50%) rotate(calc(-1 * var(--scf-actu-tilt))) scale(var(--scf-actu-scale));
}

.scf-actu-carousel__slide.is-next {
	opacity: 1;
	z-index: 1;
	transform: translate(calc(-50% + var(--scf-actu-shift)), -50%) rotate(var(--scf-actu-tilt)) scale(var(--scf-actu-scale));
}

/* Declaree en dernier : avec une seule actualite, l'image reste au premier plan. */
.scf-actu-carousel__slide.is-active {
	opacity: 1;
	z-index: 2;
	transform: translate(-50%, -50%) rotate(var(--scf-actu-tilt-active)) scale(1);
}

/* ---- Fleches ----------------------------------------------------------- */

.scf-actu-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--scf-actu-arrow);
	height: var(--scf-actu-arrow);
	padding: 0;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.25s ease;
}

/*
 * Elementor stylise tous les boutons (fond de couleur au survol et au focus) :
 * seul !important tient face a ses regles. Le visuel est porte par le SVG.
 */
.scf-actu-carousel__arrow,
.scf-actu-carousel__arrow:hover,
.scf-actu-carousel__arrow:focus,
.scf-actu-carousel__arrow:active {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.scf-actu-carousel__arrow:hover {
	opacity: 0.75;
}

/* Pas de cadre au clic ; repere conserve pour la navigation au clavier. */
.scf-actu-carousel__arrow:focus {
	outline: none;
}

.scf-actu-carousel__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.scf-actu-carousel__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

.scf-actu-carousel__arrow--prev {
	left: 0;
}

.scf-actu-carousel__arrow--next {
	right: 0;
}

/* Mobile uniquement (breakpoint Elementor) : texte centre, inchange en tablette et PC. */
@media (max-width: 767px) {
	.scf-actu-text {
		text-align: center;
	}

	.scf-actu-carousel {
		--scf-actu-arrow: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scf-actu-text__item,
	.scf-actu-carousel__slide {
		transition-duration: 0.01ms;
	}
}