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

   Par défaut (sans JS, prefers-reduced-motion) :
   défilement horizontal natif avec scroll-snap.
   Avec JS (tous écrans), 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é (JS actif) ---------- */
.univers--epingle {
	height: var(--univers-hauteur, auto);

	& .univers__sticky {
		position: sticky;
		top: 0;
		height: 100svh; /* hauteur visible même avec la barre d'adresse du mobile */
		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;
	}
}

/* Tablette et mobile épinglés : le titre en haut, la zone d'images prend tout le reste de l'écran
   (visuels bien plus grands qu'en défilement natif). */
@media (max-width: 1023.98px) {
	.univers--epingle {
		& .univers__sticky {
			display: flex;
			flex-direction: column;
		}

		& .univers__titre {
			padding-top: var(--space-l);
		}

		& .univers__scene {
			position: relative;
			inset: auto;
			flex: 1;
			min-height: 0;
			margin-block: var(--space-l);
		}

		/* Une image ne dépasse jamais 80 % de la largeur de l'écran (sa hauteur s'adapte, ratio conservé). */
		& .univers__element {
			height: min(calc(var(--hauteur) * 1%), calc(80vw / (var(--ratio))));
		}
	}
}

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

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