/*
 * Bloc HERO des Tea Lectrices — le café littéraire new-yorkais.
 *
 * Un décor en image (une version mobile, une version ordinateur, sans texte) et,
 * par-dessus, un seul jeu de textes en HTML (ltl-tea-hero__contenu : cadre avec
 * surtitre et titre, phrase mise en valeur, accroche, texte, bouton, pictogrammes),
 * disposé différemment selon l'écran :
 *   - mobile (941 × 1672)     : la scène (baie vitrée, bibliothèque, lectrices, table)
 *     occupe le haut de l'image, qui se termine en bleu nuit ; seule la scène est
 *     affichée, en entier. Le cadre (surtitre, titre) est posé devant les gratte-ciel,
 *     en haut à gauche ; le reste suit sous la scène, centré, sur un bordeaux foncé
 *     dans lequel se fond le bas de la scène ;
 *   - ordinateur (1665 × 945) : l'image remplit la section ; textes à gauche, devant la
 *     baie vitrée et les gratte-ciel, assombris par un dégradé bleu nuit. La scène,
 *     les livres et les lectrices (à droite) restent dégagés.
 *
 * Couleurs : bleu nuit et bordeaux foncé (fond), ivoire (titre, textes), doré chaud (surtitre, fin du
 * titre en italique, pictogrammes), rose signature (bouton).
 *
 * --u vaut « 1 pixel de l'illustration mobile » à la largeur réelle de la section
 * (100cqi = largeur de la section).
 */

.ltl-tea-hero {
	--ltl-tea-hero-nuit: #041531;
	--ltl-tea-hero-bordeaux: #3f1027;
	--ltl-tea-hero-ivoire: #fbf7f0;
	--ltl-tea-hero-texte: #e6e1e3;
	--ltl-tea-hero-or: #f1bb7e;
	--ltl-tea-hero-serif: Georgia, "Times New Roman", serif;
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Bas de la section (mobile : sous la scène) en bordeaux foncé, comme la section
	 * « Une expérience… » ; sur ordinateur, l'image couvre toute la section. */
	background: linear-gradient(180deg, var(--ltl-tea-hero-bordeaux) 0, var(--ltl-tea-hero-bordeaux) 55%, #2c0a1d 100%);
	color: var(--ltl-tea-hero-ivoire);
	font-family: var(--ltl-font-texte);
}

.ltl-tea-hero > * {
	--u: calc(100cqi / 941);
}

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

/* ------------------------------------------------------------------ */
/* Mobile : la scène, puis les textes sur le bordeaux foncé          */
/* ------------------------------------------------------------------ */

/* Scène affichée en entier, de y = 0 à 900 sur 1672 (bas de la table, déjà fondu dans
 * le bleu nuit) : le cadre du titre garde ainsi sa place devant les gratte-ciel, à
 * toutes les largeurs. */
.ltl-tea-hero__decor {
	position: relative;
	display: block;
	overflow: hidden;
	height: calc(var(--u) * 900);
}

.ltl-tea-hero__decor img {
	position: absolute;
	left: 0;
	bottom: calc(var(--u) * -772);
	display: block;
	width: 100%;
	height: auto !important;
	max-width: none !important;
}

/* Mobile : le bas de la scène (qui se termine en bleu nuit dans l'image) se fond dans
 * le bordeaux foncé de la section. Remplacé sur ordinateur (dégradé derrière les textes). */
.ltl-tea-hero__decor::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(63, 16, 39, 0) 0, rgba(63, 16, 39, 0) 60%, rgba(63, 16, 39, 0.7) 80%, var(--ltl-tea-hero-bordeaux) 100%);
	pointer-events: none;
}

.ltl-tea-hero__contenu {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	margin: calc(var(--u) * -30) 0 0;
	padding: 0 var(--ltl-gouttiere) 40px;
	text-align: center;
}

/* Cadre du surtitre et du titre : sur mobile, devant la baie vitrée et les
 * gratte-ciel (x ≈ 28 à 728, y à partir de 100 sur l'image), au-dessus des lectrices.
 * Position comptée depuis le haut du contenu (y = 870 sur l'image), en « pixels de
 * l'illustration ». Fond bordeaux très foncé et translucide : le décor reste visible. */
.ltl-tea-hero__cadre {
	position: absolute;
	top: calc(var(--u) * -770);
	left: calc(var(--u) * 28);
	box-sizing: border-box;
	width: calc(var(--u) * 700);
	padding: calc(var(--u) * 34) calc(var(--u) * 40) calc(var(--u) * 38);
	border: 1px solid rgba(241, 187, 126, 0.22);
	border-radius: 6px;
	background: rgba(44, 10, 29, 0.62);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: 0 10px 30px rgba(44, 10, 29, 0.35);
	text-align: left;
}

