/**
 * Fiche produit.
 *
 * Deux colonnes au bureau — le média à gauche, les choix à droite — puis un
 * bloc de détail en onglets, rail à gauche et panneau à droite.
 *
 * Règle du client, ici comme partout : aucun contenant cerné d'un trait. Les
 * tuiles de contenance, les senteurs, les onglets, les panneaux se détachent
 * par leur teinte ; un état choisi passe en pétrole plein.
 *
 * TROIS POINTS QUI NE SONT PAS ÉVIDENTS À LA LECTURE
 *
 * 1. Le média est en `position: sticky` : la colonne de droite est plus haute
 *    que la photo dès qu'on déroule les vingt senteurs, et perdre le produit
 *    des yeux pendant qu'on choisit son conditionnement n'aide personne.
 *
 * 2. Chaque variation peut afficher une photographie complète : flacon,
 *    senteur et décor partagent la lumière et les ombres de la même image.
 *
 * 3. Les senteurs sont des LIENS, les contenances des BOUTONS d'envoi : sans
 *    JavaScript, les unes naviguent et les autres soumettent le formulaire. La
 *    feuille les habille de la même façon pour que la différence de nature ne
 *    se voie pas.
 *
 * @package fmt-fragrances
 */

.fmt-produit {
	padding-inline: var(--bande-x);
	padding-block: var(--space-32) var(--bande-y);
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */

.fmt-produit__fil {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
}

.fmt-produit__fil a {
	color: inherit;
	text-decoration: none;
}

.fmt-produit__fil a:hover {
	color: var(--petrole);
}

.fmt-produit__fil [aria-current] {
	color: var(--text-muted);
}

/* ── Haut de fiche ───────────────────────────────────────────────────────── */

.fmt-produit__haut {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	margin-block-start: var(--space-24);
	align-items: start;
}

.fmt-produit__haut > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.fmt-produit__haut {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Média ───────────────────────────────────────────────────────────────── */

.fmt-produit__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var(--radius-16);
	overflow: hidden;
	background: var(--surface-contenant);
}

@media (min-width: 900px) {
	.fmt-produit__galerie,
	.fmt-produit--simple .fmt-produit__media {
		position: sticky;
		top: calc(var(--fmt-nav-h) + var(--space-16));
	}
}

/* Deux mentions posées sur le média : des `Badge` clairs, sans contour. */
.fmt-produit__badge {
	position: absolute;
	top: var(--space-24);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--radius-4);
	background: var(--surface-raised);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1;
}

.fmt-produit__badge--gauche {
	inset-inline-start: var(--space-24);
}

.fmt-produit__badge--droite {
	inset-inline-end: var(--space-24);
}

.fmt-produit__photo {
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	transition: opacity var(--dur-ui) var(--ease-soft);
}

.fmt-produit__photo--change { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.fmt-produit__photo { transition: none; }
}

.fmt-produit__agrandir {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	cursor: zoom-in;
}

.fmt-produit__agrandir[hidden],
.fmt-produit__visuel-absent[hidden] { display: none; }

.fmt-produit__agrandir .fmt-produit__photo {
	block-size: 100%;
}

.fmt-produit__visuel-absent {
	max-inline-size: 24ch;
	padding: var(--space-24);
	border-radius: var(--radius-12);
	background: var(--surface-raised);
	text-align: center;
}

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

.fmt-produit__atelier figure { margin: 0; }
.fmt-produit__atelier img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-16);
}

@media (max-width: 599px) {
	.fmt-produit__atelier { grid-template-columns: 1fr; }
}

.fmt-produit__photo--absente {
	inline-size: 74%;
	aspect-ratio: 1;
	border-radius: var(--radius-16);
	background: var(--surface-contenant-survol);
}

/* ── Colonne des choix ───────────────────────────────────────────────────── */

.fmt-produit__emballage {
	margin: 0;
	padding: var(--space-16);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--encre);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.fmt-produit__precommande {
	margin: 0;
	padding: var(--space-12) var(--space-16);
	border-inline-start: 3px solid var(--petrole);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--encre);
	font-weight: 600;
}

.fmt-produit__precommande[hidden] {
	display: none;
}

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

.fmt-produit__infos > * {
	margin-block: 0;
}

