/**
 * Filtres Agenda · style.css — valeurs hardcodées #111/#fff
 * WCAG 2.2 AA : focus-visible, contraste 18:1
 *
 * Refonte UX 2026-04 :
 *   - Suppression du loader inline sur le bloc filtres
 *     (update des counts silencieux, sans feedback visuel)
 *   - Ajout styling options count=0 (grisées, non cliquables)
 *   - Ajout .ccbla-toggle-overlay (gros POP loader englobant
 *     filtres+résultats pendant le toggle Au POP / Chez nos membres)
 */

/* ── sr-only ─────────────────────────────────────────────────────────── */
.ccbla-filters-agenda .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ── Section wrapper ─────────────────────────────────────────────────── */
.ccbla-filters-agenda {
    display:        flex;
    flex-direction: column;
    gap:            0;
    color:          #111;
    margin-top:     0;
    margin-bottom:  0;
    padding-top:    0;
    padding-bottom: 0;
    width:100%;
    position: relative;
    z-index:  50;
}

.ccbla-filters-agenda--preview {
    padding: 1rem 1.5rem;
    border: 2px dashed #bbb;
    background: #fafafa;
    color: #333;
}

/* Row Kadence parente > agenda-int-ext pour que le listbox ne passe pas dessous */
.kb-row-layout-wrap:has( .ccbla-filters-agenda ) {
    position: relative;
    z-index:  50;
}

/* ── Rows : espacement maquette ──────────────────────────────────────── */
.ccbla-filters-agenda__row {
    width: 100%;
}
.ccbla-filters-agenda__row--toggles  { margin-bottom: 80px; text-align: center;  }
.ccbla-filters-agenda__row--dropdowns { margin-bottom: 60px; position: relative; z-index: 100; }
.ccbla-filters-agenda__row--actions  { padding-bottom: 0; }

/* TOGGLES — rectangle bordé, radio exclusifs */

.ccbla-filters-agenda__toggles {
    display:     inline-flex;
    flex-wrap:   nowrap;
    border: 1px solid var(--pop-dark);
}

.ccbla-agenda-toggle {
    display:      flex;
    align-items:  center;
    gap:          .6em;
    padding:      .85em 1.8em;
    cursor:       pointer;
    line-height:  1;
    background:   #fff;
    user-select:  none;
    white-space:  nowrap;
    transition:   background .15s ease;

    font-size:    20px;
    font-style:   normal;
    font-weight:  400;
    line-height:  100%;
    font-family:  var(--wp--preset--font-family--agrandir-wide-bold, 'Agrandir Wide Bold', sans-serif);
    color:        #111;
    box-shadow:   inset 0 0 0 5px #fff;
    flex-direction: row-reverse;
}
.ccbla-agenda-toggle:hover {
    background-color:var(--pop-dark);
    color:#fff;
}
.ccbla-agenda-toggle.ccbla-agenda-toggle--active,
.ccbla-agenda-toggle:has(.ccbla-agenda-toggle__input:checked) {
    background-color:var(--pop-dark);
    color:#fff;
}

/* ── Ovale SVG indicateur ─────────────────────────────────────────── */
.ccbla-agenda-toggle__dot {
    flex-shrink:   0;
    display:       inline-block;
    vertical-align: middle;
    width:         43px;
    height:        19px;
}

.ccbla-agenda-toggle__dot .ccbla-toggle-thumb {
    opacity:    0;
    transition: opacity .2s ease;
}

.ccbla-agenda-toggle--active .ccbla-agenda-toggle__dot .ccbla-toggle-thumb,
.ccbla-agenda-toggle:has(.ccbla-agenda-toggle__input:checked) .ccbla-agenda-toggle__dot .ccbla-toggle-thumb {
    opacity: 1;
}

/* Focus-visible via:has() — outline UNIQUEMENT en nav clavier.:focus-within matcherait aussi au click souris (le radio reçoit le focus pointer, on voyait un outline violet persistant après un clic). */
.ccbla-agenda-toggle:has(.ccbla-agenda-toggle__input:focus-visible) {
    outline:        3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 2px;
}

