#calendrier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto; /* Cette propriété permet de centrer le conteneur */
}

.mois {
    display: none;
}

.mois-actif {
    display: block;
}

.nom-jour {
    color: #009999;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-align: center;
}


.jour {
    font-family: 'Montserrat', sans-serif;
    color: white;
    margin: 4px;
    display: inline-block;
    height: 140px;
    width: 70px;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center; 
    overflow: hidden;
    font-weight: bold;
}


.conteneur-nuit {
    width: 1px;
    position: relative;
    display: inline-block;
}

.nuit {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #33CCCC;
    color: white;
    display: inline-block;
    text-align: center;
    line-height: 25px; /* Centrer le texte */
    cursor: pointer;
    margin: 0 0.5px;
    box-sizing: border-box;
    left: -30px; /* Décalage de la moitié de la largeur du bouton pour le centrer */
    top: -100px; /* Monter le bouton de 40px */
    border: none; /* Enlève le contour */
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3); /* Ajout de l'ombre portée */
}


.prix {
	font-family: 'Montserrat', sans-serif;
    position: absolute;
    width: 60px;
    height: 25px;
    background-color: #33CCCC;
    border-radius: 10px;  
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    left: -30px; /* Décalage de la moitié de la largeur pour centrer horizontalement */
    top: -35px; /* Descendre le conteneur prix de 75px */
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3); /* Ajout de l'ombre portée */
}







.conteneur-principal {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
	
}

.jour-partie {
    flex: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #009999;
}


.demi-journee {
    display: flex;
    flex: 2;
    width: 100%;
}

.am-partie, .pm-partie {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.am-partie {
    background-color: #009999;
}

.pm-partie {
    background-color: #009999;
}

.nom-mois {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold; /* Pour rendre le texte gras */
    font-size: 2em; /* Pour augmenter la taille du texte */
    color: #009999;
    text-align: center;
    margin-top: 20px; /* Pour ajouter une marge en haut */
    margin-bottom: 20px; /* Pour ajouter une marge en bas */
}

#calendrier-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; /* Augmenter la marge en dessous des boutons */
}

#precedent, #suivant {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    background-color: #009999;
    color: white;
    padding: 10px 20px;
    margin: 10px;
    text-align: center;
    text-decoration: none; /* Pour supprimer le soulignement */
    cursor: pointer; /* Pour changer le curseur en main */
    border: none; /* Pour supprimer la bordure */
    border-radius: 5px;
    transition: background-color 0.3s; /* Pour animer le changement de couleur */
    font-size: 18px; /* Augmenter la taille du texte */
}

#precedent:hover, #suivant:hover {
    background-color: #006666; /* Une couleur plus foncée lorsque le bouton est survolé */
}

.periode-reservation {
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #009999;
  border-radius: 5px;
  max-width: 800px;
  font-family: "Montserrat", sans-serif;
}

.reservation {
  background-color: #009999;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}

.periode {
  background-color: #ffffff;
  padding: 5px;
  text-align: center;
  color: #009999;
  font-size: 20px; /* Modifiez la taille de police selon vos préférences */

}

.total {
  background-color: #009999;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}
.gras {
  font-weight: bold;
}

.titre-appartement {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #009999;
}


#conteneur-bouton {
    display: flex;
    justify-content: center;
    margin-bottom: 50px; /* Ajouter une marge de 10px en bas */
}

#effacer-reservations {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    background-color: #009999;
    color: white;
    padding: 10px 20px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 18px;
}

#effacer-reservations:hover {
    background-color: #007777;
}



#reserver {
  display: block;
  margin: 0 auto;
  width: 200px;  /* Ajustez la largeur pour mieux adapter le texte */
  height: 70px; /* Ajustez la hauteur si nécessaire */
  border-radius: 50px;  /* Pour rendre le bouton elliptique */
  background-color: #009999;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 70px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 40px;
}

#reserver:hover {
  background-color: #007777; /* Couleur au survol */
}


.reservation-final {
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #FF7F50;
  border-radius: 5px;
  max-width: 800px;
  font-family: "Montserrat", sans-serif;
}

.reservation-final-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: coral;
}

.reservation-final-period {
  background-color: #ffffff;
  padding: 5px;
  text-align: center;
  color: coral;
  font-size: 20px;
}

.reservation-final-total {
  background-color: coral;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}

.gras {
  font-weight: bold;
}

.reservationfinal {
  background-color: coral;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}


button.nuit img {
    width: 100%;
    height: auto; /* Pour conserver les proportions de l'image */
    display: block; /* Pour que l'image soit au-dessus du texte */
    margin-bottom: 5px; /* Ajouter une marge au-dessous de l'image */
}

#message {
  display: none;  /* caché par défaut */
  position: fixed;  /* position fixe sur la page */
  top: 20px;  /* 20 pixels du haut */
  right: 20px;  /* 20 pixels de la droite */
  padding: 15px;  /* espace intérieur de 15px */
  background-color: coral;  /* couleur d'arrière-plan */
  color: white;  /* texte en blanc */
  border-radius: 8px;  /* bordures arrondies */
  z-index: 1000;  /* au-dessus des autres éléments */
  text-align: center;  /* texte centré */
  font-family: 'Montserrat', sans-serif;  /* police Montserrat */
  font-size: 20px;  /* taille du texte */
  font-weight: bold;  /* texte en gras */
}