.calendar
{

    box-shadow: 20px 10px 20px 10px rgba(0,0, 0, 0.2);
}

.day-calendar
{
    background-color: rgba(128, 128, 128, 0.22);
    padding:1em;
}

.day-by-week
{
    text-align: center;
    padding-top: 2em;
    margin-top: 2em;
}

.cels {
    padding-top: 1em;
    padding-bottom: 1em;
}

.cels-available:hover {
    background-color: rgb(128, 112, 199);
}
.cels-selected
{
    background-color: rgb(68, 0, 255);
}

.cels-between 
{
    background-color: rgba(68, 0, 255, 0.275);
}

.cels-grey
{
    background-color: rgba(128, 128, 128, 0.261);
}

.cels-reserved
{
    background-color: rgba(255, 132, 0, 0.72);
}
.cels-full-reserved
{
    background-color: rgba(255, 0, 0, 0.72);
}
.div_btn-calendar
{
    display:flex;
    align-items: center;
    align-content: center;
    margin:auto;
    margin-top: 1em;

}
.btn-calendar
{
 
    margin:auto;

}

.block_calendar
{
    max-width: 400px;
}

.div_info_calendar 
{
    box-shadow: 5px 5px 5px 5px rgba(0,0, 0, 0.2);
    margin:1em;
    padding:1em;

}

.div_info_resa 
{
    padding:1em;
}

.wrapper_1-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-content {
    display: flex;
    justify-content: space-between;
}

.calendar-left, .calendar-right {
    flex: 1;
}

#calendar-table, #days-of-week {
    width: 100%;
    text-align: center;
}

.calendar-nav {
    margin-top: 10px;
}


.calendar-nav { display: flex; justify-content: center; margin-bottom: 1rem; }
.calendar-nav button { /* style flèches */ }
.calendar-nav h3 { font-size: 2rem; color: #ee8436; margin: 0 1rem; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  border: 0.1rem solid #ee8436;
}
.calendar-cell {
  border: 0.2rem solid #ee8436;
  height: 8rem;
  text-align: center;
  font-size: 1.5rem;
  overflow: hidden;
}
.calendar-cell.reserved { background: #ee8436; color: white; }
.calendar-info-details { /* votre style pour l’info */ }


.cels-arrivee {
    background: rgba(26, 122, 217, 0.22) !important;
}
.cels-depart {
    background: rgba(26, 217, 165, 0.22) !important;
}
.cels-between {
    background: rgba(26, 122, 217, 0.09) !important;
}
.cels-selected {
    background: #1a7ad9 !important;
    color: #fff;
    border: 2px solid #11568c;
    font-weight: bold;
}

.cels-fullbooked {
    background: #d93025 !important; /* rouge fort */
    color: #fff;
    font-weight: bold;
  }
  .months-range-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: flex-start;
  }
  
  .block_calendar_resa, .block_calendar {
    min-width: 300px;
    flex: 1 1 300px;
    margin: 0 1em;
  }
  
  @media (max-width: 700px) {
    .months-range-container {
      flex-direction: column;
      gap: 1em;
    }
  }
  .div_btn-calendar {
    display: flex;
    justify-content: center;     /* Centre les boutons horizontalement */
    gap: 2em;                    /* Espace entre les boutons */
    margin: 1em 0;
  }
  
  .div_btn-calendar button {
    background: #eee;
    border: none;
    border-radius: 8px;
    font-size: 1.3em;
    padding: 0.5em 1.4em;
    margin: 0 0.5em;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px #0001;
  }
  
  .div_btn-calendar button:hover {
    background: #6fb1fc;
    color: #fff;
    box-shadow: 0 4px 16px #6fb1fc33;
  }
  
  .div_btn-calendar button:active {
    background: #3694e5;
    color: #fff;
  }