/* =====================================================================
   pl-cart-drawer.css — Tiroir panier Kadence (side cart) façon Cdiscount
   ---------------------------------------------------------------------
   Périmètre : #cart-drawer (mini-panier off-canvas de l'en-tête Kadence,
   Cart Click Action = « Fenêtre modale de panier »). CHARGEMENT GLOBAL
   via #3934 section C (front, hors admin).
   Palette : --pl-teal / --pl-text-navy / --pl-text-muted / --pl-border.
   Dépend du JS pl-cart-drawer.js (quantité, libellé + .pl-added,
   .pl-continue, .pl-cart-link, ✓ Ajouté persistant sur la fiche).
   ---------------------------------------------------------------------
   CHANGELOG
   v1.0 → v1.4 — 31/08 — Création, mise en page fixe, en-tête blanc + coche SVG,
          effet scroll (liste à plat + ombres).
   v1.7 — 31/08 — (annulée en v2.1) tentative --scrollbar-offset:0 GLOBAL.
   v1.8 — 31/08 — FICHE : masque le lien « Voir le panier » ajouté par Woo.
   v2.0 — 31/08 — FIX police/graisse des titres en !important (règle Kadence).
   v2.1 — 31/08 — (revue croisée) retrait de l'override --scrollbar-offset.
   v2.2 — 31/08 — Décalage grille à l'ajout : lien « Voir le panier » masqué
          sur le listing (il s'insérait en haut de carte).
   v2.3/v2.4 — 31/08 — Anti-flicker logos compatibilité : nowrap desktop
          (!important requis, la règle wrap d'origine passait après).
   v2.5/v2.6 — 31/08 — scrollbar-gutter:stable (hypothèses scrollbar —
          html conservé en filet ; le body s'est avéré inerte : son overflow
          est propagé au viewport, la gouttière y est ignorée).
   v2.7 — 31/08 — CAUSE RÉELLE TROUVÉE ET FIX VÉRIFIÉ (mesures dans le
          navigateur de Danny, à sa largeur de fenêtre).
          LE SYMPTÔME : à l'ouverture du tiroir, tout le contenu se rétrécit
          de 15px (sidebar −4 / produits −11, puces méta ≥3 qui wrappent,
          cartes qui grandissent) puis revient à la fermeture.
          LA CAUSE, forensique : en état showing-popup-drawer-from-right, le
          body porte margin-right:15px CALCULÉE (pas inline, pas de padding,
          pas de scrollbar interne : body offW==cliW, overflow propagé au
          viewport). C'est la COMPENSATION KADENCE margin-right:
          var(--scrollbar-offset), écrite dans un de ses <style> INLINE —
          invisible au grep des fichiers CSS et à la sonde sentinelle sur
          dev. Elle compense la disparition de la scrollbar lors d'un
          verrouillage du scroll… qui n'a PAS lieu ici (scrollingElement
          reste html, sa scrollbar reste, html.clientWidth constant 1142).
          Compensation sans la chose compensée = −15px net.
          LE FIX : margin-right:0 !important sur body dans ce seul état
          (une règle de feuille !important bat le calculé de Kadence).
          SCOPÉ À LA CLASSE DU TIROIR PANIER uniquement : si un autre
          drawer Kadence (menu mobile, from-left) verrouille VRAIMENT le
          scroll un jour, sa compensation à lui reste légitime et intacte.
          VÉRIFIÉ cycle complet : 836 repos → 836 OUVERT → 836 refermé,
          body marginRight 0px. Zéro décalage.
   v2.8 — 01/09 — HARMONIE DES BOUTONS AVEC LE RESTE DU SITE (Danny).
          Le tiroir etait le dernier endroit a diverger : pilule 999px la
          ou tout le site est a 20px, couleur --pl-teal (#059dab, le jeton
          d'ACCENT) la ou les boutons utilisent #2cb1bc, et une ombre
          portee que le panier avait deja perdue.
          REFERENCE RETENUE PAR DANNY : le bouton d'ajout de la fiche
          produit. Il ne tire sa couleur d'aucune de nos feuilles — il
          prend les boutons globaux de Kadence. On passe donc par
          --global-palette-btn-bg / -hover / --global-palette-btn, jamais
          par les hex : changer la couleur des boutons dans le
          personnalisateur deplace desormais la fiche, le listing, le
          panier ET le tiroir d'un seul coup.
          CE QUI NE CHANGE PAS, et c'est voulu : les ACCENTS du tiroir
          (coche verte de l'en-tete, survol du stepper, lien « Voir le
          panier ») restent sur --pl-teal. Un accent et un bouton ne sont
          pas la meme chose — c'est la distinction posee sur le panier,
          ou le separateur du titre garde lui aussi le teal global.
          Rayon du stepper 9 -> 10 px, comme celui du panier.
   ===================================================================== */

