.cusbloc_superviseurs {
    --color-1: #187F8B;
    --color-2: #63A27A;
}

/* ── Layout membres ──────────────────────────────────────────────────── */

.cusbloc_superviseurs .result.membre .cols { display: flex; gap: 20px; }
.cusbloc_superviseurs .result.membre .col0 { flex: 0 0 220px; }
.cusbloc_superviseurs .result.membre .col1 { flex: 1 1 0; }


/* ── Bouton retour ───────────────────────────────────────────────────── */

.cusbloc_superviseurs .back-button { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-size: 1.1rem; margin-bottom: 2rem; padding: 0.5rem; border: 2px solid #ccc; border-radius: 10px; }
.cusbloc_superviseurs .back-button:hover { border-color: #000; }
.cusbloc_superviseurs a.back-button * { color: #666; }
.cusbloc_superviseurs a.back-button:hover * { color: #666!important; }
.cusbloc_superviseurs .back-button svg { width: 12px; height: 18px; fill: var(--color-1); display: block; }

/* ── Formulaire de filtre ────────────────────────────────────────────── */

.cusbloc_superviseurs .filter-form { line-height: 1.2em; margin-bottom: 2em; }
.cusbloc_superviseurs .filter-form .sections { width: 100%; display: flex; flex-direction: row; gap: 8px; }
.cusbloc_superviseurs .filter-form .section { background-color: transparent; margin: 5px 0; border-radius: 7px; }
.cusbloc_superviseurs .filter-form .section label { display: block; margin-bottom: 0.25em; }
.cusbloc_superviseurs .filter-form .section-header { padding: 4px 8px; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; }
.cusbloc_superviseurs .filter-form .section-header .icon { width: 20px; height: 20px; fill: #999; }
.cusbloc_superviseurs .filter-form .section-body { padding: 8px; }
.cusbloc_superviseurs .filter-form input { padding: 6px; border-radius: 3px; border: 1px solid #ccc; font-size: 1em; }
.cusbloc_superviseurs .filter-form input[type="submit"] { background-color: var(--color-1); color: #fff; border-color: var(--color-1); padding: 5px 12px; }
.cusbloc_superviseurs .filter-form a.reset { line-height: 1.8em; padding: 0 8px; }
.cusbloc_superviseurs .filter-form input[type="submit"]:hover { border-color: #fff; outline: 2px solid #000; }
.cusbloc_superviseurs .filter-form select { min-width: 10em; }
.cusbloc_superviseurs .filter-form .slider-dot { border-color: var(--color-1)!important; }
.cusbloc_superviseurs .filter-form .slider-bar { background-color: var(--color-1)!important; }
.cusbloc_superviseurs .filter-form .field-select select { min-width: 6rem; width: 100%; }
.cusbloc_superviseurs .filter-form .area-control { border: 1px solid #ccc; border-radius: 3px; padding: 0.3rem; font-size: 1rem; line-height: 1.2em; box-sizing: border-box; background-color: #eee; }
.cusbloc_superviseurs .filter-form .field-checkboxes { display: flex; flex-direction: column; gap: 0.5em; }
.cusbloc_superviseurs .filter-form .checkbox-field { display: flex; gap: 0.5em; align-items: middle; cursor: default; user-select: none; }
.cusbloc_superviseurs .filter-form .checkbox { display: inline-block; border: 2px solid #999; border-radius: 5px; width: 20px; background-color: #fff; height: 20px; position: relative; box-sizing: border-box; }
.cusbloc_superviseurs .filter-form .checkbox .icon { width: 100%; height: 100%; position: absolute; fill: #009; }
.cusbloc_superviseurs .filter-form .field-button input { font-size: 1rem; }

/* ── Barre de résultats ──────────────────────────────────────────────── */

.cusbloc_superviseurs .splitbar { font-size: 1.1rem; margin-bottom: 15px; color: #666; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cusbloc_superviseurs .splitbar a { display: block; width: 32px; height: 32px; text-align: center; text-decoration: none; color: inherit; line-height: 32px; border-radius: 3px; }
/* .cusbloc_superviseurs .splitbar a.number { background-color: rgba(0,0,0,0.2);  } */
.cusbloc_superviseurs .splitbar a.on { background-color: var(--color-1); color: #fff!important; }
.cusbloc_superviseurs .splitbar .icon { width: 32px; height: 32px; }
.cusbloc_superviseurs .splitbar .icon svg { fill: var(--color-1); width: auto; height: 100%; display: block; margin: 0 auto; }

/* ── Cards liste général ─────────────────────────────────────────── */

.cusbloc_superviseurs .results { display: flex; gap: 35px; flex-wrap: wrap; margin-bottom: 15px; }
.cusbloc_superviseurs .result { position: relative; flex: 1 1 320px; min-width: 320px; max-width: 500px; cursor: pointer; display: flex; flex-direction: column; box-sizing: border-box; }
.cusbloc_superviseurs .result { padding: 6px 18px; background-color: #f4f4f4; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }
.cusbloc_superviseurs .result:before { content: ""; left: 0; top: 0; width: 8px; height: 35px; background-color: var(--color-1); position: absolute; }
/*.cusbloc_superviseurs .result { border: 2px solid #ddd; border-radius: 8px; background-color: #f9f9f9; padding: 14px; transition: border-color 0.15s; }*/
.cusbloc_superviseurs .result:hover { background-color: #fff;  }
.cusbloc_superviseurs a.result { text-decoration: none; color: inherit; }
.cusbloc_superviseurs .result h2 { margin: 0 0 0.7em!important; font-size: 1.2rem!important; color: var(--color-1)!important; }
.cusbloc_superviseurs .result h3 { margin: 0 0 0.6em!important; font-size: 1rem!important; color: #444!important; font-weight: normal!important; }
.cusbloc_superviseurs .result .header { margin-bottom: 0.8rem; color: #444; }

/* ── Cards liste des groupes ─────────────────────────────────────────── */

.cusbloc_superviseurs .result .bloc { margin-bottom: 0.8rem; color: #444; }
.cusbloc_superviseurs .result .lieu { display: flex; gap: 0.5em; }
/* ── Cards liste des membres ─────────────────────────────────────────── */


.cusbloc_superviseurs .membre-cantons { font-size: 0.9rem; color: #555; margin-bottom: 0.4em; }
.cusbloc_superviseurs .membre-cantons { display: flex; gap: 15px; flex-wrap: wrap; }
.cusbloc_superviseurs .membre-cantons .canton > * { display: block; text-align: center; font-weight: bold; }
.cusbloc_superviseurs .membre-cantons .canton > img { margin-bottom: 0.35rem; }

.cusbloc_superviseurs .articles .result .membre-cantons { justify-content: flex-end; }

.cusbloc_superviseurs .dispos { margin-left: 1.2rem; font-size: 1rem; }
.cusbloc_superviseurs .dispos li { margin-bottom: 0.25rem; color: #333; }

.cusbloc_superviseurs .articles .result .membre-contact { font-size: 0.85rem; color: #777; margin-top: auto; padding-top: 0.5em; word-break: break-all; }

/* ── Tags de disponibilité ───────────────────────────────────────────── */

.cusbloc_superviseurs .articles .result .cols { display: flex; } 
.cusbloc_superviseurs .articles .result .cols .col0 { flex: 0 0 60%; }
.cusbloc_superviseurs .articles .result .cols .col1 { flex: 0 0 40%; }
.cusbloc_superviseurs .dispo-tag { display: block; font-size: 0.85rem; color: #333; }
/*
.cusbloc_superviseurs .dispo-tag.dispo-Pé  { background-color: #e8f4e8; color: #2a602a; border-color: #90c890; }
.cusbloc_superviseurs .dispo-tag.dispo-Pr  { background-color: #fef6e4; color: #7a5000; border-color: #f0c060; }
.cusbloc_superviseurs .dispo-tag.dispo-G   { background-color: #eee8f8; color: #44288a; border-color: #b090d8; }
.cusbloc_superviseurs .dispo-tag.dispo-E   { background-color: #fde8e8; color: #8a1818; border-color: #d89090; }
.cusbloc_superviseurs .dispo-tag.dispo-Ent { background-color: #e4f4f8; color: #185878; border-color: #80c4d8; }
*/

/* ── Fiche détail du membre ──────────────────────────────────────────── */

.cusbloc_superviseurs .fiche h1 { margin-bottom: 1.2em!important; font-size: 2rem!important; color: var(--color-1)!important; }
.cusbloc_superviseurs .fiche h2 { margin-bottom: 0.5em!important; color: #444!important; }
.cusbloc_superviseurs .fiche h3 { margin-bottom: 1em; }
.cusbloc_superviseurs .fiche .out-bloc { margin-bottom: 2em; }
.cusbloc_superviseurs .fiche .in-bloc { margin-bottom: 2em; }

.cusbloc_superviseurs .fiche .cols { display: flex; gap: 15px; flex-wrap: wrap; }
.cusbloc_superviseurs .fiche .cols .col { flex: 1 1 45%; min-width: 300px; }

.cusbloc_superviseurs .fiche ul { margin-left: 1.5em; }
    
.cusbloc_superviseurs .membre-fiche .cantons { }
.cusbloc_superviseurs .membre-fiche .dispos  {  }

.cusbloc_superviseurs .membre-fiche .membre-info { line-height: 1.6em; margin: 1em 0; font-size: 1.05em; }

.cusbloc_superviseurs .membre-fiche .contacts { display: flex; gap: 30px; flex-wrap: wrap; margin: 1.5em 0; }
.cusbloc_superviseurs .membre-fiche .contact-block { flex: 1 1 240px; min-width: 200px; }
.cusbloc_superviseurs .membre-fiche .contact-block h4 { margin: 0 0 0.5em!important; font-size: 1rem!important; color: var(--color-1)!important; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.cusbloc_superviseurs .membre-fiche .contact-block .adr { font-size: 0.95rem; line-height: 1.5em; margin-bottom: 0.4em; color: #444; }
.cusbloc_superviseurs .membre-fiche .contact-block a { color: var(--color-1); text-decoration: none; }
.cusbloc_superviseurs .membre-fiche .contact-block a:hover { text-decoration: underline; }
.cusbloc_superviseurs .membre-fiche .contact-block div { margin-bottom: 0.25em; font-size: 0.95rem; }

.cusbloc_superviseurs .membre-fiche .groupes-intervision { margin-top: 1.5em; }
.cusbloc_superviseurs .membre-fiche .groupes-intervision h4 { margin-bottom: 0.5em!important; color: var(--color-1)!important; }
.cusbloc_superviseurs .membre-fiche .groupes-intervision ul { margin: 0; padding-left: 1.2em; }
.cusbloc_superviseurs .membre-fiche .groupes-intervision li { margin-bottom: 0.2em; }

/* ── Fiche détail du groupe ──────────────────────────────────────────── */

.cusbloc_superviseurs .groupe-fiche { }

@media (max-width: 768px) {
    .cusbloc_superviseurs .membres-layout { flex-direction: column; }
    .cusbloc_superviseurs .membres-layout .col0 { flex: none; width: 100%; }
    .cusbloc_superviseurs .filter-form .sections { flex-direction: row; flex-wrap: wrap; }
    .cusbloc_superviseurs .fiche .contacts { flex-direction: column; gap: 15px; }
}