/* Surtitre : petites capitales dorées, après un filet. */
.ltl-tea-hero__surtitre {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ltl-tea-hero-or);
	font-size: clamp(11px, calc(var(--u) * 28), 14px);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ltl-tea-hero__surtitre::before {
	content: "";
	flex: none;
	width: 24px;
	height: 1px;
	background: currentColor;
}

.ltl-tea-hero__titre {
	margin-top: calc(var(--u) * 16);
	font-family: var(--ltl-tea-hero-serif);
	font-size: calc(var(--u) * 60);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.005em;
	color: var(--ltl-tea-hero-ivoire);
	text-wrap: balance;
}

/* Partie du titre en italique (ancien format, éventuel) : comme la phrase mise en valeur. */
.ltl-tea-hero__titre em {
	font-family: var(--ltl-font-tea);
	font-style: italic;
	font-weight: 600;
	color: var(--ltl-tea-hero-or);
}

/* Phrase mise en valeur : italique doré chaud, police des Tea Lectrices. Sur mobile,
 * premier texte sous la scène. */
.ltl-tea-hero__phrase {
	max-width: 600px;
	font-family: var(--ltl-font-tea);
	font-size: clamp(25px, 7.2vw, 36px);
	font-style: italic;
	font-weight: 600;
	line-height: 1.16;
	color: var(--ltl-tea-hero-or);
	text-wrap: balance;
}

/* Trait doré sous le titre, effilé aux deux bouts (décoratif). */
.ltl-tea-hero__trait {
	display: block;
	width: 132px;
	height: 3px;
	margin-top: 14px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 55% 50%, var(--ltl-tea-hero-or) 0, rgba(241, 187, 126, 0.65) 45%, rgba(241, 187, 126, 0) 72%);
}

/* Accroche : distincte du texte (plus grande, en gras, ivoire). */
.ltl-tea-hero__accroche {
	max-width: 600px;
	margin-top: 14px;
	font-size: clamp(16px, 4.4vw, 18px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--ltl-tea-hero-ivoire);
	text-wrap: balance;
}

.ltl-tea-hero__accroche strong {
	font-weight: 800;
	color: var(--ltl-tea-hero-or);
}

.ltl-tea-hero__texte {
	max-width: 34em;
	margin-top: 10px;
	font-size: clamp(15px, 4vw, 16px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--ltl-tea-hero-texte);
	text-wrap: pretty;
}

