/**
 * Koko Store — boutique.
 *
 * Chargée uniquement sur les pages WooCommerce.
 *
 * Le thème retire la feuille « woocommerce-general », qui pose des couleurs
 * claires et une typographie incompatibles avec un site sombre. Tout ce que
 * cette feuille habillait doit donc être repris ici : notices, quantités,
 * onglets, tableaux de panier, formulaires de commande, espace client.
 *
 * Deux règles ont guidé l'ensemble :
 *
 *   1. Le prix est l'information la plus regardée d'une fiche produit. Il est
 *      traité comme une lecture d'instrument — chiffres à largeur fixe, or,
 *      taille franche — et jamais noyé dans un bloc de texte.
 *
 *   2. Le tunnel d'achat ne décore rien. À partir du panier, chaque élément
 *      qui n'aide pas à finir la commande a été retiré plutôt que stylé.
 */

/* ==================================================== Grille boutique */

.k-boutique {
	position: relative;
}

.k-boutique__outils {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	flex-wrap: wrap;
	padding-bottom: var(--e-5);
	margin-bottom: var(--e-6);
	border-bottom: 1px solid var(--ligne);
}

.woocommerce-result-count {
	margin: 0;
	font-size: var(--t-petit);
	color: var(--craie-3);
}

.woocommerce-ordering select {
	width: auto;
	min-width: 14rem;
	padding-block: 0.6rem;
	font-size: var(--t-petit);
}

/* La boucle produits. WooCommerce sort une <ul class="products"> : on la
   transforme en grille sans toucher au balisage. */
ul.products {
	display: grid;
	grid-template-columns: var(--grille-produits);
	gap: var(--e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.products::before,
ul.products::after {
	display: none;
}

/*
 * Les !important répondent aux largeurs en pourcentage que WooCommerce pose
 * en ligne sur chaque <li>. « display: flex » les fait s'étirer : sans lui,
 * une carte au titre court flotte au-dessus du bas de sa cellule et la rangée
 * part de travers.
 *
 * La carte elle-même est décrite dans theme.css, pas ici : elle sert aussi
 * sur l'accueil, dans les résultats de recherche et dans les produits liés,
 * où cette feuille n'est pas chargée.
 */
ul.products li.product {
	display: flex;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ==================================================== Fiche produit */

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}

.single-product div.product::before,
.single-product div.product::after {
	display: none;
}

/*
 * WooCommerce insère la pastille « Promo » comme premier enfant de
 * div.product. Dans une grille, elle occuperait une cellule entière et
 * décalerait la galerie et le résumé d'un cran. On la sort du flux.
 */
.single-product div.product > .onsale {
	position: absolute;
	z-index: 5;
	margin: var(--e-4);
	padding: 0.35rem 0.75rem;
	border-radius: var(--r-plein);
	background: var(--or);
	color: var(--noir);
	font-size: var(--t-micro);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.single-product div.product {
	position: relative;
}

/* --- Galerie --- */

/*
 * Même plaque que sur les cartes : la photo est posée entière sur un fond de
 * studio identique d'un produit à l'autre. Sans elle, un JPEG détouré sur
 * blanc découpe un grand rectangle clair au milieu de la page noire, et sa
 * hauteur change à chaque produit — la colonne de droite se déplace.
 */
.woocommerce-product-gallery {
	position: relative;
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	overflow: hidden;
	background: var(--plaque);
	padding: clamp(1rem, 0.5rem + 2vw, 2.25rem);
}

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

.woocommerce-product-gallery__image {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
}

.woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--e-3);
	right: var(--e-3);
	z-index: 10;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--r-2);
	background: rgba(12, 12, 13, 0.82);
	backdrop-filter: blur(8px);
	border: 1px solid var(--ligne-2);
	color: var(--craie);
	font-size: 0;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger::before {
	content: '⤢';
	font-size: 1rem;
}

.woocommerce-product-gallery__trigger:hover {
	border-color: var(--or);
	color: var(--or);
}

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--e-2);
	list-style: none;
	margin: var(--e-3) 0 0;
	padding: 0;
}

.flex-control-thumbs li {
	margin: 0;
}

