/*
 * Thème Blondeau — CSS WooCommerce
 * Surcharges des styles WooCommerce pour correspondre au design du thème.
 * Chargé uniquement sur les pages WooCommerce.
 *
 * @package Blondeau
 * @version 1.4.2 — page « Commande reçue » pleine largeur, plus de colonne vide à droite (BUG-436) — 2026-10-27
 * @version 1.4.1 — boutons WC Blocks : focus clavier unifié, bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 1.4.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 1.3.5 — panier sous 360px : total sous la ligne produit (BUG-392) — 2026-10-19
 * @version 1.3.4
 */


/* ============================================================
   WRAPPERS ET STRUCTURE
   ============================================================ */

.woocommerce-content {
  width: 100%;
}

/* Retirer les marges négatives WC par défaut */
.woocommerce,
.woocommerce-page {
  /* Reset de base */
}



/* ============================================================
   GRILLE DE PRODUITS — ARCHIVE BOUTIQUE
   ============================================================ */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tablette : 2 colonnes */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile : 1 colonne */
@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* Retirer les floats WooCommerce */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}


/* ============================================================
   CARTE PRODUIT
   ============================================================ */

.woocommerce ul.products li.product {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-lg);
}

/* Image du produit */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Corps de la carte */
.woocommerce ul.products li.product .product-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Badges promo/nouveau */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-error);
  color: #ffffff;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  z-index: 1;
}

/* Nom du produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  text-decoration: none;
}

.woocommerce ul.products li.product a .woocommerce-loop-product__title:hover {
  color: var(--color-accent);
}

/* Prix */
.woocommerce ul.products li.product .price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-error);
}

.woocommerce ul.products li.product .price del {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Étoiles de notation */
.woocommerce ul.products li.product .star-rating {
  margin-bottom: 0.5rem;
}

/* Bouton "Ajouter au panier" dans la grille */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
  margin-top: auto;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.woocommerce ul.products li.product .button.added,
.woocommerce ul.products li.product .add_to_cart_button.added {
  background: var(--color-success);
  border-color: var(--color-success);
}


/* ============================================================
   BARRE DE CONTRÔLE BOUTIQUE (résultats + tri)
   ============================================================ */

.woocommerce-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-result-count {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.woocommerce-ordering select {
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%231A2B4C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}


/* ============================================================
   PAGE PRODUIT SIMPLE
   ============================================================ */

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Galerie produit */
.woocommerce div.product div.images {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}

.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce div.product .thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.woocommerce div.product .thumbnails a {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
}

.woocommerce div.product .thumbnails a.active,
.woocommerce div.product .thumbnails a:hover {
  border-color: var(--color-accent);
}

/* Résumé produit */
.woocommerce div.product div.summary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Titre du produit */
.woocommerce div.product .product_title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Prix sur la page produit */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.woocommerce div.product .price ins {
  text-decoration: none;
  color: var(--color-error);
}

.woocommerce div.product .price del {
  color: var(--color-text-muted);
  font-size: 1.25rem;
  font-weight: 400;
  margin-right: 0.5rem;
}

/* Étoiles de notation */
.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Description courte */
.woocommerce div.product .woocommerce-product-details__short-description {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: var(--color-text);
  font-size: 1rem;
}

/* Formulaire d'ajout au panier */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
}

.woocommerce div.product form.cart .qty {
  width: 80px;
  text-align: center;
  padding: 0.5rem;
  min-height: 44px;
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
  flex: 1;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  min-height: 52px;
  min-width: 180px;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* Métadonnées produit (SKU, catégorie, tags) */
.woocommerce div.product .product_meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: 0.25rem;
}

.woocommerce div.product .product_meta a {
  color: var(--color-primary);
  text-decoration: underline;
}


/* ============================================================
   ONGLETS PRODUIT (description, caractéristiques, avis)
   ============================================================ */

.woocommerce-tabs {
  margin-top: 2rem;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid var(--color-border);
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 1.5rem 0;
  line-height: 1.6;
}


/* ============================================================
   PRODUITS LIÉS ET UPSELLS
   ============================================================ */

.related.products,
.upsells.products {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.related.products > h2,
.upsells.products > h2 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.related.products ul.products,
.upsells.products ul.products {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   PANIER (CART)
   ============================================================ */

.woocommerce-cart-form table.cart {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.woocommerce-cart-form table.cart thead th {
  padding: 0.75rem 1rem;
  background: var(--color-bg-alt);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}

.woocommerce-cart-form table.cart tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.woocommerce-cart-form table.cart .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.woocommerce-cart-form table.cart .product-name a {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.woocommerce-cart-form table.cart .product-name a:hover {
  color: var(--color-accent);
}

.woocommerce-cart-form table.cart input.qty {
  width: 70px;
  text-align: center;
  padding: 0.375rem 0.5rem;
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  min-height: 40px;
}

.woocommerce-cart-form table.cart .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-error);
  text-decoration: none;
  font-size: 1.25rem;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.woocommerce-cart-form table.cart .remove:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* Totaux du panier */
.cart-collaterals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .cart-collaterals {
    grid-template-columns: 1fr;
  }
}

.cart_totals {
  background: var(--color-bg-alt);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.cart_totals h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.cart_totals table {
  width: 100%;
}

.cart_totals table th,
.cart_totals table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: none;
  padding-top: 1rem;
}

.wc-proceed-to-checkout {
  margin-top: 1rem;
}

.wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 52px;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}


/* ============================================================
   CHECKOUT (COMMANDE)
   ============================================================ */

/* Liens de continuation sur la page « Commande reçue » */
.blondeau-thankyou-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2.5rem;
  align-items: start;
}

/* Page « Commande reçue » avec formulaire de connexion (compte client non
   authentifié) : contenu à plat (notice + form-login), pas de récapitulatif
   de commande en 2e colonne — la grille 2 colonnes ci-dessus laissait alors
   une colonne de droite vide sur toute la hauteur du formulaire. */
.woocommerce-checkout .woocommerce:has(.woocommerce-form-login) {
  display: block;
}

/* Page « Commande reçue » (client connecté) : même correction — le contenu
   (.woocommerce-order) est seul dans le conteneur, il occupe toute la largeur
   au lieu de laisser la colonne de 400px vide à droite (BUG-436). */
.woocommerce-checkout .woocommerce:has(> .woocommerce-order) {
  display: block;
}

@media (max-width: 1024px) {
  .woocommerce-checkout .woocommerce {
    grid-template-columns: 1fr;
  }
}

.woocommerce-checkout h3 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-primary);
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin-bottom: 2rem;
}

