/* ==========================================================================
   CALENDRIER — popover de sélection de dates (<div>, voir
   template-parts/header/banner.php et assets/js/calendar.js). Jamais visible
   au premier rendu (ouvert au clic), donc ici plutôt que dans critical.css
   malgré la position du déclencheur dans le header.

   position:fixed : le popover est ancré sous le header (qui peut lui-même
   s'effacer/réapparaître au scroll, voir main.js), donc des coordonnées
   écran directes recalculées en JS (alignTop/alignRight, voir calendar.js)
   sont plus fiables qu'un positionnement relatif au DOM. Pas de backdrop :
   simple popover, le reste de la page reste cliquable (fermeture au clic
   extérieur/Échap, voir JS).

   Thème SOMBRE (fond --color-primary) plutôt que blanc/doré comme sur la
   racine : ce popover est posé juste sous un header sombre et transparent,
   un popover blanc y détonnerait (voir discussion). Mêmes proportions/
   structure que la racine, juste la palette qui change.
   ========================================================================== */

.calendar {
    position: fixed;
    width: min(360px, 90vw);
    border: 1px solid var(--color-secondary);
    padding: 1.5rem 1rem 1rem;
    background-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(28, 33, 46, 0.35);
    color: var(--color-text-light);
    z-index: 60;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Deux mois côte à côte à partir de 768px (voir banner.php,
   .calendar__panel--second) — le panneau doit s'élargir pour les accueillir,
   sinon chaque mois se retrouve écrasé sur sa moitié de 360px. */
@media (min-width: 768px) {
    .calendar {
        width: min(680px, 90vw);
    }
}

.calendar.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* [hidden] natif retiré par JS à l'ouverture (avant .is-open, pour que la
   transition parte bien de l'état masqué) — pas de display:none ici qui
   court-circuiterait la transition. */

.calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

/* Même traitement que les labels "CHAMBRES"/"SERVICES" (voir rooms.css,
   services.css) : doré, majuscules, espacé. flex:1 + text-align:center pour
   rester centré entre les flèches même si elles ne font pas exactement la
   même largeur de part et d'autre. */
.calendar__month-labels {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 2rem;
}

.calendar__month {
    font-size: var(--font-size-sm);
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-secondary);
}

/* Mobile (par défaut) : un seul mois affiché (voir .calendar__panel--second),
   donc le second libellé n'a pas lieu d'être. */
.calendar__month--second {
    display: none;
}

@media (min-width: 768px) {
    .calendar__month--second {
        display: block;
    }
}

.calendar__nav {
    border: 0;
    background: none;
    padding: 0.25rem 0.75rem;
    font-size: 1.5rem;
    color: var(--color-secondary);
    cursor: pointer;
}

.calendar__nav:disabled {
    color: var(--color-text-muted);
    cursor: default;
}

/* Panneaux de mois (voir banner.php) — empilés par défaut (mobile, un seul
   visible), côte à côte à partir de 768px (deux mois, voir .calendar). */
.calendar__months {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .calendar__months {
        flex-direction: row;
        gap: 1.5rem;
    }

    .calendar__panel {
        flex: 1;
        min-width: 0; /* évite que la grille ne pousse le panneau au-delà de sa moitié */
    }
}

.calendar__panel--second {
    display: none;
}

@media (min-width: 768px) {
    .calendar__panel--second {
        display: block;
    }
}

.calendar__weekdays,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, calc(85% / 7));
    justify-content: center;
}

.calendar__weekdays {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.calendar__weekdays span {
    padding-bottom: .5rem;
}

.calendar__day {
    border: 1px solid transparent; /* réservé pour .is-range-start/.is-range-end, évite un saut de taille au survol/sélection */
    background: none;
    aspect-ratio: 1;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all .3s ease;
}

/* Fond sombre : un gris clair uni (--color-text-grey) se distinguerait mal
   du texte actif (--color-text-light) — semi-transparence sur le blanc
   garantit un contraste visible quel que soit le fond, sans ajouter de
   couleur dédiée. */
.calendar__day:disabled {
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
}

.calendar__day:hover:not(:disabled) {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* Bornes de la plage (premier/dernier jour cliqués) : contour doré, chiffre
   doré gras — PAS de remplissage, contrairement aux jours du milieu (voir
   .is-in-range) qui eux sont pleins. */
.calendar__day.is-range-start,
.calendar__day.is-range-end {
    border-color: var(--color-secondary);
    font-weight: 700;
    color: var(--color-secondary);
}

.calendar__day.is-range-start:hover,
.calendar__day.is-range-end:hover {
    color: var(--color-secondary);
}

/* Jours du milieu : fond doré plein, chiffre sombre gras (plus lisible que
   blanc sur fond doré clair). */
.calendar__day.is-in-range {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 700;
}

.calendar__day:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

.calendar__close-form {
    display: flex;
    justify-content: flex-end;
}

.calendar__close {
    border: 0;
    background: none;
    padding: 0.25rem 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.calendar__close:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}