/* ==========================================================================
   Monde Apicole — Cartes produits premium (portées de "MondeApicole1").
   100 % CLOISONNÉ sous .pcxp (grille conteneur). Tokens locaux, keyframes
   préfixés pcx-. N'affecte aucun autre style. Garde le dynamique + panier :
   le bouton .add-btn.btn-add-cart déclenche Panier.add, clic carte → fiche.
   ========================================================================== */

.pcxp {
  --honey:#F9BC38; --honey-2:#F0A21E; --ink:#0B0B0A;
  --surface:#FFFFFF; --surface-2:#FFF8E8; --border:#EFE3C6; --muted:#7A705C; --text:#14120E;
  --accent:#A86C00; --honey-soft:#FFF0C7;
  --grad-honey:linear-gradient(135deg,#FFD46B 0%,#F9BC38 45%,#F0A21E 100%);
  --hex:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M0 8.08L14 0l14 8.08v16.17L14 32.33 0 24.25zM14 32.33V48.5' fill='none' stroke='%23F9BC38' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E");
  --r-lg:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --shadow-c:rgb(122 80 0 / .18);

  display:grid; grid-template-columns:repeat(auto-fill, minmax(245px,1fr)); gap:1.6rem;
}

.pcxp .i { width:1em; height:1em; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* perspective wrapper — neutralise les fuites de style.css .product-card */
.pcxp .product-card { perspective:1100px; cursor:pointer; animation:pcx-card-in .6s var(--ease) both;
  background:none; border:0; border-radius:0; overflow:visible; box-shadow:none; padding:0; }
.pcxp .product-card:hover { transform:none; box-shadow:none; border-color:transparent; }
.pcxp .pc-inner {
  position:relative; height:100%; display:flex; flex-direction:column; padding:.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transform-style:preserve-3d;
  transition:transform .7s var(--spring), box-shadow .5s var(--ease), border-color .3s;
}
.pcxp .product-card:hover .pc-inner {
  transform:rotateX(8deg) rotateY(-8deg) translateY(-10px);
  box-shadow:18px 40px 60px -30px var(--shadow-c); border-color:rgb(249 188 56 / .6);
}
.pcxp .pc-media {
  position:relative; display:grid; place-items:center; aspect-ratio:1;
  border-radius:calc(var(--r-lg) - 8px); transform-style:preserve-3d; overflow:hidden;
  background:
    radial-gradient(circle at 50% 62%, var(--honey-soft) 0 38%, transparent 70%),
    var(--pattern), var(--surface-2);
}
.pcxp .pc-media img { width:84%; transition:transform .7s var(--spring); filter:drop-shadow(0 18px 16px rgb(0 0 0 / .18)); }
.pcxp .pc-media .pc-emoji { font-size:4.5rem; line-height:1; transition:transform .7s var(--spring); }
.pcxp .product-card:hover .pc-media img,
.pcxp .product-card:hover .pc-media .pc-emoji { transform:translateZ(70px) rotateY(12deg) rotateZ(-3deg); }
.pcxp .pc-media::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .38) 50%, transparent 62%) no-repeat;
  background-size:260% 100%; background-position:140% 0; transition:background-position 1s var(--ease);
}
.pcxp .product-card:hover .pc-media::after { background-position:-40% 0; }

.pcxp .pc-badges { position:absolute; top:.8rem; left:.8rem; display:flex; flex-direction:column;
  align-items:flex-start; gap:.35rem; transform:translateZ(30px); z-index:2; }
.pcxp .badge {
  position:static; top:auto; left:auto; right:auto;
  display:inline-block; padding:.32rem .7rem; border-radius:999px;
  font:800 .68rem/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  background:var(--ink); color:var(--honey); white-space:nowrap;
}
.pcxp .badge.honey { background:var(--grad-honey); color:var(--ink); }
.pcxp .badge.sale { background:#D9412B; color:#fff; }
.pcxp .badge.new { background:#2E8B57; color:#fff; }

.pcxp .pc-body { display:flex; flex-direction:column; gap:.35rem; padding:1rem .5rem .4rem; flex:1; }
.pcxp .pc-cat { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.pcxp .pc-title { font-size:1.06rem; margin:0; line-height:1.3; color:var(--text); font-family:var(--font-display); font-weight:700; }
.pcxp .pc-desc { font-size:.87rem; color:var(--muted); margin:0; }

.pcxp .stars { color:var(--honey-2); letter-spacing:1px; font-size:.9rem; white-space:nowrap; }
.pcxp .rating { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); }
.pcxp .stock { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:#2E8B57; font-weight:600; }
.pcxp .stock::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgb(46 139 87 / .2); }
.pcxp .stock.low { color:#D9822B; }
.pcxp .stock.low::before { box-shadow:0 0 0 3px rgb(217 130 43 / .2); }

.pcxp .pc-foot { display:flex; align-items:end; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.7rem; }
.pcxp .price { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.pcxp .price strong { font:800 1.2rem/1 var(--font-display); color:var(--text); letter-spacing:-.01em; }
.pcxp .price strong small { font-size:.7em; font-weight:700; color:var(--accent); margin-left:.2em; }
.pcxp .price s { color:var(--muted); font-size:.85rem; }

.pcxp .add-btn {
  position:relative; z-index:2; display:grid; place-items:center; width:48px; height:54px; flex:none;
  clip-path:var(--hex); background:var(--ink); color:var(--honey); border:none; cursor:pointer;
  transform:translateZ(40px); transition:background-color .25s, color .25s, transform .5s var(--spring);
}
.pcxp .add-btn .i { width:21px; height:21px; }
.pcxp .add-btn:hover { background:var(--grad-honey); color:var(--ink); transform:translateZ(40px) rotate(30deg) scale(1.08); }

/* ---------- Vue liste (boutique : .shop-grid.pcxp.list-view) ---------- */
.pcxp.list-view { grid-template-columns:1fr; }
.pcxp.list-view .pc-inner { flex-direction:row; align-items:center; gap:1rem; }
.pcxp.list-view .pc-media { width:190px; flex:none; }
.pcxp.list-view .pc-body { padding:.5rem 1rem .5rem 0; }
.pcxp.list-view .product-card:hover .pc-inner { transform:rotateX(4deg) translateY(-6px); }
@media (max-width:560px) { .pcxp.list-view .pc-media { width:110px; } }

@keyframes pcx-card-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

/* ---------- Responsive ---------- */
@media (max-width:560px) {
  .pcxp { grid-template-columns:repeat(2, 1fr); gap:.9rem; }
  .pcxp .pc-inner { padding:.5rem; border-radius:20px; }
  .pcxp .pc-body { padding:.7rem .3rem .2rem; }
  .pcxp .pc-title { font-size:.95rem; }
  .pcxp .pc-media .pc-emoji { font-size:3.2rem; }
  .pcxp .price strong { font-size:1rem; }
  .pcxp .add-btn { width:42px; height:48px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcxp .product-card { animation:none; }
  .pcxp .product-card:hover .pc-inner,
  .pcxp .product-card:hover .pc-media img,
  .pcxp .product-card:hover .pc-media .pc-emoji { transform:none; }
}