/* ==========================================================
   Panier + Paiement (WooCommerce Cart/Checkout Blocks) — reskin 2026-09-03
   Les deux utilisent les blocs Gutenberg WooCommerce (Store API, pas les
   templates classiques woocommerce/cart|checkout/*.php) -- ces classes
   .wc-block-* viennent du CSS réel installé (assets/client/blocks/cart.css
   et checkout.css du plugin WooCommerce), vérifiées directement dans le
   code plutôt que devinées. Même patron visuel que le reskin Mon compte
   (mon-compte.css) : palette --lmp-* (theme.css), cartes crème/blanches
   sans bordure, coins arrondis, ombres douces -- aucun nouveau token de
   couleur. Scopé par is_cart()/is_checkout() côté PHP
   (lmp_enqueue_panier_assets, functions.php), jamais de bleed vers la
   boutique/le configurateur qui partagent certaines classes WooCommerce de
   base.
   ========================================================== */

.wc-block-cart {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 56px) 20px clamp(56px, 6vw, 80px);
	font-family: var(--font-body);
	color: var(--lmp-brun);
}

/* --- Retour au configurateur (bouton "pill ghost", même signature visuelle
   que .lmp-mc-pill--ghost du reskin Mon compte -- dupliqué plutôt que
   partagé car mon-compte.css n'est jamais chargé sur panier/paiement, voir
   lmp_enqueue_panier_assets/lmp_enqueue_mon_compte_assets, functions.php) --- */

.lmp-retour-configurateur {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 6px;
	/* Aligné à gauche (sous le titre "Panier", lui-même à gauche) plutôt que
	   centré -- demande de Félix 2026-09-09. */
	margin: 0 0 clamp(20px, 3vw, 28px) 0;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--lmp-creme-dark);
	color: var(--lmp-brun);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

.lmp-retour-configurateur:hover {
	background: var(--lmp-lavande-light);
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart h2 {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
}

/* --- Liste des articles --- */

.wc-block-cart-items {
	background: var(--lmp-blanc);
	border-radius: 20px;
	padding: clamp(16px, 2.5vw, 28px);
	box-shadow: 0 4px 24px rgba(61, 43, 31, 0.09);
}

.wc-block-cart-items__header {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lmp-text-light);
	border-bottom: 1px solid rgba(61, 43, 31, 0.1);
	padding-bottom: 12px;
}

.wc-block-cart-items__row {
	border-bottom: 1px dashed rgba(61, 43, 31, 0.15);
	padding: 18px 0;
}

.wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* Le panier est un vrai <table> (WooCommerce) -- vertical-align par défaut
   du navigateur (baseline) désaligne le texte entre colonnes image/produit/
   quantité/total, d'où le côté "pas aligné" signalé. */
.wc-block-cart-items th,
.wc-block-cart-items td {
	vertical-align: middle;
}

.wc-block-cart-item__image img {
	border-radius: 14px;
}

.wc-block-components-product-name,
.wc-block-components-product-name.wc-block-components-product-name {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}

.wc-block-components-product-metadata {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--lmp-text-light);
	line-height: 1.6;
	margin-top: 4px;
}

.wc-block-components-product-price .wc-block-components-formatted-money-amount {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--lmp-brun);
}

.wc-block-cart-item__prices {
	margin-top: 6px;
}

/* Sélecteur de quantité -- pilule arrondie, même langage que .btn (theme.css). */
.wc-block-components-quantity-selector {
	border: 1.5px solid rgba(61, 43, 31, 0.15);
	border-radius: 999px;
	overflow: hidden;
	background: var(--lmp-creme);
}

.wc-block-components-quantity-selector__button {
	color: var(--lmp-brun);
	background: transparent;
	min-width: 36px;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--lmp-lavande-light);
}

.wc-block-components-quantity-selector__input {
	border: none;
	background: transparent;
	color: var(--lmp-brun);
	font-family: var(--font-body);
	font-weight: 700;
}

.wc-block-cart-item__remove-link {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lmp-brun-cuir);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--lmp-brun);
}

/* --- Sommaire / totaux (colonne de droite) --- */

.wc-block-cart__sidebar .wc-block-components-panel,
.wc-block-cart__sidebar > * > .wc-block-components-totals-wrapper {
	background: var(--lmp-creme);
	border-radius: 20px;
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 4px 24px rgba(61, 43, 31, 0.09);
}

.wc-block-cart__totals-title {
	font-size: 1.3rem;
	margin: 0 0 16px;
}

