/*
 * Bloc lpm/hero. Cette feuille n'est chargée que sur les pages qui contiennent le bloc.
 * Les couleurs et les espacements viennent des variables produites par theme.json.
 */

.hero {
	position: relative;
	isolation: isolate;
}

.hero__slides {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__slide {
	position: relative;
	display: flex;
	align-items: flex-end;
	grid-area: 1 / 1;
	/* Le zoom lent de la photo (view.js) la fait déborder : le visuel la rogne. */
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.8s ease;
	/*
	 * Toute la hauteur de l'écran, moins l'en-tête. La variable est posée par view.js, qui
	 * mesure l'en-tête réel ; la valeur de repli (4,5rem) correspond à sa hauteur nominale,
	 * logo de 2,5rem et deux marges de 1rem. L'unité svh évite que le hero saute quand la
	 * barre d'adresse d'un téléphone se rétracte.
	 */
	min-height: calc(100vh - 4.5rem);
	min-height: calc(100svh - var(--lpm-entete, 4.5rem));
}

/* L'attribut aria-hidden pilote aussi l'affichage : un seul état à tenir à jour. */
.hero__slide[aria-hidden="true"] {
	opacity: 0;
	pointer-events: none;
}

.hero__media {
	position: absolute;
	inset: 0;
	/* Un cran plus bas que le voile : à z-index égal, l'image passerait devant lui. */
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Avec une photo pour mobile, la photo est enveloppée dans un <picture> (render.php). Ce cadre
 * s'efface de la mise en page : la photo se place exactement comme sans lui.
 */
.hero__photo {
	display: contents;
}

/*
 * Voile léger : sans lui, un texte clair sur une photo claire devient illisible.
 * Il est noir, et non d'une couleur de la palette : il assombrit la photo sans en changer
 * les teintes. Deux dégradés superposés. Le premier assombrit le bas, où se trouve le texte,
 * et s'efface complètement vers le haut. Le second assombrit la gauche, du côté du texte,
 * en laissant la photo respirer à droite.
 */
.hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 38%) 32%, rgb(0 0 0 / 12%) 68%, rgb(0 0 0 / 0%) 100%),
		linear-gradient(to right, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 8%) 55%, rgb(0 0 0 / 0%) 100%);
}

.hero__contenu {
	/* width: 100% + padding déborderait de l'écran : WordPress ne pose pas de box-sizing global. */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	/* Mêmes marges latérales que le reste du site, pour que le texte reste aligné. */
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	/* La marge basse laisse la place à l'invitation à défiler et aux commandes. */
	padding-block: var(--wp--preset--spacing--70) calc(var(--wp--preset--spacing--80) + 2rem);
	color: var(--wp--preset--color--base);
}

/* Dernier filet de sécurité sur une photo très claire, imperceptible sur une photo sombre. */
.hero__titre,
.hero__sous-titre {
	text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

.hero__titre {
	max-width: 20ch;
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* L'italique garde le blanc du titre : sur une photo, le terracotta ne serait pas assez lisible. */
.hero__titre em {
	color: inherit;
}

.hero__sous-titre {
	max-width: 42ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

/* Les boutons se rangent côte à côte, et passent à la ligne quand la place manque. */
.hero__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

/*
 * Le sélecteur est doublé pour passer devant les styles de bouton de theme.json,
 * qui ont la même spécificité et sont écrits après.
 */
.hero .hero__bouton {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

.hero .hero__bouton:hover,
.hero .hero__bouton:focus {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--secondary);
}

/* Sur le voile sombre, l'anneau de focus du thème, vert forêt, serait invisible. */
.hero .hero__bouton:focus {
	outline-color: var(--wp--preset--color--base);
}

/*
 * Variante en contour, pour les liens secondaires. Le trait est une ombre intérieure et
 * non une bordure : le bouton garde exactement la taille de ses voisins pleins.
 */
.hero .hero__bouton--contour {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

.hero .hero__bouton--contour:hover,
.hero .hero__bouton--contour:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

/* Invitation à faire défiler */
.hero__defilement {
	position: absolute;
	bottom: var(--wp--preset--spacing--40);
	left: 50%;
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: opacity 0.4s ease;
}

.hero__defilement[hidden] {
	display: none;
}

.hero__defilement svg {
	width: 2rem;
	height: 2rem;
	animation: hero-invitation 2.4s ease-in-out infinite;
}

.hero__defilement:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Une fois la page défilée, l'invitation n'a plus lieu d'être. */
.hero--defile .hero__defilement {
	opacity: 0;
	pointer-events: none;
}

@keyframes hero-invitation {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(0.4rem);
	}
}

/* Commandes */
.hero__controles {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.hero__controles[hidden] {
	display: none;
}

.hero__commande,
.hero__point {
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	border-radius: 999px;
	background: rgb(0 0 0 / 45%);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hero__commande {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
}

.hero__commande svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hero__commande:hover,
.hero__point:hover {
	background: rgb(0 0 0 / 75%);
}

.hero__commande:focus-visible,
.hero__point:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

.hero__points {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	margin-inline: 0.25rem;
}

.hero__point {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
}

.hero__point[aria-current="true"] {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Le bouton bascule entre les deux icônes selon l'état du défilement. */
.hero__icone-lecture,
.hero__commande--pause[aria-pressed="true"] .hero__icone-pause {
	display: none;
}

.hero__commande--pause[aria-pressed="true"] .hero__icone-lecture {
	display: block;
}

@media (max-width: 600px) {
	.hero__titre {
		max-width: none;
	}

	/* Sur téléphone, les commandes remontent : l'invitation à défiler occupe le bas au centre. */
	.hero__controles {
		bottom: calc(var(--wp--preset--spacing--50) + 3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide {
		transition: none;
	}

	.hero__defilement svg {
		animation: none;
	}
}