.flex-control-thumbs img {
	border-radius: var(--r-1);
	border: 1px solid transparent;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s var(--rythme), border-color 0.2s var(--rythme);
}

.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--or);
}

/* --- Résumé --- */

/*
 * Les encarts de paiement fractionné (Stripe/Klarna, Alma, PayPal) sont des
 * cadres fournis par les extensions. Leur couleur de texte est réglée dans
 * l'extension, pas ici, et elle n'est pas la même partout : Stripe et Alma
 * écrivent en blanc, pour fond sombre, tandis que PayPal écrit en noir. Un
 * fond unique pour les trois rend forcément l'un des deux illisible — d'où
 * deux traitements.
 *
 * « :not(:empty) » est indispensable dans les deux cas : ces conteneurs
 * arrivent vides et sont remplis en JavaScript, et un encart vide mais stylé
 * serait une bande de couleur sans contenu.
 */

/* Texte blanc : fond sombre, comme le reste de la fiche. */
#payment-method-message:not(:empty),
.alma-product-eligibility:not(:empty) {
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	padding: var(--e-3);
	margin-block: var(--e-4);
	overflow: hidden;
}

/* Texte noir : la plaque claire des photos, qui devient ici un encart assumé
   plutôt qu'une bande blanche posée sur le noir. */
.ppcp-messages:not(:empty) {
	background: var(--plaque);
	border-radius: var(--r-2);
	padding: var(--e-2) var(--e-3);
	margin-block: var(--e-4);
	overflow: hidden;
}

#payment-method-message iframe,
.alma-product-eligibility iframe,
.ppcp-messages iframe {
	max-width: 100%;
	display: block;
}


.k-produit-fiche__titre,
.single-product .product_title {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin-bottom: var(--e-4);
}

.single-product .summary {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}

.single-product .price {
	display: flex;
	align-items: baseline;
	gap: var(--e-3);
	flex-wrap: wrap;
	font-family: var(--fonte-technique);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--or);
	margin-bottom: var(--e-4);
}

.single-product .price del {
	font-size: 1.1rem;
	color: var(--craie-3);
	font-weight: 500;
}

.single-product .price ins {
	text-decoration: none;
	background: none;
	color: var(--or);
}

.single-product .price small.woocommerce-price-suffix {
	font-family: var(--fonte);
	font-size: var(--t-petit);
	color: var(--craie-3);
	font-weight: 500;
}

.woocommerce-product-details__short-description {
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.7;
	padding-bottom: var(--e-5);
	margin-bottom: var(--e-5);
	border-bottom: 1px solid var(--ligne);
}

.woocommerce-product-details__short-description p + p {
	margin-top: var(--e-3);
}

/* --- Disponibilité --- */

.stock {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-petit);
	font-weight: 700;
	margin-bottom: var(--e-4);
}

.stock::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.stock.in-stock {
	color: var(--vert);
}

.stock.out-of-stock,
.stock.available-on-backorder {
	color: var(--rouge);
}

/* --- Formulaire d'achat --- */

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--e-3);
	margin-bottom: var(--e-5) !important;
}

form.cart.variations_form {
	display: block;
}

.quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-2);
	background: var(--noir-2);
	overflow: hidden;
}

.quantity input[type='number'] {
	width: 4.5rem;
	border: 0;
	background: none;
	text-align: center;
	font-weight: 700;
	padding-inline: 0;
	-moz-appearance: textfield;
}

.quantity input[type='number']::-webkit-outer-spin-button,
.quantity input[type='number']::-webkit-inner-spin-button {
	opacity: 1;
	height: 2rem;
}

.quantity input:focus {
	box-shadow: none;
	background: none;
}

.single_add_to_cart_button,
button.button,
a.button,
input.button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: 0.95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--r-2);
	background: var(--or);
	color: var(--noir);
	font-size: var(--t-note);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--rythme);
}

.single_add_to_cart_button:hover,
button.button:hover,
a.button:hover,
input.button:hover {
	background: var(--or-clair);
	color: var(--noir);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(235, 181, 22, 0.26);
}

.single_add_to_cart_button {
	flex: 1;
	min-width: 12rem;
}

/* Le bouton secondaire de WooCommerce — « Continuer mes achats »,
   « Mettre à jour le panier » — ne doit pas rivaliser avec l'action
   principale. */
