/* Page d'un clip (/musics/clip/…) — même habillage que les Actualités (.bz .nw : jetons --ink, --muted, --line,
   --nw-accent, --nw-surface-2, --nw-radius). Préfixe .mcd- */
.nw.mcd { background:transparent; padding:28px 0 64px; }
.mcd-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:36px; align-items:start; }
.mcd-main { min-width:0; }

.mcd-player { position:relative; aspect-ratio:16 / 9; width:100%; border-radius:var(--nw-radius); overflow:hidden; background:#000; box-shadow:var(--nw-shadow); }
.mcd-player iframe { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }

.mcd-head { margin-top:22px; display:flex; flex-direction:column; gap:6px; }
.mcd-genres { margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.mcd-genres a { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nw-accent) !important; }
.nw .mcd-title { margin:0; font-size:34px; line-height:1.1; font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.mcd-artist { margin:0; font-size:18px; font-weight:600; color:var(--ink-2); }
.mcd-artist a:hover { color:var(--nw-accent) !important; }
.mcd-meta { margin:2px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }

.mcd-share { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.mcd-share-btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--nw-surface-2); color:var(--ink) !important; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:border-color .15s; }
.mcd-share-btn:hover, .mcd-share-btn:focus-visible { border-color:var(--nw-accent); outline:none; }
.mcd-share-btn--yt { margin-left:auto; }

.mcd-desc { margin-top:22px; padding:18px 20px; border-radius:var(--nw-radius); background:var(--nw-surface-2); font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:72ch; }
.mcd-desc p { margin:0 0 10px; }
.mcd-desc p:last-child { margin-bottom:0; }

.mcd-block { margin-top:40px; }
.nw .mcd-h2 { margin:0 0 16px; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.mcd-news { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }

.mcd-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:18px; }
.mcd-card { display:flex; flex-direction:column; gap:4px; min-width:0; }
.mcd-card-thumb, .mcd-row-thumb { display:block; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:var(--nw-surface-2); }
.mcd-card-thumb img, .mcd-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.mcd-card:hover img, .mcd-row:hover img { transform:scale(1.04); }
.mcd-card-title, .mcd-row-title { margin-top:6px; font-size:15px; font-weight:700; color:var(--ink); line-height:1.25; }
.mcd-card-artist, .mcd-row-artist { font-size:13.5px; color:var(--muted); }
.mcd-card-title, .mcd-card-artist, .mcd-row-title, .mcd-row-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mcd-side { position:sticky; top:16px; min-width:0; }
.mcd-list { display:flex; flex-direction:column; gap:14px; }
.mcd-row { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px; align-items:center; }
.mcd-row-meta { display:flex; flex-direction:column; min-width:0; }
.mcd-row-title { margin-top:0; font-size:14.5px; }
.mcd-all { display:inline-block; margin-top:18px; font-size:14px; font-weight:700; color:var(--nw-accent) !important; }

@media (prefers-reduced-motion: reduce) { .mcd-card img, .mcd-row img { transition:none; } }
@media (max-width:991px) {
  .mcd-grid { grid-template-columns:1fr; gap:40px; }
  .mcd-side { position:static; }
  .mcd-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
  .mcd-row { grid-template-columns:1fr; gap:0; }
  .mcd-row-title { margin-top:6px; }
}
@media (max-width:640px) {
  .nw.mcd { padding-top:18px; }
  .mcd-player { border-radius:0; margin:0 -15px; width:calc(100% + 30px); }
  .nw .mcd-title { font-size:26px; }
  .mcd-share-btn--yt { margin-left:0; }
}