/* ═══════════════════════════════════════════════════════════════════════════
   20 — ACCROCHE MARQUE BLANCHE

   Recomposée sur la section étalon, l'accroche de l'accueil (01-hero.css) :
   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 deux
   petits contenants teintés à la place de la légende du kit.

   Plus d'arche, de packshot, de reflet, de verre dépoli ni de flottement en
   boucle : aucune animation permanente, aucun flou d'arrière-plan.

   Les composants partagés — boutons, `.is-style-fmt-display`,
   `.is-style-fmt-eyebrow`, `.is-style-fmt-mono`, `.fmt-accroche__suite` —
   viennent de style.css et ne sont pas réécrits ici.
   ═══════════════════════════════════════════════════════════════════════════ */

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

   Même rembourrage que l'accroche de l'accueil : le haut respire jusqu'à
   96 px, le bas prend le rythme commun des bandes.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-blanche-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);
}

/* WordPress espace les enfants d'un groupe en flux ; ici tout s'espace par
   `gap`. */
.fmt-blanche-hero > *,
.fmt-blanche-hero .wp-block-group > * {
	margin-block: 0;
}

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

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

/*
 * 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. La taille est
 * posée ici et non par l'attribut de taille du bloc : WordPress écrit la
 * classe `has-*-font-size` en `!important`, ce qui rendrait le plancher sans
 * effet. D'où aussi la taille optique 144, que style.css n'accorde qu'à cette
 * classe.
 */
.fmt-blanche-hero .fmt-blanche-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-blanche-hero .fmt-blanche-hero__chapo {
	max-inline-size: 30rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--text-muted);
}

/* Au téléphone, les deux appels à l'action s'empilent et gardent leur
   largeur naturelle, comme dans la maquette mobile du kit. */
.fmt-blanche-hero .fmt-blanche-hero__actions {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	margin-block-start: var(--space-8);
}

/* Les mentions ferment la colonne, sans filet : l'espace suffit à les
   détacher des boutons. */
.fmt-blanche-hero .fmt-blanche-hero__mentions {
	margin-block-start: var(--space-8);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-ui);
	color: var(--text-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   Le visuel et ses deux repères

   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-blanche-hero .fmt-blanche-hero__visuel {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-inline-size: 0;
}

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

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

/*
 * Les deux anciennes pastilles de verre : deux tuiles lin égales, rayon 4 px,
 * sans contour ni ombre — exactement les tuiles de prix de l'accueil. Au
 * téléphone, une liste : l'intitulé à gauche, la note à droite.
 */
.fmt-blanche-hero .fmt-blanche-hero__pastilles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
}

.fmt-blanche-hero .fmt-blanche-hero__pastille {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	min-block-size: 44px;
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
}

/* L'intitulé se compose comme la légende de la maquette, en capitales
   espacées ; la valeur des paliers garde ses chiffres tabulaires. */
.fmt-blanche-hero .fmt-blanche-hero__pastille-titre,
.fmt-blanche-hero .fmt-blanche-hero__pastille-valeur {
	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: nowrap;
}

.fmt-blanche-hero .fmt-blanche-hero__pastille-note {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
	color: var(--text-muted);
	text-align: end;
}

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

@media (min-width: 600px) {
	.fmt-blanche-hero .fmt-blanche-hero__actions {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

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

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

	.fmt-blanche-hero .fmt-blanche-hero__pastille-note {
		text-align: start;
	}
}

/* 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-blanche-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--space-32);
	}

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