/* =====================================================================
   PANIER W3CAM — styles mobile / tablette
   Extrait de head.tpl (ets_seo) le 2026-08-25 : ce fichier etait 27 Ko de
   CSS inline dans un gabarit partage par plusieurs sessions, source de
   conflits a repetition. L'ORDRE des blocs ci-dessous est celui d'origine :
   la cascade en depend, ne pas reordonner.
   Charge par head.tpl via <link> A LA PLACE EXACTE de l'ancien <style>,
   donc meme priorite de cascade qu'avant.
   Le JS associe vit dans assets/js/w3c-panier.js — les deux vont ensemble
   (le CSS stylise des classes et des noeuds que le JS pose/deplace).
   ===================================================================== */

/* ── Page panier — 2026-08-25 ──────────────────────────────────────────────
   1. Mobile + tablette (< 992px) : « Continuer mes achats » passe A DROITE de
      « Transformer ce panier en devis » (rangee flex dans le recap). Desktop
      inchange (le lien reste sous la liste des produits).
   2. Mobile + tablette : le bouton « Enregistrer » de la reference de commande
      reste A DROITE du champ (l'input-group ne replie plus).
   3. TOUTES largeurs : le bloc « Livraison prevue » (nkmdeliverydate, colonne
      gauche) passe SOUS la ligne Total TTC du recap.
   ⚠ « Continuer mes achats » vit DANS .cart-overview.js-cart, re-rendu par
   l'AJAX du panier a chaque changement de quantite : la sonde rejoue le
   deplacement et purge le doublon (l'exemplaire frais fait foi).
    OBLIGATOIRE (accolades = tags Smarty). */

/* Anti-flash : l'exemplaire d'origine nait cache, celui de destination est
   montre. display:none !important car le module livraison pose un
   style inline display:block. Si le script echoue, son catch retire
   html.w3c-panier-js et tout reapparait aux places d'origine. */
html.w3c-panier-js .cart-container > .estimated_delivery_date { display: none !important; }
html.w3c-panier-js .cart-summary .estimated_delivery_date { display: block !important; }
.cart-summary .estimated_delivery_date { margin: 12px 0 4px; }

@media (max-width: 991.98px) {
  html.w3c-panier-js .cart-overview a.btn-wrap { display: none !important; }
  html.w3c-panier-js .w3c-panier-actions a.btn-wrap { display: inline-flex !important; }

  /* 1. Devis + Continuer cote a cote, memes largeurs, texte enveloppe. */
  .cart-summary .w3c-panier-actions {
    display: flex; align-items: stretch; justify-content: center; gap: 10px;
  }
  /* Le conteneur porte la classe Bootstrap `clearfix` : son ::after (element
     vide) devient un TROISIEME element flex, et `gap` ajoutait 10px d'espace
     mort en bout de rangee. Sans objet dans un conteneur flex. */
  .cart-summary .w3c-panier-actions::before,
  .cart-summary .w3c-panier-actions::after { content: none; }
  /* Mise en page seule : l'identite (fond, filet, radius, typo, survol) est
     celle du bloc « CHARTE BOUTON » en fin de gabarit. Le gabarit compact
     d'avril (8px 10px / 12.5px MAJUSCULES) a ete abandonne avec la revision 1
     de la charte : a 15px les deux libelles tiennent encore cote a cote, et
     `white-space: normal` sert de filet en dessous. */
  .cart-summary .w3c-panier-actions .btn {
    flex: 1 1 0; min-width: 0; margin: 0;
    text-align: center; white-space: normal;
    min-height: 0; height: auto;
  }

  /* 2. Reference de commande : champ + « Enregistrer » sur UNE ligne. */
  .customersreference-block .input-group { flex-wrap: nowrap; }
  .customersreference-block .input-group > .form-control {
    flex: 1 1 auto; width: 1%; min-width: 0;
  }
  .customersreference-block .input-group-append { flex-shrink: 0; }
}

/* ── Correctifs de fiabilite du panier (TOUTES largeurs) ──────────────────
   Volontairement HORS media query : ce sont des correctifs fonctionnels et
   d'accessibilite, pas du design mobile. */

/* Zone d'annonce pour lecteurs d'ecran (invisible a l'oeil). */
.w3c-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Focus clavier visible sur les boutons +/- (mesure avant : outline 0px). */
.cart-grid .btn-touchspin:focus-visible {
  outline: 2px solid #333; outline-offset: 2px; border-radius: 3px;
}

