.bandeau {
  background-color: #1b2a4e;
  color: white; /* Couleur du texte */
  font-size: 20px; /* Taille de la police */
}


.message {
  opacity: 0; /* Rendre le message transparent par défaut */
  transition: opacity 0.3s ease; /* Ajouter une transition d'opacité de 0.3s */
}

.message.visible {
  opacity: 1; /* Rendre le message opaque lorsqu'il est visible */
  pointer-events: auto; /* Activer les événements de souris pour le message */
}

.custom-button {
  background-color: #1b2a4e;
  color: white;
  border: 1px solid #1b2a4e;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.custom-button:hover {
  background-color: white;
  color: #1b2a4e;
  border: 1px solid #1b2a4e;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
}

.custom-button-inverse {
  background-color: #1b2a4e;
  font-size: 1rem;
  color: white;
  border: 1px solid white;
  display: flex;
  flex-direction: row;
  gap: 9.14px;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 41.13px;
  position: relative;
  overflow: hidden;
  border-radius: 9.14px;
  padding: 9.14px 18.28px 9.14px 18.28px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.custom-button-inverse:hover {
  background-color: white;
  color: #1b2a4e;
  border: 1px solid #1b2a4e;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
}

.custom-button-white {
  background-color: white;
  font-size: 1rem;
  color: #1b2a4e;
  border: 1px solid #1b2a4e;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.custom-button-white:hover {
  background-color: #1b2a4e;
  color: white;
  border: 1px solid #1b2a4e;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
}

/* Assurez-vous que ce CSS est inclus dans votre fichier de styles principal */
.card-container {
  position: relative;
}

.card-fixed-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-fixed-height .card-body {
  flex: 1;
}

.card-fixed-height img.card-img-top {
  height: auto;
  max-height: 200px; /* Ajustez cette valeur en fonction de votre design */
  width: 100%;
  object-fit: cover;
}

.early-booking-banner {
  position: absolute;
 
  top: -4.8rem; /* Ajustez cette valeur en fonction de la hauteur de votre bandeau */
  width: 100%;
  background-color: #f04623;
  color: white; /* Couleur du texte */
}
.earlyText {
  color: white; /* Couleur du texte */
  font-size: 20px; /* Taille de la police */
  padding-top: 0.5rem;
  font-weight: bold;
}
.dateText {
  color: white; /* Couleur du texte */
  font-size: 16px; /* Taille de la police */
  padding-bottom: 0.5rem;
}

.original-price {
  position: relative;
  color: black;
  margin-right: 5px; /* Espace entre les prix */
  display: inline-block;
}

.original-price::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #f04623;
  transform: rotate(-25deg);
  transform-origin: center;
}

.discounted-price {
  color: #f04623; /* Vous pouvez choisir la couleur que vous voulez pour le nouveau prix */
  font-weight: bold; /* Rendre le nouveau prix en gras */
}

/* Classe pour la bordure de la carte avec Early Booking */
.border-early-booking {
  border: 5px solid #f04623;
}
.border-white {
  border: 5px solid rgb(255, 255, 255);
  
}
/* CSS pour définir la hauteur minimale des images du carousel sur les petits écrans */
@media (max-width: 991px) {
  .carousel-item img {
      min-height: 300px; /* Ajustez la hauteur minimale selon vos besoins */
      object-fit: cover; /* Pour que l'image couvre complètement la zone définie */
  }
}