/* membres.css */
.page-header { background: var(--creme); padding: 7rem 5vw 3rem; border-bottom: 2px solid var(--sable); }
.page-header h1 { font-family: "Playfair Display", serif; font-size: clamp(2rem,4vw,3.2rem); color: var(--vert); }
.page-header p  { color: var(--gris); margin-top: .5rem; font-size: 1.05rem; }

.membres-filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.search-input { flex: 1 1 250px; padding: .75rem 1rem; border: 1.5px solid #ddd; border-radius: var(--radius); font-size: .95rem; font-family: inherit; outline: none; }
.search-input:focus { border-color: var(--or); }
.membres-filters select { padding: .75rem 1rem; border: 1.5px solid #ddd; border-radius: var(--radius); font-size: .95rem; font-family: inherit; }
.membres-count { color: var(--gris); font-size: .9rem; margin-bottom: 1.5rem; }

.membres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.5rem; }
.membre-card { text-align: center; }
.membre-card-header { background: var(--sable); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.membre-photo  { width: 100%; height: 100%; object-fit: cover; }
.membre-avatar { font-family: "Playfair Display", serif; font-size: 2.5rem; font-weight: 700; color: var(--vert); }
.membre-card-body { padding: 1.2rem; }
.membre-name { font-family: "Playfair Display", serif; font-size: 1rem; font-weight: 700; color: var(--vert); margin-bottom: .5rem; }
.membre-meta { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--gris); margin-top: .6rem; }

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 3rem; }
.pagination button { background: var(--vert); color: #fff; border: none; padding: .6rem 1.4rem; border-radius: var(--radius); font-size: .9rem; cursor: pointer; transition: background var(--trans); }
.pagination button:hover { background: var(--vert-clair); }
.pagination span { font-size: .9rem; color: var(--gris); }
.no-result { color: var(--gris); text-align: center; padding: 3rem; }