/* v2.9.1 — visuel du pack refait (chargé en dernier).
   Avant : dégradé vert qui scintille + halo vert fluo permanent (--gl) autour du paquet.
   Maintenant : sachet en feuille métallisée sombre, sertissage haut et bas, reflet qui balaie la surface,
   la couleur du pack (--pc) n'apparaît que dans un fin liseré et dans le nom. La mécanique de découpe
   (.ptop / .pcut / .cutg / .cutl / .sc / .tz) et l'animation d'ouverture sont inchangées. */

html body .pack{
  --foil:linear-gradient(180deg,#232a30 0%,#161b20 38%,#0e1215 100%);
  --crimp:repeating-linear-gradient(90deg,#ffffff24 0 2px,#0000 2px 5px);
  --sheen:linear-gradient(112deg,#0000 36%,#ffffff17 47%,#ffffff08 53%,#0000 64%);
  width:min(56vw,224px);
  animation:flt2 5s ease-in-out infinite;
}
@keyframes flt2{50%{transform:translateY(-8px) rotate(.6deg)}}

/* ombre posée au sol (remplace le halo) */
html body .pack::before{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:22px;border-radius:50%;background:radial-gradient(closest-side,#000b,#0000);filter:blur(3px);z-index:-2;pointer-events:none}
/* halo de charge : invisible au repos, léger et clair quand on découpe */
html body .pack .pglow{inset:-10%;z-index:-1;opacity:calc(var(--t)*.4);transform:scale(calc(.94 + var(--t)*.14));background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 45%,#fff),#0000 72%)}

/* corps + languette : la même feuille, découpée en deux pièces */
html body .pack .pb,html body .pack .ptop,html body .pack .pcut,
html body .pack.tint .pb,html body .pack.tint .ptop,html body .pack.tint .pcut{
  border:1px solid var(--edge,#ffffff26);
  background:
    var(--sheen) 130% 0/260% 100% no-repeat,
    radial-gradient(130% 70% at 50% 0,color-mix(in srgb,var(--pc) 16%,#0000),#0000 62%),
    var(--foil);
  box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -1px 0 #0009,0 14px 26px -16px #000;
}
/* le reflet ne tourne pas pendant la déchirure (css/base.css pilote alors .ptop / .pcut avec ses propres animations) */
html body .pack:not(.tear) .pb,html body .pack:not(.tear) .ptop,html body .pack:not(.tear) .pcut{animation:foil 7s ease-in-out infinite}
@keyframes foil{0%,22%{background-position:130% 0,0 0,0 0}78%,100%{background-position:-130% 0,0 0,0 0}}
html body .pack .ptop,html body .pack .pcut{box-shadow:inset 0 1px 0 #ffffff2e}

/* sertissage : fines stries à chaque extrémité du sachet */
html body .pack .ptop::before,html body .pack .pcut::before,html body .pack .pb::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background:var(--crimp);opacity:.85}
html body .pack .ptop::before,html body .pack .pcut::before{top:0;height:46%;border-radius:18px 18px 0 0}
html body .pack .pb::after{bottom:0;height:6%;border-radius:0 0 18px 18px}

/* liseré d'accent aux couleurs du pack, sous le logo */
html body .pack .pb::before{content:"";position:absolute;left:16%;right:16%;top:68%;height:2px;border-radius:2px;background:linear-gradient(90deg,#0000,var(--pc),#0000);opacity:.85}
html body .pack .pb .lg{width:min(62%,128px);filter:drop-shadow(0 .3em .5em #000b)}
html body .pack .pb small{margin-top:14px;font-size:.64rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--pc) 55%,#e7ecef);opacity:.9}
html body .pack .pb small .ic{display:none}

/* découpe : trait blanc, ciseaux sobres */
html body .cutg{border-top:2px dashed #ffffff55}
html body .cutl{background:linear-gradient(90deg,#fff9,#fff);box-shadow:0 0 6px #ffffff88}
html body .sc{color:#fff;font-size:1.5rem;filter:drop-shadow(0 1px 3px #000c)}
html body .pack.cutting .pspk::before,html body .pack.cutting .pspk::after{color:#fff;text-shadow:0 0 6px #ffffffaa;font-size:.8rem}

/* sélecteur de packs : bordure et lueur discrètes */
html body .pkc.on{box-shadow:0 0 0 1px var(--pc) inset}

@media (prefers-reduced-motion:reduce){html body .pack,html body .pack:not(.tear) .pb,html body .pack:not(.tear) .ptop,html body .pack:not(.tear) .pcut{animation:none}}

/* ---- dos de carte (révélation du pack, cartes à retourner) : même feuille sombre, plus de halo vert pulsant ---- */
html body .fb{
  border:.16em solid #ffffff2b;
  background:
    linear-gradient(112deg,#0000 36%,#ffffff12 47%,#ffffff06 53%,#0000 64%) 130% 0/260% 100% no-repeat,
    radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--pc,#8aa0ad) 14%,#0000),#0000 62%),
    linear-gradient(180deg,#232a30,#141a1e 45%,#0c1013);
  box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 1.4em #000b,0 .5em 1.4em -.6em #000;
  animation:foilb 7s ease-in-out infinite;
}
@keyframes foilb{0%,25%{background-position:130% 0,0 0,0 0}80%,100%{background-position:-130% 0,0 0,0 0}}
html body .fc.on .fb{animation:none}
html body .fb::before{border:1px solid #ffffff1c;border-radius:.8em}
html body .fb b{color:#cbd5dc}
/* carte rare ou mieux : un simple liseré et une lueur discrète à la couleur de sa rareté */
html body .fc.hi .fb{box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 1.4em #000b,0 0 0 1px var(--c),0 0 1.2em -.3em var(--c);animation:foilb 7s ease-in-out infinite}
html body .fc.hi.on .fb{animation:none}

/* fond et pile de l'écran d'ouverture */
html body .pr-bg{background:radial-gradient(90% 60% at 50% 45%,color-mix(in srgb,var(--c) 10%,#141b20),#04070a 80%)}
html body .pr-pile i{background:linear-gradient(180deg,#232a30,#0e1215);border:2px solid #ffffff22}
@media (prefers-reduced-motion:reduce){html body .fb,html body .fc.hi .fb{animation:none}}