/*
 * Bloc HERO — le livre des deux univers.
 *
 * Un décor en image (une version mobile, une version ordinateur, sans texte) et,
 * par-dessus, un seul jeu de textes et de boutons en HTML (ltl-hero__contenu),
 * disposé différemment selon l'écran :
 *   - mobile (941 × 1672)     : titre, accroche et valeurs dans un bandeau au-dessus
 *     de l'illustration, qui s'y fond ; les deux boutons sur les escaliers, juste
 *     au-dessus des têtes des personnages ;
 *   - ordinateur (1536 × 1024) : une colonne au centre, entre les deux livres :
 *     panneau des textes, puis les deux boutons côte à côte. Les logos des livres
 *     (moins de 19 % et plus de 81 % de la largeur) et les personnages (sous 39 %
 *     de la hauteur) restent dégagés.
 *
 * --u vaut « 1 pixel de l'illustration » à la largeur réelle de la scène
 * (100cqi = largeur de la scène). La composition suit la largeur de l'écran, sans
 * saut ; des planchers (max()) gardent textes et boutons lisibles et assez grands
 * pour le doigt.
 */

.ltl-hero {
	container-type: inline-size;
	position: relative;
	background: var(--ltl-marine);
	color: var(--ltl-blanc);
	font-family: var(--ltl-font-texte);
}

.ltl-hero :where(h1, p) {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Mobile : textes au-dessus, illustration, boutons sur les escaliers */
/* ------------------------------------------------------------------ */

.ltl-hero__scene {
	--u: calc(100cqi / 941);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Nuit en haut, puis le bleu du ciel de l'illustration. */
	background: linear-gradient(180deg, var(--ltl-marine-nuit) 0, #1a3272 calc(var(--u) * 260), #3563bd calc(var(--u) * 520));
}

/* Illustration coupée sous les personnages et une bande de sol (y = 1560 sur
 * 1672). Le haut (ciel) glisse sous le
 * bandeau des textes et s'y fond. */
.ltl-hero__decor {
	position: relative;
	order: 2;
	display: block;
	aspect-ratio: 941 / 1560;
	margin-top: calc(var(--u) * -110);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 170));
	mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 170));
}

.ltl-hero__decor img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: 50% 0;
}

/* Sur mobile, le conteneur s'efface : textes et boutons se placent chacun
 * dans la scène. */
.ltl-hero__contenu {
	display: contents;
}

/* Titre et phrases */

.ltl-hero__entete {
	position: relative;
	z-index: 1;
	order: 1;
	padding: max(22px, calc(var(--u) * 60)) 6% calc(var(--u) * 40);
	text-align: center;
	text-shadow: 0 1px 2px rgba(8, 18, 48, 0.45), 0 2px 16px rgba(8, 18, 48, 0.4);
}