/* Récapitulatif de commande */
#order_review {
  background: var(--color-bg-alt);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

#order_review_heading {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin-bottom: 1rem;
}

table.shop_table td,
table.shop_table th {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

table.shop_table .order-total td,
table.shop_table .order-total th {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: none;
  padding-top: 0.75rem;
}

#place_order {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 52px;
  margin-top: 1rem;
}

#place_order:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}


/* ============================================================
   MON COMPTE (MY ACCOUNT)
   ============================================================ */

/*
 * Layout dashboard (header + nav horizontale + contenu pleine largeur)
 * et navigation : voir assets/css/account.css (Phase 11.1 — Dev-plan).
 * L'ancienne grille sidebar/contenu et le style .woocommerce-MyAccount-navigation
 * sont remplacés par le header/nav custom de woocommerce/myaccount/navigation.php.
 */


/* ============================================================
   NOTICES WOOCOMMERCE
   Mise en page et couleurs : définition unique dans main.css
   (section « MESSAGES D'ÉTAT — COMPOSANT MULTI-USAGE »).
   ============================================================ */

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none;
}

/* Bouton dans les notices — ancré en bas à droite du conteneur, même
 * convention que .blondeau-toast__actions (main.css) : texte en premier,
 * bouton en dessous aligné à droite. `order: 1` (vs `order: 0` implicite du
 * texte) force ce placement quel que soit l'ordre du HTML source — certaines
 * notices WooCommerce (ex. confirmation d'e-mail, Mon compte > Commandes)
 * mettent le bouton AVANT le texte dans le balisage, d'autres (ex. "Produit
 * ajouté au panier") après ; `margin-left: auto` seul était sans effet, le
 * conteneur `.woocommerce-message` n'étant pas un flex container. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: flex;
  flex-direction: column;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  order: 1;
  margin-top: var(--space-3, 0.75rem);
  padding: 0.35rem 0.875rem;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-base);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.woocommerce-message .button:hover {
  background: var(--color-primary-dark);
  color: #ffffff;
}


/* ============================================================
   PRIX ET PROMOTIONS
   ============================================================ */

/* Prix normal */
.woocommerce .price {
  font-weight: 700;
  color: var(--color-primary);
}

/* Prix en promotion */
.woocommerce .price ins {
  text-decoration: none;
  color: var(--color-error);
}

