/* ===================================================================
   MAISON TRESSANE — styles WooCommerce
   Boutique, fiche produit, panier, commande, compte client.
   =================================================================== */

/* -------------------------------------------------
   1. Messages WooCommerce
   ------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	list-style: none;
	margin: 0 0 28px;
	padding: 1.15em 1.5em;
	background: var(--blanc);
	border: 1px solid var(--bordure);
	border-left: 2px solid var(--champagne);
	font-size: .92rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--rouge); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--noir);
	color: var(--creme);
	padding: .72em 1.5em;
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	border: 1px solid var(--noir);
	transition: background var(--t), color var(--t);
	white-space: nowrap;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--noir); }

/* -------------------------------------------------
   2. Barre d'outils de la boutique
   ------------------------------------------------- */
.boutique-barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	margin-bottom: clamp(30px, 4vw, 48px);
	border-bottom: 1px solid var(--bordure-2);
}
.woocommerce-result-count {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris);
}
.woocommerce-ordering select {
	background: transparent;
	border: 1px solid var(--bordure-2);
	padding: .72em 2.4em .72em 1.1em;
	font-size: .78rem;
	letter-spacing: .1em;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236f6a64' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	cursor: pointer;
}
.woocommerce-ordering select:focus { border-color: var(--champagne); outline: none; }

/* Filtres par categorie */
.filtres-cat { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.6vw, 44px); }
.filtres-cat a {
	padding: .68em 1.4em;
	border: 1px solid var(--bordure-2);
	font-size: .72rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	transition: all var(--t);
}
.filtres-cat a:hover { border-color: var(--champagne); color: var(--champagne-2); }
.filtres-cat a.is-actif { background: var(--noir); color: var(--creme); border-color: var(--noir); }

/* -------------------------------------------------
   3. Grille de produits
   ------------------------------------------------- */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { ul.products, ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { ul.products, ul.products.columns-4, ul.products.columns-2 { grid-template-columns: 1fr; } }

ul.products li.product { position: relative; display: flex; flex-direction: column; }
ul.products li.product::before, ul.products li.product::after { display: none; }

.produit-media {
	position: relative;
	overflow: hidden;
	background: var(--creme-2);
	aspect-ratio: 4/5;
	margin-bottom: 18px;
	display: block;
}
.produit-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(.22,.61,.36,1), opacity var(--t);
}
li.product:hover .produit-media img { transform: scale(1.06); }

/* Deuxieme image au survol */
.produit-media__alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
li.product:hover .produit-media__alt { opacity: 1; }

/* Etiquettes */
.produit-etiq {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: flex-start;
}
.produit-etiq span {
	background: var(--noir);
	color: var(--creme);
	padding: .48em 1em;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
}
.produit-etiq .etiq--promo { background: var(--champagne); color: var(--noir); }
.produit-etiq .etiq--rupture { background: var(--gris); }

/* Bouton d'ajout qui apparait au survol */
.produit-action {
	position: absolute;
	left: 12px; right: 12px; bottom: 12px;
	z-index: 3;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--t), transform var(--t);
}
li.product:hover .produit-action { opacity: 1; transform: translateY(0); }
@media (hover: none) { .produit-action { opacity: 1; transform: none; } }

.produit-action .button,
.produit-action .added_to_cart {
	display: block;
	width: 100%;
	background: var(--blanc);
	color: var(--noir);
	border: 1px solid var(--blanc);
	padding: 1em;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.produit-action .button:hover,
.produit-action .added_to_cart:hover { background: var(--champagne); border-color: var(--champagne); }
.produit-action .button.loading { opacity: .65; }
.produit-action .added_to_cart { margin-top: 8px; background: var(--noir); color: var(--creme); border-color: var(--noir); }

.produit-infos { display: flex; flex-direction: column; gap: 7px; }
.produit-cat { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-2); }
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--serif);
	font-size: clamp(1.02rem, 1.35vw, 1.2rem);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	transition: color var(--t);
}
li.product:hover .woocommerce-loop-product__title { color: var(--champagne-2); }

.price, ul.products li.product .price {
	font-family: var(--sans);
	font-size: .98rem;
	font-weight: 500;
	color: var(--noir);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .6em;
	flex-wrap: wrap;
}
.price del { color: var(--gris-2); font-weight: 300; text-decoration: line-through; opacity: .8; }
.price ins { text-decoration: none; color: var(--rouge); font-weight: 500; }

/* Note en etoiles */
.star-rating {
	display: inline-block;
	position: relative;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	font-size: .74rem;
	line-height: 1;
	font-family: var(--sans);
	letter-spacing: .1em;
	color: var(--champagne);
}
.star-rating::before { content: '\2605\2605\2605\2605\2605'; color: var(--bordure); position: absolute; left: 0; top: 0; }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: '\2605\2605\2605\2605\2605'; position: absolute; left: 0; top: 0; color: var(--champagne); }
.produit-note { display: flex; align-items: center; gap: 9px; font-size: .76rem; color: var(--gris); }

/* -------------------------------------------------
   4. Fiche produit
   ------------------------------------------------- */
.produit-single { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .produit-single { grid-template-columns: 1fr; } }

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery .flex-control-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li { cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: .55;
	transition: opacity var(--t);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 5;
	width: 42px; height: 42px;
	background: var(--blanc);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0;
	box-shadow: var(--ombre);
}
.woocommerce-product-gallery__trigger::after {
	content: '';
	width: 15px; height: 15px;
	border: 1.4px solid var(--noir);
	border-radius: 50%;
	box-shadow: 6px 6px 0 -4px var(--noir);
	transform: translate(-2px,-2px);
}

.summary .product_title {
	font-family: var(--serif);
	font-size: clamp(1.85rem, 3.2vw, 2.7rem);
	line-height: 1.12;
	margin: .25em 0 .45em;
}
.summary .price { font-size: 1.42rem; margin-bottom: 1.1em; }
.summary .woocommerce-product-details__short-description { color: var(--gris); line-height: 1.8; margin-bottom: 1.8em; }
.summary .woocommerce-product-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 1.3em; font-size: .8rem; }
.summary .woocommerce-review-link { color: var(--gris); border-bottom: 1px solid var(--bordure); }

/* Variantes (longueur, couleur, texture) */
.variations { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.variations tr { display: block; margin-bottom: 20px; }
.variations th, .variations td { display: block; text-align: left; padding: 0; border: 0; }
.variations th label {
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
	margin-bottom: 10px;
	display: block;
}
.variations select {
	width: 100%;
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .95em 2.6em .95em 1.1em;
	font-size: .95rem;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236f6a64' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1em center;
	cursor: pointer;
}
.variations select:focus { border-color: var(--champagne); outline: none; }
.reset_variations {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
	border-bottom: 1px solid var(--bordure);
	display: inline-block;
	margin-top: 8px;
}
.woocommerce-variation-price { margin-bottom: 1.1em; }

/* Quantite + ajout au panier */
form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-bottom: 1.8em; }
form.cart.variations_form { display: block; }
form.cart.variations_form .woocommerce-variation-add-to-cart { display: flex; gap: 12px; flex-wrap: wrap; }

.quantity { display: inline-flex; align-items: center; border: 1px solid var(--bordure-2); background: var(--blanc); }
.quantity .qte-btn { width: 44px; height: 100%; min-height: 54px; display: grid; place-items: center; font-size: 1.1rem; color: var(--gris); transition: color var(--t); }
.quantity .qte-btn:hover { color: var(--champagne-2); }
.quantity input.qty {
	width: 48px;
	min-height: 54px;
	border: 0;
	text-align: center;
	font-size: .98rem;
	background: transparent;
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 54px;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: 1em 2.2em;
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.single_add_to_cart_button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--noir); }
.single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

