@charset "UTF-8";
/* ==========================================================================
   Maison Argile — surcharges WooCommerce
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille de la boutique
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

@media (max-width: 1000px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   En-tête de la boutique
   -------------------------------------------------------------------------- */

.woocommerce-products-header {
	padding-top: 160px;
	padding-bottom: var(--ma-space-48);
}

.woocommerce-products-header__title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ma-blue);
}

.woocommerce .woocommerce-ordering {
	margin-bottom: var(--ma-space-40);
}

/* Champ « filet bas », comme partout ailleurs sur le site. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	padding: 6px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	background: transparent;
	border-radius: 0;
	color: var(--ma-black);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	background: var(--ma-black);
	color: var(--ma-white);
	border: 1px solid var(--ma-black);
	border-radius: 0;
	padding: 14px 26px;
	line-height: 1.2;
	transition: background 0.3s var(--ma-ease), color 0.3s var(--ma-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,
.woocommerce input.button.alt:hover {
	background: transparent;
	color: var(--ma-black);
}

/* L'état désactivé est traité plus bas, par inversion du bouton plutôt que par
   un voile d'opacité qui rendait le libellé illisible. */

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */

.woocommerce div.product {
	padding-top: 160px;
}

.woocommerce div.product .product_title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--ma-font-mono);
	font-size: 16px;
	color: var(--ma-black);
	margin-bottom: 24px;
}

.woocommerce div.product p.price del {
	/* Le barré porte déjà le sens : inutile d'effacer le prix sous le seuil AA. */
	opacity: 0.72;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.woocommerce div.product form.cart {
	margin-top: 28px;
}

.woocommerce div.product form.cart div.quantity input {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	padding: 6px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
	background: transparent;
	color: var(--ma-black);
	text-align: center;
}

.woocommerce .quantity input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/*
 * Onglets — demande client : le trait de base que WooCommerce pose sous la
 * barre d'onglets (::before) disparaît, la séparation d'avec le panneau est
 * portée par l'espacement (40px). Le soulignement de l'onglet actif, lui,
 * reste : il indique l'état courant.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: var(--ma-space-40);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 20px 0 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 8px 0;
	font-weight: 500;
	/* 0,72 : plancher AA sur le fond creme. En dessous l'onglet inactif n'est plus lisible. */
	opacity: 0.72;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	opacity: 1;
	border-bottom: 1px solid currentColor;
}

.woocommerce span.onsale {
	background: var(--ma-blue);
	color: var(--ma-white);
	font-family: var(--ma-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 7px 10px;
	top: 12px;
	left: 12px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Notices, panier, commande
   -------------------------------------------------------------------------- */

/* Le filet haut de 3px de WooCommerce n'est plus recoloré : il est remplacé
   plus bas par le filet gauche d'état, seul trait conservé sur les notices. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	background: rgba(58, 58, 53, 0.05);
	color: var(--ma-black);
	border-radius: 0;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ma-blue);
}

/*
 * Tableaux boutique — demande client : ni filet sous l'en-tête, ni filet entre
 * les lignes, ni cadre autour du tableau. La lecture repose désormais sur la
 * typographie (en-têtes en capitales grises, cellules en encre pleine) et sur
 * l'air vertical, 14px au-dessus et au-dessous de chaque cellule.
 */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--ma-space-14) var(--ma-space-24) var(--ma-space-14) 0;
}

.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child {
	padding-right: 0;
}

.woocommerce table.shop_table th {
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ma-grey);
}

.woocommerce table.shop_table td {
	color: var(--ma-black);
}

