/* ==========================================================================
   Hero : titre fantôme, accroche (ou texte), titre retourné à 180°,
   photo arrondie (colonnes 8 à 12) avec tampon et texte vertical, lien fléché.
   ========================================================================== */

.hero__inner {
	padding-top: var(--hero-pad-top);
}

.hero__texte {
	grid-column: 1 / 8;
	grid-row: 1;
	padding-top: var(--hero-titre-haut);
}

.hero__titre {
	width: var(--hero-titre-w);
	max-width: 100%;
	margin-left: var(--hero-titre-decalage);
}

.hero__accroche {
	max-width: var(--hero-accroche-w);
	margin-top: var(--hero-accroche-haut);
	margin-left: var(--hero-accroche-decalage);
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-accroche);
	line-height: var(--lh-accroche);
}

.hero__texte-courant {
	max-width: var(--hero-accroche-w);
	margin-top: var(--hero-accroche-haut);
	margin-left: var(--hero-accroche-decalage);

	& p + p {
		margin-top: 1lh;
	}
}

/* Titre noir retourné : purement graphique (aria-hidden), il répète le titre fantôme. */
.hero__retourne {
	width: var(--hero-titre-w);
	max-width: 100%;
	margin-top: var(--hero-retourne-haut);
	margin-left: var(--hero-retourne-decalage);
	transform: rotate(180deg);
}

.hero__photo {
	position: relative;
	grid-column: 8 / -1;
	grid-row: 1;
	align-self: start;
}

.hero__photo-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hero-photo-ratio);
	object-fit: cover;
	border-radius: var(--radius-media);
}

.hero__tampon {
	position: absolute;
	top: var(--hero-tampon-y);
	left: var(--hero-tampon-x);
	width: var(--hero-tampon-w);
	height: auto;
}

/* Texte vertical, lu de bas en haut, aligné sur le haut de la photo. */
.hero__nom {
	position: absolute;
	top: 0;
	left: calc(100% + var(--hero-nom-x));
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: var(--fw-medium);
	font-size: var(--fs-cta);
	line-height: var(--lh-nom-vertical);
	text-transform: uppercase;
	white-space: nowrap;
}

.hero__cta {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: var(--hero-cta-haut);
}

/* Variante « texte courant » (À propos) : le texte démarre plus bas (titre sur une ligne),
   le lien remonte à hauteur du bas de la photo sans changer la hauteur du hero. */
.hero--texte {
	& .hero__texte-courant {
		margin-top: var(--hero-texte-haut);
	}

	& .hero__cta {
		position: relative;
		top: var(--hero-cta-decalage-texte);
	}
}

/* Mobile : tout le hero tient dans l'écran (100svh, header compris).
   Titre fantôme, accroche, photo centrée qui prend la place restante, titre retourné
   qui mord sur le bas de la photo, lien fléché. Les tailles de texte dépendent de la
   largeur ET de la hauteur d'écran, pour tenir aussi sur les petits téléphones. */
@media (max-width: 767.98px) {
	.hero__inner {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--header-h));
		height: calc(100svh - var(--header-h));
		padding-top: var(--space-xs);
		padding-bottom: var(--space-m);
	}

	.hero__texte {
		display: contents;
	}

	.hero__titre,
	.hero__retourne {
		width: auto;
		max-width: none;
		margin-left: 0;
		font-size: var(--hero-mobile-display);
	}

	.hero__accroche,
	.hero__texte-courant {
		max-width: none;
		margin: var(--space-s) 0 0;
	}

	.hero__accroche {
		font-size: var(--hero-mobile-accroche);
	}

	/* La photo prend toute la hauteur restante, recadrée. */
	.hero__photo {
		order: 1;
		flex: 1 1 0;
		min-height: 0;
		width: var(--hero-mobile-photo-w);
		align-self: center;
		margin-top: var(--space-s);
	}

	.hero__photo-img {
		height: 100%;
		aspect-ratio: auto;
	}

	/* Titre retourné : sa première ligne (visuellement) passe sur le bas de la photo. */
	.hero__retourne {
		position: relative;
		z-index: var(--z-base);
		order: 2;
		margin-top: calc(var(--lh-display) * -1em);
	}

	.hero__cta {
		order: 3;
		margin-top: var(--space-m);
	}

	.hero__tampon,
	.hero__nom {
		display: none;
	}
}

/* Mobile, variante « texte courant » : trop de texte pour tenir dans l'écran,
   le hero reprend une hauteur libre et la photo son format. */
@media (max-width: 767.98px) {
	.hero--texte {
		& .hero__inner {
			height: auto;
		}

		& .hero__texte-courant {
			margin-top: var(--space-s);
		}

		& .hero__photo {
			flex: none;
			width: 100%;
			margin-top: var(--space-l);
		}

		& .hero__photo-img {
			height: auto;
			aspect-ratio: var(--hero-photo-ratio);
		}

		& .hero__cta {
			top: 0;
		}
	}
}