.title-design h2{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--color-primary);
    color: var(--color-text);
    font-family: "League Gothic", sans-serif;
    font-size: 3em;
}

/* Grille */
.affiche {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 50px 10%;
  justify-items: center;
}

.image-affiche {
  width: 100%;
  max-width: 350px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

/* Effet au survol */
.image-affiche:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

/* Agrandissement au clic */
.image-affiche:active {
  transform: scale(1.3); /* ⬅️ augmente selon la taille voulue */
  z-index: 10; /* la fait passer au-dessus des autres */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}


/* ---------- RESPONSIVE (1025px et moins) ---------- */
@media (max-width: 1025px) {
  .affiche {
    grid-template-columns: 1fr; /* une seule colonne */
    gap: 40px;                  /* espace vertical entre les affiches */
    padding: 30px 5%;
  }

  .image-affiche {
    max-width: 100%;            /* occupe toute la largeur dispo */
  }
}