/* Reassurance sous le bouton */
.produit-garanties { list-style: none; margin: 0 0 1.8em; padding: 0; display: grid; gap: 11px; }
.produit-garanties li { display: flex; gap: 12px; align-items: center; font-size: .88rem; color: var(--gris); }
.produit-garanties svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: var(--champagne-2); fill: none; stroke-width: 1.5; }

.product_meta { font-size: .78rem; color: var(--gris); padding-top: 1.5em; border-top: 1px solid var(--bordure-2); display: grid; gap: 7px; letter-spacing: .05em; }
.product_meta a:hover { color: var(--champagne-2); }

/* Onglets */
.woocommerce-tabs { margin-top: clamp(56px, 7vw, 96px); }
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	display: flex;
	gap: clamp(18px, 3vw, 44px);
	border-bottom: 1px solid var(--bordure-2);
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 16px;
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
	position: relative;
}
.woocommerce-tabs ul.tabs li a::after {
	content: '';
	position: absolute;
	left: 0; bottom: -1px;
	width: 100%; height: 1px;
	background: var(--champagne);
	transform: scaleX(0);
	transition: transform var(--t);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--noir); }
.woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }
.woocommerce-Tabs-panel { max-width: 78ch; line-height: 1.85; color: var(--noir-2); }
.woocommerce-Tabs-panel h2 { display: none; }
.woocommerce-Tabs-panel table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td { border-bottom: 1px solid var(--bordure-2); padding: 13px 0; text-align: left; font-size: .93rem; }
.woocommerce-Tabs-panel table.shop_attributes th { width: 220px; font-weight: 500; letter-spacing: .08em; }
.woocommerce-Tabs-panel table.shop_attributes td p { margin: 0; }

/* Avis produit */
#reviews .commentlist { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 26px; }
#reviews .comment_container { display: flex; gap: 18px; align-items: flex-start; }
#reviews .comment_container img { width: 52px; height: 52px; border-radius: 50%; }
#reviews .comment-text { flex: 1; border-bottom: 1px solid var(--bordure-2); padding-bottom: 24px; }
#reviews .woocommerce-review__author { font-weight: 500; letter-spacing: .08em; }
#reviews .woocommerce-review__published-date { font-size: .78rem; color: var(--gris-2); margin-left: 8px; }
#reviews .comment-form { display: grid; gap: 16px; max-width: 680px; }
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	width: 100%;
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .95em 1.1em;
	font-size: .95rem;
}
#reviews .comment-form label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); display: block; margin-bottom: 7px; }
#reviews .comment-form .submit {
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: 1em 2.4em;
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	justify-self: start;
	transition: background var(--t), color var(--t);
}
#reviews .comment-form .submit:hover { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }
.comment-form-rating p.stars a { color: var(--champagne); font-size: 1.15rem; }

/* Produits associes */
.related, .upsells { margin-top: clamp(60px, 8vw, 110px); }
.related > h2, .upsells > h2 {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	margin-bottom: clamp(28px, 3.6vw, 44px);
	text-align: center;
}

/* -------------------------------------------------
   5. PANIER
   Grille 2 colonnes stylee explicitement : WooCommerce
   ne la garantit pas selon les versions.
   ------------------------------------------------- */
.panier-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (max-width: 950px) { .panier-layout { grid-template-columns: 1fr; } }

.woocommerce-cart-form { min-width: 0; }
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
table.shop_table th {
	text-align: left;
	padding: 0 14px 16px 0;
	border-bottom: 1px solid var(--bordure-2);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gris);
}
table.shop_table td { padding: 22px 14px 22px 0; border-bottom: 1px solid var(--bordure-2); vertical-align: middle; }
table.shop_table td:last-child, table.shop_table th:last-child { padding-right: 0; text-align: right; }

td.product-remove { width: 34px; padding-right: 0; }
td.product-remove a.remove {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border: 1px solid var(--bordure-2);
	border-radius: 50%;
	color: var(--gris);
	font-size: 1rem;
	line-height: 1;
	transition: all var(--t);
}
td.product-remove a.remove:hover { border-color: var(--rouge); color: var(--rouge); }

td.product-thumbnail { width: 96px; }
td.product-thumbnail img { width: 88px; height: 110px; object-fit: cover; }
td.product-name a { font-family: var(--serif); font-size: 1.06rem; }
td.product-name a:hover { color: var(--champagne-2); }
td.product-name .variation {
	margin: 6px 0 0;
	font-size: .78rem;
	color: var(--gris);
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}
td.product-name .variation dt { font-weight: 500; }
td.product-name .variation dd { margin: 0; }
td.product-quantity .quantity { border: 1px solid var(--bordure-2); }
td.product-quantity .quantity input.qty { min-height: 44px; width: 44px; }
td.product-quantity .quantity .qte-btn { min-height: 44px; width: 36px; }
td.product-subtotal { font-weight: 500; }

.actions { padding-top: 26px !important; border-bottom: 0 !important; }
.actions .coupon { display: flex; gap: 10px; float: left; flex-wrap: wrap; }
.actions .coupon input[type="text"] {
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .9em 1.1em;
	font-size: .88rem;
	min-width: 190px;
}
.actions .coupon .button,
.actions > .button {
	background: transparent;
	border: 1px solid var(--noir);
	color: var(--noir);
	padding: .95em 1.8em;
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: all var(--t);
}
.actions .coupon .button:hover,
.actions > .button:hover { background: var(--noir); color: var(--creme); }
.actions > .button { float: right; }
.actions::after { content: ''; display: table; clear: both; }
.actions > .button[disabled] { opacity: .4; cursor: not-allowed; }

/* Encadre des totaux */
.cart_totals, .panier-resume {
	background: var(--blanc);
	border: 1px solid var(--bordure);
	padding: clamp(24px, 3vw, 36px);
}
.cart_totals h2, .panier-resume h2 {
	font-family: var(--serif);
	font-size: 1.35rem;
	margin-bottom: 1.1em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--bordure-2);
}
.cart_totals table.shop_table { font-size: .93rem; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--bordure-2);
	text-transform: none;
	letter-spacing: 0;
	font-size: .93rem;
	color: var(--noir);
}
.cart_totals table.shop_table th { font-weight: 400; color: var(--gris); }
.cart_totals table.shop_table td { text-align: right; }
.cart_totals tr.order-total th,
.cart_totals tr.order-total td { border-bottom: 0; padding-top: 20px; font-size: 1.12rem; font-weight: 500; }
.cart_totals tr.order-total td { color: var(--noir); }
.cart_totals .woocommerce-shipping-destination { font-size: .8rem; color: var(--gris); }
.cart_totals .shipping-calculator-button { color: var(--champagne-2); border-bottom: 1px solid var(--bordure); font-size: .82rem; }

.wc-proceed-to-checkout { margin-top: 22px; }
.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: 1.15em;
	text-align: center;
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--noir); }

/* Panier vide */
.cart-empty, .wc-empty-cart-message { text-align: center; }
.wc-empty-cart-message .cart-empty {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin-bottom: 1em;
	padding: 0;
	border: 0;
	background: none;
	display: block;
}
.return-to-shop { text-align: center; margin-top: 26px; }
.return-to-shop .button {
	display: inline-block;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: 1.05em 2.6em;
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.return-to-shop .button:hover { background: var(--champagne); border-color: var(--champagne); color: var(--noir); }

/* Panier vide : suggestions */
.panier-vide-suggestions { margin-top: clamp(50px, 7vw, 90px); }

/* -------------------------------------------------
   6. COMMANDE (checkout)
   Grille .col2-set stylee explicitement (cf. panier).
   ------------------------------------------------- */
.woocommerce-checkout .col2-set,
.woocommerce-account .col2-set,
form.checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3.4vw, 46px);
	width: 100%;
}
.col2-set .col-1, .col2-set .col-2 { width: 100%; float: none; min-width: 0; }
@media (max-width: 780px) {
	.woocommerce-checkout .col2-set,
	.woocommerce-account .col2-set,
	form.checkout .col2-set { grid-template-columns: 1fr; }
}

