/* ==========================================================================
   WooCommerce visual overhaul
   Shop, single product, cart and checkout are now Divi Theme Builder
   Custom Body layouts (assigned via woocommerce:shop / woocommerce:cart /
   woocommerce:checkout / woocommerce:single_product), built from Divi's
   native WooCommerce modules (.et_pb_wc_*, .et_pb_shop) — those wrap the
   *classic* WooCommerce templates (real <table class="shop_table">,
   single_add_to_cart_button, etc.), not the block-based Cart/Checkout.

   Specificity note: Divi's own core CSS styles headings/buttons via
   selectors anchored on the page wrapper ID (#et-boc), which outranks a
   plain class selector regardless of !important + source order (ID beats
   any number of classes). Anywhere this file needs to reliably win against
   Divi's defaults, the selector is prefixed with #et-boc to match or beat
   that specificity — a bare class selector is not enough here even with
   !important.
   ========================================================================== */

.woocommerce, .woocommerce-page {
	font-size: 1rem;
}

/* Leftover default WP sidebar (Search/Recent Comments/Archives/Meta widgets) —
   never intentionally added, WooCommerce's own archive/single templates call
   get_sidebar() directly regardless of Divi's "no sidebar" page-layout setting. */
body.woocommerce-page #sidebar {
	display: none !important;
}

/* --------------------------------------------------------------------
   Dark theme for the purchase journey (shop, single product, cart,
   checkout) — the rest of the site sits on the light cream background;
   these pages use the same dark surface as the homepage's dark sections.
   -------------------------------------------------------------------- */
body.woocommerce-shop,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout {
	background-color: var(--c-bg-dark) !important;
}
body.woocommerce-shop .et-l--header,
body.single-product .et-l--header,
body.woocommerce-cart .et-l--header,
body.woocommerce-checkout .et-l--header {
	background-color: var(--c-bg-dark);
}
body.woocommerce-shop .et-l--header .et_pb_section,
body.single-product .et-l--header .et_pb_section,
body.woocommerce-cart .et-l--header .et_pb_section,
body.woocommerce-checkout .et-l--header .et_pb_section {
	background-color: transparent !important;
}
body.woocommerce-shop .et-l--header .et_pb_menu,
body.woocommerce-shop .et-l--header a,
body.woocommerce-shop .et-l--header .et_pb_text_inner,
body.woocommerce-shop .et-l--header .logo-maxime,
body.woocommerce-shop .et-l--header .logo-verdoni,
body.single-product .et-l--header .et_pb_menu,
body.single-product .et-l--header a,
body.single-product .et-l--header .et_pb_text_inner,
body.single-product .et-l--header .logo-maxime,
body.single-product .et-l--header .logo-verdoni,
body.woocommerce-cart .et-l--header .et_pb_menu,
body.woocommerce-cart .et-l--header a,
body.woocommerce-cart .et-l--header .et_pb_text_inner,
body.woocommerce-cart .et-l--header .logo-maxime,
body.woocommerce-cart .et-l--header .logo-verdoni,
body.woocommerce-checkout .et-l--header .et_pb_menu,
body.woocommerce-checkout .et-l--header a,
body.woocommerce-checkout .et-l--header .et_pb_text_inner,
body.woocommerce-checkout .et-l--header .logo-maxime,
body.woocommerce-checkout .et-l--header .logo-verdoni {
	color: var(--c-cream) !important;
}

/* Breadcrumb — sur les pages produit single, ce breadcrumb est rendu via
   le widget "Dynamic Content" Woo de Divi, qui l'enveloppe dans
   .et-dynamic-content-woo--product_breadcrumb et force color:inherit
   !important (+ font-size/letter-spacing/etc en inherit) via un
   <style> INLINE injecte plus loin dans le document que ce fichier --
   confirme sur /sheet-music/poesie/ (le <link> de woocommerce.css arrive
   en octet ~33k, le <style> de Divi vers l'octet ~206k). A specificite
   ET !important egaux, c'est la regle la PLUS TARDIVE dans le document
   qui gagne -- donc juste egaler le selecteur de Divi ne suffit pas, il
   faut le depasser. #et-boc (ID, deja utilise ailleurs dans ce fichier
   pour la meme raison) fait gagner sans dependre de l'ordre. */
#et-boc .et-dynamic-content-woo--product_breadcrumb.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	font-size: 0.82rem !important;
	color: var(--c-cream-soft) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em !important;
	margin-bottom: var(--space-5) !important;
}
#et-boc .et-dynamic-content-woo--product_breadcrumb.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
	color: var(--c-cream-soft) !important;
	text-decoration: none;
}
#et-boc .et-dynamic-content-woo--product_breadcrumb.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--c-cream) !important;
}


/* --------------------------------------------------------------------
   Shop archive / product grid — editorial cards, same visual language
   as the homepage "Latest releases" cards (see .ope-release in theme.css)
   -------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-6) var(--space-5);
	margin: 0 0 var(--space-6) !important;
}
/* Le clearfix par defaut de WooCommerce (::before/::after avec
   display:table) est concu pour un layout en float -- en grid, ce
   pseudo-element devient une vraie cellule visible (case vide). Inutile
   ici, la grille n'a besoin d'aucun clearfix. */
.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before {
	content: none !important;
	display: none !important;
}
@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.ope-product-card {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	position: relative;
}
/* Le module Shop de Divi impose sa propre largeur en float sous 980px
   (.et_pb_shop ul.products.columns-N li.product { width:48% !important;
   margin-right:4% !important; }, N = 2..6) -- ce selecteur a PLUS de
   classes que celui juste au-dessus (4 vs 3), donc il gagne le conflit
   entre !important a specificite egale, quel que soit l'ordre d'ecriture
   dans le fichier. #et-boc (un ID, imbattable par un selecteur 100% en
   classes) est deja utilise plus bas dans ce fichier pour la meme raison
   -- reprend le meme motif ici. */