/* Ligne dont la quantite vient d'etre modifiee : attente signalee. */
.cart-grid .cart-item.w3c-p-maj { opacity: .72; transition: opacity 120ms ease; }

/* Bandeau « Annuler » apres suppression d'une ligne — DANS LE FLUX, en tete
   de la liste (cf. commentaire JS : en fixed, le widget d'avis le recouvrait). */
.w3c-p-undo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 10px;
  background: #2f353d; color: #fff; font-size: 13.5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
/* CHARTE BOUTON W3CAM revision 2 (`.favorite.styled`) : fantome blanc, filet
   1,5px #ff6501, radius 8, 15px/600, SANS majuscules, survol
   rgba(255,101,1,.14). Le bandeau etait reste hors charte (orange, 700,
   MAJUSCULES) — aligne le 2026-08-25.
   ⛔ Les !important sont OBLIGATOIRES : la regle globale du theme verrouille
   fond, texte, bordure et radius de TOUS les <button> ; sans eux la charte est
   purement ignoree (monter la specificite ne suffit pas). */
.w3c-p-undo-go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px;
  border: 1.5px solid #ff6501 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #ff6501 !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  letter-spacing: normal; text-transform: none !important;
  cursor: pointer;
}
.w3c-p-undo-go:hover:not(:disabled),
.w3c-p-undo-go:focus-visible {
  background: rgba(255, 101, 1, .14) !important;
  border-color: #ff6501 !important;
  color: #ff6501 !important;
}
.w3c-p-undo-go:disabled { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .cart-grid .cart-item.w3c-p-maj { transition: none; }
}

/* Lot 5 : panier vide — masquer les options sans objet. */
html.w3c-p-vide .cart-grid .w3c-p-opts,
html.w3c-p-vide .cart-grid .cart-voucher,
html.w3c-p-vide .cart-grid .w3c-panier-actions a[href*="createquotation"] {
  display: none !important;
}

/* ── Refonte mobile du panier — palier 1/2 (maquette validee 2026-08-25) ───
   MOBILE UNIQUEMENT (< 768px) — PC et tablette inchanges (demande).
   Palier 1 : restyle CSS pur. Lignes produit en CARTES (image 74px a gauche,
   nom limite a 2 lignes, corbeille en haut a droite, rangee quantite/total),
   recap resserre (Total TTC en orange), bloc « Livraison prevue » en FOND
   BLANC (demande — pas de fond vert).
   Palier 2 (script) : lien retour en haut, options repliables, barre
   Commander fixe.
    OBLIGATOIRE (accolades = tags Smarty). */

