/* ============================================================
   LE TRAK-EUR — parfait.css
   Styles spécifiques à la page Parfait.
   ============================================================ */

.parfait-page{ max-width:1080px; }

.parfait-hero{ margin-bottom:36px; }
.parfait-progress{ margin-top:22px; }
.parfait-count-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.parfait-count{
  font-family:var(--font-mono);
  font-size:1.6rem;
  color:var(--text);
}
.parfait-pct{
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--accent);
}

/* --- grille des 62 droïdes (variante Défaut uniquement) --- */
.parfait-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:12px;
}
.parfait-card{
  --rc: var(--accent);
  cursor:pointer;
  text-align:center;
  padding:12px 10px 14px;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text-dim);
  font-family:var(--font-ui);
  transition: all .15s ease;
}
.parfait-card:hover{ transform:translateY(-1px); border-color: rgba(255,255,255,.2); }

.parfait-img-wrap{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
  border-radius:6px;
  background: rgba(255,255,255,0.02);
  border:2px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.parfait-img{
  width:100%; height:100%; object-fit:contain;
  filter: grayscale(1) brightness(.55);
  opacity:.35;
  transition: filter .2s ease, opacity .2s ease;
}

/* --- état "Parfait" obtenu : contour blanc brillant (image + bloc) --- */
.parfait-card.owned{
  border-color:#ffffff;
  box-shadow: 0 0 14px 1px rgba(255,255,255,.55), 0 0 26px -6px rgba(255,255,255,.4);
}
.parfait-card.owned .parfait-img-wrap{
  border-color:#ffffff;
  box-shadow: 0 0 16px 1px rgba(255,255,255,.75), 0 0 32px -4px rgba(255,255,255,.5);
}
.parfait-card.owned .parfait-img{
  filter:none;
  opacity:1;
}
.parfait-card.owned .parfait-name{ color:var(--text); }

.parfait-name{
  display:block;
  font-weight:700; font-size:.86rem;
  letter-spacing:.02em;
  color:var(--text-dim);
}
.parfait-tier{
  display:block;
  font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-top:3px;
}

.empty-state{
  padding:32px 16px;
  text-align:center;
  color:var(--text-dim);
  font-size:.9rem;
  border:1px dashed var(--line);
  border-radius:10px;
}

@media (max-width:520px){
  .parfait-grid{ grid-template-columns: repeat(2, 1fr); }
  .toolbar{ flex-direction:column; }
  .filter-select{ width:100%; }
}