/* modules/lecteur/public/lecteur.css — l'allure par défaut du lecteur.
 * ---------------------------------------------------------------------------
 * Neutre, et réglable sans réécrire : un thème pose ces variables sur :root
 * (ou redéfinit les classes `lec-*`, ou remplace le gabarit tout entier).
 *
 *   --lec-fond, --lec-texte, --lec-doux, --lec-accent, --lec-sur-accent,
 *   --lec-hauteur, --lec-police, --lec-mono, --lec-z
 */

:root {
  --lec-fond: #111;
  --lec-texte: #f4f2ee;
  --lec-doux: #a19d95;
  --lec-accent: #f4f2ee;
  --lec-sur-accent: #111;
  --lec-hauteur: 76px;
  --lec-police: inherit;
  --lec-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --lec-z: 60;
}

/* La page garde de la place pour la barre : rien ne passe dessous. */
html.lecteur-visible body { padding-bottom: var(--lec-hauteur); }
html.lecteur-plein { overflow: hidden; }

.lec[hidden], .lec [hidden] { display: none !important; }

.lec { font-family: var(--lec-police); color: var(--lec-texte); }
.lec svg { width: 20px; height: 20px; fill: currentColor; }
.lec button { font: inherit; color: inherit; }

.lec-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--lec-z);
  height: var(--lec-hauteur); padding: 0 20px;
  display: grid; grid-template-columns: minmax(0, 300px) auto minmax(0, 1fr) auto; gap: 20px; align-items: center;
  background: var(--lec-fond); box-shadow: 0 -1px 0 color-mix(in srgb, var(--lec-texte) 14%, transparent);
}

.lec-b {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.lec-b:hover { background: color-mix(in srgb, var(--lec-texte) 10%, transparent); }
.lec-b:focus-visible, .lec a:focus-visible, .lec input:focus-visible { outline: 2px solid var(--lec-accent); outline-offset: 2px; }
.lec-b--cadre { border: 1px solid color-mix(in srgb, var(--lec-texte) 28%, transparent); border-radius: 50%; }
.lec-b--signal { animation: lec-signal .7s ease-out; }
@keyframes lec-signal { 0% { box-shadow: 0 0 0 0 var(--lec-accent); } 100% { box-shadow: 0 0 0 12px transparent; } }

.lec .lec-jouer { width: 44px; height: 44px; background: var(--lec-accent); color: var(--lec-sur-accent); }
.lec .lec-jouer:hover { background: var(--lec-accent); filter: brightness(1.08); }
.lec-ic-pause, .lec--joue .lec-ic-jouer { display: none; }
.lec--joue .lec-ic-pause { display: contents; }

.lec-pochette { width: 52px; height: 52px; padding: 0; border: 0; background: color-mix(in srgb, var(--lec-texte) 10%, transparent); cursor: pointer; flex: none; }
.lec-pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lec-barre > .lec-pochette { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.lec-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 66px; }
.lec-titre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lec-barre .lec-infos { cursor: pointer; }
.lec-sous { font-size: .85em; color: var(--lec-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lec-sous a, .lec-plein-artiste a { color: inherit; }

.lec-commandes { display: flex; align-items: center; gap: 6px; }
.lec-avancee { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lec-temps, .lec-duree { font: 12px var(--lec-mono); color: var(--lec-doux); min-width: 2.6em; }
.lec-temps { text-align: right; }
.lec-badge { font: 10px var(--lec-mono); text-transform: uppercase; color: var(--lec-doux); border: 1px solid currentColor; padding: 1px 5px; }

/* La piste : une forme d'onde (ou une barre), la partie jouée en accent, et
   par-dessus un VRAI curseur, invisible mais là — clavier, lecteurs d'écran. */
.lec-piste { --lec-avance: 0%; position: relative; flex: 1; min-width: 0; height: 32px; }
.lec-onde, .lec-onde-joue { position: absolute; top: 0; bottom: 0; left: var(--lec-onde-de, 0%); right: calc(100% - var(--lec-onde-a, 100%)); display: flex; align-items: center; gap: 1px; }
.lec-onde span { flex: 1 1 0; min-height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--lec-texte) 28%, transparent); }
.lec-onde-joue { clip-path: inset(0 calc(100% - var(--lec-avance-onde, var(--lec-avance))) 0 0); }
.lec-onde .lec-onde-joue { left: 0; right: 0; }   /* imbriquée : déjà dans la fenêtre de l'onde */
/* Un extrait dans un morceau plus long : le morceau entier en pointillé,
   la fenêtre qu'on peut entendre en évidence. */
.lec-piste[data-lec-zone]::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed color-mix(in srgb, var(--lec-texte) 30%, transparent); pointer-events: none; }
.lec-piste[data-lec-zone]::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--lec-zone-de, 0%); right: calc(100% - var(--lec-zone-a, 100%)); border-radius: 2px; background: color-mix(in srgb, var(--lec-accent) 12%, transparent); pointer-events: none; }
.lec-onde-joue span { background: var(--lec-accent); }
/* Sans forme d'onde : une barre fine, même principe. */
.lec-onde--plate span { height: 2px; }
.lec-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.lec-outils { display: flex; align-items: center; gap: 8px; }
.lec-volume { display: flex; align-items: center; gap: 6px; color: var(--lec-doux); }
.lec-volume input { width: 80px; accent-color: var(--lec-accent); }

/* ── La file ─────────────────────────────────────────────────────────────── */