/* v2.7 — LE fix du « mini rétrécissement » à l'ouverture du tiroir :
   neutralise la compensation Kadence margin-right:var(--scrollbar-offset)
   posée sur le body alors que le scroll n'est pas verrouillé (voir
   changelog v2.7). Scopé à l'état du tiroir panier uniquement. */
body.showing-popup-drawer-from-right{ margin-right: 0 !important; }

/* v2.5 — filet : gouttière stable du scroller racine (toggle de la
   scrollbar de page sans déplacement). Le body est inerte ici (overflow
   propagé au viewport) mais inoffensif. */
html, body{ scrollbar-gutter: stable; }

/* Masquer le lien « Voir le panier » ajouté par Woo après l'ajout AJAX
   (redondant avec le tiroir). FICHE + LISTING. Sur le LISTING, ce lien
   s'insérait EN HAUT de la carte à l'ajout et poussait titre/menu/logos. */
body.single-product form.cart a.added_to_cart,
body.single-product a.added_to_cart.wc-forward,
.woocommerce ul.products li.product a.added_to_cart,
ul.products li.product a.added_to_cart{ display:none !important; }

/* LISTING : anti-flicker des logos de compatibilité (voir changelog v2.3/v2.4).
   !important requis : la règle wrap d'origine du bloc passe après dans la cascade. */
@media (min-width: 768px){
  .compatibilite-produit .compat-logos{ flex-wrap:nowrap !important; }
}

/* Overlay */
#cart-drawer .drawer-overlay{ background:rgba(38,52,95,.45); }

/* Panneau : colonne flex pleine hauteur, coins gauche arrondis */
#cart-drawer .drawer-inner{
  width:428px; max-width:94vw;
  background:#fff; overflow:hidden;
  border-top-left-radius:18px; border-bottom-left-radius:18px;
  box-shadow:-10px 0 40px rgba(38,52,95,.22);
  display:flex; flex-direction:column;
}

/* En-tête blanc (bloc haut fixe) */
#cart-drawer .drawer-header{
  flex:0 0 auto;
  display:flex; align-items:center;
  margin:0; padding:14px 18px;
  background:#fff; border-bottom:1px solid #eef1f4;
}
#cart-drawer .side-cart-header{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:16px; font-weight:700; line-height:1.2;
  color:var(--pl-text-navy,#26345f); letter-spacing:-.01em;
}
/* Coche : cercle-check vert en contour (SVG), UNIQUEMENT en état .pl-added */
#cart-drawer.pl-added .side-cart-header::before{
  content:""; flex:none;
  width:22px; height:22px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 12l2.5 2.5l4.5 -5'/></svg>") center/contain no-repeat;
}
/* Croix : navy fine, sans fond (la classe .drawer-toggle impose sinon ~63px) */
#cart-drawer .drawer-header .cart-toggle-close,
#cart-drawer .drawer-header .cart-toggle-close.drawer-toggle{
  width:34px !important; height:34px !important;
  min-height:0 !important; max-height:34px !important; padding:0 !important;
  margin-left:auto; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent;
  color:var(--pl-text-navy,#26345f);
  transition:background .15s, color .15s;
}
#cart-drawer .drawer-header .cart-toggle-close:hover{ background:rgba(38,52,95,.07); }
#cart-drawer .cart-toggle-close svg{ width:14px !important; height:14px !important; }

/* Chaine flex : le contenu remplit la hauteur, seule la liste défile */
#cart-drawer .drawer-content{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 !important; background:transparent; }
#cart-drawer .mini-cart-container{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0; background:transparent; }
#cart-drawer .kadence-mini-cart-refresh{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

