/* ═══════════════════════════════════════════════════════════════════════════
   03 — CHOISIR LA SENTEUR

   Bande lin (`.fmt-section--lin`), en deux colonnes au bureau : à gauche
   l'ouverture et les six tuiles sélectionnables, à droite la fiche de la
   senteur active. Au téléphone, les tuiles passent en rail à défilement et la
   fiche vient dessous.

   Sur cette bande, `--surface-contenant` vaut la surface relevée : tuiles et
   fiche s'en détachent par la teinte, sans trait ni ombre (règle du client).
   La tuile choisie se marque par un aplat pétrole plein, jamais par un
   contour.

   L'ordre du DOM est celui du téléphone — ouverture, tuiles, fiche, mention.
   Le bureau replace la mention en bas de colonne gauche et la fiche en pleine
   hauteur à droite avec des zones de grille nommées : personne ne lit deux
   fois le même contenu, et le clavier suit l'ordre visuel dans les deux cas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* WordPress espace les enfants d'un groupe en flux (`is-layout-flow`). Nos
   conteneurs gèrent leurs écarts en flex ou en grille : on annule la marge de
   flux. Règles en premier, pour que les marges explicites l'emportent. */
.fmt-senteurs > *,
.fmt-senteurs .wp-block-group > * {
	margin-block: 0;
}

/* ─── Enveloppe ──────────────────────────────────────────────────────────── */

/* Elle porte `.fmt-reveal` à la place de la bande, et la grille du bureau. */
.fmt-senteurs .fmt-senteurs__contenu {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__contenu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"intro fiches"
			"onglets fiches"
			"mention fiches";
		column-gap: var(--space-64);
		row-gap: var(--space-32);
	}

	.fmt-senteurs .fmt-senteurs__intro {
		grid-area: intro;
	}

	.fmt-senteurs .fmt-senteurs__onglets {
		grid-area: onglets;
	}

	.fmt-senteurs .fmt-senteurs__fiches {
		grid-area: fiches;
	}

	.fmt-senteurs .fmt-senteurs__mention {
		grid-area: mention;
		align-self: end;
	}
}

/* ─── Ouverture ──────────────────────────────────────────────────────────── */

.fmt-senteurs .fmt-senteurs__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-senteurs .fmt-senteurs__titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

.fmt-senteurs .fmt-senteurs__chapo {
	max-inline-size: 29rem;
}

.fmt-senteurs .fmt-senteurs__mention {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-caption);
	color: var(--text-muted);
}

/* ─── Tuiles de senteur (tablist) ────────────────────────────────────────── */

.fmt-senteurs .fmt-senteurs__onglets {
	display: flex;
	gap: var(--space-8);
	/* Le rail déborde du rembourrage de la bande — qui vaut la gouttière au
	   téléphone — : les tuiles filent jusqu'au bord de l'écran. Les 4 px haut
	   et bas laissent passer l'anneau de focus. */
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--space-4) var(--gutter);
	scroll-padding-inline-start: var(--gutter);
}

/* Tuile : teinte du contenant, rayon 4, sans contour. */
.fmt-senteurs .fmt-senteurs__tuile {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);
	inline-size: 144px;
	padding: var(--space-12);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	scroll-snap-align: start;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-senteurs .fmt-senteurs__tuile:hover {
	background: var(--surface-contenant-survol);
}

/* Pression : la signature du système — échelle seule, sans rebond. */
.fmt-senteurs .fmt-senteurs__tuile:active {
	transform: scale(var(--scale-press));
}

/* Tuile choisie : aplat pétrole plein, texte ivoire. */
.fmt-senteurs .fmt-senteurs__tuile[aria-selected="true"] {
	background: var(--petrole);
}

.fmt-senteurs .fmt-senteurs__tuile[aria-selected="true"]:hover {
	background: var(--petrole-survol);
}

/* Visuels dédiés, centrés sur les ingrédients pour rester lisibles en petit. */
.fmt-senteurs .fmt-senteurs__pastille {
	flex: none;
	display: block;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--radius-pill);
	background-color: var(--surface-secondary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.fmt-senteurs .fmt-senteurs__etiquette {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.fmt-senteurs .fmt-senteurs__nom {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: var(--lh-ui);
	color: var(--text-heading);
}

.fmt-senteurs .fmt-senteurs__famille {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--text-muted);
}

.fmt-senteurs .fmt-senteurs__tuile[aria-selected="true"] .fmt-senteurs__nom {
	color: var(--text-on-inverse);
}

.fmt-senteurs .fmt-senteurs__tuile[aria-selected="true"] .fmt-senteurs__famille {
	color: var(--text-on-inverse-muted);
}

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__onglets {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-12);
		margin-inline: 0;
		padding: 0;
		/* Neutralise `.fmt-rail` : rien ne déborde. */
		overflow: visible;
		scroll-snap-type: none;
	}

	.fmt-senteurs .fmt-senteurs__tuile {
		flex-direction: row;
		align-items: center;
		gap: var(--space-16);
		inline-size: auto;
		padding: var(--space-12) var(--space-16) var(--space-12) var(--space-12);
	}
}