.lec-file {
  position: fixed; right: 20px; bottom: calc(var(--lec-hauteur) + 12px); z-index: var(--lec-z);
  width: min(420px, calc(100vw - 40px)); max-height: min(520px, 70vh); overflow: auto;
  background: var(--lec-fond); border: 1px solid color-mix(in srgb, var(--lec-texte) 18%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lec-file-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; position: sticky; top: 0; background: inherit; }
.lec-file-titre { flex: 1; font-weight: 700; }
.lec-lien { background: none; border: 0; color: var(--lec-doux); cursor: pointer; text-decoration: underline; }
.lec-file-liste, .lec-plein-suite-liste { list-style: none; margin: 0; padding: 0; }
.lec-file-liste button, .lec-plein-suite-liste button {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 16px; background: none; border: 0; text-align: left; cursor: pointer;
}
.lec-file-liste button:hover, .lec-plein-suite-liste button:hover { background: color-mix(in srgb, var(--lec-texte) 7%, transparent); }
.lec-file-liste button[aria-current] { color: var(--lec-accent); background: color-mix(in srgb, var(--lec-accent) 10%, transparent); }
.lec-file-liste img, .lec-plein-suite-liste img, .lec-vide { width: 40px; height: 40px; object-fit: cover; display: block; background: color-mix(in srgb, var(--lec-texte) 10%, transparent); }
.lec-l-t { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lec-l-a { font-size: .8em; color: var(--lec-doux); overflow: hidden; text-overflow: ellipsis; }
.lec-l-d { font: 12px var(--lec-mono); color: var(--lec-doux); }

/* ── Le plein écran ──────────────────────────────────────────────────────── */

.lec-plein {
  position: fixed; inset: 0; z-index: calc(var(--lec-z) + 1); overflow: auto;
  background: var(--lec-fond); display: grid; grid-template-rows: auto 1fr auto;
  /* Une seule colonne, bornée à l'écran : sans `minmax(0, …)`, la colonne
     suivait la largeur de l'onde (des centaines de barres) et le tout
     débordait des deux côtés sur téléphone. */
  grid-template-columns: minmax(0, 1fr); overflow-x: hidden;
}
.lec-plein-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lec-plein-fond img { width: 120%; height: 120%; margin: -10%; object-fit: cover; filter: blur(90px) saturate(1.4); opacity: .4; }
.lec-plein > :not(.lec-plein-fond) { position: relative; }
.lec-plein-tete { display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(20px, 4vw, 48px); }
.lec-plein-surtitre, .lec-plein-meta, .lec-plein-suite-titre { font: 12px var(--lec-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lec-doux); }
.lec-plein-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: 0 clamp(20px, 6vw, 96px); }
@media (min-width: 820px) { .lec-plein-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lec-plein-pochette { justify-self: center; width: min(480px, 70vw, 42svh); aspect-ratio: 1; }
.lec-plein-pochette img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 40px 100px rgba(0, 0, 0, .55); }
.lec-plein-infos { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 620px; }
.lec-plein-titre { font-size: clamp(28px, 4.4vw, 56px); font-weight: 800; line-height: 1; }
.lec-plein-artiste { font-size: 1.15em; }
.lec-piste--grande { flex: none; height: 64px; margin-top: 16px; }
.lec-plein-temps { display: flex; justify-content: space-between; font: 13px var(--lec-mono); color: var(--lec-doux); }
.lec-plein-commandes { display: flex; align-items: center; gap: 24px; padding-top: 8px; }
.lec-plein-commandes .lec-b svg { width: 28px; height: 28px; }
.lec .lec-jouer--grand { width: 80px; height: 80px; }
.lec-jouer--grand svg { width: 30px !important; height: 30px !important; }
.lec-plein-suite { display: flex; gap: 16px; align-items: center; padding: 20px clamp(20px, 4vw, 48px); border-top: 1px solid color-mix(in srgb, var(--lec-texte) 12%, transparent); }
.lec-plein-suite-liste { display: flex; gap: 8px; flex: 1; min-width: 0; overflow: auto; }
.lec-plein-suite-liste li { flex: 1 1 0; min-width: 180px; }

.lec-message {
  position: fixed; left: 50%; bottom: calc(var(--lec-hauteur) + 12px); transform: translateX(-50%); z-index: var(--lec-z);
  padding: 8px 14px; background: var(--lec-fond); color: var(--lec-texte); font-size: 14px;
}
.lec-message:empty { display: none; }

/* ── Petit écran : la barre se resserre ──────────────────────────────────── */

@media (max-width: 760px) {
  .lec-barre { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 12px; }
  .lec-barre > .lec-pochette { left: 12px; width: 48px; height: 48px; }
  .lec-infos { padding-left: 58px; }
  .lec-commandes [data-lec="prec"], .lec-commandes [data-lec="suiv"], .lec-barre .lec-avancee, .lec-outils { display: none; }
  .lec-barre::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: var(--lec-avance-barre, 0%); background: var(--lec-accent); }

  /* Le plein écran sur téléphone : tout tient dans la hauteur, les commandes
     au centre, sous le pouce. */
  .lec-plein-tete { padding: 14px 20px; }
  .lec-plein-corps { gap: 22px; align-content: center; }
  .lec-plein-infos { gap: 10px; }
  .lec-piste--grande { height: 48px; margin-top: 6px; }
  .lec-plein-commandes { justify-content: center; padding-top: 0; }
  .lec .lec-jouer--grand { width: 68px; height: 68px; }
  .lec-plein-suite { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 20px; }
  .lec-plein-suite-liste { scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lec-plein-suite-liste li { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
  .lec-plein-suite-liste .lec-l-d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lec-b--signal { animation: none; }
}