.woocommerce form .form-row label {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/*
 * Champs « filet bas », comme .ma-field__input du thème. La boîte encadrée d'une
 * première version donnait deux vocabulaires de champ selon la page : encadré sur
 * la fiche produit, filet bas au panier et sur le compte. On aligne tout ici.
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	padding: 6px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
	background: transparent;
	color: var(--ma-black);
	height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-bottom-width: 2px;
	padding-bottom: 9px;
}

/* ==========================================================================
   COMPLÉMENTS — WooCommerce classique
   Tout ce que la première passe ne couvrait pas. Ne concerne ni le panier ni
   la commande, rendus en blocs (voir woocommerce-blocks.css), ni l'espace
   client, rendu par shortcode (voir woocommerce-account.css). Ces deux
   feuilles sont chargées après celle-ci : elles ont le dernier mot sur leurs
   pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Notices — quatre états
   Reprise assumée du bloc « Notices » ci-dessus, jugé trop pauvre : le filet
   de 3px posé en haut par WooCommerce devient un filet de 2px à gauche, et
   chaque état porte une teinte ET un signe typographique — jamais la couleur
   seule, qui exclurait les daltoniens et l'impression noir et blanc.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	margin: 0 0 var(--ma-space-24);
	padding: 14px 18px 14px 40px;
	border: 0;
	border-left: 2px solid var(--ma-black);
	background: rgba(58, 58, 53, 0.05);
	color: var(--ma-black);
	line-height: 1.55;
	list-style: none;
}

/*
 * WooCommerce place ici un glyphe de sa police d'icônes (rond vert, croix
 * rouge). On le remplace par un signe mono, aligné sur les motifs du thème :
 * ✱ comme les liens, // comme les titres, ! pour l'erreur.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: absolute;
	top: 14px;
	left: 16px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.55;
	text-indent: 0;
}

/* 1. Succès */
.woocommerce-message {
	border-left-color: var(--ma-blue);
	background: rgba(0, 84, 218, 0.05);
}

/*
 * Convention d'état, valable sur tout le site : ✓ succès · ! erreur · // information.
 * L'astérisque ✱ reste réservé au marqueur de marque (liens, titres) et ne porte
 * jamais d'état, sous peine de vouloir dire deux choses selon la page.
 */
.woocommerce-message::before {
	content: "\2713";
	color: var(--ma-blue);
}

/* 2. Information */
.woocommerce-info {
	border-left-color: var(--ma-black);
}

.woocommerce-info::before {
	content: "//";
	color: var(--ma-black);
}

/* 3. Erreur — var(--ma-error) est déjà la couleur d'erreur du thème (main.css,
   .ma-field__input:user-invalid). Contraste 6,2:1 sur le fond de page. */
.woocommerce-error {
	border-left-color: var(--ma-error);
	background: rgba(179, 38, 30, 0.05);
}

.woocommerce-error::before {
	content: "!";
	color: var(--ma-error);
}

/* Les erreurs arrivent en liste : une ligne par message, sans puce. */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-message li + li,
.woocommerce-info li + li,
.woocommerce-error li + li {
	margin-top: 6px;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WooCommerce fait flotter le bouton à droite : il repasse dans le flux. */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button {
	float: none;
	display: inline-block;
	margin-top: 12px;
	padding: 10px 18px;
	font-size: 13px;
	text-decoration: none;
}

.woocommerce-NoticeGroup {
	margin-bottom: var(--ma-space-24);
}

/* 4. Bandeau de boutique (mode démo, congés, délais) — pleine largeur, inversé. */
.woocommerce-store-notice,
p.demo_store {
	padding: 12px var(--ma-gutter);
	background: var(--ma-black);
	color: var(--ma-white);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 0;
}

.woocommerce-store-notice a,
p.demo_store a {
	color: var(--ma-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   États de saisie, boutons désactivés et chargement
   « Minimaliste » ne veut pas dire illisible : un champ en erreur et un bouton
   désactivé doivent rester évidents sans ombre ni icône.
   -------------------------------------------------------------------------- */

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: var(--ma-error);
}

.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--ma-error);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: rgba(0, 84, 218, 0.55);
}

.woocommerce form .form-row .required {
	color: var(--ma-black);
	text-decoration: none;
}

/* Le 0,4 d'opacité hérité rendait le libellé blanc illisible : on inverse le
   bouton plutôt que de le faire disparaître. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled {
	opacity: 1;
	background: transparent;
	color: var(--ma-grey);
	border-color: rgba(58, 58, 53, 0.25);
	cursor: not-allowed;
}

.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
	opacity: 0.55;
	pointer-events: none;
}

/*
 * Voile de chargement AJAX : blockUI pose ses couleurs en style en ligne,
 * d'où les !important, seuls de la feuille.
 */
.woocommerce .blockUI.blockOverlay,
.woocommerce .loader {
	background: var(--ma-white) !important;
	opacity: 0.72 !important;
}

.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background: none;
	border: 1px solid var(--ma-black);
	border-radius: 0;
	animation: ma-wc-spin 1.2s var(--ma-ease) infinite;
}

