/* ═══════════════════════════════════════════════════════════════════════════
   32 — MARQUE PRIVÉE : 02 LA PYRAMIDE

   Une bande lin en deux colonnes : le discours et la carte « Votre accord » à
   gauche, les trois étages de notes à droite. `.fmt-section`,
   `.fmt-section--lin`, `.fmt-display`, `.fmt-eyebrow`, `.fmt-technique` et
   `.fmt-lede` viennent de style.css et ne sont pas réécrits.

   L'ancien panneau creusé, qui occupait toute la section, est devenu la bande
   elle-même. Sur le lin, `--surface-contenant` vaut la surface relevée : c'est
   la teinte des puces de note non choisies. La carte de l'accord prend
   l'ivoire clair, un cran plus lumineux encore — elle est le résultat, la
   seule surface que l'œil doive trouver d'emblée. Aucun contour nulle part.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* La barre de navigation est collante : le bouton « Composer mon parfum » de
   l'accroche pointe ici, l'ancre doit s'arrêter sous la barre. */
.fmt-privee-pyramide {
	scroll-margin-block-start: calc(var(--fmt-nav-h) + var(--space-24));
}

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

   Trois éléments pour deux colonnes : l'introduction et la carte de l'accord
   s'empilent à gauche, les étages tiennent toute la hauteur à droite.

   L'enveloppe qui porte le contrat du script (`data-fmt-pyramide`) est en
   `display: contents` : ses deux enfants deviennent des éléments de grille à
   part entière, ce qui permet à la carte de l'accord de rejoindre la colonne
   de gauche sans quitter le bloc `wp:html` où le script la trouve. C'est un
   simple `div` sans rôle : le retirer de la boîte ne retire rien de l'arbre
   d'accessibilité.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-pyramide .fmt-privee-pyramide__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-64);
	row-gap: var(--space-32);
	align-items: start;
}

.fmt-privee-pyramide .fmt-privee-pyramide__atelier {
	display: contents;
}

.fmt-privee-pyramide .fmt-privee-pyramide__intro {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Sur-titre du kit dans un en-tête de section : 11 px, texte discret. */
.fmt-privee-pyramide .fmt-privee-pyramide__intro .fmt-eyebrow {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-muted);
}

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

.fmt-privee-pyramide .fmt-privee-pyramide__texte {
	max-inline-size: 28rem;
	margin-block-start: var(--space-8);
}

/* ═════════════════════════════════════════════════ LA CARTE « VOTRE ACCORD »

   L'encre disparaît : le pétrole plein est réservé à l'appel final. La carte
   se détache du lin par l'ivoire clair, sans contour ni ombre ; rayon 8 px,
   celui des cartouches du kit — c'est une étiquette de laboratoire en
   miniature : l'intitulé, l'accord en Fraunces, la référence en Courier
   Prime.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-privee-pyramide .fmt-privee-pyramide__accord {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-32);
	border-radius: var(--radius-8);
	background: var(--ivoire-clair);
}

.fmt-privee-pyramide .fmt-privee-pyramide__accord > * {
	margin-block: 0;
}

.fmt-privee-pyramide .fmt-privee-pyramide__accord-titre {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-muted);
}

.fmt-privee-pyramide .fmt-privee-pyramide__accord-valeur {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
	color: var(--petrole);
}

/* La référence, comme une ligne de `SpecList` : Courier Prime, capitales,
   approche technique, en encre. */
.fmt-privee-pyramide .fmt-privee-pyramide__accord-reference {
	margin-block-start: var(--space-4);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--encre);
}

/* ═══════════════════════════════════════════════════════════════ LES ÉTAGES */

.fmt-privee-pyramide .fmt-privee-pyramide__etages {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

/* Un `fieldset` arrive avec une bordure, des marges et un remplissage propres
   au navigateur. On retire la bordure (`border: 0` n'est pas un trait, c'est
   l'absence de trait) : il n'est ici que le groupement sémantique des quatre
   puces d'un étage. `min-inline-size: 0` lève la largeur minimale automatique
   que le fieldset impose et qui empêcherait les puces de passer à la ligne. */
.fmt-privee-pyramide .fmt-privee-pyramide__etage {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/* L'intitulé d'étage, comme la clé d'un `SpecList` : Courier Prime gras,
   capitales, approche technique. Texte discret : 4,81:1 sur lin. */
.fmt-privee-pyramide .fmt-privee-pyramide__legende {
	display: block;
	padding: 0;
	margin-block-end: var(--space-12);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: var(--lh-caption);
	color: var(--text-muted);
}

.fmt-privee-pyramide .fmt-privee-pyramide__puces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

/* Le bouton radio couvre exactement sa puce : c'est lui qui reçoit le clic, le
   focus et la navigation aux flèches, la puce ne fait que se montrer. */
.fmt-privee-pyramide .fmt-privee-pyramide__choix {
	position: relative;
	display: inline-flex;
}

.fmt-privee-pyramide .fmt-privee-pyramide__radio {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/*
 * La puce, au dessin du `FormatSelector` du kit : 46 px, rayon 4 px, Manrope
 * 14 / 600. Sans contour (décision du client) : non choisie, elle prend la
 * teinte du contenant de la bande — la surface relevée sur le lin — et c'est
 * son libellé pétrole (plus de 10:1) qui l'identifie comme un choix ; choisie,
 * elle passe en pétrole plein, texte ivoire. La graisse ne change pas : ces
 * puces se replient sur plusieurs lignes, et un mot qui s'élargirait en étant
 * choisi ferait sauter tous ses voisins.
 */
.fmt-privee-pyramide .fmt-privee-pyramide__puce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 72px;
	block-size: 46px;
	padding-inline: 18px;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-privee-pyramide .fmt-privee-pyramide__radio:hover + .fmt-privee-pyramide__puce {
	background: var(--surface-contenant-survol);
}

.fmt-privee-pyramide .fmt-privee-pyramide__radio:checked + .fmt-privee-pyramide__puce {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-privee-pyramide .fmt-privee-pyramide__radio:checked:hover + .fmt-privee-pyramide__puce {
	background: var(--petrole-survol);
}

/* Pression : le geste unique du système, sans changement de couleur. */
.fmt-privee-pyramide .fmt-privee-pyramide__radio:active + .fmt-privee-pyramide__puce {
	transform: scale(var(--scale-press));
}

/* Le bouton radio est transparent : son anneau de focus natif ne se verrait
   pas. C'est la puce qui porte le halo cuivre du système. */
.fmt-privee-pyramide .fmt-privee-pyramide__radio:focus-visible + .fmt-privee-pyramide__puce {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.fmt-privee-pyramide .fmt-privee-pyramide__note {
	margin: var(--space-8) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

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

@media (max-width: 900px) {
	.fmt-privee-pyramide .fmt-privee-pyramide__grille {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-32);
	}

	/* Une seule colonne : chaque élément reprend sa place dans le flux. La
	   carte de l'accord reste sous l'introduction, les étages passent en
	   dessous. */
	.fmt-privee-pyramide .fmt-privee-pyramide__intro,
	.fmt-privee-pyramide .fmt-privee-pyramide__accord,
	.fmt-privee-pyramide .fmt-privee-pyramide__etages {
		grid-column: auto;
		grid-row: auto;
	}

	.fmt-privee-pyramide .fmt-privee-pyramide__texte {
		max-inline-size: none;
	}

	.fmt-privee-pyramide .fmt-privee-pyramide__accord {
		padding: var(--space-24);
	}
}