/* =====================================================================
   Page "Ma liste" (watchlist.php)
   ===================================================================== */

.watchlist-page {
  padding-top: 32px;
  padding-bottom: 64px;
}

.watchlist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.watchlist-head h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  color: var(--ink);
}
.watchlist-head__sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-dim);
}

.watchlist-grid,
.watchlist-loading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.watchlist-skeleton {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%;
  animation: watchlist-shimmer 1.4s ease-in-out infinite;
}

@keyframes watchlist-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 600px) {
  .watchlist-grid,
  .watchlist-loading {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
}