form.checkout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
form.checkout #customer_details { min-width: 0; }
form.checkout #order_review_heading,
form.checkout #order_review { grid-column: 2; }
form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
@media (max-width: 950px) {
	form.checkout { grid-template-columns: 1fr; }
	form.checkout #customer_details,
	form.checkout #order_review_heading,
	form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--serif);
	font-size: 1.35rem;
	margin-bottom: 1.1em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--bordure-2);
}

/* Champs de formulaire WooCommerce */
.woocommerce form .form-row { display: block; margin-bottom: 18px; padding: 0; }
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris);
	margin-bottom: 8px;
}
.woocommerce form .form-row label .required { color: var(--rouge); text-decoration: none; border: 0; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .95em 1.1em;
	font-size: .95rem;
	font-family: var(--sans);
	height: auto;
	line-height: 1.5;
	transition: border-color var(--t);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--champagne); outline: none; }
.woocommerce form .form-row textarea { min-height: 120px; resize: vertical; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--rouge); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgba(74,107,82,.5); }

/* Demi-largeurs : non garanties par WooCommerce, on les impose. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	display: inline-block;
	width: 48.6%;
	vertical-align: top;
}
.woocommerce form .form-row-first { margin-right: 2.4%; }
.woocommerce form .form-row-wide { width: 100%; display: block; }
@media (max-width: 560px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { display: block; width: 100%; margin-right: 0; }
}

.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; padding: 0; color: var(--noir); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
.select2-dropdown { border-color: var(--bordure); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--champagne); color: var(--noir); }

/* Recapitulatif de commande */
#order_review {
	background: var(--blanc);
	border: 1px solid var(--bordure);
	padding: clamp(24px, 3vw, 34px);
}
#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: 13px 0;
	font-size: .92rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--noir);
}
#order_review table.shop_table thead th { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
#order_review td.product-total, #order_review th.product-total { text-align: right; }
#order_review tr.order-total th, #order_review tr.order-total td { font-size: 1.1rem; font-weight: 500; border-bottom: 0; padding-top: 18px; }
#order_review .product-name strong.product-quantity { color: var(--gris); font-weight: 400; }

/* Moyens de paiement */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 24px; }
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--bordure-2);
	display: grid;
	gap: 12px;
}
.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--bordure-2);
	padding: 16px 18px;
	transition: border-color var(--t);
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--champagne); }
.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--noir);
	margin: 0;
	cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--champagne-2); width: 16px; height: 16px; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--creme-2);
	margin: 12px 0 0;
	padding: 14px 16px;
	font-size: .87rem;
	color: var(--gris);
	line-height: 1.65;
	border-left: 2px solid var(--champagne);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

#payment .woocommerce-privacy-policy-text { font-size: .82rem; color: var(--gris); line-height: 1.65; margin-bottom: 16px; }
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; }
#payment .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; text-transform: none; letter-spacing: 0; color: var(--noir); }
#payment .woocommerce-form__label-for-checkbox input { margin-top: 4px; accent-color: var(--champagne-2); }

#place_order {
	width: 100%;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: 1.2em;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t), border-color var(--t);
}
#place_order:hover { background: var(--champagne); border-color: var(--champagne); color: var(--noir); }

.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { margin-bottom: 20px; }
.checkout_coupon, .woocommerce-form-login {
	border: 1px solid var(--bordure);
	padding: 22px;
	margin-bottom: 24px;
	background: var(--blanc);
}
.checkout_coupon .button, .woocommerce-form-login .button {
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: .95em 2em;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.checkout_coupon .button:hover, .woocommerce-form-login .button:hover { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }

/* Etapes du tunnel */
.tunnel-etapes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 3vw, 34px);
	margin-bottom: clamp(34px, 4.4vw, 56px);
	flex-wrap: wrap;
}
.tunnel-etape {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-2);
}
.tunnel-etape__num {
	width: 28px; height: 28px;
	border: 1px solid var(--bordure-2);
	border-radius: 50%;
	display: grid; place-items: center;
	font-size: .72rem;
	letter-spacing: 0;
}
.tunnel-etape.is-actif { color: var(--noir); }
.tunnel-etape.is-actif .tunnel-etape__num { background: var(--noir); color: var(--creme); border-color: var(--noir); }
.tunnel-etape.is-fait .tunnel-etape__num { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }
.tunnel-sep { width: clamp(20px, 5vw, 54px); height: 1px; background: var(--bordure-2); }

/* Confirmation de commande */
.woocommerce-order { max-width: 860px; margin-inline: auto; }
.woocommerce-thankyou-order-received {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	text-align: center;
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: 1.4em;
	display: block;
}
ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 40px;
	padding: 26px;
	border: 1px solid var(--bordure);
	background: var(--blanc);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
}
ul.woocommerce-order-overview li {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
	border: 0;
}
ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 8px;
	font-family: var(--serif);
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--noir);
	font-weight: 400;
}

/* -------------------------------------------------
   7. Compte client
   ------------------------------------------------- */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.woocommerce-account.logged-out .woocommerce { display: block; max-width: 520px; margin-inline: auto; }