@media (max-width: 767.98px) {
  /* ── Lignes produit ── Le look « carte » (fond blanc, bordure, radius,
     marge de separation) a ete retire le 2026-08-25 : liste a plat, les
     lignes sont separees par le seul filet ci-dessous. `position: relative`
     reste indispensable — la corbeille est positionnee en absolu dessus. */
  .cart-grid .cart-overview .cart-item {
    padding: 10px; position: relative;
  }
  /* Le theme pose padding-top:0 sur le premier et border-top sur les
     suivants : on reprend la main pour un rythme regulier. */
  .cart-grid .cart-overview .cart-item:first-child { padding-top: 10px; }
  .cart-grid .cart-overview .cart-item + .cart-item { border-top: 1px solid #e2e2e2; }

  .cart-grid .product-line-details { align-items: flex-start; flex-wrap: nowrap; }
  /* Bloc image agrandi (l'image paraissait perdue dedans) et CENTRE
     horizontalement ET verticalement par rapport au contenu (demande). */
  .cart-grid .product-line-grid .product-image {
    flex: 0 0 92px; max-width: 92px; margin: 0 10px 0 0;
    display: flex; align-items: center; justify-content: center; align-self: center;
  }
  .cart-grid .product-line-grid .product-image picture,
  .cart-grid .product-line-grid .product-image p {
    display: block; width: 100%; margin: 0;
  }
  .cart-grid .product-line-grid .product-image img {
    display: block; width: 100%; height: auto; border-radius: 8px;
  }
  .cart-grid .product-line-grid-body { flex: 1 1 0; min-width: 0; padding-right: 24px; }
  .cart-grid .product-line-grid-body > a,
  .cart-grid .product-line-grid .product-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; font-weight: 600; color: #666666; line-height: 1.35; padding: 0;
  }
  .cart-grid .product-line-grid-body .product-stock-availability {
    font-size: 10.5px; color: #8a9099; margin: 2px 0 0;
  }
  /* Prix unitaire discret : courant + barre sur la meme ligne. */
  .cart-grid .product-line-grid-body .product-price {
    display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
    font-size: 12px; font-weight: 600;
  }
  .cart-grid .product-line-grid-body .product-discount .regular-price { font-size: 11px; font-weight: 400; }

  /* Rangee prix unitaire / quantite / total : A DROITE de l'image (demande
     « pas en dessous ») — w3cPanier la place DANS le corps de ligne, sous le
     nom. UNE ligne tant que ca tient ; si la somme devient trop large,
     flex-wrap replie (UNIQUEMENT en cas de debordement) et l'element replie,
     seul sur sa ligne, se place a GAUCHE (space-between sur un element seul
     = depart de ligne) — demande. */
  .cart-grid .product-line-grid-body .product-line-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 4px; margin-top: 8px;
    padding-left: 0; padding-right: 0;
    /* Lot 4 : le corps reserve 24px a droite pour ne pas passer sous la
       corbeille — mais celle-ci est en HAUT de la carte : la rangee du bas
       peut reprendre cette largeur pour tenir sur une seule ligne.
       width explicite car la rangee porte la classe Bootstrap « col-12 »
       (width:100%), qui neutralisait la marge negative seule. */
    margin-right: -24px; width: calc(100% + 24px); max-width: none;
  }
  /* Lot 4 : prix barre EMPILE au-dessus du prix courant (au lieu d'etre pose
     a cote). Mesure : cote a cote le bloc prend 107px et la rangee reclamait
     299px pour 268 disponibles — donc elle repliait. Empile, il tombe a ~60px
     et la rangee tient sur UNE ligne des 390px, SANS toucher ni aux boutons
     44x44 (ergonomie) ni a l'image 92px (demande) ni au prix barre (argument
     commercial). Sous 390px, flex-wrap replie proprement, comme prevu. */
  .cart-grid .product-line-actions > div.product-price {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0; margin: 0; line-height: 1.2;
    font-size: 12px; font-weight: 600; color: #666666;
  }
  .cart-grid .product-line-actions > div.product-price .regular-price {
    font-size: 11px; font-weight: 400;
  }
  /* Total de ligne en #ff6501 (demande — plus de vert). */
  .cart-grid .product-line-actions .price-col .product-price {
    font-size: 15px; font-weight: 700; color: #ff6501;
  }
  /* Corbeille : en haut a droite de la carte, discrete. Zone tactile portee
     a 44x44 sans grossir l'icone (mesure avant : 20x19 px, sous le minimum
     WCAG 2.5.8 de 24x24 et tres loin des 44x44 recommandes) — le coin de la
     carte absorbe l'agrandissement, l'icone ne bouge que de ~2 px. */
  .cart-grid .cart-line-product-actions { position: absolute; top: 0; right: 0; }
  /* #c0c6cd donnait 1,72:1 sur blanc — sous le 3:1 exige par WCAG 1.4.11
     pour un composant graphique porteur d'action. #8a9099 = 3,22:1, la
     corbeille reste discrete mais devient perceptible. */
  .cart-grid .cart-line-product-actions a { color: #8a9099; }
  .cart-grid .cart-line-product-actions a.remove-from-cart {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }

  /* Widget quantite : cibles tactiles (mesure avant : boutons 30x40, sous les
     44x44 recommandes pour l'action la PLUS frequente du panier). L'input
     reste etroit pour que la rangee prix/quantite/total tienne sur une ligne. */
  .cart-grid .product-line-actions .bootstrap-touchspin { height: 46px; }
  .cart-grid .product-line-actions .bootstrap-touchspin .btn-touchspin {
    width: 44px; min-width: 44px; height: 44px;
    font-size: 19px; line-height: 1; padding: 0;
  }
  .cart-grid .product-line-actions input.js-cart-line-product-quantity {
    /* 36px suffisent pour 1 a 3 chiffres en 15px ; les BOUTONS restent a 44px
       (c'est eux qu'on vise du doigt). Ces quelques pixels font tenir la
       rangee prix/quantite/total sur une seule ligne des 360px. */
    height: 44px; width: 36px; font-size: 15px; font-weight: 600;
    padding: 0 2px; text-align: center;
  }

  /* ── Recap resserre ── */
  /* Montants SANS graisse (demande du 2026-08-25) : les chiffres du recap
     etaient en 600 (sous-total, livraison, total HT) et 700 (Total TTC) ; ils
     reviennent en graisse normale. Le Total TTC garde sa TAILLE (19px) et sa
     COULEUR orange : il reste le montant le plus visible du bloc. */
  .cart-grid .cart-summary .cart-summary-line { font-size: 13px; }
  .cart-grid .cart-summary .cart-summary-line .value { font-weight: 400; }
  /* Bloc des totaux : AUCUN gras, ni sur les libelles ni sur les montants.
     Couvre « Total TTC » ET « Total (HT) » — cette derniere ligne n'apparait
     qu'en compte client, donc non reproductible en visiteur : la regle vise
     tout le bloc pour ne pas dependre du cas de test. */
  .cart-grid .cart-summary .cart-summary-totals label,
  .cart-grid .cart-summary .cart-summary-totals .value { font-weight: 400; }
  .cart-grid .cart-summary .cart-total label { font-size: 14px; font-weight: 400; }
  .cart-grid .cart-summary .cart-total .value {
    font-size: 19px; font-weight: 400; color: #ff6501;
  }

  /* ── Page COMMANDE (#checkout) : recapitulatif de droite masque ─────────
     Demande du 2026-08-25 : en mobile il repoussait le formulaire d'adresse
     tres bas alors que le client vient du panier, ou il vient de tout voir.
     Le lien « Voir le panier » qu'il contenait reste accessible par le
     fil d'Ariane / le retour navigateur. Desktop inchange. */
  #checkout .cart-grid-right { display: none; }

  /* ── Options du recap : AUCUN gras (demande du 2026-08-25) ──────────────
     Ces trois gras viennent du MODULE (balise <b> pour le promo,
     `font-weight: 600` sur le titre de la reference, classe
     `.font-weight-bold` sur la reference enregistree) : ils ne sont donc pas
     couverts par les regles du recap. Mobile uniquement, comme tout ce
     fichier — le desktop reste inchange (demande d'origine). */
  .cart-grid .cart-summary .promo-code-button b,
  .cart-grid .cart-summary .w3c-p-opts b,
  .cart-grid .cart-summary .customersreference-block .card-title {
    font-weight: 400;
  }
  /* `.font-weight-bold` est une classe utilitaire BOOTSTRAP, declaree
     `font-weight: 700 !important` : la specificite ne suffit pas, il faut
     repondre en !important (mesure : la reference enregistree restait a 700
     malgre un selecteur a 4 classes). */
  .cart-grid .cart-summary .customersreference-block .font-weight-bold {
    font-weight: 400 !important;
  }

  /* ── Livraison prevue : FOND BLANC (demande) ── */
  .cart-grid .cart-summary .estimated_delivery_date {
    background: #fff; border: 1px solid #eeeeee; border-radius: 8px;
    padding: 8px 10px; font-size: 11.5px; color: #666666;
  }
  .cart-grid .cart-summary .estimated_delivery_date .estimated_delivery_date_value { font-weight: 600; }
  .cart-grid .cart-summary .estimated_delivery_date_extra_content { font-size: 10.5px; margin: 2px 0 0; }
}

