/* ==========================================================================
   vLiteRP — Boutique V2 : coque commune (boutique.php, coins.php, vip.php)
   En-tête, onglets des rayons, carte « qui reçoit l'achat », verrou
   d'identification, avis, panier (colonne sur ordinateur, barre collante +
   panneau sur téléphone), boutons d'achat, voile de paiement, aperçu du menu
   F1 et blocs de la page d'accueil de la boutique.
   Mobile d'abord. Fonds rgba simples : aucun backdrop-filter.
   S'appuie sur site.css (--neon, --font-head, .btn, .kicker, .statusDot…).
   Le balisage vient de partials/shop_identity.php (classes préfixées « sv »).
   (assets/shop_v2.css est la feuille du panel « Gestion Shop » : sans rapport.)
   ========================================================================== */

:root{
  --sv-gold:#ffd166;
  --sv-bg:rgba(9,13,28,.88);
  --sv-bg2:#0a1020;
  --sv-line:rgba(255,255,255,.08);
  --sv-line2:rgba(1,230,118,.28);
  --sv-gold-line:rgba(255,209,102,.38);
  --sv-r:14px;
  --sv-r-sm:10px;
}

/* main.page crée sinon un contexte d'empilement (z-index:1) sous le pied de page (z-index:10) :
   la barre du panier, fixée en bas d'écran, passerait derrière lui. */
main.page{z-index:auto}
/* Gouttière 16 px sur téléphone (site.css en met 14) */
@media (max-width:760px){
  main.page{padding-left:16px;padding-right:16px}
}

/* ---------- Socle ---------- */
.shopV2{display:flex;flex-direction:column;gap:14px;min-width:0}
.shopV2 [hidden]{display:none!important}
.shopV2 form{margin:0}
.shopV2 h1,.shopV2 h2,.shopV2 h3{overflow-wrap:anywhere}
.shopV2 .card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--sv-bg);margin-top:0}
.shopV2 .btn{justify-content:center;min-height:46px;text-align:center}
.shopV2 .btn.sm{min-height:38px}
.shopV2 .btn svg,.svCart .btn svg{width:16px;height:16px;flex-shrink:0}
.shopV2 .btn.off,.svCart .btn.off{opacity:.55;pointer-events:none;cursor:not-allowed;transform:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.7);box-shadow:none}
/* lien vers la connexion Discord à la place de « Ajouter » pour un grade VIP */
.shopV2 .btn.off.vipLock{opacity:1;pointer-events:auto;cursor:pointer;background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.5);color:var(--sv-gold)}
.shopV2 .btn.off.vipLock:hover{background:rgba(255,209,102,.16);box-shadow:0 0 20px rgba(255,209,102,.16)}
.shopV2 .svGoldBtn{border-color:rgba(255,209,102,.4);color:var(--sv-gold);background:rgba(255,209,102,.06)}
.shopV2 .svGoldBtn:hover{border-color:rgba(255,209,102,.7);background:rgba(255,209,102,.12);color:#fff;box-shadow:0 0 22px rgba(255,209,102,.14)}
.shopV2 a:focus-visible,.shopV2 button:focus-visible,.shopV2 input:focus-visible,.shopV2 [tabindex]:focus-visible,
.svCart a:focus-visible,.svCart button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.svAccent{color:var(--neon);text-shadow:0 0 22px rgba(1,230,118,.3)}
@keyframes svIn{from{opacity:0;transform:translateY(6px)}}
@keyframes svFade{from{opacity:0}}
@keyframes svPulse{0%{box-shadow:0 0 0 0 rgba(1,230,118,.5)}100%{box-shadow:0 0 0 14px rgba(1,230,118,0)}}
@keyframes svSpin{to{transform:rotate(360deg)}}

/* ---------- En-tête ---------- */
.svHead{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--sv-r);border:1px solid var(--sv-line2);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(1,230,118,.15),transparent 55%),
    linear-gradient(160deg,rgba(14,22,46,.97),rgba(7,10,22,.97));
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.svHead:after{content:"";position:absolute;top:12px;left:12px;width:20px;height:20px;pointer-events:none;z-index:2;
  border-top:1px solid rgba(1,230,118,.45);border-left:1px solid rgba(1,230,118,.45)}
