/* ==========================================================================
   SEARCH + LIBRARY — champ collant, tuiles genres (monochrome), résultats,
   filtres, états vides. Thème "Noir".
   ========================================================================== */

/* ================= RECHERCHE ================= */
.search-sticky {
  position: sticky; top: var(--header-h, 60px); z-index: 4;
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: var(--s3) var(--s4);
  margin: 0 calc(-1 * var(--s4)) var(--s2);
  display: flex; gap: var(--s2);
  border-bottom: 1px solid var(--hairline-2);
  box-shadow: var(--glass-edge);
}
.search-field {
  flex: 1 1 auto; min-width: 0; /* min-width:0 = peut rétrécir, pas de débordement */
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-1);
  padding: 0 var(--s3);
}
.search-field:focus-within { border-color: var(--hairline-2); }
.search-ico { font-size: 16px; color: var(--ink-faint); flex-shrink: 0; }
#search-input {
  flex: 1; min-width: 0; width: 100%; border: none; background: none;
  color: var(--ink); padding: 12px 0; outline: none; font-family: var(--font);
}
#search-input::placeholder { color: var(--ink-faint); }
#search-go { flex-shrink: 0; padding: 12px 14px; white-space: nowrap; }
#search-browse[hidden] { display: none; }

.result-row .src { font-size: var(--t-micro); color: var(--ink-faint); margin-top: 1px; }
.result-row .dots {
  background: none; border: none; color: var(--ink-faint);
  font-size: 18px; padding: 10px 6px; min-width: 40px; min-height: 40px;
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.result-row .dots:active { color: var(--ink); }
.result-row .lock { color: var(--ink-faint); font-size: 13px; }

/* ================= BIBLIOTHÈQUE ================= */
.lib-head { display: flex; align-items: center; justify-content: space-between; }
.lib-head h2 { margin: var(--s2) 0; font-size: var(--t-display); font-weight: var(--w-bold); }
.lib-letter {
  position: sticky; top: var(--header-h, 60px); z-index: 1;
  font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: .12em;
  color: var(--ink-faint); background: var(--bg);
  padding: var(--s4) 2px var(--s1);
}
.hist-date { font-size: var(--t-micro); color: var(--ink-faint); margin-left: auto; flex-shrink: 0; }
.lib-empty { margin-top: var(--s2); }
.lib-empty .cta { margin-top: var(--s3); }
.dur-pill {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 10px; font-weight: var(--w-medium); border-radius: 4px; padding: 1px 5px;
}
.cover-wrap { position: relative; flex-shrink: 0; }
.pl-cover { font-size: 20px; color: var(--ink-dim); background: var(--surface-2); }
.fav-btn[aria-pressed="true"] { color: var(--red); }
.lib-search { margin-bottom: var(--s2); }
.lib-group-label {
  font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin: var(--s4) 2px var(--s2);
}