/* Accueil /musics — même habillage que les Actualités (.bz .nw : --ink, --ink-2, --muted, --line, --card,
   --nw-accent, --nw-surface-2, --nw-radius, --nw-shadow). Préfixe .mh- */
.nw.mh { background:transparent; padding:28px 0 64px; display:flex; flex-direction:column; gap:44px; }
.mh img { display:block; width:100%; height:100%; object-fit:cover; }

.mh-top { display:flex; flex-direction:column; gap:14px; }
.nw .mh-title { margin:0; font-size:36px; font-weight:800; letter-spacing:-.02em; }
.mh-rubrics, .mh-genres { display:flex; flex-wrap:wrap; gap:8px; }
.nw .mh-pill { padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:14px; font-weight:600; color:var(--ink); }
.nw .mh-pill:hover, .nw .mh-pill:focus-visible { border-color:var(--nw-accent); outline:none; }
.nw .mh-pill.is-on { background:var(--nw-accent); border-color:var(--nw-accent); color:#fff; }
.mh-genres-label { padding:6px 0; font-size:13px; color:var(--muted); }
.nw .mh-genre { padding:6px 12px; border-radius:8px; background:var(--nw-surface-2); font-size:13px; font-weight:600; color:var(--ink-2); }
.nw .mh-genre:hover { color:var(--nw-accent); }
.mh-search { display:flex; max-width:520px; }
.mh-search input { flex:1; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; }
.mh-search button { min-width:48px; border:1px solid var(--nw-accent); border-radius:0 12px 12px 0; background:var(--nw-accent); color:#fff; cursor:pointer; }

.mh-lead { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:stretch; }
.nw .mh-hero { position:relative; display:block; aspect-ratio:16 / 9; border-radius:var(--nw-radius); overflow:hidden; background:#111; box-shadow:var(--nw-shadow); color:#fff; }
.mh-hero-body { position:absolute; inset:auto 0 0 0; padding:28px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(transparent, rgba(0,0,0,.82)); }
.mh-eyebrow { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#ffb3bc; }
.mh-hero-title { font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.mh-hero-meta { font-size:15px; color:#ebe8ef; }
.mh-hero-cta { align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; background:var(--nw-accent); font-weight:700; font-size:14px; }

.mh-trend { background:var(--card); border-radius:var(--nw-radius); padding:20px; box-shadow:var(--nw-shadow); }
.mh-trend ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.nw .mh-trend a { display:flex; gap:12px; align-items:center; color:var(--ink); }
.mh-rank { width:20px; flex:none; font-size:18px; font-weight:800; color:var(--nw-accent); }
.mh-trend-thumb { width:96px; aspect-ratio:16 / 9; flex:none; border-radius:8px; overflow:hidden; background:var(--nw-surface-2); }
.mh-trend-meta { display:flex; flex-direction:column; min-width:0; }
.mh-trend-meta strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-trend-meta small { font-size:13px; color:var(--muted); }
.nw .mh-trend a:hover strong { color:var(--nw-accent); }

.nw .mh-h2 { margin:0 0 16px; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.mh-block-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; }
.nw .mh-more { font-size:14px; font-weight:700; color:var(--nw-accent); }
.mh-news { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.mh-clips { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:22px 18px; }
.nw .mh-clip { display:flex; flex-direction:column; gap:6px; color:var(--ink); }
.mh-clip-thumb { aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:var(--nw-surface-2); }
.mh-clip strong { font-size:15px; line-height:1.3; }
.mh-clip small { font-size:13px; color:var(--muted); }
.nw .mh-clip:hover strong { color:var(--nw-accent); }

.mh-duo { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.mh-panel { flex:1 1 320px; min-width:0; background:var(--card); border-radius:var(--nw-radius); padding:22px; box-shadow:var(--nw-shadow); }
.mh-panel--wide { flex:999 1 520px; display:flex; flex-direction:column; gap:12px; }
.mh-panel--wide .mh-h2 { margin-bottom:4px; }
.nw .mh-gig { display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--ink); }
.mh-gig-date { width:56px; flex:none; display:flex; flex-direction:column; align-items:center; padding:8px 0; border-radius:10px; background:var(--nw-surface-2); color:var(--nw-accent); font-size:12px; font-weight:700; text-transform:uppercase; }
.mh-gig-date strong { font-size:20px; line-height:1; }
.mh-gig-body { flex:1 1 200px; display:flex; flex-direction:column; min-width:0; }
.mh-gig-body small { color:var(--muted); font-size:13px; }
.mh-gig-cta { padding:9px 16px; border-radius:999px; border:1px solid var(--nw-accent); color:var(--nw-accent); font-size:13px; font-weight:700; }
.mh-artists { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px 10px; }
.nw .mh-artist { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink); font-size:12px; font-weight:600; text-align:center; line-height:1.25; }
.mh-artist span { width:60px; height:60px; border-radius:50%; overflow:hidden; background:var(--nw-surface-2); }
.nw .mh-artist:hover { color:var(--nw-accent); }

@media (max-width:900px) {
  .mh-lead { grid-template-columns:1fr; }
  .mh-hero-title { font-size:22px; }
  .mh-hero-body { padding:18px; }
}
@media (max-width:520px) {
  .nw .mh-title { font-size:28px; }
  .mh-rubrics { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .mh-pill { white-space:nowrap; }
  .mh-artists { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* Listes de clips (/musics/clips, /musics/genre/…, /musics/artist/…) — préfixe .ml- */
.nw .ml-back { align-self:flex-start; font-size:13px; font-weight:600; color:var(--nw-accent); }
.ml-count { margin:-6px 0 0; color:var(--muted); font-size:14px; }
.ml-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px; border-radius:var(--nw-radius); background:var(--card); box-shadow:var(--nw-shadow); }
.ml-field { flex:0 1 200px; display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; font-weight:700; color:var(--muted); }
.ml-field--grow { flex:1 1 260px; }
.ml-field input, .ml-field select { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; font-weight:400; }
.ml-submit { min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--nw-accent); color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.mh-clip-thumb { position:relative; }
.ml-views { position:absolute; right:8px; bottom:8px; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:700; }
.ml-empty { padding:28px; border-radius:var(--nw-radius); background:var(--nw-surface-2); color:var(--ink-2); }
.nw .ml-empty a { color:var(--nw-accent); font-weight:700; }
.ml-pager { display:flex; justify-content:center; }
.ml-pager .pagination { margin:0; }
.nw .ml-pager .pagination > li > a, .nw .ml-pager .pagination > li > span { border-color:var(--line); background:var(--card); color:var(--ink); }
.nw .ml-pager .pagination > .active > a, .nw .ml-pager .pagination > .active > span { border-color:var(--nw-accent); background:var(--nw-accent); color:#fff; }
.ml .nw-dates { margin:0; }

/* Page d'un clip : retour vers la liste */
.nw .mcd-back { display:inline-block; margin-bottom:14px; font-size:13px; font-weight:600; color:var(--nw-accent); }