/* ── barre du haut : la recherche y tient la place centrale ────── */
.search {
  flex: 1; max-width: 520px; position: relative;
}
.search input {
  width: 100%; height: 34px; padding: 0 34px 0 var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--ink); font: inherit;
  font-size: var(--fs-sm);
}
.search input:focus { outline: none; border-color: var(--primary);
                      background: var(--bg-surface); }
.search .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
              color: var(--ink-muted); font-size: 13px; pointer-events: none; }

/* Image d'aperçu d'une publication (preview.png, prise depuis la caméra principale). */
.card-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── zone principale ────────────────────────────────────────────── */
.cat-main { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); }
.cat-head { display: flex; align-items: baseline; gap: var(--s3);
            flex-wrap: wrap; margin-bottom: var(--s4); }
.cat-head h1 { font-size: var(--fs-xl); }
.cat-head .count { font-size: var(--fs-sm); color: var(--ink-muted); }
.cat-head .spacer { flex: 1; }
.cat-sort { display: flex; gap: 2px; padding: 2px; background: var(--bg-sunken);
            border-radius: var(--r-pill); }
.cat-sort button { border: none; background: none; font: inherit; font-size: var(--fs-xs);
                   color: var(--ink-2); padding: 5px 12px; border-radius: var(--r-pill);
                   cursor: pointer; }
.cat-sort button[aria-pressed="true"] { background: var(--bg-raised); color: var(--ink);
                                        font-weight: 600; box-shadow: var(--shadow-sm); }

/* Les filtres actifs, en clair et retirables : on doit toujours savoir
   pourquoi la grille ne montre que ça. */
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary-hi);
  font-size: var(--fs-xs); font-weight: 600;
}
.filter-chip button { border: none; background: none; color: inherit; cursor: pointer;
                      font: inherit; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.filter-chip button:hover { background: var(--bg-active); }

/* ── la grille ──────────────────────────────────────────────────── */
.cat-grid { display: grid; gap: var(--s4);
            grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: var(--s2);
  border: none; background: none; padding: 0; font: inherit;
  text-align: left; cursor: pointer; color: var(--ink);
}
.card-thumb {
  position: relative; aspect-ratio: 16/10; border-radius: var(--r);
  background: var(--dark-bg); overflow: hidden;
  background-image: linear-gradient(var(--vp-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--vp-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  display: grid; place-content: center;
  /* Pas de bordure : la vignette se detache deja par son fond sombre, et un
     liseret de plus alourdissait la grille. */
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover .card-thumb { border-color: var(--primary); }
.card:focus-visible { outline: none; }
.card:focus-visible .card-thumb { outline: 2px solid var(--primary); outline-offset: 2px; }
/* AUCUNE vignette n'existe en base (ports.js, trou n°4) : on montre une marque
   d'attente honnête, pas une fausse image de la scène. */
.card-thumb .glyph { font-size: 26px; color: var(--dark-muted); }
.card-badge {
  position: absolute; right: 7px; bottom: 7px;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: rgba(21,30,45,.72); color: #fff;
  font-family: var(--font-mono); font-size: 10px;
}
.card-badge--muted { color: #c9d4c2; }
.card-title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.card-meta { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.5; }
.card-meta .sep { opacity: .5; padding: 0 4px; }
.card-actor { display: inline-flex; align-items: center; gap: 5px; }
.card-actor .av {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--primary-soft); color: var(--primary-hi);
  font-size: 9px; font-weight: 700; display: grid; place-content: center;
}
/* Une scène sans octets ne s'ouvrira pas : elle le dit AVANT le clic. */
.card.is-empty .card-thumb { opacity: .55; }
.card.is-empty .card-title { color: var(--ink-muted); }

@media (max-width: 719px) {
  .cat-main { padding: var(--s3); }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
  .search { max-width: none; }
  .bar-brand { font-size: 0; gap: 0; }
}