.fmt-produit__famille {
	color: var(--petrole);
}

.fmt-produit__titre {
	font-size: max(40px, var(--wp--preset--font-size--display-l));
	line-height: var(--lh-display);
}

.fmt-produit__texture {
	max-inline-size: 52ch;
	color: var(--text-muted);
}

.fmt-produit__texture > :first-child {
	margin-block-start: 0;
}

.fmt-produit__texture > :last-child {
	margin-block-end: 0;
}

.fmt-produit__prix {
	display: flex;
	align-items: flex-end;
	gap: 14px;
}

/* Grand chiffre : Fraunces, comme le poids des vignettes du kit. */
.fmt-produit__prix-montant {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-2);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--text-heading);
}

.fmt-produit__prix-kilo {
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	padding-block-end: 4px;
}

/* ── Formulaire ──────────────────────────────────────────────────────────── */

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

.fmt-produit__choix {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

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

/* Contenances : le `FormatSelector` du kit — tuiles teintées rayon 4, la
   tuile choisie en pétrole plein. */
.fmt-produit__contenances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: var(--space-8);
}

.fmt-produit__contenance {
	display: flex;
	text-decoration: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-block-size: 66px;
	padding: 8px;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-family: inherit;
	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-produit__contenance:hover {
	background: var(--surface-contenant-survol);
}

.fmt-produit__contenance:active {
	transform: scale(var(--scale-press));
}

.fmt-produit__contenance.is-choisi {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-produit__contenance-nom {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.fmt-produit__contenance-prix {
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--micro);
	font-variant-numeric: tabular-nums;
	opacity: .72;
}

/* ── Senteurs ────────────────────────────────────────────────────────────── */

.fmt-produit__senteurs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
	position: relative;
}

.fmt-produit__senteur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

.fmt-produit__senteur:hover {
	background: var(--surface-contenant-survol);
	color: var(--petrole);
}

.fmt-produit__senteur.is-choisi {
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-weight: 600;
}

.fmt-produit__senteur--menu {
	background-color: var(--petrole);
	background-image: linear-gradient(
		100deg,
		transparent 35%,
		rgb(172 117 87 / 0.45) 48%,
		rgb(245 241 232 / 0.25) 52%,
		rgb(172 117 87 / 0.45) 56%,
		transparent 68%
	);
	background-position: 100% 0;
	background-size: 300% 100%;
	color: var(--text-on-inverse);
	font-weight: 600;
	animation: fmt-autres-senteurs-vague 3s linear infinite;
}

.fmt-produit__senteur--menu:hover,
.fmt-produit__senteur--menu:focus-visible,
.fmt-produit__autres[open] .fmt-produit__senteur--menu {
	background-color: var(--petrole-survol);
	color: var(--text-on-inverse);
}

@keyframes fmt-autres-senteurs-vague {
	to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fmt-produit__senteur--menu { animation: none; }
}

.fmt-produit__senteur--menu::-webkit-details-marker {
	display: none;
}

.fmt-produit__autres {
	position: relative;
}

.fmt-produit__autres[open] .fmt-produit__chevron {
	transform: rotate(180deg);
}

.fmt-produit__chevron {
	display: inline-flex;
	transition: transform var(--dur-ui) var(--ease-soft);
}

/* « Autres senteurs » : une liste flottante. C'est l'ombre `detachee` du kit,
   et non un trait, qui la détache de la page. */
.fmt-produit__liste {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 8px);
	z-index: 10;
	inline-size: 290px;
	max-block-size: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--surface-raised);
	border: 0;
	border-radius: var(--radius-12);
	box-shadow: var(--shadow-lift);
}

.fmt-produit__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius-4);
	color: var(--text-body);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.fmt-produit__option:hover {
	background: var(--surface-contenant);
	color: var(--text-body);
}

.fmt-produit__option.is-choisi {
	background: var(--surface-contenant);
	color: var(--petrole);
	font-weight: 600;
}

.fmt-produit__coche {
	color: var(--petrole);
	opacity: 0;
}

.fmt-produit__option.is-choisi .fmt-produit__coche {
	opacity: 1;
}

/* ── Commande ────────────────────────────────────────────────────────────── */

.fmt-produit__commande {
	display: flex;
	gap: var(--space-12);
}