@media (max-width: 820px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure-2); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--bordure-2); }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 15px 0;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a { color: var(--champagne-2); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content p { line-height: 1.8; }
.woocommerce-MyAccount-content .button,
.woocommerce-Button {
	display: inline-block;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: .95em 2em;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-Button:hover { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }

.woocommerce-form-login, .woocommerce-form-register { border: 1px solid var(--bordure); padding: clamp(24px, 3.4vw, 40px); background: var(--blanc); }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; gap: 9px; align-items: center; font-size: .86rem; text-transform: none; letter-spacing: 0; color: var(--gris); }
.woocommerce-LostPassword { margin-top: 14px; font-size: .84rem; }
.woocommerce-LostPassword a { color: var(--champagne-2); border-bottom: 1px solid var(--bordure); }

/* -------------------------------------------------
   8. Divers
   ------------------------------------------------- */
.woocommerce-breadcrumb {
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-bottom: 1.4em;
}
.woocommerce-breadcrumb a:hover { color: var(--champagne-2); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

.blockUI.blockOverlay { background: var(--creme) !important; opacity: .6 !important; }

/* Message de stock */
.stock.in-stock { color: var(--vert); font-size: .84rem; }
.stock.out-of-stock { color: var(--rouge); font-size: .84rem; }

/* Guide des tailles / longueurs */
.guide-longueurs { border: 1px solid var(--bordure); padding: clamp(20px, 2.6vw, 30px); margin-bottom: 1.8em; background: var(--blanc); }
.guide-longueurs__titre { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; }
.guide-longueurs__echelle { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.guide-longueurs__barre { flex: 1; background: linear-gradient(to top, var(--champagne), var(--champagne-3)); position: relative; }
.guide-longueurs__barre span {
	position: absolute;
	bottom: -22px; left: 50%;
	transform: translateX(-50%);
	font-size: .66rem;
	letter-spacing: .08em;
	color: var(--gris);
	white-space: nowrap;
}
.guide-longueurs__echelle { margin-bottom: 26px; }

/* Lien qui enveloppe l'image de la carte produit */
.produit-media__lien { display: block; width: 100%; height: 100%; position: relative; }
.produit-media__lien img { width: 100%; height: 100%; object-fit: cover; }
.produit-media__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: block; }
li.product:hover .produit-media__alt { opacity: 1; }
.produit-media__alt img { width: 100%; height: 100%; object-fit: cover; }

/* Grille 2 colonnes de la page Panier (le shortcode ne la fournit pas) */
.woocommerce-cart:not(.panier-vide) .entry-content > .woocommerce,
.woocommerce-cart:not(.panier-vide) .contenu > .woocommerce {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(30px, 4vw, 60px);
	align-items: start;
}
.woocommerce-cart .contenu > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .cart-collaterals { width: 100%; min-width: 0; }
.woocommerce-cart .cart-collaterals::after { content: ''; display: table; clear: both; }
@media (max-width: 950px) {
	.woocommerce-cart:not(.panier-vide) .contenu > .woocommerce { grid-template-columns: 1fr; }
}
.woocommerce-cart.panier-vide .contenu { text-align: center; }

/* ===================================================================
   CORRECTIF DE GRILLE — a garder en dernier
   WooCommerce fait flotter les produits ; on neutralise pour que
   notre grille CSS reprenne la main.
   =================================================================== */
ul.products {
	display: grid !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
ul.products::before, ul.products::after { display: none !important; content: none !important; }

ul.products li.product,
ul.products li.product.first,
ul.products li.product.last {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column;
	text-align: left;
}
ul.products li.product::before,
ul.products li.product::after { display: none !important; content: none !important; }

/* Vignette : hauteur identique pour toutes les cartes */
.produit-media {
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
	background: var(--creme-2);
	flex: 0 0 auto;
}
.produit-media__lien { position: absolute; inset: 0; display: block; }
.produit-media img,
.produit-media__lien img,
.produit-media__alt img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center 22%;
}

/* Bloc texte : titres et prix alignes d'une carte a l'autre */
.produit-infos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.produit-cat {
	font-size: .64rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--champagne-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: clamp(1rem, 1.25vw, 1.14rem);
	line-height: 1.32;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.64em;
}
ul.products li.product .price {
	margin-top: auto;
	padding-top: 4px;
	font-size: 1rem;
}
.produit-note { min-height: 1.2em; }

/* Etiquettes plus discretes */
.produit-etiq span {
	background: rgba(13, 13, 15, .88);
	backdrop-filter: blur(4px);
	font-size: .58rem;
	letter-spacing: .18em;
	padding: .5em .9em;
}
.produit-etiq .etiq--promo { background: var(--champagne); color: var(--noir); }

/* Grille : gouttieres plus serrees, colonnes egales */
ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 34px) clamp(16px, 1.8vw, 28px);
	align-items: stretch;
}
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	ul.products, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
	ul.products, ul.products.columns-4, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: .92rem; min-height: 2.5em; }
	.produit-action { left: 8px; right: 8px; bottom: 8px; }
	.produit-action .button { padding: .8em; font-size: .62rem; letter-spacing: .12em; }
}

/* ===================================================================
   FICHE PRODUIT — enrichissements
   =================================================================== */


/* Ligne de stock */
.stock-ligne {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .84rem;
	color: var(--vert);
	margin: 0 0 1.1em;
	letter-spacing: .02em;
}
.pastille-stock {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--vert);
	flex: 0 0 7px;
	box-shadow: 0 0 0 3px rgba(74,107,82,.16);
}
.stock-ligne--bas { color: #9a6b1f; }
.stock-ligne--bas .pastille-stock { background: #c58b2a; box-shadow: 0 0 0 3px rgba(197,139,42,.18); }
.stock-ligne--rupture { color: var(--rouge); }

/* Aide au choix de la teinte */
.aide-teinte {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background: var(--creme-2);
	border-left: 2px solid var(--champagne);
	padding: 14px 16px;
	font-size: .86rem;
	line-height: 1.6;
	color: var(--gris);
	margin: 0 0 1.6em;
}
.aide-teinte svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; stroke: var(--champagne-2); fill: none; stroke-width: 1.4; }
.aide-teinte a { color: var(--noir); border-bottom: 1px solid var(--champagne); }
.aide-teinte a:hover { color: var(--champagne-2); }

/* Date de livraison estimee */
.livraison-estimee {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid var(--bordure);
	padding: 15px 17px;
	margin: 0 0 1.4em;
	background: var(--blanc);
}
.livraison-estimee svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; stroke: var(--champagne-2); fill: none; stroke-width: 1.3; }
.livraison-estimee span { display: flex; flex-direction: column; gap: 3px; }
.livraison-estimee strong { font-size: .92rem; font-weight: 500; }
.livraison-estimee em { font-style: normal; font-size: .78rem; color: var(--gris); }

/* Rappel des moyens de paiement */
.produit-paiement {
	font-size: .78rem;
	color: var(--gris-2);
	text-align: center;
	margin: -.6em 0 1.6em;
	letter-spacing: .02em;
}

/* Guide des longueurs */
.guide-longueurs {
	border: 1px solid var(--bordure-2);
	padding: clamp(18px, 2.4vw, 26px);
	margin: 0 0 1.6em;
	background: var(--blanc);
}
.guide-longueurs__titre {
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gris);
	margin: 0 0 18px;
}
.guide-longueurs__echelle {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 96px;
	margin-bottom: 30px;
}
.guide-longueurs__barre {
	flex: 1;
	background: var(--creme-2);
	position: relative;
	transition: background var(--t);
}
.guide-longueurs__barre.is-actif { background: linear-gradient(to top, var(--champagne-2), var(--champagne-3)); }
.guide-longueurs__barre span {
	position: absolute;
	bottom: -22px; left: 50%;
	transform: translateX(-50%);
	font-size: .64rem;
	letter-spacing: .06em;
	color: var(--gris-2);
	white-space: nowrap;
}
.guide-longueurs__barre.is-actif span { color: var(--noir); font-weight: 500; }
.guide-longueurs__note { font-size: .82rem; color: var(--gris); line-height: 1.6; margin: 0; }

/* ---- Pastilles de teinte (remplacent le menu deroulant) ---- */
.teintes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.teinte {
	position: relative;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--bordure-2);
	cursor: pointer;
	padding: 0;
	transition: transform var(--t), box-shadow var(--t);
	overflow: visible;
}
.teinte::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid transparent;
	transition: border-color var(--t);
}
.teinte:hover { transform: scale(1.06); }
.teinte.is-actif::after { border-color: var(--champagne-2); }
.teinte.is-indispo { opacity: .3; cursor: not-allowed; }
.teinte.is-indispo::before {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 130%; height: 1px;
	background: var(--noir);
	transform: translate(-50%, -50%) rotate(-45deg);
}
.teintes-libelle {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}
.teintes-libelle strong {
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
}
.teintes-libelle span { font-size: .88rem; color: var(--noir); }
.teintes + .reset_variations { margin-top: 10px; }

