/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Calendrier Agenda (vue calendrier)
 * ─────────────────────────────────────────────────────────────────────
 * Vue calendrier mensuelle pour agenda-int-ext & agenda-scolaire.
 * Toggle carte/calendrier, grille mensuelle, pills événements, popup
 * aperçu card, responsive.
 *
 * Typographie : Agrandir Tight Bold 18px pour les titres events dans
 * les cellules. Agrandir Wide Medium pour les dates.
 *
 * Palette : vars --pop-* et --wp--preset--color--* (POP palette).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Toggle vue carte / calendrier ──────────────────────────────────── */
.ccbla-view-toggle {
    display:         flex;
    align-items:     center;
    gap:             0;
    margin:          0;
}

.ccbla-view-toggle__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    height:          44px;
    padding:         12px 10px 10px 10px;
    border:          1px solid #111;
    background:      #fff;
    color:           #111;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       14px;
    font-weight:     400;
    letter-spacing:  0;
    line-height:     1;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background .15s ease, color .15s ease;
    white-space:     nowrap;
    box-sizing:      border-box;
}
.ccbla-view-toggle__btn:first-child {
    border-radius:    0;
    border-right:     none;
}
.ccbla-view-toggle__btn:last-child {
    border-radius:    0;
    border-left:      none;
}
.ccbla-view-toggle__btn:hover,
.ccbla-view-toggle__btn:focus {
    background: #111;
    color: #fff;

}
.ccbla-view-toggle__btn:focus-visible {
    outline:        3px solid #005fcc;
    outline-offset: 2px;
    z-index:        1;
}

.ccbla-view-toggle__btn--active {
    background:     #111;
    border-color:   #111;
    color:          #fff;
    /* NB: pas de `pointer-events:none` ni `cursor:default` — le bouton actif reste pleinement interactif (focusable + clicable). Le handler JS ignore déjà un clic sur l'item actif (return early dans script.js). Forcer `pointer-events:none` créait un cul-de-sac clavier: l'utilisateur Tab arrivait sur le bouton, Entrée ne faisait rien, sans feedback visuel de pourquoi. */
}

.ccbla-view-toggle__icon {
    display:      inline-flex;
    align-items:  center;
    flex-shrink:  0;
    margin-top: -4px;
}
.ccbla-view-toggle__icon svg {
    display:         block;     /* élimine le baseline-gap */
    width:           18px;
    height:          18px;
    fill:            currentColor;
    vertical-align:  middle;
}

/* Label texte à côté du picto — forcé en line-height 1 pour alignement parfait avec l'icône (même centre vertical via flex-center du btn). */
.ccbla-view-toggle__label {
    display:      inline-flex;
    align-items:  center;
    line-height:  1;
}

/* ── Calendrier wrapper ─────────────────────────────────────────────── */
.ccbla-calendar {
    position:     relative;
    margin-top:   0;
    margin-bottom:0;
    /* PAS d'overflow:hidden ici — le popup flottant en a besoin */
}

/* aria-hidden handled by WCAG safety rules at bottom of file */

/* ── Navigation mois ─────────────────────────────────────────────────── */
.ccbla-calendar__nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
    gap:             1rem;
}

