/* ChaseTCG · page résultat : booster, slab, podium */
/* ===== Feuille plein écran ===== */
.sheet{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(90% 60% at 50% 32%,color-mix(in srgb,var(--ground) 45%,transparent),color-mix(in srgb,var(--ground) 84%,transparent) 78%);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet[hidden]{display:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;max-width:620px;margin:0 auto;padding:12px 16px}
.sheet-top p{margin:0;color:var(--muted);font-size:.9rem;font-weight:600}
.close{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line),0 8px 16px -10px var(--shadow)}
.scene{max-width:560px;margin:0 auto;padding:0 16px 48px;display:flex;flex-direction:column;align-items:center}
.theater{--cw:min(54vw,256px);--ch:calc(var(--cw)*1.3967);position:relative;width:100%;height:calc(var(--ch)*1.72);perspective:1100px;touch-action:pan-y}
.center{position:absolute;left:50%;top:calc(var(--ch)*.8);width:0;height:0;transform-style:preserve-3d}
.cshadow{position:absolute;left:calc(var(--cw)*-.55);top:calc(var(--ch)*.62);width:calc(var(--cw)*1.1);height:calc(var(--cw)*.22);border-radius:50%;
  background:radial-gradient(closest-side,var(--shadow),transparent);transform:translateX(var(--shx,0px));transition:opacity .4s;filter:blur(2px)}

/* booster ChaseTCG */
.pack{position:absolute;--pw:calc(var(--cw)*1.14);--phh:calc(var(--ch)*1.3);left:calc(var(--pw)/-2);top:calc(var(--phh)/-2 + var(--ch)*.25);
  width:var(--pw);height:var(--phh);transform-style:flat;transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .6s .3s}
