/* ====== Barre de recherche ====== */
.pf-search-rail{
  border-radius: 16px;
  background:
    radial-gradient(1200px 1200px at 10% -20%, rgba(var(--bs-primary-rgb), .08), transparent 50%),
    var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}
.pf-search{
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.pf-search-icon{
  background: transparent;
  border: none;
  padding-left: 14px;
}
.pf-search-input{
  border: none !important;
  padding: 12px 14px;
  font-weight: 600;
}
.pf-search-input:focus{
  box-shadow: none;
}
.pf-search:hover{
  border-color: var(--bs-primary);
}
.pf-search:focus-within{
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .16);
  border-color: var(--bs-primary);
}
.pf-clear{
  border-left: 1px solid var(--bs-border-color);
  border-radius: 0;
}

/* ====== Tags (chips) Catégories ====== */
.category-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:6px; border:1px dashed var(--bs-border-color);
  border-radius:12px; background:var(--bs-body-bg);
}
.category-tags .chip{
  appearance:none; border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg); color:var(--bs-body-color);
  padding:8px 12px; border-radius:999px; font-weight:700;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:6px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.category-tags .chip .chip-icon{font-size:18px; opacity:.7}
.category-tags .chip:hover{border-color:var(--bs-primary); transform:translateY(-1px)}
.category-tags .chip.active{
  background:
    linear-gradient(180deg, rgba(var(--bs-primary-rgb), .16), rgba(var(--bs-primary-rgb), .06));
  border-color: var(--bs-primary); color: var(--bs-primary);
}
:root[data-theme="dark"] .category-tags{background:rgba(255,255,255,.02)}
:root[data-theme="dark"] .category-tags .chip.active{background:rgba(13,110,253,.15)}

/* ====== Cards Plateformes ====== */
.pf-card{
  position: relative;
  border:1px solid var(--bs-border-color);
  border-radius:18px;
  background:var(--bs-body-bg);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%; display:flex; flex-direction:column;
}
.pf-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  padding:1px;
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .35), rgba(142,197,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.0; pointer-events:none; transition:opacity .18s ease;
}
.pf-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-color: var(--bs-primary);
}
.pf-card:hover::before{opacity:.6}
:root[data-theme="dark"] .pf-card:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.pf-head{
  background:linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  display:grid; place-items:center; padding:18px 16px 10px;
}
:root[data-theme="dark"] .pf-head{
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}

.pf-icon{
  width:76px; height:76px; border-radius:16px;
  display:grid; place-items:center; overflow:hidden;
  background:rgba(0,0,0,.04);
  border:1px solid var(--bs-border-color);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
:root[data-theme="dark"] .pf-icon{background:rgba(255,255,255,.04)}
.pf-icon img{width:100%; height:100%; object-fit:contain; display:block}
.pf-icon.fa-fallback{background:transparent; border:none}
.pf-icon.fa-fallback i{font-size:42px; color:var(--bs-secondary-color)}

.pf-body{
  padding:12px 14px 16px; display:flex; flex-direction:column; gap:8px
}
.pf-name{
  font-weight:800; line-height:1.2; letter-spacing:.1px;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.pf-meta{
  display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--bs-secondary-color)
}
.pf-feats{margin-top:4px}
.pf-feats .badge{border:1px solid rgba(0,0,0,.05)}
:root[data-theme="dark"] .pf-feats .badge{border-color:rgba(255,255,255,.12)}

.empty-block{
  border:1px dashed var(--bs-border-color); border-radius:16px; color:var(--bs-secondary-color)
}

/* ====== Responsive ====== */
/* On force 2 colonnes en très petit écran grâce à col-6 côté HTML.
   Ici, on s’assure juste d’un spacing confortable. */
@media (max-width: 575.98px){
  .pf-body{padding:10px 12px 14px}
  .pf-icon{width:72px; height:72px}
}


/* Pagination buttons compatibility (buttons styled like links) */
.pagination .page-item .page-link {
  cursor: pointer;
  user-select: none;
}
.pagination .page-item.disabled .page-link {
  cursor: not-allowed;
}