/**
 * Carousels d'évènements.
 *
 * Volontairement neutre : les couleurs et la typographie sont héritées du
 * thème. Tout est réglable via les variables ci-dessous, surchargeables
 * dans le style.css du thème enfant.
 */

.carev {
	--carev-h: 380px;           /* hauteur commune à toutes les affiches */
	--carev-gap: 6.5rem;
	--carev-rayon: 6px;
	--carev-repli-fond: #e9e6e1;
	--carev-repli-texte: #2b2b2b;
	--carev-nav-fond: #ffffff;
	--carev-nav-texte: #1a1a1a;

	/* Survol : élévation et ombre. Mettre --carev-survol-y à 0 pour
	   désactiver le mouvement en gardant l'ombre. */
	--carev-survol-y: 3px;
	--carev-survol-duree: 150ms;
	--carev-survol-ombre: 0 5px 14px rgba(0, 0, 0, 0.16);
	/* Marge réservée dans la piste pour que l'ombre ne soit pas rognée
	   par le défilement horizontal. */
	--carev-survol-marge: 10px;

	margin-block: 2.5rem;
}

.carev__titre {
	margin-block-end: 1.25rem;
}

.carev__zone {
	position: relative;
}

/* --- La piste ---------------------------------------------------------- */

.carev__piste {
	display: flex;
	gap: var(--carev-gap);
	margin: 0;
	/* overflow-x: auto force overflow-y à « auto » : sans ce padding,
	   l'élévation et l'ombre seraient coupées en haut et en bas. */
	padding: var(--carev-survol-marge) 0 calc(var(--carev-survol-marge) + 0.5rem);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.carev__piste::-webkit-scrollbar {
	display: none;
}

.carev__piste:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* --- La carte ----------------------------------------------------------
 * Hauteur d'affiche identique pour tous, largeur calculée à partir du
 * ratio réel de l'image. Une affiche A3 verticale, un visuel 16/9 et un
 * carré s'alignent donc sur la même ligne de base sans être recadrés.
 */

.carev-carte {
	flex: 0 0 auto;
	width: calc(var(--carev-h) * var(--carev-ratio, 0.75));
	min-width: 150px;
	max-width: min(85vw, 640px);
	scroll-snap-align: start;
}

.carev-carte__lien {
	display: block;
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--carev-survol-duree) ease-out;
}

.carev-carte__lien:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.carev-carte__media {
	height: var(--carev-h);
	overflow: hidden;
	border-radius: var(--carev-rayon);
	background: var(--carev-repli-fond);
	transition: box-shadow var(--carev-survol-duree) ease-out;
}

/* --- Survol -------------------------------------------------------------
 * La carte entière se soulève de quelques pixels, l'ombre portée reste
 * calée sur le bloc image (le seul à avoir des angles arrondis).
 * @media (hover: hover) : évite l'effet « collant » sur écran tactile,
 * où le survol reste actif après le tap.
 */

@media (hover: hover) {
	.carev-carte__lien:hover {
		transform: translateY(calc(var(--carev-survol-y) * -1));
	}

	.carev-carte__lien:hover .carev-carte__media {
		box-shadow: var(--carev-survol-ombre);
	}
}

/* Même retour au clavier qu'à la souris. */
.carev-carte__lien:focus-visible {
	transform: translateY(calc(var(--carev-survol-y) * -1));
}

.carev-carte__lien:focus-visible .carev-carte__media {
	box-shadow: var(--carev-survol-ombre);
}

.carev-carte__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carte sans affiche : le titre devient le visuel. */
.carev-carte__repli {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80%;
	padding: 1.5rem;
	color: var(--carev-repli-texte);
	text-align: center;
	background: var(--carev-repli-fond);
}

.carev-carte__repli-titre {
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
}

.carev-carte--sans-image .carev-carte__titre {
	/* Le titre est déjà dans le visuel de repli, on ne le répète pas. */
	/*position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;*/
}

.carev-carte__infos {
	padding-block-start: 0.75rem;
}

.carev-carte__titre {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.carev-carte__date {
	display: block;
	font-size: 0.9rem;
	opacity: 0.85;
}

.carev-carte__lieu {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* --- Navigation --------------------------------------------------------- */

.carev__nav {
	position: absolute;
	/* Recalé sur le centre des affiches, décalées par le padding de la piste. */
	top: calc(var(--carev-survol-marge) + var(--carev-h) / 2);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--carev-nav-texte);
	background: var(--carev-nav-fond);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.carev__nav[hidden] {
	display: none;
}

.carev__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.carev__nav--prec {
	left: -1.25rem;
}

.carev__nav--suiv {
	right: -1.25rem;
}

.carev__vide {
	margin: 0;
	opacity: 0.75;
}

.carev-alerte {
	padding: 0.75rem 1rem;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
}

/* --- Adaptations -------------------------------------------------------- */

@media (max-width: 782px) {
	.carev {
		--carev-h: 260px;
		--carev-gap: 1rem;
	}

	/* Sur mobile, les flèches gênent plus qu'elles n'aident : le glissement
	   tactile suffit. */
	.carev__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carev__piste {
		scroll-behavior: auto;
	}

	/* On supprime le mouvement, on garde l'indication visuelle. */
	.carev {
		--carev-survol-y: 0px;
	}

	.carev-carte__lien,
	.carev-carte__media {
		transition: none;
	}
}