@charset "UTF-8";
/*
 * OLEA — page panier et mini-panier (tiroir).
 * Transcription de OLEA-maquette-panier.html, variables résolues en valeurs.
 * Portée : uniquement body.woocommerce-cart (page) et
 * .elementor-menu-cart__main / .widget_shopping_cart_content (tiroir).
 *
 * Ce que la maquette porte sur :root / body / les balises nues (police du
 * corps, reset des boutons, marges des listes, anneau de focus) est reposé
 * ici sur les racines .pan / .panvide / .widget_shopping_cart_content, pour
 * ne rien changer au reste du site.
 *
 * Les !important tiennent à trois raisons, chacune justifiée sur place :
 * WooCommerce pose color:red !important sur a.remove, Elementor tient la
 * largeur du tiroir avec une règle plus lourde, et la maquette elle-même
 * neutralise les transitions en !important sous prefers-reduced-motion.
 */

/* ═══════════════════════════════════════════════════════════════════════
   PAGE PANIER — body.woocommerce-cart
   ═══════════════════════════════════════════════════════════════════════ */

/* body de la maquette : Manrope 16/1.65 gris, lissage — posé sur les racines */
.woocommerce-cart .pan,
.woocommerce-cart .panvide {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--e-global-color-text, #5A5A5A);
  -webkit-font-smoothing: antialiased;
}

/* :focus-visible de la maquette, restreint au panier */
.woocommerce-cart .pan :focus-visible,
.woocommerce-cart .panvide :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 64, 39, .28);
  border-radius: inherit;
}

/* .pan : grille 1fr | 380px, gouttière 64. Les retraits 32 haut / 96 bas de
   la maquette sont déjà portés par le conteneur Elementor qui accueille le
   shortcode (09-panier.json : padding 32/0/96, 28/72 tablette, 20/56 mobile),
   comme la gouttière et la largeur 1320 : on ne les redouble pas. */
.woocommerce-cart .pan {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
  padding: 0;
}

/* WooCommerce fait flotter .cart_totals à 48 % dans .cart-collaterals : si le
   gabarit garde ces classes autour du récapitulatif, la grille les neutralise. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}

/* ── .panline : grille 104px | 1fr | auto, filet bas ─────────────────── */
.woocommerce-cart .panline {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
}
/* .panline:first-of-type : la première ligne colle au filet du titre */
.woocommerce-cart .panline:first-of-type {
  padding-top: 0;
}

/* .panline__media : vignette carrée 104, plaque des packshots, rayon image */
.woocommerce-cart .panline__media {
  display: block;
  width: 104px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  background: #F7F4EC;
}
.woocommerce-cart .panline__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* .panline__name : h2 en Bricolage 16, lien qui passe vert au survol */
.woocommerce-cart .panline__name {
  margin: 0;
  font: 600 16px/1.35 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--e-global-color-f76f42a, #000000);
}
.woocommerce-cart .panline__name a {
  color: inherit;
  text-decoration: none;
}
.woocommerce-cart .panline__name a:hover {
  color: var(--e-global-color-primary, #264027);
}

/* .panline__meta : « Bois d'olivier massif » en 13 gris */
.woocommerce-cart .panline__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}

