/* compact-final.css — chargé en dernier pour forcer le format compact */
:root { --cover-h: 6cm; --video-h: 6cm; }

main .grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

main .book-card,
main .video-card {
  max-width: 170px !important;
  width: 170px !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
}

main .book-card img,
main .hero-covers img,
main img[src*="assets/"] {
  height: var(--cover-h) !important;
  max-height: var(--cover-h) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main video,
main .book-card video,
main .video-card video {
  height: var(--video-h) !important;
  max-height: var(--video-h) !important;
  width: 100% !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main .book-info {
  padding: 8px !important;
}

main .book-info h3,
main .video-card h3 {
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
  margin: 4px 0 !important;
}

main .eyebrow {
  font-size: 0.58rem !important;
  margin: 0 0 3px !important;
}

main .button {
  padding: 5px 8px !important;
  font-size: 0.7rem !important;
  margin-top: 4px !important;
}

main .section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

main .hero {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

main .hero-inner {
  grid-template-columns: 1fr !important;
}

main .hero-covers {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

@media (min-width: 900px) {
  main .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
}