/* Page Playlists : arbre de dossiers et de playlists à gauche, pistes de la playlist choisie à droite, envois en cours. */
.site.pl { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .site.pl { grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); }
}
.panneau {
  display: grid; gap: 8px; align-content: start; padding: 12px; min-width: 0;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--ombre-1);
}
.panneau.vue:empty { display: none; }
.outils { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.outils h2 { margin-right: auto; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bas { grid-column: 1 / -1; display: grid; gap: 8px; }
.bas:not(:has(.message:not(:empty), .envois li)) { display: none; }

.arbre-zone { min-height: 6rem; border-radius: 6px; border: 1px dashed transparent; }
.arbre-zone.drop-fond { border-color: var(--accent); background: var(--accent-bg); }
.arbre, .arbre ul { margin: 0; padding: 0; list-style: none; }

.ligne {
  position: relative; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 4px 0 calc(4px + var(--niveau, 0) * 16px);
  font-size: 14px; border-radius: 6px; cursor: default; user-select: none;
}
.ligne:hover, .ligne.select { background: var(--bg-2); }
.ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ligne.ecoute > .nom, .ligne.ecoute > .icone { color: var(--accent); }
.ligne.ecoute > .nom { font-weight: 700; }
.ligne.vue-courante > .nom { font-weight: 600; }
.ligne.glisse, .piste.glisse { opacity: .4; }

.chevron { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--text-dim); cursor: pointer; transition: transform .15s ease; }
.chevron.ouvert { transform: rotate(90deg); }
.chevron.vide { cursor: default; }
.icone { color: var(--text-dim); display: inline-grid; }
.nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-h); }
.nom-edition {
  flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px;
  background: var(--bg-1); border: 1px solid var(--accent); border-radius: 4px; outline: none;
}
.info { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* présents dans la room : avatars empilés, sans nombre */
.presents { display: inline-flex; flex: none; padding-left: 6px; }
.presents .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-1); }
.ligne:hover .presents .avatar, .ligne.select .presents .avatar { box-shadow: 0 0 0 2px var(--bg-2); }

/* actions au survol (toujours visibles au doigt) */
.actions { display: none; gap: 2px; }
.ligne:hover > .actions, .ligne:focus-within > .actions, .ligne.select > .actions { display: inline-flex; }
@media (hover: none) { .actions { display: inline-flex; } }
.mini {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--text-dim); background: transparent; border: 0; border-radius: 4px; cursor: pointer;
}
.mini:hover { color: var(--text-h); background: var(--bg-3); }
.mini.danger:hover { color: var(--alerte); }
.mini.entrer { color: var(--accent); }

/* indicateurs de dépôt */
.ligne.drop-dans, .piste.drop-dans { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.ligne.drop-avant::before, .ligne.drop-apres::after, .piste.drop-avant::before, .piste.drop-apres::after {
  content: ''; position: absolute; left: calc(4px + var(--niveau, 0) * 16px); right: 4px; height: 2px;
  background: var(--accent); border-radius: 1px; pointer-events: none;
}
.piste.drop-avant::before, .piste.drop-apres::after { left: 4px; }
.ligne.drop-avant::before, .piste.drop-avant::before { top: -1px; }
.ligne.drop-apres::after, .piste.drop-apres::after { bottom: -1px; }

/* playlist choisie */
.pistes { margin: 0; padding: 0; list-style: none; min-height: 3rem; border-radius: 6px; border: 1px dashed transparent; }
.vue.drop-fond .pistes, .vue.drop-fond .vide-zone { border-color: var(--accent); background: var(--accent-bg); }
.piste {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 4px 0 8px; font-size: 14px; border-radius: 6px; user-select: none;
}
.piste:hover { background: var(--bg-2); }
.piste[draggable='true'] { cursor: grab; }
.piste .retirer:hover { color: var(--alerte); }
.piste .info { min-width: 3rem; text-align: right; }
.vide-zone {
  display: grid; place-items: center; min-height: 9rem; border: 1px dashed var(--border-fort); border-radius: var(--radius);
}

/* tactile : cibles de 40 px */
@media (pointer: coarse), (max-width: 899px) {
  .ligne { min-height: 40px; }
  .mini { width: 40px; height: 40px; }
  .chevron { width: 28px; height: 28px; }
  .bouton { min-height: 40px; }
  .piste { min-height: 44px; }
}

/* envois */
.envois { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.envois:empty { display: none; }
.envois li { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 2px 8px; align-items: center; font-size: 13px; }
.envois .nom { font-size: 13px; }
.envois .note { grid-column: 1 / -1; }
.envois .note:empty { display: none; }
.envois li.echec .note { color: var(--alerte); }
.progres { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.progres i { display: block; height: 100%; width: 0; background: var(--accent); }

/* lien YouTube ou Spotify à coller */
.lien { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lien input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px;
  background: var(--bg-1); border: 1px solid var(--border-fort); border-radius: 6px;
}
.lien input:focus { outline: none; border-color: var(--accent); }
.lien input:disabled { opacity: .6; }
.vide-zone { align-content: center; gap: 10px; padding: 12px; }
.vide-zone .lien { width: min(100%, 26rem); }
.import { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--text-dim); }
.tourne { width: 12px; height: 12px; border: 2px solid var(--border-fort); border-top-color: var(--accent); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tourne { animation-duration: 3s; } }
@media (pointer: coarse), (max-width: 899px) { .lien input { height: 40px; } }