/* ============================================================
   PANIER refonte V2.5 — fashioncurvyshop.com
   (03/08/2026, refonte-code, étape 6 — TUNNEL D'ACHAT)
   Déployé dans : wp-content/themes/enfold-child/refonte-panier.css
   Source de vérité : maintenance-fcs/ux/refonte-panier.css
   Enfilé par functions.php UNIQUEMENT sur is_cart() — aucun poids ailleurs.

   Portée : template WooCommerce natif [woocommerce_cart] (page 24, ALB).
   0 surcharge de template : uniquement du balisage NATIF restylé (table
   .cart panier, .cart_totals, coupon natif) + 2 ajouts par hook (carte
   cadeau, mention Klarna) + état panier vide maison (le lien natif
   "retour à la boutique" dépend d'une page shop qui n'existe pas sur ce
   site, cf. functions.php). Étape la plus sensible du chantier : AUCUN
   sélecteur ici ne touche aux prix/quantités/logique de calcul, uniquement
   à la présentation.
   ============================================================ */

/* ============================================================
   0. Cadre de page
   ============================================================ */
body.woocommerce-cart #top .content,
body.woocommerce-cart #top .container {
  background: var(--fcs-white);
}
body.woocommerce-cart .main-title .entry-title,
body.woocommerce-cart .page-title .entry-title {
  font-family: var(--fcs-font-title);
  color: var(--fcs-prune);
}

/* ============================================================
   1. Mise en page 2 colonnes (articles | récapitulatif sticky)
   ============================================================ */
body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0 44px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 20px 64px;
  box-sizing: border-box;
}
body.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
body.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  position: sticky;
  top: 24px;
}
/* Cross-sell natif (`woocommerce_cross_sell_display`), quand il existe :
   reste dans la colonne récap (simplification assumée par rapport à la
   maquette qui le montre pleine largeur — éviter un déplacement JS du DOM
   pour un bloc non transactionnel réduit le risque sur le gabarit le plus
   sensible du chantier). Empilé AU-DESSUS du total via flex+order. */
body.woocommerce-cart .cart-collaterals {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body.woocommerce-cart .cart-collaterals .cross-sells { order: 1; }
body.woocommerce-cart .cart-collaterals .cart_totals { order: 2; }

/* ============================================================
   2. Table des articles -> cartes
   ============================================================ */
/* `display:block` sur table/tbody -- indispensable : le `display:grid`
   posé plus bas sur `tr.woocommerce-cart-form__cart-item` ne suffit PAS à
   lui seul à sortir la ligne de l'algorithme de layout des tableaux tant
   que `<table>`/`<tbody>` restent `display:table`/`table-row-group` --
   constaté en test réel 375px : la piste `1fr` se calculait à ~145px
   au lieu de ~240px (l'algorithme de table imposait sa propre largeur de
   colonne).
   `.shop_table` OBLIGATOIRE dans le sélecteur (classe réellement posée
   sur cette table, en plus de `.cart`) : Enfold pose
   `.responsive table.shop_table.cart{display:table}` dans son CSS fusionné,
   à l'intérieur de `@media (max-width:479px)` -- (0 ID, 3 classes, 1
   élément) bat `body.woocommerce-cart table.shop_table.cart` (0 ID, 2 classes,
   2 éléments) sous ce seuil précis (au-delà de 479px la règle Enfold ne
   s'applique même pas, d'où un bug invisible à 768/1280px et confirmé
   uniquement à 375px). Trouvé via un scan `document.styleSheets` qui
   descend dans les règles `@media` (un premier scan à plat les avait
   ratées). En ajoutant `.shop_table` on égale son nombre de classes (3=3)
   et on gagne sur le nombre d'éléments (2 contre 1) -- toujours pas de
   `!important`. */
body.woocommerce-cart table.shop_table.cart {
  display: block;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
body.woocommerce-cart table.shop_table.cart tbody { display: block; }
body.woocommerce-cart table.shop_table.cart thead { display: none; }
body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}
body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td {
  border: none;
  padding: 0;
}
body.woocommerce-cart table.shop_table.cart td.product-remove {
  grid-row: 1 / 3;
  grid-column: 3;
  justify-self: end;
  order: 3;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--fcs-radius-pill);
  color: var(--fcs-framboise);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--fcs-duration-micro) var(--fcs-ease-out);
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover { background: var(--fcs-bg-soft); }

