/* ═══════════════════════════════════════════════════════════════════════════
   10 — BOUTIQUE, WOOCOMMERCE ET PAGES DE CONTENU

   Tout le site hors pages de présentation : gabarits de contenu, journal,
   recherche, 404, catalogue, panier, tunnel de commande et compte client.

   WooCommerce sert deux balisages différents selon la page : des blocs
   (`wc-block-*`) sur le catalogue et le tunnel moderne, et le balisage classique
   (`.shop_table`, `.woocommerce-*`) sur le panier classique et le compte. Les
   deux sont couverts ici, faute de quoi la même boutique changerait de
   registre d'une page à l'autre.

   Règle du client, ici comme partout : AUCUN contenant n'est cerné d'un
   trait. Cartes, résumés, blocs du compte, messages se détachent de la page
   par leur teinte (`--surface-contenant`). Seuls les champs de formulaire,
   les cases à cocher et les boutons radio gardent un contour : c'est lui qui
   les identifie comme champs (WCAG 1.4.11).

   Rien n'est redéfini de style.css : `.fmt-card`, `.fmt-panel`, `.fmt-chip`,
   `.fmt-btn`, `.fmt-display`, `.fmt-mono`, `.fmt-invert` sont réutilisés tels
   quels et seulement complétés.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   0. JETONS PROPRES À LA BOUTIQUE
   ─────────────────────────────────────────────────────────────────────────── */

:root {
	/* Fonds de message. Le kit ne définit aucune couleur de signal : ces trois
	   teintes accompagnent les `signal-*` de theme.json (exception documentée
	   dans DESIGN-SYSTEM-FRAGRANCES.md). L'information prend le lin. */
	--signal-success-soft: #E4ECE4;
	--signal-warning-soft: #F2E8D8;
	--signal-danger-soft: #F3E3DF;
	--signal-info-soft: var(--lin);

	/* Hauteurs de contrôle : 46 px, celle du `Field` et du `Button` du kit ;
	   52 px pour un champ de première importance — recherche, quantité. */
	--control-h-md: 46px;
	--control-h-lg: 52px;

	/* Un champ est un rectangle à 4 px, comme les boutons. */
	--radius-field: var(--radius-4);

	/* Focus d'un champ : bordure pétrole ET halo à 12 %. Le contour clavier
	   global de style.css reste posé par-dessus — le halo n'est qu'un renfort. */
	--focus-halo: 0 0 0 4px var(--petrole-12);

	/* Chevron des menus déroulants (trait 1,5, bouts ronds). Une URL de données
	   ne peut pas lire une variable CSS : `%23143C40` est le littéral du pétrole,
	   la seule valeur en dur de cette feuille avec les fonds de message. */
	--fmt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143C40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Le tunnel WooCommerce a son propre en-tête compact. */
.woocommerce-checkout header.wp-block-template-part > .wp-block-group > .alignwide {
	min-block-size: 104px;
	padding-block: var(--space-24) !important;
	gap: var(--space-24);
}

.woocommerce-checkout .fmt-checkout__logo {
	margin: 0;
	line-height: 0;
}

.woocommerce-checkout .fmt-checkout__logo a {
	display: inline-flex;
	align-items: center;
	color: var(--petrole);
	text-decoration: none;
}

.woocommerce-checkout .fmt-checkout__logo .fmt-logo {
	--fmt-logo-h: 44px;
}

@media (max-width: 600px) {
	.woocommerce-checkout header.wp-block-template-part > .wp-block-group > .alignwide {
		min-block-size: 84px;
		padding-block: var(--space-16) !important;
		gap: var(--space-12);
	}

	.woocommerce-checkout .fmt-checkout__logo .fmt-logo {
		--fmt-logo-h: 36px;
	}
}

/* Trois repères discrets ferment le tunnel sans ajouter de navigation. */
.woocommerce-checkout .fmt-checkout__footer {
	margin-block-start: var(--space-64);
	padding-block: var(--space-32) var(--space-48);
	border-block-start: 1px solid var(--border-quiet);
}

.woocommerce-checkout .fmt-checkout__reassurance {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-32);
}

.woocommerce-checkout .fmt-checkout__badge {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	margin-block: 0;
}

.woocommerce-checkout .fmt-checkout__badge > * {
	margin-block: 0;
}

.woocommerce-checkout .fmt-checkout__badge svg {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	color: var(--petrole);
}

.woocommerce-checkout .fmt-checkout__badge p {
	margin: 0;
}

.woocommerce-checkout .fmt-checkout__badge p:first-child {
	color: var(--text-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.woocommerce-checkout .fmt-checkout__badge p + p {
	margin-block-start: 4px;
	color: var(--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (max-width: 700px) {
	.woocommerce-checkout .fmt-checkout__reassurance {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}
}


/* ───────────────────────────────────────────────────────────────────────────
   1. PLACE SOUS LA BARRE DE NAVIGATION

   La barre collante reste DANS le flux : elle occupe sa place d'elle-même. On
   ne garde ici que la respiration entre la barre et le premier titre.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-page {
	padding-block-start: var(--space-64);
	padding-block-end: var(--bande-y);
}

/* Une ancre visée depuis un sommaire se posait SOUS la barre collante, donc
   invisible. `--fmt-nav-h` est la hauteur réelle mesurée, publiée par
   entete.js ; on y ajoute une respiration. */
html {
	scroll-padding-block-start: calc(var(--fmt-nav-h) + var(--space-24));
}


/* ───────────────────────────────────────────────────────────────────────────
   2. OUVERTURE DE PAGE

   Sur-titre, titre en Fraunces, chapeau. Le même bloc ouvre une page, un
   article, une archive et le catalogue : une seule règle les tient.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-page__entete {
	margin-block-end: var(--space-48);
}

.fmt-page__entete > * + * {
	margin-block-start: var(--space-16);
}

.fmt-page__entete .fmt-display,
.fmt-page__entete .is-style-fmt-display {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-section);
	letter-spacing: var(--track-display);
	color: var(--text-heading);
}

.fmt-page__meta {
	gap: var(--space-16);
	align-items: baseline;
	color: var(--text-muted);
}

.fmt-page__meta > * {
	margin: 0;
}

/* Image mise en avant : une photographie, donc 2 px de rayon. */
.fmt-page__media {
	margin-block: var(--space-48);
}

.fmt-page__media img {
	border-radius: var(--radius-2);
	width: 100%;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. CONTENU ÉDITORIAL

   Pages de contenu et articles. Le corps de texte est plus aéré que
   l'interface : une longueur de ligne courte, parce qu'on y lit des conditions
   générales et des notices, pas des étiquettes.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-page__body > * + * {
	margin-block-start: var(--space-24);
}

.fmt-page__body :where(p, li) {
	line-height: 1.75;
	color: var(--text-body);
}

/* Longueur de ligne confortable pour de la lecture suivie — mais pas dans le
   panier, le tunnel ni le compte : ces pages-là sont des formulaires rendus par
   le même gabarit, et une contrainte de 68 caractères y casserait les colonnes
   de WooCommerce. */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .fmt-page__body :where(p) {
	max-width: 68ch;
}

/* H2 en Fraunces — c'est le niveau qui articule une page. En dessous, Manrope :
   une hiérarchie de lecture, pas une parure. */
.fmt-page__body :where(h2) {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
	margin-block-start: var(--space-64);
}

.fmt-page__body :where(h3, h4, h5, h6) {
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--text-heading);
	margin-block-start: var(--space-48);
}

.fmt-page__body :where(ul, ol) {
	padding-inline-start: 1.25em;
	max-width: 68ch;
}

.fmt-page__body :where(li) + :where(li) {
	margin-block-start: var(--space-12);
}

.fmt-page__body :where(li)::marker {
	color: var(--petrole);
}

/* Citation : un bloc teinté, jamais un liseré latéral. */
.fmt-page__body :where(blockquote) {
	background: var(--surface-contenant);
	border: 0;
	border-radius: var(--radius-12);
	padding: clamp(24px, 3vw, 40px);
	margin-inline: 0;
}

.fmt-page__body :where(blockquote p) {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.24;
	letter-spacing: var(--track-subsection);
	color: var(--text-heading);
	max-width: none;
}

.fmt-page__body :where(blockquote cite) {
	display: block;
	margin-block-start: var(--space-16);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--caption);
	font-style: normal;
	color: var(--text-muted);
}

/* Tableau éditorial : les lignes alternent sur la teinte plutôt que d'être
   séparées par des filets ; en-tête en sur-titre, chiffres tabulaires alignés
   — une grille tarifaire se lit à la verticale.

   Les tableaux de WooCommerce sont exclus : ce sont des tableaux d'interface,
   habillés plus bas. */
.fmt-page__body :where(table:not(.shop_table):not(.variations):not([class*="wc-block"])) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.fmt-page__body :where(table:not(.shop_table):not(.variations):not([class*="wc-block"])) :where(th, td) {
	padding: 14px 16px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.fmt-page__body :where(table:not(.shop_table):not(.variations):not([class*="wc-block"])) :where(tbody tr:nth-child(odd)) {
	background: var(--surface-contenant);
}

.fmt-page__body :where(table:not(.shop_table):not(.variations):not([class*="wc-block"])) :where(th) {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.fmt-page__body :where(table:not(.shop_table):not(.variations):not([class*="wc-block"])) :where(td:not(:first-child)) {
	font-variant-numeric: tabular-nums;
}

.fmt-page__body :where(.wp-block-image img, figure img) {
	border-radius: var(--radius-2);
}

.fmt-page__body :where(figcaption) {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
	margin-block-start: var(--space-12);
}

.fmt-page__body :where(code, kbd, samp) {
	font-family: var(--font-technique);
	font-size: .9em;
	background: var(--surface-contenant);
	border-radius: var(--radius-2);
	padding: .15em .45em;
}

.fmt-page__body :where(a) {
	text-decoration: underline;
	text-decoration-color: var(--petrole-32);
	text-underline-offset: .18em;
}

.fmt-page__body :where(a):hover {
	text-decoration-color: var(--petrole);
}

/* Séparateur posé à la main dans un contenu : un espace, pas un trait. */
.fmt-rule,
.fmt-page__body :where(.wp-block-separator) {
	border: 0;
	opacity: 1;
	margin-block: var(--space-48);
}


/* ───────────────────────────────────────────────────────────────────────────
   4. FORMULAIRES

   Le `Field` du kit : 46 px (52 pour un champ de première importance), rayon
   4 px, fond relevé, contour `--border-champ` (pétrole à 64 %) — la seule
   exception à la règle « pas de trait » : sans contour, un champ ne
   s'identifie plus, et le filet à 18 % du kit ne tient pas 3:1. Au focus,
   bordure pétrole et halo. Les mêmes règles couvrent les champs natifs, ceux
   du tunnel en blocs et ceux du tunnel classique.
   ─────────────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	width: 100%;
	border: var(--hairline) solid var(--border-champ);
	border-radius: var(--radius-field);
	background-color: var(--surface-raised);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	transition:
		border-color var(--dur-quick) var(--ease-soft),
		box-shadow var(--dur-quick) var(--ease-soft);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
	height: var(--control-h-md);
	padding: 0 14px;
}

textarea,
.wc-block-components-textarea {
	min-height: 128px;
	padding: 14px;
	line-height: 1.6;
	resize: vertical;
}

/* Les champs du tunnel en blocs portent une étiquette flottante à l'intérieur :
   une hauteur fixe la couperait. On leur laisse leur padding et on n'impose
   qu'un minimum. */
.wc-block-components-text-input input {
	min-height: var(--control-h-lg);
	height: auto;
}

input:focus,
select:focus,
textarea:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--petrole);
	box-shadow: var(--focus-halo);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
}

/* Menu déroulant : chevron dessiné, la flèche native diffère d'un système à
   l'autre. */
select,
.woocommerce form .form-row select,
.wc-blocks-components-select__select {
	appearance: none;
	padding-inline-end: 44px;
	background-image: var(--fmt-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* Étiquette : casse phrase, jamais de capitales — ce n'est pas un sur-titre. */
.woocommerce form .form-row label,
.wc-block-components-checkout-step__title,
.fmt-page__body label:not(.screen-reader-text) {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--text-body);
	margin-block-end: var(--space-8);
	display: inline-block;
}

.woocommerce form .form-row {
	padding: 0;
	margin-block-end: var(--space-24);
}

/* Case à cocher : rayon 2 px ; bouton radio : rond. */
input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--petrole);
	border-radius: var(--radius-2);
	vertical-align: middle;
}

input[type="radio"] {
	border-radius: var(--radius-pill);
}

/* Bloc de recherche : champ « lg » et bouton principal. */
.wp-block-search__inside-wrapper {
	gap: var(--space-12);
	border: 0;
}

.wp-block-search__input {
	height: var(--control-h-lg);
	padding: 0 18px;
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-search__button {
	border: 0;
	flex-shrink: 0;
}

.fmt-page__recherche,
.fmt-404__recherche {
	max-width: 34rem;
	margin-block-start: var(--space-24);
}


/* ───────────────────────────────────────────────────────────────────────────
   5. GRILLE PRODUITS

   WooCommerce calcule ses colonnes en `repeat(auto-fill, minmax(max(150px,
   calc(100%/n - gap)), 1fr))`. La largeur minimale obtenue dépasse la place
   réellement disponible une fois les gouttières déduites : on demandait trois
   colonnes et le navigateur n'en plaçait que deux, avec des visuels démesurés.
   Piège déjà rencontré sur ce projet — on reprend la main, par paliers.
   ─────────────────────────────────────────────────────────────────────────── */

.wc-block-product-template,
.wp-block-woocommerce-product-template {
	gap: var(--space-24);
	list-style: none;
	padding: 0;
	margin: 0;
}

.wc-block-product-template.columns-3,
.wc-block-product-template.columns-4,
.wc-block-product-template.columns-5,
.wp-block-woocommerce-product-template.columns-3,
.wp-block-woocommerce-product-template.columns-4,
.wp-block-woocommerce-product-template.columns-5 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.wc-block-product-template.columns-3,
	.wc-block-product-template.columns-4,
	.wc-block-product-template.columns-5,
	.wp-block-woocommerce-product-template.columns-3,
	.wp-block-woocommerce-product-template.columns-4,
	.wp-block-woocommerce-product-template.columns-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.wc-block-product-template.columns-4,
	.wc-block-product-template.columns-5,
	.wp-block-woocommerce-product-template.columns-4,
	.wp-block-woocommerce-product-template.columns-5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
}

/* La vignette produit — la `ProductCard` du kit. Renommée depuis
   `.fmt-produit`, que la fiche produit porte aussi : la fiche héritait sinon du
   rayon et de l'`overflow: hidden` de la carte, qui cassait ses éléments
   collants. Teinte lin, rayon 16 px (elle porte une image), ni trait ni ombre.
   Au survol comme au focus clavier : la teinte fonce d'un cran et la carte
   monte d'un pixel. */
.fmt-vignette-produit {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--surface-contenant);
	border: 0;
	border-radius: var(--radius-16);
	box-shadow: none;
	overflow: hidden;
	transition:
		transform var(--dur-ui) var(--ease-soft),
		background-color var(--dur-ui) var(--ease-soft);
}

.fmt-vignette-produit:hover,
.fmt-vignette-produit:focus-within {
	transform: translateY(var(--lift-hover));
	background: var(--surface-contenant-survol);
}

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

/* Le visuel : l'emplacement de produit (functions.php remplace les images de
   la v1), posé sur la teinte de la carte. */
.fmt-vignette-produit__media {
	position: relative;
	background: transparent;
}

.fmt-vignette-produit__media:has(img[src*="fmt-2026/mockups"]) {
	background: url('../img/fmt-fond-laboratoire-800.webp') center / cover;
}

.fmt-vignette-produit__media .wc-block-components-product-image,
.fmt-vignette-produit__media a {
	display: block;
	margin: 0;
}

/* `object-fit` est aussi posé en style en ligne par WooCommerce (attribut
   `scale` du bloc, « cover » par défaut). Les gabarits passent bien
   `"scale":"contain"` ; le !important couvre les grilles insérées à la main
   dans l'éditeur. Un flacon recadré est un flacon coupé. */
.fmt-vignette-produit__media img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain !important;
}

.fmt-vignette-produit__corps {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	flex: 1;
	padding: var(--space-8) var(--space-24) var(--space-24);
}

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

/* Catégorie : un `Badge`. Le séparateur « , » que pose WordPress entre deux
   termes n'a plus de sens une fois les termes en badges. */
.fmt-vignette-produit__cat {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fmt-vignette-produit__cat .wp-block-post-terms__separator {
	display: none;
}

.fmt-vignette-produit__cat a {
	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;
	text-decoration: none;
}

.fmt-vignette-produit__cat a:hover {
	background: var(--ivoire-clair);
	color: var(--petrole);
}

/* « Sans alcool » est un badge d'information, pas un lien vers une famille. */
.fmt-vignette-produit__cat a[href*="/categorie-produit/echantillons"] {
	background: var(--petrole);
	color: var(--surface-page);
}

/* Nom du produit en Fraunces, comme dans la `ProductCard` du kit. */
.fmt-vignette-produit__titre {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: var(--track-subsection);
	color: var(--text-heading);
}

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

/* Jamais de soulignement au survol : la carte entière a déjà réagi. */
.fmt-vignette-produit__titre a:hover {
	color: inherit;
	text-decoration: none;
}

.fmt-vignette-produit__prix,
.fmt-vignette-produit__prix .wc-block-components-product-price {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	margin-block-start: auto;
}

/* Prix barré d'une promotion : présent, jamais criard. */
.woocommerce del,
.wc-block-components-product-price del {
	color: var(--text-muted);
	font-weight: 400;
	margin-inline-end: .4em;
}

.woocommerce ins,
.wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--text-body);
}

