/* ═══════════════════════════════════════════════════════════════════════════
   02 — LES TROIS BASES

   Section « 01 — Choisir la base », sur une bande ivoire (`.fmt-section`).
   Trois cartes produit selon la `ProductCard` du kit : rayon 16, teinte lin,
   ni trait ni ombre (règle du client). Grille de trois colonnes égales au
   bureau, rail horizontal à défilement avec accroche au téléphone.

   Couleurs, rayons et durées viennent des jetons ; `.fmt-card`, `.fmt-chip`,
   `.fmt-head` et `.fmt-rail` de style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* WordPress espace les enfants d'un groupe en flux (`is-layout-flow`). Tous
   nos conteneurs gèrent leurs écarts en flex ou en grille : on annule la marge
   de flux, sinon elle s'ajoute aux `gap`. Ces règles viennent EN PREMIER pour
   que les marges explicites déclarées plus bas l'emportent. */
.fmt-bases > *,
.fmt-bases .wp-block-group > * {
	margin-block: 0;
}

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

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

/* ─── Rail mobile / grille bureau ────────────────────────────────────────── */

.fmt-bases .fmt-bases__grille {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 264px;
	gap: var(--space-12);
	margin-block-start: var(--space-32);
	/* Le rail déborde du rembourrage de la bande : les cartes filent jusqu'au
	   bord de l'écran, et la première reste alignée sur le texte. Au téléphone
	   ce rembourrage vaut exactement la gouttière. */
	margin-inline: calc(var(--gutter) * -1);
	/* Plus de marge « pour l'ombre » : les cartes n'en ont plus. Les 4 px
	   haut et bas laissent seulement passer l'anneau de focus et le pixel de
	   montée au survol, que le conteneur à défilement rognerait sinon. */
	padding: var(--space-4) var(--gutter);
	scroll-padding-inline-start: var(--gutter);
}

@media (min-width: 900px) {
	.fmt-bases .fmt-bases__grille {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-24);
		margin-block-start: var(--space-48);
		margin-inline: 0;
		padding: 0;
		/* Neutralise `.fmt-rail` : plus rien ne déborde. */
		overflow: visible;
		scroll-snap-type: none;
	}
}

/* ─── Carte ──────────────────────────────────────────────────────────────── */

/*
 * `.fmt-card` pose la teinte, `.fmt-card--media` le rayon 16 et le
 * découpage. Au survol, la teinte fonce d'un cran et la carte monte d'un
 * pixel ; à l'appui, l'échelle du système.
 */
.fmt-bases .fmt-bases__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}

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

.fmt-bases .fmt-bases__carte:active {
	transform: 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. */
.fmt-bases .fmt-bases__carte:focus-within {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Même cadrage carré bord à bord que les cartes du catalogue sur l'accueil. */
.fmt-bases .fmt-bases__media {
	display: block;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

/* Le bloc image de WordPress impose `height: auto` à la même spécificité que
   nous : on qualifie par la section pour trancher quel que soit l'ordre
   d'impression des feuilles. */
.fmt-bases .fmt-bases__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

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

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

/* Contenant dans un contenant : la puce prend la teinte de l'autre famille,
   la surface relevée, sans quoi le lin de la puce se fondrait dans celui de
   la carte. */
.fmt-bases .fmt-bases__puce {
	background: var(--surface-raised);
}

.fmt-bases .fmt-bases__senteur {
	font-size: var(--wp--preset--font-size--small);
	color: var(--text-muted);
}

/* Nom en Fraunces, comme la `ProductCard` du kit. */
.fmt-bases .fmt-bases__nom {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
}

@media (min-width: 900px) {
	.fmt-bases .fmt-bases__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-bases .fmt-bases__lien {
	color: var(--text-heading);
	text-decoration: none;
}

.fmt-bases .fmt-bases__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-bases .fmt-bases__lien:focus-visible {
	outline: none;
}

.fmt-bases .fmt-bases__description {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

@media (min-width: 900px) {
	.fmt-bases .fmt-bases__description {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* Le prix se pose en pied de carte, quelle que soit la longueur de la
   description : les trois cartes alignent leurs prix. */
.fmt-bases .fmt-bases__prix {
	display: flex;
	align-items: baseline;
	gap: var(--space-8);
	margin-block-start: auto;
	padding-block-start: var(--space-4);
}

.fmt-bases .fmt-bases__montant {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--text-heading);
}

.fmt-bases .fmt-bases__unite {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
}

@media (min-width: 900px) {
	.fmt-bases .fmt-bases__montant {
		font-size: var(--wp--preset--font-size--h-4);
	}

	.fmt-bases .fmt-bases__unite {
		font-size: var(--wp--preset--font-size--small);
	}
}