/**
 * Filtres Membres · style.css — valeurs hardcodées #111/#fff
 * WCAG 2.2 AA : focus-visible, contraste 18:1
 *
 * Refonte UX 2026-04 :
 *   - Suppression du loader inline (updates counts silencieux)
 *   - Options count=0 : grisées, non cliquables
 *   - Note : les classes .ccbla-cdd__* sont partagées avec filters-agenda
 *     et filters-membres (custom combobox/listbox a11y). Les styles de ces
 *     classes sont définis dans blocks/filters-agenda/style.css — ce fichier
 *     ne les redéfinit pas pour éviter les conflits de cascade.
 */

/* ── sr-only ─────────────────────────────────────────────────────────── */
.ccbla-filters-membres .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-membres {
    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-membres--preview {
    padding: 1rem 1.5rem;
    border: 2px dashed #bbb;
    background: #fafafa;
    color: #333;
}

.kb-row-layout-wrap:has( .ccbla-filters-membres ) {
    position: relative;
    z-index:  50;
}

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

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

.ccbla-filters-membres__dropdowns {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   30px;
    align-items:           end;
    width:                 100%;
    /* Reset fieldset : pas de bord, padding, marge */
    border:                none;
    padding:               0;
    margin:                0;
    min-width:             0;
}

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

.ccbla-filters-membres__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-membres__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-membres__select:focus-visible { outline: none; }
.ccbla-filters-membres__select:focus         { outline: none; color: var(--pop-dark); }

.ccbla-filters-membres__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;
}
.ccbla-filters-membres__select option:disabled { color: #999; }

/* ── Wrap + select--hidden : même logique que filters-agenda ────────── */
.ccbla-filters-membres__select--hidden {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    opacity:  0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

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

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

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

/* Chevron SVG */
.ccbla-filters-membres__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-membres__chevron svg { display: block; width: 21px; height: 12px; }

/* CUSTOM DROPDOWN (listbox) — classes.ccbla-cdd__* partagées avec filters-agenda et filters-membres. Dupliquées ici pour que le bloc filters-membres soit fonctionnel seul (pages scolaires qui n'ont pas filters-agenda chargé). */

.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-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; }
.ccbla-cdd__trigger[disabled],
.ccbla-cdd__trigger[aria-disabled="true"] {
    opacity: .4;
    cursor:  wait;
}

.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; }

.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;
}

.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;
}

.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; }

.ccbla-cdd__option--disabled,
.ccbla-cdd__option[aria-disabled="true"] {
    color:            #999;
    background-color: transparent;
    cursor:           not-allowed;
    pointer-events:   none;
}
.ccbla-cdd__option--disabled .ccbla-cdd__option-count { opacity: .7; }

/* BOUTONS */

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

.ccbla-filters-membres__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         12px 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-membres__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-membres__btn:focus-visible {
    outline:        3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 3px;
}
.ccbla-filters-membres__btn:focus { outline: none; }

/* RESPONSIVE */

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

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

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

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

    .ccbla-filters-membres__label  { font-size: 16px !important; line-height: 1.2 !important; }
    .ccbla-filters-membres__select { font-size: 16px !important; }
}


/* TOGGLE OVERLAY — POP loader englobant filtres + résultats membres pendant le clic « Réinitialiser » (cohérence UX avec filters-agenda). 2026-05-04: dupliqué de filters-agenda/style.css L411-487. Variables --ccbla-pop-loader-* définies dans style.css global L1129+. */

.ccbla-toggle-overlay {
    position:       absolute;
    z-index:        10000;
    background:     rgba(255, 255, 255, .92);
    display:        flex;
    align-items:    center;
    justify-content: center;
    pointer-events: auto;
    animation:      ccbla-toggle-overlay-fadein .18s ease-out;
}

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

.ccbla-toggle-overlay__inner {
    position:       fixed;
    top:            60%;
    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);
}

.ccbla-toggle-overlay__badge { display: none; }