/* Le menu deroulant d'origine reste en place pour l'accessibilite */
.variations tr.is-teinte td.value > select { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---- Onglet Entretien ---- */
.entretien { display: grid; gap: 26px; max-width: 74ch; }
.entretien__item { display: flex; gap: 20px; align-items: flex-start; }
.entretien__num {
	font-family: var(--serif);
	font-size: 1.6rem;
	color: var(--champagne);
	line-height: 1;
	flex: 0 0 auto;
	min-width: 42px;
}
.entretien h3 { font-size: 1.05rem; margin: 0 0 .4em; }
.entretien p { font-size: .95rem; line-height: 1.75; color: var(--gris); margin: 0; }
@media (max-width: 560px) {
	.entretien__item { gap: 14px; }
	.entretien__num { font-size: 1.25rem; min-width: 32px; }
}

/* ---- Barre d'achat fixe sur mobile ---- */
.barre-achat {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 70;
	display: none;
	align-items: center;
	gap: 14px;
	padding: 12px var(--gouttiere);
	background: rgba(250, 247, 242, .97);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--bordure);
	box-shadow: 0 -10px 30px -18px rgba(13,13,15,.5);
	transform: translateY(100%);
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.barre-achat.is-visible { transform: translateY(0); }
.barre-achat__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.barre-achat__nom {
	font-family: var(--serif);
	font-size: .92rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.barre-achat__prix { font-size: .86rem; font-weight: 500; }
.barre-achat__prix .price { font-size: inherit; }
.barre-achat__btn {
	flex: 0 0 auto;
	background: var(--noir);
	color: var(--creme);
	border: 1px solid var(--noir);
	padding: .95em 1.7em;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background var(--t), color var(--t);
}
.barre-achat__btn:hover { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }

@media (max-width: 900px) {
	.barre-achat { display: flex; }
	body.single-product { padding-bottom: 72px; }
}

/* ===================================================================
   CORRECTIF — mise en page de la fiche produit
   WooCommerce enveloppe la fiche dans "div.product", pas dans
   ".produit-single". Et comme nous avons retire woocommerce-layout.css
   (qui faisait flotter galerie et resume), il faut fournir la grille.
   =================================================================== */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	column-gap: clamp(32px, 4.5vw, 76px);
	row-gap: 0;
	align-items: start;
}

.single-product div.product > .woocommerce-breadcrumb { grid-column: 1 / -1; margin-bottom: 1.6em; }
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; min-width: 0; }
.single-product div.product > .summary { grid-column: 2; min-width: 0; margin: 0; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .upsells,
.single-product div.product > .woocommerce-product-details__short-description { grid-column: 1 / -1; }

/* Rien ne doit flotter ni deborder */
.single-product div.product > * { float: none !important; width: auto !important; max-width: 100%; }
.single-product div.product::before,
.single-product div.product::after { display: none !important; content: none !important; }


@media (max-width: 980px) {
	.single-product div.product { grid-template-columns: 1fr; row-gap: clamp(28px, 4vw, 44px); }
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { grid-column: 1; }
	.single-product div.product > .summary { position: static; }
}

/* La galerie ne doit jamais depasser sa colonne */
.woocommerce-product-gallery { max-width: 100%; overflow: hidden; }
.woocommerce-product-gallery .flex-viewport { max-width: 100%; }
.woocommerce-product-gallery img { max-width: 100%; height: auto; }

/* Securite anti-debordement global */
.woocommerce-tabs, .related, .up-sells { max-width: 100%; overflow: hidden; }

/* ===================================================================
   GALERIE PRODUIT — pile verticale, sans carrousel
   Aucune largeur calculee en JavaScript : la mise en page tient
   meme si les images arrivent en retard.
   =================================================================== */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 1vw, 14px);
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}
.woocommerce-product-gallery__image {
	float: none !important;
	width: 100% !important;
	margin: 0;
	display: block;
	background: var(--creme-2);
	overflow: hidden;
}
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto;
	object-fit: cover;
	display: block;
	max-width: none;
}

/* Les miniatures du carrousel ne servent plus a rien. */
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .flex-control-thumbs { display: none !important; }
.woocommerce-product-gallery .flex-viewport { max-height: none !important; height: auto !important; }

/* Une seule colonne : la mosaique a ete abandonnee, ses regles de
   proportions se battaient avec celles de la pile. */
@media (min-width: 1100px) {
	.woocommerce-product-gallery--columns-5 .woocommerce-product-gallery__wrapper,
	.woocommerce-product-gallery__wrapper { grid-template-columns: 1fr; }
}

/* ===================================================================
   BOUTIQUE — panneau de filtres
   =================================================================== */
.boutique-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(28px, 3.5vw, 56px);
	align-items: start;
}
.boutique-contenu { min-width: 0; }

.filtres { /* colle par ml-colle, voir plus bas */ }
.filtres__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--bordure-2);
}
.filtres__titre {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.filtres__reset {
	font-size: .74rem;
	color: var(--champagne-2);
	border-bottom: 1px solid var(--bordure);
	white-space: nowrap;
}
.filtres__reset:hover { color: var(--noir); border-color: var(--noir); }

.filtre { border-bottom: 1px solid var(--bordure-2); }
.filtre__titre {
	width: 100%;
	text-align: left;
	padding: 15px 22px 15px 0;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	position: relative;
	color: var(--noir);
	display: flex;
	align-items: center;
	gap: 8px;
}
.filtre__titre::after {
	content: '';
	position: absolute;
	right: 2px; top: 50%;
	width: 8px; height: 8px;
	border-right: 1.4px solid var(--gris);
	border-bottom: 1.4px solid var(--gris);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--t);
}
.filtre.is-ouvert .filtre__titre::after { transform: translateY(-30%) rotate(-135deg); }
.filtre__compteur {
	background: var(--champagne);
	color: var(--noir);
	font-size: .62rem;
	min-width: 17px; height: 17px;
	border-radius: 999px;
	display: grid; place-items: center;
	letter-spacing: 0;
}

.filtre__corps { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,.61,.36,1); }
.filtre.is-ouvert .filtre__corps { max-height: 460px; overflow-y: auto; }
.filtre__corps ul { list-style: none; margin: 0; padding: 0 0 16px; display: grid; gap: 2px; }
.filtre__sous { padding: 4px 0 4px 14px !important; border-left: 1px solid var(--bordure-2); margin-left: 4px !important; }

.filtre__option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 2px;
	font-size: .88rem;
	color: var(--gris);
	transition: color var(--t);
}
.filtre__option:hover { color: var(--noir); }
.filtre__case {
	width: 15px; height: 15px;
	flex: 0 0 15px;
	border: 1px solid var(--bordure-2);
	position: relative;
	transition: all var(--t);
}
.filtre__option.is-actif { color: var(--noir); font-weight: 500; }
.filtre__option.is-actif .filtre__case { background: var(--noir); border-color: var(--noir); }
.filtre__option.is-actif .filtre__case::after {
	content: '';
	position: absolute;
	left: 4px; top: 1px;
	width: 4px; height: 8px;
	border-right: 1.6px solid var(--creme);
	border-bottom: 1.6px solid var(--creme);
	transform: rotate(45deg);
}
.filtre__nom { flex: 1; min-width: 0; }
.filtre__nb { font-size: .74rem; color: var(--gris-2); }

.filtre-prix { padding-bottom: 16px; display: grid; gap: 12px; }
.filtre-prix__champs { display: flex; align-items: center; gap: 8px; }
.filtre-prix__champs input {
	width: 100%;
	min-width: 0;
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .6em .7em;
	font-size: .86rem;
	-moz-appearance: textfield;
}
.filtre-prix__champs input::-webkit-outer-spin-button,
.filtre-prix__champs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filtre-prix__champs input:focus { border-color: var(--champagne); outline: none; }
.filtre-prix__champs span { color: var(--gris-2); }

/* Bouton d'ouverture sur petit ecran */
.filtres-bascule {
	display: none;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 1em;
	margin-bottom: 20px;
	border: 1px solid var(--noir);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	justify-content: center;
}
.filtres-bascule svg { width: 17px; height: 17px; }

@media (max-width: 1024px) {
	.boutique-layout { grid-template-columns: 1fr; }
	.filtres-bascule { display: flex; }
	.filtres {
		position: fixed;
		inset: 0;
		z-index: 88;
		background: var(--creme);
		padding: 84px var(--gouttiere) 28px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .45s cubic-bezier(.22,.61,.36,1);
	}
	.filtres.is-ouvert { transform: translateX(0); }
	.filtres__fermer {
		position: absolute;
		top: 24px; right: var(--gouttiere);
		font-size: 1.9rem;
		line-height: 1;
	}
}

/* ===================================================================
   BOUTIQUE — filtres actifs rappelés au-dessus de la grille
   =================================================================== */