.button.wc-backward,
.button[name='update_cart'],
.woocommerce-message .button,
.woocommerce-info .button {
	background: transparent;
	border-color: var(--ligne-2);
	color: var(--craie);
}

.button.wc-backward:hover,
.button[name='update_cart']:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--or-voile);
	border-color: var(--or);
	color: var(--or);
	box-shadow: none;
}

.button:disabled,
.button.disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* --- Variations --- */

table.variations {
	width: 100%;
	margin-bottom: var(--e-4);
	border-collapse: collapse;
}

table.variations th,
table.variations td {
	padding: var(--e-2) 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

table.variations th {
	width: 8rem;
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie-2);
}

.reset_variations {
	display: inline-block;
	margin-top: var(--e-2);
	font-size: var(--t-micro);
	color: var(--craie-3);
}

.woocommerce-variation-price {
	margin-bottom: var(--e-4);
}

/* --- Réassurance --- */

.k-reassurance {
	display: grid;
	gap: var(--e-3);
	padding: var(--e-4);
	margin-block: var(--e-5);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	background: var(--noir-2);
}

.k-reassurance__item {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
}

.k-reassurance__item svg {
	color: var(--or);
	flex: none;
	margin-top: 2px;
}

.k-reassurance__item strong {
	display: block;
	font-size: var(--t-petit);
	font-weight: 700;
	line-height: 1.3;
}

.k-reassurance__item span span {
	display: block;
	font-size: var(--t-micro);
	color: var(--craie-3);
	line-height: 1.4;
	margin-top: 1px;
}

/* --- Métadonnées produit --- */

.product_meta {
	padding-top: var(--e-4);
	border-top: 1px solid var(--ligne);
	font-size: var(--t-petit);
	color: var(--craie-3);
	display: grid;
	gap: var(--e-2);
}

.product_meta > span {
	display: block;
}

.product_meta a {
	color: var(--craie-2);
	text-decoration: none;
}

.product_meta a:hover {
	color: var(--or);
}

/* --- Onglets --- */

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--e-8);
	border-top: 1px solid var(--ligne);
	padding-top: var(--e-6);
}

ul.wc-tabs {
	display: flex;
	gap: var(--e-1);
	list-style: none;
	margin: 0 0 var(--e-6);
	padding: 0;
	border-bottom: 1px solid var(--ligne);
	flex-wrap: wrap;
}

ul.wc-tabs li {
	margin: 0;
}

ul.wc-tabs li a {
	display: block;
	padding: var(--e-3) var(--e-4);
	color: var(--craie-3);
	text-decoration: none;
	font-size: var(--t-note);
	font-weight: 700;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.2s var(--rythme), border-color 0.2s var(--rythme);
}

ul.wc-tabs li a:hover {
	color: var(--craie);
}

ul.wc-tabs li.active a {
	color: var(--or);
	border-bottom-color: var(--or);
}

.woocommerce-Tabs-panel {
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.75;
	max-width: var(--texte);
}

.woocommerce-Tabs-panel > * + * {
	margin-top: var(--e-4);
}

.woocommerce-Tabs-panel h2 {
	font-size: var(--t-h3);
	color: var(--craie);
	margin-bottom: var(--e-4);
}

table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-note);
}

table.shop_attributes th,
table.shop_attributes td {
	padding: var(--e-3) var(--e-4);
	border-bottom: 1px solid var(--ligne);
	text-align: left;
}

table.shop_attributes th {
	width: 14rem;
	color: var(--craie);
	font-weight: 700;
}

table.shop_attributes td {
	color: var(--craie-2);
}

table.shop_attributes p {
	margin: 0;
}

/* --- Avis produit --- */

#reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--e-6);
	padding: 0;
	display: grid;
	gap: var(--e-4);
}

#reviews .comment_container {
	display: flex;
	gap: var(--e-4);
	padding: var(--e-4);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	background: var(--noir-2);
}

#reviews .comment_container img.avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	flex: none;
}

#reviews .comment-text {
	flex: 1;
}

#reviews .woocommerce-review__author {
	font-weight: 700;
	color: var(--craie);
}

#reviews .woocommerce-review__published-date {
	font-size: var(--t-micro);
	color: var(--craie-3);
}