body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
  grid-row: 1 / 3;
  grid-column: 1;
}
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  border-radius: var(--fcs-radius-md);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: auto;
  background: var(--fcs-bg-soft);
}
body.woocommerce-cart table.shop_table.cart td.product-name {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  font-size: 15.5px;
  color: var(--fcs-prune);
}
body.woocommerce-cart table.shop_table.cart td.product-name a {
  color: var(--fcs-prune);
  font-weight: 500;
  text-decoration: none;
}
body.woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--fcs-framboise); }
body.woocommerce-cart table.shop_table.cart td.product-name .wc-item-meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--fcs-text-subtle);
}
body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
  display: none; /* le sous-total apparaît déjà à côté du stepper (voir §3) */
}
body.woocommerce-cart table.shop_table.cart td.product-quantity {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Le vrai sous-total réapparaît près du stepper via un clone CSS-only
   impossible (pas de contenu généré depuis une valeur dynamique) : on
   réaffiche donc product-subtotal ici, repositionné en grille plutôt que
   masqué, pour rester fidèle au prix réel affiché nativement. */
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
  display: block;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  font-family: var(--fcs-font-title);
  font-size: 17px;
  color: var(--fcs-prune);
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fcs-border);
  border-radius: var(--fcs-radius-pill);
  overflow: hidden;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .qty {
  width: 44px;
  height: 40px;
  border: none;
  text-align: center;
  font-family: var(--fcs-font-text);
  font-size: 15px;
  color: var(--fcs-prune);
  background: transparent;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .qty:focus-visible {
  outline: 2px solid var(--fcs-framboise);
  outline-offset: -2px;
}
/* Boutons -/+ natifs (input type="button", propres à ce site -- pas le
   simple <input type="number"> nu du cœur WooCommerce) : intégrés DANS le
   même pilule que le champ nombre, plutôt que laissés en boutons carrés
   par défaut du navigateur. */
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .minus,
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .plus {
  width: 38px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--fcs-framboise);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fcs-duration-micro) var(--fcs-ease-out);
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .minus:hover,
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .plus:hover {
  background: var(--fcs-bg-soft);
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .minus:focus-visible,
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity .plus:focus-visible {
  outline: 2px solid var(--fcs-framboise);
  outline-offset: -2px;
}
/* Retire les flèches natives du <input type="number"> (le stepper -/+
   maison les rend redondantes). */
body.woocommerce-cart table.shop_table.cart td.product-quantity .qty::-webkit-outer-spin-button,
body.woocommerce-cart table.shop_table.cart td.product-quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .qty { appearance: textfield; }

/* Ligne d'actions natives (coupon + "Mettre à jour le panier") */
body.woocommerce-cart table.shop_table.cart tr:has(td.actions) { display: block; background: none; border: none; padding: 0; margin: 0; }
body.woocommerce-cart table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 0 0 !important;
}
body.woocommerce-cart .coupon {
  display: flex;
  gap: 10px;
  flex: 1 1 260px;
}
body.woocommerce-cart .coupon label { display: none; }
body.woocommerce-cart .coupon #coupon_code,
body.woocommerce-cart #update_cart {
  min-height: 44px;
}
body.woocommerce-cart .coupon #coupon_code {
  flex: 1;
  border: 1px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm);
  padding: 0 14px;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-prune);
}
body.woocommerce-cart .coupon #coupon_code:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 1px; }
body.woocommerce-cart .coupon button[name="apply_coupon"],
body.woocommerce-cart button#update_cart {
  border: 1px solid var(--fcs-border);
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
  border-radius: var(--fcs-radius-sm);
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fcs-duration-micro) var(--fcs-ease-out);
}
body.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart button#update_cart:hover { background: var(--fcs-border-light); }

/* Continuer mes achats -- lien réel vers la même URL "Vêtements" que la nav */
body.woocommerce-cart .fcs-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--fcs-framboise);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
body.woocommerce-cart .fcs-cart-continue:hover { color: var(--fcs-framboise, #b04d6b); }

/* ============================================================
   3. Récapitulatif (cart_totals natif) -> carte
   ============================================================ */
body.woocommerce-cart .cart_totals {
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg);
  padding: 24px;
  box-shadow: var(--fcs-shadow-md);
}
/* Préfixe `#top #wrap_all` OBLIGATOIRE : Enfold pose
   `#top #wrap_all .all_colors h2{font-family:birthstone-regular-ttf...}`
   (2 ID + 2 classes) dans son CSS fusionné (avia-merged-styles) -- un
   sélecteur à moins de 2 ID perd toujours face à lui, quel que soit
   l'ordre de chargement des feuilles. Même méthode que le reste du
   chantier (jamais de !important, on égale/dépasse la spécificité). */
#top.woocommerce-cart #wrap_all .cart_totals h2 {
  font-family: var(--fcs-font-title);
  font-size: 21px;
  color: var(--fcs-prune);
  margin: 0 0 16px;
}
body.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}
body.woocommerce-cart .cart_totals table.shop_table tr { border: none; }
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  border: none;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--fcs-text-muted);
  text-align: left;
}
body.woocommerce-cart .cart_totals table.shop_table td { text-align: right; color: var(--fcs-prune); }
body.woocommerce-cart .cart_totals tr.cart-discount td { color: var(--fcs-success, #5b7463); } /* étude 3 (06/08) : #7c9885 = 3,14:1 sur blanc, échec AA — assombri dans la même famille verte, 5,09:1 */
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
  border-top: 1px solid var(--fcs-bg-card);
  padding-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fcs-prune);
}
body.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount {
  font-family: var(--fcs-font-title);
  font-size: 24px;
  font-weight: 400;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals select { min-height: 44px; }
/* Liste des modes de livraison (radios) dans le récap panier -- même
   correctif de spécificité qu'au checkout (refonte-checkout.css) : Enfold
   pose `.cart_totals ul#shipping_method li label{display:inline}` (1 ID),
   sans media query. `#shipping_method li label` (1 ID, 3 éléments) bat
   sa version (1 ID, 2 éléments). */
body.woocommerce-cart ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
body.woocommerce-cart ul.woocommerce-shipping-methods li { display: block; margin-bottom: 8px; }
/* Même correctif qu'au checkout (refonte-checkout.css) : la ligne
   "Livraison" du tableau `.cart_totals` est un vrai <tr><th>…</th><td>
   #shipping_method…</td></tr> -- l'algorithme de colonnes d'un vrai
   <table> réduit sa largeur au niveau des lignes courtes (Sous-total,
   Total). `display:block` sur cette seule ligne la sort de ce calcul. */
body.woocommerce-cart tr.woocommerce-shipping-totals.shipping,
body.woocommerce-cart tr.woocommerce-shipping-totals.shipping td {
  display: block;
  width: 100%;
}
body.woocommerce-cart #shipping_method.woocommerce-shipping-methods { width: 100%; }
body.woocommerce-cart #shipping_method.woocommerce-shipping-methods li label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  border: 1.5px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--fcs-prune);
}
body.woocommerce-cart ul.woocommerce-shipping-methods input.shipping_method {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--fcs-framboise);
}
body.woocommerce-cart ul.woocommerce-shipping-methods li:has(input:checked) label {
  border-color: var(--fcs-rose);
  background: var(--fcs-bg-soft);
}

