/* Général */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.offer-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f5f5;
  text-align: center;
  transition: transform 0.3s ease;
}

.offer-item img {
  width: 100%; /* Occupe toute la largeur du conteneur */
  height: auto; /* Garder les proportions originales de l'image */
  object-fit: cover; /* Remplir le conteneur tout en gardant les proportions */
}

.offer-item figcaption {
  padding: 10px;
  background: rgba(0, 0, 0, 0.5); /* Fond sombre pour le texte */
  color: #ffffff;
  border-radius: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s ease;
}

/* Effets Izmir */
.izmir {
  position: relative;
  padding: 30px; /* Ajout d'un padding pour éloigner les lignes de la bordure */
}

.izmir::before,
.izmir::after {
  content: '';
  position: absolute;
  background-color: #ffffff;
  transition: all 0.6s ease; /* Ralentir la transition */
}

.izmir::before {
  height: 6px; /* Épaisseur du trait ajustée */
  left: 20px; /* Décalage depuis la bordure gauche */
  bottom: 20px; /* Décalage depuis la bordure inférieure */
  right: 20px; /* Décalage depuis la bordure droite */
  transform: scaleX(0);
}

.izmir::after {
  width: 6px; /* Épaisseur du trait ajustée */
  top: 20px; /* Décalage depuis la bordure supérieure */
  bottom: 20px; /* Décalage depuis la bordure inférieure */
  right: 20px; /* Décalage depuis la bordure droite */
  transform: scaleY(0);
}

.izmir:hover::before {
  transform: scaleX(1);
}

.izmir:hover::after {
  transform: scaleY(1);
}

/* Fond dégradé au survol
*/
.offer-item:hover img {
  opacity: 0.2;
}

.offer-item:hover figcaption {
  color: #ffffff;
}

/* Transition */
.offer-item:hover {
  transform: scale(1.05);
}
figcaption h3 {
  margin-left: 10px;
  color: #ffffff;
}
figcaption{
    background-color: #1972b6;
}
/* Animation sur l'image */
.offer-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .offer-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease; /* Transition pour l'effet de zoom */
  }
  
  /* Effets Izmir */
  .izmir {
    position: relative;
    padding: 20px; /* Ajout d'un padding pour éloigner les lignes de la bordure */
  }
  
  .izmir::before,
  .izmir::after {
    z-index: 9999;
    content: '';
    position: absolute;
    background-color: #ffffff;
    transition: all 0.6s ease; /* Ralentir la transition */
  }
  
  .izmir::before {
    height: 6px; /* Épaisseur du trait ajustée */
    left: 20px; /* Décalage depuis la bordure gauche */
    bottom: 20px; /* Décalage depuis la bordure inférieure */
    right: 20px; /* Décalage depuis la bordure droite */
    transform: scaleX(0);
  }
  
  .izmir::after {
    width: 6px; /* Épaisseur du trait ajustée */
    top: 20px; /* Décalage depuis la bordure supérieure */
    bottom: 20px; /* Décalage depuis la bordure inférieure */
    right: 20px; /* Décalage depuis la bordure droite */
    transform: scaleY(0);
  }
  
  .izmir:hover::before {
    transform: scaleX(1);
  }
  
  .izmir:hover::after {
    transform: scaleY(1);
  }
  
  /* Fond dégradé au survol */

  .offer-item:hover img {
    opacity: 0.2;
    transform: scale(1.1); /* Zoom de l'image au survol */
  }
  
  .offer-item:hover {
    background-color:rgba(25, 114, 182, 0.9); /* Couleur de fond simple */
    color: #ffffff;
}
.still-available {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
  color: #ffffff;
  background-color: rgba(64, 231, 106, 0.9); /* Fond bleu avec opacité */
  padding: 15px 25px; /* Augmenter le padding pour plus d'espace autour du texte */
  border-radius: 8px; /* Bordures plus arrondies */
  font-size: 20px; /* Taille de police plus grande pour plus d'impact */
  font-weight: bold; /* Texte en gras pour une meilleure lisibilité */
  letter-spacing: 1px; /* Espacement des lettres pour un effet plus stylé */
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet 3D */
  border: 2px solid #ffffff; /* Ajout d'une bordure blanche pour plus de contraste */
}

.offer-item:hover .still-available {
  opacity: 1;
  transform: translate(-50%, -50%) rotateY(0deg);
}

.not-available {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
  color: #ffffff;
  background-color: rgba(253, 25, 25, 0.9); /* Fond bleu avec opacité */
  padding: 15px 25px; /* Augmenter le padding pour plus d'espace autour du texte */
  border-radius: 8px; /* Bordures plus arrondies */
  font-size: 20px; /* Taille de police plus grande pour plus d'impact */
  font-weight: bold; /* Texte en gras pour une meilleure lisibilité */
  letter-spacing: 1px; /* Espacement des lettres pour un effet plus stylé */
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet 3D */
  border: 2px solid #ffffff; /* Ajout d'une bordure blanche pour plus de contraste */
}

.offer-item:hover .not-available {
  opacity: 1;
  transform: translate(-50%, -50%) rotateY(0deg);
}