/*
 * L'étoilement de WooCommerce s'appuie normalement sur une police d'icônes
 * livrée par « woocommerce-general », que le thème ne charge pas. On le
 * reconstruit avec le caractère Unicode ★, présent dans toutes les polices
 * système : rien à télécharger, et le rendu ne dépend plus d'un fichier tiers.
 */
.star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	font-size: 0.85rem;
	line-height: 1;
	font-family: inherit;
	color: var(--or);
}

.star-rating::before,
.star-rating span::before {
	content: '★★★★★';
	position: absolute;
	left: 0;
	top: 0;
	letter-spacing: 0.08em;
}

.star-rating::before {
	color: var(--noir-4);
}

.star-rating span {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	margin-bottom: var(--e-4);
	font-size: var(--t-petit);
}

.woocommerce-review-link {
	color: var(--craie-3);
	text-decoration: none;
}

#review_form .comment-form {
	display: grid;
	gap: var(--e-4);
	max-width: 38rem;
}

.comment-form-rating label {
	display: block;
	margin-bottom: var(--e-2);
	font-size: var(--t-petit);
	color: var(--craie-2);
}

/* --- Produits liés --- */

.related,
.upsells {
	grid-column: 1 / -1;
	margin-top: var(--e-8);
	padding-top: var(--e-6);
	border-top: 1px solid var(--ligne);
}

.related > h2,
.upsells > h2 {
	font-size: var(--t-h3);
	margin-bottom: var(--e-5);
}

/* ==================================================== Panier */

.woocommerce-cart-form {
	margin-bottom: var(--e-6);
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-note);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	overflow: hidden;
}

table.shop_table th {
	padding: var(--e-4);
	text-align: left;
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--or);
	background: var(--noir-2);
	border-bottom: 1px solid var(--or-trait);
}

table.shop_table td {
	padding: var(--e-4);
	border-bottom: 1px solid var(--ligne);
	color: var(--craie-2);
	vertical-align: middle;
}

table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

table.shop_table .product-thumbnail img {
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	border-radius: var(--r-2);
	border: 1px solid var(--ligne);
}

table.shop_table .product-name a {
	color: var(--craie);
	text-decoration: none;
	font-weight: 700;
}

table.shop_table .product-name a:hover {
	color: var(--or);
}

table.shop_table .product-price,
table.shop_table .product-subtotal {
	font-family: var(--fonte-technique);
	font-weight: 700;
	color: var(--craie);
}

/* La croix de suppression : discrète tant qu'on ne la cherche pas, franche
   au survol. Un bouton rouge permanent dans un panier inquiète. */
a.remove {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 1px solid var(--ligne-2);
	color: var(--craie-3) !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: all 0.18s var(--rythme);
}

a.remove:hover {
	background: var(--rouge);
	border-color: var(--rouge);
	color: var(--noir) !important;
}

.coupon {
	display: flex;
	gap: var(--e-2);
	flex-wrap: wrap;
	align-items: center;
}

.coupon input[type='text'] {
	width: auto;
	min-width: 12rem;
}

.actions {
	display: flex;
	justify-content: space-between;
	gap: var(--e-4);
	flex-wrap: wrap;
	padding-top: var(--e-4);
}

.cart-collaterals,
.cart_totals {
	max-width: 30rem;
	margin-left: auto;
}

.cart_totals h2,
.woocommerce-checkout-review-order h3,
#order_review_heading {
	font-size: var(--t-h4);
	margin-bottom: var(--e-4);
}

.cart_totals table,
.woocommerce-checkout-review-order table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-note);
}

.cart_totals th,
.cart_totals td,
.woocommerce-checkout-review-order th,
.woocommerce-checkout-review-order td {
	padding: var(--e-3) 0;
	border-bottom: 1px solid var(--ligne);
	text-align: left;
}

.cart_totals th,
.woocommerce-checkout-review-order th {
	color: var(--craie-2);
	font-weight: 600;
	background: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--t-note);
	border-bottom-color: var(--ligne);
}

.cart_totals td,
.woocommerce-checkout-review-order td {
	text-align: right;
	font-family: var(--fonte-technique);
	font-weight: 700;
	color: var(--craie);
}

.cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total td {
	font-size: 1.35rem;
	color: var(--or);
}

.wc-proceed-to-checkout {
	margin-top: var(--e-5);
}

.wc-proceed-to-checkout .button {
	width: 100%;
	padding-block: 1.15rem;
	font-size: var(--t-corps);
}

/* ==================================================== Commande */

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--e-6);
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
	width: auto !important;
	float: none !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: var(--t-h4);
	margin-bottom: var(--e-4);
	padding-bottom: var(--e-3);
	border-bottom: 1px solid var(--ligne);
}

/*
 * Les champs de commande. « woocommerce-layout », qui les mettait en page en
 * flottants, n'est pas chargé : la grille ci-dessous le remplace, et les
 * classes first/last de WooCommerce y prennent naturellement une demi-largeur.
 */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--e-4);
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	margin-bottom: var(--e-4);
	grid-column: span 2;
}

.form-row-first,
.form-row-last {
	grid-column: span 1;
}

@media (max-width: 560px) {
	.form-row-first,
	.form-row-last {
		grid-column: span 2;
	}
}

.form-row label {
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie-2);
}

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

.form-row.woocommerce-invalid input {
	border-color: var(--rouge);
}

.form-row.woocommerce-validated input {
	border-color: rgba(52, 211, 153, 0.5);
}

/* Select2, utilisé par WooCommerce pour les pays et régions. */
.select2-container--default .select2-selection--single {
	height: auto;
	padding: 0.85rem 1rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--craie);
	line-height: 1.4;
	padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 0.75rem;
}

.select2-dropdown {
	background: var(--noir-3);
	border-color: var(--ligne-2);
	color: var(--craie);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--or);
	color: var(--noir);
}

.select2-search--dropdown .select2-search__field {
	background: var(--noir-2);
	border-color: var(--ligne-2);
	color: var(--craie);
}

#payment {
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	padding: var(--e-5);
	margin-top: var(--e-5);
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--e-5);
	padding: 0;
	display: grid;
	gap: var(--e-3);
}

#payment ul.payment_methods li {
	padding: var(--e-3);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	transition: border-color 0.2s var(--rythme);
}

#payment ul.payment_methods li:hover {
	border-color: var(--or-trait);
}

#payment ul.payment_methods label {
	font-weight: 700;
	font-size: var(--t-note);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
}

#payment .payment_box {
	margin-top: var(--e-3);
	padding: var(--e-3);
	background: var(--noir-3);
	border-radius: var(--r-1);
	font-size: var(--t-petit);
	color: var(--craie-2);
}

#payment .payment_box p:last-child {
	margin-bottom: 0;
}

#place_order {
	width: 100%;
	padding-block: 1.15rem;
	font-size: var(--t-corps);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block: var(--e-4);
	font-size: var(--t-petit);
	color: var(--craie-2);
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	cursor: pointer;
}

/* ==================================================== Tunnel de commande

 * Le panier et la commande sont deux pages WordPress ordinaires : elles
 * héritent donc du gabarit de lecture — une colonne de 68 caractères, des
 * liens bleus et des tableaux quadrillés, pensés pour de la prose. Pour un
 * formulaire de coordonnées, un récapitulatif et sept moyens de paiement,
 * c'est trop étroit et trop décoré. Cette section leur rend une largeur de
 * boutique, des tableaux sobres et la couleur de la maison.
 */

.woocommerce-cart .k-conteneur--texte,
.woocommerce-checkout .k-conteneur--texte {
	max-width: var(--large);
}

.woocommerce-cart .k-prose,
.woocommerce-checkout .k-prose {
	max-width: none;
}

/* Le « :not(.button) » n'est pas décoratif : « Valider la commande » est un
   lien habillé en bouton or. Coloré comme un lien, son texte devenait or sur
   or, donc invisible. */
.woocommerce-cart .k-prose a:not(.button),
.woocommerce-checkout .k-prose a:not(.button) {
	color: var(--or);
	text-decoration-color: var(--or-trait);
}

.woocommerce-cart .k-prose a:not(.button):hover,
.woocommerce-checkout .k-prose a:not(.button):hover {
	color: var(--or-clair);
}

