/* ═══════════════════════════════════════════════════════════════════════════
   LEONIO : Système de panier flottant + boutons d'ajout
   v1.0 · avril 2026
   Design system claymorphism (s'appuie sur les variables :root du site).
   Inspiré 21st.dev/community/components/muhammad-binsalman/wooden-cart-button
   + pattern stateful du Product Card par beratberkay.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Bouton "Wooden Cart" (CTA principal type packs/pages produits) ──────── */
.btn-cart-wood{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 24px;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.2px;
  color:var(--black);
  background:linear-gradient(180deg, #f3ede0 0%, #e3dccd 100%);
  border:1px solid #c8c0b0; border-radius:999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.08),
    0 4px 10px rgba(0,0,0,.06);
  cursor:pointer; user-select:none;
  position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s ease,
             background .25s ease,
             color .25s ease;
}
.btn-cart-wood:hover{
  transform:translateY(-2px) rotateZ(-1.5deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 6px 16px rgba(0,0,0,.12);
}
.btn-cart-wood:active{
  transform:translateY(1px) rotateZ(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.12),
    0 1px 2px rgba(0,0,0,.06);
}
.btn-cart-wood [data-lucide]{
  width:18px; height:18px; stroke-width:2;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.btn-cart-wood:hover [data-lucide]{ transform:translateX(-2px) rotateZ(-8deg); }

.btn-cart-wood::before{
  content:""; position:absolute; top:0; left:-60%;
  width:50%; height:100%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:skewX(-20deg);
  transition:left .7s ease;
  pointer-events:none;
}
.btn-cart-wood:hover::before{ left:120%; }

.btn-cart-wood.is-loading{
  background:linear-gradient(180deg, #e8e1d2 0%, #d6cfbf 100%);
  color:var(--warm-charcoal); cursor:wait;
}
.btn-cart-wood.is-loading [data-lucide]{ display:none }
.btn-cart-wood.is-loading::after{
  content:""; width:16px; height:16px;
  border:2px solid var(--warm-charcoal); border-top-color:transparent;
  border-radius:50%;
  animation:cart-spin .7s linear infinite;
}
@keyframes cart-spin{ to{ transform:rotate(360deg) } }

.btn-cart-wood.is-added,
.pack.featured[data-aud="b2c"] .btn-cart-wood.is-added{
  background:linear-gradient(180deg, #c5e8c0 0%, #a8d8a3 100%);
  border-color:#7fb87a; color:#1f4d1c;
  animation:cart-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.btn-cart-wood.is-added [data-lucide="shopping-cart"]{ display:none }
.btn-cart-wood.is-added::before{ display:none }
.btn-cart-wood.is-added .check-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
}
@keyframes cart-pop{
  0%{ transform:scale(.95) }
  50%{ transform:scale(1.04) }
  100%{ transform:scale(1) }
}
.btn-cart-wood .check-mark{ display:none }

.pack.featured[data-aud="b2c"] .btn-cart-wood{
  background:linear-gradient(180deg, #fce4cf 0%, #f5c9a3 100%);
  border-color:#dba87a;
}
.pack.featured[data-aud="b2c"] .btn-cart-wood:hover{
  background:linear-gradient(180deg, #fcd9bc 0%, #f0bb8c 100%);
}

/* Wrapper pour garder "dès X€" + mini-caddie collés en flex .foot */
.product .foot .price-row{
  display:inline-flex; align-items:center;
}

/* ─── Bouton "Mini-caddie" (à côté de "dès X€" sur les cards catalogue) ──── */
.btn-cart-mini{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  background:var(--teal); color:var(--white);
  border:none; border-radius:50%;
  box-shadow:0 2px 6px rgba(28,188,180,.3);
  cursor:pointer; flex-shrink:0;
  vertical-align:middle; margin-left:6px;
  position:relative; overflow:visible;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .2s ease;
}
.btn-cart-mini:hover{
  background:var(--teal-hover);
  transform:scale(1.12) rotateZ(-6deg);
  box-shadow:0 4px 12px rgba(28,188,180,.5);
}
.btn-cart-mini:active{ transform:scale(.95); }
.btn-cart-mini [data-lucide]{ width:15px; height:15px; stroke-width:2.4 }
.btn-cart-mini.is-added{
  background:#7fb87a; box-shadow:0 2px 6px rgba(127,184,122,.4);
  animation:cart-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.btn-cart-mini .check-mark{ display:none }
.btn-cart-mini.is-added .check-mark{ display:inline-flex; align-items:center; justify-content:center }
.btn-cart-mini.is-added [data-lucide="shopping-cart"]{ display:none }

/* ─── Mini-flyer "+1" qui s'envole vers le panier flottant ───────────────── */
.cart-flyer{
  position:fixed; z-index:9999; pointer-events:none;
  width:40px; height:40px; border-radius:50%;
  background:var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-weight:700; font-size:14px;
  box-shadow:0 6px 20px rgba(28,188,180,.45);
  transition:transform .8s cubic-bezier(.5,0,.5,1), opacity .8s ease;
}

/* ─── Panier inline dans le header (aligné sur le btn "Réserver un appel") ── */
.cart-floater{
  position:relative; display:inline-flex;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  margin-left:6px;
  opacity:1; transform:scale(1);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* Panier vide : icône visible, mais compacte (sans total ni badge) */
.cart-floater.is-empty .cart-total{ display:none }
.cart-floater.is-empty .cart-badge{ display:none }
.cart-floater.is-empty .cart-fab{
  padding:10px 14px;
  background:transparent; color:var(--warm-charcoal);
  border-color:var(--oat);
  box-shadow:none;
}
.cart-floater.is-empty .cart-fab:hover{
  background:var(--white); color:var(--teal);
  border-color:var(--teal);
  box-shadow:var(--shadow-clay);
}

.cart-fab{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px 12px 16px;
  background:var(--teal); color:var(--white);
  border:1px solid var(--teal); border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:15px;
  line-height:1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 3px 10px rgba(28,188,180,.28),
    0 8px 22px rgba(0,0,0,.10);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, border-color .25s ease;
  position:relative;
}
.cart-fab:hover{
  transform:rotateZ(-2deg) translateY(-2px);
  background:var(--teal-hover); border-color:var(--teal-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 16px rgba(28,188,180,.4),
    var(--shadow-hover);
}
.cart-fab.is-pulse{ animation:cart-fab-pulse .55s cubic-bezier(.34,1.56,.64,1) }
@keyframes cart-fab-pulse{
  0%   { transform:scale(1) }
  35%  { transform:scale(1.18) rotateZ(-4deg) }
  60%  { transform:scale(.96) rotateZ(2deg) }
  100% { transform:scale(1) rotateZ(0) }
}
.cart-fab [data-lucide]{ width:18px; height:18px; stroke-width:2.2 }
.cart-fab .cart-total{
  font-family:'Space Mono',monospace; font-weight:700; font-size:14px;
  margin-left:4px;
}
.cart-fab .cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:24px; height:24px; padding:0 7px;
  background:var(--black); color:var(--white);
  border:2px solid var(--cream); border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-weight:700; font-size:12px;
  line-height:1;
}

/* ─── État vide du panneau ───────────────────────────────────────────────── */
.cart-empty-state{
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:28px 0 20px;
  color:var(--warm-charcoal); text-align:center;
}
.cart-floater.is-empty .cart-empty-state{ display:flex }
.cart-empty-state [data-lucide]{ width:32px; height:32px; stroke-width:1.4; opacity:.4 }
.cart-empty-state p{ font-weight:600; font-size:14px; margin:0 }
.cart-empty-state small{ font-size:12px; opacity:.65 }

/* ─── Panneau panier ─────────────────────────────────────────────────────── */
.cart-panel{
  position:absolute; right:0; top:calc(100% + 14px);
  width:340px; max-width:calc(100vw - 48px);
  background:var(--white); border:1px solid var(--oat);
  border-radius:20px; padding:18px;
  z-index:120;
  box-shadow:
    0 8px 24px rgba(0,0,0,.12),
    0 24px 48px rgba(0,0,0,.10);
  opacity:0; transform:translateY(-8px) scale(.96);
  transform-origin:top right;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-floater.is-open .cart-panel{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.cart-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.cart-panel-head h4{
  font-family:'Fraunces',serif; font-weight:500; font-size:18px;
  letter-spacing:-.01em;
}
.cart-clear{
  background:none; border:none; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:11px;
  color:var(--warm-charcoal); text-transform:uppercase; letter-spacing:.5px;
  padding:4px 8px; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.cart-clear:hover{ background:var(--oat-light); color:var(--black) }

/* Bandeau warning "format minimum" */
.cart-warning{
  display:none; align-items:flex-start; gap:8px;
  padding:10px 12px; margin-bottom:12px;
  background:#fff7d6; border:1px solid #f0d97a; border-radius:10px;
  font-size:12px; line-height:1.4; color:#6b5410;
}
.cart-warning [data-lucide]{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:#b88f17 }
.cart-warning strong{ color:#5a4509 }
.cart-floater.has-mini .cart-warning{ display:flex }

.cart-items{
  list-style:none; margin:0; padding:0;
  max-height:280px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:14px;
}

/* ─── Cross-sell : suggestion produit complémentaire ──────────────────── */
.cart-cross-sell{
  margin-bottom:14px;
  animation:cart-item-in .4s cubic-bezier(.34,1.56,.64,1);
}
.cart-cross-sell-head{
  display:flex; align-items:center; gap:6px;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  color:var(--teal); text-transform:uppercase; letter-spacing:.6px;
  margin-bottom:8px;
}
.cart-cross-sell-head [data-lucide]{ width:13px; height:13px; color:var(--teal) }

.cart-cross-sell-card{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  background:linear-gradient(135deg, var(--teal-light) 0%, #f0fbfa 100%);
  border:1px dashed var(--teal); border-radius:14px;
  position:relative; overflow:hidden;
}
.cart-cross-sell-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at top right, rgba(28,188,180,.12), transparent 60%);
  pointer-events:none;
}
.cart-cross-sell-icon{
  font-size:24px; flex-shrink:0; line-height:1;
}
.cart-cross-sell-body{ flex:1; min-width:0 }
.cart-cross-sell-name{
  font-size:13px; font-weight:700; color:var(--black); margin-bottom:2px;
}
.cart-cross-sell-pitch{
  font-size:11px; color:var(--warm-charcoal); line-height:1.35;
  font-style:italic;
}
.cart-cross-sell-add{
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 11px;
  background:var(--teal); color:var(--white);
  border:none; border-radius:999px; cursor:pointer;
  font-family:'Space Mono',monospace; font-weight:700; font-size:11px;
  flex-shrink:0; position:relative; z-index:1;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.cart-cross-sell-add:hover{
  background:var(--teal-hover);
  transform:scale(1.06) rotateZ(-2deg);
}
.cart-cross-sell-add [data-lucide]{ width:12px; height:12px; stroke-width:3 }
.cart-cross-sell-add.is-added{
  background:#7fb87a; animation:cart-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.cart-cross-sell-add.is-added [data-lucide="plus"]{ display:none }
.cart-cross-sell-add.is-added::before{
  content:'✓'; font-size:13px; line-height:1;
}

.cart-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--oat-light); border-radius:12px;
  animation:cart-item-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cart-item-in{
  0%   { opacity:0; transform:translateX(20px) }
  100% { opacity:1; transform:translateX(0) }
}
.cart-item-info{ display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.cart-item-icon{ font-size:20px; flex-shrink:0 }
.cart-item-name{ font-size:14px; font-weight:600; color:var(--black) }
.cart-item-name-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.cart-item-mini-badge{
  display:inline-flex; align-items:center; gap:3px;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  padding:2px 6px; border-radius:6px;
  background:#fff7d6; color:#8a6e15; border:1px solid #f0d97a;
}
.cart-item-price{
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  color:var(--warm-charcoal);
}
.cart-item-remove{
  background:none; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:50%;
  color:var(--warm-charcoal);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.cart-item-remove:hover{ background:var(--orange-light); color:var(--orange) }
.cart-item-remove [data-lucide]{ width:14px; height:14px }

/* Masque total + checkout + clear quand panier vide */
.cart-floater.is-empty .cart-sum,
.cart-floater.is-empty .cart-checkout,
.cart-floater.is-empty .cart-clear{ display:none }

.cart-sum{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px dashed var(--oat);
  margin-bottom:14px;
}
.cart-sum-label{ font-size:13px; color:var(--warm-charcoal); text-transform:uppercase; letter-spacing:.5px; font-family:'Space Mono',monospace }
.cart-sum-total{
  font-family:'Space Mono',monospace; font-weight:700; font-size:22px;
  color:var(--black);
}
.cart-checkout{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 20px;
  background:var(--black); color:var(--white);
  border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px;
  transition:background .2s ease, transform .2s ease;
}
.cart-checkout:hover{ background:var(--orange); transform:translateY(-1px) }
.cart-checkout [data-lucide]{ width:16px; height:16px }

/* ─── Mobile : panier inline reste visible (l'aside survit à la règle .nav>div display:none) ─ */
@media(max-width:768px){
  .cart-floater{ margin-left:auto }
  .cart-fab{ padding:9px 12px 9px 10px; font-size:13px; gap:6px }
  .cart-fab [data-lucide]{ width:16px; height:16px }
  .cart-fab .cart-total{ font-size:12px }
  .cart-fab .cart-badge{ min-width:18px; height:18px; font-size:10px; top:-4px; right:-4px }
  .cart-panel{ width:280px; padding:14px; right:-30px }
  .btn-cart-mini{ width:26px; height:26px; margin-left:5px }
  .btn-cart-mini [data-lucide]{ width:13px; height:13px }
}