.pack .pinner{position:absolute;inset:0;transform-style:flat;transform:rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg));transition:transform .2s ease-out;touch-action:none}
.pack.gone{transform:translateZ(-90px) translateY(130%) rotate(-6deg);opacity:0}
.pfoil{position:absolute;left:0;right:0;overflow:hidden;
  background:
    linear-gradient(100deg,transparent calc(var(--mx,50)*1% - 18%),rgba(255,255,255,.55) calc(var(--mx,50)*1%),transparent calc(var(--mx,50)*1% + 18%)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    radial-gradient(80% 50% at 50% 46%,rgba(255,255,255,.16),transparent 70%),
    linear-gradient(160deg,#1B2758,#0B1124 55%,#151236);
  background-size:100% var(--phh),100% 100%,100% var(--phh),100% var(--phh);}
.pfoil::before{content:"";position:absolute;left:-10%;right:-10%;height:var(--phh);top:var(--off,0px);opacity:.9;mix-blend-mode:screen;
  background:linear-gradient(62deg,transparent 41%,#16D9F2 46%,#7A5CFF 49%,#F23DCB 52%,#F7A030 55%,transparent 58%);filter:blur(6px)}
.pbody{z-index:2;top:0;bottom:0;--off:0px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 14px 0 22px -14px rgba(255,255,255,.35),inset -14px 0 22px -14px rgba(0,0,0,.6)}
.pstrip{top:0;height:15%;z-index:3;transform-origin:0% 100%;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .7s}
.crimp{position:absolute;left:0;right:0;height:9%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1.5px,rgba(0,0,0,.28) 1.5px 3.5px),linear-gradient(180deg,rgba(255,255,255,.15),rgba(0,0,0,.2))}
.crimp.t{top:0;height:62%}.crimp.b{bottom:0}
.perf{position:absolute;left:8%;right:8%;bottom:9px;border-bottom:1.5px dashed rgba(242,235,220,.7)}
.notch{position:absolute;bottom:-5px;width:10px;height:10px;background:var(--ground);transform:rotate(45deg)}
.notch.l{left:-5px}.notch.r{right:-5px}
.pmark{position:absolute;left:0;right:0;top:24%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#F2EBDC}
.pmark img{width:52%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.pmark span{font-size:.72rem;font-weight:600;letter-spacing:.02em;opacity:.85;text-align:center;padding:0 12%}
.pinside{z-index:0;position:absolute;left:4%;right:4%;top:10%;height:20%;border-radius:40% 40% 0 0/30% 30% 0 0;background:#04060E;opacity:0;transition:opacity .2s}
.pack.torn .pinside{opacity:1}
.pack.torn .pstrip{transform:translate(55%,-160%) rotate(28deg);opacity:0}
.emerge{position:absolute;z-index:1;width:var(--cw);left:calc((var(--pw) - var(--cw))/2);top:calc(var(--phh)/2 - var(--ch)/2);transform:translateY(calc(var(--ch)*.09));
  transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.emerge.up{transform:translateY(calc(var(--ch)*-.25))}
.card2d{position:relative;aspect-ratio:600/838;border-radius:5%/3.6%;overflow:hidden;background:#F2EBDC}
.card2d img{width:100%;height:100%;object-fit:cover}
.bits{position:absolute;left:0;top:0;pointer-events:none}
.bits i{position:absolute;width:6px;height:10px;border-radius:1px;opacity:0}
.bits.go i{animation:bit 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bit{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--bx),var(--by)) rotate(var(--br))}}

/* slab acrylique */
.holder{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
.holder .cardslot{position:absolute;width:var(--cw);left:calc(var(--cw)/-2);top:calc(var(--ch)/-2);transform:translateY(var(--dy,0px));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:grab;touch-action:none}
.holder .cardslot.drag{transition:none;cursor:grabbing}
.slab{--pad:calc(var(--cw)*.07);--lab:calc(var(--cw)*.36);--T:11px;
  position:absolute;width:calc(var(--cw) + var(--pad)*2);height:calc(var(--ch) + var(--lab) + var(--pad)*3);
  left:calc((var(--cw) + var(--pad)*2)/-2);top:calc(var(--ch)/-2 - var(--lab) - var(--pad)*2);transform-style:preserve-3d;pointer-events:none}
.slab>i{position:absolute;display:block;font-style:normal;opacity:0;transition:opacity .45s,transform .7s cubic-bezier(.25,.9,.25,1)}
.s-back{inset:0;border-radius:14px;transform:translateZ(calc(var(--T)*-1));
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(12,18,38,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.s-side{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 30%,rgba(255,255,255,.3) 70%,rgba(255,255,255,.6))}
.s-l{left:0;top:6px;bottom:6px;width:var(--T);transform-origin:0 50%;transform:rotateY(90deg)}
.s-r{right:calc(var(--T)*-1);top:6px;bottom:6px;width:var(--T);transform-origin:0 50%;transform:rotateY(90deg)}
.s-t{top:0;left:6px;right:6px;height:var(--T);transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.2) 30%,rgba(255,255,255,.3) 70%,rgba(255,255,255,.6))}
.s-bt{bottom:calc(var(--T)*-1);left:6px;right:6px;height:var(--T);transform-origin:50% 0;transform:rotateX(-90deg);background:rgba(255,255,255,.35)}
.s-label{left:var(--pad);right:var(--pad);top:var(--pad);height:var(--lab);border-radius:6px;transform:translateZ(calc(var(--T)*-.5)) translateY(-14px);
  background:linear-gradient(180deg,#FBF6EA,#EFE7D5);color:#0B1124;box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(11,17,36,.08);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;padding:6px 10px 4px 12px;overflow:hidden}
.s-label::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#16D9F2,#7A5CFF 40%,#F23DCB 70%,#F7A030)}
.s-label .nm,.s-label .id,.s-label .cote{display:block}
.s-label .nm{font-weight:750;font-size:calc(var(--cw)*.056);line-height:1.1;letter-spacing:-.005em}
.s-label .id{font-size:calc(var(--cw)*.04);color:#585E75;margin-top:3px}
.s-label .cote{font-size:calc(var(--cw)*.042);margin-top:4px;font-weight:600}
.s-label .gr{text-align:center;padding-left:10px;border-left:1px solid #D9CEB8;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.s-label .gr small{font-size:calc(var(--cw)*.035);color:#585E75}
.s-label .gr b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:calc(var(--cw)*.13);line-height:1}
.s-label .holo{position:absolute;right:calc(var(--cw)*.19);bottom:7px;width:calc(var(--cw)*.075);aspect-ratio:1;border-radius:3px;
  background:conic-gradient(from calc(var(--mx,50)*3.6deg),#16D9F2,#7A5CFF,#F23DCB,#F7A030,#16D9F2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.s-well{left:calc(var(--pad)*.55);right:calc(var(--pad)*.55);bottom:calc(var(--pad)*.55);height:calc(var(--ch) + var(--pad)*.9);border-radius:10px;
  transform:translateZ(calc(var(--T)*-.75));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 6px 14px rgba(0,0,0,.35)}
.s-front{inset:0;border-radius:14px;transform:translateZ(160px);
  background:
    linear-gradient(115deg,transparent calc(var(--mx,50)*1% - 22%),rgba(255,255,255,.32) calc(var(--mx,50)*1% - 4%),rgba(255,255,255,.06) calc(var(--mx,50)*1%),transparent calc(var(--mx,50)*1% + 12%)),
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 35%,rgba(255,255,255,.05) 70%,rgba(255,255,255,.14));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),inset 0 0 0 4px rgba(255,255,255,.08),inset 2px 3px 0 rgba(255,255,255,.4),inset -2px -3px 0 rgba(0,0,0,.12)}
.slab>i.s-label{display:grid}
.slabbed .slab>i{opacity:1}
.slabbed .s-front{transform:translateZ(0)}
.slabbed .s-label{transform:translateZ(calc(var(--T)*-.5))}
.slabbed .cardslot{--dy:0px;transform:translateZ(calc(var(--T)*-.5));cursor:default}

/* révélation produit */
.ptheater{height:min(64vw,330px)}
.pdrop{position:absolute;left:-130px;width:260px;height:240px;top:-200px;transform:translateY(-140%) rotate(-4deg);opacity:0;
  transition:transform .8s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.pdrop.in{transform:none;opacity:1}
.pdrop img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:rotateY(var(--ry,0deg));transition:transform .2s ease-out;
  -webkit-box-reflect:below 2px linear-gradient(transparent 60%,rgba(255,255,255,.25));filter:drop-shadow(0 3px 3px var(--shadow-soft))}
.pfloor{position:absolute;left:-180px;top:-140px;width:360px;height:360px;transform:rotateX(90deg);border-radius:50%}
.psh{position:absolute;left:-120px;top:22px;width:240px;height:36px;border-radius:50%;background:radial-gradient(closest-side,var(--shadow),transparent);
  transform:scaleX(.3);opacity:0;transition:transform .8s cubic-bezier(.3,1.35,.5,1),opacity .5s}
.pdrop.in~.psh{transform:none;opacity:1}

.ptheater .center{top:68%}
/* le haut du produit et du slab ne passe plus sous « Nouvelle recherche » */
.rg-cote .theater{height:calc(var(--ch)*1.72 + 16px)}
.rg-cote .center{top:calc(var(--ch)*.8 + 16px)}
@media (max-width:959px){.ptheater{height:calc(min(44vw,190px) + 20px)}.ptheater .center{top:calc(100% - 34px);transform:scale(.72)}}

/* blocs sous la scène */
.hint{margin:4px 0 0;color:var(--muted);font-size:.93rem;text-align:center;max-width:32ch;min-height:1.5em}
.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.ghost{border:0;background:none;cursor:pointer;padding:10px 12px;font-weight:650;font-size:.92rem;color:var(--text);
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text) 35%,transparent);text-underline-offset:4px;min-height:44px}
.panel[hidden]{display:none}
.panel .sub{margin:0 0 14px;color:var(--muted);font-size:.93rem}
.panel .cta{width:100%}
.found{margin:0;font-size:1rem;line-height:1.4}
.found b{font-weight:750}
/* carte « introuvable » */
.scene>.panel{width:100%;margin-top:18px;padding:20px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 30px 50px -36px var(--shadow)}
.scene>.panel h2{margin:0 0 6px;font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:1.9rem;line-height:1.05}
.fade-up{animation:fu .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* page résultat : la scène, puis la fiche ; côte à côte sur ordinateur */
.result{padding-top:4px;padding-bottom:56px}
.result .scene{padding-bottom:0}
.result .crumb,.result .hint,.result .ghost{text-shadow:0 1px 8px var(--ground),0 0 2px var(--ground)}
.result .crumb{color:var(--text);font-weight:600}
.rgrid{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
.rvis{display:flex;flex-direction:column;align-items:center;min-width:0}
.rside{position:relative;z-index:2;min-width:0;margin-top:10px;padding:18px 16px 20px;border-radius:24px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 34px 60px -40px var(--shadow)}
.rhead .eyebrow{margin:0 0 3px;font-size:.8rem;font-weight:650;color:var(--muted)}
.rhead h1{margin:0;max-width:none;font-size:1.3rem;line-height:1.2;font-weight:750;letter-spacing:-.01em;text-wrap:balance}
.rside .panel{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
/* le produit sur un panneau clair et flouté : il se détache du décor, de jour comme de nuit */
.rvis{position:relative;isolation:isolate;padding:6px 0 12px}
.rg-cote .rvis{padding-top:22px}
.rvis::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:28px;
  background:radial-gradient(65% 55% at 50% 58%,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface) 62%,transparent));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent),0 30px 60px -40px var(--shadow)}
.pdrop img{filter:drop-shadow(0 18px 22px rgba(12,18,38,.35))}
/* sous la scène et la fiche, sur toute la largeur */
.rmore{grid-column:1/-1;min-width:0;margin-top:14px;padding:18px 16px 20px;border-radius:24px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 34px 60px -40px var(--shadow)}
.rmore[hidden]{display:none}
.rmore .lockbox{margin-top:0}
.rmore>.cta{width:100%}
@media (min-width:960px){
  .result .scene{max-width:1140px}
  .rgrid{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:0 40px;align-items:center}
  .rside{margin-top:8px;padding:24px 26px 26px}
  .rmore{margin-top:28px;padding:26px 28px 24px}
  .rmore .lockbox h2{font-size:1.3rem}
  .rmore>.cta{display:flex;align-items:center;justify-content:center;width:auto;max-width:420px;margin:18px auto 0;padding:0 40px}
  .rmore .tips{margin-top:24px;padding:18px 20px 8px}
  .rmore .tips ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
  .rhead h1{font-size:1.6rem}
  .ptheater{height:460px}
  .ptheater .center{transform:scale(1.3)}
}