/* La prose borde ses cellules sur quatre côtés ; les tableaux de la boutique
   n'en gardent qu'une ligne de séparation. Sans cette remise à zéro, les
   bordures verticales de la prose survivent au style du panier. */
.woocommerce-cart .k-prose table th,
.woocommerce-cart .k-prose table td,
.woocommerce-checkout .k-prose table th,
.woocommerce-checkout .k-prose table td {
	border: 0;
	border-bottom: 1px solid var(--ligne);
}

/* --- Deux colonnes : la saisie à gauche, ce qu'on paie à droite. ---
 *
 * WooCommerce empile coordonnées, récapitulatif et paiement les uns sous les
 * autres. Sur un écran large, le client remplit une longue colonne sans
 * jamais voir ce qu'il paie. Les enveloppes .k-tunnel sont posées par
 * inc/woocommerce.php autour des blocs d'origine.
 */
@media (min-width: 62rem) {
	.k-tunnel {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--e-6);
		align-items: start;
	}

	/* Dans une colonne de 600 pixels, facturation et livraison ne tiennent
	   plus côte à côte : elles s'empilent. */
	.k-tunnel .col2-set {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e-5);
	}
}

.k-tunnel__resume #order_review_heading {
	margin-top: 0;
	padding-bottom: var(--e-3);
	border-bottom: 1px solid var(--ligne);
}

.k-tunnel #payment {
	margin-top: var(--e-4);
	padding: var(--e-4);
}

/* --- Le panier --- */

/* La ligne « code promo » porte un colspan sur toute la largeur. En calcul
   automatique, le navigateur reporte sa largeur sur les autres colonnes — la
   première, vide, se retrouvait à 274 pixels et le nom du produit à l'étroit.
   Les largeurs déclarées ne sont respectées qu'en calcul fixe. Sous 700 px le
   tableau passe en fiches empilées, où cette propriété ne s'applique plus. */
.woocommerce-cart table.cart {
	table-layout: fixed;
}

.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove {
	width: 3.5rem;
}

.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail {
	width: 5.5rem;
}

.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal {
	width: 8rem;
}

.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity {
	width: 7rem;
}

/* Au-dessus du téléphone, la ligne d'actions redevient une vraie cellule de
   tableau. En boîte flexible, la cellule perd son « colspan » : elle ne
   couvrait plus que la première colonne, 56 pixels, et les deux boutons
   s'empilaient en colonne étroite avec un mot par ligne. */
@media (min-width: 44rem) {
	.woocommerce-cart td.actions {
		display: table-cell;
		overflow: hidden;
	}

	.woocommerce-cart td.actions .coupon {
		display: inline-flex;
		align-items: center;
		gap: var(--e-2);
		max-width: 100%;
	}

	.woocommerce-cart td.actions .button[name='update_cart'] {
		float: right;
	}
}

/* Le panier sur deux colonnes : les articles à gauche, le total et le bouton
   à droite, à hauteur d'œil plutôt qu'un écran plus bas. */
@media (min-width: 62rem) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: var(--e-6);
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
		margin-bottom: 0;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		max-width: none;
		margin: 0;
	}
}

/* Dans le tableau des totaux, la colonne de gauche n'est pas un en-tête de
   tableau mais une étiquette : la bande sombre de « table.shop_table th » y
   dessinait une marche verticale au milieu du cadre. Et sans « nowrap »,
   « Sous-total » se coupait en deux lignes dans une colonne étroite. */
.cart_totals table.shop_table th,
#order_review table.shop_table th {
	background: none;
	white-space: nowrap;
	width: 1%;
}

/* --- Le récapitulatif --- */

/* Le nom du produit est une phrase, pas un montant : il se lit à gauche et
   dans la fonte du site. */
#order_review td.product-name {
	text-align: left;
	font-family: inherit;
	font-weight: 600;
	color: var(--craie);
}

#order_review td.product-name .product-quantity {
	color: var(--craie-2);
	font-weight: 400;
}

/* --- Cases et boutons posés par les passerelles ---
 *
 * Stripe écrit « width:auto » en attribut de style sur ses cases à cocher.
 * Dans une ligne de formulaire montée en colonne, la case s'étire alors sur
 * toute la largeur : à l'écran, une barre vide au-dessus de son libellé.
 * L'attribut de style ne se bat qu'avec « !important ».
 */