/* ── Refonte mobile du panier — palier 2/2 (maquette validee 2026-08-25) ───
   Structure < 768px : lien « Continuer mes achats » discret en haut, options
   repliables (promo / reference / devis) sous la livraison, barre fixe
   « Total TTC + Commander » en bas d'ecran (motif de la barre de filtres).
   Le script vit dans le bloc panier ci-dessus (w3cPanier etendu).
    OBLIGATOIRE (accolades = tags Smarty). */

@media (max-width: 767.98px) {
  /* ── Rangee du haut : lien retour a GAUCHE, reference de commande a
     DROITE (demande). L'ordre visuel est fixe ici, pas par le DOM. ── */
  .cart-grid .w3c-p-haut {
    flex: 0 0 100%; display: flex; align-items: flex-start;
    gap: 4px 12px; padding: 0 2px 8px;
  }
  /* Vrai bouton secondaire de la charte (et non plus un lien discret) :
     meme geometrie que les autres boutons, en fantome pour ne pas
     concurrencer « Commander ». Gabarit legerement resserre par rapport au
     13px/32px de la charte : a 32px de padding, « CONTINUER MES ACHATS »
     demanderait ~287px pour ~290px utiles sur un ecran de 360 — aucune
     marge. A 18px il tient jusqu'a 320px (iPhone SE), et `white-space:
     normal` sert de filet en dessous. */
  .cart-grid .w3c-p-haut a.btn-wrap {
    order: 1; flex: 0 1 auto; margin-top: 0;
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 6px; padding: 11px 18px; font-size: 13.5px;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  /* ── Ordre du recap : totaux, DEVIS (demande), livraison, promo,
     (Commander -> barre) ── */
  .cart-grid .cart-items.cart-summary { display: flex; flex-direction: column; }
  /* Options (code promo + reference) AVANT les totaux — demande du
     2026-08-25 : on saisit sa remise AVANT de decouvrir le total, sinon le
     montant affiche ne tient pas compte du code que l'on s'apprete a entrer. */
  .cart-grid .cart-summary > .w3c-p-opts { order: 0; }
  .cart-grid .cart-summary > .cart-detailed-totals { order: 1; }
  .cart-grid .cart-summary > .w3c-panier-actions { order: 2; }
  .cart-grid .cart-summary > .estimated_delivery_date { order: 3; }
  .cart-grid .cart-summary > .cart-detailed-actions { order: 5; }

  /* ── Livraison a DROITE du Sous-total, sur UNE ligne (demande). Le
     .shipping-hook (reserve aux modules, vide aujourd'hui) est renvoye sur
     sa propre ligne, sans hauteur tant qu'il est vide. ── */
  .cart-grid .cart-summary .cart-summary-subtotals-container {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 2px 14px;
  }
  .cart-grid .cart-summary .cart-summary-subtotals-container .cart-summary-line {
    display: inline-flex; align-items: baseline; gap: 6px; width: auto; padding: 0;
  }
  .cart-grid .cart-summary .cart-summary-subtotals-container .shipping-hook {
    flex: 0 0 100%;
  }

  /* ── Total TTC a DROITE du Total HT, sur UNE ligne (demande). En invite,
     une seule ligne existe : elle occupe la rangee. Le TTC (derniere ligne)
     garde l'orange ; le HT redevient discret. ── */
  .cart-grid .cart-summary .cart-summary-totals {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 2px 14px;
  }
  .cart-grid .cart-summary .cart-summary-totals .cart-summary-line {
    display: inline-flex; align-items: baseline; gap: 6px; width: auto; padding: 0;
  }
  /* Graisse retiree (demande du 2026-08-25) : ces deux regles visent la ligne
     « Total (HT) », presente UNIQUEMENT en compte client — leur specificite
     (0,5,0 + pseudo-classe) l'emportait sur la regle generale du bloc, d'ou du
     gras qui subsistait. Tailles et couleurs inchangees. */
  .cart-grid .cart-summary .cart-summary-totals .cart-summary-line:not(:last-child) label {
    font-size: 12.5px; font-weight: 400;
  }
  .cart-grid .cart-summary .cart-summary-totals .cart-summary-line:not(:last-child) .value {
    /* Charte : plus de noir -> #666666. */
    color: #666666; font-size: 15px; font-weight: 400;
  }

  /* ── Devis sous les totaux : bouton fantome pleine largeur ── */
  .cart-grid .cart-summary > .w3c-panier-actions {
    /* marge basse : de l'air entre le devis et le delai de livraison (demande). */
    display: flex; margin: 12px 0 14px; padding: 0;
  }
  /* Mise en page seule : l'identite vient du bloc « CHARTE BOUTON » en fin
     de gabarit (le devis y est un bouton fantome comme les deux autres).
     Libelle long : `white-space: normal` le laisse passer sur deux lignes
     plutot que deborder (bouton pleine largeur, repli propre). */
  .cart-grid .cart-summary > .w3c-panier-actions .btn {
    flex: 1 1 auto;
    text-align: center; white-space: normal;
    min-height: 0; height: auto;
  }

  /* ── Options : trois lignes sobres separees par un filet ── */
  /* En tete du recap (order:0) : le liseré passe EN DESSOUS, il separait
     auparavant les options de ce qui les precedait. */
  .cart-grid .w3c-p-opts { margin-bottom: 10px; border-bottom: 1px solid #eee; }
  .cart-grid .w3c-p-opts > * + * { border-top: 1px solid #eee; }
  .cart-grid .w3c-p-opts > * { padding: 2px 0; }
  /* ── Icones des options (maquette validee) : pastilles SVG orange devant
     promo (etiquette), reference (document) et devis (fichier). ── */
  .cart-grid .w3c-p-opts .promo-code-button a::before,
  .cart-grid .customersreference-block .card-title::before,
  .cart-grid .cart-summary > .w3c-panier-actions .btn::before {
    content: ""; width: 15px; height: 15px; flex: 0 0 auto; margin-right: 9px;
    background: center / contain no-repeat;
  }
  .cart-grid .w3c-p-opts .promo-code-button a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6501' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V4h7l10 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E");
  }
  .cart-grid .customersreference-block .card-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6501' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 4h13l3 3v13H4z'/%3E%3Cpath d='M8 4v5h8V4M8 14h8M8 17h5'/%3E%3C/svg%3E");
  }
  .cart-grid .cart-summary > .w3c-panier-actions .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6501' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M14 3v5h5M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 13h6M9 16h6'/%3E%3C/svg%3E");
  }
  /* La charte utilise un survol orange pale : l'icone reste orange pour
     conserver son contraste et son identite visuelle. */
  .cart-grid .cart-summary > .w3c-panier-actions .btn:hover::before,
  .cart-grid .cart-summary > .w3c-panier-actions .btn:focus-visible::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6501' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M14 3v5h5M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 13h6M9 16h6'/%3E%3C/svg%3E");
  }

  /* Promo : la ligne-titre du module devient la rangee d'option, avec la
     fleche de depliage (demande) — elle pivote a l'ouverture (aria-expanded
     est bascule par le collapse Bootstrap du module). */
  .cart-grid .w3c-p-opts .promo-code-button { margin: 0; display: block; }
  .cart-grid .w3c-p-opts .promo-code-button a {
    display: flex; align-items: center; padding: 11px 2px;
    font-size: 13px; font-weight: 600; color: #666666;
  }
  .cart-grid .w3c-p-opts .promo-code-button a::after {
    content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-left: auto;
    border-right: 2px solid #8a9099; border-bottom: 2px solid #8a9099;
    transform: rotate(45deg); transition: transform .18s ease;
  }
  .cart-grid .w3c-p-opts .promo-code-button a[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }
  .cart-grid .w3c-p-opts .promo-code { padding: 0 2px 12px; }
  /* Reference : ligne d'option repliable (titre cliquable) ; w3c-ouvert
     (clic, ou reference deja enregistree) montre le formulaire. */
  .cart-grid .customersreference-block { margin: 0; padding: 0; }
  .cart-grid .customersreference-block .card-body { padding: 0; }
  .cart-grid .customersreference-block .card-title {
    margin: 0; padding: 11px 2px; font-size: 13px; font-weight: 600; color: #666666;
    cursor: pointer; display: flex; align-items: center;
  }
  .cart-grid .customersreference-block .card-title::after {
    content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-left: auto;
    border-right: 2px solid #8a9099; border-bottom: 2px solid #8a9099;
    transform: rotate(45deg); transition: transform .18s ease;
  }
  .cart-grid .customersreference-block.w3c-ouvert .card-title::after {
    transform: rotate(225deg);
  }
  html.w3c-panier-js .cart-grid .customersreference-block #cr-form { display: none; }
  html.w3c-panier-js .cart-grid .customersreference-block.w3c-ouvert #cr-form {
    display: block; padding: 0 2px 12px;
  }

  /* ── Barre fixe Total + Commander ── */
  .w3c-p-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-top: 1px solid #e2e2e2;
    box-shadow: 0 -4px 14px rgba(0,0,0,.07);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  /* min-width:0 : le bouton est en nowrap (charte) ; sur un tres petit
     ecran c'est le libelle de gauche qui se replie, jamais le bouton. */
  .w3c-p-bar-t { min-width: 0; }
  /* #8a9099 donnait 3,22:1 a 10,5px — sous le 4,5:1 exige pour du petit
     texte. #6d7175 = 4,6:1, la nuance reste discrete. */
  .w3c-p-bar-t span { display: block; font-size: 10.5px; color: #6d7175; font-weight: 500; }
  /* Charte : plus de noir sur les titres et les montants -> #666666. */
  .w3c-p-bar-t b { font-size: 17px; font-weight: 700; color: #666666; }
  /* Identite du bouton : voir le bloc « CHARTE BOUTON » en fin de gabarit
     (fantome `.favorite.styled`, commun aux trois actions du panier). Ici,
     uniquement sa mise en page DANS la barre. */
  .w3c-p-bar-go { flex: 0 0 auto; white-space: nowrap; }

  /* Le bouton d'origine est remplace par la barre ; le contenu ne finit pas
     cache derriere elle ; le chat remonte au-dessus (sauf fenetre ouverte,
     ou la barre s'efface — meme logique que la barre de filtres). */
  html.w3c-p-bar-on .cart-grid .cart-summary > .cart-detailed-actions { display: none; }
  html.w3c-p-bar-on body {
    padding-bottom: calc(var(--w3c-p-bar-h, 76px) + env(safe-area-inset-bottom));
  }
  html.w3c-chat-open .w3c-p-bar { display: none; }
  html.w3c-p-bar-on:not(.w3c-chat-open) [data-testid="widgetButtonFrame"],
  html.w3c-p-bar-on:not(.w3c-chat-open) #smartsupp-widget-container > div:first-child {
    bottom: calc(24px + var(--w3c-p-bar-h, 76px)) !important;
  }
}
@media (min-width: 768px) {
  .w3c-p-bar { display: none !important; }
}

