/* Styles communs des vitrines .pks-* (05/10/2026, sortis d'index.html pour servir aussi à /membre) :
   « Mes packs » (js/packs-vitrine.js), « Le crew » (js/crew-vitrine.js + crew-vitrine.css),
   « Sélection de la semaine » (js/selection-vitrine.js + selection-vitrine.css). */
.pks{--pks-c1:#db2777;--pks-c2:#a855f7;--pks-tint:#f472b6;--pks-W:clamp(220px,23vw,360px);--pks-D:calc(var(--pks-W) * .16);--pks-mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  position:relative;display:flex;flex-direction:column;overflow:hidden;overflow:clip;isolation:isolate;color:#f5f2fb;padding-top:8px;
  background:
    radial-gradient(56% 46% at 50% 50%,color-mix(in srgb,var(--pks-c1) 32%,transparent),transparent 72%),
    radial-gradient(30% 32% at 88% 22%,color-mix(in srgb,var(--pks-c2) 16%,transparent),transparent 70%),
    radial-gradient(32% 34% at 8% 80%,color-mix(in srgb,var(--pks-c1) 16%,transparent),transparent 70%),
    #0a0a0a}
.pks-beam{position:absolute;z-index:0;top:0;left:50%;width:140vmax;height:110%;pointer-events:none;transform-origin:50% 0;
  background:conic-gradient(from 162deg at 50% 0%,transparent 0deg,color-mix(in srgb,var(--pks-tint) 14%,transparent) 12deg,rgba(255,255,255,.06) 18deg,color-mix(in srgb,var(--pks-tint) 14%,transparent) 24deg,transparent 36deg);
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%);
  filter:blur(16px);animation:pks-sway 11s ease-in-out infinite alternate}