/* Bouton "Passer commande" natif */
body.woocommerce-cart .wc-proceed-to-checkout { padding-top: 4px; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--fcs-prune);
  color: var(--fcs-white) !important;
  border-radius: var(--fcs-radius-pill);
  padding: 16px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  min-height: 44px;
  transition: transform var(--fcs-duration-fast) var(--fcs-ease-out), box-shadow var(--fcs-duration-fast) var(--fcs-ease-out);
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--fcs-shadow-lg);
}

/* Mention Klarna (ajoutée par hook, montant réel = total / 3) */
body.woocommerce-cart .fcs-klarna-mention {
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fcs-framboise);
}
body.woocommerce-cart .fcs-klarna-mention strong { font-weight: 700; }

/* ============================================================
   3bis. Jauge livraison offerte (hook woocommerce_before_cart_table,
   fcs_refonte_cart_shipping_gauge) -- seuil réel 100 € point relais
   (réglages Sendcloud, cf. commentaire PHP). Montant calculé sur CE panier
   précis (sous-total réel), jamais une valeur figée.
   ============================================================ */
body.woocommerce-cart .fcs-shipping-gauge {
  background: var(--fcs-bg-soft);
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  padding: 16px 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.woocommerce-cart .fcs-shipping-gauge-text {
  font-size: 14px;
  color: var(--fcs-prune);
}
body.woocommerce-cart .fcs-shipping-gauge-text strong { color: var(--fcs-framboise); }
body.woocommerce-cart .fcs-shipping-gauge-bar {
  height: 8px;
  background: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  overflow: hidden;
}
body.woocommerce-cart .fcs-shipping-gauge-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--fcs-rose-clair), var(--fcs-rose));
  transform-origin: left center;
  transition: transform var(--fcs-duration-enter) var(--fcs-ease-out);
}
/* CORRECTIF non bloquant du 03/08/2026 (manager) : `transform:scaleX()`
   posé en style inline par PHP au lieu de `width` animé (règle motion du
   chantier : transform/opacity uniquement). Pas de `border-radius` ici --
   c'est `.fcs-shipping-gauge-bar` (overflow:hidden, coins arrondis) qui
   fait office de masque ; le remplissage est un simple rectangle pleine
   largeur mis à l'échelle depuis la gauche. */

/* ============================================================
   4. Carte cadeau (ajoutée par hook -- shortcode public YITH)
   ============================================================ */