/* Prix barré */
.woocommerce .price del {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Badge "Promo" */
.woocommerce span.onsale {
  background: var(--color-error);
  color: #ffffff;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
}


/* ============================================================
   ÉTOILES DE NOTATION
   ============================================================ */

.woocommerce .star-rating {
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  width: 6.2em;
  font-family: "star";
  display: inline-block;
  color: var(--color-accent);
}

.woocommerce .star-rating::before {
  content: '\53\53\53\53\53';
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}

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

.woocommerce .star-rating span::before {
  content: '\53\53\53\53\53';
  top: 0;
  position: absolute;
  left: 0;
  color: var(--color-accent);
}


/* ============================================================
   PAGINATION BOUTIQUE
   ============================================================ */

.woocommerce nav.woocommerce-pagination {
  text-align: center;
  padding: 2rem 0;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-dark);
  color: var(--color-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  font-weight: 700;
}




/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .woocommerce div.product .product_title {
    font-size: 1.5rem;
  }

  .woocommerce div.product p.price {
    font-size: 1.375rem;
  }

  .woocommerce div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
  }

  .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
  }

  .woocommerce-tabs ul.tabs li a {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }

  .cart-collaterals {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PROTECTION BOUTONS THÈME — pages WooCommerce
   ------------------------------------------------------------
   WooCommerce définit --woocommerce: #720eec (violet) et l'applique
   sur button via woocommerce.css. Nos classes .btn--* doivent prendre
   la main avec une spécificité suffisante.
   ============================================================ */

/* Écrase la variable violette WooCommerce à la racine */
:root {
  --woocommerce: var(--color-primary);
  --wc-green: var(--color-primary);
}

/* Catch-all : tout bouton WooCommerce non encore ciblé → style primaire */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* Neutralise la couleur WC sur nos boutons custom */
.woocommerce .btn,
.woocommerce-page .btn {
  background-color: transparent;
  color: inherit;
  border-color: transparent;
}

.woocommerce .btn--primary,
.woocommerce-page .btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.woocommerce .btn--secondary,
.woocommerce-page .btn--secondary {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.woocommerce .btn--outline,
.woocommerce-page .btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.woocommerce .btn--ghost,
.woocommerce-page .btn--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce .btn:disabled,
.woocommerce-page .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================================
   STEPPER QUANTITÉ — protection input[type="number"]
   ------------------------------------------------------------
   WC applique input[type="number"] { width: 100% } via woocommerce.css.
   Spécificité (0,1,2) > nos règles (0,1,0). On corrige ici.
   ============================================================ */

.woocommerce .bp-qty,
.woocommerce-page .bp-qty {
  display: inline-flex;
  align-items: stretch;
}

.woocommerce .bp-qty .bp-qty__input,
.woocommerce-page .bp-qty .bp-qty__input {
  width: 45px;
  min-width: 45px;
  flex: 0 0 45px;
  text-align: center;
}

/* ============================================================
   PROTECTION IMAGES HEADER — pages WooCommerce
   ------------------------------------------------------------
   WooCommerce injecte via woocommerce-layout.css :
     .woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }
   Spécificité (0,1,1) — bat les règles thème à (0,1,0) ou (0,2,0).

   Ce bloc restaure les dimensions fixes du badge "Fabrication Française"
   en montant la spécificité à (0,3,0) sur toutes les pages WC.
   ============================================================ */

/* Neutraliser max-width: 100% sur toutes les images du header */
.woocommerce .site-header img,
.woocommerce-page .site-header img {
  max-width: none;
}

/* Badge Fabrication Française — tailles identiques à main.css */
.woocommerce .site-header .badge-full,
.woocommerce-page .site-header .badge-full {
  height: 52px;
  width: auto;
}

/* Sticky header */
.woocommerce .site-header.is-scrolled .badge-full,
.woocommerce-page .site-header.is-scrolled .badge-full {
  height: 30px;
}

@media (max-width: 768px) {
  .woocommerce .site-header.is-scrolled .badge-full,
  .woocommerce-page .site-header.is-scrolled .badge-full {
    height: 36px;
  }

  .woocommerce .site-header .badge-full,
  .woocommerce-page .site-header .badge-full {
    height: 32px;
  }
}

@media (max-width: 374px) {
  .woocommerce .site-header .badge-full,
  .woocommerce-page .site-header .badge-full {
    height: 26px;
  }
}


/* ============================================================
   PHOTOSWIPE — masquer le container quand son CSS natif
   n'est pas enqueué (évite l'affichage des boutons en bas de page)
   ============================================================ */

.pswp {
  display: none !important;
  position: fixed;
}

.pswp.pswp--open {
  display: block !important;
}


/* ============================================================
   WOOCOMMERCE BLOCKS — PANIER & CHECKOUT (Phase 11.15)

   Le Panier (/panier/) et le Checkout (/commander/) sont rendus par
   WooCommerce Blocks (blocs Gutenberg React), pas par le système de
   templates classique — les sélecteurs .woocommerce-cart-form,
   table.cart, etc. ci-dessus n'ont donc aucun effet sur ces deux
   pages. Section dédiée, classes réelles confirmées par inspection
   du DOM rendu (wc-block-*, wp-block-woocommerce-*).
   ============================================================ */

/* ── Panier vide : bloc "Nouveau dans la boutique" natif masqué,
   remplacé par notre propre bande Suggestions ajoutée après le
   bloc Panier (cf. suggestions-handler.php) — le bloc Panier étant
   hydraté par React, on ne modifie jamais son contenu, seulement
   sa visibilité. ── */
.wp-block-woocommerce-empty-cart-block .wp-block-heading:nth-of-type(2),
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
  display: none;
}

/* ── Panier rempli : bloc natif "Ventes croisées" masqué (basé sur les
   relations _crosssell_ids WooCommerce, non utilisées sur ce site — cf.
   suggestions-handler.php, contexte panier_rempli) même motif que ci-dessus. ── */
.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection {
  display: none;
}

.blondeau-cart-suggestions {
  margin-top: var(--space-8);
}

/* ── Boutons (partout : panier, checkout) ── */
.wc-block-components-button.wp-element-button {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wc-block-components-button.wp-element-button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.wc-block-components-button.wp-element-button.is-loading {
  opacity: 0.7;
}

/* ── Champs texte / select (checkout, coupon) ── */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select__container {
  border: 1px solid var(--color-field-border) !important;
  border-radius: var(--radius-md) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-blocks-components-select__container:focus-within {
  border-color: var(--color-field-focus) !important;
  box-shadow: 0 0 0 3px var(--color-field-halo) !important;
  outline: none !important;
}

/* Formulaires WooCommerce classiques (Mon compte › Adresses…) : mêmes champs
   que le reste du site au lieu du style d'origine de WooCommerce (contour
   quasi noir, arrondi 4 px) — via ses propres variables (DETTE-391). */
.woocommerce,
.woocommerce-page {
  --wc-form-border-color: var(--color-field-border);
  --wc-form-border-width: 1px;
  --wc-form-border-radius: var(--radius-md);
  --wc-form-color-text: var(--color-text);
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
}
/* Sélecteur de quantité du panier : mêmes cadre et focus que .bp-qty des
   fiches produit (product.css) — toute évolution est à répercuter aux deux
   endroits (DETTE-391). Préfixe body : passe devant le CSS des blocs
   WooCommerce quel que soit l'ordre de chargement. */
body .wc-block-components-quantity-selector:has(input:not([type=hidden])) {
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body .wc-block-components-quantity-selector:has(input:not([type=hidden])):focus-within {
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}
body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  box-shadow: none;
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible {
  outline: 2px solid var(--color-field-focus);
  outline-offset: -4px;
  box-shadow: none;
}
/* Boutons des blocs WooCommerce (Valider la commande, Appliquer…) : leur
   focus bleu d'origine (#0675c4, affiché aussi au clic) est remplacé par la
   recette commune du site, au clavier seulement (DETTE-398). Classe doublée :
   WooCommerce cible aussi body:not(.woocommerce-block-theme-has-button-styles)
   (spécificité 0,4,1), qu'il faut dépasser. */
body .wc-block-components-button.wc-block-components-button.wc-block-components-button:not(.is-link):focus {
  outline: none;
  box-shadow: none;
}
body .wc-block-components-button.wc-block-components-button.wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo);
}
/* Liste Pays/région (Select2) : même hauteur (44 px) et même focus que les champs */
.woocommerce form .form-row .select2-container .select2-selection--single {
  height: 44px;
  border-radius: var(--radius-md);
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.875rem;
  font-size: 0.9375rem;
  color: var(--color-text);
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px;
}
.woocommerce form .form-row .select2-container .select2-selection:focus-visible,
.woocommerce form .form-row .select2-container--open .select2-selection {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* ── Notices (erreur/succès/info) ── */
.wc-block-components-notice-banner {
  border-left: 4px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
}

/* Icône ronde : la bannière native est en flex « stretch » — sur un message
   de plusieurs lignes, le pictogramme s'étirait en pilule (2026-10-02). */
.wc-block-components-notice-banner > svg {
  align-self: flex-start;
  height: 24px;
  /* Pastille de la couleur du message (bleu, rouge, vert, orange foncé du
     thème) au lieu du bleu WooCommerce par défaut (#007cba). */
  background-color: currentColor !important;
}

/* BUG-394 [OK] — corrigé le 2026-10-14 : la règle globale
   `p, li, figcaption { max-width: 70ch }` (main.css, pensée pour la prose)
   plafonnait le texte du bandeau à ~650px alors que le bandeau occupe toute
   la largeur du contenu (Panier, Validation de la commande) — même
   neutralisation que `.notice__body p` (main.css). */
.wc-block-components-notice-banner__content p,
.wc-block-components-notice-banner__content li {
  max-width: none;
}

.wc-block-components-notice-banner.is-error {
  background: rgba(220, 38, 38, 0.06);
  border-color: var(--color-error);
  color: var(--color-error);
}

.wc-block-components-notice-banner.is-success {
  background: rgba(22, 163, 74, 0.06);
  border-color: var(--color-success);
  color: var(--color-success);
}

.wc-block-components-notice-banner.is-info {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--color-focus);
  color: var(--color-focus);
}

.wc-block-components-notice-banner.is-warning {
  background: rgba(217, 119, 6, 0.06);
  border-color: var(--color-warning);
  /* WCAG 1.4.3 (2026-10-02) — #D97706 en texte = ~3,2:1 sur ce fond :
     bordure conservée en orange, texte assombri (#92400E ≈ 6,9:1). */
  color: #92400E;
}

/* Bandeau « échantillons » au-dessus du Panier / de la Validation
   (main.js, initSampleCartNotices — 2026-10-02). Bannières natives
   ci-dessus ; seuls l'empilement et le bouton d'action sont ajoutés. */
.blondeau-sample-notices {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.blondeau-sample-notices:empty {
  display: none;
}

.blondeau-sample-notices .wc-block-components-notice-banner__content p {
  margin: 0;
}

.blondeau-sample-notices__remove {
  margin-top: var(--space-3);
}

/* ── Carte récapitulatif / totaux (panier ET checkout, même classe) ── */
/* Carte récap/totaux — reprend le motif "sidebar navy sticky" déjà établi
   par la sidebar du calculateur (.blc-sidebar, calculator.css) et les
   filtres du catalogue (.blondeau-catalog__filters, catalog.css), plutôt
   qu'une carte blanche générique. Partagée Panier ET Checkout (même classe). */
.wc-block-components-sidebar {
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-xl);
  /* 16px (--space-4), pas 24px (--space-6) : marge interne alignée sur
     .blc-sidebar (calculateur), où le gutter horizontal est 16px partout
     (.blc-sidebar__title-row, __recap, __price, __actions) — 24px donnait
     une carte visuellement plus "aérée"/différente de la référence. */
  padding: var(--space-4);
  position: sticky;
  top: calc(var(--header-height, 80px) + 1rem);
  /* Sans align-self:start, la sidebar est un item de grille "stretch" par
     défaut : dès que la colonne produits (à gauche) est plus haute que son
     propre contenu, elle s'étire pour matcher cette hauteur — long bloc
     navy avec du vide sous le bouton. Carte "conteneur" comme .blc-sidebar
     (calculateur), qui ne prend que la hauteur de son propre contenu. */
  align-self: start;
}

/* Sous 700px de largeur de conteneur, WooCommerce Blocks (cart.css,
 * @container (max-width: 699px)) réapplique lui-même `padding: 0` via le
 * sélecteur composé `.wc-block-components-sidebar-layout
 * .wc-block-components-sidebar` (2 classes) — plus spécifique que la règle
 * ci-dessus (1 classe), donc toujours gagnant quel que soit l'ordre de
 * chargement des feuilles de style. Résultat sur mobile/tablette étroite :
 * la carte perdait toute sa marge interne, tout le contenu (codes promo,
 * total, bouton) touchait ses bords. Même spécificité ici pour rétablir
 * le padding — pas de !important, cohérent avec le reste du fichier. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  padding: var(--space-4);
}

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase;
  /* !important nécessaire : sans lui, une autre règle Woo/Gutenberg remportait
     la cascade uniquement sur la page Panier (letter-spacing:normal constaté),
     alors que la même règle s'appliquait déjà correctement au Checkout — cf.
     Dev-plan, audit sidebar panier/checkout vs calculateur. */
  letter-spacing: 0.1em !important;
  /* Même valeur que .blc-sidebar__title (calculateur) — cohérence UX entre
     les deux sidebars navy du site, et contraste AA (~7,5:1) garanti. */
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: var(--space-4) !important;
}

/* Le Checkout a un titre "à double étage" : la règle ci-dessus cible le
   conteneur `__title` (12px, correct), mais le texte visible est en réalité
   un <p class="__title-text"> enfant avec sa propre taille native (20px/500,
   Gutenberg) — le font-size n'est pas hérité car l'élément la redéfinit
   explicitement. Résultat : titre 20px au lieu de 12px, très différent du
   "TOTAL PANIER" du Panier alors que la même règle semblait pourtant
   s'appliquer. Le Panier n'a pas ce sous-élément (titre en texte direct). */
.wc-block-components-checkout-order-summary__title-text {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

/* Marge interne du Checkout doublée par rapport au Panier : ce même titre
   porte un `margin-top: 16px` natif, qui s'ajoute au padding-top de la carte
   (16px) → 32px avant le titre au lieu de 16px comme sur le Panier et comme
   .blc-sidebar (calculateur). */
.wc-block-components-checkout-order-summary__title {
  margin-top: 0 !important;
}

/* Bordure interne parasite : `.wp-block-woocommerce-checkout-order-summary-block`
   (conteneur de l'article + du panneau code promo) a un border 1px natif sur
   les 4 côtés — un rectangle dans le rectangle, absent du Panier (son
   équivalent `-cart-order-summary-block` n'a qu'un border-bottom, déjà pris
   en charge ailleurs) et de la sidebar de référence du calculateur. */
.wp-block-woocommerce-checkout-order-summary-block {
  border: none !important;
}

/* Couleur de base de tout texte non explicitement pris en charge ci-dessous
   (la sidebar est réutilisée par le résumé de commande du Checkout, qui
   contient ses propres mini-lignes produit avec des classes non couvertes
   par les règles ci-dessus) */
.wc-block-components-sidebar {
  color: rgba(255, 255, 255, 0.85);
}

/* .wc-block-components-product-name / -price sont stylés en navy sur fond
   blanc pour les lignes du panier (cf. règles plus haut) — sur fond navy
   (résumé de commande du Checkout), il faut les repasser en clair */
.wc-block-components-sidebar .wc-block-components-product-name {
  color: #fff !important;
}

.wc-block-components-sidebar .wc-block-components-product-price,
.wc-block-components-sidebar .wc-block-components-order-summary-item__individual-price {
  color: rgba(255, 255, 255, 0.7) !important;
}

.wc-block-components-sidebar .wc-block-components-totals-item__label,
.wc-block-components-sidebar .wc-block-components-totals-item__description,
.wc-block-components-sidebar .wc-block-components-totals-item__description p {
  color: rgba(255, 255, 255, 0.6);
}

.wc-block-components-sidebar .wc-block-components-totals-item__value,
.wc-block-components-sidebar .wc-block-formatted-money-amount {
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

/* Espace sous le bouton "Valider la commande" doublé : WooCommerce Blocks
   pose un `margin-bottom: 16px` natif sur `.wc-block-cart__submit`, qui
   s'ajoute au padding-bottom de la carte (16px) → 32px de vide en bas au
   lieu de 16px partout ailleurs (haut/côtés), contrairement à .blc-sidebar
   (calculateur) où l'espacement est uniforme. Neutralisé pour ne garder que
   le padding de la carte. */
.wc-block-components-sidebar .wc-block-cart__submit {
  margin-bottom: 0;
}

/* Liste d'articles du Checkout (.wc-block-components-order-summary) — carte
   blanche détourée, même principe que .blc-sidebar__recap (calculateur) :
   sur fond navy, un encart clair pour le détail de la configuration plutôt
   qu'un texte blanc "flottant" directement sur le navy. Les couleurs
   texte/prix ci-dessous reprennent celles déjà utilisées pour les lignes du
   Panier sur fond blanc (.wc-block-components-product-name / -price plus
   bas dans ce fichier) — même contexte visuel, mêmes couleurs. */
.wc-block-components-sidebar .wc-block-components-order-summary {
  background: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
}

.wc-block-components-sidebar .wc-block-components-order-summary .wc-block-components-product-name {
  color: var(--color-primary) !important;
}

.wc-block-components-sidebar .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-price,
.wc-block-components-sidebar .wc-block-components-order-summary .wc-block-components-product-price {
  color: var(--color-accent) !important;
}

.wc-block-components-sidebar .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-semibold);
}

/* Lignes de totaux (Sous-total / Livraison / Total…) : alignées avec le
   titre de la carte (même marge gauche que .wc-block-cart__totals-title),
   au lieu d'un padding horizontal propre qui les indentait 16px plus loin
   que le titre — désalignement visible au Checkout ("colonne en escalier"). */
.wc-block-components-sidebar .wc-block-components-totals-item {
  padding-left: 0;
  padding-right: 0;
}

/* Ligne de total final — reprend le traitement "TTC" doré et agrandi du
   récap calculateur (.blc-sidebar__price-row--ttc) */
.wc-block-components-sidebar .wc-block-components-totals-footer-item {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

/* Marge basse doublée (Checkout) : le wrapper du total final a lui-même un
   padding-bottom natif de 16px, qui s'ajoute au padding-bottom de la carte
   (16px) → 32px sous "Total" au lieu de 16px comme sur les autres côtés de
   la carte et comme .blc-sidebar (calculateur). `:has()` cible précisément
   le wrapper qui contient la ligne de total final, sur Panier comme
   Checkout, sans dépendre d'un nom de classe spécifique à une page. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item) {
  padding-bottom: 0 !important;
  /* Ligne de séparation en trop (Checkout) entre Sous-total/Livraison et
     Total : ce wrapper a lui-même un border-top natif, en plus de celui,
     volontaire, posé sur .wc-block-components-totals-footer-item juste
     au-dessus du montant (traitement "TTC" ci-dessus) — deux traits pour
     une seule séparation. On garde uniquement celui du footer-item. */
  border-top: none !important;
}

/* Libellé ("Total panier" / "Total") volontairement discret — même logique
 * que .blc-sidebar__price-row span (calculateur, 12px/400) : c'est le MONTANT
 * qui doit attirer l'œil, pas le mot. Sans cette règle, le libellé héritait
 * du style "footer" par défaut de WooCommerce Blocks (~20px/500), aussi
 * visible que le prix doré juste à côté — déséquilibre constaté sur Panier
 * ET Checkout. */
.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-normal) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
}