/* Mention « Promo » : un `Badge` pétrole, posé sur le visuel. */
.wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 1;
	height: 26px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1;
}


/* ───────────────────────────────────────────────────────────────────────────
   6. RÉGLETTE DES CONDITIONNEMENTS

   Bloc `fmt/product-weights` du plugin fmt-core. Cette boutique est un
   fournisseur : le même parfum se vend de 100 g à 5 kg et le format est l'axe
   d'achat réel. La réglette le montre dès la grille, pour éviter d'ouvrir
   trente-neuf fiches afin de comparer.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-weights {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: var(--space-8);
}

.fmt-weights__item {
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--micro);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	padding: 4px 8px;
	border-radius: var(--radius-4);
	background: var(--surface-raised);
	color: var(--text-muted);
}

/* Rupture. L'information ne passe ni par la seule couleur ni par le seul
   barré : le bloc ajoute déjà une mention « (épuisé) » lue par les lecteurs
   d'écran. Texte discret sur surface relevée : plus de 5:1. */
.fmt-weights__item--out {
	color: var(--text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}


/* ───────────────────────────────────────────────────────────────────────────
   7. BARRE DU CATALOGUE, FIL D'ARIANE, TRI, PAGINATION
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-fil,
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
}

.fmt-fil a,
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: var(--text-muted);
	text-decoration: none;
}

.fmt-fil a:hover,
.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover {
	color: var(--petrole);
}

/* Barre du catalogue : un bandeau teinté, plus deux filets. */
.fmt-catalogue__barre {
	gap: var(--space-16);
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	margin-block-end: var(--space-48);
}

/* Les six packs Échantillons se parcourent directement, sans barre de tri. */
body.tax-product_cat.term-echantillons .fmt-catalogue__barre {
	display: none;
}

.wp-block-woocommerce-product-results-count,
.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
	margin: 0;
}