body.woocommerce-cart .fcs-giftcard-caption {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fcs-text-subtle);
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.woocommerce-cart .fcs-giftcard-block {
  border-bottom: 1px solid var(--fcs-bg-card);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
body.woocommerce-cart .fcs-giftcard-block .ywgc_have_code {
  font-size: 13px;
  color: var(--fcs-text-muted);
  margin-bottom: 8px;
}
body.woocommerce-cart .fcs-giftcard-block .ywgc-show-giftcard { color: var(--fcs-framboise); font-weight: 600; }
body.woocommerce-cart .fcs-giftcard-block .ywgc_enter_code p:first-child {
  font-size: 13px;
  color: var(--fcs-text-muted);
  margin: 0 0 8px;
}
body.woocommerce-cart .fcs-giftcard-block .form-row { display: flex; gap: 10px; margin: 0; padding: 0; }
body.woocommerce-cart .fcs-giftcard-block .form-row-first,
body.woocommerce-cart .fcs-giftcard-block .form-row-last { width: auto; flex: none; }
body.woocommerce-cart .fcs-giftcard-block .form-row-first { flex: 1; }
body.woocommerce-cart .fcs-giftcard-block #giftcard_code {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--fcs-border);
  border-radius: var(--fcs-radius-sm);
  padding: 0 14px;
  font-family: var(--fcs-font-text);
  font-size: 14px;
  color: var(--fcs-prune);
}
body.woocommerce-cart .fcs-giftcard-block #giftcard_code:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 1px; }
body.woocommerce-cart .fcs-giftcard-block .ywgc_apply_gift_card_button {
  min-height: 44px;
  border: 1px solid var(--fcs-border);
  background: var(--fcs-bg-soft);
  color: var(--fcs-framboise);
  border-radius: var(--fcs-radius-sm);
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
body.woocommerce-cart .fcs-giftcard-block .ywgc_apply_gift_card_button:hover { background: var(--fcs-border-light); }
body.woocommerce-cart .fcs-giftcard-block .clear { display: none; }

/* ============================================================
   5. Fidélité (YITH Points and Rewards) -- rendu NATIF de la case, sur son
   hook d'origine (woocommerce_before_cart, au-dessus des articles) --
   pas de déplacement DOM. Sélecteurs réels du plugin (vérifiés dans
   includes/class-yith-wc-points-rewards-frontend.php) :
   #yith-par-message-reward-cart / .ywpar-button-message /
   .ywpar_apply_discounts_container / form.ywpar_apply_discounts.
   Ne s'affiche QUE pour les clientes connectées pouvant échanger des
   points (comportement natif du plugin, jamais modifié).
   ============================================================ */
body.woocommerce-cart #yith-par-message-reward-cart {
  display: block;
  max-width: 1240px;
  margin: 0 auto 20px;
  padding: 16px 20px;
  background: var(--fcs-bg-soft);
  border: 1px solid var(--fcs-border-light);
  border-radius: var(--fcs-radius-md);
  font-size: 14px;
  color: var(--fcs-prune);
  list-style: none;
}
body.woocommerce-cart #yith-par-message-reward-cart strong { color: var(--fcs-framboise); }
body.woocommerce-cart #yith-par-message-reward-cart .ywpar-button-message {
  display: inline-block;
  margin-left: 6px;
  color: var(--fcs-framboise);
  font-weight: 600;
  text-decoration: underline;
}
body.woocommerce-cart .ywpar_apply_discounts_container { margin-top: 10px; }
body.woocommerce-cart .ywpar_apply_discounts .button {
  min-height: 40px;
  border: none;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   6. Panier vide (état maison -- functions.php, fcs_refonte_cart_empty_state)
   ============================================================ */
body.woocommerce-cart.woocommerce-page .cart-empty,
body.woocommerce-cart .woocommerce > p.cart-empty {
  display: none; /* remplacé intégralement par .fcs-cart-empty, cf. functions.php */
}
body.woocommerce-cart .fcs-cart-empty {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 560px;
  margin: 40px auto 0;
  padding: 48px 24px;
}
body.woocommerce-cart .fcs-cart-empty-icon {
  display: block;
  font-size: 44px;
  margin-bottom: 18px;
}
body.woocommerce-cart .fcs-cart-empty-title {
  font-family: var(--fcs-font-title);
  font-size: 28px;
  color: var(--fcs-prune);
  margin: 0 0 12px;
}
body.woocommerce-cart .fcs-cart-empty-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fcs-text-muted);
  margin: 0 0 26px;
}
body.woocommerce-cart .fcs-cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
body.woocommerce-cart .fcs-cart-empty-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  border-radius: var(--fcs-radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--fcs-duration-micro) var(--fcs-ease-out);
}
body.woocommerce-cart .fcs-cart-empty-cta:hover { background: var(--fcs-framboise-clair-hover, #b6536f); }
body.woocommerce-cart .fcs-cart-empty-live {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border: 1.5px solid var(--fcs-border);
  color: var(--fcs-prune);
  border-radius: var(--fcs-radius-pill);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
body.woocommerce-cart .fcs-drawer-dot,
body.woocommerce-cart .fcs-cart-empty-live .fcs-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e6446e;
  display: inline-block;
}
body.woocommerce-cart .fcs-cart-empty-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--fcs-prune, #2a1620);
} /* étude 3 (06/08) : --fcs-text-subtle = 4,20-4,22:1 selon le fond réel (calcul
     initial fait contre blanc pur), sous 4,5:1 sur le fond #f2f2f2 mesuré ici en
     Lighthouse réel (panier ET commande, même composant) */

/* Barre CTA sticky : construite par refonte-panier.js quel que soit le
   viewport (JS ne connaît pas la largeur d'écran CSS) -- MASQUÉE par
   défaut ici, réaffichée uniquement dans la media query mobile ci-dessous.
   Sans cette ligne, l'élément s'affichait en bas de page en desktop/
   tablette, sans aucun style (bug constaté en test réel 1280px). */
body.woocommerce-cart .fcs-cart-sticky { display: none; }

/* ============================================================
   7. Mobile (<= 767px)
   ============================================================ */
@media only screen and (max-width: 767px) {
  body.woocommerce-cart .woocommerce {
    display: block;
    padding: 4px 14px 96px;
  }
  body.woocommerce-cart .cart-collaterals {
    position: static;
    margin-top: 20px;
  }
  /* CORRECTIF BLOQUANT du 03/08/2026 (refonte-compat, mesure `elementFromPoint`
     réelle à 375px) : la version précédente de ce commentaire affirmait que
     product-quantity et product-subtotal pouvaient partager la même cellule
     de grille (ligne 2 / colonne 2, `justify-self` opposés) "car leurs
     largeurs combinées tiennent toujours dans la colonne" -- AFFIRMATION
     JAMAIS VÉRIFIÉE et FAUSSE en pratique : le prix (`justify-self:end`)
     recouvrait ~99% du bouton "+" (`justify-self:start`), sur TOUTES les
     lignes du panier -- `elementFromPoint` au centre du bouton "+" retournait
     le `<bdi>` du prix, un clic réel centré n'incrémentait pas la quantité.
     Comme le layout DESKTOP (ligne ~95 plus haut, jamais concerné par ce
     bug), quantité et sous-total (ligne 2) occupent chacun leur PROPRE
     colonne de grille -- le nom du produit (ligne 1) s'étend sur les deux
     (`grid-column: 2 / 4`) pour garder sa pleine largeur.
     PREMIÈRE TENTATIVE (insuffisante, gardée en note car le piège est
     réel) : `76px 1fr auto` + `grid-column:2` sur le stepper. Séparait bien
     les deux éléments (confirmé par `grid-column` distincts en JS), mais le
     CHEVAUCHEMENT PERSISTAIT quand même -- mesuré : piste `1fr` réduite à
     80-85px alors que le stepper mesure 130px de contenu réel (`.quantity`,
     flex, boutons -/+ de taille fixe + champ nombre), débordant PAR-DESSUS
     la colonne 3. Attendu (et confirmé insuffisant en pratique) : qu'un item
     de grille en `justify-self:start` impose sa taille de contenu minimale
     à la piste `1fr` qui l'accueille (`minmax(auto,1fr)` par la spec) --
     un `min-width:0` posé par erreur sur l'item annulait bien cette
     protection, mais RETIRER ce `min-width:0` seul n'a PAS suffi à faire
     grandir la piste `1fr` jusqu'à 130px (résultat identique, piste à
     ~85px) -- comportement du moteur de rendu moins prévisible qu'attendu
     pour une piste `1fr` face à un enfant `display:flex`.
     DEUXIÈME TENTATIVE (insuffisante elle aussi, gardée en note) : passer
     la piste 2 de `1fr` à `auto` sans rien changer d'autre. AUCUN
     changement mesuré (piste toujours ~85px). Cause RÉELLE, trouvée en
     mesurant chaque largeur réelle plutôt qu'en devinant depuis les valeurs
     déclarées en CSS : à 375px, la largeur de CONTENU disponible pour les
     3 colonnes (`tr` 290,75px − padding 54px − 2×gap 10px) ne fait que
     216,75px, alors que le besoin réel cumulé (miniature 76px fixe +
     stepper ~130px de contenu réel, PAS les 38+44+38=120px déclarés en CSS
     -- chaque bouton/-champ rend ~4,6px plus large que sa largeur CSS,
     probablement `box-sizing` par défaut d'un `<input>` combiné à un
     réglage Enfold non identifié + prix ~58px) atteint ~264px : un
     déficit RÉEL de ~47px, qu'aucune valeur de piste de grille
     (`1fr`/`auto`/`min-width`) ne peut combler -- ce n'est pas un problème
     de MODÈLE de grille mais de BUDGET D'ESPACE insuffisant.
     FIX RETENU : récupérer l'espace en réduisant plusieurs éléments à la
     fois (miniature 76→52px, fonds perdus 10→6/3px, padding gauche
     14→10px, largeur du champ nombre 44→34px) -- aucune de ces réductions
     ne descend sous une cible tactile de 44px pour les boutons -/+
     eux-mêmes (seuls la miniature, les fonds perdus et le CHAMP NOMBRE,
     jamais tapé du doigt en pratique, sont réduits ; les boutons -/+
     restent à leur taille réelle actuelle du site, ~43px -- voir plus bas
     pourquoi ma propre déclaration à 38px pour ces boutons ne s'applique
     jamais). Piste 2 gardée en `auto` (fix de la 2e tentative, correct en
     soi mais insuffisant seul). QUATRIÈME cause, la dernière, trouvée
     après ce qui précède : `table div.quantity { width: 130px }` dans le
     bundle Enfold fixait aussi une largeur EN DUR sur le conteneur du
     stepper lui-même, indépendante de son contenu réel -- pas une
     bataille de spécificité (mon sélecteur la bat déjà) mais une propriété
     que je ne contestais tout simplement pas ; `width:auto` posé dessus
     (voir plus bas) laisse enfin le conteneur suivre son contenu réel.
     Mesuré et confirmé après l'ensemble de ces correctifs (voir
     `elementFromPoint` + clic réel dans le rapport de livraison) : le
     bouton "+" redevient l'élément trouvé au centre de son propre
     rectangle, sur 2 lignes de panier différentes, ~6-13px de marge selon
     la largeur du prix affiché. */
  body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    position: relative;
    grid-template-columns: 52px auto auto;
    gap: 6px 3px;
    padding: 14px 40px 14px 10px;
  }
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-row: 1 / 3; grid-column: 1; }
  body.woocommerce-cart table.shop_table.cart td.product-name {
    grid-row: 1;
    grid-column: 2 / 4;
    width: 100%;
    min-width: 0;
    font-size: 14px;
    align-self: start;
  }
  body.woocommerce-cart table.shop_table.cart td.product-quantity {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
  }
  /* TROISIÈME cause trouvée (la vraie, une fois la bataille de spécificité
     `.qty` ci-dessous réglée) : `table div.quantity { width: 130px }`, une
     largeur FIXE codée en dur dans le bundle Enfold (`avia-merged-styles-*.
     css`), CÔTÉ WIDTH UNIQUEMENT -- pas une bataille de spécificité (mon
     sélecteur la bat déjà largement sur ce plan, 4 classes contre 1), mais
     une propriété que je n'avais simplement JAMAIS déclarée moi-même sur
     `.quantity`, donc sans concurrent, la valeur d'Enfold s'appliquait par
     défaut -- indépendante de la largeur réelle de son contenu (boutons +
     champ), d'où un stepper qui restait figé à 130px même après avoir
     réduit son contenu interne à ~119px. `width: auto` (mon sélecteur
     l'emporte désormais car je fixe enfin la propriété) laisse le
     conteneur reprendre la largeur réelle de ses enfants. */
  body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity { width: auto; }
  /* Champ nombre resserré (44px desktop → 34px ici) : jamais une cible
     tactile en soi (on tape au clavier, pas du doigt), donc pas concerné
     par la règle des 44px -- contrairement aux boutons -/+ juste en
     dessous, volontairement INCHANGÉS.
     PRÉFIXE `#top` OBLIGATOIRE : Enfold pose `id="top"` sur `<body>` (même
     noeud que `.woocommerce-cart`, piège déjà documenté à l'étape 5 -- pas
     de combinateur descendant, `#top.woocommerce-cart` composé) et son
     propre bundle (`avia-merged-styles-*.css`) contient
     `#top div .quantity input.qty { width:43px }` (1 ID) qui BAT toute
     règle sans ID, quel que soit le nombre de classes -- ma première
     tentative de cette correction (sans `#top`) semblait déclarée à
     34px mais s'appliquait en réalité TOUJOURS à ~43px, largeur jamais
     réduite, chevauchement persistant malgré une largeur affichée
     "correcte" dans mon propre fichier CSS. Repéré en scannant
     `document.styleSheets` (avec récursion dans les `@media`, cf. piège
     déjà documenté étape 6) plutôt qu'en supposant que la règle la plus
     récente dans le fichier gagne. */
  #top.woocommerce-cart table.shop_table.cart td.product-quantity .qty { width: 34px; }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
    align-self: center;
    font-size: 15px;
    white-space: nowrap;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    grid-row: auto;
    grid-column: auto;
  }
  body.woocommerce-cart .fcs-cart-empty { padding: 32px 16px; margin-top: 16px; }
  body.woocommerce-cart .fcs-cart-empty-title { font-size: 22px; }

  /* Barre CTA sticky (Total + "Passer commande") -- éléments dédiés, le clic
     redirige vers le VRAI lien natif .checkout-button (refonte-panier.js),
     jamais de clone de formulaire. */
  body.woocommerce-cart .fcs-cart-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--fcs-white);
    border-top: 1px solid var(--fcs-bg-card);
    box-shadow: 0 -6px 20px rgba(42, 22, 32, .1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.woocommerce-cart .fcs-cart-sticky-total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  body.woocommerce-cart .fcs-cart-sticky-total span:first-child {
    font-size: 11px;
    color: var(--fcs-text-subtle);
  }
  body.woocommerce-cart .fcs-cart-sticky-total strong {
    font-family: var(--fcs-font-title);
    font-size: 18px;
    color: var(--fcs-prune);
    font-weight: 400;
  }
  body.woocommerce-cart .fcs-cart-sticky-btn {
    flex: 1;
    min-height: 48px;
    border: none;
    /* 21/08/2026 (gérante) : prune -> framboise, aligné sur le CTA du panier
       et la barre sticky du checkout. */
    background: var(--fcs-framboise);
    color: var(--fcs-white);
    border-radius: var(--fcs-radius-pill);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
  }
  /* Réserve d'espace pour ne pas masquer le pied de page derrière la barre. */
  html.fcs-cart-sticky-visible #top #main { padding-bottom: 84px; }

  /* RÈGLE PERMANENTE (refonte-compat, 3 collisions déjà constatées aux
     étapes 2/4/5) : la barre sticky de CE gabarit passe AU-DESSUS du bouton
     WhatsApp (mu-plugin fcs-whatsapp.php, `.fcs-wa-float`, fixed bas-gauche)
     et du badge Société des Avis Garantis (`.agJsWidget`, injecté en JS
     avec son propre <style> inline !important -- `!important` nécessaire
     ici pour la même raison qu'aux étapes 4/5). */
  html.fcs-cart-sticky-visible .fcs-wa-float { display: none; }
  html.fcs-cart-sticky-visible .agJsWidget { display: none !important; }
}