/* .panline__ctrl : pilule de quantité, prix unitaire et « Retirer » sur une ligne */
.woocommerce-cart .panline__ctrl {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* .panline__unit : « 25,90 € l'unité » */
.woocommerce-cart .panline__unit {
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}

/* .panline__sum : prix de ligne en Bricolage 20 bois, à droite */
.woocommerce-cart .panline__sum {
  text-align: right;
  white-space: nowrap;
  font: 700 20px/1.2 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -.02em;
  color: var(--e-global-color-secondary, #6F732F);
}

/* ── .panqty : pilule blanche de 44 px, filet #8A806E ─────────────────── */
.woocommerce-cart .panqty {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--e-global-color-text, #5A5A5A);
  border-radius: 999px;
  background: var(--e-global-color-a2e875e, #FFFFFF);
}
/* div.quantity de WooCommerce, enveloppé dans la pilule : il ne doit rien ajouter */
.woocommerce-cart .panqty .quantity {
  display: inline-flex;
  align-items: center;
  float: none;
  margin: 0;
  padding: 0;
}
/* .panqty button : les deux cibles de 44 px, − et +, du snippet .olea-qty */
.woocommerce-cart .panqty .olea-qty {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  font: 400 17px/1 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-text, #5A5A5A);
  cursor: pointer;
  transition: color 140ms cubic-bezier(.32, .72, .32, 1);
}
.woocommerce-cart .panqty .olea-qty:hover {
  color: var(--e-global-color-primary, #264027);
  background: none;
}
/* .panqty span : le chiffre devient le champ de WooCommerce — 26 px comme le
   min-width du span de la maquette (la pilule fait 44 + 26 + 44), sans flèches */
.woocommerce-cart .panqty input.qty {
  width: 26px;
  min-width: 26px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font: 600 14px/1 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-f76f42a, #000000);
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce-cart .panqty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .panqty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* le libellé « Quantité » de quantity-input.php ne doit jamais s'afficher */
.woocommerce-cart .panqty .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ── .panline__del : corbeille + « Retirer », 44 px de haut ────────────
   WooCommerce pose color:red !important sur « .woocommerce a.remove » et un
   cercle rouge au survol ; le lien garde cette classe pour cart.js. D'où le
   sélecteur à trois classes, plus lourd que le sien, et les deux !important
   sur la couleur, seule façon de passer devant un !important. */
.woocommerce-cart .panline .panline__del {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 44px;
  padding: 0 6px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 13px/1.65 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-text, #5A5A5A) !important;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms cubic-bezier(.32, .72, .32, 1);
}
.woocommerce-cart .panline .panline__del:hover {
  color: var(--e-global-color-primary, #264027) !important;
  background: none;
}
.woocommerce-cart .panline .panline__del svg {
  flex: none;
}

/* ── .panback : « Continuer mes achats », flèche commune retournée ────── */
.woocommerce-cart .panback {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  margin-top: 16px;
  font: 600 14px/1 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-primary, #264027);
  text-decoration: none;
}
/* la maquette n'a pas de survol ici : on fixe la couleur pour que celle du
   réglage Elementor des liens ne s'y substitue pas */
.woocommerce-cart .panback:hover {
  color: var(--e-global-color-primary, #264027);
}
.woocommerce-cart .panback svg {
  flex: none;
  transform: rotate(180deg);
}

/* ── .panrecap : carte blanche collante à 100 px, rayon 12 ────────────── */
.woocommerce-cart .panrecap {
  position: sticky;
  top: 100px;
  margin: 0;
  background: var(--e-global-color-a2e875e, #FFFFFF);
  border: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  border-radius: 12px;
  padding: 0 0 32px;
}
/* .panrecap h2 : « Récapitulatif » en surtitre bois, capitales espacées */
.woocommerce-cart .panrecap h2 {
  margin: 0;
  padding: 32px 32px 0;
  font: 700 12px/1 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary, #6F732F);
}

/* ── .panjauge : encart crème « Plus que X € pour la livraison offerte » ── */
.woocommerce-cart .panjauge {
  margin: 24px 32px 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--e-global-color-0fe90d9, #FAF3E2);
  font-size: 14px;
}
.woocommerce-cart .panjauge strong {
  color: var(--e-global-color-f76f42a, #000000);
}
.woocommerce-cart .panjauge small {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}

/* .bar : jauge de 5 px, piste crème, remplissage olive. La largeur de <i>
   vient du style en ligne écrit par PHP ; 78 % est la valeur par défaut de
   la maquette. */
.woocommerce-cart .bar {
  height: 5px;
  border-radius: 999px;
  background: var(--e-global-color-6cf4216, #E8DCC1);
  margin-top: 10px;
  overflow: hidden;
}
.woocommerce-cart .bar i {
  display: block;
  height: 100%;
  width: 78%;
  background: var(--e-global-color-secondary, #6F732F);
  border-radius: inherit;
}

/* .astk : « * En point relais uniquement. » en bois, sous la phrase */
.woocommerce-cart .astk {
  display: block;
  margin-top: 6px;
  font: 500 13px/1.4 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-secondary, #6F732F);
}

/* ── .panrows : dl Sous-total / Livraison. La maquette ne remet pas à zéro
   les marges du navigateur sur dl et dd : on fixe ce qu'elle rendait. ──── */
.woocommerce-cart .panrows {
  margin: 16px 0;
  padding: 24px 32px 0;
}
.woocommerce-cart .panrows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
}
.woocommerce-cart .panrows dt {
  margin: 0;
  font-weight: 400;
  color: var(--e-global-color-text, #5A5A5A);
}
.woocommerce-cart .panrows dd {
  margin: 0 0 0 40px;
  text-align: right;
  font-weight: 600;
  color: var(--e-global-color-f76f42a, #000000);
}
/* .panrows dd.soft : « Calculée à l'étape suivante », valeur non chiffrée */
.woocommerce-cart .panrows dd.soft {
  font-weight: 500;
  color: var(--e-global-color-text, #5A5A5A);
}

/* ── .pantotal : Total + mention TTC à gauche, montant Bricolage 24 bois ── */
.woocommerce-cart .pantotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 32px 0;
  padding-top: 16px;
  border-top: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
}
.woocommerce-cart .pantotal span {
  font: 600 16px/1.3 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-f76f42a, #000000);
}
.woocommerce-cart .pantotal em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}
.woocommerce-cart .pantotal b {
  white-space: nowrap;
  font: 700 24px/1 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -.02em;
  color: var(--e-global-color-secondary, #6F732F);
}
/* la maquette n'écrit que le montant : la mention fiscale que WooCommerce
   ajoute au total (« dont TVA… ») ou au sous-total (« (HT) ») est déjà dite
   par le <em> « Prix TTC, hors livraison » */
.woocommerce-cart .pantotal .includes_tax,
.woocommerce-cart .panrows .tax_label {
  display: none;
}

/* ── .panpay : bouton « Passer commande » puis réassurance ─────────────── */
.woocommerce-cart .panpay {
  padding: 24px 32px 0;
  margin: 0;
}

/* .btn : pilule de 52 px, Manrope 600 14. Le deuxième sélecteur pèse plus
   lourd que « .woocommerce-cart .wc-proceed-to-checkout a.button.alt » de
   WooCommerce, qui sinon impose son padding, sa taille et sa marge ; le
   troisième passe devant « .woocommerce a.button » (0,2,1), que le bouton de
   l'état vide porte encore (classe button wc-backward, lue par WooCommerce). */
.woocommerce-cart .btn,
.woocommerce-cart .panpay a.btn.btn--primary.btn--block,
.woocommerce-cart .panvide a.btn.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin: 0;
  padding: 0 48px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 240ms cubic-bezier(.32, .72, .32, 1),
              color 240ms cubic-bezier(.32, .72, .32, 1),
              transform 140ms cubic-bezier(.32, .72, .32, 1),
              box-shadow 240ms cubic-bezier(.32, .72, .32, 1),
              border-color 240ms cubic-bezier(.32, .72, .32, 1);
}
/* .btn--primary : vert profond, texte crème ; survol vert 800 */
.woocommerce-cart .btn.btn--primary,
.woocommerce-cart .panpay a.btn.btn--primary.btn--block,
.woocommerce-cart .panvide a.btn.btn--primary {
  background: var(--e-global-color-primary, #264027);
  color: var(--e-global-color-0fe90d9, #FAF3E2);
}
.woocommerce-cart .btn.btn--primary:hover,
.woocommerce-cart .panpay a.btn.btn--primary.btn--block:hover,
.woocommerce-cart .panvide a.btn.btn--primary:hover {
  background: #1B3220;
  color: var(--e-global-color-0fe90d9, #FAF3E2);
}
/* .btn:active : légère compression, sans rebond */
.woocommerce-cart .btn:active {
  transform: scale(.98);
}
/* .btn--block : pleine largeur de la carte */
.woocommerce-cart .btn.btn--block {
  width: 100%;
}

/* ── .panassure : trois lignes 13 gris, icône olive à gauche ─────────── */
.woocommerce-cart .panassure {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-cart .panassure li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}
.woocommerce-cart .panassure .ico {
  flex: none;
  margin-top: 1px;
  color: var(--e-global-color-secondary, #6F732F);
}
.woocommerce-cart .panassure .ico svg {
  display: block;
}
/* .panassure a : « Conditions de vente », souligné, sous le texte */
.woocommerce-cart .panassure a {
  display: block;
  margin-top: 4px;
  color: var(--e-global-color-text, #5A5A5A);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart .panassure a:hover {
  color: var(--e-global-color-primary, #264027);
}

/* ── .panvide : état vide, décrit par la maquette et non dessiné — bloc
   centré : titre, phrase courte, bouton vert, lien discret ─────────────── */
.woocommerce-cart .panvide {
  max-width: 52ch;
  margin: 0 auto;
  padding: 24px 0;
  text-align: center;
}
.woocommerce-cart .panvide h2 {
  margin: 0;
  font: 600 30px/1.25 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--e-global-color-f76f42a, #000000);
}
.woocommerce-cart .panvide p {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--e-global-color-text, #5A5A5A);
}
.woocommerce-cart .panvide .btn {
  margin-top: 32px;
}
/* .panvide__lien : « Voir mes commandes », même traitement que le lien de réassurance */
.woocommerce-cart .panvide__lien {
  display: inline-block;
  margin-top: 16px;
  font: 600 14px/1 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--e-global-color-text, #5A5A5A);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 140ms cubic-bezier(.32, .72, .32, 1);
}
.woocommerce-cart .panvide__lien:hover {
  color: var(--e-global-color-primary, #264027);
}

/* ── Ce que la maquette n'a pas : le bouton « Mettre à jour le panier »
   (gardé dans le DOM pour cart.js, déclenché par le JS) et le calculateur
   de frais de port (la livraison se calcule à l'étape suivante). ───────── */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .shipping-calculator-button,
.woocommerce-cart .shipping-calculator-form {
  display: none;
}

/* ── Points de rupture de la page (les @container de la maquette) ─────── */
/* sous 1080 : une colonne, le récapitulatif passe sous la liste */
@media (max-width: 1080px) {
  .woocommerce-cart .pan {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .woocommerce-cart .panrecap {
    position: static;
  }
}
/* sous 640 : vignette 76, prix de ligne sous le texte, carte resserrée */
@media (max-width: 640px) {
  .woocommerce-cart .panline {
    grid-template-columns: 76px 1fr;
    gap: 16px;
  }
  .woocommerce-cart .panline__media {
    width: 76px;
  }
  .woocommerce-cart .panline__sum {
    grid-column: 2;
    text-align: left;
    font-size: 16px;
  }
  .woocommerce-cart .panline__ctrl {
    gap: 12px;
  }
  .woocommerce-cart .panrecap h2,
  .woocommerce-cart .panjauge,
  .woocommerce-cart .panrows,
  .woocommerce-cart .pantotal,
  .woocommerce-cart .panpay {
    margin-inline: 24px;
    padding-inline: 0;
  }
  .woocommerce-cart .panjauge {
    padding: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIROIR — coquille Elementor + contenu rendu par cart/mini-cart.php
   ═══════════════════════════════════════════════════════════════════════ */

/* .scrim : voile sombre et flou de 2 px derrière le tiroir */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
  background: rgba(3, 9, 10, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* .drawer : panneau crème de 420 px, coins arrondis côté page, ombre portée
   vers la gauche, colonne flex pour que la liste défile seule.
   Le !important sur la largeur : Elementor la pose avec une règle plus
   lourde (relevé au rendu du tiroir le 04/09), rien d'autre ne passe. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container .elementor-menu-cart__main {
  width: min(420px, 92vw) !important;
  max-width: none;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: #F1E8D4;
  box-shadow: -24px 0 60px rgba(3, 9, 10, .25);
  display: flex;
  flex-direction: column;
}

/* .iconbtn du .drawer__head : cercle de 44 px, fond blanc, filet bois,
   olive plein au survol. C'est le bouton de fermeture d'Elementor, sorti du
   flux et posé dans l'en-tête (24 px du haut, 32 px du bord). */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  line-height: 1;
  border-radius: 999px;
  background: var(--e-global-color-a2e875e, #FFFFFF);
  border: 1px solid var(--e-global-color-accent, #B38958);
  color: var(--e-global-color-f76f42a, #000000);
  cursor: pointer;
  transition: background 140ms cubic-bezier(.32, .72, .32, 1),
              color 140ms cubic-bezier(.32, .72, .32, 1),
              border-color 140ms cubic-bezier(.32, .72, .32, 1);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__close-button:hover {
  background: #565A24;
  border-color: var(--e-global-color-primary, #264027);
  color: var(--e-global-color-0fe90d9, #FAF3E2);
}

/* body de la maquette, reposé sur la racine des fragments WooCommerce ; la
   racine prend la hauteur restante pour que .drawer__list puisse défiler */
.elementor-menu-cart__main .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--e-global-color-text, #5A5A5A);
  -webkit-font-smoothing: antialiased;
}

/* :focus-visible de la maquette, restreint au tiroir */
.elementor-menu-cart__main :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 64, 39, .28);
  border-radius: inherit;
}

/* .drawer__head : titre à gauche, croix à droite, filet bas. Hauteur mini de
   92 px : c'est celle que le bouton de 44 px donnait à l'en-tête de la
   maquette, et il est maintenant hors du flux. */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding: 24px 80px 24px 32px;
  border-bottom: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
}
/* .drawer__head h3 : « Votre panier (2) », Bricolage 20 ; le compte entre
   parenthèses est en Manrope 500 gris (style en ligne de la maquette) */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__head h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: var(--e-global-color-f76f42a, #000000);
}
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__head h3 span {
  color: var(--e-global-color-text, #5A5A5A);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}

/* .drawer__ship : bandeau crème « Plus que X € pour la livraison offerte » */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__ship {
  padding: 16px 32px;
  background: var(--e-global-color-0fe90d9, #FAF3E2);
  border-bottom: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  font-size: 14px;
}
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__ship strong {
  color: var(--e-global-color-f76f42a, #000000);
}

/* .bar : même jauge que la page (la largeur de <i> vient du style en ligne) */
.elementor-menu-cart__main .widget_shopping_cart_content .bar {
  height: 5px;
  border-radius: 999px;
  background: var(--e-global-color-6cf4216, #E8DCC1);
  margin-top: 10px;
  overflow: hidden;
}
.elementor-menu-cart__main .widget_shopping_cart_content .bar i {
  display: block;
  height: 100%;
  width: 78%;
  background: var(--e-global-color-secondary, #6F732F);
  border-radius: inherit;
}

/* .drawer__list : la seule zone qui défile, lignes espacées de 24 */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

/* .line : une ligne du tiroir — texte à gauche, prix poussé à droite */
.elementor-menu-cart__main .widget_shopping_cart_content .line {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .line img : vignette 76 × 95 à filet, sur fond blanc */
.elementor-menu-cart__main .widget_shopping_cart_content .line img {
  display: block;
  flex: none;
  width: 76px;
  height: 95px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  background: var(--e-global-color-a2e875e, #FFFFFF);
}
/* .line b : nom du produit en Bricolage 14 */
.elementor-menu-cart__main .widget_shopping_cart_content .line b {
  display: block;
  font: 600 14px/1.35 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--e-global-color-f76f42a, #000000);
}
.elementor-menu-cart__main .widget_shopping_cart_content .line b a {
  color: inherit;
  text-decoration: none;
}
/* .line small : « Bois d'olivier massif » */
.elementor-menu-cart__main .widget_shopping_cart_content .line small {
  color: var(--e-global-color-text, #5A5A5A);
  font-size: 13px;
}
/* prix de ligne : span poussé à droite, gras, encre (style en ligne de la
   maquette) ; mini-cart.php lui donne la classe .line__prix */
.elementor-menu-cart__main .widget_shopping_cart_content .line > span,
.elementor-menu-cart__main .widget_shopping_cart_content .line .line__prix {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
  color: var(--e-global-color-f76f42a, #000000);
}
/* le lien de retrait que WooCommerce attend (filtre woocommerce_cart_item_remove_link,
   add-to-cart.js) n'existe pas dans la maquette : on y retire un article en
   passant la quantité à 0. Il reste dans le DOM pour les extensions, sans être dessiné. */
.elementor-menu-cart__main .widget_shopping_cart_content .line .line__del {
  display: none;
}

/* .line .qty : pilule compacte « − 1 + » de 34 px sur fond blanc */
.elementor-menu-cart__main .widget_shopping_cart_content .line .qty {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  border-radius: 999px;
  font-size: 14px;
  background: var(--e-global-color-a2e875e, #FFFFFF);
}
/* button de la maquette (reset nu) : les deux boutons − et + de mini-cart.php */
.elementor-menu-cart__main .widget_shopping_cart_content .line .qty button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  transition: color 140ms cubic-bezier(.32, .72, .32, 1);
}
.elementor-menu-cart__main .widget_shopping_cart_content .line .qty button:hover {
  color: var(--e-global-color-primary, #264027);
  background: none;
}
/* état de chargement posé par le JS pendant l'appel wc-ajax=olea_qty :
   la pilule s'estompe et ne reçoit plus de clic (pas de double envoi) */
.elementor-menu-cart__main .widget_shopping_cart_content .line .qty[aria-busy="true"],
.elementor-menu-cart__main .widget_shopping_cart_content .line .qty button:disabled {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

/* .drawer__foot : pied blanc, filet haut */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__foot {
  flex: none;
  padding: 24px 32px 32px;
  border-top: 1px solid var(--e-global-color-3b5cda1, #D9D8CB);
  background: var(--e-global-color-a2e875e, #FFFFFF);
}
/* .drawer__total : « Sous-total » et montant Bricolage 24, sur la même ligne de base */
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px;
}
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__total b {
  font: 700 24px/1 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--e-global-color-f76f42a, #000000);
}

/* .btn / .btn--primary / .btn--block : même bouton que la page. Le second
   sélecteur passe devant « .woocommerce .widget_shopping_cart .buttons a ». */
.elementor-menu-cart__main .widget_shopping_cart_content .btn,
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__foot a.btn.btn--block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin: 0;
  padding: 0 48px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 240ms cubic-bezier(.32, .72, .32, 1),
              color 240ms cubic-bezier(.32, .72, .32, 1),
              transform 140ms cubic-bezier(.32, .72, .32, 1),
              box-shadow 240ms cubic-bezier(.32, .72, .32, 1),
              border-color 240ms cubic-bezier(.32, .72, .32, 1);
}
.elementor-menu-cart__main .widget_shopping_cart_content .btn.btn--primary,
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__foot a.btn.btn--primary.btn--block {
  background: var(--e-global-color-primary, #264027);
  color: var(--e-global-color-0fe90d9, #FAF3E2);
}
.elementor-menu-cart__main .widget_shopping_cart_content .btn.btn--primary:hover,
.elementor-menu-cart__main .widget_shopping_cart_content .drawer__foot a.btn.btn--primary.btn--block:hover {
  background: #1B3220;
  color: var(--e-global-color-0fe90d9, #FAF3E2);
}
.elementor-menu-cart__main .widget_shopping_cart_content .btn:active {
  transform: scale(.98);
}
.elementor-menu-cart__main .widget_shopping_cart_content .btn.btn--block {
  width: 100%;
}

/* .drawer__foot .fine : cadenas + « Paiement sécurisé », centré sous le bouton */
.elementor-menu-cart__main .widget_shopping_cart_content .fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--e-global-color-text, #5A5A5A);
}
.elementor-menu-cart__main .widget_shopping_cart_content .fine svg {
  flex: none;
}

/* tiroir vide : le message de WooCommerce, dans les marges du tiroir */
.elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 24px 32px;
  font-size: 14px;
  color: var(--e-global-color-text, #5A5A5A);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — la maquette coupe toute transition ; ici, seulement
   celles du panier et du tiroir. Les !important reprennent ceux de la
   maquette : Elementor anime le tiroir avec des règles plus lourdes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart .pan *,
  .woocommerce-cart .panvide *,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container .elementor-menu-cart__main,
  .elementor-menu-cart__main * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .woocommerce-cart .btn:active,
  .elementor-menu-cart__main .widget_shopping_cart_content .btn:active {
    transform: none;
  }
}

/* Apple Pay / Google Pay : WooPayments les injecte sous « Passer commande »
   par le crochet woocommerce_proceed_to_checkout. Pas dans la maquette.
   Le vrai reglage est dans WooPayments > Paiement express (decocher
   « Panier ») ; ceci est le filet si le reglage revient. */
.woocommerce-cart .wcpay-express-checkout-wrapper,
.woocommerce-cart #wcpay-express-checkout-element,
.woocommerce-cart #wcpay-express-checkout-button-separator,
.woocommerce-cart .wcpay-payment-request-wrapper,
.woocommerce-cart .wc-stripe-payment-request-wrapper { display: none !important; }

/* Le kit Elementor (Style du theme) donne aux liens sa propre typographie :
   mesure sur le site, le nom de produit sortait en Manrope 400 alors que le
   h2 qui le contient est en Bricolage 600. Le lien herite de son parent. */
.woocommerce-cart .panline__name a,
.elementor-menu-cart__main .widget_shopping_cart_content .line b a {
  font: inherit; color: inherit; letter-spacing: inherit; text-decoration: none;
}

/* La croix du bouton fermer d'Elementor est faite de deux pseudo-elements
   etires a 100 % du bouton (mesure : 44 x 44) : dans notre cercle de 44 px
   elle le remplissait. La maquette dessine une croix de 20 px, trait 1,8.
   On redimensionne les deux barres et on les centre, couleur du texte pour
   que le survol olive/creme s'applique. Valide en ligne le 04/09. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button { position: absolute; overflow: hidden; }
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::after {
  content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
  width: 20px !important; height: 2px !important; margin: -1px 0 0 -10px !important;
  background: currentColor !important; border: 0 !important; border-radius: 1px;
  transform-origin: center !important;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::before { transform: rotate(45deg) !important; }
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::after  { transform: rotate(-45deg) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ANCRES (1.3.2, 06/09) — Elementor pose `html { scroll-behavior: smooth }`
   et Hello Elementor `body { overflow-x: clip }`. Dans Chrome, cette
   combinaison empêche TOUT défilement doux de la page vers une ancre :
   #livraison, #retours (pied de page), #pro (contact), sommaires… la page
   reste en haut, et l'adresse seule change. Le clip évite les débordements
   horizontaux : on le garde, et on rend le saut d'ancre instantané, comme
   dans la maquette (qui ne déclare pas de défilement doux).
   ═══════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: auto !important; }

/* ── Newsletter (1.3.8, 06/09) — le bouton « Je m'inscris » se coupait sur deux lignes
   dans les pages importées (accueil, journal, article) : une ligne, comme la maquette. */
form.elementor-form[name="Newsletter"] .elementor-button { white-space: nowrap; padding-left: 24px; padding-right: 24px; }
form.elementor-form[name="Newsletter"] .elementor-button-text { white-space: nowrap; }

/* ── Fiche produit, bouton « Ajouter au panier » (1.5.3, 06/09) — WooCommerce colore
   ses boutons .alt en mauve au survol, au focus et à l'état désactivé (woocommerce.css,
   #7249a4 / #7f54b3), le widget Elementor ne définissant pas ces états. Le bouton
   garde le vert : vert 800 au survol. Rien d'autre n'est touché : la roue (.loading)
   et la coche (.added) que WooCommerce ajoute pendant l'ajout restent les siennes. */
.elementor-widget-woocommerce-product-add-to-cart .cart button.single_add_to_cart_button.alt:hover,
.elementor-widget-woocommerce-product-add-to-cart .cart button.single_add_to_cart_button.alt:focus-visible,
.elementor-widget-woocommerce-product-add-to-cart .cart button.single_add_to_cart_button.alt:active {
  background-color: #1B3220; color: var(--e-global-color-0fe90d9, #FAF3E2);
}
.elementor-widget-woocommerce-product-add-to-cart .cart button.single_add_to_cart_button.alt.disabled,
.elementor-widget-woocommerce-product-add-to-cart .cart button.single_add_to_cart_button.alt:disabled {
  background-color: var(--e-global-color-primary, #264027); color: var(--e-global-color-0fe90d9, #FAF3E2);
}

/* ── Badge de la carte produit (1.8.0, 06/09) — .card__badge de la maquette : posé
   par [olea_badge] dans le visuel de la boucle 800 (widget .olea-badge-widget).
   Variantes : promo (olive 700, crème), neuf (bois 200, filet accent), stock (blanc, filet bois 700). */
.e-loop-item .e-con:has(> .olea-badge-widget) { position: relative; }
.e-loop-item .olea-badge-widget { position: absolute; top: 12px; left: 12px; z-index: 2; width: auto; margin: 0; max-width: calc(100% - 24px); }
.olea-badge {
  height: 26px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
  background: var(--e-global-color-a2e875e, #FFFFFF); border: 1px solid var(--e-global-color-3b5cda1, #D9D8CB); color: var(--e-global-color-f76f42a, #000000);
  font: 700 10.5px/1 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; letter-spacing: .09em; text-transform: uppercase;
}
.olea-badge--promo { background: #565A24; border-color: var(--e-global-color-primary, #264027); color: var(--e-global-color-0fe90d9, #FAF3E2); }
.olea-badge--neuf { background: #E7D6C2; border-color: var(--e-global-color-accent, #B38958); color: var(--e-global-color-secondary, #6F732F); }
.olea-badge--stock { background: var(--e-global-color-a2e875e, #FFFFFF); border-color: var(--e-global-color-accent, #B38958); color: var(--e-global-color-secondary, #6F732F); }

/* ── Boutons sans soulignement (1.9.8, 12/09, Bassi : « tous les boutons du site sont soulignés ») —
   la typographie globale « Button Product » du kit de la cliente est définie SOULIGNÉE ; les boutons
   la gardent (police, graisse, taille) mais pas le soulignement. Feuille chargée sur tout le site. */
.elementor-button, .elementor-button:hover, .elementor-button:focus, .elementor-button-link,
a.button, button.button, .single_add_to_cart_button, .checkout-button, .elementor-search-form__submit,
.elementor-form .elementor-button, .woocommerce-cart .btn, .olea-barre-options, .wc-block-components-button,
.e-filter-item { text-decoration: none !important; }

/* ── Messages WooCommerce (18/09, Bassi : « des signes bleus de WordPress ») ──────────
   Les bandeaux « info / message / erreur » de WooCommerce et le bouton qu'ils portent
   (« Confirmer l'adresse e-mail », « Voir le panier », « Parcourir les produits »…)
   gardaient les couleurs de WooCommerce : liseré et icône bleus (#1e85be), bouton gris
   lavande (#e9e6ed). Ici la charte, partout où une feuille plus précise (compte, commande)
   n'a pas déjà la sienne. « body » devant le bouton pour peser plus que
   « .woocommerce a.button » (0,2,1) et « .woocommerce-info .button » (0,2,0). */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  margin: 0 0 24px; padding: 16px 24px 16px 52px; border: 1px solid #D9D8CB;
  border-left: 3px solid var(--e-global-color-primary, #264027); border-radius: 12px;
  background: #FFFFFF; color: var(--e-global-color-f76f42a, #000000);
  font: 400 14px/1.5 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 22px; top: 17px; color: var(--e-global-color-primary, #264027); }
.woocommerce-message::before { color: var(--e-global-color-secondary, #6F732F); }
.woocommerce-error { border-left-color: #8C2F1E; background: #F7E3DE; color: #8C2F1E; list-style: none; }
.woocommerce-error::before { color: #8C2F1E; }
body .woocommerce-message a.button, body .woocommerce-info a.button, body .woocommerce-error a.button {
  float: none; display: inline-flex; align-items: center; justify-content: center; height: 40px;
  margin: 0 14px 0 0; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--e-global-color-primary, #264027); color: var(--e-global-color-0fe90d9, #FAF3E2);
  font: 600 13px/1 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; letter-spacing: .02em;
  text-decoration: none; vertical-align: middle;
}
body .woocommerce-message a.button:hover, body .woocommerce-info a.button:hover, body .woocommerce-error a.button:hover { background: #1B3220; color: var(--e-global-color-0fe90d9, #FAF3E2); }
@media (max-width: 767px) {
  .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 14px 18px 14px 44px; }
  .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 16px; top: 15px; }
  body .woocommerce-message a.button, body .woocommerce-info a.button, body .woocommerce-error a.button { display: flex; width: 100%; margin: 0 0 10px; }
}

/* ── Filtre de prix WooCommerce (18/09) ──────────────────────────────────────────────
   Le tiroir « Filtrer » de la boutique et les pages de catégorie posent le widget
   WooCommerce « Filtre de prix » tel quel : bouton « Filtrer » gris lavande, champs bruts.
   Même habillage que dans la fenêtre des filtres (popup_filtres.py) ; sélecteurs à
   (0,4,0) pour passer devant « .woocommerce .widget_price_filter .price_slider_amount
   .button » de WooCommerce, qui impose sa taille. */
.woocommerce .widget_price_filter .price_slider_amount, .widget_price_filter form .price_slider_amount { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.woocommerce .widget_price_filter .price_slider_amount input[type="text"], .widget_price_filter form .price_slider_amount input[type="text"] {
  flex: 1 1 0; min-width: 0; margin: 0; height: 44px !important; padding: 0 14px !important;
  border: 1px solid #D9D8CB !important; border-radius: 8px !important; background: #FFFFFF;
  font: 500 15px/1 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; color: #14241A;
}
.woocommerce .widget_price_filter .price_slider_amount input[type="text"]:focus, .widget_price_filter form .price_slider_amount input[type="text"]:focus { outline: none; border-color: var(--e-global-color-primary, #264027) !important; box-shadow: 0 0 0 3px rgba(38,64,39,.18); }
.woocommerce .widget_price_filter .price_slider_amount .button, .widget_price_filter form .price_slider_amount .button {
  float: none; flex: 0 0 100%; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--e-global-color-primary, #264027);
  border-radius: 999px; background: transparent; font: 600 14px/1 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif;
  color: var(--e-global-color-primary, #264027); cursor: pointer; transition: background 200ms ease, color 200ms ease;
}
.woocommerce .widget_price_filter .price_slider_amount .button:hover, .widget_price_filter form .price_slider_amount .button:hover { background: var(--e-global-color-primary, #264027); color: var(--e-global-color-0fe90d9, #FAF3E2); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider, .widget_price_filter form .price_slider_wrapper .ui-slider { background: #E0D7C2; height: 3px; border: 0; margin: 14px 8px 18px; }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-range, .widget_price_filter form .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--e-global-color-primary, #264027); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-handle, .widget_price_filter form .price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--e-global-color-primary, #264027); width: 18px; height: 18px; top: -8px; border: 0; border-radius: 50%; }
.woocommerce .widget_price_filter .price_slider_amount .price_label, .widget_price_filter form .price_slider_amount .price_label { flex: 0 0 100%; font: 500 14px/1.4 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; color: #5A5A5A; }