/* Les DJ d'une zone (pages/simple/djs.php) : une carte par DJ, ses genres et ses prochaines dates. */
.sdjs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.sdj { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-width: 0; }
.sdj .lwriter { padding: 0; }
.sdj .lwriter:hover { background: transparent; }
.sdj .lwriter:hover strong { color: var(--color-accent-text); }
.sdj .stags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.sdj .stag { font-size: 0.75rem; padding: 1px 8px; }
.sdj__dates { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px; }
.sdj__dates a { display: flex; flex-direction: column; color: var(--color-ink); text-decoration: none; line-height: 1.3; }
.sdj__dates a:hover .sdj__what { color: var(--color-accent-text); text-decoration: underline; }
.sdj__when { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-2); }
.sdj__what { font-size: 0.9375rem; overflow-wrap: anywhere; }
.sdj__genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); }
.sdj__genres a { padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); color: var(--color-text-2); text-decoration: none; font-size: 0.875rem; font-weight: 600; background: var(--color-surface); }
.sdj__genres a span { font-weight: 400; color: var(--color-text-2); opacity: 0.75; }
.sdj__genres a:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.sdj__genres a[aria-current] { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-surface); }
.sdj__genres a[aria-current] span { color: inherit; }