/*
 * PartyCut — fiche produit et configurateur de pack
 * Chargé uniquement sur la fiche d'un pack (voir inc/enqueue.php).
 * Contient la modale plein écran mobile du sélecteur de personnage.
 */

.pdp{display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start}}
.prod-media{position:relative}
@media(min-width:900px){.prod-media{position:sticky;top:92px}}
.pdp-art{background:var(--paper-2);border-radius:var(--r-lg);padding:40px 20px 28px;position:relative;display:grid;place-items:center;min-height:360px}
.pdp-art::after{content:"";position:absolute;left:34px;right:34px;bottom:34px;height:2px;background:repeating-linear-gradient(90deg,var(--cut) 0 10px,transparent 10px 20px)}
.scale-note{position:absolute;bottom:10px;right:18px;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.pk-stage{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,2vw,16px);width:100%;min-height:260px;padding-bottom:6px;flex-wrap:wrap}
.pk-stage .stand img{transition:opacity .2s ease}
.pk-stage .stand .lbl{font-style:normal;font-size:.7rem;font-weight:700;color:var(--ink-soft);margin-top:8px}
.support-view{display:none;text-align:center;color:var(--ink-soft);font-size:.9rem;max-width:280px}
.pdp-art.show-support .pk-stage{display:none}
.pdp-art.show-support .support-view{display:block}
.gal{display:flex;gap:10px;margin-top:14px}
.gal{flex-wrap:wrap}
.gal button{flex:1;min-width:120px;min-height:44px;border-radius:16px;background:var(--paper-2);padding:12px 8px;font-size:.82rem;font-weight:700;color:var(--ink-soft);box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s ease,background .15s ease}
.gal button:hover{background:#efe7fa}
.gal button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 3px var(--fuchsia)}

.opt-label{font-weight:700;margin:22px 0 10px;font-size:.95rem}
.comp{display:flex;flex-wrap:wrap;gap:8px}
.comp span{background:var(--paper-2);border-radius:999px;padding:8px 15px;font-weight:700;font-size:.86rem;color:var(--ink)}
.hint{font-size:.88rem;color:var(--ink-soft);margin:-4px 0 14px}
.price-row{display:flex;align-items:baseline;gap:12px;margin:22px 0 6px}
.price-now{font-family:var(--display);font-size:2.3rem;color:var(--ink)}
.back-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-soft);margin-bottom:22px}
.specs{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.specs li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-soft)}
.specs li::before{content:"✓";color:var(--mint);font-weight:700}

.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:620px){.slots{grid-template-columns:repeat(4,minmax(0,1fr))}}
.slot{background:#fff;border-radius:var(--r-md);padding:12px;box-shadow:inset 0 0 0 2px var(--line);display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s ease,transform .2s ease}
.slot:hover{transform:translateY(-3px)}
.slot.is-filled{box-shadow:inset 0 0 0 3px var(--mint);background:#f4fffb}
.slot-art{position:relative;background:var(--paper-2);border-radius:12px;height:118px;display:grid;place-items:center;overflow:hidden}
.slot.is-filled .slot-art{background:#fff}
.slot-art img{width:64px;height:100px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(58,29,110,.15))}
.slot-art .plus{font-family:var(--display);font-size:2rem;color:var(--cut);line-height:1}
.slot-art::after{content:"";position:absolute;inset:6px;border:2px dashed var(--cut);border-radius:9px;opacity:.6;pointer-events:none}
.slot.is-filled .slot-art::after{border-color:var(--mint);opacity:.5}
.slot-meta b{display:block;font-size:.88rem}
.slot-meta small{color:var(--ink-soft);font-size:.78rem;line-height:1.35;display:block}
.slot-name{font-weight:700;font-size:.86rem;color:var(--ink)}
.slot .btn{margin-top:auto}

.recap{background:var(--paper-2);border-radius:var(--r-lg);padding:22px;margin-top:26px}
.recap h4{font-size:1.05rem;margin-bottom:12px}
.recap ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px;font-size:.92rem;color:var(--ink-soft)}
.recap ul li{display:flex;gap:9px}
.recap ul li::before{content:"✓";color:var(--mint);font-weight:700}
.recap-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.recap-thumbs div{width:52px;height:62px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--line);overflow:hidden}
.recap-thumbs div img{width:100%;height:100%;object-fit:contain}
.recap-thumbs div.ghost{opacity:.5}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--cut);padding-top:14px}
.recap-total b{font-family:var(--display);font-size:1.9rem;color:var(--ink)}
.miss{font-size:.86rem;color:var(--ink-soft);text-align:center;margin-top:10px}