/* Bloc "Ajouter des codes promo" */
.wc-block-components-sidebar .wc-block-components-panel__button {
  color: rgba(255, 255, 255, 0.75);
}

/* Alignement icône/texte : la règle d'accessibilité [role="button"]
   (min-height 44px, accessibility.css) agrandit ce bouton au-delà de la
   hauteur de son texte. L'icône (positionnée en absolute/top:50% par
   WooCommerce Blocks) se centre sur ces 44px, mais le texte reste calé en
   haut du bloc (display:block natif) → icône visiblement plus basse que le
   texte, avec un espace vide sous le libellé. Le passage en flex centre le
   texte sur la même hauteur que l'icône (qui reste en absolute, donc hors
   flux flex, et garde sa position à droite). */
.wc-block-components-sidebar .wc-block-components-panel__button {
  display: flex;
  align-items: center;
}

/* Marge gauche/droite excessive du panneau code promo (Checkout) :
   `.wc-block-components-totals-coupon.wc-block-components-panel` a un
   padding-left/right natif de 16px, qui s'ajoute au padding de la sidebar
   (16px) — 32px d'inset au lieu de 16px comme toutes les autres lignes
   (Sous-total, Livraison, Total). */
.wc-block-components-sidebar .wc-block-components-totals-coupon.wc-block-components-panel {
  padding-left: 0;
  padding-right: 0;
}

