/* Conteneur de l'image */
.magazine-img {
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* Arrondir les coins pour un effet élégant */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ajouter une ombre douce autour de l'image */
  transition: transform 0.3s ease; /* Transition douce pour l'effet global */
}
.magazine-img:hover {
  transform: scale(0.97);
}

/* Image avec animation de zoom */
.magazine-img img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease, filter 0.3s ease; /* Animation fluide pour zoom et filtre */
}

/* Effet de zoom élégant au survol de l'image */
.magazine-img:hover img {
  transform: scale(1.2); /* Agrandissement subtil de l'image */
  filter: brightness(
    0.8
  ); /* Légère réduction de la luminosité pour mettre en avant l'overlay */
}

/* Style de l'overlay */
.title-overlay {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  width: 100%;
  background: white; /* Fond sombre semi-transparent */
  color: #fff;
  text-align: center;
  padding: 20px 10px;
  border-top: 2px solid #fff; /* Bordure blanche fine pour un effet élégant */
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.5s ease; /* Transition fluide pour couleur de fond */
  transform: translateY(0);
}

/* Animation de l'overlay au survol */
.magazine-img:hover .title-overlay {
  opacity: 1; /* L'overlay devient visible */
  transform: translateY(0); /* L'overlay se déplace vers le haut */
}

/* Style du texte dans l'overlay */
.title-overlay h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.title-overlay p.event-date {
  font-size: 0.9rem;
  font-weight: 400;
  margin: 5px 0;
}








/* annimation centre de formation */
/* Animation d'apparition avec zoom progressif et translation latérale */
.magazine-item {
  opacity: 0;
  transform: translateX(-50px) scale(0.7); /* Commencer avec une translation et un zoom réduit */
  transition: opacity 1s ease, transform 1s ease;
}

/* Appliquer un retard pour chaque élément en fonction de son index */
.magazine-item.visible {
  opacity: 1;
  transform: translateX(0) scale(1); /* Finalement, revenir à la position normale et taille normale */
}

/* Animation pour chaque élément */
.magazine-item:nth-child(1) {
  transition-delay: 0.2s;
}
.magazine-item:nth-child(2) {
  transition-delay: 0.4s;
}
.magazine-item:nth-child(3) {
  transition-delay: 0.6s;
}
.magazine-item:nth-child(4) {
  transition-delay: 0.8s;
}
.magazine-item:nth-child(5) {
  transition-delay: 1s;
}
.magazine-item:nth-child(6) {
  transition-delay: 1.2s;
}