/* ============================================================
   CARTE FLIP PRODUIT - aperçu rapide
   Mécanique reprise de ~/Downloads/carte-flip-joueur/ (extraite de
   generationzidane.fr), portée en JS/CSS pur (sans React) et
   adaptée aux fiches produit Factor X. Voir flip-card.js.

   Reprend les variables du design system Factor X définies dans
   assets/style.css (--black, --card, --border, --gold, --gold-light,
   --white, --gray, --gray-light, --heading, --body, --radius) :
   ce fichier n'introduit aucune nouvelle variable de couleur.
   ============================================================ */

/* ---------- Ouverture / fermeture ---------- */
@keyframes fcFadeIn { from{opacity:0} to{opacity:1} }
@keyframes fcPopCenter {
  0%   { transform:translate(var(--dx),var(--dy)) scale(var(--s0)) rotateY(0deg) }
  100% { transform:translate(0,0) scale(1) rotateY(720deg) }
}
.popcard-back {
  position:fixed; inset:0; z-index:900;
  background:rgba(5,5,5,.88);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:fcFadeIn .22s ease both;
}
.popcard-persp { perspective:1500px; }
.popcard {
  width:min(480px,92vw); height:min(680px,86vh);
  cursor:pointer; transform-style:preserve-3d; will-change:transform;
  animation:fcPopCenter .95s cubic-bezier(.215,.61,.355,1) backwards;
}
.popcard-close {
  position:absolute; top:-14px; right:-14px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:var(--black); color:var(--white);
  font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.popcard-close:hover { border-color:var(--gold); color:var(--gold); }

/* ---------- Effet brillance (liseré doré qui pulse + reflet diagonal) ---------- */
@keyframes fcRimGlow {
  0%,100% { box-shadow:0 26px 64px rgba(0,0,0,.6), 0 0 0 0 rgba(201,168,76,0) }
  50%     { box-shadow:0 26px 64px rgba(0,0,0,.6), 0 0 46px 10px var(--gold) }
}
@keyframes fcShineSweep {
  0%   { transform:translate(-60%,-60%) rotate(25deg) }
  100% { transform:translate(60%,60%) rotate(25deg) }
}
.popcard .popface { animation:fcRimGlow 1.6s ease-in-out .95s 1 backwards; }
.popface.front::after {
  content:''; position:absolute; inset:-40%; pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);
  transform:translate(-60%,-60%) rotate(25deg);
  animation:fcShineSweep 1.1s ease-in-out 1.05s 1 backwards;
}
@media (prefers-reduced-motion: reduce) {
  .popcard .popface { animation:none; }
  .popface.front::after { animation:none; display:none; }
  .popcard { animation:fcPop .3s ease both; }
}
@keyframes fcPop { from{transform:scale(.94);opacity:0} to{transform:none;opacity:1} }

/* ---------- Mécanique du flip (clic = retournement 3D) ---------- */
.popcard-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.45,.05,.2,1);
}
.popcard-inner.flipped { transform:rotateY(180deg); }
.popface {
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 26px 64px rgba(0,0,0,.6);
  background:linear-gradient(160deg,var(--card),var(--black) 70%);
  border:1px solid var(--border);
}
.popcard-inner:not(.flipped) .popface.back { display:none; }
.popcard-inner.flipped .popface { -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.popcard-inner.flipped .popface.front { display:none; }
.popface.back { transform:rotateY(180deg); }

/* Accent par catégorie, mêmes teintes que .product-img[data-cat] */
.popface[data-cat="solo"]        { border-color:rgba(201,168,76,.35); }
.popface[data-cat="couple"]      { border-color:rgba(196,93,62,.4); }
.popface[data-cat="accessoires"] { border-color:rgba(212,168,67,.4); }

/* ---------- Recto : icône + nom + prix ---------- */
.popface.front {
  align-items:center; justify-content:center; text-align:center;
  padding:1.6rem 1.4rem; gap:.4rem;
  background:
    radial-gradient(circle at 50% 38%,rgba(201,168,76,.18),transparent 62%),
    linear-gradient(160deg,var(--card),var(--black) 70%);
}
.popface.front[data-cat="couple"] {
  background:
    radial-gradient(circle at 50% 38%,rgba(196,93,62,.22),transparent 62%),
    linear-gradient(160deg,var(--card),var(--black) 70%);
}
.popface.front[data-cat="accessoires"] {
  background:
    radial-gradient(circle at 50% 38%,rgba(212,168,67,.22),transparent 62%),
    linear-gradient(160deg,var(--card),var(--black) 70%);
}
.pc-badge {
  position:absolute; top:1rem; left:1rem; background:var(--gold); color:var(--black);
  font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:3px; z-index:2;
}
.pc-icon { font-size:5.5rem; line-height:1; filter:drop-shadow(0 4px 18px rgba(0,0,0,.55)); margin-bottom:.6rem; }
.pc-nm { font-family:var(--heading); font-size:1.5rem; color:var(--white); }
.pc-cl { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:.3rem; }
.pc-hint { font-size:.72rem; color:var(--gray); margin-top:1.4rem; }

/* Variante avec une vraie photo produit : image plein cadre, texte ancré
   en bas sur un voile dégradé (même principe que .pc-nm sur les cartes
   catalogue, cf. .product-img img dans assets/style.css). */
.popface.front.has-photo {
  justify-content:flex-end; padding:0 1.4rem 1.3rem;
  background:linear-gradient(160deg,var(--card),var(--black) 70%);
}
.pc-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.popface.front.has-photo::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88) 100%);
}
.popface.front.has-photo .pc-nm,
.popface.front.has-photo .pc-cl,
.popface.front.has-photo .pc-hint { position:relative; z-index:2; }
.popface.front.has-photo .pc-hint { margin-top:.6rem; }

/* ---------- Verso : résumé + specs + actions ---------- */
.popface.back { padding:1.5rem 1.4rem 1.3rem; justify-content:flex-start; gap:.7rem; overflow-y:auto; }
.ps-head { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.ps-name { font-family:var(--heading); font-size:1.15rem; color:var(--white); line-height:1.15; }
.ps-num { font-family:var(--heading); font-size:1.15rem; color:var(--gold); white-space:nowrap; }
.ps-resume { font-size:.82rem; color:var(--gray-light); font-weight:300; line-height:1.6; }
.ps-specs { list-style:none; display:flex; flex-direction:column; gap:.4rem; margin:.2rem 0; }
.ps-specs li {
  font-size:.76rem; color:var(--gray-light); font-weight:300; line-height:1.4;
  padding-left:1rem; position:relative;
}
.ps-specs li::before { content:'◇'; position:absolute; left:0; top:0; color:var(--gold); font-size:.65rem; }
.ps-add { margin-top:auto; width:100%; }
.ps-fiche { display:block; text-align:center; font-size:.72rem; letter-spacing:.08em; color:var(--gold); text-decoration:none; padding-top:.2rem; }
.ps-fiche:hover { text-decoration:underline; }

@media (max-width:480px) {
  .pc-icon { font-size:4.6rem; }
  .ps-resume, .ps-specs li { font-size:.74rem; }
}