/* ================================================================
   ccba/search-membres — style frontend — aligne sur filters-agenda
   WCAG 2.2 AA
   ================================================================ */

/* ── Wrapper ── */
.ccbla-search-membres {
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
    padding:        0 0 0rem;
    color:          #111;
}

/* ── Label ── */
/* Aligné sur.ccbla-filters-membres__label pour cohérence visuelle de la barre de filtres sur la page /nos-membres/ (audit maquette 2026-04-30, finding 1). Le label "par nom:" doit avoir le même traitement typographique que les autres labels de filtres ("par type", "par domaine", "par public"). */
.ccbla-search-membres__label {
    display:       block;
    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;
}

/* ── Rangée input + bouton ── */
.ccbla-search-membres__row {
    display:     flex;
    gap:         1.25rem;
    align-items: stretch;
}

/* ── Input — fond transparent, underline, texte bold ── */
.ccbla-search-membres__input {
    flex:               1;
    padding:            .25rem 0 .35rem;
    border:             1px solid var(--pop-dark)!important;
    border-bottom:      2px solid #111;
    border-radius:      0px!important;
    background-color:   #fff!important;
    color:              #111;
    font-size:          1rem;
    font-weight:        700;
    font-family:        inherit;
    line-height:        1.7;
    box-sizing:         border-box;
    transition:         border-color .15s;
    -webkit-appearance: none;
    appearance:         none;
}
.ccbla-search-membres__input::placeholder {
    color:       #767676;
    font-weight: 400;
}
.ccbla-search-membres__input:focus-visible {
    outline:        3px solid #005fcc;
    outline-offset: 2px;
}
.ccbla-search-membres__input:focus:not(:focus-visible) { outline: none; }
.ccbla-search-membres__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ── Bouton Rechercher — rectangle bordé, comme Filtrer! ── */
.ccbla-search-membres__btn {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         10px;
    border:          1px solid #111;
    border-radius:   0;
    background:      #fff;
    color:           #111;
    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;
    min-height:      2.75rem;
    min-width:       44px;
    white-space:     nowrap;
}
.ccbla-search-membres__btn:hover {
    background: #111;
    color:      #fff;
}
.ccbla-search-membres__btn:focus-visible {
    outline:        3px solid #005fcc;
    outline-offset: 3px;
}
.ccbla-search-membres__btn:focus:not(:focus-visible) { outline: none; }

/* ── Séparateur « ou » ── */
.ccbla-search-membres__separator {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    padding: 1.5rem 0 1.5rem 0;
    color:           #111;
    font-size:       .85rem;
}
.ccbla-search-membres__separator::before,
.ccbla-search-membres__separator::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #111;
}
.ccbla-search-membres__separator span {
    font-size:    .8rem;
    font-style:   italic;
    color:        #111;
    white-space:  nowrap;
}

/* ── Responsive ── */
@media ( max-width: 767px ) {
    .ccbla-search-membres__row { flex-direction: column; gap: .75rem; }
    .ccbla-search-membres__btn { width: 100%; text-align: center; font-size: 16px; }
    /* Label: aligné sur.ccbla-filters-membres__label mobile (16px) — cohérence de la barre de filtres en viewport mobile. Audit maquette 2026-04-30 finding 1. */
    .ccbla-search-membres__label { font-size: 16px !important; line-height: 1.2 !important; }
}


.ccbla-search-membres__input:-webkit-autofill,
.ccbla-search-membres__input:-webkit-autofill:hover,
.ccbla-search-membres__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #111 !important;
    transition: background-color 5000s ease-in-out 0s;
}