.filtres-actifs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}
.filtres-actifs__label {
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris);
	margin-right: 4px;
}
.jeton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .5em .9em;
	border: 1px solid var(--bordure);
	background: var(--blanc);
	font-size: .78rem;
	transition: border-color var(--t), color var(--t);
}
.jeton:hover { border-color: var(--noir); }
.jeton__croix { font-size: 1rem; line-height: 1; color: var(--gris-2); }
.jeton:hover .jeton__croix { color: var(--rouge); }
.jeton--reset { border-style: dashed; color: var(--gris); }

/* Barre d'outils de la boutique, plus lisible */
.boutique-barre {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--bordure-2);
}
.woocommerce-result-count { font-size: .8rem; color: var(--gris); margin: 0; letter-spacing: .04em; text-transform: none; }

/* ===================================================================
   PANIER — correctifs de présentation (à garder après tout le reste)
   ------------------------------------------------------------------
   Quatre problèmes constatés en ligne :
   1. le bouton « Valider la commande » ressortait en violet WooCommerce
      (#7f54b3) : la règle du thème perdait en spécificité contre
      `.woocommerce a.button.alt`, plus forte ;
   2. le tableau débordait de sa colonne — `table-layout: auto` refuse
      de descendre sous la largeur mini du contenu ;
   3. le bouton « Mettre à jour le panier » désactivé gardait le gris
      par défaut de WooCommerce et passait pour un bug ;
   4. les boutons de paiement express Stripe s'empilaient sans hiérarchie
      juste sous le bouton principal.
   =================================================================== */

/* --- 1. Plus aucun violet WooCommerce nulle part ------------------- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt {
	background-color: var(--noir) !important;
	border: 1px solid var(--noir) !important;
	color: var(--creme) !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 1.15em 1.6em;
	transition: background-color var(--t), color var(--t), border-color var(--t);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:hover {
	background-color: var(--champagne) !important;
	border-color: var(--champagne) !important;
	color: var(--noir) !important;
}

/* --- 2. Tableau du panier : largeurs maîtrisées -------------------- */
.woocommerce-cart form.woocommerce-cart-form table.shop_table {
	table-layout: fixed;
	width: 100%;
}
.woocommerce-cart form.woocommerce-cart-form th { padding-right: 10px; font-size: .62rem; letter-spacing: .12em; }
.woocommerce-cart form.woocommerce-cart-form td { padding-right: 10px; }

.woocommerce-cart form.woocommerce-cart-form th.product-remove,
.woocommerce-cart form.woocommerce-cart-form td.product-remove    { width: 42px;  padding-right: 0; }
.woocommerce-cart form.woocommerce-cart-form th.product-thumbnail,
.woocommerce-cart form.woocommerce-cart-form td.product-thumbnail { width: 88px; }
.woocommerce-cart form.woocommerce-cart-form th.product-price,
.woocommerce-cart form.woocommerce-cart-form td.product-price     { width: 88px;  text-align: right; }
.woocommerce-cart form.woocommerce-cart-form th.product-quantity,
.woocommerce-cart form.woocommerce-cart-form td.product-quantity  { width: 126px; }
.woocommerce-cart form.woocommerce-cart-form th.product-subtotal,
.woocommerce-cart form.woocommerce-cart-form td.product-subtotal  { width: 92px;  text-align: right; }

/* Les titres importés sont longs : on autorise la coupure plutôt que
   de laisser le mot pousser la colonne et déborder. */
.woocommerce-cart td.product-name { overflow-wrap: anywhere; }
.woocommerce-cart td.product-name a {
	font-size: .98rem;
	line-height: 1.4;
	display: block;
}
.woocommerce-cart td.product-thumbnail img { width: 76px; height: 95px; }

/* --- 4. Encadré des totaux et paiement express -------------------- */
.woocommerce-cart .cart_totals { background: var(--blanc); }

/* La puce d'icône WooCommerce affichait un carré vide : la police
   d'icônes vit dans woocommerce-layout.css, que le thème retire. */
.woocommerce-cart .shipping-calculator-button::after { content: '' !important; display: none !important; }
.woocommerce-cart .shipping-calculator-button { display: inline-block; }

.woocommerce-cart .shipping-calculator-form { margin-top: 14px; }
.woocommerce-cart .shipping-calculator-form .select2-container,
.woocommerce-cart .shipping-calculator-form select,
.woocommerce-cart .shipping-calculator-form input.input-text { width: 100%; font-size: .88rem; }

/* Séparateur avant les boutons Stripe, pour que l'empilement se lise
   comme un choix et non comme quatre boutons concurrents. */
.woocommerce-cart #wc-stripe-express-checkout-element:not(:empty) {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--bordure-2);
	position: relative;
}
.woocommerce-cart #wc-stripe-express-checkout-element:not(:empty)::before {
	content: 'ou payer en un clic';
	position: absolute;
	top: -.62em; left: 50%;
	transform: translateX(-50%);
	background: var(--blanc);
	padding: 0 14px;
	font-family: var(--sans);
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris-2);
	white-space: nowrap;
}
.woocommerce-cart #wc-stripe-express-checkout-element .StripeElement { margin-bottom: 10px; }

@media (max-width: 700px) {
	.woocommerce-cart .actions { justify-content: stretch; }
	.woocommerce-cart .actions .coupon,
	.woocommerce-cart .actions > .button { width: 100%; }
	.woocommerce-cart .actions .coupon input[type="text"] { flex: 1; min-width: 0; }
}

/* --- 3 bis. Ligne d'actions du panier -----------------------------
   `td.actions` porte colspan="6". Lui donner `display:flex` le sort du
   modèle de tableau : la cellule retombe à la largeur de la première
   colonne (42 px constatés) et tout se chevauche. On la laisse donc en
   table-cell et on aligne les deux blocs avec des flottants, en
   resserrant les libellés pour qu'ils tiennent sur une seule ligne.
   ------------------------------------------------------------------ */
.woocommerce-cart td.actions {
	display: table-cell !important;
	padding-top: 26px !important;
	border-bottom: 0 !important;
}
.woocommerce-cart td.actions::after { content: ''; display: table; clear: both; }

.woocommerce-cart td.actions .coupon {
	float: left;
	display: flex;
	gap: 10px;
	margin: 0;
}
.woocommerce-cart td.actions .coupon input[type="text"] {
	min-width: 0;
	width: 168px;
	padding: .85em 1em;
}
.woocommerce-cart td.actions .coupon .button,
.woocommerce-cart td.actions > .button {
	padding: .9em 1.35em;
	font-size: .66rem;
	letter-spacing: .13em;
	white-space: nowrap;
}
.woocommerce-cart td.actions > .button { float: right; margin: 0; }

/* Désactivé tant que la quantité n'a pas changé : doit se lire comme
   volontaire, pas comme un bouton cassé. Le gris lavande vient de
   woocommerce.css, d'où le !important sur la longhand. */
.woocommerce-cart td.actions > .button[disabled],
.woocommerce-cart td.actions > .button:disabled,
body.woocommerce-cart .woocommerce button.button[name="update_cart"]:disabled {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var(--bordure-2) !important;
	color: var(--gris-2) !important;
	opacity: 1 !important;
	cursor: default;
}

@media (max-width: 700px) {
	.woocommerce-cart td.actions .coupon,
	.woocommerce-cart td.actions > .button { float: none; width: 100%; }
	.woocommerce-cart td.actions .coupon { margin-bottom: 12px; }
	.woocommerce-cart td.actions .coupon input[type="text"] { flex: 1; width: auto; }
}