/* ============================================================
   CORRECTIF 03/08/2026 (retour gérante) : colonne droite du panier —
   tout aligné de haut en bas. Cause : le formulaire carte cadeau YITH
   utilise .form-row-first/-last (floats 50 %) et ses propres centrages,
   cassant le flux vertical de la carte .cart_totals.
   ============================================================ */
body.woocommerce-cart .cart_totals { display: flex; flex-direction: column; gap: 18px; }
body.woocommerce-cart .cart_totals > * { width: 100%; margin: 0; float: none; }
body.woocommerce-cart .cart_totals .fcs-giftcard-block { padding: 0; text-align: left; }
body.woocommerce-cart .fcs-giftcard-block p,
body.woocommerce-cart .fcs-giftcard-block label { text-align: left; margin: 0 0 8px; }
body.woocommerce-cart .fcs-giftcard-block .ywgc_enter_code { display: flex; flex-direction: column; gap: 10px; }
body.woocommerce-cart .fcs-giftcard-block .ywgc_enter_code .form-row { width: 100%; float: none; padding: 0; margin: 0; }
body.woocommerce-cart .fcs-giftcard-block input { width: 100%; box-sizing: border-box; }
body.woocommerce-cart .fcs-giftcard-block .ywgc_apply_gift_card_button { width: 100%; }
body.woocommerce-cart .cart_totals h2 { margin: 4px 0 0; text-align: left; }
body.woocommerce-cart .cart_totals table.shop_table { width: 100%; }
body.woocommerce-cart .cart_totals ul#shipping_method { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body.woocommerce-cart .cart_totals ul#shipping_method li { width: 100%; margin: 0; box-sizing: border-box; }