/* Le tri est un contrôle posé sur la barre teintée : fond relevé, sans le
   filet d'un champ de saisie. */
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	width: auto;
	min-width: 14rem;
	height: 40px;
	border-color: transparent;
	background-color: var(--surface-raised);
	font-size: var(--wp--preset--font-size--caption);
}

.woocommerce-ordering {
	margin: 0;
}

/* Pagination : des carrés teintés à 4 px, la page courante en pétrole plein. */
.fmt-pagination,
.woocommerce-pagination ul.page-numbers {
	gap: var(--space-8);
	margin-block-start: var(--space-64);
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	border: 0;
}

.fmt-pagination .page-numbers,
.fmt-pagination .wp-block-query-pagination-previous,
.fmt-pagination .wp-block-query-pagination-next,
.fmt-pagination .wp-block-comments-pagination-previous,
.fmt-pagination .wp-block-comments-pagination-next,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-h-md);
	height: var(--control-h-md);
	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: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-pagination a:hover,
.woocommerce-pagination ul.page-numbers li a:hover {
	background: var(--surface-contenant-survol);
	color: var(--petrole);
}

.fmt-pagination a:active,
.woocommerce-pagination ul.page-numbers li a:active {
	transform: scale(var(--scale-press));
}

.fmt-pagination .page-numbers.current,
.woocommerce-pagination ul.page-numbers li span.current {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-pagination .page-numbers.dots {
	background: transparent;
	color: var(--text-muted);
	min-width: 0;
	padding: 0 4px;
}

.woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
}


/* ───────────────────────────────────────────────────────────────────────────
   8. QUANTITÉ ET BOUTONS DE WOOCOMMERCE

   La fiche produit est rendue par la composition `fmt/produit` et habillée
   par 40-produit.css. L'ancienne section « fiche classique » de FMT Lab
   (galerie, onglets, tableau de déclinaisons de `div.product`), jamais
   servie, n'a pas été reprise. Restent les deux éléments que le panier, le
   tunnel et le compte partagent : le sélecteur de quantité et les boutons.
   ─────────────────────────────────────────────────────────────────────────── */

/* Quantité : un bloc teinté à 4 px, chiffres tabulaires. Le pas − / + du
   tunnel en blocs et le simple champ nombre du formulaire classique tiennent
   dans la même boîte. */
.woocommerce .quantity,
.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	height: var(--control-h-md);
	border: 0;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	overflow: hidden;
}

/* WooCommerce dessine un cadre autour du sélecteur en pseudo-élément. */
.wc-block-components-quantity-selector::after {
	border: 0 !important;
}

.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 3.5rem;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text-body);
	appearance: textfield;
}

.woocommerce .quantity input.qty:focus,
.wc-block-components-quantity-selector input:focus {
	box-shadow: none;
	border: 0;
}

.wc-block-components-quantity-selector__button {
	width: 40px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--petrole);
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease-soft);
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--surface-contenant-survol);
	color: var(--petrole);
}

/* Boutons de WooCommerce : le `Button` principal du kit, 46 px, rayon 4. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.alt,
.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	min-height: var(--control-h-md);
	padding: 0 22px;
	border: 0;
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--petrole-survol);
	color: var(--text-on-inverse);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.wc-block-components-button:not(.is-link):active {
	background: var(--petrole-appui);
	transform: scale(var(--scale-press));
}

/* Bouton en attente (format non choisi, requête en cours) : il reste le même
   bouton, éteint sur la teinte du contenant — le gris de WooCommerce donne
   l'impression d'un bouton cassé. */
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button[disabled],
.wc-block-components-button:not(.is-link):disabled {
	background: var(--surface-contenant);
	color: var(--text-muted);
	opacity: 1;
	cursor: not-allowed;
}


/* ───────────────────────────────────────────────────────────────────────────
   9. PANIER, TUNNEL DE COMMANDE, COMPTE CLIENT

   Ces trois pages sont des pages WordPress rendues par `page.html`. Leur
   contenu a besoin de la largeur `wide` : un tunnel en deux colonnes à 720 px
   se replierait en une colonne sur un écran de bureau. On bascule la variable
   de largeur plutôt que d'écrire un gabarit dédié qui dupliquerait tout.

   Aucun cadre, aucun filet entre les lignes : le résumé de commande, le
   contenu du compte et les formulaires sont des blocs teintés (rayon 12) ;
   les lignes d'un tableau se séparent par l'espace, l'en-tête par sa teinte.
   ─────────────────────────────────────────────────────────────────────────── */

/* La bascule se pose sur `.fmt-page` et non sur `.fmt-page__body` : la mise en
   page contrainte de WordPress lit `--wp--style--global--content-size` sur le
   CONTENANT pour borner ses enfants. */
body.woocommerce-cart .fmt-page,
body.woocommerce-checkout .fmt-page,
body.woocommerce-account .fmt-page {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* Tableaux du panier classique et des commandes du compte. */
.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px 12px;
	border: 0;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--surface-contenant);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.woocommerce table.shop_table thead th:first-child {
	border-radius: var(--radius-4) 0 0 var(--radius-4);
}

.woocommerce table.shop_table thead th:last-child {
	border-radius: 0 var(--radius-4) var(--radius-4) 0;
}

.woocommerce table.shop_table td.product-thumbnail img {
	width: 72px;
	border-radius: var(--radius-8);
	background: var(--surface-contenant);
}

/* Tous les montants en chiffres tabulaires : une colonne de prix se lit à la
   verticale, donc les chiffres doivent s'aligner. */
.woocommerce .amount,
.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price,
.woocommerce table.shop_table td.product-total,
.woocommerce table.shop_table td.product-subtotal {
	font-family: var(--font-sans);
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td,
.wc-block-components-totals-footer-item {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--text-heading);
}

/* Panier et tunnel en blocs : la colonne de droite est un bloc teinté. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.woocommerce .cart_totals {
	background: var(--surface-contenant);
	border: 0;
	border-radius: var(--radius-12);
	padding: clamp(20px, 3vw, 32px);
}

/* WooCommerce sépare chaque ligne de total et chaque article d'un filet :
   l'espace suffit. Les blocs du résumé (titre, articles, totaux, du panier
   comme de la commande) portent aussi le leur, avec une spécificité qui
   l'emporte sur le `border: 0` ci-dessus : on les vise par famille. */
[class*="wp-block-woocommerce-cart-order-summary"],
[class*="wp-block-woocommerce-checkout-order-summary"],
.wc-block-components-checkout-order-summary__title,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-order-summary-item,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-cart-items td,
.wc-block-cart-items th,
.wc-block-cart-item__wrap,
.wc-block-components-panel,
.wc-block-components-totals-coupon,
.wc-block-checkout__terms--with-separator {
	border-color: transparent !important;
}

/* La carte d'adresse enregistrée du tunnel : WooCommerce la cerne d'un
   filet ; elle devient un aplat de la teinte du contenant. */
.wc-block-components-address-card {
	border-color: transparent !important;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-8);
	background: var(--surface-contenant);
}

.wc-block-components-product-name {
	font-weight: 600;
	color: var(--text-heading);
	text-decoration: none;
}

