/* ==========================================================================
   « Découvrir mon univers » : mosaïque défilant horizontalement.

   Par défaut (sans JS, tablette, mobile, prefers-reduced-motion) :
   défilement horizontal natif avec scroll-snap.
   Avec JS en desktop, la section reçoit .univers--epingle : elle devient le
   « wrapper » haut (hauteur calculée en JS), le bloc sticky occupe l'écran et
   la piste est translatée en X selon la progression du scroll vertical.

   Chaque image a une hauteur (--hauteur) et une position (--haut) en % de la
   zone d'images, saisies dans l'admin ; la largeur découle du ratio (--ratio).
   ========================================================================== */

.univers__titre {
	padding-top: var(--univers-pad-top);
}

/* Zone d'images : hauteur fixe en mode natif. */
.univers__scene {
	height: var(--univers-scene-natif);
	margin-top: var(--univers-scene-marge);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.univers__piste {
	display: flex;
	gap: var(--univers-gap);
	width: max-content;
	height: 100%;
	padding-inline: var(--univers-debut) var(--univers-fin);
}

.univers__element {
	position: relative;
	top: calc(var(--haut) * 1%);
	flex: none;
	height: calc(var(--hauteur) * 1%);
	aspect-ratio: var(--ratio);
	scroll-snap-align: center;
}

.univers__lien {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.univers__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Survol : voile gris en multiply + « VOIR → » blanc (même effet que les cartes œuvre). */
a.univers__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-overlay);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity var(--t-hover);
}

.univers__voir {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cta-gap);
	color: var(--c-white);
	font-weight: var(--fw-medium);
	font-size: var(--fs-cta);
	line-height: var(--lh-cta);
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(var(--hover-glissement));
	transition: opacity var(--t-hover), transform var(--t-hover);

	& .fleche__svg {
		width: var(--fleche-long);
		height: var(--fleche-larg);
	}
}

a.univers__lien:hover,
a.univers__lien:focus-visible {
	&::after {
		opacity: 1;
	}

	& .univers__voir {
		opacity: 1;
		transform: none;
	}
}

.univers__lien:focus-visible {
	outline-offset: 2px;
}

/* ---------- Mode épinglé (desktop, JS actif) ---------- */
.univers--epingle {
	height: var(--univers-hauteur, auto);

	& .univers__sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: clip; /* pas de défilement parasite quand une image reçoit le focus */
	}

	& .univers__scene {
		position: absolute;
		inset: var(--univers-scene-haut) 0 0;
		height: auto;
		margin: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	& .univers__piste {
		will-change: transform;
	}
}

@media (max-width: 767.98px) {
	.univers {
		padding-bottom: var(--space-l);
	}

	.univers__piste {
		padding-inline: var(--page-margin);
	}
}