/* ── CHARTE BOUTONS — page panier — 2026-08-25 (revu apres audit) ──────────
   Charte W3CAM : orange plat #ff6501, MAJUSCULES, 700, radius 5,
   interlettrage .06em, ombre 0 1px 3px ; survol #e05801 + translateY(-1px)
   + ombre 0 4px 10px.

   ⛔ CARTE DU TERRAIN (verifiee dans le bundle du theme, pas supposee) :
   1. Une regle GLOBALE de niveau racine impose un bouton FANTOME a tout le
      site, en !important :
        button,.btn,a.btn,input[type=submit],... {
          border:1.5px solid #ff6501!important; border-radius:8px!important;
          background:#fff!important; color:#ff6501!important; padding:13px 24px }
      et son survol :
        button:hover,.btn:hover,... { background:#fff0e6!important;
                                      color:#ff6501!important }
      => TOUTE propriete d'identite (fond, texte, bordure, radius) doit etre
      posee en !important, sinon elle est purement ignoree : la specificite
      ne sert a RIEN face a un !important de meme origine.
   2. `.cart-detailed-actions>a[href*="/commande"]` rend « Commander » en
      orange 8 % !important — le CTA final etait plus pale que le devis.
   3. `.cart-grid-right .btn.btn-primary { text-transform:none!important }`
      est a egalite stricte avec un selecteur en (0,3,0) : le prefixe #cart
      (1,x,x) rend les majuscules insensibles a l'ordre des feuilles.
   4. `.cart-grid` existe AUSSI sur /commande (body#checkout). Le prefixe
      #cart (body#cart) borne le bloc a la seule page panier.
    OBLIGATOIRE (accolades = tags Smarty). */