.wc-block-components-sidebar .wc-block-components-panel__button-icon {
  fill: rgba(255, 255, 255, 0.75);
}

.wc-block-components-sidebar .wc-block-components-panel__button:hover {
  color: #fff;
}

/* Libellé flottant du champ code promo ("Entrer le code") : WooCommerce Blocks
   le pose en `color:inherit` et le champ reste blanc dans tous ses états
   (pas de classe `.has-dark-controls` posée par le thème) — il héritait donc
   du blanc/85% défini plus haut sur .wc-block-components-sidebar, texte blanc
   sur fond blanc, invisible. Couleur sombre fixe (le libellé ne quitte jamais
   la zone blanche du champ, même une fois réduit en haut à gauche). */
.wc-block-components-sidebar .wc-block-components-text-input label {
  color: var(--color-text-muted, #6b7280) !important;
}

/* Séparateur fantôme (PANIER UNIQUEMENT) : `.wp-block-woocommerce-cart-order-summary-totals-block`
   est un wrapper vide (uniquement des retours à la ligne texte, donc jamais
   `:empty` au sens CSS) qui porte quand même un border-top — une 2e ligne de
   séparation collée à celle, juste en dessous, du vrai bloc "Total estimé"
   (.wc-block-components-totals-wrapper), sans rien entre les deux.
   ATTENTION : sélecteur volontairement exact (classe complète), PAS par
   sous-chaîne — une première version en `[class*="order-summary-totals-block"]`
   visait à couvrir la variante Checkout par la même occasion, mais y
   correspondait aussi à `.wp-block-woocommerce-checkout-order-summary-totals-block`,
   qui sur le Checkout N'EST PAS un wrapper fantôme : il contient réellement
   Sous-total + Livraison et son border-top est la séparation utile avec le
   panneau code promo — la règle la supprimait par erreur (ligne manquante
   signalée par l'atelier). Le Panier et le Checkout n'ont pas la même
   structure de blocs malgré des noms de classe très proches. */
.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
  border-top: none !important;
}