/* Sous-total : HAUT (bloc fixe), ombre en bas → la liste défile dessous */
#cart-drawer .woocommerce-mini-cart__total{
  order:1; flex:0 0 auto; position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  margin:0; padding:14px 18px;
  background:#fff; border:0; border-radius:0;
  box-shadow:0 6px 12px rgba(38,52,95,.05);
  font-size:14px; color:var(--pl-text-muted,#647088);
}
#cart-drawer .woocommerce-mini-cart__total strong{ font-weight:600; color:var(--pl-text-navy,#26345f); }
#cart-drawer .woocommerce-mini-cart__total .amount{
  font-size:20px; font-weight:800; color:var(--pl-text-navy,#26345f);
}

/* Liste produits = à PLAT (blanche, pleine largeur), SEULE zone qui défile */
#cart-drawer ul.woocommerce-mini-cart{
  order:2; flex:1 1 auto; min-height:0; overflow-y:auto;
  margin:0; padding:0 18px; list-style:none;
  background:#fff; border:0; border-radius:0;
}
/* --- Ligne article (LAYOUT seulement ; la typo titre est forcée plus bas) --- */
#cart-drawer li.mini_cart_item{
  list-style:none; display:block; position:relative;
  margin:0; padding:16px 34px 15px 74px;   /* 74 = vignette 58 + gouttière 16 */
  border-bottom:1px solid #f0f3f6;
}
#cart-drawer li.mini_cart_item:last-child{ border-bottom:none; }
#cart-drawer li.mini_cart_item::marker{ content:none; }
#cart-drawer li.mini_cart_item img{
  position:absolute; left:0; top:16px; float:none;
  width:58px; height:58px; object-fit:contain;
  margin:0; padding:4px; background:#fff;
  border:1px solid #eef1f4; border-radius:10px;
}
#cart-drawer li.mini_cart_item > a:not(.remove){
  display:block; margin-bottom:4px; text-decoration:none;
}
/* --- TITRE produit : typo FORCÉE (bat la règle Kadence du mini-panier).
   Sur le <li> = cas TEXTE NU (produit sans permalink) ; sur le lien = cas
   normal. --- */
#cart-drawer li.mini_cart_item,
#cart-drawer li.mini_cart_item > a:not(.remove){
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:var(--pl-text-navy,#26345f) !important;
}
#cart-drawer li.mini_cart_item a.remove{
  position:absolute; top:16px; right:2px;
  width:20px; height:20px; line-height:18px; text-align:center;
  border-radius:50%; background:transparent;
  color:#aab4c0!important; font-size:15px; font-weight:400;
  transition:background .15s, color .15s;
}
#cart-drawer li.mini_cart_item a.remove:hover{
  background:#f3f5f7; color:var(--pl-text-navy,#26345f)!important;
}

/* Stepper quantité (injecté par pl-cart-drawer.js) */
#cart-drawer .pl-qty-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-top:8px;
}
#cart-drawer .pl-qty-left{ display:flex; flex-direction:column; gap:4px; }
#cart-drawer .pl-unit{ font-size:12px; font-weight:400; color:var(--pl-text-muted,#647088); }
#cart-drawer .pl-stepper{
  display:inline-flex; align-items:center; height:32px;
  border:1px solid #d8dee4; border-radius:10px; background:#fff; overflow:hidden; /* v2.8 : 9 -> 10, comme le stepper du panier */
}
#cart-drawer .pl-stepper button{
  width:30px; height:30px; border:0; background:#fff;
  color:var(--pl-text-navy,#26345f); font-size:17px; font-weight:600; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
}
#cart-drawer .pl-stepper button:hover{ background:#eef7f8; color:var(--pl-teal,#059dab); }
#cart-drawer .pl-stepper button:disabled{ opacity:.4; cursor:default; }
#cart-drawer .pl-qtyinput{
  width:42px; height:30px; border:0;
  border-left:1px solid #e7ebf0; border-right:1px solid #e7ebf0;
  text-align:center; font-size:14px; font-weight:700;
  color:var(--pl-text-navy,#26345f); background:#fff; padding:0;
  -moz-appearance:textfield;
}
#cart-drawer .pl-qtyinput::-webkit-outer-spin-button,
#cart-drawer .pl-qtyinput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#cart-drawer .pl-qtyinput:focus{ outline:none; background:#f4fbfc; }
#cart-drawer .pl-line-total{
  font-size:16px; font-weight:800; color:var(--pl-text-navy,#26345f); white-space:nowrap;
}
#cart-drawer .pl-qty-row.pl-busy{ opacity:.55; pointer-events:none; }