/* ============================================================
   LOT TUNNEL — 20/08/2026 (retours gérante, mobile 375px)
   ============================================================
   Bloc ADDITIF, retirable d'un seul tenant (rollback = restaurer
   `refonte-panier.css.avant-lot-tunnel-20260820`). */

/* 1 — PRIX DU TOTAL LISIBLE. Même cause qu'au checkout : le `<td>` était
   déjà prune, mais le `<strong>` interne était repris par Enfold
   (`.main_color strong` = #f1919c, 2,3:1 sur blanc, échec AA). */
body.woocommerce-cart .cart_totals tr.order-total td strong,
body.woocommerce-cart .cart_totals tr.order-total td strong .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals tr.order-total td strong bdi {
  color: var(--fcs-prune);
}

/* 2 — LIGNE "EXPÉDITION" EN PLEINE LARGEUR.
   Mesuré à 375px AVANT : `.cart_totals` = 290,8px, mais le `<table>` ne
   faisait que 240,8px et la ligne Expédition 151,4px — double perte. La
   ligne était bien passée en `display:block` (règle plus haut), mais son
   bloc conteneur restait dimensionné par l'algorithme de colonnes du
   tableau (le `tbody` restait `table-row-group`), donc `width:100%` se
   résolvait contre 151px.
   Remède : sortir le récap du modèle tableau (table + tbody en `block`),
   et rendre chaque ligne `flex` (libellé à gauche / montant à droite,
   rendu IDENTIQUE à l'existant) — sauf la ligne Expédition, laissée en
   `block` pour que ses cartes prennent les 290,8px réels. */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table tbody {
  display: block;
  width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table tbody > tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table tbody > tr > th { text-align: left; }
body.woocommerce-cart .cart_totals table.shop_table tbody > tr > td { text-align: right; }
/* Le filet du total passe sur la LIGNE : en flex, un `border-top` posé sur
   le `<th>` et le `<td>` laisserait un trou de 12px (le `gap`) entre les
   deux traits. */
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.order-total {
  border-top: 1px solid var(--fcs-bg-card);
  padding-top: 16px;
}
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.order-total > th,
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.order-total > td {
  border-top: none;
  padding-top: 0;
}
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.woocommerce-shipping-totals.shipping { display: block; }
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.woocommerce-shipping-totals.shipping > th,
body.woocommerce-cart .cart_totals table.shop_table tbody > tr.woocommerce-shipping-totals.shipping > td {
  display: block;
  width: 100%;
  text-align: left;
}

/* 3 — CARTES DE LIVRAISON PLUS GRANDES (13,5px -> 15,5px). */
body.woocommerce-cart #shipping_method.woocommerce-shipping-methods li label {
  font-size: 15.5px;
  min-height: 52px;
  padding: 14px 16px;
  gap: 12px;
}