.woocommerce-checkout input[type='checkbox'],
.woocommerce-checkout input[type='radio'] {
	width: 1.15rem !important;
	height: 1.15rem !important;
	max-width: 1.15rem;
}

.woocommerce-checkout .form-row > input[type='checkbox'],
.woocommerce-checkout .form-row > input[type='radio'] {
	align-self: flex-start;
}

/* Stripe pose un champ invisible pour mesurer nos styles. Large de 100 %, il
   dépassait de l'écran et faisait défiler la page de côté. */
#wc-stripe-hidden-style-input {
	width: 1px !important;
	max-width: 1px !important;
}

.woocommerce-SavedPaymentMethods {
	list-style: none;
	margin: 0 0 var(--e-3);
	padding: 0;
	display: grid;
	gap: var(--e-2);
}

/* « flex-direction » doit être redit : ces lignes portent aussi la classe
   .form-row, qui les monte en colonne. */
.woocommerce-SavedPaymentMethods li,
.woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-SavedPaymentMethods label,
.woocommerce-SavedPaymentMethods-saveNew label {
	margin: 0;
	font-size: var(--t-petit);
	font-weight: 500;
	color: var(--craie-2);
}

/* --- Moyens de paiement ---
 *
 * WooCommerce fait flotter les logos des passerelles à droite. Sa feuille de
 * mise en page n'étant pas chargée, ils se détachaient de leur ligne et
 * s'empilaient en bas de la fiche. Chaque moyen devient une ligne à trois
 * cases : le bouton, le libellé avec ses logos, puis le détail replié.
 */
#payment ul.payment_methods li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0 var(--e-3);
	padding: var(--e-4);
}

#payment ul.payment_methods li > input[type='radio'] {
	grid-column: 1;
	align-self: center;
}

#payment ul.payment_methods label {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
	margin: 0;
}

#payment ul.payment_methods label img,
#payment ul.payment_methods label .wc-stripe-card-icon {
	float: none !important;
	height: 1.4rem;
	width: auto;
	max-width: 3.5rem;
	margin: 0 !important;
	object-fit: contain;
}

#payment ul.payment_methods .wc-stripe-card-icons-container {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
}

#payment .payment_box {
	grid-column: 1 / -1;
}

/* Le « + 4 » de WooPayments est écrit en gris foncé sur gris clair : sur le
   noir du site, c'était une pastille vide. */
#payment .payment-methods--logos-count {
	background: var(--noir-3);
	color: var(--craie-2);
	border-radius: var(--r-1);
	font-size: var(--t-micro);
}

/* Sans marque sur la ligne cochée, on ne sait plus ce qu'on a choisi. */
#payment ul.payment_methods li:has(input[type='radio']:checked) {
	border-color: var(--or-trait);
	background: var(--noir-3);
}

/* L'encart PayPal écrit en noir : il lui faut un fond clair, mais une bande
   blanche sur toute la largeur se lit comme une erreur d'affichage. Il se
   réduit donc à la taille de son message. */
.ppcp-messages:not(:empty) {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding: var(--e-2) var(--e-3);
	border-radius: var(--r-2);
}

/* Dans le tunnel, trois extensions posent leur propre encart « payez en
   plusieurs fois » entre le total et le bouton : PayPal en plaque blanche,
   Alma en carte blanche, Klarna en texte sombre sur fond sombre. Trois
   styles étrangers les uns aux autres, qui répètent ce que les moyens de
   paiement disent déjà juste en dessous. Ils restent sur la fiche produit,
   où le paiement fractionné est un argument de vente.
   Le « !important » n'est pas un caprice : PayPal écrit « display:block » en
   attribut de style depuis son JavaScript. */
.woocommerce-cart .ppcp-messages,
.woocommerce-checkout .ppcp-messages,
.woocommerce-cart #payment-method-message,
.woocommerce-checkout #payment-method-message,
.woocommerce-cart .alma-cart-eligibility,
.woocommerce-cart .alma-product-eligibility,
.woocommerce-checkout .alma-cart-eligibility,
.woocommerce-checkout .alma-product-eligibility {
	display: none !important;
}