@keyframes ma-wc-spin {
	to { transform: rotate(180deg); }
}

/* Squelettes des blocs WooCommerce : aplat + battement, sans dégradé. */
.wc-block-components-skeleton__element,
.wc-block-components-skeleton .wc-block-components-skeleton__element {
	background-color: rgba(58, 58, 53, 0.08);
	background-image: none;
	border-radius: var(--ma-radius);
	animation: ma-wc-pulse 1.6s var(--ma-ease) infinite;
}

@keyframes ma-wc-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   Fil d'Ariane (si le hook woocommerce_breadcrumb est réactivé)
   Calé sur .ma-breadcrumb du thème pour que les deux soient indiscernables.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	margin: 0 0 var(--ma-space-24);
	padding: 12px 0 0;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	letter-spacing: -0.01em;
	color: var(--ma-black);
}

.woocommerce .woocommerce-breadcrumb::before,
.woocommerce .woocommerce-breadcrumb::after {
	content: none;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
	color: inherit;
	opacity: 0.72;
	transition: opacity 0.25s var(--ma-ease);
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Compteur de résultats et tri
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	float: none;
	margin: 0 0 var(--ma-space-24);
	font-family: var(--ma-font-mono);
	font-size: 12px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-grey);
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	float: none;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	cursor: pointer;
	transition: border-color 0.25s var(--ma-ease);
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce-page .woocommerce-ordering select:hover {
	border-color: var(--ma-black);
}

/* --------------------------------------------------------------------------
   Pagination des produits
   Même vocabulaire que .ma-pagination (main.css) : carrés à filet, inversion
   au survol et sur la page courante.
   -------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--ma-space-64);
	text-align: left;
}

.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: normal;
}

.woocommerce nav.woocommerce-pagination ul li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid rgba(58, 58, 53, 0.2);
	background: transparent;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
	transition: background 0.3s var(--ma-ease), color 0.3s var(--ma-ease), border-color 0.3s var(--ma-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ma-black);
	border-color: var(--ma-black);
	color: var(--ma-white);
}

/* --------------------------------------------------------------------------
   Avis produits
   Étoiles sobres : pleines en var(--ma-black), vides en filet de la même
   encre à 22 %. Aucune couleur d'accent, la note se lit à la densité.
   -------------------------------------------------------------------------- */

.woocommerce #reviews,
.woocommerce .woocommerce-Reviews {
	padding-top: var(--ma-space-48);
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.woocommerce #reviews h2,
.woocommerce #reviews #comments h2,
.woocommerce #review_form_wrapper .comment-reply-title {
	display: block;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
	margin-bottom: var(--ma-space-24);
}

.woocommerce #reviews #comments ol.commentlist {
	margin: 0 0 var(--ma-space-48);
	padding: 0;
	list-style: none;
}

/*
 * Demande client : plus de filet entre les avis ni sous le dernier. Chaque
 * contribution est détachée par 40px de blanc, ce qui suffit largement à la
 * lire comme un bloc autonome.
 */
.woocommerce #reviews #comments ol.commentlist li {
	margin: 0 0 var(--ma-space-40);
	padding: 0;
	border: 0;
}

.woocommerce #reviews #comments ol.commentlist li:last-child {
	margin-bottom: 0;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 16px 0 0;
	padding: 0;
	/* Pas de cadre : une photo porte son propre bord, et aucune autre vignette
	   du site n'est encadrée. */
	border: 0;
	border-radius: var(--ma-radius);
	background: transparent;
}

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

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	margin-bottom: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--ma-grey);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong {
	font-weight: 500;
	color: var(--ma-black);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	margin: 0 0 8px;
}

.woocommerce .star-rating {
	color: var(--ma-black);
	letter-spacing: 0;
}

.woocommerce .star-rating::before {
	color: rgba(58, 58, 53, 0.22);
}

.woocommerce .star-rating span::before {
	color: var(--ma-black);
}

.woocommerce .woocommerce-product-rating .woocommerce-review-link {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--ma-grey);
}

.woocommerce .woocommerce-noreviews {
	color: var(--ma-grey);
}