/* Séparation "Ajouter des codes promo" → "Total estimé" (PANIER) :
   volontairement conservée (border-top natif du bloc Total). Un temps
   retirée pour cause de doublon avec le wrapper fantôme ci-dessus, mais
   redemandée depuis la mise en place des frais d'expédition — la ligne
   aide à distancer "Total estimé" (et sa mention "frais d'expédition
   calculés à la validation") du panneau code promo juste au-dessus. */

/* Bouton principal — doré, cohérent avec le bouton "Ajouter au panier"
   du calculateur sur fond navy. Le bouton final "Commander" du Checkout
   (.wc-block-components-checkout-place-order-button) n'est PAS dans
   .wc-block-components-sidebar : il est rendu en pleine largeur sous le
   formulaire de paiement, sur fond blanc — convention du site : fond clair
   → bouton navy (survol doré, cf. .single_add_to_cart_button plus haut),
   fond navy → bouton doré. Il a donc son propre jeu de couleurs plus bas,
   mais partage ce gabarit (padding/rayon/police/icône/animation). */
.wc-block-components-sidebar .wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  /* Même gabarit que .bp-add-to-cart (fiche produit, .btn--large du thème)
     et .blc-wizard__btn--cart (calculateur) — demande explicite de
     l'atelier (audit UX 2026-08) : "Valider la commande" et "Commander"
     doivent avoir la même dimension que "Ajouter au panier" en fiche
     produit. WooCommerce Blocks héritait sinon d'un padding/rayon plus
     petits. */
  padding: 16px 32px;
  min-height: 52px;
  border-radius: 6px;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}

.wc-block-components-sidebar .wc-block-components-button.wp-element-button .wc-block-components-button__text,
.wc-block-cart__submit-button.wc-block-components-button .wc-block-components-button__text {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Couleurs — doré (dans la sidebar navy : Panier et résumé Checkout) */
.wc-block-components-sidebar .wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button.wc-block-components-button {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
}

.wc-block-components-sidebar .wc-block-components-button.wp-element-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
  color: var(--color-primary) !important;
}

/* Couleurs — navy (bouton "Commander" du Checkout, hors sidebar, fond
   blanc) : mêmes couleurs que .single_add_to_cart_button (fiche produit). */
.wc-block-components-checkout-place-order-button {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
}

/* Icône panier — injectée par main.js (`insertAdjacentHTML`, cf. IIFE
   `addCartIconInSubmitButtons`) car ni `.wc-block-cart__submit-button`
   (Panier) ni `.wc-block-components-checkout-place-order-button` (Checkout)
   ne rendent d'icône native. `mask` était une alternative sans JS, mais un
   vrai enfant SVG reproduit à l'identique le balisage de référence
   (.blc-wizard__btn--cart, calculator-wizard.php) plutôt qu'un décor CSS. */
.wc-block-components-sidebar .wc-block-components-button.wp-element-button .blc-btn-icon,
.wc-block-cart__submit-button.wc-block-components-button .blc-btn-icon,
.wc-block-components-checkout-place-order-button .blc-btn-icon {
  flex-shrink: 0;
}

/* Animation "shimmer" au survol — identique à .blc-wizard__btn--cart::before
   (calculator.css), reproduite ici car la classe n'est pas partagée entre
   thème et calculateur (fichiers CSS distincts, mêmes valeurs). */
.wc-block-components-sidebar .wc-block-components-button.wp-element-button::before,
.wc-block-cart__submit-button.wc-block-components-button::before,
.wc-block-components-checkout-place-order-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.wc-block-components-sidebar .wc-block-components-button.wp-element-button:hover:not(:disabled)::before,
.wc-block-cart__submit-button.wc-block-components-button:hover::before,
.wc-block-components-checkout-place-order-button:hover:not(:disabled)::before {
  opacity: 1;
  animation: blcCartBtnShimmer 0.55s ease forwards;
}

@keyframes blcCartBtnShimmer {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%;  opacity: 0; }
}

/* ── Grille produits (panier vide, cross-sell panier rempli) — même
   traitement visuel que .blondeau-card sans dupliquer sa structure ── */
.wc-block-grid__product {
  padding: 0.55rem;
}

.wc-block-grid__product-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.wc-block-grid__product-title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.wc-block-grid__product .wp-block-button__link.add_to_cart_button {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition-fast);
}

.wc-block-grid__product .wp-block-button__link.add_to_cart_button:hover {
  background: var(--color-primary-dark);
}

/* ── Lignes du panier — image produit agrandie, ligne resserrée (audit UX
   2026-08, 3e itération : "trop de vide, images à peine visibles"). Vignette
   80×64px d'origine dans une cellule à padding généreux (~20px haut/bas,
   hérité de la règle générique `td` du thème) — le produit ne se voyait
   presque plus. !important nécessaire : la largeur de cellule ne vient
   d'aucune règle CSS identifiable (probablement une largeur intrinsèque
   dérivée de l'image 64px + padding), donc un simple sélecteur de classe
   ne suffit pas à la garantir. ── */
/* Cellule = image + padding-right, en box-sizing: border-box (main.css) —
   largeur de cellule et largeur d'image DOIVENT correspondre exactement
   (116 - 16 padding-right - 0 padding-left = 100), sinon le img déclaré
   plus large que sa boîte de contenu se fait recadrer par le reset global
   `img { max-width: 100% }` : c'est ce qui produisait une vignette
   rectangulaire (92×104, pas carrée) au lieu de 104×104 lors du premier
   passage. object-fit: cover garantit par ailleurs qu'une photo non carrée
   est recadrée, jamais étirée/déformée. */
.wc-block-cart-item__image {
  width: 116px !important;
  padding: 12px 16px 12px 0 !important;
}

.wc-block-cart-item__image img {
  width: 100px !important;
  height: 100px !important;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
}

.wc-block-cart-items__row {
  padding-top: var(--space-2, 0.5rem) !important;
  padding-bottom: var(--space-2, 0.5rem) !important;
}

