/* ═══════════════════════════════════════════════════════════════════════════
   31 — MARQUE PRIVÉE : 01 LE BRIEF

   Bande ivoire : l'en-tête de section, puis trois cartes numérotées en grille
   égale. `.fmt-section`, `.fmt-head`, `.fmt-head__main`, `.fmt-head__aside`
   et `.fmt-card` viennent de style.css : on ne pose ici que la grille, le rond
   du rang et les tailles.

   Les cartes sont lin sur l'ivoire de la bande (`--surface-contenant`), sans
   contour ni ombre. Le rang est un rond plus clair que sa carte : un
   contenant dans un contenant prend la teinte de l'autre famille.
   ═══════════════════════════════════════════════════════════════════════════ */

/* WordPress espace les enfants d'un groupe en flux de 24 px. Tous nos
   conteneurs gèrent leurs écarts en flex ou en grille : la marge s'y
   ajouterait. Ces règles viennent EN PREMIER pour que les marges explicites
   déclarées plus bas l'emportent. */
.fmt-privee-brief > *,
.fmt-privee-brief .wp-block-group > * {
	margin-block: 0;
}

/* La barre de navigation est collante : une ancre suivie depuis le menu ou le
   pied de page doit s'arrêter en dessous, pas dessous. */
.fmt-privee-brief {
	scroll-margin-block-start: calc(var(--fmt-nav-h) + var(--space-24));
}

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

/* ═══════════════════════════════════════════════════════════════ LES CARTES */

.fmt-privee-brief .fmt-privee-brief__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
	margin-block-start: var(--space-48);
}

.fmt-privee-brief .fmt-privee-brief__carte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-32);
}

/* Le rang est du contenu — il dit l'ordre de remplissage du brief — mais il se
   lit comme un repère rond : c'est la mise en forme qui le dit, pas le
   balisage. Rond ivoire clair dans la carte lin, chiffre pétrole. */
.fmt-privee-brief .fmt-privee-brief__rang {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	margin-block-end: var(--space-8);
	border-radius: var(--radius-pill);
	background: var(--surface-raised);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fmt-privee-brief .fmt-privee-brief__nom {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
}

/* Texte discret : 4,81:1 sur lin, au-dessus des 4,5:1 dus au texte courant. */
.fmt-privee-brief .fmt-privee-brief__texte {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════ ADAPTATION */

/* Trois colonnes ne tiennent plus : deux, puis une. La troisième carte prend
   toute la largeur au palier intermédiaire plutôt que de rester orpheline. */
@media (max-width: 900px) {
	.fmt-privee-brief .fmt-privee-brief__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
		margin-block-start: var(--space-32);
	}

	.fmt-privee-brief .fmt-privee-brief__carte {
		padding: var(--space-24);
	}

	.fmt-privee-brief .fmt-privee-brief__carte:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.fmt-privee-brief .fmt-privee-brief__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.fmt-privee-brief .fmt-privee-brief__carte:last-child {
		grid-column: auto;
	}
}