.ltl-tea-hero__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	max-width: 380px;
	min-height: 56px;
	margin-top: 22px;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--ltl-rose-action);
	box-shadow: 0 12px 30px rgba(209, 28, 87, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	color: var(--ltl-blanc);
	font-family: var(--ltl-font-texte);
	font-size: clamp(16px, 4.6vw, 18px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s var(--ltl-ease), translate 0.2s var(--ltl-ease), box-shadow 0.2s var(--ltl-ease);
}

.ltl-tea-hero__bouton:hover {
	background: #bb1a4f;
	color: var(--ltl-blanc);
	translate: 0 -2px;
	box-shadow: 0 16px 34px rgba(209, 28, 87, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ltl-tea-hero__bouton:focus-visible {
	outline: 3px solid var(--ltl-blanc);
	outline-offset: 3px;
}

.ltl-tea-hero__fleche {
	flex: none;
	width: 20px;
	height: 20px;
	transition: translate 0.2s var(--ltl-ease);
}

.ltl-tea-hero__bouton:hover .ltl-tea-hero__fleche {
	translate: 3px 0;
}

/* Pictogrammes dorés : trois colonnes (icône au-dessus du libellé), séparées par un
 * filet. */
.ltl-tea-hero__pictos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	max-width: 420px;
	margin-top: 26px;
	list-style: none;
}

.ltl-tea-hero__picto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 6px;
	color: var(--ltl-tea-hero-texte);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

.ltl-tea-hero__picto + .ltl-tea-hero__picto {
	border-left: 1px solid rgba(241, 187, 126, 0.28);
}

.ltl-tea-hero__picto-icone {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--ltl-tea-hero-or);
	border-radius: 50%;
	color: var(--ltl-tea-hero-or);
}

.ltl-tea-hero__picto-icone svg {
	width: 22px;
	height: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.ltl-tea-hero__bouton,
	.ltl-tea-hero__fleche {
		transition: none;
	}

	.ltl-tea-hero__bouton:hover,
	.ltl-tea-hero__bouton:hover .ltl-tea-hero__fleche {
		translate: none;
	}
}

/* ------------------------------------------------------------------ */
/* Ordinateur : image pleine section, textes à gauche                  */
/* Même requête média que render.php et editor.js.                     */
/* ------------------------------------------------------------------ */

@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
	/* Hauteur : celle de l'image à la largeur de l'écran, sans dépasser la fenêtre
	 * sous l'en-tête ; au moins 600 px (les textes peuvent l'agrandir). */
	.ltl-tea-hero {
		min-height: max(600px, min(calc(100vw * 945 / 1665), calc(100vh - var(--ltl-header-hauteur, 84px) - var(--ltl-header-haut, 0px))));
		min-height: max(600px, min(calc(100vw * 945 / 1665), calc(100svh - var(--ltl-header-hauteur, 84px) - var(--ltl-header-haut, 0px))));
	}

	.ltl-tea-hero__decor {
		position: absolute;
		inset: 0;
		height: auto;
		max-height: none;
	}

	.ltl-tea-hero__decor img {
		inset: 0;
		height: 100% !important;
		object-fit: cover;
		object-position: 70% 45%;
	}

	/* Dégradé bordeaux très foncé derrière les textes (baie vitrée), qui s'efface avant
	 * les lectrices et la scène. */
	.ltl-tea-hero__decor::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(44, 10, 29, 0.94) 0, rgba(44, 10, 29, 0.9) 32%, rgba(44, 10, 29, 0.68) 43%, rgba(44, 10, 29, 0.25) 54%, rgba(44, 10, 29, 0) 62%),
			linear-gradient(180deg, rgba(44, 10, 29, 0.3) 0, rgba(44, 10, 29, 0) 25%, rgba(44, 10, 29, 0) 75%, rgba(44, 10, 29, 0.45) 100%);
	}

	.ltl-tea-hero__contenu {
		flex: 1;
		justify-content: center;
		align-items: flex-start;
		max-width: none;
		margin: 0;
		/* Aligné sur le logo de l'en-tête (même gouttière), devant la baie vitrée. */
		padding: clamp(40px, 4.5cqi, 80px) var(--ltl-gouttiere);
		text-align: left;
	}

	/* Cadre : simple regroupement, sans fond (le dégradé suffit). */
	.ltl-tea-hero__cadre {
		position: static;
		width: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	.ltl-tea-hero__surtitre::before {
		width: 40px;
	}

	.ltl-tea-hero__surtitre {
		gap: 16px;
		font-size: clamp(13px, 1vw, 16px);
	}

	/* Titre et phrase mise en valeur : même taille, à la suite l'un de l'autre. */
	.ltl-tea-hero__titre,
	.ltl-tea-hero__phrase {
		max-width: 12.6em;
		font-size: clamp(38px, 3.6vw, 64px);
		line-height: 1.08;
	}

	.ltl-tea-hero__titre {
		margin-top: 18px;
	}

	.ltl-tea-hero__phrase {
		margin-top: 0.06em;
	}

	.ltl-tea-hero__trait {
		width: clamp(150px, 13cqi, 230px);
		margin: 10px 0 0 clamp(150px, 15cqi, 300px);
	}

	.ltl-tea-hero__accroche {
		margin-top: 18px;
		font-size: clamp(17px, 1.3vw, 21px);
	}

	.ltl-tea-hero__texte {
		max-width: min(34em, 38cqi);
		margin-top: 10px;
		font-size: clamp(16px, 1.2vw, 19px);
	}

	.ltl-tea-hero__bouton {
		width: auto;
		min-height: 60px;
		margin-top: 28px;
		padding-inline: 40px;
	}

	.ltl-tea-hero__pictos {
		display: flex;
		width: auto;
		max-width: none;
		margin-top: 34px;
	}

	.ltl-tea-hero__picto {
		flex-direction: row;
		gap: 14px;
		padding: 0 clamp(16px, 1.6cqi, 28px);
		font-size: clamp(14px, 1vw, 16px);
		text-align: left;
	}

	.ltl-tea-hero__picto:first-child {
		padding-left: 0;
	}

	.ltl-tea-hero__picto-libelle {
		max-width: 9em;
	}

	.ltl-tea-hero__picto-icone {
		width: clamp(48px, 3.6cqi, 60px);
		height: clamp(48px, 3.6cqi, 60px);
	}

	.ltl-tea-hero__picto-icone svg {
		width: 45%;
		height: 45%;
	}
}