/* BUG-397 [OK] — corrigé le 2026-10-14 : WooCommerce Blocks passe la
   cellule du total en `display: flex` (cart.css, règle générale prévue pour
   le squelette de chargement). Hors du modèle de tableau, son filet du haut
   ne fusionnait plus avec celui des cellules voisines (border-collapse) et
   s'arrondissait seul selon la position au sous-pixel de la ligne : filet
   décalé d'1px au-dessus du prix, sur certaines lignes seulement. En
   mise en page mobile (ligne en grille), la cellule reste un élément de
   grille : sans effet. Alignement à droite conservé par `text-align: right`
   (natif) et le conteneur du prix (flex, `align-items: flex-end`). */
table.wc-block-cart-items td.wc-block-cart-item__total {
  display: table-cell;
}

/* Sous les largeurs de conteneur "medium/mobile/small", WooCommerce Blocks
   bascule la ligne en CSS Grid avec une 1ère colonne fixée à 80px
   (`grid-template-columns`) — l'agrandissement ci-dessus (104px) y déborde
   sur la colonne produit (chevauchement constaté à l'écran). Sélecteur
   plus spécifique (2 classes) que l'agrandissement desktop ci-dessus : il
   l'emporte sans dépendre de l'ordre des règles, malgré le !important des
   deux côtés. On garde uniquement le padding resserré, pas la taille. */
.is-medium .wc-block-cart-item__image,
.is-mobile .wc-block-cart-item__image,
.is-small .wc-block-cart-item__image {
  width: 80px !important;
}

/* Colonne grille fixée à 80px par WooCommerce Blocks, padding-right natif
   16px (non modifié ici) → boîte de contenu réelle 64px. Image alignée sur
   cette valeur pour rester carrée, même raison qu'en desktop ci-dessus. */
.is-medium .wc-block-cart-item__image img,
.is-mobile .wc-block-cart-item__image img,
.is-small .wc-block-cart-item__image img {
  width: 64px !important;
  height: 64px !important;
  display: block;
  object-fit: cover;
}

/* ── Lignes du panier — typographie alignée sur .blondeau-card
   (tailles/couleurs par défaut de WooCommerce Blocks bien trop petites
   et non liées aux tokens du thème : 11-13px, gris neutre uniforme) ── */

/* !important nécessaire : WooCommerce Blocks fournit sa propre règle
   (table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
   cart.css du cœur) avec une spécificité supérieure à un simple sélecteur
   de classe — même contrainte que .wc-block-components-sidebar ... ci-dessus. */
.wc-block-components-product-name {
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-primary) !important;
  text-decoration: none;
  margin-bottom: var(--space-1, 0.25rem) !important;
}

.wc-block-components-product-name:hover {
  color: var(--color-accent);
}

/* Prix unitaire volontairement discret / total mis en avant — même
   hiérarchie que la fiche produit (.bp-order__price-value /
   .bp-order__total-value, product.css) : à quantité 1 (cas par défaut),
   les deux affichaient le même montant avec la même taille/graisse, chacun
   dans sa colonne du tableau panier — impression de doublon (audit UX
   2026-08). Le total (ce que le client paie réellement pour la ligne) doit
   dominer visuellement, pas le prix à l'unité. */
.wc-block-components-product-price,
.wc-block-components-product-price .wc-block-components-formatted-money-amount {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* Total de ligne sur fond blanc : or lisible --color-accent-text (5,13:1).
   L'or de charte --color-accent (2,31:1 sur blanc) échouait au contraste
   AA — il reste réservé au décoratif et aux fonds sombres (2026-10-13). */
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-text);
}

/* Prix unitaire seul sous le titre : masqué — à quantité 1 il répétait le
   total, au-delà il est repris sous le total (« 3 m × 99,00 € »,
   .blondeau-cart-breakdown, main.js). Conservé en cas de promotion (prix
   barré), seule information qu'il porte alors en propre. */
.wc-block-cart-item__prices:not(:has(del)) {
  display: none !important; /* WooCommerce Blocks impose display:flex (cart.css) */
}

/* ── Lignes du panier — gabarit unique (2026-10-13, maquette validée par
   l'atelier) : famille au-dessus du titre, infos importantes avec leur
   icône, infos secondaires en discret. Construit par main.js
   (renderCartLines()) à côté des métadonnées natives, masquées dès que la
   ligne existe — sans JavaScript, elles restent affichées en liste
   « Libellé : valeur » (règles .wc-block-components-product-details plus
   bas). Référence visuelle commune au panier et au récapitulatif de la
   validation de commande : toute évolution vaut pour les deux. ── */
.wc-block-components-product-metadata {
  margin-top: var(--space-1, 0.25rem);
}

.blondeau-cart-line + .wc-block-components-product-metadata {
  display: none !important;
}

/* Famille de l'article (« Sur mesure », « Tissu au mètre », « Décoration »,
   « Échantillon ») — or lisible sur fond clair (--color-accent-text,
   5,13:1), jamais l'or de charte réservé au décoratif */
.blondeau-cart-family {
  display: block;
  margin-bottom: 2px;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.blondeau-cart-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1, 0.25rem);
}

/* Article sans information à afficher (ex. accessoire sans référence) */
.blondeau-cart-line:empty {
  display: none;
}

/* !important sur list-style/marges : les listes héritent des puces et
   retraits génériques du thème (ul / li de contenu) */