/* Emplacements upsell (options / cross-sell) — réservés, masqués ; order:2 = scroll */
#cart-drawer .pl-drawer-section{
  order:2; display:none; margin:14px 18px; padding:14px 16px;
  background:#fff; border:1px solid #e9edf1; border-radius:14px;
}
#cart-drawer .pl-drawer-section.is-filled{ display:block; }
#cart-drawer .pl-drawer-section > .pl-drawer-title{
  margin:0 0 10px; font-size:14px; font-weight:700; color:var(--pl-text-navy,#26345f);
}

/* Boutons : barre BASSE fixe, pleine largeur, ombre supérieure (scroll passe dessous) */
#cart-drawer .woocommerce-mini-cart__buttons{
  order:3; flex:0 0 auto;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:10px;
  margin:0; padding:14px 16px 16px;
  background:#fff; border:0; border-top:1px solid #eef1f4; border-radius:0;
  box-shadow:0 -6px 16px rgba(38,52,95,.06);
}
/* v2.8 — RAYON 20px, comme le bouton d'ajout de la fiche produit et le
   « Passer la commande » du panier. C'etait 999px (pilule) : le tiroir
   etait le seul endroit du site avec cette forme.
   LA BORDURE DE 2px RESTE SUR LES DEUX, y compris transparente sur le
   secondaire : c'est elle qui leur donne la meme hauteur. La retirer du
   principal seul le rendrait 4px plus court que son voisin. */
#cart-drawer .woocommerce-mini-cart__buttons a.button,
#cart-drawer .woocommerce-mini-cart__buttons .pl-continue{
  flex:1 1 0; display:flex; align-items:center; justify-content:center;
  margin:0; padding:12px 8px; text-align:center;
  border-radius:20px; font-weight:700; font-size:14px; line-height:1.15;
  text-transform:none; letter-spacing:normal; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
/* v2.8 — COULEUR ET SURVOL DU BOUTON D'AJOUT DE LA FICHE (choix de
   Danny). Ce bouton de reference ne tire pas sa couleur d'une de nos
   feuilles : il prend les BOUTONS GLOBAUX de Kadence. On passe donc par
   les variables du theme, jamais par les hex — la fiche, le listing, le
   panier et le tiroir bougent alors ensemble depuis le personnalisateur.
   C'etait --pl-teal (#059dab), le jeton d'ACCENT du site : proche a
   l'oeil, mais pas la meme couleur que les boutons.
   L'OMBRE PORTEE PART, comme sur le CTA du panier (pl-cart.css v3.1). */
#cart-drawer .woocommerce-mini-cart__buttons a.checkout{
  order:2;
  background:var(--global-palette-btn-bg,#2cb1bc);
  color:var(--global-palette-btn,#fff);
  border:2px solid var(--global-palette-btn-bg,#2cb1bc);
  box-shadow:none;
}
#cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover{
  background:var(--global-palette-btn-bg-hover,#13919b);
  border-color:var(--global-palette-btn-bg-hover,#13919b);
  color:var(--global-palette-btn-hover,#fff);
}
/* SECONDAIRE : meme famille de couleur que le principal, sans fond.
   Il reste discret a dessein — deux boutons pleins cote a cote se
   disputeraient le clic, alors que « Commander » est la seule action que
   le tiroir cherche a provoquer.
   La teinte de survol est derivee de la couleur des boutons plutot
   qu'ecrite en dur (c'etait #eef7f8, un derive de l'ancien #059dab qui
   aurait jure avec le nouveau) ; la ligne sans color-mix reste comme
   repli pour les navigateurs qui l'ignorent. */
#cart-drawer .woocommerce-mini-cart__buttons .pl-continue,
#cart-drawer .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout){
  order:1; background:transparent;
  color:var(--global-palette-btn-bg,#2cb1bc);
  border:2px solid transparent; box-shadow:none;
}
#cart-drawer .woocommerce-mini-cart__buttons .pl-continue:hover,
#cart-drawer .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover{
  background:#eaf6f8;
  background:color-mix(in srgb, var(--global-palette-btn-bg,#2cb1bc) 10%, #fff);
}
#cart-drawer .pl-cart-link{
  flex:1 0 100%; order:3; margin:2px 0 0; text-align:center;
  font-size:13px; font-weight:600; text-decoration:underline;
  color:var(--pl-text-muted,#647088);
}
#cart-drawer .pl-cart-link:hover{ color:var(--global-palette-btn-bg,#2cb1bc); }