/* ==========================================================================
   Section « Les quatre univers » : vignettes carrées et cliquables,
   deux par ligne, virées en sépia doré au repos, en couleurs au survol.
   ========================================================================== */

.tl-univers {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--creme);
}

/* Grille resserrée et centrée, deux vignettes par ligne ; une seule sur téléphone. */
.tl-univers__grille {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(0.75rem, 1.5vw, 1.25rem) !important;
	max-width: 900px !important;
	margin-inline: auto !important;
}

@media (max-width: 781px) {
	.tl-univers__grille {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 520px !important;
	}
}

/* La vignette : un carré. */
.tl-univers__carte.wp-block-cover {
	position: relative;
	overflow: hidden;
	align-items: flex-end;
	justify-content: flex-start;
	aspect-ratio: 1 / 1;
	min-height: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--wp--preset--color--velours);
}

/* La photo : sépia doré au repos, couleurs et léger zoom au survol. */
.tl-univers__carte .wp-block-cover__image-background {
	filter: grayscale(1) sepia(0.5) saturate(1.4) brightness(0.8);
	transform: scale(1.02);
	transition: filter 0.8s ease, transform 1.2s ease;
}

.tl-univers__carte:hover .wp-block-cover__image-background,
.tl-univers__carte:focus-within .wp-block-cover__image-background {
	filter: none;
	transform: scale(1.06);
}

/* Dégradé sombre en bas, pour la lisibilité du titre, et reflet doré en haut à gauche. */
.tl-univers__carte::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(26, 20, 17, 0.78) 0%, rgba(26, 20, 17, 0) 55%),
		linear-gradient(135deg, rgba(201, 162, 78, 0.22) 0%, rgba(201, 162, 78, 0) 50%);
	pointer-events: none;
}

.tl-univers__carte .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	color: var(--wp--preset--color--texte-clair);
}

.tl-univers__carte .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.tl-univers__carte .tl-surtitre {
	color: var(--wp--preset--color--or);
}

.tl-univers__carte h3 {
	margin-top: 0.35rem;
	color: var(--wp--preset--color--texte-clair);
	font-size: clamp(1.6rem, 2.3vw, 2.2rem);
	line-height: 1.1;
}

/* Le lien du titre couvre toute la vignette ; un filet doré se dessine au survol. */
.tl-univers__carte h3 a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--or), var(--wp--preset--color--or));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.5s ease;
}

.tl-univers__carte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.tl-univers__carte:hover h3 a,
.tl-univers__carte h3 a:focus-visible {
	background-size: 100% 1px;
}

.tl-univers__carte h3 a:focus-visible {
	outline: none;
}

.tl-univers__carte:has(h3 a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--or);
	outline-offset: 4px;
}

/* Dans l'éditeur, le lien ne doit pas recouvrir la vignette (on écrit dedans). */
.editor-styles-wrapper .tl-univers__carte h3 a::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tl-univers__carte .wp-block-cover__image-background,
	.tl-univers__carte h3 a {
		transition: none;
	}
}