#et-boc .et_pb_shop ul.products li.product,
#et-boc .et_pb_shop ul.products li.ope-product-card {
	width: auto !important;
	margin-right: 0 !important;
}

.ope-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-bg-dark);
	margin-bottom: var(--space-3);
}
.ope-product-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}
.ope-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s var(--ease);
}
.ope-product-card:hover .ope-product-card__media img {
	transform: scale(1.04);
}

/* No product photo yet: WooCommerce falls back to its placeholder image —
   hide it and show a branded mark instead of a broken-looking gray box. */
.ope-product-card__media img.woocommerce-placeholder {
	opacity: 0;
}
.ope-product-card__media:has(img.woocommerce-placeholder)::before {
	content: "\266A";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.5rem;
	color: var(--c-cream-soft);
	background: linear-gradient(160deg, var(--c-bg-dark) 0%, var(--c-line-dark) 100%);
}

.ope-product-card .ope-badge-new {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	line-height: 1;
	background: var(--c-cream) !important;
	color: var(--c-ink) !important;
	font-size: 0.68rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 2px;
	padding: 0.4em 0.6em;
}

/* Divi's shop module styles product-loop headings via
   .et_pb_shop .woocommerce ul.products li.product h1..h6 (5 classes) —
   #et-boc (an ID) is needed to reliably outrank that, not just !important. */
#et-boc .et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.ope-product-card__body .woocommerce-loop-product__title {
	font-size: 0.98rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	margin: 0 0 0.3em !important;
	color: var(--c-cream) !important;
}
.ope-product-card__body .price {
	font-size: 0.92rem;
	color: var(--c-cream-soft);
}
.ope-product-card__body .price ins {
	text-decoration: none;
	color: var(--c-cream);
}
.ope-product-card__body .price del {
	opacity: 0.6;
}
.ope-product-card .button {
	display: inline-block;
	margin-top: var(--space-3) !important;
	font-size: 0.82rem !important;
	padding: 0.6em 1.2em !important;
}
.woocommerce span.onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	font-size: 0.68rem !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 2px;
	padding: 0.4em 0.6em;
	z-index: 2;
}

/* Sorting / result count row */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.85rem;
	color: var(--c-cream-soft);
	margin-bottom: var(--space-4) !important;
}
.woocommerce .woocommerce-ordering select {
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------
   Single product — editorial two-column layout (see content-single-product.php)
   -------------------------------------------------------------------- */
.woocommerce div.product.ope-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: start;
	margin-bottom: var(--space-7);
}
.ope-product__gallery {
	grid-column: 1;
}
.ope-product__summary {
	grid-column: 2;
}
.ope-product__details {
	grid-column: 1 / -1;
}
@media (max-width: 900px) {
	.woocommerce div.product.ope-product {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
	.ope-product__gallery,
	.ope-product__summary,
	.ope-product__details {
		grid-column: 1;
	}
}

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-bg-dark);
}
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--radius-md);
}
/* No product photo yet — same branded fallback as the shop grid cards. */
.woocommerce div.product .woocommerce-product-gallery:has(img.woocommerce-placeholder) {
	position: relative;
	aspect-ratio: 1 / 1;
}
.woocommerce div.product .woocommerce-product-gallery img.woocommerce-placeholder {
	opacity: 0;
}
.woocommerce div.product .woocommerce-product-gallery:has(img.woocommerce-placeholder)::before {
	content: "\266A";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: var(--c-cream-soft);
	background: linear-gradient(160deg, var(--c-bg-dark) 0%, var(--c-line-dark) 100%);
	z-index: 1;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--c-cream) !important;
	font-size: 1.3rem;
	font-weight: 500;
}
.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: var(--space-2);
	color: var(--c-cream) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--c-cream-soft);
	line-height: 1.7;
}
.woocommerce div.product .ope-badge-new {
	display: inline-block;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	font-size: 0.68rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 2px;
	padding: 0.4em 0.7em;
	margin-bottom: var(--space-3);
}
.woocommerce div.product form.cart {
	margin-top: var(--space-4) !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}
/* "Buy now" is the primary action for a single-sheet purchase — solid gold
   button, shown first, distinct from the plain cream/ink duotone used
   everywhere else. "Add to cart" stays the secondary/ghost action. */
.woocommerce div.product form.cart .ope-buy-now-button {
	order: -1;
	background: var(--c-accent) !important;
	color: var(--gcid-secondary-color, #1C1712) !important;
	border: 1px solid var(--c-accent) !important;
}
.woocommerce div.product form.cart .ope-buy-now-button:hover {
	filter: brightness(1.12);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: transparent !important;
	color: var(--c-cream) !important;
	border: 1px solid var(--c-cream) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: rgba(254, 229, 199, 0.12) !important;
}

/* Quantity input + steppers */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--c-line-dark);
	border-radius: var(--radius-sm);
	overflow: hidden;
	vertical-align: middle;
}
.woocommerce .quantity .qty {
	width: 3.2em !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: center;
	-moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce .quantity .ope-qty-btn {
	background: var(--c-bg-dark-alt);
	border: none;
	width: 2.4em;
	font-size: 1rem;
	line-height: 1;
	color: var(--c-cream);
	cursor: pointer;
	transition: background-color 0.15s var(--ease);
}
.woocommerce .quantity .ope-qty-btn:hover {
	background: var(--c-line-dark);
}

/* Tabs — the "Buy now" single-tab case (Description only, once Reviews are
   disabled and there are no extra product attributes) drops the tab nav
   entirely via ope_maybe_flatten_product_tabs() and renders the panel
   directly, so there's no boxy tab bar for a single item. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--c-line-dark);
	padding: 0;
	margin: var(--space-6) 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 var(--space-4) 0 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-2) 0 !important;
	color: var(--c-cream-soft);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--c-cream);
	border-bottom-color: var(--c-cream);
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .ope-product-description {
	border: none !important;
	padding: var(--space-5) 0 0 !important;
	line-height: 1.7;
	color: var(--c-cream-soft);
}
.woocommerce div.product .ope-product-description {
	margin-top: var(--space-6);
}

/* Related products keep the same grid rules as ul.products above */
.woocommerce div.product .related.products {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line-dark);
}
.woocommerce div.product .related.products > h2 {
	font-size: 1.2rem;
	margin-bottom: var(--space-5);
	color: var(--c-cream) !important;
}