/* --- Livraison et conditions --- */

h3#ship-to-different-address {
	display: flex;
	align-items: center;
}

h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	margin: 0;
	font: inherit;
	color: inherit;
}

/* L'astérisque des conditions générales est un troisième élément de la
   ligne : en boîte flexible, il partait se coller au bord droit. En flux
   normal, il suit le texte. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: block;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input[type='checkbox'] {
	margin-right: var(--e-2);
	vertical-align: -0.2em;
}

/* ==================================================== Espace client */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--e-6);
	align-items: start;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--e-1);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	padding: var(--e-2);
	background: var(--noir-2);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65rem 0.85rem;
	border-radius: var(--r-2);
	color: var(--craie-2);
	text-decoration: none;
	font-size: var(--t-note);
	font-weight: 600;
	transition: all 0.18s var(--rythme);
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--noir-3);
	color: var(--craie);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--or-voile);
	color: var(--or);
}

.woocommerce-MyAccount-content {
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.7;
}

.woocommerce-MyAccount-content > * + * {
	margin-top: var(--e-4);
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--or);
}

/* Connexion et inscription côte à côte. */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--e-6);
}

.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	width: auto !important;
	float: none !important;
}

form.woocommerce-form-login,
form.woocommerce-form-register,
form.woocommerce-EditAccountForm,
form.woocommerce-form-track-order {
	padding: var(--e-5);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	background: var(--noir-2);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-petit);
	margin-block: var(--e-3);
}

.lost_password a {
	font-size: var(--t-petit);
	color: var(--craie-3);
}

/* ==================================================== Messages */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	flex-wrap: wrap;
	padding: var(--e-4);
	margin-bottom: var(--e-5);
	border-radius: var(--r-2);
	border: 1px solid var(--ligne-2);
	background: var(--noir-2);
	color: var(--craie);
	font-size: var(--t-note);
	list-style: none;
}

.woocommerce-message {
	border-color: rgba(52, 211, 153, 0.4);
	background: rgba(52, 211, 153, 0.08);
}

.woocommerce-info {
	border-color: var(--or-trait);
	background: rgba(235, 181, 22, 0.07);
}

.woocommerce-error {
	border-color: rgba(248, 116, 106, 0.4);
	background: rgba(248, 116, 106, 0.08);
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-error li {
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding-block: 0.6rem;
	font-size: var(--t-petit);
}

/* ==================================================== Adaptations */

@media (max-width: 960px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}

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

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
	}
}

@media (max-width: 700px) {
	ul.products {
		gap: var(--e-3);
	}

	/*
	 * Le tableau des articles passe en fiches empilées : six colonnes sur un
	 * écran de téléphone produisent une police illisible ou un défilement
	 * horizontal, et les deux font abandonner la commande.
	 *
	 * Viser « table.cart » et non « table.shop_table » : le tableau des
	 * totaux porte la seconde classe et pas la première. Empilé lui aussi, il
	 * affichait deux fois chaque intitulé — son en-tête de ligne, puis
	 * l'étiquette ajoutée avant la valeur.
	 */
	.woocommerce-cart table.cart thead {
		display: none;
	}

	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart tr,
	.woocommerce-cart table.cart td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart table.cart tr {
		border-bottom: 1px solid var(--ligne);
		padding: var(--e-3) 0;
		position: relative;
	}

	.woocommerce-cart table.cart td {
		border: 0;
		padding: var(--e-2) var(--e-3);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--e-3);
	}

	.woocommerce-cart table.cart td::before {
		content: attr(data-title);
		white-space: nowrap;
		font-size: var(--t-micro);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--craie-3);
	}

	.woocommerce-cart table.cart td.product-remove::before,
	.woocommerce-cart table.cart td.product-thumbnail::before,
	.woocommerce-cart table.cart td.actions::before {
		display: none;
	}

	.cart-collaterals,
	.cart_totals {
		max-width: none;
	}

	.actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Le sélecteur de quantité est une boîte flexible à l'intérieur d'une
	   autre : sans « flex: none », il se laissait comprimer à trois pixels. */
	.woocommerce-cart td.product-quantity .quantity {
		flex: none;
	}

	.coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.coupon input[type='text'] {
		width: 100%;
	}
}