/* ===== Modal fluide (fix centré) ===== */
#pkm-modal{
  position: fixed; inset: 0; z-index: 80;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--modal-dur) var(--modal-ease), visibility var(--modal-dur) var(--modal-ease);
}
#pkm-modal.open{ opacity:1; visibility:visible; pointer-events:auto }

.modal__backdrop{
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--modal-dur) var(--modal-ease);
}
#pkm-modal.open .modal__backdrop{ opacity: 1 }

.modal__dialog{
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  opacity: 0; z-index: 1;
  width: min(900px, 94vw);
  max-height: 88vh; overflow: hidden;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  display: grid; grid-template-rows: auto 1fr;
  transition: transform var(--modal-dur) var(--modal-ease), opacity var(--modal-dur) var(--modal-ease);
  will-change: transform, opacity;
}
#pkm-modal.open .modal__dialog{ transform: translate(-50%, -50%) scale(1); opacity:1 }

.modal__close{
  position: absolute; top: 8px; right: 8px;
  border: 1px solid var(--border);
  background: #0b1220; color: var(--ink);
  width: 36px; height: 36px; border-radius: 999px;
  font-size: 20px; font-weight: 900; cursor: pointer;
}

.modal__header{
  padding: 16px 18px 10px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-bottom: 1px solid var(--border);
}
.modal__header h2{ margin:0; font-size:1.15rem }
.modal__types{ display:flex; gap:6px; flex-wrap:wrap }

.modal__body{ overflow-y:auto; padding:12px 14px 16px }

/* Scrollbar du contenu du modal */
.modal__body{ scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color: rgba(148,163,184,.55) rgba(255,255,255,.05); }
.modal__body::-webkit-scrollbar{ width:10px }
.modal__body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:10px }
.modal__body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(148,163,184,.65), rgba(148,163,184,.45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal__body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(226,232,240,.85), rgba(148,163,184,.65));
}
.modal__body::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, rgba(226,232,240,1), rgba(148,163,184,.75));
}
.modal__body::-webkit-scrollbar-corner{ background: transparent }

.variants{
  margin:0 0 12px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px
}
.variant{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius:12px;
  padding:10px; text-align:center;
}
.variant img{
  display:block; margin:0 auto 8px;
  width:120px; height:120px; object-fit:contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}
.variant .v-label{ font-weight:800; font-size:.9rem; color:var(--ink) }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #pkm-modal, .modal__dialog, .modal__backdrop{ transition:none !important }
}

.modal__hero{
  display:flex; justify-content:center; align-items:center;
  padding:6px 0 10px;
}
.modal__hero img{
  width:180px; height:180px; object-fit:contain;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.35));
}