/* --------------------------------------------------------------------
   Single product (All Products) — Divi Theme Builder Custom Body built
   from .et_pb_wc_images / .et_pb_wc_title / .et_pb_wc_price /
   .et_pb_wc_add_to_cart / .et_pb_wc_meta / .et_pb_wc_tabs /
   .et_pb_wc_related_products. These modules default to
   et_pb_bg_layout_light (Divi has no attribute to flip this from content,
   confirmed via block_attributes introspection — not a guess), so their
   text stays dark-on-dark unless overridden here directly.
   -------------------------------------------------------------------- */
#et-boc .et_pb_wc_title h1,
#et-boc .et_pb_wc_title h2,
#et-boc .et_pb_wc_title {
	color: var(--c-cream) !important;
	font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
#et-boc .et_pb_wc_price,
#et-boc .et_pb_wc_price .price,
#et-boc .et_pb_wc_price .woocommerce-Price-amount {
	color: var(--c-cream) !important;
	font-size: 1.3rem !important;
	font-weight: 500;
}
#et-boc .et_pb_wc_meta,
#et-boc .et_pb_wc_meta a {
	color: var(--c-cream-soft) !important;
	font-size: 0.85rem;
}

/* Product description, moved into the summary column right under the
   buy buttons (see the "All Products Body Layout" Theme Builder body) —
   no card/white background and no "Description" heading: the dedicated
   Divi module just renders the raw content, unlike the old tabs module. */
#et-boc .et_pb_wc_description {
	color: var(--c-cream-soft);
	line-height: 1.7;
	margin-top: var(--space-4);
}
#et-boc .et_pb_wc_description p:first-child {
	margin-top: 0;
}
#et-boc .et_pb_wc_images .woocommerce-product-gallery {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-bg-dark-alt);
}
#et-boc .et_pb_wc_images .woocommerce-product-gallery img {
	border-radius: var(--radius-md);
}
#et-boc .et_pb_wc_images .woocommerce-product-gallery:has(img.woocommerce-placeholder) {
	position: relative;
	aspect-ratio: 1 / 1;
}
#et-boc .et_pb_wc_images .woocommerce-product-gallery img.woocommerce-placeholder {
	opacity: 0;
}
#et-boc .et_pb_wc_images .woocommerce-product-gallery:has(img.woocommerce-placeholder)::before {
	content: "\266A";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: var(--c-cream-soft);
	background: linear-gradient(160deg, var(--c-bg-dark) 0%, var(--c-line-dark) 100%);
	z-index: 1;
}

/* "Buy now" — [ope_buy_now_button] shortcode inside its own Code module,
   replacing the native WooCommerce "Add to Cart" module entirely (see
   inc/woocommerce.php and the "All Products Body Layout" Theme Builder
   body) — no native form/quantity field on the page at all anymore. */
#et-boc .ope-buy-now-button {
	background: var(--c-accent) !important;
	color: var(--gcid-secondary-color, #1C1712) !important;
	border: 1px solid var(--c-accent) !important;
	width: 100%;
	cursor: pointer;
}
#et-boc .ope-buy-now-button:hover {
	filter: brightness(1.12);
}
#et-boc .ope-buy-now-button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Divi adds its own hover-icon animation to buttons inside modules flagged
   with the icon feature, which fights our own hover transform — same fix
   already applied to .et_pb_button elsewhere: drop Divi's icon entirely. */
#et-boc .et_pb_wc_cart_totals a.checkout-button::after,
#et-boc .et_pb_wc_cart_totals a.checkout-button::before,
#et-boc .et_pb_wc_checkout_payment_info button::after,
#et-boc .et_pb_wc_checkout_payment_info button::before {
	display: none !important;
	content: none !important;
}

/* WooPayments' express-checkout button (Apple Pay / Google Pay / Link)
   renders right below. */
#et-boc .et_pb_wc_add_to_cart .wcpay-express-checkout-wrapper {
	margin-top: var(--space-3);
}

/* Spotify player — [ope_spotify_player] shortcode inside a static Code
   module, right after the buy button. */
#et-boc .ope-spotify-embed {
	margin-top: var(--space-4);
}
#et-boc .ope-spotify-embed iframe {
	display: block;
}

/* Product description (product-tabs module, includeTabs: ["description"]) */
#et-boc .et_pb_wc_tabs {
	color: var(--c-cream-soft);
	line-height: 1.7;
}
#et-boc .et_pb_wc_tabs h2,
#et-boc .et_pb_wc_tabs .woocommerce-Tabs-panel h2 {
	color: var(--c-cream) !important;
}

