/* ═══════════════════════════════════════════════════════════════════════════
   06 — HABILLER

   Bande ivoire (`.fmt-section`), deux colonnes égales et centrées : à gauche
   les cinq contenants compatibles, à droite la photographie de la gamme de
   conditionnements et, SOUS elle, la mention d'expédition.

   Plus aucun texte n'est posé sur la photographie, donc plus de voile de
   protection : la mention est un contenant teinté comme les autres. Cartes,
   numéros et mention se détachent de la bande par la teinte, sans trait
   (règle du client).

   Les composants partagés viennent de style.css — `.fmt-section`, `.fmt-card`,
   `.fmt-lede`, `.is-style-fmt-eyebrow`, `.is-style-fmt-mono`.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * core/columns impose `align-items: normal !important` et une marge basse de
 * 1,75 em : on centre chaque colonne par `align-self`, que rien ne force, et
 * on rend la marge au rembourrage de la bande.
 */
.fmt-habiller .fmt-habiller__grille.wp-block-columns {
	gap: var(--space-32) var(--space-64);
	margin-block: 0;
}

.fmt-habiller .fmt-habiller__grille > .wp-block-column {
	align-self: center;
}

/* Les groupes en flux reçoivent l'écart de bloc global de WordPress ; les
   colonnes de cette section portent le leur, on neutralise donc l'héritage. */
.fmt-habiller .fmt-habiller__texte > *,
.fmt-habiller .fmt-habiller__contenants > *,
.fmt-habiller .fmt-habiller__contenant > *,
.fmt-habiller .fmt-habiller__media > *,
.fmt-habiller .fmt-habiller__legende > * {
	margin-block: 0;
}

.fmt-habiller .fmt-habiller__texte {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Titre de section du kit : 30 px au téléphone, 48 px au bureau. */
.fmt-habiller .fmt-habiller__titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

.fmt-habiller .fmt-habiller__intro {
	max-inline-size: 32.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   Les contenants

   Cinq cartes sur deux colonnes : la dernière reste seule sur sa ligne. Plutôt
   qu'une demi-ligne vide, elle occupe toute la largeur. La règle est écrite en
   `:last-child:nth-child(odd)` : elle reste juste si le client ajoute ou
   retire un contenant, et ne s'applique pas quand le compte est pair.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-habiller .fmt-habiller__contenants {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12);
	margin-block-start: var(--space-16);
}

/* `.fmt-card` pose la teinte lin et le rayon 4. */
.fmt-habiller .fmt-habiller__contenant {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-16);
}

.fmt-habiller .fmt-habiller__contenant:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Le numéro : un repère rond. Posé dans une carte lin, il prend la teinte de
   l'autre famille, la surface relevée. */
.fmt-habiller .fmt-habiller__numero {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--radius-pill);
	background: var(--surface-raised);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	line-height: 1;
}

.fmt-habiller .fmt-habiller__nom {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: var(--lh-ui);
	color: var(--text-heading);
}

/* ───────────────────────────────────────────────────────────────────────────
   La photographie et la mention d'expédition

   La photographie garde son format 3:2 natif, rayon 2 px comme toute
   photographie du système ; le lin tient la place avant le chargement. La
   mention, dessous, est un contenant teinté rayon 4.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-habiller .fmt-habiller__media {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

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

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

.fmt-habiller .fmt-habiller__legende {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-24);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
}

.fmt-habiller .fmt-habiller__surtitre {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-muted);
}

/* La mention garde sa voix de prise de parole : Fraunces, pétrole. */
.fmt-habiller .fmt-habiller__mention {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
	color: var(--text-heading);
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.fmt-habiller .fmt-habiller__contenants {
		gap: var(--space-8);
	}

	.fmt-habiller .fmt-habiller__contenant {
		padding: var(--space-12);
	}

	.fmt-habiller .fmt-habiller__numero {
		inline-size: 28px;
		block-size: 28px;
	}

	.fmt-habiller .fmt-habiller__legende {
		padding: var(--space-16);
	}

	.fmt-habiller .fmt-habiller__mention {
		font-size: var(--wp--preset--font-size--large);
	}
}