.ccbla-calendar__nav-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border:          1px solid #111;
    border-radius:   0;          /* 2026-05-13 (demande Nic) — pas d'arrondi sur les flèches calendar (cohérence pagination & design POP). */
    background:      #fff;
    color:           #111;
    font-size:       1.2rem;
    cursor:          pointer;
    transition:      background .15s ease;
    flex-shrink:     0;
}
.ccbla-calendar__nav-btn:hover {
    background: var(--wp--preset--color--pop-dark, #111);
    color:      #fff;
}
.ccbla-calendar__nav-btn:focus-visible {
    outline:        3px solid #005fcc;
    outline-offset: 2px;
}

.ccbla-calendar__month-label {
    font-family:    var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:      28px;
    font-weight:    400;
    line-height:    1.1;
    text-align:     center;
    text-transform: capitalize;
    color:          #111;
}

/* ── Banner auto-fit (mois sauté faute de résultats) 2026-05-22 — Demande Nic. Banner inséré par JS au-dessus de.ccbla-calendar__nav quand le serveur a basculé sur le 1er mois avec résultats pour les filtres en cours (handler PHP auto_fit). Style minimaliste: border-left coloré contextuel + padding-left, fond hérité du contexte. La couleur du border-left est différenciée selon le bloc qui consomme le calendrier (modifier --scolaire / --agenda posée par JS depuis instance.opts.action). */
.ccbla-calendar__autofit-banner {
    margin:      0 0 1rem 0;
    padding:     0.25rem 0 0.25rem 0.5rem;
    border-left: 2px solid #111; /* fallback si modifier absent (sécurité) */
    line-height: 1.1;
    color:       #111;
    font-size: 16px;
}
.ccbla-calendar__autofit-banner--scolaire {
    border-left-color: var(--global-palette2);
}
.ccbla-calendar__autofit-banner--agenda {
    border-left-color: var(--global-palette6);
}
.ccbla-calendar__autofit-arrow {
    display:     inline-block;
    margin:      0 0.15em;
    font-weight: 700;
}

/* ── Grille du calendrier ────────────────────────────────────────────── */
.ccbla-calendar__grid {
    display:               grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap:                   0;
    border-top:            1px solid #ddd;
    border-left:           1px solid #ddd;
    width:                 100%;
    overflow:              hidden; /* contient les pills sans couper le popup (sibling) */
}

/* Wrappers role=row (ajoutés pour satisfaire aria-required-parent: columnheader/gridcell doivent avoir un parent role=row). display:contents rend le wrapper invisible au layout → les 7 enfants restent des grid items directs du.ccbla-calendar__grid, aucun changement visuel. Les rôles ARIA sont préservés dans l'arbre d'accessibilité (support stable depuis Chrome 65 / Firefox 60 / Safari 11.1). */
.ccbla-calendar__row {
    display: contents;
}

/* ── En-têtes jours ──────────────────────────────────────────────────── */
.ccbla-calendar__day-header {
    padding:         10px 4px;
    text-align:      center;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       13px;
    font-weight:     400;
    text-transform:  uppercase;
    color:           #ffffff;      /* demande graphiste : typo blanche */
    background:      #111111;      /* demande graphiste : fond noir */
    border-right:    1px solid #111;
    border-bottom:   1px solid #111;
}

/* ── Cellules jour ───────────────────────────────────────────────────── */
.ccbla-calendar__cell {
    min-height:    100px;
    padding:       6px;
    border-right:  1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background:    #fff;
    vertical-align:top;
    position:      relative;
    overflow:      hidden; /* empêche les titres longs de déborder */
    min-width:     0;      /* grid item shrink */
}
.ccbla-calendar__cell--outside {
    /* Remplace l'ancien opacity:.5 qui cassait le contraste du n° de jour (#111 sur #fafafa avec alpha.5 rendait #878787 sur #fdfdfd = 3.53:1). Couleurs explicites → AA. */
    background: #f5f5f5;
}
.ccbla-calendar__cell--outside .ccbla-calendar__cell-number {
    color: #595959; /* 6.32:1 sur #f5f5f5 ✓ AA */
}
.ccbla-calendar__cell--today {
    background: rgba(107, 71, 150, .06);
}
/* Cellule avec tous ses events dépliés — autoriser la hauteur libre et forcer le z-index au-dessus des cellules voisines pour éviter qu'un event chevauche visuellement la cellule du dessous. */
.ccbla-calendar__cell--expanded {
    overflow: visible !important;
    z-index: 2;
    background: #fff;
}

.ccbla-calendar__cell-number {
    display:       block;
    font-family:   var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:     13px;
    font-weight:   400;
    color:         #111111;  /* demande graphiste : n° jour en noir (les mois précédents/suivants restent atténués via .cell--outside opacity) */
    margin-bottom: 4px;
}
.ccbla-calendar__cell--today .ccbla-calendar__cell-number {
    color:       #111;
    font-weight: 700;
}

/* ── Événements dans les cellules ────────────────────────────────────── */
.ccbla-calendar__events {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.ccbla-calendar__event {
    display:        block;
    padding:        6px;
    font-family:    var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:      14px;
    font-weight:    400;
    line-height:    1.25;
    color:          #fff;
    background:     var(--_cal-pill-bg, var(--wp--preset--color--pop-primary, #6b4796));
    border-radius:  0px;
    cursor:         pointer;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    border:         none;
    text-align:     left;
    width:          100%;
    max-width:      100%;
    box-sizing:     border-box;
    transition:     opacity .15s ease;
}
.ccbla-calendar__event:hover {
    opacity: .85;
}
.ccbla-calendar__event:focus-visible {
    outline:        2px solid #005fcc;
    outline-offset: 1px;
}

.ccbla-calendar__more {
    display:     block;
    padding:     2px 6px;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:   11px;
    color:       #6b4796;
    cursor:      pointer;
    border:      none;
    background:  none;
    text-align:  left;
}
.ccbla-calendar__more:hover { text-decoration: underline; }

/* ── Popup aperçu événement (sur document.body, position:absolute page) ── */
.ccbla-calendar-popup {
    position:       absolute;
    z-index:        99999;
    width:          340px;
    max-width:      94vw;
    background:     #fff;
    border:         1px solid #ddd;
    box-shadow:     0 8px 30px rgba(0,0,0,.18);
    display:        none;
}
.ccbla-calendar-popup--visible {
    display: block;
}

.ccbla-calendar-popup__close {
    position:    absolute;
    top:         8px;
    right:       8px;
    width:       32px;
    height:      32px;
    border:      none;
    /* Fond plein #111 au lieu de rgba(0,0,0,.6) — garantit 4.5:1 de contraste quelle que soit la couleur du contenu du popup ou de l'image de fond derrière (sinon fail axe `color-contrast` sur photos sombres). */
    background:  #111;
    color:       #fff;
    font-size:   18px;
    cursor:      pointer;
    z-index:     2;
    display:     flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 0;
}
.ccbla-calendar-popup__close:hover { background: #333; }
.ccbla-calendar-popup__close:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.ccbla-calendar-popup__img {
    width:      100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display:    block;
    background: #111;
}

.ccbla-calendar-popup__body {
    padding: 15px;
    background: var(--_popup-bg, #fff);
    color: var(--_popup-color, #111);
}

.ccbla-calendar-popup__date {
    font-family:    var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:      14px;
    font-weight:    400;
    text-transform: uppercase;
    line-height:    16px;
    color:          inherit;
    margin:         0 0 12px 0;
}

.ccbla-calendar-popup__title {
    font-family:  var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:    24px;
    font-weight:  400;
    line-height:  1.05;
    color:        inherit;
    margin:       0 0 10px 0;
}

.ccbla-calendar-popup__organizer {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:   15px;
    color:       inherit;
    opacity:     .85;
    margin:      0 0 12px 0;
}

.ccbla-calendar-popup__tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin:    0 0 14px 0;
}
.ccbla-calendar-popup__tag {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          26px;
    padding:         2px 14px 0;
    border:          1.5px solid currentColor; /* 2026-05-19 — canon event-card 2026-05-09 (border = couleur typo) */
    border-radius:   50%;
    background:      #b1dff5;
    color:           #111;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       13px;
    font-weight:     400;
    line-height:     0;
    letter-spacing:  0;
    white-space:     nowrap;
    text-transform:  lowercase; /* 2026-05-19 — canon event-card 2026-05-09 */
}
/* 2026-05-19 — Pill --public inversée, miroir event-card.css L259-262. Sur popup en mode B (compo-adaptatif), le JS injecte un style inline background/color qui override ces littéraux. Le fallback #111/#b1dff5 ne s'applique qu'hors contexte compo (event sans _compo, cas rare). */
.ccbla-calendar-popup__tag--public {
    background: #111;
    color:      #b1dff5;
}

/* ── CTA "Voir l'événement" — style register (bouton-reserver) Variables CSS --cc-btn-color / --cc-btn-bg injectées inline par JS depuis la composition de couleur de la pill cliquée (adaptatif). Fallback: pop-primary / white (hors contexte compo). */
.ccbla-calendar-popup__link {
    display:          inline-flex;
    align-items:      center;
    padding:          12px 10px 10px 10px;
    border:           1px solid var(--cc-btn-color, var(--wp--preset--color--pop-primary, #6b4796));
    background:       transparent;
    color:            var(--cc-btn-color, var(--wp--preset--color--pop-primary, #6b4796))!important;
    font-family:      var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:        14px;
    font-weight:      400;
    letter-spacing:   0;
    line-height:      1;
    text-transform:   uppercase;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ccbla-calendar-popup__link:hover,
.ccbla-calendar-popup__link:focus-visible {
    background:   var(--cc-btn-color, var(--wp--preset--color--pop-primary, #6b4796));
    color:        var(--cc-btn-bg, #ffffff)!important;
    border-color: var(--cc-btn-color, var(--wp--preset--color--pop-primary, #6b4796));
}

.ccbla-calendar-popup__link:focus-visible {
    outline:        3px solid var(--cc-btn-color, var(--wp--preset--color--pop-primary, #6b4796));
    outline-offset: 3px;
}

/* NB: ancien selecteur `.ccbla-calendar-popup__link-icon` supprimé (dead code). Le JS ne génère plus l'icône SVG (voir note dans ccbla-calendar.js). */

/* ── Loading state calendrier ────────────────────────────────────────── */
.ccbla-calendar--loading {
    min-height: 300px;
}
.ccbla-calendar--loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,.75);
    z-index:    20;
}
.ccbla-calendar--loading .ccbla-loop-agenda__spinner { display: block; }

/* ── Responsive tablette ─────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .ccbla-calendar__cell { min-height: 80px; padding: 4px; }
    .ccbla-calendar__event { font-size: 12px; padding: 5px; }
    .ccbla-calendar__month-label { font-size: 22px; }
}

/* ── Responsive mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Mobile : marge latérale 16px pour la vue calendrier */
    .ccbla-calendar {
        margin-left:  16px;
        margin-right: 16px;
    }

    /* Mobile : vue liste regroupée par jour au lieu de grille */
    .ccbla-calendar__grid {
        display:        flex;
        flex-direction: column;
        border-top:     none;
        border-left:    none;
        gap:            0;
    }
    .ccbla-calendar__day-header { display: none; }
    .ccbla-calendar__cell {
        min-height:    auto;
        border-right:  none;
        border-left:   none;
        border-bottom: 1px solid #eee;
        padding:       10px 0;
    }
    .ccbla-calendar__cell--outside { display: none; }
    /* Seules les cellules avec events sont visibles sur mobile */
    .ccbla-calendar__cell--empty-mobile { display: none; }

    .ccbla-calendar__cell-number {
        font-size:     14px;
        font-weight:   700;
        color:         #111;
        margin-bottom: 6px;
    }
    .ccbla-calendar__events { gap: 6px; }
    .ccbla-calendar__event {
        font-size:     14px;
        padding:       6px 10px;
        white-space:   normal;
        border-radius: 3px;
    }

    .ccbla-calendar__month-label { font-size: 20px; }

    .ccbla-calendar-popup {
        position:  fixed;
        width:     100%;
        max-width: 100vw;
        max-height:80vh;
        overflow-y:auto;
        left:      0 !important;
        right:     0 !important;
        bottom:    0 !important;
        top:       auto !important;
        border-radius: 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,.25);
        z-index:   100000;
    }
    /* Backdrop semi-transparent derrière le popup mobile */
    .ccbla-calendar-popup--visible::before {
        content:  '';
        position: fixed;
        inset:    0;
        background: rgba(0,0,0,.35);
        z-index:  -1;
    }
    .ccbla-calendar-popup__title { font-size: 20px; }

    .ccbla-view-toggle__btn { font-size: 12px; padding: 0 12px; height: 38px; }
}

/* ── WCAG 2.2 — safety rules ────────────────────────────────────────── */
/* Belt-and-suspenders : aria-hidden + inert → always display:none */
.ccbla-calendar[aria-hidden="true"],
.ccbla-calendar[inert] {
    display: none !important;
}
/* Popup hidden state */
.ccbla-calendar-popup:not(.ccbla-calendar-popup--visible) {
    display: none !important;
}
/* Screen-reader status inside calendar */
.ccbla-calendar__sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}