.title_images_cdd_cdi {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  position: absolute;
  z-index: 10;
}

.title_images_cdd_cdi[data-index="0"] {
  bottom: 50px;
  left: 50px;
}

.title_images_cdd_cdi[data-index="1"] {
  bottom: 30px;
  left: 40px;
}

.title_images_cdd_cdi[data-index="2"] {
  bottom: 50px;
  left: 60px;
}

.cards-offres {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-offre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 20px;
}

.card-offre a {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid rgba(184, 183, 184, 0.3);
    backdrop-filter: blur(10px);
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Garde la couleur du texte */
    width: 100%;
}

.card-offre a:hover{
    border: 1px solid #823F91;
}

.bg-icon {
  display: flex;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: rgba(130, 63, 145, 0.1);
}

.link-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}


@media screen and (min-width: 768px) {
    .cards-offres {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center; /* Centrage des cartes si elles ne prennent pas toute la largeur */
        flex-wrap: wrap; /* Permet un retour à la ligne si nécessaire */
    }

    .card-offre a {
        flex: 1; /* Permet à toutes les cartes de prendre la même largeur */
        max-width: 270px; /* Ajuste la largeur max selon ton design */
        min-width: 250px; /* Évite que les cartes deviennent trop petites */
    }
}