.wc-block-components-checkout-step {
	border: 0;
	padding-inline-start: 0;
}

/* Choix de livraison ou de paiement : des tuiles teintées ; la tuile choisie
   fonce d'un cran, et le rond du bouton radio dit lequel. */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
	border: 0 !important;
	border-radius: var(--radius-4);
	background: var(--surface-contenant);
	box-shadow: none !important;
	margin-block-end: var(--space-8);
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(input:checked) {
	background: var(--surface-contenant-survol);
}

/* Le sélecteur de point relais des transporteurs déborde souvent de sa boîte. */
.wc-block-checkout__shipping-option iframe,
#shipping_method iframe {
	max-width: 100%;
}

/* Code promo : un champ et un bouton, pas un formulaire dans le formulaire. */
.woocommerce .cart .coupon,
.wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	align-items: center;
}

/* Compte client : la navigation devient une rangée d'onglets teintés, rayon
   4 px, l'onglet ouvert en pétrole plein. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	list-style: none;
	margin: 0 0 var(--space-48);
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	height: var(--control-h-md);
	padding: 0 18px;
	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);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--surface-contenant-survol);
	color: var(--petrole);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	background: var(--surface-contenant);
	border: 0;
	border-radius: var(--radius-12);
	padding: clamp(24px, 4vw, 44px);
	box-shadow: none;
}


/* ───────────────────────────────────────────────────────────────────────────
   10. MESSAGES WOOCOMMERCE

   Fonds teintés, 8 px de rayon, aucune bordure — surtout pas le liseré
   latéral coloré. Le texte reste en encre : la teinte du signal ne porte que
   le point (un repère rond) ou l'icône, un élément d'interface dont le seuil
   est 3:1.
   ─────────────────────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin-block: var(--space-24);
	padding: 16px 24px;
	border: 0;
	border-radius: var(--radius-8);
	background: var(--surface-contenant);
	color: var(--text-body);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

/* WooCommerce pose une icône de sa propre fonte en `::before`. On la remplace
   par un point de couleur : aucune fonte d'icônes à charger, et la couleur
   n'est jamais le seul porteur du message — le texte le dit déjà. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	position: static;
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-pill);
	font-size: 0;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: var(--signal-success-soft);
}

.woocommerce-message::before {
	background: var(--wp--preset--color--signal-success);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background: var(--signal-info-soft);
}

.woocommerce-info::before {
	background: var(--petrole);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: var(--signal-danger-soft);
}

.woocommerce-error::before {
	background: var(--wp--preset--color--signal-danger);
}

.wc-block-components-notice-banner.is-warning {
	background: var(--signal-warning-soft);
}

/* Les bandeaux en blocs portent déjà une icône vectorielle : elle tient le rôle
   du point, il suffit de lui donner la teinte du signal. */
.wc-block-components-notice-banner {
	color: var(--text-body);
}

.wc-block-components-notice-banner > svg {
	flex: none;
	fill: var(--petrole);
	background: transparent;
}

.wc-block-components-notice-banner.is-success > svg {
	fill: var(--wp--preset--color--signal-success);
}

.wc-block-components-notice-banner.is-warning > svg {
	fill: var(--wp--preset--color--signal-warning);
}

.wc-block-components-notice-banner.is-error > svg {
	fill: var(--wp--preset--color--signal-danger);
}

/* Bouton d'un message (« Voir le panier ») : le bouton second, un aplat clair
   — le message n'est pas l'action principale de la page. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-inline-start: auto;
	min-height: 40px;
	padding: 0 18px;
	background: var(--surface-raised);
	color: var(--petrole);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--ivoire-clair);
	color: var(--petrole);
}


/* ───────────────────────────────────────────────────────────────────────────
   11. JOURNAL, RÉSULTATS DE RECHERCHE, 404, ÉTATS VIDES
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-journal {
	gap: var(--space-32);
}

.fmt-journal__article {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-16);
	transition:
		transform var(--dur-ui) var(--ease-soft),
		background-color var(--dur-ui) var(--ease-soft);
}

.fmt-journal__article:hover,
.fmt-journal__article:focus-within {
	transform: translateY(var(--lift-hover));
	background: var(--surface-contenant-survol);
}

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

.fmt-journal__media img {
	width: 100%;
	object-fit: cover;
}

.fmt-journal__corps {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24);
	flex: 1;
}

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

.fmt-journal__corps .wp-block-post-title a {
	color: var(--text-heading);
	text-decoration: none;
}

.fmt-journal__corps .wp-block-post-title a:hover {
	color: var(--petrole);
}

.fmt-journal__corps .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--petrole);
}

/* Résultats de recherche : une liste rythmée par l'espace, pas de filets. */
.fmt-resultats > * + * {
	margin-block-start: 0;
}