/* ── CHARTE BOUTON W3CAM — revision 2 (2026-08-25) ──────────────────────
   Reference donnee par l'utilisateur (`.favorite.styled`) : bouton fantome
   blanc, filet 1,5px #ff6501, radius 8, 15px/600, SANS majuscules, survol
   rgba(255, 101, 1, .14).
   ⛔ La revision 1 (orange plein, MAJUSCULES, 700, interlettrage, radius 5)
   est ABANDONNEE sur demande — ne pas la reintroduire.
   Concerne les trois actions du panier : « Continuer mes achats »,
   « Transformer ce panier en devis » et « Commander » (bouton de page ET
   bouton de la barre fixe mobile).
   Les !important restent indispensables : la regle globale du theme
   verrouille fond, texte, bordure et radius (carte du terrain ci-dessus). */
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary,
#cart .cart-grid .btn.btn-secondary.btn-wrap,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary,
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary,
.w3c-p-bar-go {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px;
  border: 1.5px solid #ff6501 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #ff6501 !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  letter-spacing: normal;
  text-transform: none !important;
  height: auto; width: auto;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform .15s ease, background .2s ease, color .2s ease,
    border-color .2s ease, box-shadow .2s ease;
}

/* Survol de la charte. Le theme impose `background:#fff0e6!important` a tous
   les boutons : sans !important, la teinte demandee serait ignoree. Le
   `translateY(-1px)` et l'ombre que le theme ajoute au survol sont annules :
   le CSS de reference ne les prevoit pas. */
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary:hover,
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary:focus,
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary:focus-visible,
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary:active,
#cart .cart-grid .btn.btn-secondary.btn-wrap:hover,
#cart .cart-grid .btn.btn-secondary.btn-wrap:focus,
#cart .cart-grid .btn.btn-secondary.btn-wrap:focus-visible,
#cart .cart-grid .btn.btn-secondary.btn-wrap:active,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary:hover,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary:focus,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary:focus-visible,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary:active,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary:hover,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary:focus,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary:focus-visible,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary:active,
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary:hover,
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary:focus,
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary:focus-visible,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary:hover,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary:focus,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary:focus-visible,
.w3c-p-bar-go:hover, .w3c-p-bar-go:focus,
.w3c-p-bar-go:focus-visible, .w3c-p-bar-go:active {
  background: rgba(255, 101, 1, .14) !important;
  border-color: #ff6501 !important;
  color: #ff6501 !important;
  text-decoration: none !important;
  transform: none;
  box-shadow: none;
}