/* Formulaire d'avis */
.woocommerce #review_form .comment-form-rating label,
.woocommerce #review_form .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.woocommerce #review_form #respond .comment-form-comment textarea,
.woocommerce #review_form #respond .comment-form-author input,
.woocommerce #review_form #respond .comment-form-email input {
	width: 100%;
	padding: 6px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
	background: transparent;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-size: 14px;
}

.woocommerce #review_form #respond p {
	margin-bottom: var(--ma-space-24);
}

/*
 * Étoiles cliquables de la notation. Le plein / vide est porté par le glyphe
 * que WooCommerce échange au survol : la couleur n'a qu'à suivre.
 */
.woocommerce p.stars a {
	color: rgba(58, 58, 53, 0.35);
	transition: color 0.2s var(--ma-ease);
}

.woocommerce p.stars a::before {
	color: inherit;
}

.woocommerce p.stars:hover a,
.woocommerce p.stars.selected a {
	color: var(--ma-black);
}

/* Le texte est masqué par indentation : l'outline a besoin d'air. */
.woocommerce p.stars a:focus-visible {
	outline: 2px solid var(--ma-blue);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Mini-panier — widget classique et bouton du bloc en en-tête
   Le compteur maison (.ma-nav__cart) reste la porte d'entrée : ce qui suit
   n'habille que le contenu déroulant s'il est activé.
   -------------------------------------------------------------------------- */

.widget_shopping_cart .widget_shopping_cart_content {
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.woocommerce ul.cart_list,
.woocommerce ul.product_list_widget,
.widget_shopping_cart ul.cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Demande client : plus de filet entre les articles du mini-panier. Chaque
 * ligne garde 14px d'air en haut et 24px en bas — la vignette produit et le
 * nom en graisse 500 suffisent à marquer le début d'un article.
 */
.woocommerce ul.cart_list li,
.widget_shopping_cart ul.cart_list li {
	position: relative;
	margin: 0;
	padding: var(--ma-space-14) 24px var(--ma-space-24) 0;
	border: 0;
	line-height: 1.5;
}

.woocommerce ul.cart_list li a,
.widget_shopping_cart ul.cart_list li a {
	display: block;
	font-weight: 500;
	color: var(--ma-black);
}

.woocommerce ul.cart_list li img,
.widget_shopping_cart ul.cart_list li img {
	width: 56px;
	height: auto;
	margin-left: 16px;
	border-radius: 0;
	box-shadow: none;
	float: right;
}

.woocommerce ul.cart_list li .quantity,
.widget_shopping_cart ul.cart_list li .quantity {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ma-grey);
}

/*
 * Croix de suppression : discrète, rouge seulement au survol.
 * WooCommerce impose « color: red !important » sur a.remove — c'est la seule
 * façon de ramener le rouge vif dans la palette.
 */
.woocommerce ul.cart_list li a.remove,
.widget_shopping_cart ul.cart_list li a.remove {
	position: absolute;
	top: var(--ma-space-14);
	right: 0;
	left: auto;
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	color: var(--ma-black) !important;
	background: transparent;
	border-radius: 0;
	/* Contrôle actionnable : 0,7 pour tenir le seuil AA des composants (3:1). */
	opacity: 0.7;
	transition: color 0.2s var(--ma-ease), opacity 0.2s var(--ma-ease);
}

.woocommerce ul.cart_list li a.remove:hover,
.woocommerce ul.cart_list li a.remove:focus-visible,
.widget_shopping_cart ul.cart_list li a.remove:hover,
.widget_shopping_cart ul.cart_list li a.remove:focus-visible {
	background: transparent;
	color: var(--ma-error) !important;
	opacity: 1;
}

/* Le filet noir plein qui isolait le total est remplacé par 24px de blanc de
   part et d'autre (demande client) : la ligne se détache par sa position et
   ses capitales, pas par un trait. */
.widget_shopping_cart .total,
.woocommerce .widget_shopping_cart .total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: var(--ma-space-24) 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	text-transform: uppercase;
}

.widget_shopping_cart .total strong {
	font-weight: 500;
}

.widget_shopping_cart .buttons,
.woocommerce .widget_shopping_cart .buttons {
	display: grid;
	gap: 8px;
	margin: 0;
}

