.calendar {
    box-shadow: 20px 10px 20px 10px rgba(0,0,0,.2);
  }

  /* En-têtes des jours */
  .day-calendar {
    @apply bg-[var(--color-grey-head)] p-3 sm:p-4 text-center;
  }

  /* Lignes (semaines) */
  .day-by-week {
    @apply text-center pt-8 mt-8;
  }

  /* Cellules */
  .cels { @apply pt-4 pb-4; }

  /* Hover disponible */
  .cels-available:hover { background-color: var(--color-hover); }

  /* Sélections & intervalles */
  .cels-selected {
    background-color: var(--color-selected) !important;
    color: #fff;
    border: 2px solid var(--color-selected-ring);
    font-weight: bold;
  }
  .cels-between { background-color: var(--color-between) !important; }

  /* Cellules grises / réservées / full */
  .cels-grey     { background-color: var(--color-grey); }
  .cels-reserved { background-color: var(--color-reserved); }
  .cels-full-reserved {
    background-color: var(--color-full);
  }

  /* Arrivée / Départ / Between (deuxième version, issue du bas du CSS) */
  .cels-arrivee { background: var(--color-arrivee) !important; }
  .cels-depart  { background: var(--color-depart)  !important; }
  .cels-between { background: var(--color-between-2) !important; } /* override */

  /* Boutons navigation mois */
  .div_btn-calendar {
    @apply flex items-center content-center mx-auto mt-4 justify-center gap-8;
  }
  .btn-calendar { @apply mx-auto; } /* tu l’avais peu utilisé, je conserve */

  /* Conteneurs */
  .block_calendar {  }

  .div_info_calendar {
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,.2);
    @apply sm:m-4 sm:p-4;
  }
  .div_info_resa { @apply p-4; }

  /* Layouts alternatifs */
  .wrapper_1-2 {
    @apply flex flex-col items-center;
  }
  .calendar-content {
    @apply flex justify-between;
  }
  .calendar-left, .calendar-right { @apply flex-1; }

  /* Tables legacy */
  #calendar-table, #days-of-week {
    @apply w-full text-center;
  }

  .calendar-nav { @apply mt-2; }
  .calendar-nav { @apply flex justify-center mb-4; }
  /* .calendar-nav button {  style flèches — tu peux ajouter @apply si besoin } */
  .calendar-nav h3 {
    font-size: 2rem;
    color: var(--color-brand);
    margin: 0 1rem;
  }

  /* Variante “grille” (si tu réutilises cette structure) */
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 0.1rem solid var(--color-brand);
  }
  .calendar-cell {
    border: 0.2rem solid var(--color-brand);
    height: 8rem;
    text-align: center;
    font-size: 1.5rem;
    overflow: hidden;
  }
  .calendar-cell.reserved { background: var(--color-brand); color: #fff; }

  /* fullbooked (autre orthographe vue en bas du fichier) */
  .cels-fullbooked {
    background: #d93025 !important;
    color: #fff;
    font-weight: bold;
  }

  /* Boutons navigation (style précis) */
  .div_btn-calendar { @apply flex justify-center gap-8 my-4; }
  .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;
  }

  .cels {
    width:20px;
    height:20px;
  }
  /* Media queries équivalentes */
@media (max-width: 700px) {
  .months-range-container { flex-direction: column; gap: 1em; }
}

/* Classes “range container” et blocs associés */
.months-range-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  align-items: flex-start;
}
.block_calendar_resa,
.block_calendar {
   
    width:500px;
}