/* 4 — BOUTON "VALIDER LA COMMANDE" : framboise, sans soulignement, 16px.
   Deux règles le dégradaient :
   - le SOULIGNEMENT venait de NOTRE `refonte-socle.css`
     (`#top #main.all_colors … a:not(.avia-button)`, 2 ID) qui battait la
     règle panier d'origine (0 ID) ;
   - la taille 20px venait d'Enfold (`.cart-collaterals .cart_totals
     a.button.alt`), à égalité de spécificité mais chargé APRÈS nous
     (avia-merged-styles est la dernière feuille du head).
   D'où le préfixe `#top … #main` ici : `#top` EST l'id du <body> sur ce
   thème, donc `#top.woocommerce-cart #main …` = 2 ID + 3 classes, ce qui
   passe devant les deux. Couleur framboise = décision gérante du
   20/08/2026 (le prune #2a1620 se confondait avec les 3 boutons noirs
   Apple Pay / G Pay / link juste en dessous). 5,1:1 sur blanc, AA. */
#top.woocommerce-cart #main .wc-proceed-to-checkout a.checkout-button {
  background: var(--fcs-framboise);
  color: var(--fcs-white) !important;
  font-size: 16px;
  text-decoration: none;
}
#top.woocommerce-cart #main .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--fcs-framboise-clair-hover);
}