.widget_shopping_cart .buttons a.button,
.woocommerce .widget_shopping_cart .buttons a.button {
	display: block;
	width: 100%;
	text-align: center;
}

/* Second bouton en version filet, pour hiérarchiser sans couleur. */
.widget_shopping_cart .buttons a.button:not(.checkout),
.woocommerce .widget_shopping_cart .buttons a.button:not(.checkout) {
	background: transparent;
	color: var(--ma-black);
}

.widget_shopping_cart .buttons a.button:not(.checkout):hover,
.woocommerce .widget_shopping_cart .buttons a.button:not(.checkout):hover {
	background: var(--ma-black);
	color: var(--ma-white);
}

.widget_shopping_cart .empty,
.woocommerce .widget_shopping_cart .empty {
	margin: 0;
	padding: 14px 0;
	color: var(--ma-grey);
	text-align: left;
}

/* Bouton du bloc mini-panier posé dans l'en-tête. */
.wc-block-mini-cart__button {
	padding: 0;
	background: transparent;
	color: inherit;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.wc-block-mini-cart__badge {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Panier vide
   Le message d'un panier vide n'est pas une erreur : ni fond d'alerte, ni
   filet. Un titre en Satoshi, de l'air, et une seule sortie évidente.
   Le texte lui-même se règle dans le bloc « Panier vide » de l'éditeur.
   -------------------------------------------------------------------------- */

.woocommerce .cart-empty,
.woocommerce-page .cart-empty,
p.cart-empty {
	position: relative;
	margin: 0 0 var(--ma-space-24);
	padding: 0 0 0 30px;
	border: 0;
	background: none;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

.woocommerce .cart-empty::before,
p.cart-empty::before {
	content: "\2731";
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 40px;
	color: var(--ma-blue);
}

.woocommerce .return-to-shop,
.wc-block-cart__empty-cart .wc-block-cart__submit-container {
	margin: var(--ma-space-40) 0 var(--ma-space-64);
}

/* Version blocs du même moment — la feuille des blocs, chargée après, peut
   affiner ; on ne pose ici que la typographie pour éviter le hors-charte. */
.wc-block-cart__empty-cart,
.wp-block-woocommerce-empty-cart-block {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.wc-block-cart__empty-cart h2,
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

/* --------------------------------------------------------------------------
   Commande reçue / remerciement
   Rendu classique de thankyou.php. Sous commande en blocs, l'écran peut être
   servi par le modèle « Confirmation de commande » : voir woocommerce-blocks.css.
   -------------------------------------------------------------------------- */

.woocommerce-order {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
	position: relative;
	margin: 0 0 var(--ma-space-40);
	padding: 0 0 0 30px;
	border: 0;
	background: none;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "\2731";
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 40px;
	color: var(--ma-blue);
}

.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order .woocommerce-order-downloads__title {
	margin: 0 0 var(--ma-space-24);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-black);
}

/*
 * Récapitulatif : WooCommerce fait flotter les items avec un filet pointillé.
 * On repasse en grille. Demande client : le cadre et les gouttières de 1px
 * qui dessinaient un quadrillage disparaissent ; les cellules sont séparées
 * par 40px de blanc, le libellé gris et la valeur en encre pleine suffisant à
 * les distinguer.
 */
.woocommerce-order ul.order_details,
.woocommerce-order .woocommerce-order-overview,
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--ma-grid-gap);
	margin: 0 0 var(--ma-space-48);
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.woocommerce-order ul.order_details li,
.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ma-font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ma-grey);
	list-style: none;
}

.woocommerce-order ul.order_details li strong,
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	text-transform: none;
	color: var(--ma-black);
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order .woocommerce-order-downloads {
	margin-bottom: var(--ma-space-48);
}

/*
 * Détail de commande — demande client : cadre du tableau, filet sous l'en-tête
 * et filets entre les lignes sont retirés. Ce que les traits portaient est
 * repris par la typographie et par l'espacement : en-têtes en capitales grises
 * de 11px, cellules en var(--ma-black), 14px d'air par ligne et 24px sous
 * l'en-tête comme au-dessus du pied de tableau.
 */
.woocommerce-order table.shop_table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: var(--ma-space-14) var(--ma-space-24) var(--ma-space-14) 0;
	border: 0;
	vertical-align: top;
}

