/* ═══════════════════════════════════════════════════════════════════════════
   30 — MARQUE PRIVÉE : L'ACCROCHE

   Composée exactement comme l'accroche de l'accueil (01-hero.css, la section
   étalon) : une bande ivoire, deux colonnes égales au bureau — la promesse à
   gauche, centrée sur la hauteur du visuel ; le flacon et sa mouillette à
   droite, au format 3:2, et sous lui deux petites tuiles lin.

   Plus d'arche, de halo, de chute ni de flottement : le kit proscrit toute
   animation permanente, et le nouveau visuel a son propre fond — il n'a plus
   besoin d'être détouré par multiplication.

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

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

   Même respiration que l'accroche de l'accueil : jusqu'à 96 px en haut, le
   rythme de bande en bas. Au téléphone, le texte passe au-dessus du visuel.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-privee-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 pose 24 px de marge haute aux frères non-premiers d'une mise en
   page « flux » ; dans une grille ou une colonne flexible, elle s'ajouterait
   aux écarts déclarés ici. */
.fmt-privee-hero > *,
.fmt-privee-hero .fmt-privee-hero__contenu > *,
.fmt-privee-hero .fmt-privee-hero__visuel > *,
.fmt-privee-hero .fmt-privee-hero__mentions > *,
.fmt-privee-hero .fmt-privee-hero__pastilles > * {
	margin-block: 0;
}

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

.fmt-privee-hero .fmt-privee-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. 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 la classe `.has-display-l-font-size` avec `!important`, et le
 * plancher n'agirait plus. Pour la même raison, la taille optique des grandes
 * accroches (144), que style.css n'accorde qu'à cette classe, est reprise
 * ici.
 */
.fmt-privee-hero .fmt-privee-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-privee-hero .fmt-privee-hero__texte {
	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-privee-hero .fmt-privee-hero__actions {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	margin-block-start: var(--space-8);
}

/*
 * Les trois mentions, sous les boutons. Plus de filet au-dessus : l'écart
 * suffit à les détacher des boutons, et le client ne veut pas de traits
 * partout. Elles sont séparées par un point rond cuivre — le cuivre est un
 * décor, jamais un texte, et ce point n'est que du décor.
 *
 * Au téléphone, les trois ne tiennent pas sur une ligne : un point
 * séparateur tomberait en tête de la seconde. Elles s'empilent donc, sans
 * point ; la ligne pointée revient dès 600 px.
 */
.fmt-privee-hero .fmt-privee-hero__mentions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-16);
	margin-block-start: var(--space-8);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-ui);
	color: var(--text-muted);
}

.fmt-privee-hero .fmt-privee-hero__mention {
	display: inline-flex;
	align-items: center;
	gap: var(--space-16);
	white-space: nowrap;
}

/* Le point appartient à la mise en page, pas au texte : il est dessiné,
   jamais écrit — un « · » saisi dans l'éditeur serait lu à voix haute. */
@media (min-width: 600px) {
	.fmt-privee-hero .fmt-privee-hero__mentions {
		flex-direction: row;
		align-items: center;
	}

	.fmt-privee-hero .fmt-privee-hero__mention + .fmt-privee-hero__mention::before {
		content: "";
		flex: none;
		inline-size: 4px;
		block-size: 4px;
		border-radius: var(--radius-pill);
		background: var(--cuivre);
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   Le visuel et ses deux tuiles

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

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

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

/*
 * Les anciennes pastilles de verre : deux tuiles lin égales, rayon 4 px, sans
 * contour ni ombre — la teinte suffit à les détacher de l'ivoire. Composées
 * comme les liens-prix de l'accueil : l'intitulé en capitales espacées, la
 * précision dessous. Au téléphone, une liste : l'intitulé à gauche, la
 * précision à droite.
 */
.fmt-privee-hero .fmt-privee-hero__pastilles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
}

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

.fmt-privee-hero .fmt-privee-hero__pastille-titre {
	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-privee-hero .fmt-privee-hero__pastille-note {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
	color: var(--text-muted);
}

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

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

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

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

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

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