/* ==========================================================================
   style.css — mise en forme du site

   Sommaire
     1. Couleurs (thème clair et sombre)
     2. Base
     3. Cadre de la page (en-tête, contenu, pied de page)
     4. Titres et textes courants
     5. Accueil : grille de projets et cartes
     6. Artistes et page À propos
     7. Page d'un projet
     8. Liste des morceaux
     9. Lecteur fixe en bas
    10. Téléphone et préférences d'accessibilité

   Pour changer l'allure du site, commence par les couleurs (section 1)
   et la largeur maximale du contenu (.wrap, section 3).
   ========================================================================== */


/* 1. COULEURS ------------------------------------------------------------
   Toutes les couleurs passent par ces variables. Le thème sombre prend le
   relais automatiquement si l'appareil est réglé en mode sombre. */
:root {
  --bg: #fafaf9;          /* fond de la page */
  --surface: #ffffff;     /* fond de l'en-tête, du lecteur, des boutons */
  --ink: #1c1c1e;         /* texte principal */
  --muted: #6c6c70;       /* texte secondaire (dates, durées, légendes) */
  --line: #e3e3e0;        /* filets et bordures */
  --accent: #3a4f8f;      /* couleur d'accent (bouton principal, morceau en cours) */
  --accent-ink: #ffffff;  /* texte posé sur la couleur d'accent */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141416;
    --surface: #1c1c1f;
    --ink: #ececee;
    --muted: #9a9aa0;
    --line: #2c2c30;
    --accent: #8fa3e6;
    --accent-ink: #101114;
  }
}


/* 2. BASE ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* Le corps est une colonne qui occupe au moins tout l'écran :
   le contenu (main) s'étire, ce qui colle le pied de page en bas. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: inherit;
}

/* Contour visible quand on navigue au clavier */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* 3. CADRE DE LA PAGE ---------------------------------------------------- */

/* .wrap : colonne centrée qui limite la largeur du contenu.
   Utilisée par l'en-tête, le contenu, le pied de page et le lecteur. */
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}

/* En-tête : nom du site à gauche, navigation à droite */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

header.site a {
  text-decoration: none;
}

header.site .brand {
  font-weight: 600;
  font-size: 17px;
}

header.site nav {
  display: flex;
  gap: 20px;
}

header.site nav a {
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

header.site nav a:hover {
  color: var(--ink);
}

/* Page courante : soulignée avec la couleur d'accent */
header.site nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Contenu principal. "main.wrap" (et non ".wrap" seul) pour que ces marges
   verticales l'emportent sur le "padding: 0 28px" de .wrap. */
main.wrap {
  padding-top: 56px;
  padding-bottom: 40px;
  width: 100%;
  flex: 1 0 auto;      /* prend toute la place libre : pousse le pied de page en bas */
}

/* Pied de page */
.foot {
  width: 100%;
  flex: none;
}

footer {
  color: var(--muted);
  font-size: 13px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  margin-top: 64px;
}


/* 4. TITRES ET TEXTES COURANTS ------------------------------------------- */
h1 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 12px;
  font-weight: 650;
}

/* Phrase d'introduction sous un titre de page */
.lead {
  color: var(--muted);
  margin: 0 0 48px;
  line-height: 1.6;
}

/* Blocs de texte rédigé (À propos, bio d'un artiste) */
.prose p {
  margin: 0 0 1.25em;
  line-height: 1.65;
}

.prose h2 {
  font-size: 18px;
  margin: 2.8em 0 .9em;
}


/* 5. ACCUEIL : GRILLE DE PROJETS ----------------------------------------- */

/* Quand il y a plusieurs artistes, chaque artiste a sa section (.group) */
.group {
  margin: 0 0 60px;
}

/* ">" : ne concerne que le titre de l'artiste, pas les titres des cartes */
.group > h2 {
  font-size: 18px;
  margin: 0 0 22px;
  font-weight: 600;
}

.group > h2 a {
  text-decoration: none;
}

.group > h2 a:hover {
  text-decoration: underline;
}

/* Grille : autant de colonnes de 220 px minimum que la largeur le permet */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 44px 28px;                 /* vertical, horizontal */
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  display: block;
  text-decoration: none;
}

/* Pochette carrée. Sans image, un dégradé de couleur est généré (voir utils.js)
   et le titre du projet s'affiche en bas à gauche. */
.cover {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
}

.card:hover .cover {
  border-color: var(--ink);
}

/* Titre du projet sous la pochette, puis type et date juste en dessous */
.card h2 {
  font-size: 16px;
  line-height: 1.3;
  margin: 10px 0 0;      /* 10px = écart pochette / titre */
  font-weight: 600;
}

.card p {
  margin: 2px 0 0;       /* 2px = écart titre / date */
  color: var(--muted);
  font-size: 14px;
}


/* 6. ARTISTES ET PAGE À PROPOS ------------------------------------------- */

/* Page d'un artiste : photo (optionnelle) à gauche, nom et bio à droite */
.artist-head {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 52px;
}

.artist-head h1 {
  margin-bottom: 14px;
}

.photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  flex: none;
}

/* Liste des artistes sur la page À propos */
.artists {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.artists li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.artists a {
  font-weight: 600;
  text-decoration: none;
}

.artists a:hover {
  text-decoration: underline;
}

.artists p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.avatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
}

/* Bloc contact (e-mail et liens) */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.links li {
  margin: 0 0 10px;
}


/* 7. PAGE D'UN PROJET ---------------------------------------------------- */