/* Related products */
#et-boc .et_pb_wc_related_products > h2 {
	color: var(--c-cream) !important;
	font-size: 1.2rem;
	margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------
   Cart & Checkout — Divi Theme Builder Custom Bodies built from the
   native .et_pb_wc_cart_products / .et_pb_wc_cart_totals /
   .et_pb_wc_checkout_billing / .et_pb_wc_checkout_order_details /
   .et_pb_wc_checkout_additional_info / .et_pb_wc_checkout_payment_info
   modules. Each one wraps WooCommerce's real classic markup (shop_table,
   cart_totals, form-billing, etc.) so all the selectors below target
   that — same elements the old shortcode-based cart/checkout used.
   -------------------------------------------------------------------- */
/* Demande client (2026-10-03) : meme principe que My Account - fond
   creme/texte encre plutot que sombre, sur panier ET checkout (ces
   classes .et_pb_wc_cart_* / .et_pb_wc_checkout_* sont EXACTEMENT les
   memes modules Divi sur les deux pages, cf. le commentaire d'en-tete -
   un seul jeu de regles couvre donc les deux). */
.et_pb_wc_cart_products,
.et_pb_wc_cart_totals,
.et_pb_wc_checkout_billing,
.et_pb_wc_checkout_order_details,
.et_pb_wc_checkout_additional_info {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	color: var(--c-ink);
}
/* Pas de fond/padding ici (voir plus bas, applique separement a
   table.shop_table et #payment) - juste la couleur de texte par defaut,
   au cas ou du texte existe hors de ces deux elements. */
.et_pb_wc_checkout_payment_info {
	color: var(--c-ink);
}

/* Cart line-item table */
.et_pb_wc_cart_products table.shop_table {
	border: none !important;
	border-collapse: collapse;
	width: 100%;
}
.et_pb_wc_cart_products table.cart th {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: rgba(28,23,18,0.7) !important;
	font-weight: 500;
	padding: 0 0 var(--space-2) !important;
}
.et_pb_wc_cart_products table.cart td {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	padding: var(--space-4) var(--space-2) !important;
	vertical-align: middle;
	color: var(--c-ink);
}
.et_pb_wc_cart_products table.cart td.product-thumbnail img {
	width: 84px;
	border-radius: var(--radius-sm);
}
.et_pb_wc_cart_products table.cart td.product-name a {
	font-weight: 500;
	color: var(--c-ink) !important;
	text-decoration: none;
}
.et_pb_wc_cart_products table.cart td.product-price,
.et_pb_wc_cart_products table.cart td.product-subtotal {
	color: var(--c-ink);
}
.et_pb_wc_cart_products table.cart td.product-remove a.remove {
	background: transparent !important;
	color: rgba(28,23,18,0.7) !important;
	font-size: 1.3rem !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
}
.et_pb_wc_cart_products table.cart td.product-remove a.remove:hover {
	background: transparent !important;
	color: var(--c-error) !important;
}
.et_pb_wc_cart_products table.cart td.actions .coupon {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.et_pb_wc_cart_products table.cart td.actions .coupon .input-text {
	width: auto;
	min-width: 180px;
	background: #fff !important;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.7em 1em;
}

/* Totals / order-review cards — the right-hand summary panel on both
   cart and checkout. Divi's Theme Builder gives these modules their own
   per-instance design settings (visible in the compiled
   et-core-unified-*.min.css as rules like
   "#order_review_heading{color:var(--gcid-primary-color)}"), which can
   drift out of sync with this stylesheet whenever someone touches the
   module in the Visual Builder. !important on every text-color
   declaration here (not just the box itself) keeps this panel reliably
   dark-on-creme regardless of that drift. */
.et_pb_wc_cart_totals,
.et_pb_wc_checkout_order_details {
	color: var(--c-ink) !important;
}
.et_pb_wc_cart_totals h2,
.et_pb_wc_checkout_order_details h3,
.et_pb_wc_checkout_additional_info h3 {
	font-size: 1.05rem !important;
	color: var(--c-ink) !important;
	margin-bottom: var(--space-3) !important;
}
.et_pb_wc_cart_totals table.shop_table th,
.et_pb_wc_cart_totals table.shop_table td,
.et_pb_wc_checkout_order_details table.shop_table th,
.et_pb_wc_checkout_order_details table.shop_table td {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	padding: var(--space-2) 0 !important;
	color: var(--c-ink) !important;
}
.et_pb_wc_cart_totals table.shop_table tr:last-child th,
.et_pb_wc_cart_totals table.shop_table tr:last-child td,
.et_pb_wc_checkout_order_details table.shop_table tr:last-child th,
.et_pb_wc_checkout_order_details table.shop_table tr:last-child td {
	border-bottom: none !important;
}
.et_pb_wc_cart_totals .order-total .amount,
.et_pb_wc_checkout_order_details .order-total .amount {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--c-ink) !important;
}
.et_pb_wc_cart_totals table.shop_table td.product-name,
.et_pb_wc_checkout_order_details table.shop_table td.product-name,
.et_pb_wc_cart_totals table.shop_table td.product-name a,
.et_pb_wc_checkout_order_details table.shop_table td.product-name a {
	color: var(--c-ink) !important;
}
.et_pb_wc_cart_totals table.shop_table td.product-name .product-quantity,
.et_pb_wc_checkout_order_details table.shop_table td.product-name .product-quantity {
	color: rgba(28,23,18,0.7) !important;
}
.et_pb_wc_cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	width: 100%;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-color: var(--c-ink) !important;
}
.et_pb_wc_cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
	filter: brightness(1.35);
}

