.page-content.page-cms h1 {

  text-align: center;

  margin-top: 30px;

  margin-bottom: 20px;

}



.page-content .section-card-content-catalogue {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1em;

  justify-content: center;

  margin: 20px auto !important;

  max-width: 1200px;

}



/* 🟦 Cartes par défaut (à partir du 9e) : format horizontal 250x139 */

.page-content .section-card-content-catalogue .catalogue-card {

  border-radius: 10px;

  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);

  cursor: pointer;

  box-sizing: border-box;

  position: relative;

  overflow: hidden;

  transition: opacity 0.5s ease, transform 0.5s ease;

  width: 100%;

  height: auto;

  aspect-ratio: 250 / 139;

}



/* 🟩 Les 8 premiers : format vertical 200x256 */

.page-content .section-card-content-catalogue .catalogue-card:nth-child(-n+8) {

  aspect-ratio: 200 / 256;

}



/* Hover effet */

.page-content .section-card-content-catalogue .catalogue-card:hover {

  transform: translateY(-5px);

  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

}



/* Background image */

.page-content .section-card-content-catalogue .catalogue-card.background-image,

.page-content .section-card-content-catalogue .catalogue-card.background-image.animes {

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  background-color: #f188c854;

}



/* ✅ Fond noir dégradé léger en bas (effet moderne) */

.catalogue-card-content-items {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100%;

  padding: 10px 15px;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 100%, transparent 100%);

  box-sizing: border-box;

  text-align: center;

  border-radius: 0 0 10px 10px;

}



.catalogue-card-title {

  color: #ffffff;

  font-size: 1em;

  font-weight: bold;

}



.catalogue-card-desc {

  color: #f9d401;

  font-size: 0.75em;

}



/* ✅ Responsive tablette (2 colonnes) */

@media (max-width: 1000px) {

  .page-content .section-card-content-catalogue {

    grid-template-columns: repeat(2, 1fr);

    max-width: 700px;

  }



  .page-content .section-card-content-catalogue .catalogue-card {

    aspect-ratio: 250 / 139;

  }



  .page-content .section-card-content-catalogue .catalogue-card:nth-child(-n+8) {

    aspect-ratio: 200 / 256;

  }

}



/* ✅ Responsive mobile (1 colonne) */

@media (max-width: 600px) {

  .page-content .section-card-content-catalogue {

    grid-template-columns: 1fr;

    max-width: 90%;

  }



  .page-content .section-card-content-catalogue .catalogue-card {

    aspect-ratio: 250 / 139;

  }



  .page-content .section-card-content-catalogue .catalogue-card:nth-child(-n+8) {

    aspect-ratio: 200 / 256;

  }

}