.woocommerce-order table.shop_table th:last-child,
.woocommerce-order table.shop_table td:last-child {
	padding-right: 0;
}

.woocommerce-order table.shop_table thead th {
	padding-top: 0;
	font-size: 11px;
	letter-spacing: -0.01em;
	color: var(--ma-grey);
}

/* Respiration en remplacement du filet d'en-tête et de celui du pied. */
.woocommerce-order table.shop_table tbody tr:first-child th,
.woocommerce-order table.shop_table tbody tr:first-child td,
.woocommerce-order table.shop_table tfoot tr:first-child th,
.woocommerce-order table.shop_table tfoot tr:first-child td {
	padding-top: var(--ma-space-24);
}

.woocommerce-order table.shop_table td.product-name a {
	font-weight: 500;
	color: var(--ma-black);
}

.woocommerce-order table.shop_table .wc-item-meta,
.woocommerce-order table.shop_table .product-quantity {
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--ma-grey);
	list-style: none;
}

.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
	font-weight: 500;
}

/* Le total ne se détache plus par un filet noir de 2px mais par l'espace et
   par le corps de texte (demande client). */
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
	padding-top: var(--ma-space-24);
	font-size: 14px;
	color: var(--ma-black);
}

/* Adresses : deux colonnes réelles, sans flottants. */
.woocommerce-order .woocommerce-customer-details .col2-set,
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
	width: 100%;
}

.woocommerce-order .woocommerce-customer-details .col2-set::before,
.woocommerce-order .woocommerce-customer-details .col2-set::after {
	content: none;
}

.woocommerce-order .woocommerce-customer-details .col2-set .col-1,
.woocommerce-order .woocommerce-customer-details .col2-set .col-2 {
	float: none;
	width: auto;
	padding: 0;
}

/* L'encart d'adresse perd son cadre (demande client) : les deux colonnes sont
   déjà tenues par la gouttière de grille de 40px et par leur titre. */
.woocommerce-order .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	border-radius: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--ma-grey);
}

@media (max-width: 760px) {
	.woocommerce-order .woocommerce-customer-details .col2-set,
	.woocommerce-order .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Impression de la page « commande reçue »
   Portée volontairement limitée au corps .woocommerce-order-received : cette
   feuille est chargée sur tout le site dès que WooCommerce est actif.
   -------------------------------------------------------------------------- */

@media print {
	body.woocommerce-order-received {
		/* Blanc pur volontaire : sur papier, le crème de l'écran gaspille de l'encre
		   sans rien apporter. Ne pas remplacer par --ma-white. */
		background: #ffffff;
		color: var(--ma-black);
		font-size: 11pt;
	}

	body.woocommerce-order-received .ma-header,
	body.woocommerce-order-received .ma-mobile-nav,
	body.woocommerce-order-received .ma-footer,
	body.woocommerce-order-received .ma-newsletter,
	body.woocommerce-order-received .skip-link,
	body.woocommerce-order-received .woocommerce-store-notice,
	body.woocommerce-order-received .woocommerce-message,
	body.woocommerce-order-received .woocommerce-info,
	body.woocommerce-order-received .ma-load-more,
	body.woocommerce-order-received .wc-block-mini-cart {
		display: none !important;
	}

	body.woocommerce-order-received main,
	body.woocommerce-order-received #content,
	body.woocommerce-order-received .ma-container,
	body.woocommerce-order-received .ma-section {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.woocommerce-order .woocommerce-thankyou-order-received {
		color: var(--ma-black);
		margin-bottom: 12mm;
	}

	/* Sur papier non plus, pas de cadres : la même mise en page portée par le
	   blanc, resserrée à 24px pour ne pas gaspiller la page. */
	.woocommerce-order ul.order_details,
	.woocommerce-order table.shop_table,
	.woocommerce-order .woocommerce-customer-details address {
		border: 0;
		background: none;
	}

	.woocommerce-order ul.order_details {
		gap: var(--ma-space-24);
	}

	.woocommerce-order ul.order_details li {
		border: 0;
		background: none;
	}

	.woocommerce-order ul.order_details li,
	.woocommerce-order table.shop_table tr,
	.woocommerce-order .woocommerce-customer-details address {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.woocommerce-order a {
		color: var(--ma-black);
		text-decoration: none;
	}
}