/* Checkout billing form */
.et_pb_wc_checkout_billing .form-row label {
	font-size: 0.8rem;
	color: rgba(28,23,18,0.7);
	margin-bottom: 0.3em;
	display: inline-block;
}
.et_pb_wc_checkout_billing .form-row .required {
	color: var(--c-error);
	text-decoration: none;
}
.et_pb_wc_checkout_billing input.input-text,
.et_pb_wc_checkout_billing select,
.et_pb_wc_checkout_billing textarea,
.et_pb_wc_checkout_additional_info textarea {
	background: #fff !important;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.8em 1em;
}
.et_pb_wc_checkout_billing .select2-container .select2-selection--single {
	background: #fff !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-sm) !important;
	height: auto;
	padding: 0.4em 0;
}

/* Payment methods */
.et_pb_wc_checkout_payment_info ul.wc_payment_methods {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
.et_pb_wc_checkout_payment_info ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-2) !important;
	padding: var(--space-3) !important;
}
.et_pb_wc_checkout_payment_info ul.wc_payment_methods li.wc_payment_method label {
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--c-ink);
}
.et_pb_wc_checkout_payment_info ul.wc_payment_methods li.wc_payment_method .payment_box {
	background: #fff !important;
	color: rgba(28,23,18,0.7);
	margin-top: var(--space-3) !important;
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
}
.et_pb_wc_checkout_payment_info ul.wc_payment_methods li.wc_payment_method .payment_box::before {
	display: none;
}
.et_pb_wc_checkout_payment_info .woocommerce-terms-and-conditions-wrapper {
	margin: var(--space-3) 0 !important;
	font-size: 0.85rem;
	color: rgba(28,23,18,0.7);
}
/* Demande client : bouton sombre (encre/creme), plus l'accent dore -
   coherent avec le reste du site, voir [[feedback-maxime-verdoni-accent-
   color-usage]] (reserver l'accent au tertiaire). */
.et_pb_wc_checkout_payment_info #place_order {
	width: 100%;
	margin-top: var(--space-4) !important;
	font-size: 1rem !important;
	padding: 1.1em 1.6em !important;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border: 1px solid var(--c-ink) !important;
}
.et_pb_wc_checkout_payment_info #place_order:hover {
	filter: brightness(1.35);
}

.et_pb_wc_checkout_payment_info .woocommerce-privacy-policy-text,
.et_pb_wc_checkout_payment_info .wc_payment_method a,
.et_pb_wc_checkout_payment_info .woocommerce-order p {
	color: rgba(28,23,18,0.7) !important;
}
.et_pb_wc_checkout_payment_info .woocommerce-order .woocommerce-order-overview {
	color: rgba(28,23,18,0.7) !important;
}
.et_pb_wc_checkout_payment_info .woocommerce-order .woocommerce-order-overview li strong {
	color: var(--c-ink) !important;
}

/* Lien "Click here to enter your code" du prompt coupon (checkout) - deja
   sur fond clair par defaut de WooCommerce/Divi (pas touche ici), mais
   heritait du texte creme global du site, invisible dessus. Classe
   .showcoupon confirmee reelle (woocommerce/templates/checkout/form-
   coupon.php), pas devinee. */
.showcoupon {
	color: var(--c-ink) !important;
	font-weight: 600;
	text-decoration: underline;
}

/* Demande client : supprimer le padding de ce module precis (Theme
   Builder, Infos de paiement au checkout). */
.et_pb_wc_checkout_payment_info_0_tb_body {
	padding: 0 !important;
}
/* Confirme par le client via DevTools (2026-10-03) : Divi genere sa
   propre regle sur ce module au niveau instance -
   ".et_pb_wc_checkout_payment_info_0_tb_body.et_pb_wc_checkout_payment_info
   { background-color: rgba(235,233,235,0) }" (2 classes combinees) - plus
   specifique que notre .et_pb_wc_checkout_payment_info seul, elle gagnait
   donc sur le fond. Plutot que la combattre en specificite, on suit la
   demande client : le wrapper reste transparent (laisse le fond sombre de
   la page), et le creme est applique separement sur les deux elements
   reels qu'il contient - le tableau de recap (table.shop_table, rendu par
   WooCommerce/review-order.php) et la zone de paiement
   (#payment, id natif WooCommerce - checkout/payment.php) - deux cartes
   visuellement distinctes plutot qu'une seule fusionnee. */
.et_pb_wc_checkout_payment_info table.shop_table {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	margin-bottom: var(--space-4);
}
.et_pb_wc_checkout_payment_info #payment {
	background: var(--c-cream) !important;
	border-radius: var(--radius-md);
	padding: var(--space-5);
}
/* Filet de securite pour le bouton de paiement - "Place order" au
   checkout normal, "Pay for order" sur la page de paiement d'une
   commande en attente (pay_for_order, gabarit different, pas forcement
   enveloppe par .et_pb_wc_checkout_payment_info). #place_order est l'id
   natif WooCommerce dans les deux cas - cible directement, plus fiable
   qu'un chemin de wrapper qui peut differer. */
#place_order {
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border: 1px solid var(--c-ink) !important;
}
#place_order:hover {
	filter: brightness(1.35);
}

/* Notices WooCommerce (succes/erreur/info) sur tout le parcours d'achat
   sombre, y compris order-received qui garde la classe body
   woocommerce-checkout - la regle generale de theme.css (voir
   ".woocommerce-message" etc.) suppose le fond clair par defaut du reste
   du site (texte encre sur un fond a peine plus sombre que la page) :
   sur ce fond deja sombre, meme couleur de texte que de fond = illisible
   ("marron sur marron"). Override necessairement !important lui aussi
   pour battre celui de theme.css. */