/* Lien « Tous les projets » en haut de page */
.back {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.back:hover {
  color: var(--ink);
}

/* Deux colonnes : pochette à gauche, informations et morceaux à droite */
.project {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 52px;
  align-items: start;
}

.project .cover {
  width: 100%;
}

/* Ligne d'infos : artiste · type, date · nombre de morceaux · durée totale */
.meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 22px;
}

.who {
  color: var(--muted);
  text-decoration: none;
}

.who:hover {
  color: var(--ink);
  text-decoration: underline;
}

.desc {
  margin: 0 0 30px;
  line-height: 1.65;
}

/* Boutons « Tout écouter » et « Tout télécharger » */
.actions {
  margin: 0 0 36px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--ink);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}


/* 8. LISTE DES MORCEAUX -------------------------------------------------- */

.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Une ligne = numéro | bouton lecture | titre | durée | téléchargement */
.track {
  display: grid;
  grid-template-columns: 36px 28px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
}

.track .n {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

/* Morceau en cours de lecture */
.track.playing .t {
  color: var(--accent);
  font-weight: 600;
}

.play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.play:hover {
  border-color: var(--ink);
}

.play svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Mentions à côté du titre : « feat. … » (invités) et « par … » (solo d'un tiers) */
.feat,
.par {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  margin-left: 6px;
}

.feat a,
.par a {
  color: inherit;
}

/* Durée du morceau (remplie automatiquement, voir durations.js) */
.d {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;   /* chiffres de même largeur : colonne alignée */
  min-width: 3.2em;
  text-align: right;
}

.dl {
  font-size: 14px;
  color: var(--muted);
}

.dl:hover {
  color: var(--ink);
}


/* 9. LECTEUR FIXE EN BAS ------------------------------------------------- */

/* Caché sous l'écran tant qu'aucun morceau n'est lancé (classe .on ajoutée par player.js) */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .2s;
}

.player.on {
  transform: none;
}

/* Quatre colonnes : titre | boutons | barre de progression | volume */
.player .wrap {
  display: grid;
  grid-template-columns: minmax(120px, 220px) auto 1fr auto;
  gap: 20px;
  align-items: center;
  height: 80px;
}

/* Titre du morceau et nom du projet (coupés avec « … » si trop longs) */
.now {
  min-width: 0;
}

.now b {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now small {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Boutons précédent / lecture-pause / suivant */
.ctrl {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ctrl button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
}

.ctrl button:hover {
  background: var(--bg);
}

.ctrl svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ctrl .main {
  background: var(--accent);
  color: var(--accent-ink);
}

.ctrl .main:hover {
  background: var(--accent);
}

/* Barre de progression avec temps écoulé et durée */
.seek {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seek input {
  flex: 1;
  accent-color: var(--accent);
  min-width: 0;
}

.vol {
  width: 80px;
  accent-color: var(--accent);
}


/* 10. TÉLÉPHONE ET PRÉFÉRENCES D'ACCESSIBILITÉ --------------------------- */

/* Écrans de 720 px de large et moins */
@media (max-width: 720px) {

  /* Cadre : marges plus étroites, en respectant l'encoche en mode paysage */
  .wrap {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  header.site .wrap {
    height: 60px;
  }

  main.wrap {
    padding-top: 36px;
  }

  h1 {
    font-size: 24px;
  }

  .lead {
    margin-bottom: 36px;
  }

  /* Accueil : deux colonnes de pochettes */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .cover {
    padding: 10px;
    font-size: 13px;
  }

  .card h2 {
    font-size: 15px;
    margin-top: 10px;
  }

  .card p {
    font-size: 13px;
  }

  .group {
    margin-bottom: 44px;
  }

  /* Page projet : une seule colonne, pochette au-dessus */
  .project {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .project .cover {
    max-width: 240px;
    font-size: 15px;
    padding: 12px;
  }

  .artist-head {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 36px;
  }

  /* Boutons plus grands, plus faciles à toucher */
  .btn {
    padding: 12px 18px;
    font-size: 15px;
  }

  .actions {
    margin-bottom: 28px;
  }

  /* Liste des morceaux : le titre prend toute la largeur,
     « Télécharger » passe sur une ligne en dessous.
     Disposition : ligne 1 = bouton | titre | durée, ligne 2 = (vide) | télécharger */
  .track {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "play t d"
      ".    dl dl";
    gap: 2px 12px;
    padding: 14px 0;
    align-items: center;
  }

  .track .n {
    display: none;
  }

  .track .play {
    grid-area: play;
    width: 40px;
    height: 40px;
  }

  .track .play svg {
    width: 14px;
    height: 14px;
  }

  .track .t {
    grid-area: t;
    line-height: 1.35;
  }

  .track .d {
    grid-area: d;
    min-width: 0;
  }

  .track .dl {
    grid-area: dl;
    padding: 6px 0;
  }

  /* « feat. » et « par » passent sous le titre */
  .feat,
  .par {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }

  /* Lecteur : deux lignes, boutons plus grands, barre de gestes de l'iPhone respectée */
  .player {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .player .wrap {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 6px 12px;
  }

  .ctrl {
    gap: 4px;
  }

  .ctrl button {
    width: 44px;
    height: 44px;
  }

  .ctrl .main {
    width: 48px;
    height: 48px;
  }

  .ctrl svg {
    width: 18px;
    height: 18px;
  }

  .seek {
    grid-column: 1 / -1;   /* la barre occupe toute la deuxième ligne */
    order: 3;
  }

  .vol {
    display: none;         /* sur téléphone, le volume se règle avec les boutons de l'appareil */
  }
}

/* Pas d'animation pour les personnes qui l'ont désactivée dans leur système */
@media (prefers-reduced-motion: reduce) {
  .player {
    transition: none;
  }
}