/* Focus clavier : le theme pose `outline:0`. Anneau neutre, lisible sur le
   fond blanc comme sur le survol pale (l'orange sur orange ne l'est pas). */
#cart.cart-empty .cart-grid .empty-products > .btn.btn-primary:focus-visible,
#cart .cart-grid .btn.btn-secondary.btn-wrap:focus-visible,
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary:focus-visible,
#cart .cart-grid .cart-detailed-actions .btn.btn-primary:focus-visible,
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary:focus-visible,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary:focus-visible,
#cart .cart-grid .remove-from-cart:focus-visible,
#cart .cart-grid .w3c-p-opts .promo-code-button .collapse-button:focus-visible,
#cart .cart-grid .customersreference-block .card-title:focus-visible,
.w3c-p-bar-go:focus-visible {
  outline: 2px solid #333 !important; outline-offset: 2px;
}

/* Libelle long (« Transformer ce panier en devis ») : plutot que de
   rapetisser le bouton par palier de largeur comme en revision 1, on
   autorise le repli — sans majuscules il reste propre. */
#cart .cart-grid .cart-summary .w3c-panier-actions .btn.btn-primary {
  white-space: normal; text-align: center;
}

/* Boutons accoles a un champ (« Enregistrer », « Ajouter » du code promo) :
   meme identite que les trois autres (ils sont dans la liste ci-dessus), mais
   le gabarit doit s'aligner sur la HAUTEUR DU CHAMP, pas sur le padding de la
   charte. Le theme pose `align-items:center !important` sur le groupe : sans
   hauteur explicite le bouton retombe a ~15px de haut (mesure de l'audit).
   44px = hauteur naturelle de la charte (13 + 18 + 13) et du champ. */
#cart .cart-grid .customersreference-block .input-group-append .btn.btn-primary,
#cart .cart-grid .promo-code .promo-group .btn.btn-primary {
  height: 44px; padding: 0 20px;
}
/* Le raccord d'angles du bouton « Enregistrer » (coins gauches carres pour
   coller au champ) est SUPPRIME a la demande (2026-08-25) : il s'appliquait a
   TOUTES les largeurs, pas seulement au mobile. Le bouton reprend les 8px de
   la charte sur ses quatre coins. Ne pas le reintroduire. */

/* ── Commandes de quantite en #666666 ──────────────────────────────────
   Demande du 2026-08-25 : les boutons +/- ET le champ. Le theme remet
   `color: initial !important` sur `.btn-touchspin` (donc du noir) et
   #232323 sur le champ — d'ou le !important et le prefixe #cart. */
#cart .cart-grid .btn-touchspin,
#cart .cart-grid .bootstrap-touchspin-up,
#cart .cart-grid .bootstrap-touchspin-down,
#cart .cart-grid input.js-cart-line-product-quantity {
  color: #666666 !important;
}

/* R128 : aucun mouvement n'est plus applique au survol (transform annule
   ci-dessus), il n'y a donc rien a neutraliser pour prefers-reduced-motion. */