/* Room : écran noir avec commandes par-dessus l'image, file de lecture à droite (mode normal) ou dessous (cinéma, téléphone). */
:root { --haut-entete: 40px; }
@media (max-width: 899px) { :root { --haut-entete: 0px; } }

.salle {
  --marge: var(--space-3);
  display: grid; gap: var(--space-2); align-items: start;
  width: 100%; max-width: 120rem; margin: 0 auto; padding: var(--marge) var(--marge) calc(var(--space-4) + 48px);
}
@media (min-width: 900px) {
  .salle { grid-template-columns: minmax(0, 1fr) 360px; padding-bottom: var(--space-4); }
  .salle .file { max-height: calc(100dvh - var(--haut-entete) - 2 * var(--marge)); }
}
@media (max-width: 899px) { .salle { --marge: 0px; gap: 0; padding: 0 0 calc(var(--space-4) + 48px); } }

/* mode cinéma : l'écran prend toute la largeur, sans marge, la file passe dessous */
@media (min-width: 900px) {
  .salle.cinema { grid-template-columns: minmax(0, 1fr); padding: 0 0 var(--space-4); gap: 0; max-width: none; }
  .salle.cinema .file { max-height: none; width: 100%; max-width: 56rem; margin: var(--space-2) auto 0; padding: 0 var(--space-3); }
}

/* ---------- écran ---------- */
.ecran {
  --ecran-accent: #a99cff;   /* l'image reste noire dans les deux thèmes : l'accent des commandes aussi */
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 16 / 9; max-height: calc(100dvh - var(--haut-entete) - 2 * var(--marge));
  background: #000; color: #fff; border-radius: var(--radius);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.cinema .ecran { border-radius: 0; max-height: calc(100dvh - var(--haut-entete)); }
@media (max-width: 899px) { .ecran { border-radius: 0; max-height: 70dvh; } }
.ecran video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; cursor: pointer; }
.ecran.vide video, .ecran.audio video { visibility: hidden; }
.ecran.repos, .ecran.repos video { cursor: none; }
.ecran:fullscreen { max-height: none; aspect-ratio: auto; border-radius: 0; }

.ecran-nom {
  position: absolute; inset: 0; margin: 0; padding: 4rem 1.5rem; display: grid; place-items: center; text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; pointer-events: none;
}
.ecran-nom:empty { display: none; }

.haut {
  position: absolute; inset: 0 0 auto 0; padding: 14px 16px 36px; pointer-events: none;
  font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent);
  transition: opacity .25s ease;
}
.haut span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran.vide .haut { display: none; }

.grand-lire, .activer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  color: #fff; border: 0; cursor: pointer;
}
.grand-lire {
  display: grid; place-items: center; width: 72px; height: 72px; padding: 0;
  background: rgba(255, 255, 255, .16); border-radius: 50%; transition: background .15s ease;
}
.grand-lire:hover { background: rgba(255, 255, 255, .28); }
.grand-lire svg { width: 32px; height: 32px; }
.activer {
  padding: 10px 18px; font-weight: 700; color: #15141c; background: var(--ecran-accent);
  border-radius: 999px; box-shadow: var(--ombre-3);
}

.indic {
  position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none;
  display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 20px;
  font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .6); border-radius: 38px;
  opacity: 0; transform: translate(-50%, -50%) scale(.9);
}
.indic.vu { animation: indic .7s ease-out; }
@keyframes indic {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* ---------- commandes ---------- */
.commandes {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: 28px 8px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  transition: opacity .25s ease;
}
.ecran.vide .commandes { display: none; }
.ecran.repos .commandes, .ecran.repos .haut { opacity: 0; pointer-events: none; }
.ecran.repos .commandes * { pointer-events: none; }

.barre { position: relative; height: 18px; margin: 0 8px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.piste { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, .3); border-radius: 3px; transition: height .12s ease; }
.piste i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ecran-accent); border-radius: 3px; }
.piste i::after {
  content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--ecran-accent); border-radius: 50%; transform: scale(0); transition: transform .12s ease;
}
.barre:hover .piste, .barre.glisse .piste { height: 6px; }
.barre:hover .piste i::after, .barre.glisse .piste i::after { transform: scale(1); }

.rangee { display: flex; align-items: center; gap: 2px; }
.espace { flex: 1; }
.rond {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: #fff; background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  transition: background .15s ease;
}
.rond:hover { background: rgba(255, 255, 255, .16); }
.rond:disabled { opacity: .35; cursor: default; background: transparent; }
.rond[aria-pressed='true'] { color: var(--ecran-accent); }
.rond:focus-visible { outline: 2px solid var(--ecran-accent); outline-offset: -2px; }
.temps { margin: 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.volume { display: inline-flex; align-items: center; }
.volume input { width: 0; opacity: 0; accent-color: var(--ecran-accent); transition: width .18s ease, opacity .18s ease; }
.volume:hover input, .volume:focus-within input { width: 5.5rem; margin: 0 8px 0 2px; opacity: 1; }
@media (max-width: 899px) {
  #cinema, .volume input { display: none; }
  .temps { margin: 0 4px; font-size: 12px; }
}

/* ---------- file de lecture ---------- */
.file { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
@media (max-width: 899px) { .file { padding: var(--space-2) 16px 0; } }
.file-tete { display: flex; align-items: center; gap: 4px; padding-bottom: var(--space-1); }
.file-tete h2 { flex: 1; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.bascule {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  transition: background .15s ease, color .15s ease;
}
.bascule:hover { background: var(--bg-2); color: var(--text-h); }
.bascule[aria-pressed='true'] { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }
.bascule:focus-visible, .piste-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.suite { margin: 0; padding: 0; list-style: none; overflow-y: auto; min-height: 0; }
.piste-file {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  text-align: left; color: var(--text); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.piste-file:hover { background: var(--bg-2); }
.piste-file svg { color: var(--text-dim); }
.piste-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piste-duree { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }