/* ================================================================
   boutique.css — Skin charte des pages WooCommerce (§13, §15)
   ----------------------------------------------------------------
   Chargée UNIQUEMENT sur les contextes WooCommerce (voir
   inc/woocommerce.php → idouceur_charger_boutique_css), en dépendance de
   « idouceur-composants » (§5.2). Ce fichier ne fait qu'HABILLER les classes
   NATIVES de WooCommerce (archive, fiche, panier, commande, compte) aux
   couleurs/rythmes de la charte : il ne réinvente aucun composant (§5.5),
   il consomme les tokens (§5.4, `var(--token, repli)`).

   Cible à la fois le rendu « classique » (ul.products, div.product, wc-tabs…)
   et les wrappers de blocs WooCommerce (.wp-block-woocommerce-*) pour couvrir
   les deux modes d'un thème de blocs.

   Seule exception au « habillage de classes natives » : les quelques classes
   de mise en page portées par le tunnel (.etapes-tunnel, .merci__*, §7bis).
   Elles vivent ici parce que ce fichier est le seul chargé
   sur ces contextes (§5.3, feuille de feature) ; elles consomment les
   composants de composants.css, elles n'en redéfinissent aucun (§5.5).
   ================================================================ */

/* ================================================================
   0. Fondations communes — conteneur & typo WooCommerce
   ================================================================ */
.woocommerce,
.woocommerce-page {
	color: var(--ink-soft, #5C534A);
	font-family: var(--ff-text, sans-serif);
}

.woocommerce a {
	color: var(--or-deep, #876A3C);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
	font-family: var(--ff-display, serif);
	color: var(--ink, #2A2521);
	font-weight: 500;
}

/* Overline de marque (produit) — donnée « product_brand », rendue par
   idouceur_afficher_marque_produit(). Réutilise le rôle « overline ». */
.produit-marque {
	display: block;
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
	text-decoration: none;
	margin-block-end: var(--space-xs, 8px);
}

.produit-marque:hover {
	color: var(--or-deep, #876A3C);
}

/* Badge promo natif WooCommerce (.onsale) → cartouche de charte.
   ----------------------------------------------------------------
   Sur les CARTES du loop, le badge natif est remplacé par le composant
   « .badge » (inc/woocommerce.php) : cette règle ne concerne plus que la
   FICHE produit. Sélecteurs à double classe (.woocommerce.woocommerce) :
   la pastille ronde verte de WooCommerce a la même spécificité que nous
   et son ordre de chargement n'est pas garanti — on prime sans
   « !important ». */
.woocommerce.woocommerce span.onsale {
	background: var(--ink, #2A2521);
	color: var(--or-pale, #E6CBA0);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 10px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: var(--r-pill, 999px);
	padding: 0.55em 1.1em;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* ================================================================
   1. Messages / notices WooCommerce → charte
   ================================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	border-radius: var(--r-m, 10px);
	border: 1px solid var(--line, #E0D5C4);
	background: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
	font-size: var(--t-small, 14px);
}

.woocommerce-message {
	border-left: 3px solid var(--or, #A8895E);
}

.woocommerce-error {
	border-left: 3px solid var(--rouge, #B4453A);
}

/* ================================================================
   2. Boutons WooCommerce → système .btn unique (§5.5)
   ----------------------------------------------------------------
   Aligne les boutons WC sur le bouton core/charte (fond encre, uppercase,
   letter-spacing, hover or-deep). On NE recrée PAS l'effet, on le partage.
   ================================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 13px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--r-s, 4px);
	padding: 0.95em 1.6em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.35s var(--ease, ease), transform 0.35s var(--ease, ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

/* Bouton contour (secondaire) : liens « voir » / « continuer mes achats ». */
.woocommerce a.button.wc-backward,
.woocommerce .button.alt.disabled {
	background: transparent;
	color: var(--ink, #2A2521);
	border: 1px solid var(--or-soft, #C3B097);
}

.woocommerce a.button.wc-backward:hover {
	border-color: var(--or-deep, #876A3C);
	color: var(--or-deep, #876A3C);
	background: transparent;
}

/* Champs de formulaire (recherche, quantité, checkout, compte). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce-product-search input[type="search"],
.wc-block-components-text-input input,
.woocommerce-ordering select,
.woocommerce select {
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	background: var(--bg, #FBF8F3);
	color: var(--ink, #2A2521);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 14px);
	padding: 0.7em 0.9em;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-product-search input[type="search"]:focus,
.woocommerce select:focus {
	outline: 2px solid var(--or, #A8895E);
	outline-offset: 1px;
	border-color: var(--or, #A8895E);
}

/* ================================================================
   3. Archive boutique — bannière, barre d'outils, grille & carte
   ----------------------------------------------------------------
   La carte produit porte désormais les classes de composants
   (.carte, .carte--produit, .carte--lien, .carte__media/__corps/__pied),
   posées côté serveur par inc/woocommerce.php. Ce fichier ne fait donc
   que NEUTRALISER la grille flottante et les styles internes de
   WooCommerce : aucun composant n'est redéfini (§5.5).

   🔒 Sélecteurs à double classe (.woocommerce.woocommerce) : les règles
   natives de WooCommerce ont exactement la même spécificité que les
   nôtres et leur ordre de chargement n'est pas garanti. Doubler la
   classe racine nous fait primer sans recourir à « !important »
   (idiome déjà retenu pour header.css en Phase 5).
   ================================================================ */

/* ----------------------------------------------------------------
   3.1 Bannières d'en-tête sombres
   ----------------------------------------------------------------
   Compositions « idouceur/boutique-entete » et « idouceur/compte-entete » :
   même bannière (visuel plein cadre, fil d'Ariane, sur-titre, titre, chapô),
   deux contextes. UNE SEULE définition, sélecteurs groupés — le style n'est
   jamais recopié d'une bannière à l'autre (§5.5).
   ---------------------------------------------------------------- */
.boutique-entete .wp-block-cover__inner-container,
.compte-entete .wp-block-cover__inner-container {
	text-align: center;
}

.boutique-entete .fil-ariane,
.compte-entete .fil-ariane {
	margin-block-end: var(--space-l, 22px);
}

.boutique-entete .overline,
.compte-entete .overline {
	margin-block-end: var(--space-m, 18px);
}

.boutique-entete__titre,
.compte-entete__titre {
	font-family: var(--ff-display, serif);
	font-weight: 500;
	font-size: var(--t-h1, clamp(40px, 5vw, 64px));
	line-height: 1.06;
	margin-block: 0;
}

.boutique-entete__chapo,
.compte-entete__chapo {
	max-width: 56ch;
	margin-inline: auto;
	margin-block: var(--space-l, 24px) 0;
	font-size: var(--t-lead, 17px);
	line-height: 1.7;
	color: rgba(251, 248, 243, 0.86);
}

/* ----------------------------------------------------------------
   3.2 Colonnes filtres / produits
   ---------------------------------------------------------------- */
.boutique-archive {
	padding-block: var(--space-3xl, 54px) var(--space-5xl, 90px);
}

.wp-block-columns.boutique-colonnes {
	align-items: flex-start;
}

/* ----------------------------------------------------------------
   3.3 Barre d'outils : compteur + tri, et le filet de séparation
   ---------------------------------------------------------------- */
.boutique-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m, 16px);
	padding-block-end: var(--space-l, 22px);
	border-block-end: 1px solid var(--line, #E0D5C4);
	margin-block-end: var(--space-xl, 30px);
}

.woocommerce.woocommerce .boutique-barre .woocommerce-result-count {
	float: none;
	margin: 0;
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
	white-space: nowrap;
}

.woocommerce.woocommerce .boutique-barre .woocommerce-ordering {
	float: none;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-xs, 8px);
}

.boutique-tri__label {
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}

.woocommerce.woocommerce .boutique-tri__select {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 13px);
	color: var(--ink, #2A2521);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	padding-block: var(--space-xs, 9px);
	padding-inline: var(--space-s, 12px);
	cursor: pointer;
}

/* ----------------------------------------------------------------
   3.4 Grille — 2 produits par rangée sur l'archive (maquette §0.1)
   ----------------------------------------------------------------
   Le nombre de colonnes reste piloté par WooCommerce (classe
   « columns-N » posée depuis loop_shop_columns / les args des sections
   associées) : l'archive vaut 2, les bandes « vous aimerez aussi » et
   « produits similaires » valent 4.
   ---------------------------------------------------------------- */
.woocommerce.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-l, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce.woocommerce ul.products.columns-1 {
	grid-template-columns: 1fr;
}

.woocommerce.woocommerce ul.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.woocommerce.woocommerce ul.products.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Neutralise les clearfix flottants de WooCommerce. */
.woocommerce.woocommerce ul.products::before,
.woocommerce.woocommerce ul.products::after {
	content: none;
}

@media (max-width: 1024px) {
	.woocommerce.woocommerce ul.products.columns-3,
	.woocommerce.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.woocommerce.woocommerce ul.products,
	.woocommerce.woocommerce ul.products.columns-3,
	.woocommerce.woocommerce ul.products.columns-4 {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------
   3.5 Carte produit — neutralisation de la grille flottante native
   ---------------------------------------------------------------- */
.woocommerce.woocommerce ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: start;
}

/* Média : le lien produit EST le cadre image de la carte. */
.woocommerce.woocommerce ul.products li.product a.carte__media {
	display: block;
	text-decoration: none;
}

.woocommerce.woocommerce ul.products li.product .carte__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* Overline de marque : la carte gère sa propre gouttière haute. */
.woocommerce.woocommerce ul.products li.product .produit-marque {
	margin-block: 0 var(--space-xs, 6px);
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.18em;
}

/* Titre : WooCommerce impose un padding et une taille — on rend la main
   au composant .carte__titre. */
.woocommerce.woocommerce ul.products li.product .carte__titre {
	padding: 0;
	margin-block: 0 var(--space-xs, 7px);
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 23px);
	line-height: 1.15;
	color: var(--ink, #2A2521);
}

.woocommerce.woocommerce ul.products li.product .carte__titre a {
	color: inherit;
	text-decoration: none;
}

.woocommerce.woocommerce ul.products li.product .carte__texte {
	margin-block: 0;
	font-size: var(--t-small, 13px);
	line-height: 1.55;
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   3.6 Pied de carte — prix à gauche, action à droite
   ---------------------------------------------------------------- */
.woocommerce.woocommerce ul.products li.product .carte__pied {
	flex-wrap: wrap;
}

.woocommerce.woocommerce ul.products li.product .carte__pied .price {
	margin: 0;
	padding: 0;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 22px);
	color: var(--ink, #2A2521);
	white-space: nowrap;
}

.woocommerce.woocommerce ul.products li.product .carte__pied .price del {
	color: var(--ink-xsoft, #746F68);
	font-size: 0.72em;
	margin-inline-end: 0.35em;
	opacity: 1;
}

.woocommerce.woocommerce ul.products li.product .carte__pied .price ins {
	color: var(--or-deep, #876A3C);
	background: none;
	text-decoration: none;
	font-weight: inherit;
}

.woocommerce.woocommerce ul.products li.product .carte__pied .button {
	flex: none;
	margin: 0;
	padding-block: var(--space-s, 11px);
	padding-inline: var(--space-m, 16px);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

/* Icône panier du bouton d'ajout — masque CSS : zéro requête réseau
   (§19/§20) et couleur héritée du texte. */
.woocommerce.woocommerce ul.products li.product .carte__pied .add_to_cart_button::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lien « Voir le panier » injecté par l'AJAX de WooCommerce. */
.woocommerce.woocommerce ul.products li.product .added_to_cart {
	width: 100%;
	margin-block-start: var(--space-xs, 8px);
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
}

/* ----------------------------------------------------------------
   3.7 Message « aucun produit » & pagination
   ---------------------------------------------------------------- */
.woocommerce.woocommerce .woocommerce-info.woocommerce-no-products-found,
.woocommerce.woocommerce .woocommerce-info {
	text-align: center;
}

.woocommerce.woocommerce nav.woocommerce-pagination {
	margin-block-start: var(--space-3xl, 56px);
}

.woocommerce.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: var(--space-xs, 8px);
	justify-content: center;
	margin: 0;
	padding: 0;
}

.woocommerce.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-pill, 999px);
	min-width: 42px;
	height: 42px;
	line-height: 40px;
	padding: 0;
	color: var(--ink, #2A2521);
	background: var(--bg, #FBF8F3);
	font-size: var(--t-small, 14px);
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.woocommerce.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
	background: var(--bg, #FBF8F3);
	border-color: var(--or-deep, #876A3C);
	color: var(--or-deep, #876A3C);
}

.woocommerce.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border-color: var(--ink, #2A2521);
}

/* ================================================================
   4. Colonne de filtres & FAQ de la boutique
   ----------------------------------------------------------------
   🔒 La colonne de filtres est rendue par le bloc
   « idouceur/filtres-boutique » : ses styles vivent dans le SCSS du bloc
   (§5.3), ils ne sont PAS dupliqués ici. Cette section ne porte que le
   rythme des sections voisines du modèle.
   ================================================================ */

.boutique-faq {
	border-block-start: 1px solid var(--line, #E0D5C4);
	padding-block: var(--space-5xl, 88px);
}

.boutique-faq__pied {
	margin-block-start: var(--space-2xl, 40px);
	font-size: var(--t-base, 15px);
	color: var(--ink-soft, #5C534A);
}

/* ================================================================
   5. Fiche produit — zone d'achat, onglets, produits associés
   ----------------------------------------------------------------
   L'ossature (.produit-achat, .produit-bande) est posée par hooks dans
   inc/woocommerce.php : div.product redevient une PILE DE SECTIONS
   (§9ter), seule la zone d'achat est une grille. Les bandes peuvent
   alors s'échapper du conteneur contraint et occuper toute la largeur,
   comme dans la maquette « Fiche produit ».

   🔒 Sélecteurs à double classe (.woocommerce.woocommerce) : même motif
   qu'en §3 — les règles natives de WooCommerce ont notre spécificité et
   leur ordre de chargement n'est pas garanti.
   ================================================================ */

.woocommerce.woocommerce div.product {
	display: block;
	margin: 0;
}

/* Les bandes sortent du conteneur contraint (100vw) : on neutralise le
   débordement horizontal au niveau du corps du site. « clip » ne crée pas
   de conteneur de défilement → le sticky de l'en-tête reste actif. */
.single-product .wp-site-blocks {
	overflow-x: clip;
}

/* ----------------------------------------------------------------
   5.1 Zone d'achat — intitulé + galerie | résumé
   ----------------------------------------------------------------
   Trois enfants, dans CET ordre du DOM (posé par inc/woocommerce.php) :
	 1. .produit-achat__intitule   marque + titre
	 2. div.images…gallery         galerie
	 3. .summary.entry-summary     résumé (note, description, achat…)

   Ordre choisi pour l'EMPILEMENT MOBILE (« intitulé · visuel · résumé »,
   recette du 2026-08-28). En grand écran, la grille rétablit la maquette :
   la galerie occupe la colonne 1 sur les DEUX rangées, l'intitulé prend la
   rangée 1 de la colonne 2 et le résumé la rangée 2.

   🔒 « grid-template-rows: auto 1fr » n'est pas cosmétique : le résumé est
   collant (§5.3). Sa marge de manœuvre est la hauteur de sa zone de grille.
   Sans la rangée souple, cette zone se limiterait au contenu du résumé et
   le collant n'aurait plus aucune course. Le « 1fr » absorbe la hauteur
   excédentaire de la galerie, qui la traverse.
   ---------------------------------------------------------------- */
.produit-achat {
	--produit-miniatures: var(--space-4xl, 80px); /* colonne de miniatures */
	--produit-hauteur-achat: 56px;                /* hauteur commune quantité + bouton */

	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	gap: var(--space-2xl, 48px);

	/* La gouttière de colonne vaut 48px : trop, entre l'intitulé et le
	   résumé qui forment un même bloc de lecture. */
	row-gap: var(--space-l, 24px);
	align-items: start;
	padding-block: var(--space-l, 24px) var(--space-4xl, 80px);
}

.produit-achat__intitule {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce.woocommerce div.product .produit-achat > div.images.woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.woocommerce.woocommerce div.product .produit-achat > .summary.entry-summary {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 860px) {
	.produit-achat {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: var(--space-xl, 36px);
	}

	/* Une seule colonne : on rend le placement au flux du DOM. */
	.produit-achat__intitule,
	.woocommerce.woocommerce div.product .produit-achat > div.images.woocommerce-product-gallery,
	.woocommerce.woocommerce div.product .produit-achat > .summary.entry-summary {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Cartouche « Promo » : posé sur l'image principale (maquette). */
.woocommerce.woocommerce .produit-achat > span.onsale {
	position: absolute;
	inset-block-start: calc(var(--space-l, 24px) + var(--space-m, 16px));
	inset-inline-start: calc(var(--produit-miniatures) + var(--space-m, 16px) * 2);
	z-index: 3;
	margin: 0;
}

@media (max-width: 860px) {
	.woocommerce.woocommerce .produit-achat > span.onsale {
		inset-inline-start: var(--space-m, 16px);
	}
}

/* ----------------------------------------------------------------
   5.2 Galerie — miniatures en colonne à GAUCHE de l'image principale
   ----------------------------------------------------------------
   FlexSlider (support « wc-product-gallery-slider ») insère
   « .flex-viewport » autour de la figure et « ol.flex-control-thumbs »
   juste après. On repose les deux en grille : miniatures colonne 1,
   image colonne 2 — au lieu de l'empilement flottant natif.
   ---------------------------------------------------------------- */
.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
	float: none;
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: var(--produit-miniatures, 80px) 1fr;
	grid-template-rows: auto;
	gap: var(--space-m, 16px);
	align-items: start;
}

/* Mono-image : FlexSlider n'ajoute « .flex-control-thumbs » qu'a partir de
   2 visuels. Sans miniatures, l'image occupe TOUTE la largeur — plus de
   colonne reservee vide a gauche (retour recette 2026-07-30). */
.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
	grid-template-columns: 1fr;
}

.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .flex-viewport,
.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) > .woocommerce-product-gallery__wrapper {
	grid-column: 1;
}

.woocommerce.woocommerce div.product div.images .flex-viewport,
.woocommerce.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-l, 14px);
	overflow: hidden;
	background: var(--bg, #FBF8F3);
}

.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__image {
	margin: 0;
}

.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/* Colonne de miniatures. */
.woocommerce.woocommerce div.product div.images .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.woocommerce.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: 100%;
	margin: 0;
	list-style: none;
}

.woocommerce.woocommerce div.product div.images .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: 1;
	cursor: pointer;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-m, 8px);
	background: var(--bg, #FBF8F3);
	transition: border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.woocommerce.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--or-deep, #876A3C);
}

/* Loupe (photoswipe) : pastille en haut à droite de l'image. */
.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: var(--space-m, 16px);
	inset-inline-end: var(--space-m, 16px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill, 999px);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	color: var(--ink, #2A2521);
	text-decoration: none;
	font-size: var(--t-small, 15px);
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
	border-color: var(--or-deep, #876A3C);
	color: var(--or-deep, #876A3C);
}

/* Sous 860px : image d'abord, miniatures en rangée défilante. */
@media (max-width: 860px) {
	.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery {
		grid-template-columns: 1fr;
	}

	.woocommerce.woocommerce div.product div.images .flex-viewport,
	.woocommerce.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce.woocommerce div.product div.images .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		overflow-x: auto;
	}

	.woocommerce.woocommerce div.product div.images .flex-control-thumbs li {
		flex: 0 0 72px;
	}
}

/* ----------------------------------------------------------------
   5.3 Résumé — marque, titre, note, description, prix
   ---------------------------------------------------------------- */
.woocommerce.woocommerce div.product .summary.entry-summary {
	position: sticky;
	top: var(--entete-hauteur, 96px);
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

/* Marque : elle vit désormais dans l'intitulé hoisté, plus dans le résumé. */
.woocommerce.woocommerce div.product .produit-achat__intitule .produit-marque {
	letter-spacing: 0.22em;
	margin-block-end: var(--space-s, 10px);
}

.woocommerce.woocommerce div.product .product_title {
	font-family: var(--ff-display, serif);
	font-weight: 500;
	font-size: var(--t-h2, clamp(30px, 4vw, 44px));
	line-height: 1.08;
	color: var(--ink, #2A2521);
	margin: 0;
	padding: 0;
}

.woocommerce.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--space-s, 12px);
	margin-block: var(--space-m, 14px) 0;
	font-size: var(--t-small, 13px);
	line-height: 1.4;
}

.woocommerce.woocommerce div.product .woocommerce-product-rating .star-rating {
	margin: 0;
	float: none;
}

.woocommerce .star-rating span::before,
.woocommerce div.product .stars a::before {
	color: var(--or, #A8895E);
}

.woocommerce.woocommerce div.product .woocommerce-product-details__short-description {
	margin-block: var(--space-l, 20px) 0;
	max-width: 48ch;
	font-size: var(--t-base, 16px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
}

.woocommerce.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-block-end: 0;
}

/* Prix — sous la description courte (ordre posé par inc/woocommerce.php). */
.woocommerce.woocommerce div.product p.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-s, 12px);
	margin-block: var(--space-l, 26px) 0;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h3, clamp(24px, 3vw, 32px));
	line-height: 1.1;
	color: var(--ink, #2A2521);
}

.woocommerce.woocommerce div.product p.price del {
	color: var(--ink-xsoft, #746F68);
	font-size: 0.66em;
	opacity: 1;
}

.woocommerce.woocommerce div.product p.price ins {
	color: var(--or-deep, #876A3C);
	background: none;
	text-decoration: none;
	font-weight: inherit;
}

/* Mention « Rupture de stock » native : la disponibilité est portée par
   la liste de réassurance (.produit-atouts), on évite le doublon. */
.woocommerce.woocommerce div.product .stock.out-of-stock {
	display: none;
}

/* ----------------------------------------------------------------
   5.4 Achat — quantité (pas à pas) + bouton
   ---------------------------------------------------------------- */
.woocommerce.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-m, 14px);
	margin-block: var(--space-l, 22px) 0;
}

.woocommerce.woocommerce div.product form.cart .quantity {
	display: flex;
	align-items: stretch;
	height: var(--produit-hauteur-achat, 56px);
	margin: 0;
	border: 1px solid var(--or-soft, #C3B097);
	border-radius: var(--r-s, 4px);
	background: var(--bg, #FBF8F3);
	overflow: hidden;
}

.qte-pas {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink, #2A2521);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-lead, 20px);
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.qte-pas:hover:not([disabled]) {
	background: var(--surface-2, #EDE5D8);
	color: var(--or-deep, #876A3C);
}

.qte-pas[disabled] {
	color: var(--or-soft, #C3B097);
	cursor: default;
}

.woocommerce.woocommerce div.product form.cart .quantity input.qty {
	width: 3.2em;
	min-width: 34px;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-size: var(--t-base, 16px);
	color: var(--ink, #2A2521);
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: var(--produit-hauteur-achat, 56px);
	padding-block: 0;
	padding-inline: var(--space-xl, 32px);
	border: 1px solid var(--ink, #2A2521);
}

.woocommerce.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	border-color: var(--or-deep, #876A3C);
}

/* Icône panier — masque CSS (zéro requête réseau, §19/§20). */
.woocommerce.woocommerce div.product form.cart .single_add_to_cart_button::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----------------------------------------------------------------
   5.4bis Barre d'achat collante (mobile) — remplace la barre RDV
   ----------------------------------------------------------------
   Recette du 2026-08-28 : sur la FICHE PRODUIT, « Prendre rendez-vous »
   n'est pas l'action attendue en bas d'écran — l'achat l'est. Sous 1000px
   (le seuil exact de la barre RDV, header.css §5), on masque donc la barre
   RDV et on colle à sa place la zone d'achat : prix + quantité + bouton,
   ou prix + « Rupture de stock » quand le produit est épuisé.

   🔒 Aucun contenu n'est DUPLIQUÉ : c'est le formulaire natif lui-même
   (« .produit-achat__acheter », posé par inc/woocommerce.php) qui devient
   la barre. Un second formulaire aurait dédoublé le champ de quantité et
   cassé le pas à pas, l'AJAX et la validation.

   🔒 Le modificateur « --barre » n'existe que pour un produit SIMPLE : un
   produit variable rend un tableau de variations, qui ne tient pas dans
   une barre. Ces fiches-là gardent l'achat dans le flux — et gardent donc
   aussi leur barre RDV masquée sans remplacement : c'est voulu, la page
   reste alors une page d'achat classique.
   ---------------------------------------------------------------- */
@media (max-width: 999.98px) {

	/* La barre RDV cède la place à la barre d'achat. Trois classes :
	   il faut battre « .wp-block-buttons.barre-rdv { display:block } »
	   de header.css §5 ET la règle de layout générée par WordPress. */
	.single-product .wp-block-buttons.barre-rdv {
		display: none;
	}

	/* 🔴 Le résumé cesse d'être collant — condition SINE QUA NON de la
	   barre, pas un réglage de confort. Tout élément « position: sticky »
	   crée un CONTEXTE D'EMPILEMENT : le « z-index: 70 » de la barre, qui
	   en est un enfant, resterait enfermé dedans et ne pourrait plus
	   passer devant les sections QUI SUIVENT dans le document (onglets,
	   produits associés, réassurance, pied de page). La barre gardait sa
	   place à l'écran mais se faisait recouvrir dès qu'on défilait —
	   retour de recette du 2026-08-31.
	   Aucune perte : en colonne unique, un résumé collant n'a de toute
	   façon aucune course. */
	.woocommerce.woocommerce div.product .summary.entry-summary {
		position: static;
	}

	.woocommerce.woocommerce div.product .produit-achat__acheter--barre {
		/* Sans box-sizing, les 100% de largeur + le padding déborderaient
		   et rouvriraient le défilement horizontal (recette du 2026-08-27). */
		box-sizing: border-box;

		/* Hauteur commune quantité + bouton, resserrée pour la barre. */
		--produit-hauteur-achat: 48px;

		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 70;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-m, 14px);
		margin: 0;
		padding: var(--space-s, 10px) var(--space-m, 16px);
		background: var(--surface, #F7F3EC);
		border-block-start: 1px solid var(--line, #E0D5C4);
		box-shadow: 0 -6px 24px rgba(42, 37, 33, 0.1);
	}

	/* Prix : compact, ne se comprime pas, reste sur une ligne. */
	.woocommerce.woocommerce div.product .produit-achat__acheter--barre p.price {
		flex: none;
		margin: 0;
		font-size: var(--t-lead, 20px);
		white-space: nowrap;
	}

	.woocommerce.woocommerce div.product .produit-achat__acheter--barre form.cart {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
		gap: var(--space-s, 10px);
		margin: 0;
	}

	/* Pas à pas resserré : à 400px de large, 48px par bouton ne laissaient
	   plus de place au libellé « Ajouter au panier ». */
	.woocommerce.woocommerce div.product .produit-achat__acheter--barre form.cart .quantity {
		flex: none;
	}

	.produit-achat__acheter--barre .qte-pas {
		width: 34px;
	}

	.woocommerce.woocommerce div.product .produit-achat__acheter--barre form.cart .quantity input.qty {
		width: 2.2em;
		min-width: 26px;
	}

	.woocommerce.woocommerce div.product .produit-achat__acheter--barre form.cart .single_add_to_cart_button {
		/* La base de 200px de §5.4 ferait passer le bouton à la ligne. */
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: var(--space-m, 14px);
		font-size: var(--t-overline, 12px);
	}

	/* Produit épuisé : WooCommerce ne rend pas de formulaire, seulement la
	   mention de disponibilité — masquée ailleurs (§5.3) parce qu'elle fait
	   doublon avec la réassurance. Ici, c'est elle qui porte l'information
	   dans la barre : on la réaffiche. */
	.woocommerce.woocommerce div.product .produit-achat__acheter--barre .stock.out-of-stock {
		display: block;
		flex: 1 1 auto;
		margin: 0;
		text-align: end;
		font-size: var(--t-small, 14px);
		line-height: 1.3;
		color: var(--rouge, #B4453A);
	}

	/* Dégagement de bas de page : la barre d'achat (~70px) est plus haute
	   que la barre RDV, dont header.css §6 réserve la hauteur. Exception
	   assumée à la demi-échelle mobile — ce n'est pas du rythme, c'est la
	   hauteur d'un élément fixe. */
	.single-product .pied__legal {
		padding-block-end: var(--espace-plein-4xl, 80px);
	}
}

/* ----------------------------------------------------------------
   5.5 Réassurance produit — filet de séparation + disponibilité
   ---------------------------------------------------------------- */
.produit-atouts {
	list-style: none;
	display: grid;
	gap: var(--space-s, 13px);
	margin-block: var(--space-l, 26px) 0;
	margin-inline: 0;
	padding-block: var(--space-l, 22px) 0;
	padding-inline: 0;
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.produit-atouts__item {
	display: flex;
	align-items: center;
	gap: var(--space-s, 12px);
	margin: 0;
	font-size: var(--t-small, 14px);
	line-height: 1.5;
	color: var(--ink-soft, #5C534A);
}

.produit-atouts__icone {
	display: flex;
	flex: none;
	color: var(--or-deep, #876A3C);
}

.produit-atouts__icone svg {
	display: block;
}

.produit-atouts__texte b {
	font-weight: 500;
	color: var(--ink, #2A2521);
}

/* États de disponibilité : la couleur double l'information écrite,
   elle ne la porte jamais seule (§21). */
.produit-atouts__item--stock .produit-atouts__icone {
	color: var(--vert, #1C7B51);
}

.produit-atouts__item--rupture .produit-atouts__icone {
	color: var(--rouge, #B4453A);
}

.produit-atouts__item--attente .produit-atouts__icone {
	color: var(--or, #A8895E);
}

/* ----------------------------------------------------------------
   5.6 Bandes de section pleine largeur (onglets, produits associés)
   ---------------------------------------------------------------- */
.produit-bande {
	/* box-sizing border-box : « width:100vw » INCLUT le padding → aucun
	   debordement horizontal, donc « overflow-x:clip » du corps ne rogne plus
	   le contenu (cause du « Toute la boutique » coupe — recette 2026-07-30). */
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	/* margin-block:0 : neutralise la marge par defaut de WooCommerce sur
	   « .related.products » / « .up-sells » — c'etait le « rectangle » de fond
	   de page (surface) qui apparaissait entre deux bandes (recette 2026-07-31). */
	margin-block: 0;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--space-4xl, 80px);
	/* Marge laterale qui ALIGNE le contenu sur la colonne 1180 (comme la zone
	   d'achat au-dessus), et retombe a la gouttiere mini sur petit ecran. */
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100vw - var(--maxw, 1180px)) / 2));
}

/* Un SEUL filet de separation : au-dessus des onglets (achat → onglets).
   Les bandes suivantes (onglets → produits associes) partagent la meme
   surface creme et coulent SANS ligne — surface uniforme demandee en
   recette (2026-07-30). */
.produit-bande--onglets {
	background: var(--bg, #FBF8F3);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

/* Produits associes : MEME fond que la zone d'achat/l'image, c'est-a-dire
   le fond de PAGE (surface, defini dans theme.json > styles.color.background).
   Alternance voulue : image (surface) → onglets (bg creme) → associes (surface).
   Pour changer cette couleur : remplacer var(--surface) ci-dessous par un autre
   token de palette (--bg, --surface-2, --surface, …). */
.produit-bande--croises,
.produit-bande--similaires {
	background: var(--surface, #F7F3EC);
}

.produit-bande__interieur {
	max-width: 920px;
	margin-inline: auto;
}

.produit-bande__interieur--large {
	max-width: var(--maxw, 1180px);
}

/* En-tête de section des produits associés : intitulé à gauche, lien à
   droite (composants .entete-section / .overline / .titre-section /
   .lien-souligne — rien n'est redéfini ici, §5.5). */
.entete-produits {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-m, 14px);
}

.entete-produits .overline {
	margin-block-end: var(--space-s, 10px);
}

/* ----------------------------------------------------------------
   5.7 Onglets (Description / Avis…)
   ---------------------------------------------------------------- */
.woocommerce.woocommerce div.product .woocommerce-tabs {
	margin: 0;
	padding: 0;
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs, 8px);
	margin: 0 0 var(--space-2xl, 40px);
	padding: 0;
	border-block-end: 1px solid var(--line, #E0D5C4);
	list-style: none;
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	content: none;
	border: 0;
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding-block: var(--space-m, 14px);
	padding-inline: var(--space-m, 18px);
	font-family: var(--ff-text, sans-serif);
	font-weight: 400;
	font-size: var(--t-small, 13px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-xsoft, #746F68);
	text-decoration: none;
	border-block-end: 2px solid transparent;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ink, #2A2521);
}

.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink, #2A2521);
	border-block-end-color: var(--or-deep, #876A3C);
}

.woocommerce.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
	font-size: var(--t-base, 16.5px);
	line-height: 1.8;
	color: var(--ink-soft, #5C534A);
}

.woocommerce.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--ff-display, serif);
	font-size: var(--t-h3, clamp(24px, 3vw, 32px));
	margin-block: 0 var(--space-l, 24px);
}

/* Avis clients (onglet natif « Avis »). */
.woocommerce.woocommerce #reviews #comments ol.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce.woocommerce #reviews #comments ol.commentlist li {
	margin-block-end: var(--space-l, 24px);
}

.woocommerce.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: var(--space-m, 16px);
	padding: var(--space-l, 24px);
	background: var(--surface, #F7F3EC);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-m, 10px);
}

.woocommerce.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill, 999px);
	background: none;
}

.woocommerce.woocommerce #reviews #comments ol.commentlist li .comment-text {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce.woocommerce #reviews .comment-reply-title,
.woocommerce.woocommerce #reviews #respond .comment-reply-title {
	font-family: var(--ff-display, serif);
	font-size: var(--t-h4, clamp(20px, 2.2vw, 26px));
	color: var(--ink, #2A2521);
}

/* ----------------------------------------------------------------
   5.8 Grilles des produits associés — 4 vignettes par rangée
   ----------------------------------------------------------------
   La vignette elle-même est celle de la boutique (§3) : même loop, mêmes
   composants .carte. Seule la densité change.
   ---------------------------------------------------------------- */
.woocommerce.woocommerce div.product .produit-bande ul.products {
	grid-template-columns: repeat(4, 1fr);
	margin-block-start: 0;
}

@media (max-width: 1100px) {
	.woocommerce.woocommerce div.product .produit-bande ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.woocommerce.woocommerce div.product .produit-bande ul.products {
		grid-template-columns: 1fr;
	}
}

/* ================================================================
   5bis. En-tete de page du tunnel (panier & commande)
   ----------------------------------------------------------------
   🔴 Correctif 2026-07-30 : le fil d'Ariane et le titre sont poses par le
   GABARIT « tunnel-boutique.html », plus par les compositions. Motif de
   recette : une composition doit etre inseree a la main dans la page ;
   tant qu'elle ne l'est pas, la page reste sur le contenu par defaut de
   WooCommerce et l'en-tete de la maquette n'apparait jamais. Dans le
   gabarit, il s'affiche des que le modele est applique.

   Le titre est le TITRE DE LA PAGE (core/post-title) : « Mon panier » /
   « Finaliser ma commande » se saisissent en admin (§1.2), le thème
   n'ecrit aucun libelle en dur.
   ================================================================ */
.tunnel__entete {
	padding-block-end: var(--space-l, 24px);
}

/* Le fil d'Ariane se decolle du fil d'etapes qui le surplombe, et pose
   son propre filet d'air avant le titre (recette 2026-07-31). */
.tunnel__entete .fil-ariane {
	margin-block: var(--space-m, 16px) var(--space-s, 12px);
}

/* Meme colonne pour TOUT l'en-tete : le fil d'Ariane et le titre
   partagent le bord gauche du contenu.

   🔴 Deux classes obligatoires. La mise en page « constrained » de
   WordPress centre ses enfants avec « margin-inline: auto » a une seule
   classe de specificite : a egalite, c'est l'ordre de chargement qui
   tranche, et il n'est pas garanti — le titre decrochait donc du fil
   d'Ariane (recette 2026-07-31). On prime, sans « !important ». */
.tunnel .tunnel__entete > *,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	margin-inline: 0;
	max-inline-size: 100%;
}

/* La maquette « Commande » remplace le fil d'Ariane par le fil d'etapes. */
.woocommerce-checkout .tunnel__entete .fil-ariane {
	display: none;
}

/* 🔴 Ancrage sur la CLASSE DE PAGE (body) et non sur la structure du
   gabarit : si le modele a ete personnalise dans l'editeur de site,
   WordPress sert la copie en base et le fichier du thème est ignore —
   le titre n'aurait alors ni la classe « tunnel__titre » ni l'ancetre
   « .tunnel ». Ancre ainsi, le titre est a la charte quelle que soit la
   structure du gabarit (constat de recette 2026-07-30). */
.tunnel__titre,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-family: var(--ff-display, serif);
	font-weight: 500;
	font-size: var(--t-h1, clamp(34px, 4.4vw, 52px));
	line-height: 1.05;
	color: var(--ink, #2A2521);
	margin-block: 0 var(--space-l, 24px);
}

/* Sur la page Commande, le fil d'Ariane est masque (regle ci-dessus) : le
   titre perdait donc le filet d'air que ce fil pose au-dessus de lui sur le
   panier, et collait au fil d'etapes.
   🔴 Valeur HORS ECHELLE assumee : 20px n'existe pas dans les pas
   d'espacement de theme.json (16 puis 24). Arbitrage de recette du
   2026-07-31, valide par le donneur d'ordre apres essai des deux pas
   voisins — ne pas « corriger » en token sans le lui redemander. */
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout .tunnel__titre {
	margin-block-start: 20px;
}

/* Compteur « — 2 articles » ajoute par idouceur-boutique.js (§4).
   Absent sans JavaScript : le titre reste complet et lisible. */
.tunnel__compteur {
	font-size: 0.5em;
	font-style: italic;
	color: var(--ink-xsoft, #746F68);
	white-space: nowrap;
}

/* ================================================================
   6. Panier — blocs WooCommerce « Cart » (maquette « Panier »)
   ----------------------------------------------------------------
   🔴 Ce qu'il faut savoir avant d'editer cette section : la page Panier
   rend les BLOCS WooCommerce (« wc-block-* »), pas le panier classique
   en table (« table.shop_table »). Skinner le markup classique n'a
   aucun effet — c'etait la cause du panier « hors maquette » constate
   en recette du 2026-07-30.

   Les regles ci-dessous habillent donc le DOM des blocs. Deux points
   d'attention de cascade :
	 - les boutons WC portent AUSSI « wp-element-button » (theme.json,
	   fond dore) : pour imposer le noir de la maquette il faut passer
	   devant avec DEUX classes (le preset core pese une classe) ;
	 - le layout « sidebar » de WooCommerce est un flex : on le regle,
	   on ne le remplace pas.

   Composition associee : inc/patterns/panier-content.php.
   ================================================================ */

/* ----------------------------------------------------------------
   6.1 Mise en page : lignes a gauche, recapitulatif a droite
   ---------------------------------------------------------------- */
.wc-block-cart {
	font-size: var(--t-small, 15px);
}

/* 🔴 Correctif 2026-07-30 — alignement, ancre sur la CLASSE DE PAGE.
   WooCommerce pose « alignwide » sur le titre, le contenu et ses blocs
   Panier/Commande : ils s'etalaient sur la largeur LARGE (1360) alors
   que le pied de page reste en largeur de CONTENU (1180) — d'ou les
   cadres qui ne tombaient pas d'aplomb. On ramene tout sur la meme
   colonne, quel que soit le gabarit qui rend la page (le thème fournit
   desormais « cart.html » / « checkout.html », mais la regle tient aussi
   si WooCommerce reprend la main). */
.woocommerce-cart .wp-block-post-title.alignwide,
.woocommerce-cart .wp-block-post-content.alignwide,
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-post-title.alignwide,
.woocommerce-checkout .wp-block-post-content.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
	max-inline-size: var(--wp--style--global--content-size, 1180px);
	margin-inline: auto;
}

/* Respiration entre le titre de page et le panier (§5.4 : blockGap a 0,
   chaque bloc pose son propre rythme). */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	margin-block: var(--space-l, 24px) 0;
	padding: 0;
}

/* 🔴 Selecteur COMPOSE, pas descendant : « wc-block-cart » et
   « wc-block-components-sidebar-layout » sont portees par LE MEME
   element (releve DevTools 2026-07-31). Ecrit en descendant, la regle
   ne matchait rien — la gouttiere n'a jamais ete la notre, on subissait
   celle de WooCommerce. Meme piege au §7.1 pour la commande. */
.wc-block-cart.wc-block-components-sidebar-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2xl, 48px);
	padding: 0;
}

.wc-block-cart .wc-block-components-main {
	flex: 1 1 420px;
	min-inline-size: 0;
	padding: 0;
	margin: 0;
}

.wc-block-cart .wc-block-components-sidebar {
	flex: 0 1 360px;
	padding: 0;
	margin: 0;
}

/* ----------------------------------------------------------------
   6.2 Lignes du panier — visuel, marque, quantite, total
   ----------------------------------------------------------------
   La maquette n'affiche pas d'en-tete de colonnes : on le retire de
   l'AFFICHAGE en le gardant pour les lecteurs d'ecran (§21), on ne le
   supprime pas.
   ---------------------------------------------------------------- */
/* 🔴 La rangee est pilotee en GRILLE, pas par le tableau natif.
   Motif (DOM releve en recette le 2026-07-30) : WooCommerce bascule
   lui-meme entre une disposition « large » (3 colonnes) et une
   disposition empilee, selon une mesure de largeur de conteneur faite
   en JavaScript. Sur cette page, il choisissait l'empilee — d'ou le
   total « 65,00 € » orphelin sous la ligne. On reprend la main : trois
   colonnes deterministes (visuel · produit · total), une seule regle,
   plus aucune dependance a sa detection.

   🔴 Correctif 2026-08-24 — PERIMETRE. Ces regles de DISPOSITION ne
   valent que pour la page Panier. Le tiroir mini-panier de l'en-tete
   (bloc « woocommerce/mini-cart », parts/header.html) reutilise
   exactement les memes classes ; sans ancrage, la grille trois colonnes
   et surtout le « display: block » pose sur TOUTES les cellules
   s'appliquaient aussi au tiroir, ou WooCommerce en masque certaines
   par ses propres styles : la cellule reaffichee retombait en colonne 1,
   deuxieme rangee — le visuel produit apparaissait DEUX FOIS (constate
   en recette le 2026-08-24). On ancre donc sur « .wp-block-woocommerce-cart »,
   conteneur du bloc Panier ; le tiroir a desormais sa propre section
   (6.2bis), qui n'expose que les cellules attendues. */
.wp-block-woocommerce-cart .wc-block-cart-items {
	display: block;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	inline-size: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.wp-block-woocommerce-cart .wc-block-cart-items > tbody {
	display: block;
	inline-size: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* En-tete de colonnes : retire de l'AFFICHAGE (absent de la maquette),
   conserve pour les lecteurs d'ecran (§21). Vaut dans les deux
   contextes — le tiroir non plus n'affiche pas d'en-tete. */
.wc-block-cart-items thead {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Aucun retrait lateral : le visuel produit demarre exactement au bord
   gauche du contenu, d'aplomb avec le filet de separation, le fil
   d'Ariane et le pied de page (recette 2026-07-31). */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--space-m, 18px);
	padding-block: var(--space-l, 24px);
	padding-inline: 0;
	margin-inline: 0;
	border-block-end: 1px solid var(--line, #E0D5C4);
}

/* 🔒 Cellules NOMMEES, jamais « td » en bloc : une cellule que
   WooCommerce masque doit le rester (cf. doublon de visuel ci-dessus). */
.wp-block-woocommerce-cart .wc-block-cart-items__row td.wc-block-cart-item__image,
.wp-block-woocommerce-cart .wc-block-cart-items__row td.wc-block-cart-item__product,
.wp-block-woocommerce-cart .wc-block-cart-items__row td.wc-block-cart-item__total {
	display: block;
	padding: 0;
	border: 0;
}

/* Visuel produit : format portrait de la maquette (86 × 104). */
.wp-block-woocommerce-cart .wc-block-cart-items__row td.wc-block-cart-item__image {
	inline-size: 86px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
	inline-size: 86px;
	block-size: 104px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--space-xs, 8px);
	background: var(--bg, #FBF8F3);
}

/* Le TIROIR mini-panier de l'en-tete partage ces classes mais pas cette
   feuille : il vit sur toutes les pages, boutique.css non (§20). Sa
   disposition est donc posee dans header.css, section 4bis. */

/* Colonne « produit » : c'est la CELLULE qui porte l'ordre des lignes
   (marque au-dessus du nom, cf. 6.3).

   🔴 Correctif 2026-07-30 : la regle visait « .wc-block-cart-item__wrap »,
   un conteneur que WooCommerce n'interpose pas toujours — l'ordre n'etait
   donc jamais applique et la marque restait sous le prix (constate en
   recette). On ancre desormais sur la cellule, et on aplatit le wrapper
   s'il existe pour que ses enfants deviennent les elements ordonnables. */
.wc-block-cart-items__row td.wc-block-cart-item__product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wc-block-cart-item__product .wc-block-cart-item__wrap {
	display: contents;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	order: 0;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 21px);
	line-height: 1.15;
	color: var(--ink, #2A2521);
	text-decoration: none;
}

.wc-block-cart-item__product .wc-block-components-product-name:hover,
.wc-block-cart-item__product .wc-block-components-product-name:focus-visible {
	color: var(--or-deep, #876A3C);
}

/* Prix unitaire de la ligne : mention discrete sous le nom (la maquette
   met le montant fort a droite, pas ici). */
.wc-block-cart-item__product .wc-block-cart-item__prices {
	order: 1;
	margin: 0;
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

.wc-block-cart-item__product .wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-family: var(--ff-text, sans-serif);
	font-size: inherit;
	font-weight: 400;
	color: inherit;
}

/* L'extrait de la fiche produit n'existe pas dans la maquette. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* ----------------------------------------------------------------
   6.3 Marque & contenance de la ligne (donnees d'article)
   ----------------------------------------------------------------
   Les deux valeurs sont injectees cote serveur dans les donnees
   d'article (inc/woocommerce.php → idouceur_donnees_article_panier),
   donc exposees telles quelles par la Store API et rendues par les
   blocs. WooCommerce derive bien une classe du libelle :
   « Marque » → .wc-block-components-product-details__marque (confirme
   sur le DOM reel le 2026-07-30).

   🔴 Correction du meme jour : ces details ne sont PAS une liste. Le DOM
   reel est une CASCADE DE DIV/SPAN —
	 div.wc-block-components-product-details
	   > span.wc-block-components-product-details__marque
		   > span.…__name (« Marque: ») + span.…__value (« Mesoestetic »)
   Les regles ecrites sur « li » ne matchaient donc rien, et la marque
   restait a sa place naturelle. On cible desormais les enfants directs.

   « display: contents » aplatit metadonnees et details pour que la ligne
   « Marque » remonte AU-DESSUS du nom (ordre de la maquette) sans
   toucher au markup de WooCommerce.
   ---------------------------------------------------------------- */
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-details {
	display: contents;
}

.wc-block-cart-item__product .wc-block-components-product-details > * {
	order: 2;
	display: block;
	margin: 0;
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

/* La marque prend le role « overline » de la charte (§5.5). */
.wc-block-cart-item__product .wc-block-components-product-details > .wc-block-components-product-details__marque {
	order: -1;
	font-size: var(--t-overline, 11px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
	margin-block-end: var(--space-xs, 4px);
}

/* Le libelle (« Marque : ») est redondant a l'affichage. */
.wc-block-cart-item__product .wc-block-components-product-details__marque
	.wc-block-components-product-details__name {
	display: none;
}

.wc-block-cart-item__product .wc-block-components-product-details__name {
	color: var(--ink-xsoft, #746F68);
	font-style: normal;
}

/* ----------------------------------------------------------------
   6.4 Pas a pas de quantite + retrait de l'article
   ---------------------------------------------------------------- */
.wc-block-cart-item__quantity {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m, 18px);
	margin-block-start: var(--space-m, 14px);
	padding: 0;
}

.wc-block-components-quantity-selector {
	display: flex;
	align-items: stretch;
	block-size: 40px;
	inline-size: auto;
	margin: 0;
	border: 1px solid var(--or-soft, #C3B097);
	border-radius: var(--r-s, 4px);
	background: var(--bg, #FBF8F3);
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	display: none;
}

.wc-block-components-quantity-selector__input {
	inline-size: 44px;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-base, 15px);
	color: var(--ink, #2A2521);
}

.wc-block-components-quantity-selector__button {
	inline-size: 38px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink, #2A2521);
	font-size: var(--t-lead, 18px);
	line-height: 1;
	opacity: 1;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.wc-block-components-quantity-selector__button:hover:not( [disabled] ) {
	background: var(--surface-2, #EDE5D8);
	color: var(--or-deep, #876A3C);
}

.wc-block-components-quantity-selector__button[disabled] {
	color: var(--or-soft, #C3B097);
}

/* « Retirer » : lien discret, alerte au survol (maquette). */
.wc-block-cart-item__remove-link {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 12.5px);
	letter-spacing: 0.04em;
	color: var(--ink-xsoft, #746F68);
	text-decoration: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}

/* WooCommerce rend ce controle en ICONE seule (corbeille SVG + libelle
   ARIA « Retirer … du panier »), la maquette montre un lien texte
   « ✕ Retirer ». On garde l'icone native — ecrire le mot en CSS le
   rendrait ni traduisible ni editable (§1.2, §23) — et on l'aligne sur
   la charte : discrete, alerte au survol. */
.wc-block-cart-item__remove-link svg {
	inline-size: 18px;
	block-size: 18px;
	fill: currentColor;
	display: block;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible {
	color: var(--rouge, #B4453A);
	text-decoration: none;
}

/* ----------------------------------------------------------------
   6.5 Total de ligne
   ---------------------------------------------------------------- */
.wc-block-cart-item__total {
	justify-self: end;
	min-inline-size: 84px;
	text-align: end;
	white-space: nowrap;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 21px);
	color: var(--ink, #2A2521);
}

.wc-block-components-product-price__regular {
	color: var(--ink-xsoft, #746F68);
	text-decoration: line-through;
	margin-inline-end: var(--space-xs, 6px);
}

/* ----------------------------------------------------------------
   6.6 Recapitulatif (colonne de droite)
   ----------------------------------------------------------------
   🔴 Correctif 2026-07-30 : la carte blanche etait portee par le bloc
   « order-summary » seul — le bouton « Commander », qui est son bloc
   FRERE, tombait donc a l'exterieur du cadre (constate en recette). La
   carte remonte sur le conteneur « cart-totals-block », qui englobe le
   recapitulatif ET le bouton : tout est dans le meme cadre, comme la
   maquette. Le bloc interne perd son propre cadre pour ne pas doubler.
   ---------------------------------------------------------------- */
/* 🔴 La carte est portee par la COLONNE elle-meme, pas par un bloc
   interne. Motif (constat de recette 2026-07-30) : les classes
   « wp-block-woocommerce-* » viennent du markup ENREGISTRE ; au rendu,
   WooCommerce remonte son arbre React et ces conteneurs ne sont pas
   garantis. « .wc-block-components-sidebar », lui, est toujours la — et
   il englobe recapitulatif ET bouton, donc tout tombe dans le meme
   cadre, comme la maquette. */
.wc-block-cart .wc-block-components-sidebar {
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 28px) var(--space-l, 26px);
}

/* Aucun cadre imbrique : les conteneurs internes restent transparents. */
.wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-totals-block,
.wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-container {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

@media (min-width: 1000px) {
	.wc-block-cart .wc-block-components-sidebar {
		position: sticky;
		top: var(--entete-hauteur, 96px);
	}
}

/* Titre du recapitulatif — 🔴 deux classes : WooCommerce impose ici
   ses majuscules et sa taille reduite a specificite egale (recette
   2026-07-31). Meme rendu que le libelle « Total » du pied de carte. */
.wc-block-cart .wc-block-cart__totals-title {
	display: block;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 24px);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink, #2A2521);
	padding: 0;
	margin-block-end: var(--space-l, 20px);
}

/* Filets de separation entre les groupes de totaux (sous-total,
   livraison, taxes) — la maquette les montre, WooCommerce ne pose que
   la couleur : on declare le trait en entier. */
.wc-block-components-totals-wrapper {
	padding-block: var(--space-s, 12px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.wc-block-components-totals-wrapper:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

/* 🔴 Correctif 2026-08-31 — la ligne « Sous-total » COLLAIT a son filet
   (recette 402 px, page Commande). Cause : WooCommerce remet a plat le
   retrait bas des lignes de totaux —
	 .wp-block-woocommerce-checkout-order-summary-totals-block
	   .wc-block-components-totals-wrapper { border: 0; padding-bottom: 0 }
   (checkout.css de WooCommerce 10.9.3). Cette regle pese (0,2,0) et bat
   donc le « padding-block » de charte pose juste au-dessus, qui n'en pese
   que (0,1,0) : il ne restait qu'un retrait HAUT, et pas le meme des deux
   cotes. On repasse a (0,3,0) pour rendre la ligne symetrique.

   🔒 Les lignes vides (remise, frais, livraison, taxes) doivent RESTER
   plates : WooCommerce les aplatit avec « :empty » et
   « :has(> :only-child:empty) », a (0,2,0) — que notre regle battrait, en
   ouvrant quatre bandes de vide entre le sous-total et le total. On
   reprend donc ses deux gardes a l'identique, un cran au-dessus. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper {
	padding-block: var(--space-s, 12px);
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper:empty,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper:has( > :only-child:empty ) {
	padding: 0;
}

.wc-block-components-totals-item {
	font-size: var(--t-small, 14.5px);
	color: var(--ink-soft, #5C534A);
}

.wc-block-components-totals-item__value {
	color: var(--ink, #2A2521);
	font-family: inherit;
	font-size: inherit;
}

.wc-block-components-totals-item__description {
	font-size: var(--t-overline, 12px);
	color: var(--ink-xsoft, #746F68);
}

/* ----------------------------------------------------------------
   6.6-bis Code promo — champ et bouton fins (maquette)
   ----------------------------------------------------------------
   Le panneau est deplie au chargement par idouceur-boutique.js (§3) :
   React ne monte son contenu qu'apres clic, le CSS seul ne peut pas
   l'ouvrir. Ici on ne fait que l'habiller : declencheur en libelle
   discret, champ leger, bouton compact en encre.
   ---------------------------------------------------------------- */
.wc-block-components-totals-coupon {
	margin-block: var(--space-m, 16px);
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 12px);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
	padding-inline: 0;
}

/* 🔴 Correctif 2026-08-31 — le bouton « Appliquer » etait PLUS HAUT que le
   champ (recette mobile, page Commande). Deux causes cumulees :

   1. Dans le TUNNEL, ce champ tombe sous les regles de formulaire du §7.4 :
	  le libelle cesse d'etre flottant (WooCommerce le pose en
	  « position: absolute ») et s'empile AU-DESSUS du champ. La ligne
	  mesure alors « libelle + gouttiere + champ », pas la hauteur du champ.
   2. « align-items: stretch » etirait le bouton sur toute cette pile.

   On cale donc le bouton sur le BAS de la ligne — le champ — et on lui
   donne une hauteur explicite (« stretch » ne la fournit plus). */
.wc-block-components-totals-coupon__form {
	display: flex;
	align-items: flex-end;
	gap: var(--space-xs, 8px);
	margin-block-start: var(--space-xs, 9px);
}

/* Champ : fin, fond clair, sans le libelle flottant volumineux. */
.wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	block-size: 40px;
	padding-block: 0;
	padding-inline: var(--space-s, 12px);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	background: var(--surface, #F7F3EC);
	font-size: var(--t-small, 13.5px);
	line-height: 40px;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	font-size: var(--t-small, 13.5px);
	color: var(--ink-xsoft, #746F68);
}

/* Bouton « OK » : compact, encre, jamais pleine largeur. Sa hauteur est
   celle du champ voisin — 40px au panier, et dans le tunnel celle des
   champs du formulaire, lue dans la variable du §7.4 pour qu'un seul
   endroit fasse foi. */
.wc-block-components-totals-coupon__form .wc-block-components-button {
	flex: none;
	block-size: var(--tunnel-champ-hauteur, 40px);
	min-block-size: 0;
	padding-block: 0;
	padding-inline: var(--space-m, 16px);
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border: 0;
	border-radius: var(--r-s, 4px);
	font-size: var(--t-overline, 11.5px);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wc-block-components-totals-coupon__form .wc-block-components-button:hover,
.wc-block-components-totals-coupon__form .wc-block-components-button:focus-visible {
	background: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

/* Ligne « Total » : la ponctuation forte de la maquette. */
.wc-block-components-totals-footer-item {
	border-block-start: 1px solid var(--line, #E0D5C4);
	padding-block-start: var(--space-m, 18px);
	margin-block-start: var(--space-m, 18px);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 22px);
	color: var(--ink, #2A2521);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h3, 28px);
	color: var(--ink, #2A2521);
}

/* « TVA incluse » — mention alignee a droite sous le total. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	inline-size: 100%;
	text-align: end;
	font-size: var(--t-overline, 11.5px);
}

/* ----------------------------------------------------------------
   6.7 Bouton « Commander » + moyens de paiement acceptes
   ----------------------------------------------------------------
   🔴 Deux classes obligatoires : le bouton porte « wp-element-button »
   (fond dore de theme.json). La maquette veut l'action principale du
   tunnel en ENCRE, comme .btn--sombre de composants.css (§5.5).
   ---------------------------------------------------------------- */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit .wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 10px);
	inline-size: 100%;
	min-block-size: 56px;
	margin-block-start: var(--space-l, 22px);
	padding-inline: var(--space-l, 20px);
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border: 1px solid var(--ink, #2A2521);
	border-radius: var(--r-s, 4px);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 13px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:focus-visible,
.wc-block-cart__submit .wc-block-cart__submit-button:hover,
.wc-block-cart__submit .wc-block-cart__submit-button:focus-visible {
	background: var(--or-deep, #876A3C);
	border-color: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

/* Chevron de la maquette — ornement pur (aucun texte en CSS, §1.2), en
   masque pour zero requete reseau (§19/§20). */
.wc-block-cart__submit-container .wc-block-cart__submit-button::after,
.wc-block-cart__submit .wc-block-cart__submit-button::after {
	content: "";
	flex: none;
	inline-size: 17px;
	block-size: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le conteneur du bouton vit desormais DANS la carte : il ne doit poser
   ni fond, ni cadre, ni marge laterale propre. */
.wc-block-cart .wc-block-components-sidebar .wc-block-cart__submit-container,
.wc-block-cart .wc-block-components-sidebar .wc-block-cart__submit {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-inline: 0;
}

.wc-block-cart__payment-options,
.wc-block-components-payment-method-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 8px);
	margin-block-start: var(--space-m, 14px);
}

/* ----------------------------------------------------------------
   6.8 Panier vide (bloc « empty-cart »)
   ---------------------------------------------------------------- */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	max-inline-size: 520px;
	margin-inline: auto;
	padding-block: var(--space-4xl, 70px) var(--space-3xl, 60px);
}

.panier-vide__sceau {
	inline-size: 78px;
	block-size: 78px;
	margin-inline: auto;
	margin-block-end: var(--space-l, 22px);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-pill, 999px);
	background-color: var(--bg, #FBF8F3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3B097' stroke-width='1.4'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

/* ----------------------------------------------------------------
   6.9 Lien « Continuer mes achats » (composition)
   ----------------------------------------------------------------
   C'est un core/button (son URL est LIEE a la source « idouceur/boutique »,
   §26 — jamais de slug en dur) rendu en LIEN texte, comme la maquette.
   On neutralise donc le fond/bordure du bouton core.
   ---------------------------------------------------------------- */
.panier-retour {
	margin-block-start: var(--space-l, 26px);
}

/* Deplace par idouceur-boutique.js sous la derniere ligne, DANS la
   colonne de gauche (les blocs autorises du panier n'admettent pas de
   lien a cet endroit). Une fois la-bas, il colle au filet du dessus. */
.wc-block-cart__main .panier-retour {
	margin-block: var(--space-l, 26px) 0;
}

.panier-retour .wp-block-button__link {
	font-weight: 400;
	padding: 0;
	min-block-size: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ink, #2A2521);
	font-size: var(--t-small, 13px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.panier-retour .wp-block-button__link::before {
	content: "\2039";
	margin-inline-end: var(--space-xs, 9px);
	color: inherit;
}

/* 🔴 Survol DORE, jamais de remplissage encre. La variation
   « is-style-outline » de composants.css (§13) remplit le bouton en
   encre au survol avec trois classes de specificite : il faut au moins
   autant pour la neutraliser ici (recette 2026-07-31). */
.panier-retour .wp-block-button.is-style-outline .wp-block-button__link:hover,
.panier-retour .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.panier-retour .wp-block-button__link:hover,
.panier-retour .wp-block-button__link:focus-visible {
	background: none;
	background-color: transparent;
	border-color: transparent;
	color: var(--or-deep, #876A3C);
	transform: none;
	box-shadow: none;
}

/* Panier vide : le lien de retour ferait doublon avec « Découvrir la
   boutique ». Amelioration progressive — sans :has(), il reste visible. */
.wp-block-woocommerce-cart:has( .panier-vide__titre ) ~ .panier-retour {
	display: none;
}

/* ----------------------------------------------------------------
   6.10 Repli mobile — la colonne resume passe sous les lignes
   ---------------------------------------------------------------- */
@media (max-width: 780px) {
	.wc-block-cart.wc-block-components-sidebar-layout {
		gap: var(--space-l, 24px);
	}

	/* 🔴 Correctif 2026-08-31 — le vide entre « Continuer mes achats » et
	   le recapitulatif. A cette largeur, WooCommerce passe le conteneur en
	   « flex-direction: column » : sa regle « .wc-block-cart
	   .wc-block-components-main { flex: 1 1 420px } » n'est alors plus une
	   largeur de colonne mais une HAUTEUR PLANCHER. Mesure sur la recette
	   (402 px) : colonne haute de 420 px pour 203 px de contenu, soit
	   217 px de vide avant le recapitulatif. La colonne reprend donc sa
	   hauteur de contenu ; seul le « gap » separe encore les deux blocs. */
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main {
		flex: 0 1 auto;
	}

	/* 🔴 Correctif 2026-08-31 — SPECIFICITE. WooCommerce pose sa propre
	   grille de ligne avec TROIS classes + un type :
		 .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row
		   { grid-template-columns: 80px 132px }
		 … .wc-block-cart-item__product { grid-column: 2 / 4; grid-row: 1 }
		 … .wc-block-cart-item__total   { grid-row: 1 }
	   (mesure CDP sur la recette, 402 px, le 2026-08-31 ; les memes regles
	   existent en doublon derriere « .is-mobile / .is-small / .is-medium »,
	   classes que WooCommerce pose en JavaScript selon la largeur mesuree).

	   Nos regles a deux classes (0,2,0) perdaient donc, et notre
	   « grid-column: 2 » sur le total le renvoyait dans la cellule DEJA
	   occupee par le produit : les deux cellules se superposaient a
	   l'identique (x=116, y=411 pour les deux) — d'ou la ligne « ecrasee »
	   signalee en recette, prix par-dessus la marque.

	   On reprend la main avec une classe de plus (0,4,1) et on PLACE les
	   trois cellules explicitement, comme le tiroir mini-panier de
	   l'en-tete (header.css §4bis) dont on reprend la silhouette :
	   visuel · (marque, nom, prix unitaire, quantite) · total a droite.

	   Perimetre inchange : ancrage sur « .wp-block-woocommerce-cart », le
	   tiroir garde sa disposition propre. */
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		column-gap: var(--space-m, 14px);
		align-items: start;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1 / 2;
		grid-row: 1;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
		grid-row: 1;
	}

	/* Total : haut de ligne, cale a droite — jamais de largeur plancher,
	   elle volerait au nom la place qui lui manque deja. */
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3 / 4;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		min-inline-size: 0;
		margin-block-start: 0;
		text-align: end;
	}

	.wp-block-woocommerce-cart .wc-block-cart-items__row td.wc-block-cart-item__image,
	.wp-block-woocommerce-cart .wc-block-cart-item__image img {
		inline-size: 72px;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__image img {
		block-size: 88px;
	}

	/* Echelle typographique du tiroir : a cette largeur, le 21 px de la
	   maquette grand ecran fait tenir deux mots par ligne. */
	.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name {
		font-size: var(--t-lead, 18px);
		line-height: 1.25;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
		font-size: var(--t-lead, 18px);
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
		margin-block-start: var(--space-s, 12px);
	}
}

/* ================================================================
   7. Commande — blocs WooCommerce « Checkout » (maquette « Commande »)
   ----------------------------------------------------------------
   Meme regle qu'au §6 : c'est le DOM des BLOCS qui est habille. La
   maquette empile trois cartes numerotees (Coordonnees · Livraison ·
   Paiement) et une colonne « Votre commande » collante.

   Les numeros sont produits par COMPTEUR CSS sur les etapes rendues
   par WooCommerce : le thème n'invente aucune etape, il numerote
   celles que WooCommerce affiche (elles varient selon la config :
   retrait, adresse de livraison, notes…).

   Composition associee : inc/patterns/commande-content.php.
   ================================================================ */

/* ----------------------------------------------------------------
   7.1 Mise en page deux colonnes
   ---------------------------------------------------------------- */
/* Selecteur compose — meme piege qu'au §6.1 (les deux classes sont sur
   le meme element). */
.wc-block-checkout.wc-block-components-sidebar-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2xl, 48px);
	padding: 0;
}

.wc-block-checkout .wc-block-components-main {
	flex: 1 1 460px;
	min-inline-size: 0;
	padding: 0;
	margin: 0;
	counter-reset: idouceur-etape-commande;
}

.wc-block-checkout .wc-block-components-sidebar {
	flex: 0 1 380px;
	padding: 0;
	margin: 0;
}

/* ----------------------------------------------------------------
   7.2 Etapes = cartes numerotees
   ---------------------------------------------------------------- */
.wc-block-checkout .wc-block-components-checkout-step {
	counter-increment: idouceur-etape-commande;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 28px);
	margin-block-end: var(--space-l, 24px);
}

.wc-block-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	gap: var(--space-s, 12px);
	margin-block: 0 var(--space-l, 20px);
}

.wc-block-checkout .wc-block-components-checkout-step__title {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 24px);
	color: var(--ink, #2A2521);
	margin: 0;
}

/* Pastille numerotee (maquette). */
.wc-block-checkout .wc-block-components-checkout-step__title::before {
	content: counter( idouceur-etape-commande );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	margin-inline-end: var(--space-s, 12px);
	border-radius: var(--r-pill, 999px);
	background: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 13px);
	font-weight: 500;
	vertical-align: middle;
}

/* Numerotation native de WooCommerce, si la version l'affiche : on ne
   veut pas de doublon avec la pastille ci-dessus. */
.wc-block-checkout .wc-block-components-checkout-step__number {
	display: none;
}

.wc-block-checkout .wc-block-components-checkout-step__description {
	font-size: var(--t-small, 13.5px);
	color: var(--ink-xsoft, #746F68);
	margin-block-end: var(--space-m, 16px);
}

.wc-block-checkout .wc-block-components-checkout-step__content {
	padding: 0;
}

/* ----------------------------------------------------------------
   7.3 Champs de saisie — libelle A L'EXTERIEUR, au-dessus du champ
   ----------------------------------------------------------------
   🔴 Deux constats de recette (2026-07-31), meme cause racine : les
   regles precedentes etaient ECRASEES par la feuille des blocs
   WooCommerce, plus specifique.

   1. Libelle. WooCommerce pose un libelle FLOTTANT, en position absolue
      DANS le champ (« .wc-block-components-text-input label { position:
      absolute } », plus « .is-active label { transform: scale(.82) } »).
      La maquette le veut hors du champ, au-dessus, en capitales
      discretes. On le remet donc dans le flux (« position: static ») et
      on ordonne la pile : dans le DOM le libelle SUIT l'input, d'ou
      « order: -1 » sur un conteneur passe en colonne.
   2. Bordure. WooCommerce la calcule en « color-mix(in srgb,
      currentColor 80%, transparent) » — donc en ENCRE, epaisse a l'oeil.
      La maquette demande le filet de charte « --line » (#E0D5C4).

   Pour passer devant SANS « !important », les selecteurs ci-dessous
   ancrent les DEUX classes portees par le meme <form> du tunnel
   (« wc-block-checkout__form » + « wc-block-components-form »), ce qui
   ajoute un cran de specificite a chaque regle. Ne pas les simplifier :
   c'est ce doublon qui fait gagner la charte.
   ---------------------------------------------------------------- */

/* Pile verticale : libelle, champ, message d'erreur. Le conteneur natif
   est en « line-height: 0 / white-space: nowrap » (necessaire au libelle
   flottant) : les deux sont annules. */
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input,
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input .wc-block-components-text-input__wrapper,
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	white-space: normal;
}

/* Libelle : capitales fines au-dessus du champ (maquette). */
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input label,
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__label {
	position: static;
	order: -1;
	transform: none;
	inline-size: 100%;
	max-inline-size: 100%;
	margin-block-end: var(--space-xs, 8px);
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 11px);
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
	cursor: pointer;
}

/* Hauteur unique des champs du tunnel. Declaree en VARIABLE parce qu'un
   autre element doit s'y aligner sans recopier le nombre : le bouton
   « Appliquer » du code promo (§6.6-bis), dont le champ voisin tombe sous
   ces memes regles. Une seule source, deux consommateurs. */
.wc-block-checkout__form.wc-block-components-form {
	--tunnel-champ-hauteur: 48px;
}

/* Champs : filet de charte, fond de charte, hauteur unique. Le selecteur
   d'attribut « input[type] » couvre les types que WooCommerce cible un a
   un (email, tel, text, number, password, url). */
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input.is-active input[type],
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout__form.wc-block-components-form .wc-block-components-textarea {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: var(--tunnel-champ-hauteur, 48px);
	min-block-size: 0;
	padding: 0 var(--space-m, 16px);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	background: var(--surface, #F7F3EC);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 14px);
	line-height: 1.4;
	color: var(--ink, #2A2521);
}

/* La zone de texte (note de commande) garde une hauteur libre. */
.wc-block-checkout__form.wc-block-components-form .wc-block-components-textarea {
	block-size: auto;
	padding-block: var(--space-s, 12px);
}

/* Focus : le filet passe en dore, sans epaissir (pas de saut de 1 a
   1.5px comme dans la feuille native). */
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input.is-active input[type]:focus,
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout__form.wc-block-components-form .wc-block-components-textarea:focus {
	border: 1px solid var(--or, #A8895E);
	padding: 0 var(--space-m, 16px);
	outline: 2px solid var(--or, #A8895E);
	outline-offset: 1px;
}

.wc-block-checkout__form.wc-block-components-form .wc-block-components-textarea:focus {
	padding-block: var(--space-s, 12px);
}

/* Le conteneur du <select> portait le fond blanc natif : il est desormais
   traversant, c'est le <select> qui porte le fond. */
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__container {
	background: none;
}

/* Chevron du <select> : il etait centre sur le conteneur, qui inclut
   maintenant le libelle. On le recale sur le champ (48px de haut). */
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__expand {
	top: auto;
	bottom: 24px;
	transform: translateY(50%);
	fill: var(--ink-soft, #5C534A);
}

.wc-block-components-checkbox__label {
	font-family: var(--ff-text, sans-serif);
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   7.4 Options de livraison — cartes a cocher (Boxtal / retrait)
   ---------------------------------------------------------------- */
/* 🔴 La gouttiere de GAUCHE n'est pas decorative : le bouton radio est en
   position ABSOLUE (« left: 16px », 20px de large) et c'est le padding
   interne qui lui reserve sa place. L'ancienne regle posait un padding
   uniforme de 20px : le libelle passait donc SOUS la pastille et se
   faisait rogner (« …rement bancaire » en recette du 2026-07-31). La
   reserve vaut donc 48px = 16 (marge) + 20 (pastille) + 12 (filet). */
.wc-block-components-radio-control__option {
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--space-xs, 8px);
	background: var(--surface, #F7F3EC);
	padding: var(--space-m, 16px);
	padding-inline-start: var(--space-2xl, 48px);
	margin-block-end: var(--space-s, 12px);
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Pastille : filet dore, pastille pleine doree une fois cochee (le natif
   la remplit en noir pur). */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
	inset-inline-start: var(--space-m, 16px);
	background: var(--bg, #FBF8F3);
	border-color: var(--or-soft, #C3B097);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--or-deep, #876A3C);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--or-deep, #876A3C);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
	outline: 2px solid var(--or, #A8895E);
	outline-offset: 2px;
}

.wc-block-components-radio-control__option:hover {
	border-color: var(--or-soft, #C3B097);
}

.wc-block-components-radio-control__option--checked {
	border-color: var(--or, #A8895E);
	background: var(--surface-2, #EDE5D8);
	color: var(--ink, #2A2521);
}

.wc-block-components-radio-control__label {
	font-size: var(--t-base, 15px);
	color: var(--ink, #2A2521);
}

.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

.wc-block-components-radio-control__secondary-label {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 14px);
	color: var(--ink, #2A2521);
}

/* ----------------------------------------------------------------
   7.5 Paiement
   ---------------------------------------------------------------- */
/* 🔴 Le paiement n'a PAS la meme structure que la livraison, d'ou l'aspect
   « natif » persistant en recette du 2026-07-31 malgre l'habillage du §7.4.

   Livraison  : une carte = un <label class="…radio-control__option">.
   Paiement   : WooCommerce insere un ACCORDEON. La carte n'est plus le
                label mais son enveloppe « …radio-control-accordion-option »,
                qui contient le label PLUS le texte deplie. C'est elle qui
                doit porter le cadre — et le natif la cerne d'un
                « inset 0 0 0 1.5px currentColor » (encre), tout en dessinant
                en plus un contour de GROUPE et des filets de separation en
                « ::after ». Trois cadres pour une carte : d'ou le rendu.

   On efface donc les cadres de groupe, on remonte le cadre de charte sur
   l'enveloppe, et on rend le label transparent. Resultat : des cartes
   autonomes, identiques a celles de la livraison. */

/* 1. Cadres du natif : contour de groupe et filets de separation. */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked {
	padding: 0;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
	content: none;
}

/* 2. L'enveloppe devient la carte (memes valeurs qu'au §7.4). */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--space-xs, 8px);
	background: var(--surface, #F7F3EC);
	margin-block-end: var(--space-s, 12px);
	overflow: hidden;
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--or-soft, #C3B097);
}

/* 3. Le label ne porte plus rien : la carte est au-dessus de lui. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	border-radius: 0;
	background: none;
	margin-block-end: 0;
}

/* 4. Carte cochee : liseré dore et fond ambre, comme la livraison. Le
   « box-shadow » natif est neutralise, le cadre suffit. */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: none;
	border-color: var(--or, #A8895E);
	border-radius: var(--space-xs, 8px);
	background: var(--surface-2, #EDE5D8);
}

/* 5. Texte deplie : dans la carte, aligne sur le libelle (pas sur le bord,
   sinon il passe sous la pastille) et sans fond propre. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
	padding: 0 var(--space-m, 16px) var(--space-m, 16px) var(--space-2xl, 48px);
	background: none;
	color: var(--ink-soft, #5C534A);
}

/* Exception a la demi-echelle mobile (fin de « tokens.css »).
   Ces deux gouttieres de GAUCHE ne sont pas du rythme : elles reservent
   la place de la pastille radio, posee en absolu (16 px de marge + 20 px
   de pastille + 12 px de filet = 48 px). A 24 px, le libelle et le texte
   deplie repasseraient SOUS la pastille — le defaut de la recette du
   2026-07-31. Valeur pleine sur tous les ecrans. */
@media (max-width: 781px) {

	.wc-block-components-radio-control__option {
		padding-inline-start: var(--espace-plein-2xl, 48px);
	}

	.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
		padding-inline-start: var(--espace-plein-2xl, 48px);
	}
}

.wc-block-components-checkout-step__container .wc-block-components-notice-banner {
	margin-block: var(--space-s, 12px);
}

/* ----------------------------------------------------------------
   7.6 Bouton « Payer » (+ retour au panier)
   ---------------------------------------------------------------- */
.wc-block-checkout__actions {
	background: none;
	border: 0;
	padding: 0;
	margin-block-start: var(--space-l, 24px);
}

.wc-block-checkout__actions_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m, 16px);
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 10px);
	min-block-size: 56px;
	padding-inline: var(--space-2xl, 40px);
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border: 1px solid var(--ink, #2A2521);
	border-radius: var(--r-s, 4px);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-small, 13px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:focus-visible {
	background: var(--or-deep, #876A3C);
	border-color: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
	font-size: var(--t-small, 13px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   7.7 Colonne « Votre commande »
   ---------------------------------------------------------------- */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 28px) var(--space-l, 26px);
}

@media (min-width: 1000px) {
	.wc-block-checkout__sidebar {
		position: sticky;
		top: var(--entete-hauteur, 96px);
	}
}

/* Filet d'air en HAUT des panneaux du resume (articles, code promo,
   sous-total, total). WooCommerce ne pose que les retraits lateraux, dans
   une requete de conteneur : on la reprend a l'identique — meme condition,
   memes selecteurs, plus la classe du volet du tunnel pour primer — et on
   n'ajoute que le retrait haut.
   🔴 Valeur HORS ECHELLE assumee (15px), demandee en recette du
   2026-07-31 ; le pas voisin est 16px. */
@container (min-width: 700px) {
	.wc-block-checkout__sidebar.wc-block-components-sidebar .slot-wrapper .wc-block-components-panel,
	.wc-block-checkout__sidebar.wc-block-components-sidebar .wc-block-components-panel,
	.wc-block-checkout__sidebar.wc-block-components-sidebar .wc-block-components-totals-coupon,
	.wc-block-checkout__sidebar.wc-block-components-sidebar .wc-block-components-totals-item {
		padding-top: 15px;
	}
}

.wc-block-components-checkout-order-summary__title,
.wc-block-components-order-summary .wc-block-components-panel__button {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 24px);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink, #2A2521);
	padding-inline: 0;
}

.wc-block-components-order-summary-item {
	padding-block: var(--space-m, 16px);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.wc-block-components-order-summary-item__image img {
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--space-xs, 6px);
}

/* Pastille de quantite, en haut a droite du visuel.
   🔴 Recette 2026-07-31 : elle apparaissait BLANC SUR BLANC. Deux causes,
   toutes deux dans la feuille native :
     - le fond vaut « currentColor », hérité du texte de la ligne ;
     - le chiffre est peint en « var(--wp--preset--color--background) »,
       variable qu'aucune palette du thème ne definit (nos couleurs sont
       « bg », « surface »…) → repli #fff.
   Le selecteur natif porte deux classes : on le double a l'identique pour
   passer devant, et on peint le CHIFFRE (le <span> interne), pas
   seulement la pastille. Dore + creme, comme la maquette. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: var(--or-deep, #876A3C);
	border-color: var(--or-deep, #876A3C);
	color: var(--or-deep, #876A3C);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 11px);
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--bg, #FBF8F3);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--t-base, 16px);
}

.wc-block-components-order-summary-item__total-price {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-base, 17px);
	color: var(--ink, #2A2521);
}

/* ----------------------------------------------------------------
   7.8 Repli mobile
   ---------------------------------------------------------------- */

/* 🔴 Correctif 2026-08-31 — l'ENORME vide entre le resume de la commande
   et « Coordonnees » (recette 402 px). Meme piege qu'au panier (§6.10) :
   WooCommerce bascule sa mise en page sur une REQUETE DE CONTENEUR, pas
   sur la largeur de fenetre —
	 @container (max-width: 699px) { .wc-block-components-sidebar-layout
	   { flex-direction: column } .wc-block-checkout__sidebar { order: 0 }
	   .wc-block-checkout__main { order: 1 } }
   (feuille « checkout.css » de WooCommerce 10.9.3, verifiee le
   2026-08-31). En COLONNE, nos bases de colonne du §7.1 — « flex: 0 1
   380px » pour le resume, « flex: 1 1 460px » pour le formulaire — ne
   sont plus des LARGEURS mais des HAUTEURS PLANCHER : le resume replie
   n'a qu'environ 130 px de contenu et se voit imposer 380 px de haut,
   d'ou ~250 px de vide sous la carte. Deplie, il depasse 380 px et le
   vide disparait — c'est pour cela que l'ecart changeait avec l'etat du
   panneau.

   Les deux colonnes reprennent donc leur hauteur de contenu : seul le
   « gap » du §7.1 les separe encore, plie comme deplie.

   🔒 On reprend la requete de conteneur de WooCommerce a l'identique
   (meme condition, meme conteneur implicite) plutot qu'une requete de
   media : le basculement se produit vers 778 px de FENETRE, une valeur
   qui depend des gouttieres de page — la deduire serait un pari. */
@container (max-width: 699px) {
	.wc-block-checkout .wc-block-components-sidebar,
	.wc-block-checkout .wc-block-components-main {
		flex-basis: auto;
	}
}

@media (max-width: 780px) {
	.wc-block-checkout .wc-block-components-checkout-step {
		padding: var(--space-l, 22px);
	}

	.wc-block-checkout__actions_row {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
		inline-size: 100%;
	}
}

/* ================================================================
   7bis. Remerciement — « order-received » (templates/order-confirmation)
   ----------------------------------------------------------------
   Maquette « Commande merci ». Le template empile des blocs NATIFS
   « woocommerce/order-confirmation-* » (donnee legale maintenue par
   WooCommerce) : on ne fait que les HABILLER en cartes de charte, plus
   les quelques classes de mise en page portees par le template
   (.etapes-tunnel, .merci__*). Aucune donnee inventee : la livraison
   estimee, la timeline de suivi et la facture PDF de la maquette n'ont
   pas de source WooCommerce → ecartees (arbitrage 2026-07-30).
   ================================================================ */

/* ----------------------------------------------------------------
   Fil d'etapes du tunnel — part « etapes-tunnel » (Panier · Commande ·
   Confirmation)
   ----------------------------------------------------------------
   Le part est UNIQUE et neutre : il ne declare que le NOM de chaque
   etape, jamais son etat. L'etat (franchie / courante / a venir) est
   deduit du contexte WooCommerce via les classes de <body> — d'ou un
   seul part juste sur les trois pages du tunnel, sans PHP ni variante :
     .woocommerce-cart            → Panier courant
     .woocommerce-checkout        → Panier franchi, Commande courante
     .woocommerce-order-received  → les deux franchies, Confirmation
   (la page « order-received » porte AUSSI la classe checkout, d'ou le
   :not() dans le second cas).
   Les pastilles sont generees par compteur CSS : rang par defaut,
   « ✓ » sur une etape franchie. Zero markup superflu.
   ---------------------------------------------------------------- */
.etapes-tunnel {
	background: var(--bg, #FBF8F3);
	border-block-end: 1px solid var(--line, #E0D5C4);
	padding-block: var(--space-m, 16px);
}

/* Specificite a deux classes sur les regles de `gap` : le conteneur de
   layout genere par WordPress porte `gap: 0` (blockGap global a 0, §5.4)
   avec une specificite d'une classe — il faut passer devant. */
.etapes-tunnel .etapes-tunnel__piste {
	counter-reset: etape-tunnel;
	gap: var(--space-l, 20px);
	font-size: var(--t-small, 12.5px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.etapes-tunnel__etape {
	counter-increment: etape-tunnel;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 9px);
	margin: 0;
	color: var(--ink-xsoft, #746F68);
}

.etapes-tunnel__etape::before {
	content: counter(etape-tunnel);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	border: 1px solid var(--or-soft, #C3B097);
	border-radius: var(--r-pill, 999px);
	font-size: var(--t-overline, 11px);
	letter-spacing: 0;
}

/* Trait de liaison entre deux etapes. */
.etapes-tunnel__etape:not(:last-child)::after {
	content: "";
	inline-size: 34px;
	border-block-start: 1px dashed var(--or-soft, #C3B097);
	margin-inline-start: var(--space-s, 12px);
}

/* --- Etape FRANCHIE : pastille doree pleine, coche. --- */
.woocommerce-checkout .etapes-tunnel__etape--panier,
.woocommerce-order-received .etapes-tunnel__etape--commande {
	color: var(--or-deep, #876A3C);
}

.woocommerce-checkout .etapes-tunnel__etape--panier::before,
.woocommerce-order-received .etapes-tunnel__etape--commande::before {
	content: "\2713";
	background: var(--or-deep, #876A3C);
	border-color: var(--or-deep, #876A3C);
	color: var(--bg, #FBF8F3);
}

/* --- Etape COURANTE : pastille encre pleine, rang affiche. --- */
.woocommerce-cart .etapes-tunnel__etape--panier,
.woocommerce-checkout:not(.woocommerce-order-received) .etapes-tunnel__etape--commande,
.woocommerce-order-received .etapes-tunnel__etape--confirmation {
	color: var(--ink, #2A2521);
}

.woocommerce-cart .etapes-tunnel__etape--panier::before,
.woocommerce-checkout:not(.woocommerce-order-received) .etapes-tunnel__etape--commande::before,
.woocommerce-order-received .etapes-tunnel__etape--confirmation::before {
	background: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
}

/* ----------------------------------------------------------------
   Heros de remerciement : sceau, overline, titre, statut natif
   ---------------------------------------------------------------- */
.merci__entete {
	text-align: center;
	padding-block-end: var(--space-2xl, 44px);
}

/* Sceau decoratif : disque vert pale + coche, en fond CSS (aucun
   appel tiers, §19). Le groupe est vide donc invisible aux lecteurs
   d'ecran. */
.merci__sceau {
	inline-size: 96px;
	block-size: 96px;
	margin-inline: auto;
	margin-block-end: var(--space-l, 28px);
	border-radius: var(--r-pill, 999px);
	background-color: var(--vert-pale, #E7F2EA);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Cpath d='M14 27l8 8 16-18' stroke='%231F8A5B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px;
}

.merci__eyebrow {
	margin-block-end: var(--space-m, 16px);
}

.merci__titre {
	margin: 0;
}

/* Message de statut natif (« votre commande a ete recue », « en attente
   de paiement »…) : sert de chapo sous le titre. */
.wp-block-woocommerce-order-confirmation-status {
	margin-block-start: var(--space-l, 20px);
	color: var(--ink-soft, #5C534A);
	font-size: var(--t-lead, 16.5px);
}

.wp-block-woocommerce-order-confirmation-status p {
	margin: 0;
	margin-inline: auto;
	max-inline-size: 52ch;
}

/* ----------------------------------------------------------------
   Resume de commande (n° · date · total · e-mail · paiement)
   Bloc natif « order-confirmation-summary » → pilules de charte.
   ---------------------------------------------------------------- */
.wp-block-woocommerce-order-confirmation-summary {
	margin-block-start: var(--space-l, 24px);
}

.wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-s, 12px);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.wc-block-order-confirmation-summary-list-item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-xs, 8px);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-pill, 999px);
	padding: var(--space-xs, 10px) var(--space-l, 20px);
	margin: 0;
}

.wc-block-order-confirmation-summary-list-item__key {
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-xsoft, #746F68);
}

.wc-block-order-confirmation-summary-list-item__value {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 17px);
	color: var(--ink, #2A2521);
	letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
   Detail : les wrappers natifs deviennent des cartes de charte
   (memes fond/bordure/rayon que .carte, §5.5 — aucune reinvention).
   ---------------------------------------------------------------- */
.merci__detail {
	padding-block-start: var(--space-s, 10px);
}

.merci__detail .merci__grille {
	gap: var(--space-l, 20px);
	align-items: flex-start;
}

.merci__grille .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 20px);
}

.wp-block-woocommerce-order-confirmation-totals-wrapper,
.wp-block-woocommerce-order-confirmation-downloads-wrapper,
.wp-block-woocommerce-order-confirmation-shipping-wrapper,
.wp-block-woocommerce-order-confirmation-billing-wrapper,
.wp-block-woocommerce-order-confirmation-additional-information:not(:empty) {
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-l, 26px) var(--space-l, 24px);
}

.wp-block-woocommerce-order-confirmation-additional-information:not(:empty) {
	margin-block-start: var(--space-l, 20px);
}

.merci__detail .wp-block-woocommerce-order-confirmation-totals-wrapper .wp-block-heading,
.merci__detail .wp-block-woocommerce-order-confirmation-downloads-wrapper .wp-block-heading,
.merci__detail .wp-block-woocommerce-order-confirmation-shipping-wrapper .wp-block-heading,
.merci__detail .wp-block-woocommerce-order-confirmation-billing-wrapper .wp-block-heading {
	font-size: var(--t-h4, 22px);
	font-weight: 600;
	margin-block: 0 var(--space-m, 18px);
}

/* Tableau des lignes de commande → lignes de carte, sans chrome de table. */
.wc-block-order-confirmation-totals__table {
	inline-size: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--t-small, 14px);
}

.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
	border: 0;
	padding-block: var(--space-s, 12px);
	padding-inline: 0;
	text-align: start;
	vertical-align: top;
}

.wc-block-order-confirmation-totals__table thead th {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-xsoft, #746F68);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.wc-block-order-confirmation-totals__table tbody tr + tr td {
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.wc-block-order-confirmation-totals__table tfoot th,
.wc-block-order-confirmation-totals__table tfoot td {
	border-block-start: 1px solid var(--line, #E0D5C4);
	color: var(--ink-soft, #5C534A);
}

/* Derniere ligne du pied = total paye → typo display, comme la maquette. */
.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 21px);
	color: var(--ink, #2A2521);
}

/* Colonnes de montants alignees a droite. */
.wc-block-order-confirmation-totals__table th:last-child,
.wc-block-order-confirmation-totals__table td:last-child {
	text-align: end;
	white-space: nowrap;
}

/* Adresses : bloc d'adresse aere, sans style de table. */
.wp-block-woocommerce-order-confirmation-shipping-address address,
.wp-block-woocommerce-order-confirmation-billing-address address {
	font-style: normal;
	font-size: var(--t-small, 14.5px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   Actions & ligne d'aide
   ---------------------------------------------------------------- */
.merci__detail .merci__actions {
	gap: var(--space-m, 14px);
	margin-block-start: var(--space-2xl, 34px);
}

.merci__detail .merci__aide {
	gap: var(--space-xs, 8px);
	margin-block-start: var(--space-xl, 30px);
	font-size: var(--t-small, 14.5px);
	color: var(--ink-soft, #5C534A);
}

.merci__aide p {
	margin: 0;
}

.merci__aide-lien a,
.merci__aide-valeur {
	color: var(--or-deep, #876A3C);
	border-block-end: 1px solid rgba(142, 112, 63, 0.4);
	padding-block-end: 2px;
	text-decoration: none;
}

/* ----------------------------------------------------------------
   Responsive — la grille passe en une colonne sous 1160px (maquette)
   ---------------------------------------------------------------- */
@media (max-width: 1159px) {
	.merci__detail .merci__grille {
		flex-wrap: wrap;
	}

	.merci__grille .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 767px) {
	.etapes-tunnel .etapes-tunnel__piste {
		gap: var(--space-s, 10px);
	}

	.etapes-tunnel__etape:not(:last-child)::after {
		inline-size: 16px;
		margin-inline-start: var(--space-xs, 8px);
	}
}

/* ================================================================
   8. Compte client (« my-account ») — maquette « Compte client »
   ----------------------------------------------------------------
   La page est servie par le modèle « compte-client.html » : bannière
   sombre (§3.1) au-dessus du corps de compte rendu par WooCommerce.
   Ce fichier ne fait que RESKINNER le markup natif de WooCommerce —
   aucun libellé, aucun ordre d'entrée n'est touché côté PHP, pour que
   les entrées ajoutées plus tard par les extensions (liste d'envies,
   fidélité, rendez-vous) prennent la charte automatiquement.
   ================================================================ */

/* ----------------------------------------------------------------
   8.1 Mise en page — navigation latérale + panneau
   ----------------------------------------------------------------
   La maquette pose une grille « 258px | reste » à partir de 1160px,
   et une colonne unique en dessous (la nav devient une barre défilante
   horizontale). On abandonne les flottants de l'ancienne passe.

   🔒 « :has() » cible la seule variante CONNECTÉE : hors connexion,
   WooCommerce rend un formulaire de connexion sans navigation — la
   grille à deux colonnes n'aurait aucun sens et le formulaire reprend
   simplement le flux normal.
   ---------------------------------------------------------------- */
.compte-corps {
	padding-block: var(--space-3xl, 54px) var(--space-5xl, 90px);
}

.woocommerce-account.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-l, 24px);
	align-items: start;
}

/* Les notices (mot de passe modifié, adresse enregistrée…) barrent la grille. */
.woocommerce-account.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

@media (min-width: 1160px) {
	.woocommerce-account.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 258px minmax(0, 1fr);
		gap: var(--space-xl, 36px);
	}

	/* 🔒 Placement EXPLICITE (ligne + colonne), jamais l'auto-placement.
	   Recette du 2026-07-31 : un frère injecté dans « .woocommerce » (bandeau
	   d'extension, conteneur vide) consommait la première cellule — la
	   navigation basculait en colonne 2 et le panneau retombait en dessous,
	   à gauche. En clouant chaque zone à sa cellule, aucun frère présent ou
	   futur ne peut décaler la mise en page ; les intrus partent en lignes
	   implicites, sous la grille. */
	.woocommerce-account.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-row: 1;
	}

	.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ----------------------------------------------------------------
   8.2 Navigation latérale — carte, pastille active, icônes
   ----------------------------------------------------------------
   🔒 Spécificité : WooCommerce cible ses entrées en « .woocommerce-account
   .woocommerce-MyAccount-navigation ul li » (trois classes). Écrites à deux
   classes, nos règles perdaient — d'où, en recette du 2026-07-31, l'interligne
   natif conservé et les pastilles débordant de la carte. On reprend l'idiome
   du fichier : classe racine DOUBLÉE, et le même chemin « ul li » que WC.

   🔒 « box-sizing » : ces éléments ne sont pas des blocs Gutenberg, ils
   n'héritent donc pas du « border-box » que WordPress pose sur les blocs.
   Sans lui, le remplissage de l'entrée s'ajoute à sa largeur et déborde.
   ---------------------------------------------------------------- */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	box-sizing: border-box;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-s, 10px);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: var(--space-xs, 4px);
	overflow-x: auto;
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
	flex: none;
	list-style: none;
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: var(--space-s, 12px);
	padding-block: var(--space-s, 12px);
	padding-inline: var(--space-m, 14px);
	border-radius: var(--r-m, 10px);
	color: var(--ink-soft, #5C534A);
	font-size: var(--t-small, 14px);
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s var(--ease, ease), color 0.3s var(--ease, ease);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--surface-2, #EDE5D8);
	color: var(--ink, #2A2521);
}

/* Entrée courante : pastille encre pleine (maquette). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
}

@media (min-width: 1160px) {
	.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation {
		position: sticky;
		inset-block-start: 96px;
	}

	.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow-x: visible;
	}
}

/* Déconnexion : entrée en retrait, détachée par un filet (maquette). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--ink-xsoft, #746F68);
}

/* Le retrait ne doit pas priver l'entrée de son retour au survol : la règle
   ci-dessus prime sur le survol commun (une classe de plus), on le rejoue. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
	background: var(--surface-2, #EDE5D8);
	color: var(--ink, #2A2521);
}

@media (min-width: 1160px) {
	.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-block-start: var(--space-xs, 6px);
		padding-block-start: var(--space-xs, 6px);
		border-block-start: 1px solid var(--line, #E0D5C4);
	}
}

/* ----------------------------------------------------------------
   8.2-bis Icônes des entrées — masques SVG tracés en ligne
   ----------------------------------------------------------------
   Zéro requête réseau, zéro police d'icônes (§19, §20). Le masque prend
   « currentColor » : l'icône suit donc la couleur de l'entrée (repos,
   survol, pastille active) sans règle supplémentaire.

   🔒 Ouvert aux extensions : l'icône par défaut est portée par TOUTES
   les entrées ; chaque endpoint connu ne fait que la surcharger. Une
   entrée ajoutée demain (liste d'envies, fidélité…) reçoit donc l'icône
   neutre au lieu de n'en avoir aucune — et il suffira d'une ligne ici
   pour lui en donner une propre.
   ---------------------------------------------------------------- */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Ccircle%20cx='12'%20cy='12'%20r='7.5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.2'%20fill='black'%20stroke='none'/%3E%3C/svg%3E");
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
	content: "";
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	background-color: currentColor;
	-webkit-mask: var(--compte-icone) center / contain no-repeat;
	mask: var(--compte-icone) center / contain no-repeat;
}

/* Tableau de bord — quatre pavés. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3C/svg%3E");
}

/* Commandes — sac (même dessin que l'icône panier de l'en-tête). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Cpath%20d='M6%207h12l-1%2013H7L6%207z'/%3E%3Cpath%20d='M9%207a3%203%200%200%201%206%200'/%3E%3C/svg%3E");
}

/* Téléchargements — flèche descendante. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Cpath%20d='M12%204v11'/%3E%3Cpath%20d='M7%2012l5%205%205-5'/%3E%3Cpath%20d='M5%2020h14'/%3E%3C/svg%3E");
}

/* Adresses — repère de carte. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Cpath%20d='M12%2021s-7-6-7-11a7%207%200%200%201%2014%200c0%205-7%2011-7%2011z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.5'/%3E%3C/svg%3E");
}

/* Détails du compte — silhouette. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2021c0-4%204-6%208-6s8%202%208%206'/%3E%3C/svg%3E");
}

/* Liste de souhaits — cœur. L'endpoint appartient à l'extension (TI
   WooCommerce Wishlist) et son slug est modifiable en réglages : on cible
   donc la classe PAR MOTIF (« *wishlist* ») plutôt qu'un nom figé, pour
   que l'icône suive quel que soit le slug choisi en admin. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li[class*="wishlist"] {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%206.6a5%205%200%200%200-7.1%200L12%208.3l-1.7-1.7a5%205%200%201%200-7.1%207.1L12%2021l8.8-8.3a5%205%200%200%200%200-6.1z'/%3E%3C/svg%3E");
}

/* Déconnexion — sortie. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	--compte-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%3E%3Cpath%20d='M15%204h3a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-3'/%3E%3Cpath%20d='M10%2017l-5-5%205-5'/%3E%3Cpath%20d='M5%2012h11'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------
   8.3 Panneau de contenu
   ---------------------------------------------------------------- */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-inline-size: 0;
	font-size: var(--t-small, 15px);
}

/* ----------------------------------------------------------------
   8.4 Rangée de commande — tableau de bord ET « Mes commandes »
   ----------------------------------------------------------------
   Composant PARTAGÉ par les deux gabarits surchargés
   (« myaccount/dashboard.php » et « myaccount/orders.php ») : une seule
   définition de la rangée pour les deux écrans (§5.5). Consomme .carte,
   .carte__titre et le système .btn ; seule la rangée est spécifique.
   ---------------------------------------------------------------- */
.compte-tableau {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 24px);
}

.compte-commandes {
	padding: var(--space-l, 24px);
}

.compte-commandes__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-s, 14px);
	margin-block-end: var(--space-m, 16px);
}

.compte-commandes__vide {
	margin-block: 0 var(--space-m, 16px);
	color: var(--ink-soft, #5C534A);
}

/* La carte est un conteneur flex : le bouton d'état vide ne s'étire pas
   (sélecteur d'enfant direct — les boutons « Détails » des rangées, eux,
   restent centrés dans leur propre rangée). */
.compte-commandes > .btn {
	align-self: flex-start;
}

.compte-commandes__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.compte-commande {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-s, 14px);
	padding-block: var(--space-m, 16px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.compte-commande:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.compte-commande:last-child {
	padding-block-end: 0;
}

.compte-commande__ref {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-lead, 17px);
	color: var(--ink, #2A2521);
}

.compte-commande__meta {
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

.compte-commande__total {
	margin-inline-start: auto;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-lead, 19px);
	color: var(--ink, #2A2521);
}

.compte-commande__action {
	flex: none;
}

/* Sous 640px, la rangée se lit en colonne : le total reprend le flux. */
@media (max-width: 639px) {
	.compte-commande__total {
		margin-inline-start: 0;
	}
}

/* ----------------------------------------------------------------
   8.5 Étiquettes de statut de commande → pastilles charte
   ----------------------------------------------------------------
   Une seule définition pour le tableau « Mes commandes », le suivi de
   commande et le tableau de bord (§5.5) ; seules les teintes varient
   selon l'état réel de la commande.
   ---------------------------------------------------------------- */
.woocommerce-orders-table__cell-order-status,
.woocommerce mark.order-status,
.compte-commande__statut {
	background: var(--surface-2, #EDE5D8);
	color: var(--or-deep, #876A3C);
	border-radius: var(--r-pill, 999px);
	padding: 0.25em 0.8em;
	font-size: var(--t-overline, 12px);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Terminée : vert de confirmation (maquette). */
.compte-commande__statut--completed {
	background: var(--vert-pale, #E7F2EA);
	color: var(--vert, #1C7B51);
}

/* Annulée / remboursée / échouée : en retrait, jamais alarmiste. */
.compte-commande__statut--cancelled,
.compte-commande__statut--refunded,
.compte-commande__statut--failed {
	color: var(--ink-xsoft, #746F68);
}

/* Actions d'une rangée (voir · payer · annuler, + celles des extensions). */
.compte-commande__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 8px);
	flex: none;
}

/* Pagination des commandes — même grammaire que les rangées. */
.compte-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-m, 16px);
	margin-block-start: var(--space-l, 24px);
	padding-block-start: var(--space-m, 16px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.compte-pagination__etat {
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

/* ================================================================
   8.6 Ossature commune de TOUS les écrans du compte
   ----------------------------------------------------------------
   Uniformité de l'espace client (2026-07-31) : « Tableau de bord » et
   « Mes commandes » partagent le composant de rangée (8.4) ; les autres
   endpoints — détail de commande, téléchargements, adresses, détails du
   compte, connexion — sont rendus par WooCommerce en tableaux et
   formulaires classiques. On les aligne ici sur la même grammaire :
   carte crème, filet beige, libellés en capitales, boutons du système.

   🔒 Classe racine doublée partout : mêmes raisons qu'en 8.2 (WooCommerce
   cible les mêmes éléments à spécificité égale, ordre de chargement non
   garanti). Ne pas simplifier.
   ================================================================ */

/* Titres internes du panneau. Les h2/h3 de theme.json sont calibrés pour
   le corps éditorial (30→44 px) : dans un panneau de compte, on redescend
   d'un cran, en réutilisant l'échelle typo — aucune valeur ad hoc (§5.5).

   🔒 « :not(.carte__titre) » : les titres DE CARTE ont déjà leur taille
   dans le composant (composants.css). Sans cette exclusion, la règle de
   panneau les écrasait — les cartes « Dernières commandes » et « Mes
   commandes » repassaient à la taille supérieure. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content h2:not(.carte__titre) {
	font-size: var(--t-h3, 24px);
	margin-block: 0 var(--space-m, 16px);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: var(--t-h4, 20px);
	margin-block: 0 var(--space-s, 12px);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--ink-soft, #5C534A);
}

/* Le panneau porte déjà ses propres cartes : on annule la marge basse du
   dernier élément pour ne pas creuser le bas de colonne. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content > *:last-child {
	margin-block-end: 0;
}

/* Phrase d'introduction d'un écran (ex. « Les adresses suivantes… »). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content > p {
	margin-block: 0 var(--space-l, 24px);
}

/* ----------------------------------------------------------------
   8.6-bis Panneau en carte — formulaires du compte
   ----------------------------------------------------------------
   Demande client du 2026-07-31 : présenter les formulaires en carte,
   comme les panneaux de la page de confirmation de commande. Deux cas :

   - « Modifier l'adresse » : le <form> est enfant direct du panneau et
     porte déjà son propre titre (h3 natif) → il DEVIENT la carte.
   - « Détails du compte » : le formulaire est enveloppé côté serveur dans
     une section titrée (inc/woocommerce.php, hooks natifs
     « woocommerce_before/after_edit_account_form ») — le <form> n'est
     alors plus un enfant direct, et c'est la section qui porte la carte.
     D'où le sélecteur « > form » : aucun risque de carte dans une carte.
   ---------------------------------------------------------------- */
/* Le formulaire d'adresse ne peut pas porter la classe .carte (markup
   WooCommerce) : on lui pose le même habillage, aux mêmes tokens. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content > form {
	box-sizing: border-box;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 32px);
}

/* La section « Détails du compte », elle, EST une .carte (posée côté
   serveur) : elle n'a besoin que de son rembourrage. */
.compte-panneau {
	padding: var(--space-xl, 32px);
}

/* Le premier titre de la carte ne creuse pas le haut. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content > form > h3:first-child {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------
   8.7 Tableaux du compte — téléchargements & détail de commande
   ----------------------------------------------------------------
   « border-collapse: separate » (et non « collapse ») : c'est la seule
   façon de garder le rayon de la carte sur un tableau bordé.
   ---------------------------------------------------------------- */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	inline-size: 100%;
	margin: 0 0 var(--space-l, 24px);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bg, #FBF8F3);
	overflow: hidden;
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: var(--space-s, 12px) var(--space-m, 16px);
	border: 0;
	border-block-end: 1px solid var(--line, #E0D5C4);
	text-align: start;
	vertical-align: middle;
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 11px);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	font-size: var(--t-small, 14px);
	color: var(--ink, #2A2521);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child th,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-block-end: 0;
}

/* Pied de tableau (totaux du détail de commande) : fond accentué. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
	background: var(--surface-2, #EDE5D8);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td {
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-lead, 17px);
}

/* ----------------------------------------------------------------
   8.8 Adresses — la liste et les colonnes du détail de commande
   ----------------------------------------------------------------
   WooCommerce fait flotter ces colonnes à 48 % : on repasse en grille.
   ---------------------------------------------------------------- */
/* 🔒 Flex et NON grille (recette du 2026-07-31) : les deux adresses
   sortaient en diagonale — un enfant vide en tête du conteneur (injecté
   par une extension) consommait la première cellule et décalait tout
   l'auto-placement, exactement comme pour la grille du compte en 8.1.
   En flex, seules les cartes portent une base de largeur : un intrus sans
   contenu occupe zéro et ne peut plus rien décaler. Pas de placement à
   clouer, donc rien à maintenir si WooCommerce change son markup. */
.woocommerce-account.woocommerce-account .woocommerce-Addresses,
.woocommerce-account.woocommerce-account .woocommerce-columns--addresses {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-m, 16px);
	margin: 0;
}

.woocommerce-account.woocommerce-account .woocommerce-Address,
.woocommerce-account.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
	/* Deux cartes par rangée dès que la place existe, une seule en dessous. */
	flex: 1 1 280px;
	min-inline-size: 0;
	float: none;
	width: auto;
	box-sizing: border-box;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-l, 24px);
}

.woocommerce-account.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s, 12px);
	margin-block-end: var(--space-s, 12px);
}

.woocommerce-account.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account.woocommerce-account .woocommerce-columns--addresses .woocommerce-column__title {
	font-size: var(--t-h4, 19px);
	margin-block: 0;
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content address {
	font-style: normal;
	font-size: var(--t-small, 14px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   8.9 Formulaires du compte — détails, adresse, connexion
   ----------------------------------------------------------------
   Maquette : libellé en capitales AU-DESSUS du champ, champs pleine
   largeur, deux colonnes à partir de 768 px. Les champs eux-mêmes sont
   déjà à la charte (§2) — on ne redéfinit ici que la MISE EN PAGE et le
   libellé (§5.5).

   🔒 Les « form-row-first / form-row-last » de WooCommerce sont des
   flottants à 47 % : la grille les remplace, chaque enfant occupe par
   défaut toute la largeur et seuls ces deux-là se placent en colonnes.
   ---------------------------------------------------------------- */
.woocommerce-account.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account.woocommerce-account .woocommerce-address-fields__field-wrapper,
.woocommerce-account.woocommerce-account .woocommerce-form-login,
.woocommerce-account.woocommerce-account .woocommerce-form-register,
.woocommerce-account.woocommerce-account .woocommerce-ResetPassword {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-m, 16px);
}

.woocommerce-account.woocommerce-account .woocommerce-EditAccountForm > *,
.woocommerce-account.woocommerce-account .woocommerce-address-fields__field-wrapper > *,
.woocommerce-account.woocommerce-account .woocommerce-form-login > *,
.woocommerce-account.woocommerce-account .woocommerce-form-register > *,
.woocommerce-account.woocommerce-account .woocommerce-ResetPassword > * {
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 768px) {
	.woocommerce-account.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-account.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-account.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.woocommerce-account.woocommerce-account .woocommerce-EditAccountForm > .form-row-last,
	.woocommerce-account.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

/* Rangée de champ : pile libellé → champ → aide. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row,
.woocommerce-account.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account.woocommerce-account .woocommerce-form-register .form-row {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	padding: 0;
}

/* Libellé : capitales fines (même dessin qu'au tunnel, §7.3). La case à
   cocher garde son libellé en ligne, à taille de lecture. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row > label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-account.woocommerce-account .woocommerce-form-login .form-row > label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-account.woocommerce-account .woocommerce-form-register .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	margin-block-end: var(--space-xs, 8px);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--t-overline, 11px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row .required,
.woocommerce-account.woocommerce-account .woocommerce-form-login .form-row .required,
.woocommerce-account.woocommerce-account .woocommerce-form-register .form-row .required {
	color: var(--or-deep, #876A3C);
	text-decoration: none;
	border: 0;
}

/* Champs pleine largeur (l'habillage vient de §2). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row textarea,
.woocommerce-account.woocommerce-account .woocommerce-form-login .form-row input.input-text,
.woocommerce-account.woocommerce-account .woocommerce-form-register .form-row input.input-text {
	box-sizing: border-box;
	inline-size: 100%;
}

/* Case à cocher (« Se souvenir de moi ») : ligne lisible, jamais en capitales. */
.woocommerce-account.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 8px);
	font-size: var(--t-small, 14px);
	color: var(--ink-soft, #5C534A);
	cursor: pointer;
}

.woocommerce-account.woocommerce-account .woocommerce-form__input-checkbox {
	accent-color: var(--or-deep, #876A3C);
	inline-size: 16px;
	block-size: 16px;
	margin: 0;
}

/* Aide sous un champ (format du mot de passe, etc.). */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content .form-row span em,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content fieldset + p em {
	display: block;
	margin-block-start: var(--space-xs, 6px);
	font-size: var(--t-small, 13px);
	font-style: normal;
	color: var(--ink-xsoft, #746F68);
}

/* Groupe de champs (changement de mot de passe) : détaché par un filet. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: var(--space-s, 12px) 0 0;
	padding: var(--space-l, 24px) 0 0;
	border: 0;
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding: 0;
	margin-block-end: var(--space-m, 16px);
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-h4, 19px);
	color: var(--ink, #2A2521);
}

/* Le bouton d'enregistrement ne s'étire pas sur la largeur de la grille. */
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account.woocommerce-account .woocommerce-MyAccount-content input.button {
	justify-self: start;
}

/* ----------------------------------------------------------------
   8.10 Connexion / inscription / mot de passe oublié (hors connexion)
   ----------------------------------------------------------------
   Pas de navigation latérale ici (cf. « :has() » en 8.1) : le formulaire
   prend le flux normal. On le pose en carte, centré, et les deux colonnes
   « connexion | inscription » passent en grille quand l'inscription est
   ouverte en réglages WooCommerce.
   ---------------------------------------------------------------- */
/* Flex, même raison qu'en 8.8 : insensible à un enfant parasite. */
.woocommerce-account.woocommerce-account #customer_login {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-l, 24px);
	margin: 0;
}

.woocommerce-account.woocommerce-account #customer_login > div {
	flex: 1 1 320px;
	min-inline-size: 0;
	float: none;
	width: auto;
	box-sizing: border-box;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 32px);
}

.woocommerce-account.woocommerce-account #customer_login h2 {
	font-size: var(--t-h4, 20px);
	margin-block: 0 var(--space-m, 16px);
}

/* Formulaire de connexion seul (inscription fermée) : carte centrée. */
.woocommerce-account.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account.woocommerce-account .woocommerce > .woocommerce-ResetPassword {
	box-sizing: border-box;
	max-inline-size: 560px;
	margin-inline: auto;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-ml, 12px);
	padding: var(--space-xl, 32px);
}

.woocommerce-account.woocommerce-account .woocommerce-LostPassword {
	margin: 0;
	font-size: var(--t-small, 13px);
}

/* ================================================================
   9. Fil d'Ariane
   ----------------------------------------------------------------
   La piste est rendue par le bloc « idouceur/fil-ariane » (le fil natif
   de WooCommerce est décroché dans inc/woocommerce.php) et consomme le
   composant .fil-ariane de composants.css : AUCUN style n'est redéfini
   ici (§5.5). Seul le rythme propre à la fiche produit est posé.
   ================================================================ */
.single-product .fil-ariane {
	margin-block-end: 0;
}


/* Panier vide : respiration entre le texte d'accroche et le CTA */
.wp-block-woocommerce-empty-cart-block .wp-block-buttons {
	margin-top: var(--space-xl, 32px);
}

/* L'Instant Douceur : retour visuel à l'ajout au panier (s'appuie sur tokens.css) */

/* Le lien « Voir le panier » natif sous la carte devient redondant */
.carte .added_to_cart,
form.cart .added_to_cart { display: none !important; }
.ld-notice-masquee { display: none !important; }

/* Toast */
.ld-toast {
	position: fixed;
	right: var(--space-l, 24px);
	top: calc(95px + var(--space-m, 16px));
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	gap: var(--space-m, 16px);
	width: min(380px, calc(100vw - 32px));
	padding: var(--space-m, 16px) var(--space-xl, 32px) var(--space-m, 16px) var(--space-m, 16px);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-left: 3px solid var(--or, #A8895E);
	border-radius: var(--r-m, 10px);
	box-shadow: var(--shadow-card, 0 18px 50px -28px rgba(42, 37, 33, .45));
	font-family: var(--ff-text);
	color: var(--ink-soft, #5C534A);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.admin-bar .ld-toast { top: calc(95px + 32px + var(--space-m, 16px)); }

.ld-toast.est-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}

.ld-toast__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--r-s, 4px);
	background: var(--surface-2, #EDE5D8);
}
.ld-toast__media--icone {
	display: grid;
	place-items: center;
	color: var(--or-deep, #876A3C);
	border-radius: var(--r-pill, 999px);
}

.ld-toast__corps { min-width: 0; }

.ld-toast__surtitre {
	margin: 0 0 2px;
	font-size: var(--t-overline, 11px);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
}
.ld-toast__surtitre::before {
	content: "\2713";
	margin-right: 6px;
}

.ld-toast__titre {
	margin: 0 0 var(--space-s, 12px);
	font-family: var(--ff-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink, #2A2521);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ld-toast__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 8px) var(--space-m, 16px);
}

.ld-toast__lien {
	display: inline-block;
	padding: 10px 16px;
	background: var(--grad-cta, #2A2521);
	color: var(--surface, #F7F3EC) !important;
	border-radius: var(--r-s, 4px);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ld-toast__lien:hover { box-shadow: var(--shadow-btn); transform: translateY(-1px); }

.ld-toast__continuer {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--t-small, 13px);
	color: var(--ink-soft, #5C534A);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--or-soft, #C3B097);
	cursor: pointer;
}
.ld-toast__continuer:hover { color: var(--ink, #2A2521); }

.ld-toast__x {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--ink-xsoft, #746F68);
	cursor: pointer;
}
.ld-toast__x:hover { color: var(--ink, #2A2521); }

.ld-toast :focus-visible { outline: 2px solid var(--or, #A8895E); outline-offset: 2px; }

/* Bouton : état « Ajouté » */
.add_to_cart_button.ld-ajoute,
.single_add_to_cart_button.ld-ajoute {
	background: var(--or-deep, #876A3C) !important;
	color: var(--bg, #FBF8F3) !important;
}

/* Pulsation du compteur dans le header */
@keyframes ld-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	70%  { transform: scale(.92); }
	100% { transform: scale(1); }
}
.wc-block-mini-cart__badge.ld-pulse {
	animation: ld-pulse .6s var(--ease);
	background-color: var(--or, #A8895E) !important;
	color: var(--bg, #FBF8F3) !important;
	transition: background-color .6s var(--ease);
}

/* Mobile : toast en bas d'écran, pleine largeur */
@media (max-width: 600px) {
	.ld-toast,
	.admin-bar .ld-toast {
		top: auto;
		bottom: var(--space-s, 12px);
		left: var(--space-s, 12px);
		right: var(--space-s, 12px);
		width: auto;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-toast, .ld-toast.est-visible { transition: opacity .2s; transform: none; }
	.wc-block-mini-cart__badge.ld-pulse { animation: none; }
}