.fmt-resultats__item {
	padding-block: var(--space-24);
}

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

.fmt-resultats__item > * + * {
	margin-block-start: var(--space-12);
}

.fmt-resultats__item .wp-block-post-title a {
	color: var(--text-heading);
	text-decoration: none;
}

.fmt-resultats__item .wp-block-post-title a:hover {
	color: var(--petrole);
}

.fmt-vide {
	text-align: center;
	margin-inline: 0;
}

.fmt-vide > * + * {
	margin-block-start: var(--space-16);
}

.fmt-404 {
	margin-inline: 0;
	max-width: 46rem;
}

.fmt-404 > * + * {
	margin-block-start: var(--space-16);
}

.fmt-404__code {
	color: var(--petrole);
	letter-spacing: var(--track-eyebrow);
	margin: 0;
}

.fmt-404__actions {
	margin-block-start: var(--space-32);
	gap: var(--space-12);
}


/* ───────────────────────────────────────────────────────────────────────────
   12. NAVIGATION D'ARTICLE ET COMMENTAIRES
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-article__nav {
	gap: var(--space-24);
}

.fmt-article__nav a {
	color: var(--text-body);
	text-decoration: none;
}

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

.fmt-commentaires {
	margin-block-start: var(--space-96);
}

.fmt-commentaires .wp-block-comments-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--track-section);
	margin-block-end: var(--space-32);
}

.fmt-commentaire {
	padding: var(--space-24);
}

.fmt-commentaire + .fmt-commentaire {
	margin-block-start: var(--space-16);
}

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

.fmt-commentaire > * + * {
	margin-block-start: var(--space-12);
}

.fmt-commentaire__meta {
	gap: var(--space-12);
	align-items: baseline;
}

.fmt-commentaire__meta > * {
	margin: 0;
}

.fmt-commentaires__form {
	margin-block-start: var(--space-64);
}

.fmt-commentaires__form .comment-form > p + p {
	margin-block-start: var(--space-16);
}


/* ───────────────────────────────────────────────────────────────────────────
   13. CONFIRMATION DE COMMANDE
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-merci {
	padding-block: clamp(48px, 7vw, 96px);
}

.fmt-merci__intro {
	background: var(--lin);
	border-radius: var(--radius-12);
	padding: clamp(28px, 5vw, 64px);
	text-align: center;
}

.fmt-merci__intro .fmt-eyebrow {
	margin-block: 0 var(--space-24);
}

.fmt-merci__remerciement {
	margin-block: 0 var(--space-24);
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 400;
	line-height: var(--lh-display);
	color: var(--petrole);
}

.fmt-merci__statut h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	line-height: var(--lh-display);
	color: var(--petrole);
}

.fmt-merci__statut p,
.fmt-merci__intro-texte {
	max-width: 64ch;
	color: var(--text-body);
}

.fmt-merci__intro-texte {
	margin-block-end: 0;
}

.fmt-merci__resume,
.fmt-merci__details,
.fmt-merci__adresses {
	margin-block-start: var(--space-48);
}

.fmt-merci__suite {
	margin-block-start: var(--space-64);
	padding: clamp(28px, 5vw, 56px);
	background: var(--lin);
	border-radius: var(--radius-12);
}

.fmt-merci__suite h2 {
	margin-block-start: 0;
	color: var(--petrole);
}

.fmt-merci__suite p {
	max-width: 64ch;
}

.fmt-merci__actions {
	gap: var(--space-12);
	margin-block-start: var(--space-32);
}

.fmt-merci__actions .wp-block-button__link {
	border-radius: var(--radius-4);
	padding: 14px 24px;
}

.fmt-merci__action-primaire .wp-block-button__link {
	background: var(--petrole);
	color: var(--ivoire);
}

.fmt-merci__action-secondaire .wp-block-button__link {
	background: var(--ivoire);
	color: var(--petrole);
}

/* ───────────────────────────────────────────────────────────────────────────
   14. ADAPTATIONS MOBILES
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.fmt-catalogue__barre {
		justify-content: flex-start;
	}

	.wc-block-catalog-sorting select,
	.woocommerce-ordering select {
		min-width: 0;
		width: 100%;
	}

	.fmt-vignette-produit__corps {
		padding: var(--space-8) var(--space-16) var(--space-16);
	}
}