/* Page musique. Le lecteur et les listes de pistes sont dans lecteur.css ; les variables, les
   en-têtes de module et les prises viennent de site.css. */

/* ASTROSPORA : pochette en couleur, à côté le titre, le lecteur et les pas */
.album__grille { display: grid; gap: var(--e-5); }
.album__pochette img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); }
.album__titre { margin-bottom: var(--e-3); }
.album__texte { max-width: var(--largeur-texte); color: var(--pierre); margin-bottom: var(--e-6); }
.album__liens { margin-top: var(--e-6); }

@media (min-width: 52rem) {
  .album__grille { grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
  .album__pochette { position: sticky; top: calc(4rem + var(--e-4)); }
}

/* Discographie 2008-2021 : une liste de lignes. Sur téléphone (et sans JavaScript), la
   ligne se déplie sur place ; à partir de 900 px, musique.js pose la classe a-panneau et
   la sortie choisie s'affiche dans le panneau collant de droite. */
.discographie__intro { color: var(--pierre); max-width: var(--largeur-texte); margin-bottom: var(--e-5); }
.disques { border-bottom: 1px solid var(--filet); }
.disques__entete, .disque__resume {
  display: grid;
  grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr) 1rem;
  column-gap: var(--e-3);
  align-items: center;
}
.disques__entete {
  margin: 0;
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--bronze);
  color: var(--pierre);
  font-family: var(--mono);
  font-size: var(--taille-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.disque { border-top: 1px solid var(--filet); }
.disques__entete + .disque { border-top: 0; }
.disque__resume { min-height: 3.5rem; padding-block: var(--e-2); }
.disque__resume:hover { background: var(--sarcelle); }
.disque__vignette img { width: 2.5rem; height: 2.5rem; object-fit: cover; background: var(--sarcelle); border-radius: 2px; }
.disque__annee { color: var(--pierre); font-family: var(--mono); font-size: var(--taille-xs); }
.disque__nom { padding-top: 0.15em; font-family: var(--titre); font-size: var(--taille-s); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.35; }
.disque__artiste { display: block; color: var(--pierre); font-family: var(--texte); font-size: var(--taille-s); letter-spacing: 0; text-transform: none; }
.disque__type, .disque__nb { display: none; color: var(--pierre); font-family: var(--mono); font-size: var(--taille-xs); text-transform: uppercase; }
.disque__nb { text-align: right; }
.disque[open] .disque__annee { color: var(--ivoire); }

.disque__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-3) 0 var(--e-5);
}
/* Le titre du détail ne sert que dans le panneau : dans la ligne, le résumé le porte déjà */
.disque__entete { display: none; }
.disque__titre { margin: 0 0 var(--e-2); font-family: var(--titre); font-size: var(--taille-xl); font-weight: 300; line-height: 1.2; letter-spacing: var(--chasse-titre); text-transform: uppercase; }
.disque__titre:focus { outline: none; }
.disque__titre:focus-visible { outline: 2px solid var(--soleil); outline-offset: 2px; }
.disque__meta { margin: 0; }
.disque__pochette { display: none; } /* sur téléphone, la vignette de la ligne suffit */
.disque__pochette img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sarcelle); border-radius: var(--rayon); }
.disque__corps { display: grid; gap: var(--e-4); min-width: 0; }
.disque__texte { margin: 0; color: var(--pierre); max-width: var(--largeur-texte); }

@media (min-width: 40rem) {
  .disques__entete, .disque__resume { grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr) 4.5rem 3rem 1rem; }
  .disque__type, .disque__nb { display: block; }
  .disques__entete .disque__nb { text-align: right; }
  .disque__detail { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--e-5); padding-left: calc(2.5rem + var(--e-3)); }
  .disque__pochette { display: block; }
}

/* Ordinateur : la liste à gauche, le panneau collant à droite. La ligne choisie garde sa
   hauteur (son détail est parti dans le panneau), elle est seulement marquée. */
@media (min-width: 56.25rem) {
  .a-panneau .discographie__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    gap: var(--e-6);
    align-items: start;
  }
  .a-panneau .disque.est-choisie > .disque__resume { background: var(--sarcelle); }
  .a-panneau .disque.est-choisie .disque__nom { color: var(--soleil-clair); }
  .disco-panneau {
    position: sticky;
    top: calc(4rem + var(--e-4));
    max-height: calc(100vh - 4rem - 2 * var(--e-4));
    overflow-y: auto;
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    background: rgb(11 18 24 / 0.88);
    padding: var(--e-5);
  }
  .disco-panneau .disque__detail { grid-template-columns: 1fr; padding: 0; gap: var(--e-4); }
  .disco-panneau .disque__entete { display: block; }
  body:has(.lecteur.est-flottant) .disco-panneau { max-height: calc(100vh - 4rem - 2 * var(--e-4) - 6rem); }
}

.discographie__partout { margin-top: var(--e-7); }

/* Trois repères d'écoute sous les pistes d'ASTROSPORA : le titre en mono, l'explication à côté */
.album__reperes { margin: var(--e-4) 0 0; border-top: 1px solid var(--filet); }
.album__reperes div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--filet); }
.album__reperes dt { font-family: var(--mono); font-size: var(--taille-xs); text-transform: uppercase; letter-spacing: var(--chasse-libelle); color: var(--ivoire); }
.album__reperes dd { margin: 0; color: var(--pierre); font-size: var(--taille-s); }