/* ═══════════════════════════════════════════════════════════════════════════
   04 — CHOISIR LE FORMAT

   Bande ivoire (`.fmt-section`), deux colonnes : le discours à gauche, la
   fiche du palier à droite, alignées en haut. Le sélecteur est un `tablist`
   ARIA, la fiche son panneau.

   Les paliers suivent le `FormatSelector` du kit, sous la règle du client :
   des aplats teintés sans contour, le palier choisi en pétrole plein. La fiche
   est un bloc teinté, rayon 12, sans trait ni ombre.

   Couleurs, rayons, durées et courbes viennent des jetons ; les longueurs de
   mise en page (largeur de colonne, hauteur de contrôle) restent en pixels.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-formats {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: var(--space-64);
	align-items: start;
}

/* La disposition en flux de WordPress pose une marge entre les enfants du
   groupe : ici c'est `gap` qui espace, on annule. */
.fmt-formats > *,
.fmt-formats .fmt-formats__intro > *,
.fmt-formats .fmt-formats__fiche > * {
	margin-block: 0;
}

/* ─────────────────────────────────────────────────────────── Colonne gauche */

.fmt-formats .fmt-formats__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

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

.fmt-formats .fmt-formats__texte {
	max-inline-size: 33rem;
}

/* Le sélecteur ne sert à rien sans script : il n'existe que sous `.fmt-js`.
   Sans lui, les cinq fiches sont empilées et se lisent toutes. */
.fmt-formats .fmt-formats__paliers {
	display: none;
	gap: var(--space-8);
	flex-wrap: wrap;
	margin-block-start: var(--space-16);
}

.fmt-js .fmt-formats .fmt-formats__paliers {
	display: flex;
}

/*
 * Un palier reprend `.fmt-btn` — hauteur 46 px, rayon 4, appui à l'échelle du
 * système — et ne redéfinit que la robe, comme le `FormatSelector` du kit :
 * aplat de la teinte du contenant au repos, pétrole plein une fois choisi.
 *
 * BORDURES : aucune n'est visible. Le filet d'un pixel de `.fmt-btn` reste
 * déclaré pour que les deux états aient exactement la même taille — transparent
 * au repos, de la couleur même de l'aplat une fois choisi. C'est le procédé de
 * style.css pour tous ses boutons.
 */
.fmt-formats .fmt-formats__palier {
	min-inline-size: 72px;
	padding-inline: 18px;
	background: var(--surface-contenant);
	border-color: transparent;
	color: var(--petrole);
}

.fmt-formats .fmt-formats__palier:hover {
	background: var(--surface-contenant-survol);
	border-color: transparent;
	color: var(--petrole);
}

.fmt-formats .fmt-formats__palier[aria-selected="true"] {
	background: var(--petrole);
	border-color: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-formats .fmt-formats__palier[aria-selected="true"]:hover {
	background: var(--petrole-survol);
	border-color: var(--petrole-survol);
	color: var(--text-on-inverse);
}

/* ──────────────────────────────────────────────────────────── Colonne droite */

.fmt-formats .fmt-formats__fiches {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

/* `.fmt-card` pose la teinte ; on passe au rayon d'un bloc. */
.fmt-formats .fmt-formats__fiche {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-32);
	border-radius: var(--radius-12);
}

/* C'est `formats.js` qui pose `hidden` ; sans script, personne ne l'a posé et
   la règle ci-dessous n'a rien à masquer. Elle est nécessaire parce que le
   `display: flex` ci-dessus l'emporterait sur le `[hidden]` de la feuille du
   navigateur. */
.fmt-js .fmt-formats .fmt-formats__fiche[hidden] {
	display: none;
}

.fmt-formats .fmt-formats__fiche p,
.fmt-formats .fmt-formats__fiche dl,
.fmt-formats .fmt-formats__fiche dd {
	margin: 0;
}

/* Rappel du palier, utile tant que les cinq fiches sont empilées ; le sélecteur
   le rend redondant dès qu'il apparaît. */
.fmt-formats .fmt-formats__repli {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--petrole);
}

.fmt-js .fmt-formats .fmt-formats__repli {
	display: none;
}

.fmt-formats .fmt-formats__entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-24);
}

