/* ==========================================================================
   HOME — salutation, playlist, suggestions. Thème "Noir".
   Refonte : les carrousels de carrés gris "façon Spotify" -> des listes à
   filet 1px (cf. DESIGN.md #4). Une seule grande typo : le greeting.
   ========================================================================== */

.greet-block { position: relative; }

/* ---------- titres de section : Fraunces, pas d'eyebrow ni de capitales ---- */
#view-home .rail-block { margin-bottom: var(--s5); }
.rail-head { margin: var(--s5) 0 var(--s2); }
.rail-title { margin: 0; font-size: var(--t-title); font-weight: 600; letter-spacing: -0.012em; }

/* ---------- listes d'accueil : lignes réglées ---------- */
.home-rail-list { display: flex; flex-direction: column; }
.home-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 9px 2px;
  border: none; border-bottom: 1px solid var(--hairline);
  background: none; color: var(--ink);
  font-family: var(--font); text-align: left; cursor: pointer;
}
.home-row:last-child { border-bottom: none; }
.home-row:active { background: var(--surface-1); }
.home-row .cover { width: 44px; height: 44px; border-radius: 6px; }
.home-row .meta { flex: 1; min-width: 0; }
.home-row .row-go {
  margin-left: auto; flex-shrink: 0;
  color: var(--red); font-size: 17px; opacity: .9;
}
.home-empty {
  padding: var(--s3) 2px var(--s2);
  color: var(--ink-faint);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- stats : ligne discrète, sans capitales ---------- */
.stats-grid { display: flex; gap: var(--s5); margin: var(--s3) 2px var(--s4); flex-wrap: wrap; }
.stat-box { background: none; padding: 0; text-align: left; }
.stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 560; letter-spacing: -0.01em; }
.stat-num.grad-text { color: var(--ink); }
.stat-label { font-size: var(--t-micro); color: var(--ink-faint); margin-top: 2px; }

/* ---------- bannière install : discrète ---------- */
.install-banner {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2); padding: var(--s3) var(--s4);
  margin-bottom: var(--s3); color: var(--ink);
}
.install-banner[hidden] { display: none; }
.install-banner .grow { font-size: var(--t-meta); font-weight: var(--w-medium); }
.install-banner button {
  background: var(--ink); color: var(--bg); border: none; border-radius: var(--r-1);
  font-weight: var(--w-bold); padding: 8px 14px; cursor: pointer; font-family: var(--font);
}
.install-banner button:last-child { background: none; color: var(--ink-faint); padding: 8px; }

/* ---------- entrée : UN mouvement orchestré, une seule fois au chargement ---
   appliqué aux conteneurs statiques (jamais retirés du DOM par le JS) donc
   l'animation ne rejoue pas à chaque refresh de données. reduced-motion est
   neutralisé globalement dans animations.css. */
@keyframes home-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
#view-home .greet-block,
#view-home .rail-block {
  animation: home-rise var(--slow) var(--ease) both;
}
/* deux temps : le greeting, puis le reste. */
#view-home .rail-block { animation-delay: 80ms; }