/* ==========================================================================
   vLiteRP — Boutique V2 : rayon Points (coins.php)
   S'ajoute à boutique_v2.css (coque : en-tête, onglets, verrou, panier, F1).
   Mobile d'abord. Fonds rgba simples : aucun backdrop-filter.
   ========================================================================== */

.shopV2--coins #apercu-f1{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* Calque WebGL des packs (assets/coins3d.js) : au-dessus des cartes, sous la barre du site et le panier. */
.coin3dLayer{position:fixed;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:5}

/* ---------- En-tête de la liste ---------- */
.cvPacksSec{min-width:0;display:flex;flex-direction:column;gap:12px}
.cvHead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 14px}
.cvHead>div:first-child{min-width:0}
.cvHead h2{margin-top:6px;font-size:clamp(1.4rem,5vw,1.9rem);letter-spacing:.03em;text-transform:uppercase}
.cvBal{display:inline-flex;align-items:baseline;gap:6px;margin:0;padding:.45rem .8rem;border-radius:10px;border:1px solid var(--sv-line2);background:rgba(1,230,118,.08)}
.cvBal small{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cvBal b{font-family:var(--font-head);font-size:1.3rem;line-height:1;color:var(--neon);font-variant-numeric:tabular-nums}

/* ---------- Cartes des packs ---------- */
.cvPacks{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.cvPack{
  position:relative;min-width:0;display:grid;align-items:center;gap:10px 12px;padding:14px;
  grid-template-columns:60px minmax(0,1fr) auto;grid-template-areas:"art body price" "buy buy buy";
  border-radius:var(--sv-r);border:1px solid var(--sv-line);
  background:linear-gradient(165deg,rgba(1,230,118,.06),rgba(10,15,32,.96) 55%),var(--sv-bg2);
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  animation:svIn .4s var(--ease) backwards;
}
.cvPack.has-desc{grid-template-areas:"art body price" "desc desc desc" "buy buy buy"}
.cvPack:nth-child(2){animation-delay:.04s}
.cvPack:nth-child(3){animation-delay:.08s}
.cvPack:nth-child(4){animation-delay:.12s}
.cvPack:nth-child(n+5){animation-delay:.16s}
.cvPack.is-feat{border-color:rgba(1,230,118,.62);
  background:linear-gradient(165deg,rgba(1,230,118,.12),rgba(10,15,32,.96) 55%),var(--sv-bg2);
  box-shadow:0 0 0 1px rgba(1,230,118,.16),0 16px 40px rgba(0,0,0,.4),0 0 32px rgba(1,230,118,.14)}

.cvArt{grid-area:art;position:relative;width:60px;height:60px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(1,230,118,.2);background:radial-gradient(circle at 50% 42%,rgba(1,230,118,.2),rgba(1,230,118,.03) 70%)}
.cvFlat{position:absolute;left:8%;top:8%;width:84%;height:84%;max-width:none;object-fit:contain;display:block}
.cvFlat+.cvGlyph{display:none}
/* 3D active : la scène est dessinée par le calque, à la place de l'image */
.cvArt.is3d .cvFlat,.cvArt.is3d .cvGlyph{display:none}
.cvGlyph{display:block;width:100%;height:100%}
.cvGlyph .s{fill:#0a4d2c;stroke:rgba(1,230,118,.5);stroke-width:1}
.cvGlyph .t{fill:#0e7443;stroke:#01e676;stroke-width:1.2}
.cvGlyph .r{fill:none;stroke:rgba(210,255,232,.7);stroke-width:1}

.cvBody{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:5px}
/* étiquettes en bandeau sur le bord haut de la carte : le contenu reste aligné d'une carte à l'autre */
.cvTags{position:absolute;top:-11px;left:14px;z-index:1;display:flex;flex-wrap:nowrap;gap:5px;max-width:calc(100% - 28px)}
.cvTag{min-width:0;max-width:100%;padding:.14rem .5rem;border-radius:999px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;line-height:1.45;text-transform:uppercase}
.cvTag.feat{flex-shrink:0;border:1px solid rgba(1,230,118,.55);background:#072417;color:var(--neon)}
.cvTag.bonus{border:1px solid var(--neon);background:var(--neon);color:#04120a}
.cvAmt{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:var(--font-head);line-height:1;color:#fff}
.cvAmt b{font-size:1.75rem;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,255,255,.14)}
.cvAmt span{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}
.cvName{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);overflow-wrap:anywhere}

.cvPrice{grid-area:price;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cvPrice b{font-family:var(--font-head);font-size:1.35rem;font-weight:700;line-height:1.1;white-space:nowrap;color:var(--neon);
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(1,230,118,.3)}
.cvPrice small{max-width:16ch;font-size:.7rem;line-height:1.35;color:var(--muted)}
.cvDesc{grid-area:desc;margin:0;font-size:.84rem;line-height:1.5;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.cvBuy{grid-area:buy;min-width:0;display:flex}
.cvBuy>*{flex:1;min-width:0}

.cvNote{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted)}
.cvEmpty{margin:0;padding:24px 16px;border-radius:var(--sv-r);border:1px dashed rgba(255,255,255,.16);text-align:center;color:var(--muted)}

/* ---------- Où dépenser ses points ---------- */
.cvSpend{min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--sv-r);border:1px solid var(--sv-line);background:var(--sv-bg)}
.cvSpendHead{display:flex;align-items:flex-start;gap:12px}
.cvSpendHead>div{min-width:0}
.cvSpendIc{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;color:var(--neon);
  border:1px solid rgba(1,230,118,.32);background:rgba(1,230,118,.1)}
.cvSpendIc svg{width:20px;height:20px}
.cvSpendHead h2{font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase}
.cvSpendHead p{margin:4px 0 0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.cvCats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cvCats li{min-width:0;max-width:100%}
.cvCats a{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:40px;padding:.4rem .75rem;border-radius:999px;
  border:1px solid var(--sv-line);background:rgba(255,255,255,.03);font-size:.82rem;font-weight:600;color:rgba(255,255,255,.84);overflow-wrap:anywhere;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.cvCats a:hover{border-color:rgba(1,230,118,.45);background:rgba(1,230,118,.06);color:#fff}
.cvCats b{flex-shrink:0;padding:0 .42rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--neon)}
.cvSpendGo{width:100%}

/* ==========================================================================
   Écrans plus larges : cartes verticales, visuel en haut
   ========================================================================== */
@media (min-width:561px){
  .cvPacks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .cvPack{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"art" "body" "price" "buy";
    align-items:start;text-align:center}
  .cvPack.has-desc{grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"art" "body" "desc" "price" "buy"}
  .cvArt{width:100%;height:auto;aspect-ratio:4/3}
  .cvGlyph{width:52%;height:auto}
  .cvBody{align-items:center}
  .cvTags{left:50%;transform:translateX(-50%)}
  .cvAmt{flex-direction:row;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 6px}
  .cvAmt b{font-size:2.05rem}
  .cvPrice{align-items:center;text-align:center;align-self:end;padding-top:8px;border-top:1px solid var(--sv-line)}
  .cvPrice small{max-width:none}
  .cvDesc{align-self:start}
}
@media (min-width:761px){
  .cvPacks{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  /* 1, 2 ou 4 packs : cartes en largeur (visuel à gauche) sur deux colonnes */
  .cvPacks.is-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cvPacks.is-solo{grid-template-columns:minmax(0,560px)}
  /* montant en haut, prix en bas de la colonne de droite, bouton sur toute la largeur */
  .cvPacks.is-duo .cvPack,.cvPacks.is-solo .cvPack{grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"art body" "art price" "buy buy";align-items:start;text-align:left;column-gap:16px}
  .cvPacks.is-duo .cvPack.has-desc,.cvPacks.is-solo .cvPack.has-desc{grid-template-rows:auto 1fr auto auto;grid-template-areas:"art body" "art desc" "art price" "buy buy"}
  .cvPacks.is-duo .cvArt,.cvPacks.is-solo .cvArt{align-self:center}
  .cvPacks.is-duo .cvBody,.cvPacks.is-solo .cvBody{align-items:flex-start}
  .cvPacks.is-duo .cvPack:not(.has-desc) .cvPrice,.cvPacks.is-solo .cvPack:not(.has-desc) .cvPrice{align-self:end}
  .cvPacks.is-duo .cvTags,.cvPacks.is-solo .cvTags{left:14px;transform:none}
  .cvPacks.is-duo .cvAmt,.cvPacks.is-solo .cvAmt{justify-content:flex-start}
  .cvPacks.is-duo .cvPrice,.cvPacks.is-solo .cvPrice{align-items:flex-start;text-align:left}
  .cvPack:hover{transform:translateY(-3px);border-color:rgba(1,230,118,.5);box-shadow:0 20px 44px rgba(0,0,0,.45),0 0 28px rgba(1,230,118,.12)}
  .cvPack.is-feat:hover{border-color:rgba(1,230,118,.8)}
  .cvSpend{padding:20px 22px}
  .cvSpendGo{width:auto;align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .cvPack,.cvPack:hover{animation:none;transform:none!important}
}