/* ═══════════════════════════════════════════════════════════════════════════
   01 — ACCROCHE DE L'ACCUEIL

   La composition de référence du kit FMT Fragrances : une bande ivoire, deux
   colonnes égales — le texte à gauche, centré sur la hauteur du visuel ; le
   visuel à droite, au format 3:2, et sous lui une ligne de légende. Au
   bureau, deux colonnes de 604 px séparées de 32 px dans la colonne de contenu
   de 1 240 px, comme dans `site-desktop-maquette.jpg`.

   C'est aussi la SECTION ÉTALON du thème : bande, rembourrages, titre à deux
   voix et boutons y sont posés comme toutes les autres sections doivent
   l'être.

   Les composants partagés — boutons, `.fmt-display`, `.fmt-eyebrow`,
   `.fmt-mono`, `.fmt-accroche__suite` — viennent de style.css et ne sont pas
   réécrits ici. On ne pose que la mise en page propre à l'accroche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   La bande

   Au téléphone le texte passe au-dessus du visuel, comme dans
   `site-mobile-maquette.jpg`. Le haut respire jusqu'à 96 px, le dernier pas
   de l'échelle du kit (la maquette en laisse 128, hors échelle).
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-48);
	margin-block-start: 0;
	padding-inline: var(--bande-x);
	padding-block: clamp(var(--space-48), 7vw, var(--space-96)) var(--bande-y);
	background: var(--surface-page);
}

.fmt-hero > * {
	margin-block: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Le bloc de texte
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-hero .fmt-hero__contenu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.fmt-hero .fmt-hero__contenu > * {
	margin-block: 0;
}

/*
 * Le titre ne descend jamais sous 40 px : sa seconde voix est en sauge, qui
 * ne tient le contraste (4,11:1 sur ivoire) qu'en très grand corps. Le
 * préréglage `display-l` descend à 36 px sur un téléphone ; le plancher le
 * reprend.
 *
 * La taille est posée ICI et non par l'attribut `fontSize` du bloc : WordPress
 * écrit `.has-display-l-font-size` avec `!important`, et le plancher
 * n'agirait plus. La taille optique des grandes accroches, que style.css
 * n'accorde qu'à cette classe, est donc reprise ici.
 */
.fmt-hero .fmt-hero__titre {
	margin-block-start: var(--space-8);
	font-size: max(40px, var(--wp--preset--font-size--display-l));
	font-variation-settings: var(--fraunces-axes-grand);
	text-wrap: balance;
}

.fmt-hero .fmt-hero__texte {
	max-inline-size: 30rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--text-muted);
}

/* Une même emprise pour les deux appels à l'action, empilés au téléphone. */
.fmt-hero .fmt-hero__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	inline-size: 100%;
	max-inline-size: 34rem;
	gap: var(--space-16);
	margin-block-start: var(--space-8);
}

.fmt-hero .fmt-hero__actions .wp-block-button {
	display: flex;
	min-inline-size: 0;
}

.fmt-hero .fmt-hero__actions .wp-block-button__link {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	min-block-size: 52px;
	padding-block: var(--space-8);
	white-space: normal;
	text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   Le visuel et sa légende

   Rayon de 2 px : une photographie se pose presque à angle vif dans ce
   système. Le fond lin occupe la place tant que le fichier n'est pas arrivé.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-hero .fmt-hero__visuel {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-inline-size: 0;
}

.fmt-hero .fmt-hero__visuel > * {
	margin-block: 0;
}

.fmt-hero .fmt-hero__image {
	margin: 0;
	border-radius: var(--radius-2);
	overflow: hidden;
	background: var(--surface-secondary);
}

.fmt-hero .fmt-hero__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
 * Les trois prix d'entrée, à la place de la légende du kit : trois tuiles
 * lin égales, rayon 4 px, sans contour. Le nom se compose comme la légende de
 * la maquette, en capitales espacées ; le prix, dessous, en chiffres
 * tabulaires. Au téléphone, une liste : le nom à gauche, le prix à droite.
 */
.fmt-hero .fmt-hero__pastilles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
}

.fmt-hero .fmt-hero__pastilles > * {
	margin-block: 0;
	min-inline-size: 0;
}

.fmt-hero .fmt-hero__pastille-lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-inline-size: 0;
	inline-size: 100%;
	box-sizing: border-box;
	gap: var(--space-12);
	block-size: 100%;
	min-block-size: 44px;
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	text-decoration: none;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-hero .fmt-hero__pastille-lien:hover {
	background: var(--surface-contenant-survol);
}

.fmt-hero .fmt-hero__pastille-lien:active {
	transform: scale(var(--scale-press));
}

.fmt-hero .fmt-hero__pastille-nom {
	display: block;
	min-inline-size: 0;
	max-inline-size: 100%;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--petrole);
	white-space: normal;
	overflow-wrap: anywhere;
}

.fmt-hero .fmt-hero__pastille-prix {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
	color: var(--text-muted);
	white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   Élargissements
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 600px) {
	.fmt-hero .fmt-hero__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fmt-hero .fmt-hero__pastilles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fmt-hero .fmt-hero__pastille-lien {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-4);
	}

	.fmt-hero .fmt-hero__pastille-nom {
		min-block-size: 2.4em;
	}
}

/* Deux colonnes dès 900 px — le seuil que reprend `sizes` dans
   FMT_FRAGRANCES_TAILLES_ACCROCHE (functions.php). Le déplacer ici impose de
   le déplacer là-bas. */
@media (min-width: 900px) {
	.fmt-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--space-32);
	}

	.fmt-hero .fmt-hero__contenu {
		padding-inline-end: var(--space-32);
	}
}