/* ═══════════════════════════════════════════════════════════════════════════
   33 — MARQUE PRIVÉE : 04 LES VOLUMES

   Bande lin : l'en-tête de section, quatre cartes de palier en grille égale,
   puis la mention tarifaire. `.fmt-section`, `.fmt-section--lin`, `.fmt-head`,
   `.fmt-card`, `.fmt-chip` et `.fmt-mono` viennent de style.css.

   Sur le lin, les cartes prennent la surface relevée (`--surface-contenant`),
   sans contour ni ombre. Le palier vedette se distingue par deux signaux, et
   jamais par un trait : son intitulé est un `Badge` pétrole, et sa carte
   prend l'ivoire clair, un cran plus lumineux que ses voisines.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-volumes > *,
.fmt-privee-volumes .wp-block-group > * {
	margin-block: 0;
}

/* La barre de navigation est collante : l'ancre doit s'arrêter dessous. */
.fmt-privee-volumes {
	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-volumes .fmt-privee-volumes__titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* ═══════════════════════════════════════════════════════════════ LA GRILLE */

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

.fmt-privee-volumes .fmt-privee-volumes__carte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-32) var(--space-24);
}

.fmt-privee-volumes .fmt-privee-volumes__carte--vedette {
	background: var(--ivoire-clair);
}

/* ─────────────────────────────────────────────────────────────── Les lignes */

/* Rubrique du palier : un titre pour la structure, une étiquette pour l'œil.
   Elle tient exactement la hauteur d'un badge (26 px), pour que les quatre
   chiffres s'alignent, que le palier porte un badge ou non. */
.fmt-privee-volumes .fmt-privee-volumes__palier {
	display: flex;
	align-items: center;
	min-block-size: 26px;
	margin-block-end: var(--space-16);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--text-muted);
}

/* Grand chiffre (28 px et plus) : Fraunces, comme le poids des vignettes du
   kit. Chiffres alignés, pour que 500 et 5 000 se lisent en colonne. */
.fmt-privee-volumes .fmt-privee-volumes__unites {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: var(--lh-section);
	letter-spacing: var(--track-subsection);
	color: var(--petrole);
}

/* Texte discret : 6,05:1 sur la surface relevée, 6,37:1 sur l'ivoire clair
   de la vedette — au-dessus des 4,5:1 dus au texte courant. */
.fmt-privee-volumes .fmt-privee-volumes__legende {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-ui);
	color: var(--text-muted);
}

/* Le prix se détache du volume par l'espace, plus par un filet : ce sont deux
   lectures différentes, ce que vous commandez et ce que cela coûte. */
.fmt-privee-volumes .fmt-privee-volumes__prix {
	margin-block-start: var(--space-24);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--encre);
}

.fmt-privee-volumes .fmt-privee-volumes__legende--fin {
	font-size: var(--wp--preset--font-size--caption);
}

/* ═══════════════════════════════════════════════════════════════ LA MENTION

   Discrète mais lisible : c'est elle qui dit que ces quatre prix sont
   indicatifs et que seul le devis engage. Elle ne peut donc pas descendre sous
   le seuil de contraste du texte courant (texte discret : 4,81:1 sur lin).
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-volumes .fmt-privee-volumes__mention {
	max-inline-size: 46rem;
	margin-block-start: var(--space-24);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

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

@media (max-width: 900px) {
	.fmt-privee-volumes .fmt-privee-volumes__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
		margin-block-start: var(--space-32);
	}

	.fmt-privee-volumes .fmt-privee-volumes__carte {
		padding: var(--space-24);
	}
}

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