/* =========================
   TITRE DE SECTION (div.content-selection > h2)
   ========================= */
.content-selection {
  text-align: center;
  margin: 30px 0;
}

.content-selection h2 {
  margin: 0;
  font-size: 2rem;
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

/* =========================
   SÉPARATEUR (hr.separator)
   ========================= */
.separator {
  width: 80%;
  height: 2px;
  margin: 40px auto;

  border: none;
  background: #0ff;
  box-shadow: 0 0 10px #0ff;
}

/* =========================
   GRILLE DES CARTES (div.section-cards)
   ========================= */
.section-cards {
  display: grid;

  /* 5 colonnes si possible, sinon ça s'adapte */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;

  padding: 50px;

  /* Centre les cartes si leur largeur fixe ne remplit pas parfaitement */
  justify-items: center;
}

/* =========================
   CARTE (div.card > img + .card-title)
   ========================= */
.card {
  position: relative;
  overflow: hidden;

  width: 250px;
  height: 350px;

  border-radius: 10px;
  background-color: transparent;
  box-shadow: 0 0 10px #0ff;

  transition: transform 0.3s;
}

/* (Optionnel) léger zoom de la carte au hover, si tu le veux */
.card:hover {
  transform: translateY(-4px);
}

/* Image de la carte */
.card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transition: transform 0.3s;
}

/* Zoom de l'image au hover */
.card:hover img {
  transform: scale(1.1);
}

/* Titre en bas de la carte */
.card-title {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  padding: 10px;

  text-align: center;
  font-size: 1.2rem;
  color: #0ff;

  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 -5px 15px rgba(0, 255, 255, 0.3);
}