/* --- 3 ter. Suppression du bouton « Mettre à jour le panier » ------
   Le thème met déjà le panier à jour tout seul quand la quantité change
   (js/main.js, section 9). Le bouton ne servait donc qu'à afficher un
   gris lavande que même un !important ne reprenait pas — la valeur vient
   du rendu natif du contrôle désactivé. On le retire de l'affichage tout
   en le laissant dans le DOM : le script clique dessus, et il redevient
   visible si le JavaScript ne s'exécute pas.
   ------------------------------------------------------------------ */
.ml-js .woocommerce-cart td.actions > .button[name="update_cart"] { display: none; }
.ml-js .woocommerce-cart td.actions .coupon { float: none; }

/* --- 5. PANIER SUR MOBILE -----------------------------------------
   Le thème retire `woocommerce-smallscreen.css` (elle casse nos grilles),
   or c'est elle qui rendait le tableau du panier lisible sur téléphone.
   Sans remplacement, six colonnes à largeur fixe débordaient largement
   d'un écran de 375 px. On repasse donc chaque ligne en carte :
   photo à gauche, informations à droite, libellés repris de `data-title`.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {

	.woocommerce-cart form.woocommerce-cart-form table.shop_table {
		table-layout: auto;
		display: block;
		border-top: 1px solid var(--bordure-2);
	}
	.woocommerce-cart form.woocommerce-cart-form thead { display: none; }
	.woocommerce-cart form.woocommerce-cart-form tbody { display: block; }

	.woocommerce-cart form.woocommerce-cart-form tr.cart_item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas:
			"photo nom"
			"photo prix"
			"photo qte"
			"photo total";
		column-gap: 16px;
		row-gap: 6px;
		align-items: center;
		position: relative;
		padding: 20px 34px 20px 0;
		border-bottom: 1px solid var(--bordure-2);
	}

	/* Toutes les cellules perdent leur largeur fixe imposée plus haut. */
	.woocommerce-cart form.woocommerce-cart-form tr.cart_item > td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	.woocommerce-cart form.woocommerce-cart-form td.product-thumbnail {
		grid-area: photo;
		align-self: start;
	}
	.woocommerce-cart form.woocommerce-cart-form td.product-thumbnail img {
		width: 84px; height: 105px;
	}
	.woocommerce-cart form.woocommerce-cart-form td.product-name { grid-area: nom; }
	.woocommerce-cart form.woocommerce-cart-form td.product-name a { font-size: .95rem; }
	.woocommerce-cart form.woocommerce-cart-form td.product-price { grid-area: prix; }
	.woocommerce-cart form.woocommerce-cart-form td.product-quantity { grid-area: qte; }
	.woocommerce-cart form.woocommerce-cart-form td.product-subtotal { grid-area: total; }

	/* Libellé devant la valeur, sinon on ne sait plus ce qu'on lit. */
	.woocommerce-cart form.woocommerce-cart-form td.product-price::before,
	.woocommerce-cart form.woocommerce-cart-form td.product-subtotal::before {
		content: attr(data-title) ' ';
		font-size: .62rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--gris);
		margin-right: .6em;
	}
	.woocommerce-cart form.woocommerce-cart-form td.product-subtotal { font-weight: 500; }

	/* La croix passe en haut à droite de la carte. */
	.woocommerce-cart form.woocommerce-cart-form td.product-remove {
		position: absolute;
		top: 20px; right: 0;
	}

	.woocommerce-cart form.woocommerce-cart-form td.product-quantity .quantity { display: inline-flex; }

	/* Ligne d'actions : la cellule redevient un bloc, le coupon prend
	   toute la largeur. */
	.woocommerce-cart form.woocommerce-cart-form tr:not(.cart_item) { display: block; }
	.woocommerce-cart td.actions {
		display: block !important;
		width: auto !important;
		padding: 22px 0 0 !important;
	}
	.woocommerce-cart td.actions .coupon { display: flex; width: 100%; }
	.woocommerce-cart td.actions .coupon input[type="text"] { flex: 1; width: auto; min-width: 0; }

	/* Encadré des totaux : plus de position collante sur petit écran. */
	.woocommerce-cart .cart_totals { position: static; margin-top: 30px; }
}

/* En-têtes du panier sur une seule ligne : « SOUS-TOTAL » se coupait en
   deux et faisait passer toute la ligne d'en-tête de 32 à 49 px. */
.woocommerce-cart form.woocommerce-cart-form thead th { white-space: nowrap; }
.woocommerce-cart form.woocommerce-cart-form thead th.product-subtotal {
	font-size: .58rem;
	letter-spacing: .08em;
}

/* ===================================================================
   COMMANDER — colonne de droite compacte
   ------------------------------------------------------------------
   `form.checkout` était une grille 2 colonnes où seuls #customer_details,
   #order_review_heading et #order_review étaient placés explicitement.
   Or Stripe injecte DEUX enfants supplémentaires en tête du formulaire
   (le bloc de paiement express et le séparateur « OU »). Placés
   automatiquement, ils occupaient les lignes 1 et 2 — dont la hauteur
   était dictée par le formulaire de facturation à gauche (883 px sur
   deux lignes). Résultat : 475 px de vide entre le « OU » et le
   récapitulatif, et le formulaire de carte bancaire renvoyé à 2 300 px
   du haut. Le client concluait qu'aucun paiement par carte n'existait.

   On repasse en flottants : la colonne de droite empile ses blocs les
   uns sous les autres quel que soit leur nombre, sans dépendre de la
   hauteur de la colonne de gauche.
   =================================================================== */
.woocommerce-checkout form.checkout {
	display: block;
	grid-template-columns: none;
}
.woocommerce-checkout form.checkout::after { content: ''; display: table; clear: both; }

.woocommerce-checkout form.checkout > #customer_details {
	float: left;
	width: 56%;
	grid-column: auto;
	grid-row: auto;
}
.woocommerce-checkout form.checkout > *:not(#customer_details):not(.woocommerce-notices-wrapper) {
	float: right;
	clear: right;
	width: 40%;
	grid-column: auto;
	grid-row: auto;
}
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
	float: none;
	clear: both;
	width: 100%;
}

/* Le séparateur « OU » de Stripe : centré et discret, il annonce le
   formulaire de carte qui suit immédiatement. */
.woocommerce-checkout form.checkout > p:has(> span),
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	text-align: center;
	margin: 18px 0;
	font-family: var(--sans);
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris-2);
}

.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 26px; }

@media (max-width: 950px) {
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > *:not(.woocommerce-notices-wrapper) {
		float: none;
		width: 100%;
	}
	.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 34px; }
}

/* ===================================================================
   DESCRIPTION DE COLLECTION
   ------------------------------------------------------------------
   Elle n'apparaît plus qu'une seule fois, au-dessus de la grille.
   Il faut donc qu'elle se lise vraiment : largeur de lecture limitée,
   alignée à gauche, séparée des produits par un filet.
   ------------------------------------------------- */
.woocommerce .term-description {
	max-width: 68ch;
	margin: 0 0 clamp(28px, 3.4vw, 46px);
	padding-bottom: clamp(24px, 3vw, 34px);
	border-bottom: 1px solid var(--bordure-2);
	color: var(--gris);
	font-size: .96rem;
	line-height: 1.78;
}
.woocommerce .term-description p { margin: 0 0 1em; }
.woocommerce .term-description p:last-child { margin-bottom: 0; }
.woocommerce .term-description strong { color: var(--noir); font-weight: 500; }
.woocommerce .term-description a {
	color: var(--champagne-2);
	border-bottom: 1px solid var(--bordure);
}
.woocommerce .term-description a:hover { color: var(--noir); border-bottom-color: var(--noir); }

/* Le compteur de résultats se rapproche de la grille, pas du texte. */
.woocommerce .woocommerce-result-count { margin-bottom: 18px; color: var(--gris-2); font-size: .82rem; }

@media (max-width: 700px) {
	.woocommerce .term-description { font-size: .92rem; }
}