.ltl-hero__titre {
	color: var(--ltl-blanc);
	font-family: var(--ltl-font-titre);
	font-size: max(25px, calc(var(--u) * 64));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.ltl-hero__accroche {
	max-width: 34em;
	margin: max(8px, calc(var(--u) * 16)) auto 0 !important;
	color: rgba(255, 255, 255, 0.92);
	font-size: max(15px, calc(var(--u) * 34));
	font-weight: 500;
	line-height: 1.35;
	text-wrap: balance;
}

.ltl-hero__valeurs {
	margin-top: max(6px, calc(var(--u) * 12)) !important;
	color: var(--ltl-jaune);
	font-family: var(--ltl-font-titre);
	font-size: max(17px, calc(var(--u) * 40));
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

/* Boutons (vrais liens), côte à côte sur les escaliers, chacun au-dessus de son
 * groupe de personnages. Leur bord bas est posé juste au-dessus des têtes
 * (y = 983 sur 1672 dans l'illustration, donc 1560 − 975 = 585 depuis le bas
 * de l'image coupée) : ancré par le bas, il ne touche jamais les têtes, quelle
 * que soit la hauteur des boutons. */

.ltl-hero__actions {
	position: absolute;
	z-index: 1;
	right: 3%;
	bottom: calc(var(--u) * 585);
	left: 3%;
	display: flex;
	justify-content: center;
	gap: 3%;
}

.ltl-hero-cta {
	--fond: linear-gradient(90deg, #0050e6, #0049f5 50%, #065ef4);
	--bord: #8fd3ff;
	--halo: rgba(40, 140, 255, 0.85);
	position: relative;
	flex: 1 1 0;
	max-width: calc(var(--u) * 430);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	align-content: center;
	column-gap: calc(var(--u) * 10);
	min-height: max(54px, calc(var(--u) * 104));
	padding: calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * 10) calc(var(--u) * 30);
	border: max(1.5px, calc(var(--u) * 2.5)) solid var(--bord);
	border-radius: 999px;
	background: var(--fond);
	box-shadow:
		0 0 calc(var(--u) * 12) var(--halo),
		0 0 calc(var(--u) * 32) var(--halo),
		inset 0 0 calc(var(--u) * 14) rgba(255, 255, 255, 0.28);
	color: var(--ltl-blanc);
	line-height: 1.05;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s var(--ltl-ease), box-shadow 0.2s var(--ltl-ease), filter 0.2s var(--ltl-ease);
}

.ltl-hero-cta--tea {
	--fond: linear-gradient(90deg, #f00890, #cf0277 50%, #e2028a);
	--bord: #ffb6e1;
	--halo: rgba(255, 40, 160, 0.8);
}

.ltl-hero-cta__avion {
	grid-area: 1 / 1;
	width: max(20px, calc(var(--u) * 50));
	height: auto;
}

.ltl-hero-cta__libelle {
	grid-area: 1 / 2;
	font-size: max(13px, calc(var(--u) * 29));
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ltl-hero-cta__fleche {
	grid-area: 1 / 3;
	width: max(14px, calc(var(--u) * 28));
	height: auto;
	transition: transform 0.2s var(--ltl-ease);
}

/* Mention du public : toute la largeur du bouton, sur une ligne. */
.ltl-hero-cta__public {
	grid-area: 2 / 1 / 3 / 4;
	margin-top: max(2px, calc(var(--u) * 5));
	color: rgba(255, 255, 255, 0.92);
	font-size: max(11px, calc(var(--u) * 22));
	font-weight: 500;
	white-space: nowrap;
}

/* Survol : seulement avec une vraie souris. Sur écran tactile, l'appui
 * laisserait le bouton bloqué à l'état « survolé ». */
@media (hover: hover) and (pointer: fine) {
	.ltl-hero-cta:hover {
		color: var(--ltl-blanc);
		filter: brightness(1.08) saturate(1.05);
		transform: translateY(-2px);
		box-shadow:
			0 0 calc(var(--u) * 16) var(--halo),
			0 0 calc(var(--u) * 44) var(--halo),
			inset 0 0 calc(var(--u) * 14) rgba(255, 255, 255, 0.35);
	}

	.ltl-hero-cta:hover .ltl-hero-cta__fleche {
		transform: translateX(3px);
	}
}

/* Mouvement réduit : pas de déplacement au survol, la lueur reste. */
@media (prefers-reduced-motion: reduce) {
	.ltl-hero-cta:hover,
	.ltl-hero-cta:hover .ltl-hero-cta__fleche {
		transform: none;
	}
}

/* Appui (souris et doigt) : léger enfoncement, plus rapide que le retour.
 * Durées dans l'ordre des propriétés de la transition : transform, box-shadow, filter. */
.ltl-hero-cta:active {
	transform: scale(0.98);
	transition-duration: 140ms, 0.2s, 0.2s;
}

/* Contour blanc cerné de sombre, lisible sur le bleu comme sur le rose. */
.ltl-hero-cta:focus-visible {
	outline: 3px solid var(--ltl-blanc);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px rgba(8, 18, 48, 0.55);
}

/* Téléphones (≤ 520 px) : boutons plus larges, marges resserrées. */
@container (max-width: 520px) {
	.ltl-hero__actions {
		right: 2.5%;
		left: 2.5%;
		gap: 2.5%;
	}

	.ltl-hero-cta {
		max-width: none;
		column-gap: 6px;
		padding-inline: 10px 12px;
	}
}

/* Téléphones étroits (≤ 400 px) : icônes resserrées pour que
 * « les Tea Lectrices » tienne sur une ligne. */
@container (max-width: 400px) {
	.ltl-hero-cta {
		column-gap: 4px;
		padding-inline: 9px;
	}

	.ltl-hero-cta__avion {
		width: 17px;
	}

	.ltl-hero-cta__fleche {
		width: 12px;
	}
}

/* Très petits écrans (< 350 px) : sans l'avion, le libellé garde sa taille. */
@container (max-width: 349px) {
	.ltl-hero-cta__avion {
		display: none;
	}

	.ltl-hero-cta__libelle {
		grid-column: 1 / 3;
	}
}

/* ------------------------------------------------------------------ */
/* Ordinateur (illustration 1536 × 1024)                              */
/* Requête identique à celle de <picture> dans render.php.            */
/* ------------------------------------------------------------------ */

@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
	.ltl-hero__scene {
		--u: calc(100cqi / 1536);
		display: block;
		aspect-ratio: 1536 / 1024;
		background: linear-gradient(180deg, #4a7fd6 0%, #c0607e 35%, #e89a6a 60%, #fbe6c3 100%);
	}

	.ltl-hero__decor {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		margin: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Colonne centrale, entre les deux livres. */
	.ltl-hero__contenu {
		position: absolute;
		top: calc(var(--u) * 34);
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--u) * 24);
		width: max(380px, calc(var(--u) * 860));
		translate: -50% 0;
	}

	/* Panneau des textes : verre marine, lisible quel que soit le décor. */
	.ltl-hero__entete {
		order: 0;
		width: 100%;
		padding: calc(var(--u) * 26) calc(var(--u) * 44) calc(var(--u) * 28);
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: max(18px, calc(var(--u) * 36));
		background: rgba(14, 27, 61, 0.64);
		-webkit-backdrop-filter: blur(10px) saturate(1.3);
		backdrop-filter: blur(10px) saturate(1.3);
		box-shadow:
			0 calc(var(--u) * 18) calc(var(--u) * 48) rgba(14, 27, 61, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.16);
		text-shadow: 0 1px 2px rgba(8, 18, 48, 0.35);
	}

	.ltl-hero__titre {
		font-size: max(24px, calc(var(--u) * 50));
	}

	.ltl-hero__accroche {
		margin-top: calc(var(--u) * 10) !important;
		font-size: max(14px, calc(var(--u) * 24));
		line-height: 1.3;
	}

	.ltl-hero__valeurs {
		margin-top: calc(var(--u) * 8) !important;
		font-size: max(16px, calc(var(--u) * 32));
	}

	/* Boutons : une rangée centrée sous le panneau. */
	.ltl-hero__actions {
		position: static;
		gap: calc(var(--u) * 24);
		width: 100%;
	}

	.ltl-hero-cta {
		flex: 0 1 auto;
		max-width: none;
		column-gap: calc(var(--u) * 12);
		min-height: max(46px, calc(var(--u) * 88));
		/* Place pour la pastille « public », à cheval sur le bas du bouton. */
		margin-bottom: calc(var(--u) * 18);
		padding: calc(var(--u) * 10) max(14px, calc(var(--u) * 28));
		border-width: max(1.5px, calc(var(--u) * 3));
		white-space: nowrap;
	}

	.ltl-hero-cta__avion,
	.ltl-hero-cta__fleche {
		grid-row: 1 / 3;
	}

	.ltl-hero-cta__avion {
		width: max(20px, calc(var(--u) * 48));
	}

	.ltl-hero-cta__libelle {
		grid-row: 1 / 3;
		font-size: max(13px, calc(var(--u) * 25));
		letter-spacing: -0.01em;
	}

	.ltl-hero-cta__fleche {
		width: max(14px, calc(var(--u) * 26));
	}

	/* Pastille sous le bouton. */
	.ltl-hero-cta__public {
		position: absolute;
		/* Hors grille : positionnée par rapport au bouton entier. */
		grid-area: auto;
		top: calc(100% - var(--u) * 15);
		left: 50%;
		margin: 0;
		padding: calc(var(--u) * 5) max(12px, calc(var(--u) * 24));
		border: max(1px, calc(var(--u) * 2)) solid rgba(255, 255, 255, 0.9);
		border-radius: 999px;
		background: linear-gradient(180deg, #f4fbff, #c8e8fe);
		box-shadow: 0 0 calc(var(--u) * 14) rgba(120, 190, 255, 0.7);
		color: #1537d6;
		font-size: max(11px, calc(var(--u) * 20));
		font-weight: 700;
		line-height: 1.1;
		transform: translateX(-50%);
	}

	.ltl-hero-cta--tea .ltl-hero-cta__public {
		background: linear-gradient(180deg, #fff2fb, #fcd5f3);
		box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 120, 200, 0.7);
		color: #c4006f;
	}
}

/* ------------------------------------------------------------------ */
/* Animation d'entrée (désactivée si l'utilisateur la refuse)         */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.ltl-hero__entete {
		animation: ltl-hero-entree 0.8s var(--ltl-ease) 0.1s backwards;
	}

	.ltl-hero-cta {
		animation: ltl-hero-entree 0.8s var(--ltl-ease) 0.35s backwards;
	}

	.ltl-hero-cta--tea {
		animation-delay: 0.45s;
	}
}

@keyframes ltl-hero-entree {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}