/* ═══════════════════════════════════════════════════════════════════════════
   11 — LE CATALOGUE

   Bande ivoire. En-tête de section, trois cartes produit, puis la rangée des
   senteurs. Trois colonnes égales au bureau, deux dès 601 px, une seule en
   dessous.

   Les cartes suivent le `ProductCard` du kit, sans son filet (décision du
   client) : rayon 16, teinte lin du contenant sur la bande ivoire, ni trait
   ni ombre. Au survol, la teinte fonce d'un cran et la carte monte d'un pixel.

   Les composants partagés — `.fmt-section`, `.fmt-card`, `.fmt-card--media`,
   `.fmt-head`, `.fmt-chip` — viennent de style.css. On ne décrit ici que la
   mise en page de la section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La navigation pointe `#catalogue` : la section ne doit pas s'arrêter collée
   sous la barre de navigation. */
.fmt-catalogue {
	scroll-margin-block-start: var(--fmt-nav-h);
}

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

/* ─── En-tête de section ─────────────────────────────────────────────────── */

/* Titre de section du kit : 48 px au bureau, sans descendre sous 30 px. */
.fmt-catalogue .fmt-catalogue__titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* ─── Grille de cartes ───────────────────────────────────────────────────── */

.fmt-catalogue .fmt-catalogue__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-16);
	margin-block-start: var(--space-32);
}

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

@media (min-width: 900px) {
	.fmt-catalogue .fmt-catalogue__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-24);
		margin-block-start: var(--space-48);
	}
}

/* ─── Une carte ──────────────────────────────────────────────────────────── */

/* `.fmt-card` pose la teinte lin, le rayon et la transition ; `.fmt-card--media`
   passe le rayon à 16 px. La carte n'est pas un lien (le lien est sur le nom,
   étiré) : le survol est donc déclaré ici, sur la carte elle-même. */
.fmt-catalogue .fmt-catalogue__carte {
	position: relative;
	display: flex;
	flex-direction: column;
}

.fmt-catalogue .fmt-catalogue__carte:hover {
	background: var(--surface-contenant-survol);
	transform: translateY(var(--lift-hover));
}

.fmt-catalogue .fmt-catalogue__carte:active {
	transform: translateY(var(--lift-hover)) scale(var(--scale-press));
}

/* Le focus est rendu par la carte entière, pas par le seul nom du produit :
   c'est la carte qui est la cible cliquable. Même halo que le reste du site
   (cuivre, 2 px, décalé de 2 px) ; il n'apparaît qu'au clavier. */
.fmt-catalogue .fmt-catalogue__carte:has(.fmt-catalogue__lien:focus-visible) {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Les photos de famille sont carrées. Aucun espace ni fond secondaire ne doit
   apparaître au bord supérieur de la carte. */
.fmt-catalogue .fmt-catalogue__media {
	display: block;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

.fmt-catalogue .fmt-catalogue__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fmt-catalogue .fmt-catalogue__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-24);
}

.fmt-catalogue .fmt-catalogue__puces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

/* La puce est un contenant dans un contenant : sur la carte lin, elle prend la
   teinte de l'autre famille, la surface relevée. */
.fmt-catalogue .fmt-catalogue__puce {
	background: var(--surface-raised);
}

/* Nom en Fraunces, 20 px au téléphone, 28 px au bureau comme dans le kit. */
.fmt-catalogue .fmt-catalogue__nom {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
}

@media (min-width: 900px) {
	.fmt-catalogue .fmt-catalogue__nom {
		font-size: var(--wp--preset--font-size--h-3);
	}
}

/* Lien étiré : le nom du produit porte le lien, le pseudo-élément couvre la
   carte. Aucun autre élément de la carte n'est cliquable, il n'y a donc pas de
   conflit de cible. */
.fmt-catalogue .fmt-catalogue__lien {
	color: var(--text-heading);
	text-decoration: none;
}

.fmt-catalogue .fmt-catalogue__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* L'anneau de focus est déjà porté par la carte : on évite le doublon. */
.fmt-catalogue .fmt-catalogue__lien:focus-visible {
	outline: none;
}

.fmt-catalogue .fmt-catalogue__description {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-body);
	color: var(--text-body);
	text-wrap: pretty;
}

/* Le prix est poussé au pied de la carte : les trois descriptions n'ont pas
   la même longueur, les trois prix s'alignent malgré tout. */
.fmt-catalogue .fmt-catalogue__prix {
	display: flex;
	align-items: baseline;
	gap: var(--space-8);
	margin-block-start: auto;
	padding-block-start: var(--space-4);
}

.fmt-catalogue .fmt-catalogue__montant {
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-heading);
}

/* Texte discret sur lin : 4,81:1, au-dessus du seuil de 4,5:1. */
.fmt-catalogue .fmt-catalogue__unite {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
}

/* ─── Rangée des senteurs ────────────────────────────────────────────────── */

.fmt-catalogue .fmt-catalogue__senteurs {
	margin-block-start: var(--space-24);
}

@media (min-width: 900px) {
	.fmt-catalogue .fmt-catalogue__senteurs {
		margin-block-start: var(--space-32);
	}
}

.fmt-catalogue .fmt-catalogue__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

/* Les senteurs n'ont pas de page dédiée : ce sont des `<span>` au format
   `Badge` du kit, en teinte lin, sans contour. Le curseur reste celui du
   texte, et rien n'invite à cliquer. `.fmt-chip` fournit tout le reste. */

/* Seule puce cliquable de la rangée : pétrole plein et flèche du système. La
   différence porte l'information « celle-ci mène quelque part » sans dépendre
   de la seule couleur. */
.fmt-catalogue .fmt-catalogue__toutes {
	text-decoration: none;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-catalogue .fmt-catalogue__toutes:hover {
	background: var(--petrole-survol);
	color: var(--text-on-inverse);
}

.fmt-catalogue .fmt-catalogue__toutes:active {
	transform: scale(var(--scale-press));
}

.fmt-catalogue .fmt-catalogue__fleche {
	display: block;
	flex: none;
	inline-size: 13px;
	block-size: 13px;
}