/* Conteneur des calendriers */
#calendarsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    /*position: relative;*/
}

/* Chaque mois */
.month {
    display: inline-block;
    margin: 0;
    vertical-align: top;
}

/* Tableau du mois */
.month table {
    border-collapse: collapse;
}

/* Cases et entêtes */
.month th, .month td {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
    font-size: 11px;
    font-weight: 600;
    color: #333; /* texte par défaut gris foncé */
}

/* Entêtes */
.month th {
    background-color: #07b307; // #f0f0f0;
    color:white;
}

/* Jour actuel */
.today {
    background-color: #ffeb3b;
    font-weight: bold;
    border: 2px solid #2196F3;
}

/* Jours passés */
td.past-day {
    color: #aaa;
    cursor: not-allowed;
}

/* Sélection de plage de dates */
td.selected {
    background-color: #A8D5BA; /* vert pastel doux */
    color: white;
}

/* Réservation réelle (occupée par le client) */
td.reserved {
    background-color: #A3C4F3; /* bleu pastel doux */
    color: white;
}

/* BufferDays (jours tampon) */
td.buffer {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 209, 220, 0.35),
        rgba(255, 209, 220, 0.35) 1px,
        rgba(255, 228, 225, 0.25) 1px,
        rgba(255, 228, 225, 0.25) 4px
    );
    color: #222; /* texte sombre pour lisibilité */
    font-weight: 600;
    cursor: not-allowed !important;
}


/* Effet hover sur jours cliquables */
td:not(.past-day):not(.buffer):hover {
  background-color: #a5d6a7;
  cursor: pointer;
}


/* Boutons Prev/Next centrés */
.calendar-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.calendar-nav button {
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.calendar-nav button:hover {
    background-color: #0056b3;
}


.month h3 {
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
}

/* Responsive pour mobile */
/*@media (max-width: 767.98px) {
    .month th, .month td {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .calendar-nav button {
        padding: 4px 10px;
        font-size: 12px;
    }
}*/

@media (max-width: 767.98px) {
    .calendar-wrapper {
        display: flex;
        flex-wrap: wrap;           /* autorise plusieurs lignes */
        justify-content: center;    /* centre les calendriers */
        gap: 10px;                  /* espace entre les mois */
        align-items: stretch;       /* force les calendriers à avoir la même hauteur */
    }

    .calendar-wrapper .month {
        width: 48%;                 /* deux calendriers par ligne */
        min-width: 228px;           /* taille minimum */
        display: flex;
        flex-direction: column;     /* pour que le tableau s'étire verticalement */
        margin: 0 auto;
    }

    .calendar-wrapper .month table {
        flex-grow: 1;               /* le tableau prend tout l'espace disponible */
    }

    .calendar-container {
        width: 100%;
        margin: 0 auto;
    }

    #button-container {
        display: flex !important;        /* annule le d-none */
        justify-content: center;         /* centré */
        gap: 8px;                        /* espace entre les boutons */
        font-size: 0.8rem;               /* texte un peu plus petit */
    }

    #button-container span {
        display: none;                   /* on cache le texte long */
    }

    #button-container button {
        padding: 4px 8px;                /* boutons plus compacts */
        font-size: 0.8rem;
    } 

       
}