/* ─── Fiches de détail (tabpanels) ───────────────────────────────────────── */

.fmt-senteurs .fmt-senteurs__fiches {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* REPLI SANS JAVASCRIPT. `hidden` est écrit dans le HTML pour que la fiche
   active soit juste dès le premier rendu, sans clignotement. Tant que le
   script n'a pas posé `.fmt-js` sur `<html>`, on neutralise l'attribut : les
   six fiches restent empilées et tout le contenu reste lisible.
   Le second sélecteur rend le composant indépendant de l'ordre de chargement
   des scripts : `senteurs.js` marque lui-même sa racine. */
.fmt-senteurs .fmt-senteurs__detail[hidden] {
	display: flex;
}

.fmt-js .fmt-senteurs .fmt-senteurs__detail[hidden],
.fmt-senteurs.is-interactif .fmt-senteurs__detail[hidden] {
	display: none;
}

/* Fiche : un bloc teinté, rayon 12, sans trait ni ombre. */
.fmt-senteurs .fmt-senteurs__detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-24);
	border-radius: var(--radius-12);
	background: var(--surface-contenant);
}

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__detail {
		padding: var(--space-32);
	}
}

/* La fiche se pose quand on change de senteur, une fois, sortie douce. Sans
   JavaScript les six fiches sont statiques : l'animation ne s'applique pas. */
.fmt-js .fmt-senteurs .fmt-senteurs__detail:not([hidden]),
.fmt-senteurs.is-interactif .fmt-senteurs__detail:not([hidden]) {
	animation: fmt-senteurs-pose var(--dur-ui) var(--ease-soft) both;
}

@keyframes fmt-senteurs-pose {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fmt-senteurs .fmt-senteurs__detail p {
	margin: 0;
}

/* Quand la fiche est étroite, la puce de famille passe sous le nom plutôt que
   d'écraser la référence, que Courier Prime rend large. */
.fmt-senteurs .fmt-senteurs__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-12) var(--space-16);
}

.fmt-senteurs .fmt-senteurs__identite {
	flex: 1 1 15rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-inline-size: 0;
}

/* Nom de la senteur en Fraunces, comme le nom d'une fiche produit du kit. */
.fmt-senteurs .fmt-senteurs__titre-fiche {
	margin: 0;
	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);
	color: var(--text-heading);
}

/* Référence : une mention technique, en Courier Prime comme la `SpecList`
   du kit. Le stock qui l'accompagnait a été retiré le 20 septembre 2026. */
.fmt-senteurs .fmt-senteurs__reference {
	font-family: var(--font-technique);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--track-technique);
	color: var(--text-muted);
}

.fmt-senteurs .fmt-senteurs__famille-puce {
	flex: none;
}

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__titre-fiche {
		font-size: var(--wp--preset--font-size--h-3);
	}
}

/* ─── Pyramide olfactive ─────────────────────────────────────────────────── */

/* Trois paliers espacés, sans filet entre eux : l'espace suffit. */
.fmt-senteurs .fmt-senteurs__pyramide {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.fmt-senteurs .fmt-senteurs__note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
}

.fmt-senteurs .fmt-senteurs__rang {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	inline-size: 64px;
	padding-block-start: var(--space-4);
}

.fmt-senteurs .fmt-senteurs__numero {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-muted);
}

/*
 * Trois jauges : la part croissante de chaque palier dans le sillage.
 * Purement illustratives, d'où l'absence de rôle ARIA. La piste est un voile
 * pétrole à 12 %, le remplissage un pseudo-élément pétrole plein : aucun
 * nœud de plus dans le document.
 */
.fmt-senteurs .fmt-senteurs__jauge {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 4px;
	border-radius: var(--radius-pill);
	background: var(--petrole-12);
	overflow: hidden;
}

.fmt-senteurs .fmt-senteurs__jauge::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	border-radius: inherit;
	background: var(--petrole);
}

.fmt-senteurs .fmt-senteurs__jauge--1::before {
	inline-size: 46%;
}

.fmt-senteurs .fmt-senteurs__jauge--2::before {
	inline-size: 74%;
}

.fmt-senteurs .fmt-senteurs__jauge--3::before {
	inline-size: 100%;
}

.fmt-senteurs .fmt-senteurs__note-corps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.fmt-senteurs .fmt-senteurs__palier {
	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);
}

.fmt-senteurs .fmt-senteurs__valeur {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-lead);
	color: var(--text-body);
}

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__rang {
		inline-size: 72px;
	}

	.fmt-senteurs .fmt-senteurs__valeur {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ─── Description et attributs ───────────────────────────────────────────── */

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

@media (min-width: 1000px) {
	.fmt-senteurs .fmt-senteurs__description {
		font-size: var(--wp--preset--font-size--medium);
	}
}

.fmt-senteurs .fmt-senteurs__attributs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Contenant dans un contenant : dans la fiche en surface relevée, les puces
   prennent la teinte de l'autre famille, le lin — sinon elles s'y
   fondraient. */
.fmt-senteurs .fmt-senteurs__attributs .fmt-chip {
	background: var(--lin);
}