/* Propositions de la recherche de clips (www/js/musics-suggest.js). Préfixe .cs-. Jetons des Actualités (.nw) avec repli
   sur ceux du thème du site, donc lisible en clair et en sombre partout. */
.cs-box { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; max-height:min(70vh, 460px); overflow-y:auto;
  padding:6px; border-radius:14px; border:1px solid var(--line, var(--bzk-border, #e4e1d8));
  background:var(--card, var(--bzk-surface, #fff)); color:var(--ink, var(--bzk-text, #1c1a15));
  box-shadow:0 14px 40px rgba(0,0,0,.18); text-align:left; }
.cs-head { padding:8px 10px 4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted, var(--bzk-text-muted, #7a766c)); }
.cs-item { display:flex; align-items:center; gap:12px; width:100%; padding:7px 10px; border:0; border-radius:10px; background:transparent;
  color:inherit !important; text-decoration:none !important; font:inherit; text-align:left; cursor:pointer; }
.cs-item:hover, .cs-item.is-active { background:var(--nw-surface-2, var(--bzk-surface-2, #f1efea)); }
.cs-thumb { flex:0 0 auto; width:80px; aspect-ratio:16 / 9; border-radius:7px; overflow:hidden; background:var(--nw-surface-2, var(--bzk-surface-2, #f1efea)); }
.cs-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.cs-avatar { flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:16px;
  background:var(--nw-accent, #e0364a); color:#fff; }
.cs-txt { display:grid; gap:1px; min-width:0; }
.cs-txt b { font-size:14.5px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-txt small { font-size:13px; color:var(--muted, var(--bzk-text-muted, #7a766c)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-none { padding:10px; font-size:14px; color:var(--muted, var(--bzk-text-muted, #7a766c)); }
.cs-all { margin-top:4px; border-top:1px solid var(--line, var(--bzk-border, #e4e1d8)); border-radius:0 0 10px 10px; padding:11px 10px;
  font-size:14px; font-weight:700; color:var(--nw-accent, #e0364a) !important; }
.cs-all i { width:20px; text-align:center; }
@media (max-width:640px) { .cs-thumb { width:64px; } .cs-box { max-height:60vh; } }