body.woocommerce-shop .woocommerce-message,
body.woocommerce-shop .woocommerce-notice,
body.single-product .woocommerce-message,
body.single-product .woocommerce-notice,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-notice,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-notice {
	background: var(--c-bg-dark-alt) !important;
	border-left-color: var(--c-cream) !important;
	color: var(--c-cream) !important;
}
body.woocommerce-shop .woocommerce-notice--error,
body.single-product .woocommerce-notice--error,
body.woocommerce-cart .woocommerce-notice--error,
body.woocommerce-checkout .woocommerce-notice--error,
body.woocommerce-shop .woocommerce-error,
body.single-product .woocommerce-error,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	border-left-color: var(--c-error) !important;
	background: var(--c-error-bg) !important;
	color: var(--c-cream) !important;
}

@media (max-width: 900px) {
	#et-boc .et_pb_row {
		flex-wrap: wrap;
	}
}

/* --------------------------------------------------------------------
   Order received / My account
   -------------------------------------------------------------------- */
/* Le site entier a un fond sombre par defaut (voir body{background-color:
   var(--c-bg)} plus haut) - seules certaines sections Divi choisissent
   explicitement un fond clair. My Account (comme order-received) n'a
   aucune section Divi, donc reste sur ce fond sombre par defaut - verifie
   reellement (body.woocommerce-account, pas de classe "light" ni de
   section custom). Cette regle etait ecrite a tort avec les jetons du
   theme clair (--c-ink/--c-muted/--c-line/--c-surface, penses pour un
   fond clair), d'ou le "noir sur noir" - jetons sombres partout ici. */
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received .woocommerce-thankyou-order-received {
	background: var(--c-bg-dark-alt);
	border: 1px solid var(--c-line-dark);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	color: var(--c-cream);
}
.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: 0 !important;
	margin: 0 0 var(--space-5) !important;
	border-bottom: 1px solid var(--c-line-dark);
	padding-bottom: var(--space-4) !important;
}
.woocommerce-order-overview li {
	font-size: 0.85rem;
	color: var(--c-cream-soft);
}
.woocommerce-order-overview li strong {
	display: block;
	color: var(--c-cream);
	font-size: 0.95rem;
	margin-top: 0.2em;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--c-line-dark);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--c-line-dark);
}
.woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--space-2) var(--space-3);
	color: var(--c-cream-soft);
	text-decoration: none;
	font-size: 0.8rem;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--c-cream);
	font-weight: 500;
	background: var(--c-bg-dark-alt);
}

/* ---- My Account content cards (tableaux, resume dashboard, Wordfence) ----
   Demande client (2026-10-03) : le fond sombre par defaut rendait les
   tableaux (commandes, telechargements) peu lisibles, en plus de ne pas
   gerer correctement les boutons d'action qui debordaient. Bascule sur
   des cartes fond creme, coherentes avec le reste du design (paire
   creme/encre) - cf. [[feedback-maxime-verdoni-accent-color-usage]].
   Note : table.woocommerce-MyAccount-downloads-table n'etait meme plus
   la vraie classe du tableau de telechargements depuis une mise a jour
   WooCommerce (reel : table.woocommerce-table--order-downloads, confirme
   via templates/order/order-downloads.php) - corrige au passage. */
.ope-account-card {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	color: var(--c-ink);
}
.ope-account-card h2,
.ope-account-card h3,
.ope-account-card p,
.ope-account-card li,
.ope-account-card label {
	color: var(--c-ink);
}

/* Resume dashboard (commandes/telechargements/abonnements) - voir
   woocommerce_account_dashboard dans inc/woocommerce.php. */
.ope-account-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-4);
	margin: var(--space-4) 0 var(--space-5);
}
.ope-account-summary__item {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	color: var(--c-ink);
	text-decoration: none;
	display: block;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ope-account-summary__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(21,21,20,0.18);
}
.ope-account-summary__value {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-ink);
}
.ope-account-summary__label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(28,23,18,0.7);
	margin-top: 0.3em;
}

/* Tableaux (commandes, telechargements) - fond creme, bordures internes
   discretes, pas de debordement du a des boutons trop larges. */
table.woocommerce-orders-table,
table.woocommerce-table--order-downloads {
	background: var(--c-cream);
	border: none !important;
	border-radius: var(--radius-md);
	border-collapse: separate;
	overflow: hidden;
	color: var(--c-ink);
	width: 100%;
	padding: var(--space-3);
}
table.woocommerce-orders-table th,
table.woocommerce-table--order-downloads th {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: rgba(28,23,18,0.7);
	font-weight: 500;
	padding: var(--space-3) var(--space-4);
}
table.woocommerce-orders-table td,
table.woocommerce-table--order-downloads td {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	color: var(--c-ink);
	padding: var(--space-3) var(--space-4);
}
/* Le padding sur <table> (ci-dessus) ne cree de l'air qu'au-dessus/
   dessous et a gauche/droite de la grille entiere - pas entre chaque
   cellule et son propre bord de grille. Sans ca, la 1ere/derniere colonne
   touchait quand meme le bord arrondi de la carte (2026-10-03, retour
   client : "tout est colle au bloc creme"). */