.wc-block-components-totals-item {
	font-family: var(--font-body);
	padding: 10px 0;
	border-bottom: 1px dashed rgba(61, 43, 31, 0.12);
}

.wc-block-components-totals-item__label {
	color: var(--lmp-brun);
	font-weight: 600;
}

.wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--lmp-brun);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-heading);
	font-size: 1.15rem;
}

/* Coupon -- "Ajouter un coupon" (.wc-block-components-panel__button, le vrai
   déclencheur qui déplie le formulaire) reste un lien discret ; le bouton
   "Appliquer" à l'intérieur (.wc-block-components-totals-coupon__button, un
   vrai <button type="submit">) garde le style pilule des autres boutons
   ci-dessous -- confondre les deux (fait dans une passe précédente) laissait
   "Appliquer" sans aucun style visible, illisible comme bouton. */
.wc-block-components-panel__button {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--lmp-lavande-aa, var(--lmp-lavande));
}

.wc-block-components-panel__button:hover {
	color: var(--lmp-brun);
}

.wc-block-components-totals-coupon__form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
}

.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	padding: 0.55rem 1.1rem !important;
	font-size: 0.85rem !important;
}

.wc-block-components-totals-coupon__input input,
.wc-block-components-text-input input,
.wc-block-components-address-form input {
	border-radius: 12px;
	border: 1.5px solid rgba(61, 43, 31, 0.15);
	background: var(--lmp-blanc);
	font-family: var(--font-body);
}

/* --- Boutons (coupon "Appliquer", "Passer à la caisse") -- même pilule que .btn --- */

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-family: var(--font-body);
	font-weight: 700;
	border-radius: 999px !important;
	background: var(--lmp-lavande) !important;
	color: var(--lmp-blanc) !important;
	border: none !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--lmp-brun) !important;
	color: var(--lmp-blanc) !important;
}

/* --- Paiement (Checkout Block) -- adresse, livraison, options de paiement --- */

.wc-block-checkout__form h2,
.wc-block-checkout__sidebar h2 {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
}

/* UNE seule carte pour tout le sommaire (comme le panier, une seule carte
   "TOTAL PANIER") -- PAS .wc-block-components-totals-wrapper : cette classe
   est répétée sur CHAQUE sous-bloc (sous-total/remise/frais/livraison...),
   y compris les blocs "remise"/"frais" vides quand rien ne s'applique --
   les styler individuellement affichait des boîtes vides flottantes (glitch
   visuel constaté avec Playwright, 2026-09-03). Le conteneur du bloc racine
   (wp-block-woocommerce-checkout-totals-block, posé par Gutenberg) reste
   l'unique élément stylé.
*/
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--lmp-creme);
	border-radius: 20px;
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 4px 24px rgba(61, 43, 31, 0.09);
}

.wc-block-components-radio-control__option,
.wc-block-checkout__shipping-method-option {
	border-radius: 14px !important;
	border-color: rgba(61, 43, 31, 0.15) !important;
}

.wc-block-components-radio-control__option-checked,
.wc-block-checkout__shipping-method-option--selected {
	border-color: var(--lmp-lavande) !important;
	background: var(--lmp-rose-light) !important;
}

/* Bouton "Valider la commande" sticky en mobile (WooCommerce, PAS notre
   ajout -- .wc-block-cart__submit-container--sticky, position:fixed;
   bottom:0, activé nativement sous 782px, cart.css du plugin). Sans espace
   réservé, il flotte par-dessus les dernières lignes du résumé (TVQ/Total
   estimé restaient à moitié cachés dessous) ET par-dessus le pied de page
   une fois la page défilée jusqu'en bas -- confirmé avec Playwright,
   captures RÉELLES (pas fullPage, qui masque ce genre de chevauchement
   d'élément fixe), 2026-09-03. 80px = hauteur réelle mesurée du bouton
   (padding 16px haut/bas + le bouton lui-même). */
@media (max-width: 782px) {
	.wc-block-cart__sidebar {
		padding-bottom: 88px;
	}

	body.woocommerce-cart .site-footer {
		padding-bottom: 88px;
	}
}

/* --- Panier vide --- */

.wc-block-cart__empty-cart__title {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
}

.wc-block-grid__product-title {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
}

@media (max-width: 640px) {
	.wc-block-cart-items,
	.wc-block-cart__sidebar .wc-block-components-panel,
	.wc-block-cart__sidebar > * > .wc-block-components-totals-wrapper {
		border-radius: 16px;
	}
}