.svHead--vip{border-color:var(--sv-gold-line);
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,209,102,.15),transparent 55%),linear-gradient(160deg,rgba(22,20,40,.97),rgba(8,9,22,.97))}
.svHead--vip:after{border-color:rgba(255,209,102,.5)}
.svHead--vip .svAccent{color:var(--sv-gold);text-shadow:0 0 22px rgba(255,209,102,.3)}
.svHead--vip .kicker{color:rgba(255,209,102,.85)}
.svHead--vip .kicker:before{background:rgba(255,209,102,.6);box-shadow:0 0 10px rgba(255,209,102,.4)}

/* pièce 3D (assets/shop3d.js, grand écran seulement) ; sinon un halo fixe */
#shopScene.svScene{position:absolute;inset:0;z-index:0;opacity:1;
  background:radial-gradient(360px 240px at 92% 18%,rgba(1,230,118,.14),transparent 70%)}
#shopScene.svScene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
#shopScene.svScene.ready canvas{opacity:1}
#shopScene.svScene.fallback{animation:none}

.svHeadIn{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 16px 16px}
.svHeadMain{min-width:0;display:flex;flex-direction:column;gap:12px}
.svKicker{flex-wrap:wrap;row-gap:4px}
.svKicker a{color:inherit;text-decoration:underline;text-decoration-color:rgba(1,230,118,.4);text-underline-offset:3px}
.svKicker a:hover{color:#fff}
.svKSep{opacity:.55}
.svHead h1{margin:0;font-size:clamp(2rem,8.4vw,3.6rem);line-height:.98;letter-spacing:.02em}
.svLead{margin:0;max-width:58ch;color:var(--muted);font-size:.95rem;line-height:1.65}
.svTrust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svTrust li{display:inline-flex;align-items:center;gap:7px;padding:.42rem .75rem;border-radius:999px;border:1px solid var(--sv-line);
  background:rgba(255,255,255,.03);font-size:.8rem;line-height:1.2;color:rgba(255,255,255,.84)}
.svTrust svg{width:14px;height:14px;flex-shrink:0;color:var(--neon)}
.svHeadSide{min-width:0;display:flex;align-items:flex-end}
.svHeadSide>*{width:100%}

/* ---------- Carte « qui reçoit l'achat » ---------- */
.svWho{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px 14px;
  border-radius:var(--sv-r-sm);border:1px solid var(--sv-line2);background:rgba(1,230,118,.07)}
.svWho.is-guest{border-style:dashed;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.svWhoAv{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:#04120a;background:var(--neon);box-shadow:0 0 18px rgba(1,230,118,.32)}
.svWho.is-guest .svWhoAv{color:var(--muted);background:rgba(255,255,255,.06);box-shadow:none}
.svWhoAv svg{width:20px;height:20px}
.svWhoTxt{min-width:0;display:flex;flex-direction:column;gap:2px}
.svWhoK{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(1,230,118,.85)}
.svWho.is-guest .svWhoK{color:var(--text-dim)}
.svWhoN{font-family:var(--font-head);font-size:1.12rem;font-weight:700;line-height:1.15;color:#fff;overflow-wrap:anywhere}
.svWhoM{font-size:.78rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.svWhoM b{color:#fff;font-weight:600}
.svWhoAct{display:flex;gap:8px;margin:0}
@media (max-width:420px){
  .svWhoAct{grid-column:1/-1}
  .svWhoAct .btn{width:100%}
}

/* ---------- Onglets des rayons ---------- */
.svTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border-radius:var(--sv-r);
  border:1px solid var(--sv-line);background:rgba(8,12,26,.86)}
.svTab{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:46px;padding:.55rem .5rem;border-radius:10px;
  border:1px solid transparent;color:var(--text-muted);font-family:var(--font-head);font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.svTab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svTab svg{width:18px;height:18px;flex-shrink:0;color:rgba(1,230,118,.75)}
.svTab--vip svg{color:rgba(255,209,102,.8)}
.svTab:hover{color:#fff;background:rgba(255,255,255,.04)}
.svTab.is-on{color:#fff;border-color:rgba(1,230,118,.5);background:rgba(1,230,118,.12);box-shadow:0 0 22px rgba(1,230,118,.12)}
.svTab.is-on svg{color:var(--neon)}
.svTab--vip.is-on{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.12);box-shadow:0 0 22px rgba(255,209,102,.12)}
.svTab--vip.is-on svg{color:var(--sv-gold)}
/* téléphone : icône au-dessus du libellé, le mot entier tient dans le tiers de largeur */
@media (max-width:420px){.svTab{flex-direction:column;gap:3px;min-height:54px;padding:.45rem .25rem;font-size:.74rem;letter-spacing:.08em}.svTab svg{width:17px;height:17px}}

/* ---------- Avis ---------- */
.svNotices{display:flex;flex-direction:column;gap:10px}
.svNote{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--sv-r-sm);
  border:1px solid rgba(1,230,118,.34);background:rgba(1,230,118,.07);font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.86)}
.svNote>div{min-width:0;overflow-wrap:anywhere;padding-top:2px}
.svNote b{color:#fff}
.svNote a{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
.svNoteIc{width:26px;height:26px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--neon);background:rgba(1,230,118,.14)}
.svNoteIc svg{width:15px;height:15px}
.svNote.warn{border-color:rgba(255,196,84,.38);background:rgba(255,196,84,.08)}
.svNote.warn .svNoteIc{color:var(--warn);background:rgba(255,196,84,.15)}
.svNote.err{border-color:rgba(255,107,107,.42);background:rgba(255,107,107,.08)}
.svNote.err .svNoteIc{color:var(--danger);background:rgba(255,107,107,.15)}
/* bandeau « paiement indisponible » (app/shop.php) : il porte une marge en ligne */
.svNotices>.card{margin-top:0!important;padding:16px}
.svNotices>.card .btn{width:100%}

/* ---------- Disposition catalogue + panier ---------- */
.svLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.svMain{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---------- Verrou d'identification ---------- */
.svLockWrap{display:flex;flex-direction:column;gap:12px}
.svLockCard{position:relative;padding:20px 16px;border-radius:var(--sv-r);border:1px solid rgba(1,230,118,.38);
  background:linear-gradient(160deg,rgba(1,230,118,.09),rgba(9,13,28,.97) 55%);
  box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 40px rgba(1,230,118,.08);scroll-margin-top:calc(var(--nav-h) + 12px)}
.svLockTop{display:flex;align-items:center;gap:12px}
.svLockTop>div{min-width:0}
.svLockIc{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;color:var(--neon);
  border:1px solid rgba(1,230,118,.4);background:rgba(1,230,118,.1);box-shadow:0 0 22px rgba(1,230,118,.16)}
.svLockIc svg{width:22px;height:22px}
.svLockCard h2{margin-top:4px;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase}
.svLockSub{margin:12px 0 0;max-width:62ch;color:var(--muted);font-size:.9rem;line-height:1.6}
.svLockCard .svNote{margin-top:12px}
.svLockOpts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
.svLockOpt{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--sv-r-sm);border:1px solid var(--sv-line);background:rgba(255,255,255,.03)}
.svOptK{font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(1,230,118,.88)}
.svOptD,label.svOptD{display:block;margin:0;font-family:var(--font-body);font-size:.85rem;font-weight:400;letter-spacing:0;line-height:1.5;text-transform:none;color:var(--muted)}
.svLockOpt .btn{width:100%;margin-top:auto}
.svPermRow{display:flex;flex-direction:column;gap:8px}
.svPermRow input{min-height:48px;font-size:1rem}
.svLockOr{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.svLockOr:before,.svLockOr:after{content:"";flex:1;height:1px;background:var(--sv-line)}
.svLockedK{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-family:var(--font-head);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.svLockedK:after{content:"";flex:1;height:1px;background:var(--sv-line)}
.svLocked{opacity:.42;filter:grayscale(.4);pointer-events:none;user-select:none}

/* ---------- Boutons d'achat ---------- */
.svAdd{display:flex;width:100%}
.svAdd .btn{flex:1}
.shopV2 .svBuy{width:100%}
.svBuyForm{display:flex;width:100%}
.svAdd.inCart .btn{background:rgba(1,230,118,.16);border-color:rgba(1,230,118,.65);color:#fff;box-shadow:0 0 18px rgba(1,230,118,.14)}

/* ==========================================================================
   Panier
   Sans JavaScript : une carte dans la page. Avec (html.svJs) : barre collante
   + panneau. Sur ordinateur, à côté du catalogue (.svLayout > .svCart) : colonne.
   ========================================================================== */
.svCart{min-width:0}
.svCartBar,.svCartBack,.svCartClose{display:none}
.svCartPanel{border-radius:var(--sv-r);border:1px solid var(--sv-line2);padding:16px;
  background:linear-gradient(170deg,rgba(1,230,118,.08),var(--sv-bg2) 42%);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.svCartPanel:focus{outline:none}
.svCartHead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.svCartHead b{flex:1;min-width:0;font-family:var(--font-head);font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.svCartIc{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;color:var(--neon);background:rgba(1,230,118,.12);border:1px solid rgba(1,230,118,.3)}
.svCartIc svg{width:18px;height:18px}
.svCartN{min-width:26px;padding:2px 8px;border-radius:999px;text-align:center;font-family:var(--font-head);font-size:.82rem;font-weight:700;background:var(--neon);color:#04120a}
.svCartClose{width:42px;height:42px;flex-shrink:0;place-items:center;border-radius:10px;border:1px solid var(--sv-line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.svCartClose svg{width:18px;height:18px}
.svCartClose:hover{border-color:rgba(255,255,255,.25)}
.svCartEmpty{padding:10px 6px 4px;text-align:center;color:var(--muted);font-size:.86rem;line-height:1.55}
.svCartEmpty p{margin:0}
.svCartEmpty b{color:#fff}
.svCartEmptyIc{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:50%;color:rgba(1,230,118,.6);background:rgba(1,230,118,.06);border:1px dashed rgba(1,230,118,.3)}
.svCartEmptyIc svg{width:24px;height:24px}
.svCartList{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.svCItem{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--sv-line);background:rgba(0,0,0,.24)}
.svCThumb{width:44px;height:44px;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:rgba(1,230,118,.7);background:rgba(1,230,118,.08);border:1px solid rgba(1,230,118,.18)}
.svCThumb img{width:100%;height:100%;object-fit:contain;display:block}
.svCThumb svg{width:22px;height:22px}
.svCMain{min-width:0;display:flex;flex-direction:column;gap:4px}
.svCName{font-size:.92rem;font-weight:600;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.svCMeta{font-size:.75rem;line-height:1.35;color:var(--muted)}
.svQty{display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.svQBtn{width:36px;height:36px;border-radius:9px;border:1px solid rgba(1,230,118,.34);background:rgba(1,230,118,.1);color:#fff;font:inherit;font-size:1.1rem;font-weight:700;line-height:1;cursor:pointer}
.svQBtn:hover{background:rgba(1,230,118,.22)}
.svQN{min-width:22px;text-align:center;font-family:var(--font-head);font-weight:700;color:#fff}
.svQN.one{display:inline-block;text-align:left;font-size:.85rem;color:var(--muted)}
.svCEnd{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.svCLine{font-family:var(--font-head);font-weight:700;white-space:nowrap;color:var(--neon);font-variant-numeric:tabular-nums}
.svCDel{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(255,107,107,.32);background:rgba(255,107,107,.08);color:#ffb3b3;cursor:pointer}
.svCDel svg{width:16px;height:16px}
.svCDel:hover{background:rgba(255,107,107,.2);color:#fff}
.svCartSum{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding-top:10px;border-top:1px solid var(--sv-line)}
.svCsRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--muted)}
.svCsRow b{color:#fff;font-variant-numeric:tabular-nums}
.svCsRow.total b{font-family:var(--font-head);font-size:1.55rem;color:var(--neon);text-shadow:0 0 14px rgba(1,230,118,.35)}
.svCartWarn{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--sv-gold-line);background:rgba(255,209,102,.07);font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.86)}
.svCartWarn a{color:var(--sv-gold);text-decoration:underline;text-underline-offset:3px}
.svPayForm{display:flex}
.svCart .svPay{width:100%;min-height:52px;justify-content:center;font-size:.9rem}
.svCartTo{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted)}
.svCartTo b{color:#fff}
.svCartTo.warn{color:var(--warn)}
.svCartTo a{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
.svClear{margin-top:4px}
.svCartClear{display:block;width:100%;min-height:40px;padding:.5rem;border:0;background:none;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.svCartClear:hover{color:#fff}
.svCart.isBusy .svCartPanel{opacity:.7;pointer-events:none}
.svCart.justChanged .svCartPanel{animation:svPulse .7s ease-out}
.svCart.justChanged .svCartBar{animation:svPulse .7s ease-out}

/* --- Barre collante + panneau (JavaScript actif) --- */
html.svJs .svCartBar{
  position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:940;
  display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 8px 8px 10px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(1,230,118,.6);background:#06120e;color:#fff;font:inherit;text-align:left;
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 26px rgba(1,230,118,.18);
}
html.svJs .svCart[data-count="0"] .svCartBar{display:none}
.svBarIc{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;color:#04120a;background:var(--neon)}
.svBarIc svg{width:20px;height:20px}
.svBarTxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-head);font-size:.98rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.svBarTxt i{font-style:normal;margin:0 .4em;color:rgba(255,255,255,.4)}
.svBarTxt b{color:var(--neon);letter-spacing:.02em}
.svBarGo{flex-shrink:0;padding:.5rem .7rem;border-radius:9px;border:1px solid rgba(1,230,118,.45);background:rgba(1,230,118,.14);font-family:var(--font-head);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
html.svJs .svCartBack{display:block;position:fixed;inset:0;z-index:950;background:rgba(2,5,12,.74);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility 0s linear .25s}
html.svJs .svCart.is-open .svCartBack{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
html.svJs .svCartClose{display:grid}
html.svJs .svCartPanel{
  position:fixed;left:0;right:0;bottom:0;z-index:960;
  max-height:min(86vh,calc(100vh - var(--nav-h) - 10px));overflow-y:auto;overscroll-behavior:contain;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;border-bottom:0;
  background:linear-gradient(170deg,rgba(1,230,118,.09),var(--sv-bg2) 38%),var(--sv-bg2);
  transform:translateY(102%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s;
}
html.svJs .svCart.is-open .svCartPanel{transform:none;visibility:visible;transition:transform .3s var(--ease)}
@media (max-width:760px){
  html.svCartOpen body{overflow:hidden}
}
@media (min-width:761px){
  /* sur ordinateur : pastille compacte (icône, nombre, total) pour ne pas couvrir les boutons du bas de l'écran */
  html.svJs .svCartBar{left:auto;right:24px;bottom:24px;width:auto;min-width:0;max-width:300px;min-height:50px;padding:6px 12px 6px 6px}
  html.svJs .svCartBar .svBarGo{display:none}
  html.svJs .svCartBar .svBarIc{width:36px;height:36px}
  html.svJs .svCartPanel{left:auto;right:24px;bottom:24px;width:400px;max-height:min(78vh,680px);border-radius:16px;border-bottom:1px solid var(--sv-line2);
    padding:16px;opacity:0;transform:translateY(14px);transition:transform .25s var(--ease),opacity .25s var(--ease),visibility 0s linear .25s}
  html.svJs .svCart.is-open .svCartPanel{opacity:1;transform:none;transition:transform .25s var(--ease),opacity .25s var(--ease)}
}
/* la barre ne cache pas le bas du pied de page */
html.svJs body:has(.svCart:not([data-count="0"])) .footer{padding-bottom:calc(2.5rem + 86px)}

/* Message court (ajout, refus) au-dessus de la barre */
.svToast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:945;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(1,230,118,.5);background:#0b1a14;color:#fff;font-size:.88rem;line-height:1.45;box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.svToast.is-on{opacity:1;transform:none}
.svToast.err{border-color:rgba(255,107,107,.55);background:#1c0d11}
@media (min-width:761px){.svToast{left:auto;right:24px;bottom:96px;max-width:380px}}
/* panier ouvert : le message (ajout, refus du serveur) passe au-dessus du panneau, en haut de l'écran */
html.svCartOpen .svToast{z-index:970;top:calc(var(--nav-h,72px) + 8px);bottom:auto}

/* Voile pendant la préparation du paiement (shop_pay_script) */
.payWait{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;background:rgba(3,7,14,.88);animation:svFade .2s ease}
.payBox{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:min(420px,100%);padding:1.5rem 1.6rem;border-radius:16px;
  border:1px solid rgba(1,230,118,.4);background:#07130e;box-shadow:0 0 40px rgba(1,230,118,.22);text-align:center}
.payBox b{font-family:var(--font-head);font-size:1.15rem;letter-spacing:.04em;color:#fff}
.payBox span{font-size:.86rem;line-height:1.5;color:var(--muted)}
.payWait .spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(1,230,118,.2);border-top-color:var(--neon);animation:svSpin .8s linear infinite}

/* ==========================================================================
   Blocs communs de contenu
   ========================================================================== */
.svBlock{min-width:0;padding:18px 16px;border-radius:var(--sv-r);border:1px solid var(--sv-line);background:var(--sv-bg)}
.svSecHead{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.svSecHead>div{min-width:0}
.svSecHead h2{margin-top:6px;font-size:clamp(1.4rem,5vw,1.9rem);letter-spacing:.03em;text-transform:uppercase}
.svSecSub{margin:0;max-width:60ch;color:var(--muted);font-size:.88rem;line-height:1.55}
.svMuted{color:var(--muted)}

/* ---------- Accueil : cartes Points / VIP ---------- */
.svOffers{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.svOffer{
  --gx:30%;--gy:0%;position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px 16px 16px;overflow:hidden;color:inherit;
  border-radius:16px;border:1px solid rgba(1,230,118,.34);
  background:linear-gradient(165deg,rgba(1,230,118,.10),rgba(10,15,32,.96) 48%),var(--sv-bg2);
  box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  animation:svIn .45s var(--ease) backwards;
}
.svOffer+.svOffer{animation-delay:.08s}
.svOffer:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 240px at var(--gx) var(--gy),rgba(1,230,118,.16),transparent 70%)}
.svOffer>*{position:relative}
.svOffer:hover{border-color:rgba(1,230,118,.65);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 34px rgba(1,230,118,.16)}
.svOfferTop{display:flex;align-items:center;gap:12px}
.svOfferIc{width:52px;height:52px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;color:var(--neon);
  border:1px solid rgba(1,230,118,.38);background:rgba(1,230,118,.1);box-shadow:0 0 24px rgba(1,230,118,.18)}
.svOfferIc svg{width:28px;height:28px}
.svOfferK{font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(1,230,118,.88)}
.svOfferT{margin:0;font-size:clamp(2rem,8vw,2.8rem);line-height:1;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.svOfferT span{color:var(--neon);text-shadow:0 0 22px rgba(1,230,118,.35)}
.svOfferD{margin:0;max-width:46ch;color:var(--muted);font-size:.9rem;line-height:1.6}
.svChips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svChips li{padding:.36rem .7rem;border-radius:999px;border:1px solid var(--sv-line);background:rgba(255,255,255,.04);font-size:.8rem;line-height:1.2;color:rgba(255,255,255,.82)}
.svChips b{color:var(--neon);font-variant-numeric:tabular-nums}
.svOfferCta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:auto;padding:.7rem 1rem;border-radius:4px;
  background:var(--neon);color:#04120a;font-family:var(--font-head);font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 22px rgba(1,230,118,.2)}
.svOfferCta svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.svOffer:hover .svOfferCta svg{transform:translateX(4px)}
.svOffer--vip{border-color:var(--sv-gold-line);background:linear-gradient(165deg,rgba(255,209,102,.11),rgba(12,13,30,.96) 48%),var(--sv-bg2)}
.svOffer--vip:before{background:radial-gradient(420px 240px at var(--gx) var(--gy),rgba(255,209,102,.15),transparent 70%)}
.svOffer--vip:hover{border-color:rgba(255,209,102,.7);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 34px rgba(255,209,102,.16)}
.svOffer--vip .svOfferIc{color:var(--sv-gold);border-color:rgba(255,209,102,.45);background:rgba(255,209,102,.1);box-shadow:0 0 24px rgba(255,209,102,.18)}
.svOffer--vip .svOfferK{color:rgba(255,209,102,.9)}
.svOffer--vip .svOfferT span{color:var(--sv-gold);text-shadow:0 0 22px rgba(255,209,102,.35)}
.svOffer--vip .svChips b{color:var(--sv-gold)}
.svOffer--vip .svOfferCta{background:var(--sv-gold);color:#1d1404;box-shadow:0 0 22px rgba(255,209,102,.2)}

/* ---------- Accueil : comment ça marche ---------- */
.svStepList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.svStep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:14px;border-radius:12px;border:1px solid var(--sv-line);background:rgba(255,255,255,.025)}
.svStepN{grid-row:span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-size:1.05rem;font-weight:700;
  color:#04120a;background:var(--neon);box-shadow:0 0 16px rgba(1,230,118,.32)}
.svStepT{font-family:var(--font-head);font-size:1.08rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1.2;padding-top:2px}
.svStepD{font-size:.86rem;line-height:1.55;color:var(--muted)}

/* ---------- Accueil : aide ---------- */
.svHelpGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.svHelpItem{display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;padding:12px 14px;border-radius:12px;border:1px solid var(--sv-line);background:rgba(255,255,255,.025);color:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.svHelpItem:hover{border-color:rgba(1,230,118,.45);background:rgba(1,230,118,.05)}
.svHelpItem>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.svHelpItem b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.svHelpItem small{font-size:.8rem;line-height:1.4;color:var(--muted)}
.svHelpIc{width:40px;height:40px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;color:var(--neon);background:rgba(1,230,118,.1);border:1px solid rgba(1,230,118,.28)}
.svHelpIc svg{width:20px;height:20px}

/* ==========================================================================
   Aperçu du menu F1 (partials/shop_f1preview.php) : cadre de hauteur fixe
   ========================================================================== */
.svF1{min-width:0;padding:18px 16px;border-radius:var(--sv-r);border:1px solid var(--sv-line);background:var(--sv-bg)}
.svF1Frame{overflow:hidden;border-radius:14px;border:1px solid rgba(1,230,118,.28);background:linear-gradient(180deg,#081124,#050a17);
  box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.svF1Top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;border-bottom:1px solid rgba(1,230,118,.14);background:rgba(1,230,118,.04)}
.svF1Brand{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.svF1Brand img{width:28px;height:28px;flex:none;border-radius:8px;object-fit:contain}
.svF1Brand small{font-size:.74rem;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.svF1Who{order:3;flex:1 1 100%;min-width:0;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svF1Vip{flex-shrink:0;padding:.12rem .45rem;border-radius:6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.07);color:rgba(255,255,255,.75)}
.svF1Vip.gold{background:rgba(255,209,102,.14);color:var(--sv-gold)}
.svF1Vip.diamond{background:rgba(125,212,252,.14);color:#7dd4fc}
.svF1Vip.platinium{background:rgba(1,230,118,.14);color:var(--neon)}
.svF1Bal{margin-left:auto;display:flex;align-items:baseline;gap:6px;padding:.3rem .7rem;border-radius:10px;border:1px solid rgba(1,230,118,.3);background:rgba(1,230,118,.08)}
.svF1Bal small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.svF1Bal b{font-family:var(--font-head);font-size:1.05rem;color:var(--neon);font-variant-numeric:tabular-nums}
.svF1Body{display:flex;flex-direction:column;min-height:0}
.svF1Cats{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.svF1Cat{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:.4rem .75rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--sv-line);background:rgba(255,255,255,.03);color:rgba(255,255,255,.76);font:inherit;font-size:.8rem;font-weight:600;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.svF1Cat svg{width:16px;height:16px;flex-shrink:0;color:var(--neon)}
.svF1Cat span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.svF1Cat b{flex-shrink:0;padding:0 .42rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.7rem;font-variant-numeric:tabular-nums}
.svF1Cat:hover{border-color:rgba(1,230,118,.35);color:#fff}
.svF1Cat[aria-pressed="true"]{border-color:rgba(1,230,118,.6);background:rgba(1,230,118,.13);color:#fff}
.svF1Cat[aria-pressed="true"] b{background:rgba(1,230,118,.22);color:var(--neon)}
.svF1Grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;max-height:400px;overflow-y:auto;padding:12px;scrollbar-width:thin}
.svF1Grid:focus-visible{outline:2px solid var(--neon);outline-offset:-2px}
.svF1Item{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.svF1Item.feat{border-color:rgba(1,230,118,.3)}
.svF1Item.promo{border-color:rgba(255,209,102,.34)}
.svF1Img{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(1,230,118,.12),rgba(255,255,255,.02) 70%)}
.svF1Img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.svF1Ph{font-size:1.5rem;color:rgba(1,230,118,.35)}
.svF1Img img+.svF1Ph{display:none}
.svF1Item[hidden]{display:none}
.svF1Promo{position:absolute;top:6px;left:6px;z-index:1;max-width:calc(100% - 12px);padding:.12rem .45rem;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1d1404;background:var(--sv-gold)}
.svF1Name{font-size:.82rem;font-weight:600;line-height:1.3;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.svF1Price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin-top:auto;font-family:var(--font-head);font-weight:700;color:var(--neon);font-variant-numeric:tabular-nums}
.svF1Price b{font-size:1rem}
.svF1Price small{font-size:.72rem;opacity:.75}
.svF1Price s{font-size:.78rem;font-weight:600;color:var(--text-dim)}
.svF1Tags{display:flex;flex-wrap:wrap;gap:4px}
.svF1Tag{padding:.12rem .4rem;border-radius:6px;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.06);color:rgba(255,255,255,.74)}
.svF1Tag.vip{background:rgba(255,209,102,.13);color:var(--sv-gold)}
.svF1Tag.hot{background:rgba(1,230,118,.14);color:var(--neon)}
.svF1Tag.out{background:rgba(255,107,107,.13);color:#ff9b9b}
.svF1Foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.06);font-size:.8rem;line-height:1.45;color:var(--muted)}
.svF1Foot span{grid-column:1/-1}
.svF1Foot .btn{width:100%;padding-left:.5rem;padding-right:.5rem;letter-spacing:.08em}

/* ==========================================================================
   Écrans plus larges
   ========================================================================== */
@media (min-width:561px){
  .svF1Grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:761px){
  .svHeadIn{padding:34px 32px 28px;grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:end;gap:24px}
  .svHead.has-scene .svHeadIn{grid-template-columns:minmax(0,62%)}
  .svHead.has-scene .svHeadSide>*{max-width:520px}
  #shopScene.svScene{background:radial-gradient(520px 320px at 80% 45%,rgba(1,230,118,.16),transparent 70%)}
  .svHead--vip #shopScene.svScene{background:radial-gradient(520px 320px at 80% 45%,rgba(255,209,102,.14),transparent 70%)}
  .svLockCard{padding:26px}
  .svLockOpts{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
  .svLockOr{flex-direction:column}
  .svLockOr:before,.svLockOr:after{width:1px;height:auto;flex:1}
  .svBlock,.svF1{padding:22px 24px}
  .svSecHead{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:18px}
  .svSecHead .svSecSub{text-align:right;max-width:42ch}
  .svOffers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svOffer{padding:26px 24px 22px;min-height:320px}
  .svOffer:hover{transform:translateY(-4px)}
  .svStepList{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svStep{grid-template-columns:minmax(0,1fr);padding:16px}
  .svStepN{grid-row:auto;margin-bottom:6px}
  .svHelpGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svF1Top{flex-wrap:nowrap}
  .svF1Who{order:0;flex:1 1 auto}
  .svF1Body{display:grid;grid-template-columns:210px minmax(0,1fr);height:440px}
  .svF1Cats{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:12px 10px;border-bottom:0;border-right:1px solid rgba(255,255,255,.05)}
  .svF1Cat{justify-content:flex-start;border-radius:10px;white-space:normal;line-height:1.25}
  .svF1Cat span{flex:1;text-align:left;overflow-wrap:anywhere}
  .svF1Grid{height:100%;max-height:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .svF1Foot{display:flex;flex-direction:row;align-items:center}
  .svF1Foot span{flex:1}
  .svF1Foot .btn{width:auto;padding-left:1.25rem;padding-right:1.25rem;letter-spacing:.12em}
  .svNotices>.card .btn{width:auto}
}
@media (min-width:981px){
  .svLayout{grid-template-columns:minmax(0,1fr) 340px;gap:18px}
  /* colonne de droite à côté du catalogue : ni barre, ni panneau */
  .svLayout>.svCart{position:sticky;top:calc(var(--nav-h) + 16px)}
  html.svJs .svLayout>.svCart .svCartBar,
  html.svJs .svLayout>.svCart .svCartBack,
  html.svJs .svLayout>.svCart .svCartClose{display:none}
  html.svJs .svLayout>.svCart .svCartPanel{position:static;width:auto;max-height:calc(100vh - var(--nav-h) - 32px);overflow-y:auto;
    padding:16px;border-radius:var(--sv-r);border-bottom:1px solid var(--sv-line2);opacity:1;transform:none;visibility:visible;transition:none}
  html.svJs body:has(.svLayout>.svCart) .footer{padding-bottom:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  .svOffer,.svOffer:hover,.svOffer:hover .svOfferCta svg{animation:none;transform:none!important}
  html.svJs .svCartPanel,html.svJs .svCartBack,.svToast{transition:none}
  .svCart.justChanged .svCartPanel,.svCart.justChanged .svCartBar{animation:none}
}