.blondeau-cart-line__infos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3, 0.75rem);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blondeau-cart-line__info {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.blondeau-cart-line__info::before {
  content: none !important;
}

/* Icône du jeu commun (blondeau-icons.js) — décorative, solidaire du
   premier mot de la valeur (.blondeau-cart-line__lead, main.js) */
.blondeau-cart-line__lead {
  white-space: nowrap;
}

.blondeau-cart-line__info .blondeau-icon {
  display: inline-block; /* le thème passe les svg en bloc */
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
  color: var(--color-text-muted);
}

.blondeau-cart-line__infos--sub .blondeau-cart-line__info {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.blondeau-cart-line__label {
  flex-shrink: 0;
}

.blondeau-cart-line__value .blondeau-color-swatch {
  margin-right: 4px;
  vertical-align: -1px;
}

.blondeau-cart-line__value a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Largeurs réduites (grille mobile de WooCommerce Blocks : image | produit |
   total) : la colonne produit ne fait que ~150px à 390px d'écran. Les
   infos secondaires s'y enchaînent comme un texte, au lieu d'occuper une
   ligne chacune — le panier reste court. */
.is-medium .blondeau-cart-line__infos--sub,
.is-mobile .blondeau-cart-line__infos--sub,
.is-small .blondeau-cart-line__infos--sub,
.wc-block-components-order-summary .blondeau-cart-line__infos--sub {
  display: block;
}

/* Même traitement dans le récapitulatif de la validation de commande,
   colonne étroite à toutes les largeurs */
.is-medium .blondeau-cart-line__infos--sub .blondeau-cart-line__info,
.is-mobile .blondeau-cart-line__infos--sub .blondeau-cart-line__info,
.is-small .blondeau-cart-line__infos--sub .blondeau-cart-line__info,
.wc-block-components-order-summary .blondeau-cart-line__infos--sub .blondeau-cart-line__info {
  display: inline;
  margin-right: var(--space-2, 0.5rem) !important;
}

/* L'unité ne tient pas à côté du sélecteur dans cette colonne : elle reste
   portée par la famille (« Tissu au mètre ») et le détail du total */
.is-medium .blondeau-cart-qty-unit,
.is-mobile .blondeau-cart-qty-unit,
.is-small .blondeau-cart-qty-unit {
  display: none;
}

/* Unité de la quantité (tissu au mètre) et quantité figée (échantillon) */
.blondeau-cart-qty-unit,
.blondeau-cart-qty-fixed {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Détail du total dès 2 unités — « 3 m × 99,00 € » */
.blondeau-cart-breakdown {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Pastille de couleur réelle (Coloris) — injectée côté serveur
   (product-color-attribute-sync.php, filtre woocommerce_variation_option_name)
   uniquement pour les couleurs "uni" ; les couleurs à dégradé restent en
   texte seul (cf. commentaire PHP). */
.blondeau-color-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.wc-block-components-product-details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wc-block-components-product-details > span {
  display: block;
}

/* Séparateur " / " natif entre chaque caractéristique — inutile en liste verticale */
.wc-block-components-product-details > span > span[aria-hidden="true"] {
  display: none;
}

/* Traitement aligné sur le récapitulatif "Votre configuration" du
   calculateur (.blc-sidebar__recap-item, calculator.css) : libellé discret
   en casse normale (pas de majuscules), valeur en gras coloré — c'est elle
   qui doit accrocher l'œil, pas le nom du champ. Seule la mise en colonnes
   gauche/droite du calculateur n'est pas reprise ici (libellé + valeur
   restent enchaînés sur une ligne, pas de justify-content: space-between). */
.wc-block-components-product-details__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin-right: 0.3em;
}

.wc-block-components-product-details__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* Lien "Modifier cette configuration" — déplacé par JS (main.js,
   relocateConfigurationLink()) depuis les métadonnées produit vers la ligne
   quantité/suppression, pour rester sur la même ligne que les contrôles
   (demande UX 2026-08). La ligne d'origine dans les métadonnées est donc
   masquée : son contenu ne s'y affiche plus jamais après le déplacement JS. */
.wc-block-components-product-details > .wc-block-components-product-details__configuration {
  display: none;
}

/* Ligne quantité + actions — alignement du bouton "Modifier" entre le
   sélecteur de quantité et le bouton de suppression */
.wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}

/* Icône seule — bouton strictement identique à "Retirer" (.wc-block-cart-item__remove-link
   ci-dessous : même gabarit 44×44, ni bordure ni fond, même couleur de base
   et même comportement au survol), seule l'icône diffère. Le libellé texte
   reste accessible via .screen-reader-text inséré par JS, un attribut title
   fournit l'infobulle. */
.blondeau-calc-edit-link,
.wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Même réaction pour « Modifier » et « Retirer », au survol comme au clavier
   (2026-10-13) : avant, « Modifier » passait en or et « Retirer » ne
   réagissait pas — la règle de survol de WooCommerce Blocks (cart.css,
   `color: inherit`, sélecteur à 4 classes) annulait celle du thème, d'où
   le !important. */
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  color: var(--color-text-muted) !important; /* même gris au repos que « Modifier » */
  /* BUG-396 [OK] — corrigé le 2026-10-14 : la règle de base de WooCommerce
     Blocks (cart.css, `display: inline; border-radius: 0`, sélecteur à
     4 classes + table) gagnait aussi sur le gabarit commun ci-dessus — au
     survol, fond carré et icône collée à gauche, au lieu du cercle centré
     de « Modifier ». */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

.blondeau-calc-edit-link:hover,
.blondeau-calc-edit-link:focus-visible,
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible {
  color: var(--color-primary) !important;
  background: var(--color-bg-alt) !important;
}

@media (prefers-reduced-motion: reduce) {
  .blondeau-calc-edit-link,
  .wc-block-cart-item__remove-link {
    transition: none;
  }
}

.blondeau-calc-edit-link .blc-btn-icon,
.wc-block-cart-item__remove-link .blc-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Corbeille pleine de WooCommerce Blocks masquée dès que la corbeille au
   trait du jeu commun est insérée (main.js, relocateConfigurationLink) —
   les deux icônes de la ligne ont ainsi le même dessin (2026-10-14). Sans
   JS, l'icône native reste visible. */
.wc-block-cart-item__remove-link .blc-btn-icon ~ svg {
  display: none;
}

/* WooCommerce Blocks remplit les SVG du bouton (cart.css, `fill: currentColor`,
   sélecteur à 4 classes + table) : la corbeille au trait se transformait en
   forme pleine — d'où le !important, comme pour la couleur ci-dessus. */
.wc-block-cart-item__remove-link .blc-btn-icon {
  fill: none !important;
}


/* BUG-392 — 2026-10-19 : sous 360px, la grille mobile de WooCommerce Blocks
   (80px + 132px + colonnes du total) dépassait la zone de contenu (341px pour
   269px à 320px, total rogné — WCAG 1.4.10). Deux colonnes : image | produit,
   le total passe sous la ligne produit, aligné à gauche. Vérifié dans Brave
   dans un cadre de 320px. */
@media (max-width: 359px) {
  table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    width: 80px !important;
  }
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 64px !important;
    height: 64px !important;
  }
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
    grid-column: 2 / 3 !important;
    min-width: 0;
  }
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    justify-self: stretch;
    text-align: left;
  }
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    align-items: flex-start;
  }
}