.fmt-formats .fmt-formats__prix {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.fmt-formats .fmt-formats__libelle {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Le grand prix unitaire en Fraunces, comme le poids des vignettes du kit :
   au-delà de 28 px, un chiffre se compose en titre. Les chiffres restent
   tabulaires. */
.fmt-formats .fmt-formats__unitaire {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1;
	letter-spacing: var(--track-section);
	color: var(--text-heading);
}

/* Le grand prix est celui d'une famille : elle est nommée sous le chiffre,
   sinon les trois autres grilles le démentent. */
.fmt-formats .fmt-formats__famille {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
	color: var(--text-muted);
}

.fmt-formats .fmt-formats__kilo {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	color: var(--text-muted);
	white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────── La jauge */

/* Piste : voile pétrole à 12 % ; remplissage : pétrole plein. */
.fmt-formats .fmt-formats__jauge {
	block-size: 6px;
	border-radius: var(--radius-pill);
	background: var(--petrole-12);
	overflow: hidden;
}

.fmt-formats .fmt-formats__jauge-remplissage {
	display: block;
	block-size: 100%;
	border-radius: var(--radius-pill);
	background: var(--petrole);
	transform-origin: left center;
}

/* Chaque palier a sa propre fiche — repli sans script oblige : la barre ne peut
   donc pas glisser d'un palier à l'autre. Elle se remplit à l'affichage, une
   fois, ce qui rend le même mouvement. Passer de `display: none` à visible
   rejoue l'animation, c'est ce qui la déclenche à chaque changement d'onglet.

   `backwards` et non `both` : l'état d'arrivée est déjà l'état naturel de la
   barre, si bien qu'une animation qui ne se jouerait pas ne laisserait jamais
   une barre vide. */
.fmt-js .fmt-formats .fmt-formats__fiche:not([hidden]) .fmt-formats__jauge-remplissage {
	animation: fmt-formats-jauge var(--dur-ui) var(--ease-soft) backwards;
}

@keyframes fmt-formats-jauge {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* La part de jauge est une donnée de la fiche, pas un style en ligne. */
.fmt-formats__fiche[data-remplissage="20"] .fmt-formats__jauge-remplissage {
	width: 20%;
}

.fmt-formats__fiche[data-remplissage="38"] .fmt-formats__jauge-remplissage {
	width: 38%;
}

.fmt-formats__fiche[data-remplissage="58"] .fmt-formats__jauge-remplissage {
	width: 58%;
}

.fmt-formats__fiche[data-remplissage="78"] .fmt-formats__jauge-remplissage {
	width: 78%;
}

.fmt-formats__fiche[data-remplissage="100"] .fmt-formats__jauge-remplissage {
	width: 100%;
}

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

/* Trois lignes espacées, sans filet entre elles : l'espace suffit. */
.fmt-formats .fmt-formats__lignes {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.fmt-formats .fmt-formats__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-16);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-ui);
}

.fmt-formats .fmt-formats__ligne dt {
	color: var(--text-muted);
}

.fmt-formats .fmt-formats__ligne dd {
	font-weight: 600;
	text-align: end;
	color: var(--text-heading);
	font-variant-numeric: tabular-nums;
}

/* Prix au kilo d'une famille : la valeur de comparaison, en retrait derrière
   le prix du palier. */
.fmt-formats .fmt-formats__kilo-ligne {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	color: var(--text-muted);
}

/* Le vert de signal est réservé aux messages de WooCommerce : le franco de
   port garde la couleur des autres valeurs. */
.fmt-formats .fmt-formats__ligne--succes dd {
	color: var(--text-heading);
}

/* ═══════════════════════════════════════════════════════════════ Adaptation */

@media (max-width: 1080px) {
	.fmt-formats {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
	}

	.fmt-formats .fmt-formats__texte {
		max-inline-size: none;
	}
}

@media (max-width: 782px) {
	/* Les cinq paliers tiennent sur une ligne : ils se partagent la largeur. */
	.fmt-formats .fmt-formats__paliers {
		gap: var(--space-4);
		flex-wrap: nowrap;
	}

	.fmt-formats .fmt-formats__palier {
		flex: 1;
		min-inline-size: 0;
		padding-inline: 0;
		font-size: var(--wp--preset--font-size--caption);
	}

	.fmt-formats .fmt-formats__fiche {
		gap: var(--space-16);
		padding: var(--space-24);
	}

	.fmt-formats .fmt-formats__entete {
		gap: var(--space-16);
	}

	.fmt-formats .fmt-formats__ligne {
		font-size: var(--wp--preset--font-size--small);
	}
}