table.woocommerce-orders-table th:first-child,
table.woocommerce-orders-table td:first-child,
table.woocommerce-table--order-downloads th:first-child,
table.woocommerce-table--order-downloads td:first-child {
	padding-left: var(--space-5);
}
table.woocommerce-orders-table th:last-child,
table.woocommerce-orders-table td:last-child,
table.woocommerce-table--order-downloads th:last-child,
table.woocommerce-table--order-downloads td:last-child {
	padding-right: var(--space-5);
}
table.woocommerce-orders-table tr:last-child td,
table.woocommerce-table--order-downloads tr:last-child td {
	border-bottom: none !important;
}
table.woocommerce-orders-table td a,
table.woocommerce-table--order-downloads td a {
	color: var(--c-ink) !important;
}

/* Boutons d'action dans ces tableaux (Voir/Payer/Annuler, Telecharger) :
   variante encre/creme (le fond creme par defaut des boutons - theme.css -
   serait invisible sur le fond creme du tableau), plus petits et espaces
   plutot que colles/en debordement (plusieurs actions possibles sur une
   meme commande). */
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions,
table.woocommerce-table--order-downloads td.download-file {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
table.woocommerce-orders-table td a.button,
table.woocommerce-table--order-downloads td a.button {
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-color: var(--c-ink) !important;
	font-size: 0.8rem !important;
	padding: 0.5em 1em !important;
	margin: 0 !important;
}
table.woocommerce-orders-table td a.button:hover,
table.woocommerce-table--order-downloads td a.button:hover {
	filter: brightness(1.35);
}

/* Lien "Voir mes abonnements" ajoute en haut de l'onglet Commandes (voir
   woocommerce_before_account_orders dans inc/woocommerce.php). Meme fond
   creme que le tableau juste en dessous + marge trop faible (2026-10-03,
   retour client) : le bouton semblait "colle"/fusionne au coin du
   tableau, comme un onglet de navigateur. Variante encre (comme les
   boutons du tableau) + marge nette pour bien le detacher. */
.ope-account-orders-subscriptions-link {
	display: inline-block;
	margin: 0 0 var(--space-5) !important;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-color: var(--c-ink) !important;
}
.ope-account-orders-subscriptions-link:hover {
	filter: brightness(1.35);
}

/* Espacement general entre boutons qui se suivent sur My Account
   (formulaires adresses/compte, etc.) - ils se touchaient sinon. */
.woocommerce-MyAccount-content .button + .button,
.woocommerce-MyAccount-content .woocommerce-Button + .woocommerce-Button,
.woocommerce-MyAccount-content .button + .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-Button + .button {
	margin-left: var(--space-3);
}
.woocommerce-MyAccount-content .woocommerce-Button.button {
	margin-top: var(--space-2);
}

/* ---- Onglet Abonnements (Subscriptions For WooCommerce) ----
   Demande client (2026-10-03) : meme fond creme + texte uniformise que
   les autres onglets. Le template reellement utilise ici (confirme via
   le fichier source du plugin, pas devine - voir
   wps-subscriptions.php, PAS wps-subscriptions-aurora.php qui n'est pas
   actif sur ce site) est un <table> brut, SANS classe du tout sur la
   balise table elle-meme - on cible donc via son conteneur reel,
   .wps_sfw_account_wrap, seul element stable disponible. Les cellules
   reutilisent les memes classes BEM que le tableau Commandes
   (woocommerce-orders-table__cell-*) mais SANS l'ancetre
   table.woocommerce-orders-table requis par nos regles plus haut - d'ou
   un bloc dedie plutot qu'une simple extension de selecteur. */
.wps_sfw_account_wrap {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	overflow: hidden;
}
.wps_sfw_account_wrap table {
	width: 100%;
	border-collapse: separate;
	color: var(--c-ink);
}
.wps_sfw_account_wrap th {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: rgba(28,23,18,0.7) !important;
	font-weight: 500;
	padding: var(--space-3) var(--space-4);
	text-align: left;
}
.wps_sfw_account_wrap td {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	color: var(--c-ink) !important;
	padding: var(--space-3) var(--space-4);
}
.wps_sfw_account_wrap tr:last-child td {
	border-bottom: none !important;
}
.wps_sfw_account_wrap th:first-child,
.wps_sfw_account_wrap td:first-child {
	padding-left: var(--space-5);
}
.wps_sfw_account_wrap th:last-child,
.wps_sfw_account_wrap td:last-child {
	padding-right: var(--space-5);
}
/* Lien "Show" -> meme bouton encre/creme que les actions du tableau
   Commandes, au lieu d'un lien texte seul (incoherent avec le reste). */
.wps_sfw_account_wrap a {
	display: inline-block;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-radius: var(--radius-sm);
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.5em 1em;
	text-decoration: none !important;
}
.wps_sfw_account_wrap a:hover {
	filter: brightness(1.35);
}
/* Le lien de la colonne "Parent ID" (#720 etc.) n'est pas une action -
   le transformer en bouton comme "Show" serait confus. Redonne un style
   simple de lien texte juste pour celui-la. */
.wps_sfw_account_wrap td.woocommerce-orders-table__cell-parent-id a {
	display: inline;
	background: none !important;
	color: var(--c-ink) !important;
	padding: 0;
	font-weight: 400;
	text-decoration: underline !important;
}

/* ---- Page detail d'un abonnement ("Show") ----
   Gabarit reel confirme : wps-show-subscription-details.php (PAS la
   variante -aurora.php, inactive sur ce site - meme piege que pour la
   liste). Deux blocs "Subscription Details" / "Subscription Order
   Details", meme classe .wps_sfw_account_additional_wrap pour les deux.
   Les lignes alternaient blanc/noir (2026-10-03, retour client) - la
   table <table class="shop_table ..."> partage sa classe "shop_table"
   avec plein d'autres contextes du site (CSS WooCommerce core + nos
   propres regles .et_pb_wc_* ailleurs dans ce fichier) sans qu'aucune
   regle a nous ne force explicitement le fond de CES lignes - plutot que
   chercher laquelle gagne, on fixe le fond de chaque ligne/cellule sans
   condition pour eliminer toute ambiguite de cascade. */
.wps_sfw_account_additional_wrap {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}
.wps_sfw_account_additional_wrap h3 {
	color: var(--c-ink);
	margin-bottom: var(--space-3);
}
.wps_sfw_account_additional_wrap table {
	width: 100%;
	border-collapse: separate;
}
.wps_sfw_account_additional_wrap table tr,
.wps_sfw_account_additional_wrap table td {
	background: transparent !important;
	color: var(--c-ink) !important;
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	padding: var(--space-2) 0;
}
.wps_sfw_account_additional_wrap table tr:last-child td {
	border-bottom: none !important;
}
.wps_sfw_account_additional_wrap table td:first-child {
	color: rgba(28,23,18,0.7) !important;
	width: 40%;
}
.wps_sfw_account_additional_wrap .button {
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-color: var(--c-ink) !important;
	font-size: 0.8rem !important;
	padding: 0.5em 1em !important;
}
.wps_sfw_account_additional_wrap .button:hover {
	filter: brightness(1.35);
}
.wps_sfw_sub_detail_back {
	display: none;
}
.wps_sfw_sub_detail_back svg path {
	fill: var(--c-cream-soft);
}

/* ---- Page "View" d'une commande (My Account > Commandes > View) ----
   Demande client (2026-10-03) : meme fond creme que le reste. Deux
   sections WooCommerce reelles (templates order/order-details.php et
   order/order-details-customer.php), chacune deja un <section> dedie -
   pas besoin d'inventer un wrapper. Le tableau de telechargements eventuel
   (order/order-downloads.php) reutilise deja .woocommerce-table--order-
   downloads, traite plus haut - rien a refaire ici pour lui. */
.woocommerce-order-details,
.woocommerce-customer-details {
	background: var(--c-cream);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	color: var(--c-ink);
}
.woocommerce-order-details__title,
.woocommerce-column__title {
	color: var(--c-ink);
}
.woocommerce-order-details table {
	width: 100%;
	border-collapse: separate;
}
.woocommerce-order-details table th,
.woocommerce-order-details table td {
	border: none !important;
	border-bottom: 1px solid var(--c-line) !important;
	color: var(--c-ink) !important;
	padding: var(--space-3) var(--space-4);
}
.woocommerce-order-details table thead th {
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: rgba(28,23,18,0.7) !important;
	font-weight: 500;
}
.woocommerce-order-details table tbody tr:last-child td,
.woocommerce-order-details table tfoot tr:last-child td,
.woocommerce-order-details table tfoot tr:last-child th {
	border-bottom: none !important;
}
.woocommerce-order-details table td a,
.woocommerce-order-details table th a {
	color: var(--c-ink) !important;
}
.woocommerce-order-details table .order-actions-button {
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border-color: var(--c-ink) !important;
	font-size: 0.8rem !important;
	padding: 0.5em 1em !important;
	margin: 0 var(--space-2) var(--space-1) 0 !important;
}
.woocommerce-order-details table .order-actions-button:hover {
	filter: brightness(1.35);
}
.woocommerce-customer-details address,
.woocommerce-customer-details p {
	color: var(--c-ink) !important;
	font-style: normal;
}

/* ---- Wordfence 2FA / Passkeys (onglet My Account) ----
   DEUX conteneurs racine distincts, confirmes dans le code source du
   plugin (pas devine) - chaque onglet a son propre point d'entree PHP :
   - #wfls-management-embedded : onglet "2FA", vue
     views/page/manage-embedded.php.
   - #wfls-passkey-management-embedded : onglet "Passkeys", vue
     views/passkey/manage.php (via views/page/passkey-embedded.php).
   Les 3 premiers essais (2026-10-03) ne corrigeaient QUE le premier -
   le retour client venait systematiquement de l'onglet Passkeys, jamais
   touche. Confirme aussi par le client via DevTools : la couleur vient
   bien de body{color:var(--gcid-body-color,#f2e8d8)} (Divi, pas
   !important) et le fond blanc de chaque bloc individuel vient de
   .wfls-block{background-color:#fff} (modules/login-security/css/
   admin.css) - pas besoin d'opacity, un simple id (specificite
   superieure a l'element "body" seul) suffit sans meme de !important
   pour la couleur. */
#wfls-management-embedded,
#wfls-passkey-management-embedded {
	background: var(--c-cream);
	color: var(--c-ink);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
#wfls-management-embedded *,
#wfls-passkey-management-embedded * {
	color: var(--c-ink) !important;
}
/* Meme logique que le champ "Forms" global (theme.css) mais celui-ci
   force un fond sombre (pense pour le reste du site, fond sombre par
   defaut) - invisible sur ce panneau clair. */
#wfls-management-embedded input[type="text"],
#wfls-management-embedded input[type="email"],
#wfls-management-embedded input[type="password"],
#wfls-management-embedded input[type="number"],
#wfls-management-embedded input[type="search"],
#wfls-management-embedded textarea,
#wfls-management-embedded select,
#wfls-passkey-management-embedded input[type="text"],
#wfls-passkey-management-embedded input[type="email"],
#wfls-passkey-management-embedded input[type="password"],
#wfls-passkey-management-embedded input[type="number"],
#wfls-passkey-management-embedded input[type="search"],
#wfls-passkey-management-embedded textarea,
#wfls-passkey-management-embedded select {
	background: #fff !important;
	color: var(--c-ink) !important;
	border-color: var(--c-line) !important;
}