/* 5 — ESPACE entre le bouton et les boutons express (Apple Pay / Google
   Pay / Link). Stripe pose `margin-top:16px` sur son conteneur : à l'œil,
   avec deux pastilles pleine largeur qui se suivent, ça se lit comme un
   bloc de 4 boutons collés. */
/* `!important` ASSUMÉ et nécessaire : Stripe pose la marge en style INLINE
   sur l'élément (`style="margin-top: 1em; clear: both;"`, vérifié le
   20/08/2026), et un style inline bat n'importe quel sélecteur, même à
   2 ID. Aucune autre prise n'existe côté CSS. */
#top.woocommerce-cart #wc-stripe-express-checkout-element { margin-top: 28px !important; }

/* 6 — TAILLE DES CHAMPS DE SAISIE DU PANIER — même correctif qu'au
   checkout (voir refonte-checkout.css 8.6) : champ code promo/carte cadeau
   rendu à 12px par Enfold, donc zoom iOS automatique à la saisie. */
#top.woocommerce-cart #main .input-text,
#top.woocommerce-cart #main select,
#top.woocommerce-cart #main textarea {
  font-size: 14.5px;
}
@media only screen and (max-width: 767px) {
  #top.woocommerce-cart #main .input-text,
  #top.woocommerce-cart #main select,
  #top.woocommerce-cart #main textarea {
    font-size: 16px;
  }
}

/* 7 — 21/08/2026 (retour gérante sur iPhone réel) : les boutons express
   Stripe (Apple Pay / Google Pay / Link) rendus sur vrai appareil se lisaient
   encore comme collés au bouton « Valider la commande » malgré les 28px.
   Traitement : filet + libellé « ou payez en 1 clic » centré dessus, appliqué
   SEULEMENT quand Stripe a réellement rendu ses boutons (`:has(iframe)` —
   sur les navigateurs sans :has, on retombe proprement sur les 28px seuls).
   Le fond du libellé est le blanc de l'encart récap (les boutons express
   vivent dans .cart_totals, fond --fcs-white). */
/* CAUSE RACINE DU « COLLAGE » trouvée le 21/08/2026 (2e retour) : le CTA
   `a.checkout-button` est en `float:left` (style Enfold hérité) — un
   flottant sort du flux normal, et TOUTES les marges des éléments qui
   suivent sont avalées (28px calculés, 0px rendus, mesuré). Le float n'a
   aucune fonction sur un bouton déjà `display:block;width:100%`. */
#top.woocommerce-cart #main .wc-proceed-to-checkout a.checkout-button { float: none; }

/* RÉVISION 21/08/2026 (2e retour iPhone gérante) : la 1re version posait le
   libellé en ABSOLU à cheval sur le filet (`top:-9px`) — sur le rendu réel
   Apple Pay, il chevauchait le bouton « Valider la commande ». Plus aucun
   positionnement absolu : filet PUIS libellé PUIS boutons, tout en flux
   normal — aucun chevauchement possible, quelle que soit la hauteur réelle
   des boutons rendus. */
#top.woocommerce-cart #wc-stripe-express-checkout-element:has(iframe) {
  margin-top: 22px !important;
  padding-top: 12px;
  border-top: 1px solid var(--fcs-border);
}
#top.woocommerce-cart #wc-stripe-express-checkout-element:has(iframe)::before {
  content: "ou payez en 1 clic";
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--fcs-text-muted);
}