/* DROPDOWNS — label + select souligné + chevron */

.ccbla-filters-agenda__dropdowns {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   30px;
    align-items:           end;
    width:                 100%;
}

.ccbla-filters-agenda__group {
    display:        flex;
    flex-direction: column;
    gap:            0px;
}

.ccbla-filters-agenda__label {
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:   18px;
    font-weight: 400;
    color:       #111;
    line-height: 1.2;
}

.ccbla-filters-agenda__select {
    display:            block;
    width:              100%;
    min-height:         44px;
    padding:            .25rem 1.8rem .35rem 0;
    border:             none;
    border-radius:      0;
    background:         transparent !important;
    color:              #111;
    font-family:        var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:          20px;
    font-weight:        400;
    line-height:        1.7;
    cursor:             pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition:         none;
    box-shadow:         none;
}

.ccbla-filters-agenda__select:focus-visible { outline: none; }
.ccbla-filters-agenda__select:focus         { outline: none; color: var(--pop-dark); }

/* Best effort sur la liste native (masquée, fallback mobile) */
.ccbla-filters-agenda__select option {
    background:  #fff;
    color:       #111;
    font-family: var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:   20px;
    font-weight: 400;
}

/* Options count=0 : grisées dans le select natif (mobile) */
.ccbla-filters-agenda__select option:disabled {
    color: #999;
}

/* CUSTOM DROPDOWN (listbox) — remplace visuellement le <select> natif */

.ccbla-filters-agenda__select--hidden {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    opacity:  0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.ccbla-filters-agenda__select-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
    background:  transparent;
    border-bottom:1px solid transparent;
    transition:  border-color .15s ease;
}

