/* Page « La playlist » : liste complète + lecture à la demande */

.pl { padding-bottom: 140px; }

.pl-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: clamp(16px, 3vw, 40px) 0 28px; }
.pl-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; }
.pl-stats { font-family: var(--mono); font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Recherche + genres */
.pl-tools { display: grid; gap: 16px; padding-bottom: 28px; }
.search {
  display: flex; align-items: center; gap: 12px; max-width: 520px; min-height: 48px; padding: 0 16px;
  background: var(--tile); border: 1px solid transparent; cursor: text;
  transition: border-color 160ms ease;
}
.search:focus-within { border-color: var(--ink); }
.search i { font-size: 18px; color: var(--muted); }
.search-label { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--muted); }
.search input {
  flex: 1; min-width: 0; height: 46px; background: transparent; border: 0; outline: 0;
  color: var(--ink); font: inherit; font-size: 16px;
}
.search input::placeholder { color: #75757b; }
.search input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  margin-right: calc(var(--pad) * -1); padding-right: var(--pad);
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.chip {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-family: var(--mono); font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.chip span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: rgb(14 14 16 / 0.65); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: rgb(242 242 238 / 0.4); } }

/* Liste */
.cols, .row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 36px 48px minmax(0, 2.2fr) minmax(0, 1.4fr) 150px 130px 52px;
}
.cols { padding: 0 12px 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cols .c-dur, .row .dur { text-align: right; }

.tracks { list-style: none; padding: 0; }
/* Chaque ligne : le morceau (bouton) + « Retirer de la playlist » à droite */
.tracks li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
.tracks li[hidden] { display: none; }
.cols { padding-right: calc(12px + 44px); }
.rm {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 18px;
  transition: color 120ms ease, opacity 120ms ease, transform 140ms var(--ease-out);
}
.rm:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .rm { opacity: 0; }
  .tracks li:hover .rm, .rm:focus-visible { opacity: 1; }
  .rm:hover { color: var(--accent); }
}
.pl-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 11; transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--pad))); margin: 0; background: #1d1219; box-shadow: 4px 4px 0 var(--bleu);
}
.row {
  width: 100%; padding: 8px 12px; border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) { .row:hover { background: rgb(242 242 238 / 0.05); } }
.row:active { background: rgb(242 242 238 / 0.08); }
.row:focus-visible { outline-offset: -2px; }

.num { font-family: var(--mono); color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.row .thumb { position: relative; width: 48px; height: 48px; overflow: hidden; background: var(--tile); container-type: inline-size; }
.row .thumb > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ti { display: grid; min-width: 0; }
.ti .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti .a { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb, .gen { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air { font-family: var(--mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dur { font-family: var(--mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Morceau en cours dans la playlist */
.row.current .t { color: var(--accent); }
.row.current .num { color: var(--accent); font-size: 18px; }
/* Morceau en cours à l'antenne : état réel, une seule ligne */
.air.live { color: var(--accent); font-weight: 600; }

.empty { padding: 48px 12px; color: var(--muted); display: grid; gap: 16px; justify-items: start; }
.empty[hidden] { display: none; }
.empty button {
  min-height: 44px; padding: 0 18px; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}

/* Tablette */
@media (max-width: 1100px) {
  .cols, .row { grid-template-columns: 36px 48px minmax(0, 2fr) 140px 52px; }
  .c-album, .alb, .c-air, .air { display: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .cols { display: none; }
  .row { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 12px; padding: 8px 4px; }
  .num, .gen { display: none; }
  #prev { display: none; }
}