/* Quantité : un bloc teinté à 4 px ; les boutons − / + restent des carrés,
   le chiffre au milieu en chiffres tabulaires. */
.fmt-produit__quantite {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	block-size: var(--control-h-lg);
	padding-inline: 4px;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
}

.fmt-produit__pas {
	inline-size: 40px;
	block-size: 40px;
	border: 0;
	border-radius: var(--radius-4);
	background: transparent;
	color: var(--petrole);
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease-soft);
}

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

/* Deux classes : la règle `input[type="number"]` de 10-boutique.css, plus
   spécifique qu'une classe seule, poserait sinon le contour d'un champ au
   milieu du bloc teinté. */
.fmt-produit .fmt-produit__nombre {
	inline-size: 46px;
	block-size: auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text-body);
	-moz-appearance: textfield;
	appearance: textfield;
}

.fmt-produit__nombre::-webkit-outer-spin-button,
.fmt-produit__nombre::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Commander : le bouton principal du kit, à la hauteur de la quantité. */
.fmt-produit__commander {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	block-size: var(--control-h-lg);
	border: 0;
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-produit__commander:hover:not([disabled]) {
	background: var(--petrole-survol);
}

.fmt-produit__commander:active:not([disabled]) {
	background: var(--petrole-appui);
	transform: scale(var(--scale-press));
}

.fmt-produit__commander[disabled] {
	background: var(--surface-contenant);
	color: var(--text-muted);
	cursor: not-allowed;
}

.fmt-produit__total {
	font-family: var(--font-sans);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: .86;
}

.fmt-produit .stock {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--petrole);
}

.fmt-produit__indisponible {
	margin-block: 0;
	padding: var(--space-16);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--text-muted);
}

/* Échantillon : le bouton second, un aplat beige. */
.fmt-produit__echantillon {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: var(--control-h-md);
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--dur-quick) var(--ease-soft);
}

.fmt-produit__echantillon:hover {
	background: var(--surface-contenant-survol);
	color: var(--petrole);
}

/* ── Repères ─────────────────────────────────────────────────────────────── */

/* Repères techniques : le `SpecList` du kit, en bloc teinté. Les lignes se
   séparent par l'espace ; les valeurs en Courier Prime, écriture d'étiquette
   de laboratoire. */
.fmt-produit__reperes {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--space-8) var(--space-24);
	border-radius: var(--radius-12);
	background: var(--surface-contenant);
}

.fmt-produit__reperes > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-block: 10px;
}

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

.fmt-produit__reperes dd {
	margin: 0;
	font-family: var(--font-technique);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--track-technique);
	color: var(--text-body);
	text-align: end;
}

/* ── Détail en onglets ───────────────────────────────────────────────────── */

.fmt-produit__detail {
	margin-block-start: var(--bande-y);
}

/* ── Contenants personnels ──────────────────────────────────────────────── */

.fmt-produit__contenants {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-block-start: var(--bande-y);
	padding: clamp(18px, 3vw, 34px);
	border-radius: var(--radius-16);
	background: var(--surface-secondary);
}

@media (min-width: 900px) {
	.fmt-produit__contenants {
		grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
	}
}

.fmt-produit__contenants-media {
	overflow: hidden;
	border-radius: var(--radius-12);
	background: var(--surface-contenant);
}

.fmt-produit__contenants-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fmt-produit__contenants-texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.fmt-produit__contenants-texte > * {
	margin-block: 0;
}

.fmt-produit__contenants-texte h2 {
	font-size: clamp(34px, 4vw, var(--wp--preset--font-size--h-2));
	line-height: var(--lh-display);
}

.fmt-produit__contenants-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-produit__contenants-liste li {
	padding: 13px 15px;
	border-radius: var(--radius-4);
	background: var(--surface-raised);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

.fmt-produit__contenants-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 22px;
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-weight: 600;
	text-decoration: none;
}

.fmt-produit__contenants-action:hover {
	background: var(--petrole-clair, var(--petrole));
	color: var(--text-on-inverse);
}

@media (max-width: 520px) {
	.fmt-produit__contenants-liste {
		grid-template-columns: 1fr;
	}
}

.fmt-produit__grille {
	display: grid;
	gap: var(--space-16);
	margin-block-start: var(--space-16);
	align-items: start;
}