@keyframes pks-sway{from{transform:translateX(-50%) rotate(-7deg)}to{transform:translateX(-50%) rotate(7deg)}}
.pks-fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.pks-year{position:absolute;z-index:1;left:50%;top:50%;font-weight:900;font-size:clamp(150px,26vw,470px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--pks-tint) 20%,transparent);pointer-events:none;user-select:none;white-space:nowrap;transform:translate(-50%,-52%)}
.pks-grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.pks-grid{position:relative;z-index:4;width:min(1360px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.12fr) minmax(0,.86fr);grid-template-areas:"copy stage aside";align-items:center;gap:clamp(16px,2.6vw,44px);padding-block:clamp(12px,2vh,28px)}
.pks-copy{grid-area:copy;position:relative;z-index:5;container-type:inline-size;display:flex;flex-direction:column;gap:22px}
.pks-aside{grid-area:aside;position:relative;z-index:5;container-type:inline-size;display:flex;flex-direction:column;gap:26px}
.pks-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--pks-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#9f98b2}
.pks-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pks-tint);box-shadow:0 0 12px var(--pks-tint)}
.pks-title{margin:0;font-weight:900;font-size:clamp(42px,19cqi,108px);line-height:.88;letter-spacing:-.045em;color:#f5f2fb}
.pks-l{display:block}
.pks-l2{background:linear-gradient(100deg,var(--pks-tint),var(--pks-c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
.pks-lede{margin:0;font-size:18px;font-weight:500;line-height:1.5;color:#d6d0e3;max-width:32ch;text-wrap:balance}
.pks-specs{display:flex;gap:clamp(18px,8cqi,40px);margin:0}
.pks-specs div{display:flex;flex-direction:column;gap:4px}
.pks-specs dt{font-family:var(--pks-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9f98b2}
.pks-specs dd{margin:0;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff}
.pks-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pks-buy{display:inline-flex;align-items:center;gap:14px;padding:7px 22px 7px 7px;border-radius:999px;background:#f5f2fb;color:#0b0816;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 14px 40px -14px color-mix(in srgb,var(--pks-tint) 80%,transparent);transition:transform .25s,box-shadow .25s}
.pks-buy:hover{transform:translateY(-2px);box-shadow:0 18px 50px -12px color-mix(in srgb,var(--pks-tint) 90%,transparent)}
.pks-plus{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pks-tint),var(--pks-c2));color:#fff;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.pks-buy:hover .pks-plus{transform:rotate(90deg)}
.pks-price{padding-left:14px;border-left:1px solid rgba(11,8,22,.18);font-variant-numeric:tabular-nums}
.pks-more{font-size:14px;font-weight:600;color:#9f98b2;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(245,242,251,.2)}
.pks-more:hover{color:#fff}
.pks-inside{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:44ch}
.pks-inside li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:#d6d0e3}
.pks-inside li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pks-tint)}
.pks-fine{margin:0;font-size:12px;line-height:1.5;color:#9f98b2}

.pks-stage{grid-area:stage;position:relative;height:calc(var(--pks-W) * 1.5);display:grid;place-items:center;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.pks-glow{position:absolute;width:calc(var(--pks-W) * 1.9);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pks-c1) 58%,transparent),transparent 62%);filter:blur(24px);animation:pks-pulse 5s ease-in-out infinite}
@keyframes pks-pulse{50%{transform:scale(1.08);opacity:.8}}
.pks-ring{position:absolute;width:var(--pks-W);aspect-ratio:1;border-radius:50%;border:2px solid var(--pks-tint);box-shadow:0 0 30px var(--pks-tint),inset 0 0 30px var(--pks-tint);opacity:0;pointer-events:none}
.pks-shadow{position:absolute;left:50%;top:calc(50% + var(--pks-W) * .64);width:calc(var(--pks-W) * 1.05);height:calc(var(--pks-W) * .12);margin-left:calc(var(--pks-W) * -.525);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.8),transparent);filter:blur(6px);animation:pks-shadow 5.5s ease-in-out infinite}
@keyframes pks-shadow{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.04);opacity:.95}}
.pks-scene{position:relative;z-index:2;width:var(--pks-W);height:var(--pks-W);perspective:1400px}
.pks-bob,.pks-spin,.pks-box{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pks-bob{animation:pks-bob 5.5s ease-in-out infinite}
@keyframes pks-bob{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}
.pks-box{transform:rotateY(24deg) rotateX(-8deg);will-change:transform}
.pks-face{position:absolute;left:50%;top:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-size:cover;background-position:center}
.pks-f-front,.pks-f-back{width:var(--pks-W);height:var(--pks-W);margin:calc(var(--pks-W) / -2) 0 0 calc(var(--pks-W) / -2)}
.pks-f-front{transform:translateZ(calc(var(--pks-D) / 2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pks-f-back{transform:rotateY(180deg) translateZ(calc(var(--pks-D) / 2))}
.pks-f-left,.pks-f-right{width:var(--pks-D);height:var(--pks-W);margin:calc(var(--pks-W) / -2) 0 0 calc(var(--pks-D) / -2);background-color:#141119}
.pks-f-left{transform:rotateY(-90deg) translateZ(calc(var(--pks-W) / 2))}
.pks-f-right{transform:rotateY(90deg) translateZ(calc(var(--pks-W) / 2))}
.pks-f-top,.pks-f-bottom{width:var(--pks-W);height:var(--pks-D);margin:calc(var(--pks-D) / -2) 0 0 calc(var(--pks-W) / -2);background:linear-gradient(#24202c,#110f16)}
.pks-f-top{transform:rotateX(90deg) translateZ(calc(var(--pks-W) / 2))}
.pks-f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--pks-W) / 2));background:#07060a}
.pks-f-left::after,.pks-f-right::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.12))}
.pks-f-right::after{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.6))}
.pks-f-front::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.17) 48%,transparent 58%);background-size:260% 100%;background-position:var(--pks-sx,55%) 0}
.pks-f-back{background:radial-gradient(120% 80% at 50% 0%,#1d1826,#0b0a0f 70%);padding:calc(var(--pks-W) * .075);display:flex;flex-direction:column;gap:calc(var(--pks-W) * .02);font-size:calc(var(--pks-W) * .029);color:#cfc9dc;line-height:1.35;overflow:hidden}
.pks-bk-top{display:flex;justify-content:space-between;font-family:var(--pks-mono);letter-spacing:.14em;color:#8d86a0}
.pks-bk-title{font-weight:900;font-size:1.9em;line-height:.95;letter-spacing:-.03em;color:#fff}
.pks-bk-title em{font-style:normal;color:var(--pks-c2)}
.pks-bk-sub{font-family:var(--pks-mono);letter-spacing:.1em;color:#8d86a0;padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.1)}
.pks-bk-list{margin:0;padding:0 0 0 1.6em;display:grid;gap:.28em}
.pks-bk-list b{color:#fff;font-weight:700}
.pks-bk-list span{color:#8d86a0}
.pks-bk-more{margin-top:auto;font-family:var(--pks-mono);color:#8d86a0}

.pks-vlayer{position:absolute;inset:0;pointer-events:none}
.pks-v-back{z-index:0}
.pks-v-front{z-index:3}
.pks-vinyl{position:absolute;width:var(--s);aspect-ratio:1}
.pks-vmove,.pks-burst,.pks-vfloat{width:100%;height:100%}
.pks-vfloat{animation:pks-vfloat var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate}
@keyframes pks-vfloat{from{transform:translate3d(0,-10px,0) rotate(-5deg)}to{transform:translate3d(0,12px,0) rotate(5deg)}}
.pks-disc{position:relative;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#121118 0 1.3px,#1e1c26 1.7px 2.7px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 5px #0c0b10,0 22px 40px -14px rgba(0,0,0,.8);animation:pks-rec var(--rs,6s) linear infinite}
@keyframes pks-rec{to{transform:rotate(360deg)}}
.pks-vlabel{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--pks-tint),var(--pks-c1) 55%,var(--pks-c2));display:grid;place-items:center;overflow:hidden}
.pks-vlabel::after{content:'';position:absolute;width:11%;aspect-ratio:1;border-radius:50%;background:#07060b;left:44.5%;top:44.5%}
.pks-vlabel b{font-size:calc(var(--s) * .05);font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.95);transform:translateY(-120%)}
.pks-gloss{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.17) 12%,transparent 17% 50%,rgba(255,255,255,.1) 58%,transparent 63%)}
.pks-v-front .pks-vinyl{filter:blur(1.5px)}
.pks-v-back .pks-vinyl{opacity:.55;filter:blur(1px)}
/* Têtes des artistes du pack (à la place des vinyles, 05/10/2026) : détourées depuis la pochette,
   "heads" dans #pks-data, dans l'ordre des emplacements de HEADS (js/packs-vitrine.js) */
.pks-head{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 0 7px color-mix(in srgb,var(--pks-tint) 45%,transparent)) drop-shadow(0 20px 22px rgba(0,0,0,.65));-webkit-user-drag:none;user-select:none}
.pks-v-front .pks-vinyl.is-head{filter:blur(.5px)}
.pks-v-back .pks-vinyl.is-head{opacity:.6;filter:blur(.8px)}

.pks-tagline{margin:0;font-weight:800;font-size:clamp(24px,10cqi,36px);line-height:1.04;letter-spacing:-.035em;color:#f5f2fb}
.pks-tagline span{display:block;color:#9f98b2}
.pks-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pks-mono{margin:0;font-family:var(--pks-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9f98b2}
.pks-nav{display:flex;align-items:center;gap:8px}
.pks-pos{margin-right:6px;font-family:var(--pks-mono);font-size:12px;color:#9f98b2;font-variant-numeric:tabular-nums}
.pks-arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(245,242,251,.12);background:rgba(255,255,255,.04);display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s}
.pks-arrow:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.pks-cards{display:grid;gap:10px}
.pks-card{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 16px 9px 9px;border-radius:18px;border:1px solid rgba(245,242,251,.12);background:rgba(255,255,255,.03);color:#fff;text-decoration:none;transition:transform .25s,background .3s,border-color .3s,box-shadow .3s}
.pks-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.pks-card[aria-current="true"]{border-color:color-mix(in srgb,var(--pks-tint) 70%,transparent);background:color-mix(in srgb,var(--pks-c1) 16%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--pks-tint) 35%,transparent),0 18px 44px -22px var(--pks-tint)}
.pks-thumb{width:62px;height:62px;border-radius:10px;object-fit:cover;box-shadow:0 8px 18px -8px rgba(0,0,0,.9)}
.pks-cbody{min-width:0}
.pks-cname{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.pks-new{padding:3px 8px;border-radius:100px;background:linear-gradient(120deg,#a855f7,#ec4899);font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.pks-cmeta{display:block;margin-top:3px;font-family:var(--pks-mono);font-size:11.5px;color:#9f98b2}
.pks-cprice{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pks-tracks{display:grid;gap:12px}
.pks-tlist{list-style:none;margin:0;padding:0;display:grid}
.pks-tlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:9px 0;border-top:1px solid rgba(245,242,251,.12)}
.pks-tlist li:last-child{border-bottom:1px solid rgba(245,242,251,.12)}
.pks-tt{font-size:14px;font-weight:700;line-height:1.25;color:#fff}
.pks-ta{grid-column:1;font-size:12.5px;line-height:1.3;color:#9f98b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pks-tv{grid-column:2;grid-row:1 / span 2;font-family:var(--pks-mono);font-size:10.5px;white-space:nowrap;padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pks-tint) 45%,transparent);color:color-mix(in srgb,var(--pks-tint) 60%,#fff)}

.pks-marquee{position:relative;z-index:4;border-top:1px solid rgba(245,242,251,.12);padding-block:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pks-mtrack{display:flex;width:max-content;animation:pks-marquee 46s linear infinite}
.pks-mtrack span{padding:0 18px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#d6d0e3}
.pks-mtrack i{font-style:normal;font-weight:800;color:var(--pks-c2)}
@keyframes pks-marquee{to{transform:translateX(-50%)}}
.pks :focus-visible{outline:2px solid var(--pks-tint);outline-offset:3px;border-radius:12px}

@media (max-width:960px){
  .pks{--pks-W:min(58vw,300px)}
  .pks-grid{width:calc(100% - 32px);grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "copy" "aside";gap:28px;padding-block:0 36px}
  .pks-stage{height:calc(var(--pks-W) * 1.5)}
  .pks-copy{gap:18px}
  .pks-title{font-size:clamp(46px,17cqi,92px)}
  .pks-year{top:calc(8px + var(--pks-W) * .75);font-size:clamp(130px,40vw,320px)}
  .pks-cards{grid-template-columns:1fr 1fr}
  .pks-card{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:8px 10px 8px 8px}
  .pks-thumb{width:48px;height:48px}
  .pks-cprice{grid-column:2;margin-top:-6px;font-size:14px}
}
@media (max-width:420px){
  .pks-specs dd{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .pks-beam,.pks-glow,.pks-shadow,.pks-bob,.pks-vfloat,.pks-disc,.pks-mtrack{animation:none}
  .pks-buy,.pks-plus,.pks-card{transition:none}
}