/* Catégorie affichée sur la carte produit : 10 px en capitales espacées
   passait sous le seuil de lisibilité. */
.produit-cat { font-size: .72rem; letter-spacing: .18em; }

/* ===================================================================
   LISIBILITE — correctifs mesures (a garder en dernier)
   =================================================================== */

/* Le prix s'affichait en rgb(149,142,9), un jaune olive absent de la
   charte : c'est la valeur par defaut de woocommerce.css, dont le
   selecteur pese 0,4,3 contre 0,3,3 pour le notre. Meme mecanique que
   le bouton violet. Contraste mesure : 3,19:1, sous le seuil de 4,5.
   Sur une boutique, le prix ne peut pas etre l'element le moins lisible. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product p.price bdi,
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--noir) !important;
	text-decoration: none;
}
/* Le prix barre reste volontairement plus clair, mais lisible. */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce .price del bdi {
	color: var(--gris) !important;
	opacity: 1;
}

/* Compteur de resultats : --gris-2 tombait a 2,8:1. */
.woocommerce .woocommerce-result-count { color: var(--gris); }

/* Fil d'Ariane sur le bandeau sombre : le gris herite donnait 4,27:1. */
.entete-page .woocommerce-breadcrumb,
.entete-page .woocommerce-breadcrumb a { color: var(--gris-2); }
.entete-page .woocommerce-breadcrumb a:hover { color: var(--champagne-3); }

/* La pagination de WooCommerce impose min-width: 1em (16,5 px) depuis un
   selecteur en 0,2,4 ; le notre pesait 0,2,2 et perdait. On remonte a
   0,3,4 plutot que d'empiler un !important de plus. */
@media (max-width: 900px) {
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
		min-width: 44px;
		min-height: 44px;
		display: grid;
		place-items: center;
		padding: 0 6px;
	}
}

/* ===================================================================
   41. CORRECTIFS DE MISE EN PAGE — fiche produit
   =================================================================== */

/* ---- La phrase d'aide se coupait en trois ----
   « .aide-teinte » etait en flex : le lien « Envoyez-nous deux photos »
   devenait un element de flux a part entiere, si bien que la phrase se
   brisait en trois colonnes au lieu de couler normalement. On repasse
   en bloc et l'on detache la pastille d'icone en position absolue. */
.aide-teinte {
	display: block;
	position: relative;
	padding: 14px 16px 14px 42px;
}
.aide-teinte svg {
	position: absolute;
	left: 16px;
	top: 17px;
	margin-top: 0;
}

/* ---- Le libelle etait ecrit deux fois ----
   WooCommerce imprime le nom de l'attribut (« Couleur ») et notre
   nuancier ajoute le sien (« Teinte »). On garde le notre, plus proche
   du vocabulaire du site, et l'on masque celui de WooCommerce sans le
   retirer du document : les lecteurs d'ecran en ont besoin pour
   annoncer le menu deroulant reste en place. */
.variations tr.is-teinte > th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ---- Pastilles ----
   Un degrade sert aux teintes composees (ombre, meches) : un aplat
   les representerait mal. Le liisere interieur evite qu'une teinte
   tres claire se confonde avec le fond creme. */
.teinte {
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---- Onglet « La matière » : longueur de ligne et vraies listes ----
   Le texte du fournisseur arrive en un bloc de 92 signes par ligne,
   avec de fausses listes faites de retours a la ligne. Quand une ligne
   deborde, sa suite revient a la marge et devient indiscernable d'un
   nouvel element : c'est ce qui donnait ce mur de texte. On borne la
   mesure et l'on donne aux listes un retrait suspendu. */
.woocommerce-Tabs-panel--description > * { max-width: 64ch; }
.woocommerce-Tabs-panel--description ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.5em;
	display: grid;
	gap: .62em;
}
.woocommerce-Tabs-panel--description li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.75;
}
.woocommerce-Tabs-panel--description li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .82em;
	width: .72em;
	height: 1px;
	background: var(--champagne-2);
}
.woocommerce-Tabs-panel--description li strong { font-weight: 500; color: var(--noir); }
.woocommerce-Tabs-panel--description h3 {
	font-size: .74rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris);
	font-weight: 500;
	margin: 2.2em 0 1em;
}
.woocommerce-Tabs-panel--description .note-ecran {
	font-size: .84rem;
	color: var(--gris);
	border-left: 2px solid var(--bordure);
	padding-left: 14px;
	margin-top: 2em;
}

/* ===================================================================
   42. BLOCS QUI SUIVENT LE DEFILEMENT — sous condition
   ===================================================================
   Un bloc colle plus haut que la fenetre est un piege : une fois
   epingle, sa partie basse ne peut plus etre atteinte, quel que soit
   le defilement. Sur la fiche produit, la colonne de droite mesurait
   1465 px pour une fenetre de 720 px : l'estimation de livraison, les
   garanties et le bloc accompagnement etaient inaccessibles. Pire, le
   navigateur repeignait parfois la couche epinglee bien plus bas, par
   dessus les onglets et les produits associes.

   La classe « ml-colle » n'est posee par le JavaScript que lorsque le
   bloc tient reellement dans la hauteur disponible, et elle est retiree
   des que ce n'est plus le cas (redimensionnement, choix d'une teinte
   qui rallonge la colonne). Sans JavaScript, rien n'est colle : la page
   reste simplement lisible de haut en bas.
   =================================================================== */
/* Pas de declaration generique : chaque bloc porte la sienne. Une regle
   « .ml-colle { position: sticky } » globale ecraserait le « position:
   fixed » du tiroir de filtres sur mobile — .filtres.ml-colle (0,2,0)
   l'emporte sur .filtres (0,1,0), media query ou pas. */
.cart_totals.ml-colle,
.panier-resume.ml-colle,
#order_review.ml-colle { position: sticky; top: 110px; }

/* Le tiroir de filtres n'existe qu'au-dessus de 1024 px. */
@media (min-width: 1025px) {
	.filtres.ml-colle { position: sticky; top: 104px; }
}

@media (min-width: 1100px) {
	.single-product div.product > .summary.ml-colle { position: sticky; top: 104px; align-self: start; }
}

/* ===================================================================
   43. GALERIE — chaque photo garde ses proportions
   ===================================================================
   Trois couches de CSS se disputaient la galerie : une pile verticale,
   une mosaique abandonnee, et une regle plus specifique qui imposait
   une seule colonne. Resultat : les vues 2 a 5 recevaient un cadre
   paysage 3/2 alors que les photos du fournisseur sont en portrait
   900x1200. Plus de la moitie de chaque image etait jetee — on ne
   voyait qu'une bande horizontale de cheveux.

   Les fichiers portent leurs attributs width et height : en laissant
   la hauteur libre, le navigateur reserve exactement la bonne place,
   sans decalage au chargement, et la photo est montree entiere.
   =================================================================== */
/* Aucune declaration « aspect-ratio » ici, volontairement : la valeur
   par defaut du navigateur est « auto <width> / <height> », deduite des
   attributs du fichier. Ecrire « aspect-ratio: auto » l'annulerait et
   la place ne serait plus reservee avant le chargement — la page
   sauterait a l'arrivee de chaque photo. */

/* ===================================================================
   44. Une photo qui tarde ne doit pas afficher son texte
   ===================================================================
   Sur une grille de produits, les textes de remplacement s'etalaient
   en pleine page pendant le chargement : cela ressemblait a une panne.
   On reserve la place avec un aplat creme et l'on masque le texte a
   l'oeil. Il reste dans l'attribut « alt » — donc lu par les lecteurs
   d'ecran et par les moteurs de recherche, ou il est utile.
   =================================================================== */
ul.products li.product img,
.related img,
.up-sells img,
.upsells img {
	color: transparent;
	background-color: var(--creme-2);
}