.ccbla-filters-agenda__select-wrap.ccbla-cdd--open {
    border-color: var(--wp--preset--color--pop-dark, #111);
    background:   #fff;
}

.ccbla-cdd__trigger {
    display:            block;
    width:              100%;
    min-height:         44px;
    padding:            0.6rem 2rem .35rem 0; /* 2026-05-13 (demande Nic) — top .25rem → 0.6rem */
    border:             none;
    border-radius:      0;
    background:         transparent;
    color:              var(--wp--preset--color--pop-dark, #111);
    font-family:        var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:          20px;
    font-weight:        400;
    line-height:        1.7;
    text-align:         left;
    cursor:             pointer;
    text-transform:     uppercase;
    white-space:        nowrap;
    overflow:           hidden;
    text-overflow:      ellipsis;
}

.ccbla-cdd__trigger:hover,
.ccbla-cdd__trigger:focus,
.ccbla-cdd__trigger:active {
    background:   #fff;
    color:        var(--wp--preset--color--pop-dark, #111);
}
.ccbla-filters-agenda__select-wrap:hover {
    border-color: var(--wp--preset--color--pop-dark, #111);
    background:   #fff;
}

.ccbla-cdd__trigger:focus-visible {
    outline:        3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 2px;
}
.ccbla-cdd__trigger:focus:not(:focus-visible) { outline: none; }

/* Le trigger n'est plus jamais disabled en bloc (nouvelle UX facetée): seules les OPTIONS individuelles peuvent être disabled via count=0. On garde les règles pour compat mais elles ne s'appliquent plus. */
.ccbla-cdd__trigger[disabled],
.ccbla-cdd__trigger[aria-disabled="true"] {
    opacity: .4;
    cursor:  wait;
}

/* Listbox panel */
.ccbla-cdd__listbox {
    display:          none;
    position:         absolute;
    top:              100%;
    left:             0px;
    right:            0px;
    z-index:          9999;
    padding:          0 !important;
    list-style:       none;
    background:       #fff;
    border:           1px solid var(--wp--preset--color--pop-dark, #111);
    overflow-y:       auto;
    overscroll-behavior: contain;
}

.ccbla-cdd--open .ccbla-cdd__listbox { display: block; }

/* Option items — nom + count dans 2 spans distincts pour styling */
.ccbla-cdd__option {
    display:          flex;
    align-items:      baseline;
    justify-content:  space-between;
    gap:              .5em;
    padding:          .55em .65em;
    cursor:           pointer;
    color:            var(--wp--preset--color--pop-dark, #111);
    font-family:      var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:        20px;
    font-weight:      400;
    line-height:      1.5;
    text-transform:   capitalize;
    transition:       background-color .1s ease, color .1s ease;
    border-bottom:    1px solid rgba(0,0,0,.25);
}
.ccbla-cdd__option:last-child { border-bottom: none; }

.ccbla-cdd__option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccbla-cdd__option-count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: .55;
    font-weight: 400;
    text-transform: none;
}

/* Hover + keyboard active (mais pas sur disabled) */
.ccbla-cdd__option--active,
.ccbla-cdd__option:hover:not(.ccbla-cdd__option--disabled) {
    background-color: var(--wp--preset--color--pop-dark, #111);
    color:            #fff;
}
.ccbla-cdd__option--active .ccbla-cdd__option-count,
.ccbla-cdd__option:hover:not(.ccbla-cdd__option--disabled) .ccbla-cdd__option-count {
    opacity: .75;
}

/* Selected (aria-selected=true) */
.ccbla-cdd__option[aria-selected="true"] {
    background-color: var(--wp--preset--color--pop-dark, #111);
    color:            #fff;
}
.ccbla-cdd__option[aria-selected="true"] .ccbla-cdd__option-count {
    opacity: .75;
}

/* Disabled (count=0) — grisée, non cliquable, non hover, non keyboard-targetable */
.ccbla-cdd__option--disabled,
.ccbla-cdd__option[aria-disabled="true"] {
    color:            #999;
    background-color: transparent;
    cursor:           not-allowed;
    pointer-events:   none; /* empêche clic ET hover highlight */
}
.ccbla-cdd__option--disabled .ccbla-cdd__option-count {
    opacity: .7;
}

/* Chevron SVG */
.ccbla-filters-agenda__chevron {
    position:       absolute;
    right:          0;
    top:            50%;
    transform:      translateY(-50%);
    display:        flex;
    align-items:    center;
    justify-content:center;
    width:          21px;
    height:         12px;
    pointer-events: none;
    color:          #111;
    line-height:    0;
}

.ccbla-filters-agenda__chevron svg {
    display: block;
    width: 21px;
    height: 12px;
}

/* BOUTONS — rectangles bordés, centrés */

.ccbla-filters-agenda__actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1.25rem;
    justify-content: center;
    width:           100%;
}

.ccbla-filters-agenda__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding: 13px 10px 10px 10px;
    border:          1px solid var(--wp--preset--color--pop-dark, #111111);
    border-radius:   0;
    background:      #ffffff;
    color:           var(--wp--preset--color--pop-dark, #111111);
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       20px;
    font-weight:     500;
    letter-spacing:  0;
    text-transform:  uppercase;
    text-decoration: none;
    cursor:          pointer;
    transition:      background .15s ease, color .15s ease, border-color .15s ease;
    line-height:     1;
}
.ccbla-filters-agenda__btn:hover {
    background-color:   var(--wp--preset--color--theme-palette-4, #111111);
    border-color: var(--wp--preset--color--theme-palette-4, #111111);
    color:        #ffffff;
}
.ccbla-filters-agenda__btn:focus-visible {
    outline:        3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 3px;
}
.ccbla-filters-agenda__btn:focus { outline: none; }

/* TOGGLE OVERLAY — un seul gros POP loader englobant filtres + résultats pendant le changement de source (Au POP ↔ Chez nos membres) */

.ccbla-toggle-overlay {
    position:       absolute; /* calé sur document, scrolle avec la page */
    z-index:        10000;
    background:     rgba(255, 255, 255, .92);
    display:        flex;
    align-items:    center;
    justify-content: center;
    pointer-events: auto; /* bloque les clics pendant le reload */
    animation:      ccbla-toggle-overlay-fadein .18s ease-out;
}

@keyframes ccbla-toggle-overlay-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Inner: position:fixed centré viewport. Le POP reste visible au milieu de l'écran pendant toute la durée du toggle, peu importe la taille de la zone overlay avant/après (position:sticky dans un absolute à hauteur limitée ne se comportait pas de façon fiable — selon que la bbox soit plus courte ou plus longue que 40vh, le sticky ne trouvait pas de "zone de collage" et le loader sortait de la viewport). */
.ccbla-toggle-overlay__inner {
    position:       fixed;
    top:            60%; /* 50% + ~10vh : loader un peu plus bas que le centre pile */
    left:           50%;
    transform:      translate(-50%, -50%);
    z-index:        10001;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    pointer-events: none;
}

.ccbla-toggle-overlay__spinner {
    position:      relative;
    width:         3.5rem;
    height:        3.5rem;
    border:        0;
    border-radius: 50%;
    background:    transparent;
    flex-shrink:   0;
}
.ccbla-toggle-overlay__spinner::before {
    content:          '';
    position:         absolute;
    inset:            0;
    border:           var(--ccbla-pop-loader-ring-width) solid var(--ccbla-pop-loader-ring-color);
    border-top-color: var(--ccbla-pop-loader-ring-accent, var(--wp--preset--color--pop-dark, #111));
    border-radius:    50%;
    animation:        ccbla-pop-loader-spin .9s linear infinite;
}
.ccbla-toggle-overlay__spinner::after {
    content:             '';
    position:            absolute;
    top:                 50%;
    left:                50%;
    width:               var(--ccbla-pop-loader-badge-width);
    height:              var(--ccbla-pop-loader-badge-height);
    transform:           translate(-50%, -50%);
    border-radius:       var(--ccbla-pop-loader-badge-radius);
    background-color:    var(--ccbla-pop-loader-badge-bg);
    background-image:    var(--ccbla-pop-loader-logo);
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     var(--ccbla-pop-loader-logo-size);
}

/* Le __badge DOM injecté par script.js est décoratif/redondant — le POP est rendu via::after sur le spinner. Caché visuellement (on le garde dans le DOM pour compat future / debug). */
.ccbla-toggle-overlay__badge { display: none; }

/* RESPONSIVE */

@media (max-width: 900px) {
    .ccbla-filters-agenda__dropdowns { grid-template-columns: 1fr 1fr; }
    .ccbla-cdd__trigger { font-size: 16px; }
    .ccbla-cdd__option { font-size: 16px; }
    .ccbla-filters-agenda__btn { font-size: 16px; }
}

@media (max-width: 767px) {
    .ccbla-filters-agenda__dropdowns    { grid-template-columns: 1fr; gap: 1.25rem; }
    .ccbla-filters-agenda__row--toggles  { margin-bottom: 40px; }
    .ccbla-filters-agenda__row--dropdowns { margin-bottom: 40px; }

    .ccbla-filters-agenda__toggles { flex-direction: column; }
    .ccbla-agenda-toggle {
        flex-direction: row-reverse;
        padding:        .9em 1.2em;
    }

    .ccbla-filters-agenda__actions { flex-wrap: nowrap; gap: .75rem; }
    .ccbla-filters-agenda__btn {
        flex:            1;
        justify-content: center;
        min-width:       0;
    }

    /* ── Mobile : select natif, pas de custom dropdown ───────────── */
    .ccbla-filters-agenda__select--hidden {
        position: static !important;
        width:    100% !important;
        height:   auto !important;
        opacity:  1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    .ccbla-filters-agenda .ccbla-cdd__trigger,
    .ccbla-filters-agenda .ccbla-cdd__listbox {
        display: none !important;
    }

    /* ── Uniformisation typo mobile — 16px ─────────────────────── */
    .ccbla-filters-agenda__label   { font-size: 16px !important; line-height: 1.2 !important; }
    .ccbla-agenda-toggle           { font-size: 16px !important; padding: .85em 1.2em !important; }
    .ccbla-filters-agenda__select  { font-size: 16px !important; }
}