@media (min-width: 900px) {
	.fmt-produit__grille {
		grid-template-columns: 290px 1fr;
	}

	.fmt-produit__rail {
		position: sticky;
		top: calc(var(--fmt-nav-h) + var(--space-16));
	}
}

.fmt-produit__rail {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Onglets : des tuiles teintées, l'onglet ouvert en pétrole plein. */
.fmt-produit__onglet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	color: var(--petrole);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

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

.fmt-produit__onglet.is-choisi {
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-weight: 600;
}

.fmt-produit__fleche {
	display: inline-flex;
	opacity: 0;
	transition: opacity var(--dur-quick) var(--ease-soft);
}

.fmt-produit__onglet.is-choisi .fmt-produit__fleche {
	opacity: .8;
}

/* Le panneau ouvert : un bloc lin, rayon 12, sans trait ni ombre. Ce qu'il
   contient de teinté passe à la surface relevée — un contenant dans un
   contenant prend l'autre famille de teinte. */
.fmt-produit__panneaux {
	--surface-contenant: var(--surface-raised);
	--surface-contenant-survol: var(--ivoire-clair);
	border: 0;
	border-radius: var(--radius-12);
	background: var(--surface-secondary);
	box-shadow: none;
	padding: clamp(28px, 4vw, 52px);
}

.fmt-produit__panneaux--simple {
	margin-block-start: var(--space-16);
}

.fmt-produit__panneau {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	max-inline-size: 66ch;
}

.fmt-produit__panneau > * {
	margin-block: 0;
}

.fmt-produit__panneau h3 {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--lh-subsection);
}

.fmt-produit__panneau h4 {
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
}

.fmt-produit__chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-12);
}

.fmt-produit__chiffre {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 22px;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
}

.fmt-produit__chiffre-valeur {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-size: var(--wp--preset--font-size--h-3);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--text-heading);
}

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

/* La composition INCI est une liste de substances, pas une phrase : elle se lit
   mieux en colonnes qu'en paragraphe, et chaque terme reste sélectionnable.
   Courier Prime, comme sur l'étiquette de laboratoire du kit. */
.fmt-produit__inci {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-produit__inci li {
	padding-block: 8px;
	font-family: var(--font-technique);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--track-technique);
	color: var(--text-body);
}

.fmt-produit__gestes {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: geste;
}

.fmt-produit__gestes li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 18px;
	align-items: start;
	padding: 22px 24px;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	counter-increment: geste;
}

/* Numéro d'étape : un repère rond, en pétrole plein. */
.fmt-produit__gestes li::before {
	content: counter(geste);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--radius-pill);
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.fmt-produit__gestes strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--text-heading);
}

.fmt-produit__gestes span {
	color: var(--text-muted);
}

/* Précautions : une liste à puces rondes, rythmée par l'espace. */
.fmt-produit__precautions {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-produit__precautions li {
	position: relative;
	padding: 8px 0 8px 22px;
	color: var(--text-body);
}

.fmt-produit__precautions li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 18px;
	inline-size: 6px;
	block-size: 6px;
	border-radius: var(--radius-pill);
	background: var(--petrole);
}

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

/* La fiche et la bande de réassurance qui la suit sont toutes deux ivoire :
   leurs deux rembourrages s'additionneraient en un vide de 192 px sans
   changement de fond pour le justifier. Celui de la fiche suffit. */
.fmt-produit + .fmt-reassurance {
	padding-block-start: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * `hidden` doit rester plus fort que la mise en page
 *
 * L'attribut `hidden` ne vaut que `display: none` dans la feuille du
 * navigateur : n'importe quelle règle d'auteur qui pose `display: flex` ou
 * `display: grid` sur le même élément l'emporte, et l'élément masqué reste
 * visible. C'est ce qui affichait les cinq panneaux d'onglet à la fois, et la
 * liste INCI des senteurs qui n'en ont pas.
 *
 * On rétablit donc la priorité explicitement, pour chaque élément que le
 * script masque.
 * ------------------------------------------------------------------------- */

.fmt-produit__panneau[hidden],
.fmt-produit__inci[hidden],
.fmt-produit__photo[hidden],
.fmt-produit [hidden] {
	display: none;
}