/************************
CALENDRIER AGENDA
Toutes les règles sont scopées sous .calendrier-agenda pour permettre
plusieurs instances de ce bloc sur une même page sans collision.
*************************/

.calendrier-agenda__card {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Titre de section : même système que les autres blocs — un <span> dans
   le titre (ex. "Dans <span>l'agenda</span>") met cette partie en couleur. */
.section-title span {
    color: var(--color-primary);
}

/* ── En-tête (navigation mois précédent/suivant) ─────────────── */
.calendrier-agenda__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem;
    background: var(--color-primary-light);
}

.calendrier-agenda__month-year {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
    color: var(--color-primary);
}

.calendrier-agenda__nav {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.calendrier-agenda__nav:hover,
.calendrier-agenda__nav:focus-visible {
    background: var(--color-primary-dark);
}

.calendrier-agenda__nav:disabled {
    opacity: .5;
    cursor: default;
}

/* ── Grille du calendrier ─────────────────────────────────────── */
.calendrier-agenda__body {
    position: relative;
    overflow: hidden;
}

.calendrier-agenda__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.calendrier-agenda__table th,
.calendrier-agenda__table td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color-border-light);
}

.calendrier-agenda__table th {
    padding: .5rem .25rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-light);
}

.calendrier-agenda__table td {
    height: 2.75em;
    position: relative;
    font-size: .9rem;
    color: var(--color-text);
}

/* Jour contenant un ou plusieurs évènements */
/* Rouge adouci à la demande du client : la couleur de marque pleine
   (var(--color-primary), #ED1C25) reste utilisée telle quelle pour
   l'en-tête/les boutons de navigation du calendrier (cohérence avec le
   reste du site), mais répétée sur chaque case-jour d'une grille elle
   devenait trop "criante" pour un public peu habitué au nouveau design.
   On garde donc ici un ton rosé-rouge plus doux, avec un texte rouge
   foncé (contraste ~5:1) plutôt que blanc sur rouge vif. */
.calendrier-agenda__table td.calendrier-agenda__day--event {
    padding: 0;
    background: #f6c6c9;
    cursor: pointer;
    transition: background .2s ease;
}

.calendrier-agenda__table td.calendrier-agenda__day--event:hover,
.calendrier-agenda__table td.calendrier-agenda__day--event:focus-within {
    background: #efa4a9;
}

.calendrier-agenda__day-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: .5rem .25rem;
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.calendrier-agenda__day-link:hover,
.calendrier-agenda__day-link:focus {
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* ── Message "aucun évènement" ───────────────────────────────── */
.calendrier-agenda__empty {
    margin: 0;
    padding: .75rem 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--color-text-muted);
}

/* ── Overlay + spinner de chargement ─────────────────────────── */
.calendrier-agenda__overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    z-index: 5;
}

.calendrier-agenda__overlay.active {
    display: flex;
}

.calendrier-agenda__spinner {
    color: var(--color-primary);
}

/* ── Transition de glissement entre deux mois ────────────────── */
.calendrier-agenda__table tbody {
    display: table-row-group;
    transition: transform .35s ease, opacity .35s ease;
    transform: translateX(0);
    opacity: 1;
}

.calendrier-agenda__table tbody.slide-left {
    transform: translateX(-4%);
    opacity: 0;
}

.calendrier-agenda__table tbody.slide-right {
    transform: translateX(4%);
    opacity: 0;
}

/* ── Petits écrans ────────────────────────────────────────────── */
@media (max-width: 576px) {
    .calendrier-agenda__nav {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1rem;
    }

    .calendrier-agenda__month-year {
        font-size: 1rem;
    }

    .calendrier-agenda__table td {
        height: 2.25em;
        font-size: .8rem;
    }
}