.mscrim{position:fixed;inset:0;background:rgba(36,21,70,.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:100;display:grid;place-items:end center;padding:0}
.mscrim.show{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:860px;max-height:88vh;background:var(--paper);border-radius:26px 26px 0 0;display:flex;flex-direction:column;transform:translateY(40px);opacity:0;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.mscrim.show .modal{transform:translateY(0);opacity:1}
@media(min-width:760px){.mscrim{place-items:center;padding:24px}.modal{border-radius:26px;max-height:86vh}}

.panel{background:var(--paper-2);border-radius:var(--r-lg);padding:18px;margin-top:18px;box-shadow:inset 0 0 0 2px var(--line)}
.panel[hidden]{display:none}
.panel-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.panel-top b{display:block;font-family:var(--display);font-size:1.1rem}
.panel-top small{color:var(--ink-soft);font-size:.85rem}
.panel-top .btn{margin-left:auto;flex:none}
.panel-mobile-head{display:none}
.panel-search{display:none}
.panel-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.panel-filters::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 15px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;background:#fff;font-size:.85rem;font-weight:700;color:var(--ink-soft);box-shadow:inset 0 0 0 2px var(--line)}
.chip[aria-pressed="true"]{background:var(--grape);color:var(--on-dark);box-shadow:none}
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:768px){.pick-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ---- Sélecteur de personnage : modale plein écran sur mobile ---- */
@media(max-width:767px){
  body.modal-open{overflow:hidden}
  #pickerPanel:not([hidden]){
    position:fixed;inset:0;z-index:200;margin:0;padding:0;
    border-radius:0;box-shadow:none;background:var(--paper);
    display:flex;flex-direction:column;height:100dvh;height:100vh;
  }
  #pickerPanel .panel-top{display:none}
  .panel-mobile-head{
    display:flex;align-items:center;gap:10px;flex:none;
    padding:calc(env(safe-area-inset-top) + 14px) 14px 12px;
    border-bottom:1px solid var(--line);background:var(--paper);
  }
  .panel-icon-btn{
    width:36px;height:36px;flex:none;border-radius:12px;background:var(--paper-2);
    display:grid;place-items:center;font-size:1.15rem;font-weight:700;color:var(--ink);
  }
  .panel-mobile-title{flex:1;min-width:0}
  .panel-mobile-title b{display:block;font-size:1rem;line-height:1.25}
  .panel-mobile-title small{display:block;color:var(--ink-soft);font-size:.76rem;margin-top:2px}
  .panel-search{display:block;flex:none;padding:12px 14px 0}
  .panel-search input{
    width:100%;height:46px;min-height:44px;border-radius:14px;border:2px solid var(--line);
    padding:0 16px;font:inherit;font-size:.95rem;background:var(--paper-2);color:var(--ink);
  }
  .panel-search input:focus{outline:none;border-color:var(--fuchsia);background:#fff}
  #pickerPanel .panel-filters{flex:none;padding:12px 14px 10px;margin-bottom:0}
  .pick-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px calc(env(safe-area-inset-bottom) + 16px)}
  #pickerPanel .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pickerPanel .pick-art{aspect-ratio:1/1;min-height:0;padding:10px;grid-template-rows:minmax(0,1fr);overflow:hidden}
  #pickerPanel .pick-art img{width:100%;height:100%;min-height:0;object-fit:contain}
}
.pick{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);overflow:hidden;text-align:center;min-width:0;cursor:pointer;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.pick:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(36,21,70,.6)}
.pick.is-current{box-shadow:0 0 0 3px var(--fuchsia)}
.pick-art{background:var(--paper-2);padding:16px 8px 12px;display:grid;place-items:center;min-height:132px}
.pick-art img{width:70px;height:104px;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(58,29,110,.15))}
.pick b{display:block;padding:12px 8px 4px;font-size:.92rem}
.pick small{color:var(--ink-soft);font-size:.78rem}
.pick .btn{margin:12px;margin-top:auto;width:auto;padding-inline:12px}
.char-detail{display:grid;gap:22px}
@media(min-width:640px){.char-detail{grid-template-columns:200px minmax(0,1fr);align-items:center}}
.char-detail .pdp-art{min-height:220px;padding:24px}
.char-detail .pdp-art img{width:110px;height:170px;object-fit:contain}
.size-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.size-tabs button{padding:8px 15px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);font-size:.85rem;font-weight:700}
.size-tabs button[aria-pressed="true"]{background:var(--grape);color:#fff;box-shadow:none}

.sticky-buy{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;align-items:center;gap:10px;z-index:75;box-shadow:0 -14px 30px -22px rgba(36,21,70,.7)}
.sticky-buy.show{display:flex}
.sticky-buy > div{min-width:0;flex:1}
@media(max-width:899px){.pa-pack-single .section{padding-bottom:120px}}
.sticky-buy b{font-family:var(--display);font-size:1.3rem;color:var(--ink);white-space:nowrap}
.sticky-buy small{display:block;color:var(--ink-soft);font-size:.76rem;font-weight:600}
.sticky-buy .btn{margin-left:auto;flex:none;white-space:nowrap;padding-inline:20px}
@media(min-width:900px){.sticky-buy{display:none!important}}

.theme-hero{display:flex;align-items:center;gap:18px;background:var(--paper-2);border-radius:var(--r-lg);padding:26px 24px;margin-bottom:34px}
.theme-emoji{width:64px;height:64px;flex:none;border-radius:20px;background:#fff;display:grid;place-items:center;font-size:2rem;box-shadow:var(--shadow-soft)}
.theme-hero p{color:var(--ink-soft);margin-top:6px;font-size:.95rem;max-width:52ch}
.theme-sub{font-size:1.35rem;margin:40px 0 18px}
.theme-sub:first-of-type{margin-top:0}
.theme-count{font-size:.9rem;font-weight:600;color:var(--ink-soft);margin-left:8px;font-family:var(--body)}
.theme-rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:28px;scrollbar-width:none}
.theme-rail::-webkit-scrollbar{display:none}
.theme-rail button{flex:none;display:flex;align-items:center;gap:7px;padding:9px 15px;min-height:40px;border-radius:999px;background:var(--paper-2);font-weight:700;font-size:.87rem;color:var(--ink)}
.theme-rail button[aria-pressed="true"]{background:var(--grape);color:var(--on-dark)}

@media(max-width:899px){
  body{padding-bottom:76px}
  .wrap{padding-inline:16px}
  .section{padding:44px 0}
  .section-head{margin-bottom:24px}
  .hdr-in{height:62px}
  .hero-grid{padding-top:34px;gap:20px}
  .hero p.lead{font-size:1rem}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%;padding:15px 20px}
  .hero-facts{gap:6px 14px;font-size:.84rem}
  .stage{min-height:230px;padding-bottom:30px}
  .strip-in{font-size:.84rem;gap:12px}
  .cat{padding:16px 8px;font-size:.84rem}
  .card-art{min-height:150px}
  .card-art img{width:78px;height:120px}
  .theme-hero{padding:20px 16px;gap:14px}
  .theme-emoji{width:52px;height:52px;font-size:1.6rem;border-radius:16px}
  .theme-sub{font-size:1.15rem;margin:30px 0 14px}
  .pdp-art{min-height:230px;padding:26px 14px 22px}
  .pk-stage{min-height:200px}
  .gal button{font-size:.76rem;padding:10px 6px}
  .slots{gap:10px}
  .slot{padding:10px}
  .slot-art{height:96px}
  .recap{padding:18px}
  .deliv div,.step{padding:20px}
  .contact{padding:24px 18px}
  .wa-float{bottom:88px;width:50px;height:50px}
  .sticky-buy.show ~ .wa-float{display:none}
  .sticky-buy.show ~ .toast{bottom:96px}
  .toast{bottom:88px}
}
@media(max-width:400px){ .hero-facts{font-size:.8rem} .cats{gap:10px} .slot-meta small{font-size:.74rem} }