/* ===========================
   Annuaire Membres — Styles
   =========================== */

:root {
  --am-bg: #ffffff;
  --am-border: #e5e7eb;
  --am-border-strong: #d1d5db;
  --am-text: #111827;
  --am-muted: #6b7280;
  --am-muted-2: #9ca3af;
  --am-accent: #2563eb;
  --am-accent-2: #eff6ff;
  --am-hover: #f9fafb;
  --am-row-alt: #fcfcfd;
  --am-row-edit: #fff7ed;
}

/* Toggle (si présent) */
#annuaire-inline-toggle { accent-color: var(--am-accent); }

/* ---- Table container & base ---- */
.table-responsive {
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  border-radius: 12px;
  overflow: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Table de l’annuaire */
#membresTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--am-text);
  font-size: 14px;
}

/* En-têtes */
#membresTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(#f9fafb, #f3f4f6);
  color: #374151;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--am-border);
  white-space: nowrap;
}

/* Cellules */
#membresTable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--am-border);
  vertical-align: top;
}

/* Zébrage + hover */
#membresTable tbody tr:nth-child(even) td {
  background: var(--am-row-alt);
}
#membresTable tbody tr:hover td {
  background: var(--am-hover);
}

/* Lien ID */
#membresTable a { color: #2271b1; text-decoration: none; }
#membresTable a:hover { text-decoration: underline; }

/* Édition inline */
.am-can-edit { cursor: text; position: relative; }
.am-can-edit:hover {
  box-shadow: inset 0 0 0 1px var(--am-border-strong);
  border-radius: 6px;
}
.is-dirty { background: var(--am-row-edit) !important; }

/* Inputs inline */
.am-editor,
.am-select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--am-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--am-text);
  outline: none;
}
.am-editor:focus,
.am-select:focus {
  border-color: var(--am-accent);
  box-shadow: 0 0 0 3px var(--am-accent-2);
}

/* Loader spinner */
.am-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--am-text);
  font-size: 12px;
}
.am-loading .am-spin {
  width: 18px;
  height: 18px;
  display: inline-block;
  animation: am-rotate 1s linear infinite;
}
@keyframes am-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Petits écrans */
@media (max-width: 900px) {
  #membresTable { font-size: 13px; }
  #membresTable thead th, #membresTable tbody td { padding: 8px 10px; }
}

/* Ombre latérale pour indiquer le scroll horizontal */
.table-responsive {
  position: relative;
  overflow-x: auto;
}

.table-responsive::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;            /* largeur du dégradé */
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
  opacity: 0;             /* invisible par défaut */
  transition: opacity 0.2s;
}

.table-responsive.is-scrollable::after {
  opacity: 0;             /* active l’ombre quand scroll possible */
}

/* Tri par colonnes */
.am-sortable thead th.am-sort { cursor: pointer; user-select: none; position: relative; }
.am-sortable thead th.am-sort:hover { background: #f6f7f9; }
.am-sortable thead th.am-sort .am-sort-ind {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #9ca3af;
}
.am-sortable thead th.am-sort.is-asc  .am-sort-ind::after { content: "▲"; }
.am-sortable thead th.am-sort.is-desc .am-sort-ind::after { content: "▼"; }

.am-results-count {
  margin: 0 0 10px 2px;
  font-size: 14px;
  font-weight: 500;
  color: #111827; /* gris foncé */
}

/* === Panneau colonnes === */
.am-cols-panel[hidden] { display: none !important; }
.am-cols-panel {
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.am-cols-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#111827; }
.am-cols-actions { display:flex; gap:10px; }
.am-link { background:none;border:0;color:#2563eb;cursor:pointer;padding:0;font-size:13px; }
.am-cols-grid {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;
}
.am-chk { display:flex;align-items:center;gap:8px;font-size:13px;color:#374151; }
.am-chk input { transform: translateY(1px); }
.am-cols-foot { display:flex;justify-content:flex-end; }

/* Cacher une colonne */
.am-hide-col { display: none !important; }

/* Hints scroll (gauche/droite) — correction disparition */
.table-responsive {
  position: relative; overflow-x: auto; overflow-y: hidden;
}
.table-responsive::before,
.table-responsive::after{
  content:"";position:absolute;top:0;width:24px;height:100%;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2;
}
.table-responsive::before{ left:0;background:linear-gradient(to right, rgba(0,0,0,.13), transparent); }
.table-responsive::after{ right:0;background:linear-gradient(to left, rgba(0,0,0,.13), transparent); }
.table-responsive.has-left-shadow::before{ opacity:1; }
.table-responsive.has-right-shadow::after{ opacity:1; }

/* Carte / conteneur des filtres */
.am-filters-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Animation d’affichage/masquage (simple, sans JS compliqué) */
.am-filters-card.is-hidden {
  display: none !important;
}

/* Harmoniser fSelect / selects des facettes */
.facetwp-facet {
  margin-bottom:0px !important;
}
.facetwp-facet select,
.facetwp-facet .fs-wrap { width:100% !important; }
.facetwp-facet .fs-label { min-height:38px; border-radius:8px; }
.facetwp-facet .fs-dropdown { border-radius:8px; }

/* Libellés des facettes (au-dessus des fSelect / champs) */
.am-facet-label {
  display:block;
  font-weight:600;
  font-size:13px;
  color:#374151; /* gris sobre */
  margin: 2px 0 4px;
}

/* Harmoniser l’aspect des champs FacetWP/fSelect */
.facetwp-facet select,
.facetwp-facet .fs-wrap { width:100% !important; }
.facetwp-facet .fs-label { min-height:38px; border-radius:8px; }
.facetwp-facet .fs-dropdown { border-radius:8px; }

/* ===== FacetWP Pager — style harmonisé ===== */
:root{
  --am-bg: #fff;
  --am-muted: #f3f4f6;
  --am-border: #e5e7eb;
  --am-text: #111827;
  --am-dim: #6b7280;
  --am-primary: #2563eb;
  --am-primary-hover: #1d4ed8;
  --am-shadow: 0 1px 1px rgba(0,0,0,.03), 0 4px 10px rgba(0,0,0,.02);
}
@media (prefers-color-scheme: dark){
  :root{
    --am-bg: #0b0f14;
    --am-muted: #10161f;
    --am-border: #243040;
    --am-text: #e5e7eb;
    --am-dim: #9ca3af;
    --am-primary: #60a5fa;
    --am-primary-hover: #93c5fd;
    --am-shadow: 0 1px 1px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.15);
  }
}

/* Bloc pager */
.facetwp-pager{
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  border-radius:12px;
  padding:8px 0px;
  margin-top: 12px;
}

/* Boutons/pages */
.facetwp-page{
  display:inline-grid; place-items:center;
  min-width: 30px; height: 30px; padding: 6px !important;
  border:1px solid var(--am-border);
  border-radius:25px;
  background: var(--am-muted);
  color: var(--am-text);
  font-size:.95rem; line-height:1;
  cursor:pointer; user-select:none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  text-decoration:none;
  text-align: center;
}
.facetwp-page:hover{ transform: translateY(-1px); }
.facetwp-page:focus{ outline:none; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }

/* État actif (page courante) */
.facetwp-page.active,
.facetwp-page[aria-current="page"]{
  background: var(--am-primary);
  border-color: var(--am-primary);
  color: #fff;
}

/* Précédent/Suivant – accentuer à droite pour guider l'œil */
.facetwp-page.next, .facetwp-page.last{
  background: var(--am-primary);
  border-color: var(--am-primary);
  color:#fff;
}
.facetwp-page.next:hover, .facetwp-page.last:hover{
  background: var(--am-primary-hover);
  border-color: var(--am-primary-hover);
}

/* Désactivé */
.facetwp-page.disabled{
  opacity:.45; cursor:not-allowed; transform:none;
}

/* Ellipses “…” */
.facetwp-page.ellipsis{
  background: transparent; border-color: transparent; color: var(--am-dim);
  cursor: default;
}

/* Info à gauche/droite si tu ajoutes un wrapper .am-pager-info */
.am-pager-info{
  color: var(--am-dim); font-size:.95rem; margin-right: .25rem;
}

/* Compact sur mobile */
@media (max-width:680px){
  .facetwp-pager{ gap:.35rem; padding:6px 8px; }
  .facetwp-page{ min-width:32px; height:32px; border-radius:10px; font-size:.9rem; }
}

/* ===== Facette "Per Page" (sélecteur) ===== */
.facetwp-facet.per_page select,
.facetwp-facet.facetwp-type-per_page select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: var(--am-muted);
  color: var(--am-text);
  border:1px solid var(--am-border);
  border-radius:10px;
  padding:8px 12px; line-height:1.1; font-size:.95rem;
  box-shadow:none;
}
.facetwp-facet.per_page select:focus,
.facetwp-facet.facetwp-type-per_page select:focus{
  outline:none; box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* Collage visuel avec ton tableau */
.table-responsive + .facetwp-pager{ margin-top:10px; }

#am-reset-filters.am-btn {
  background: var(--am-muted);
  border: 1px solid var(--am-border);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .95rem;
  color: var(--am-text);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  margin-top:25px;
}
#am-reset-filters.am-btn:hover {
  background: var(--am-primary);
  border-color: var(--am-primary);
  color: #fff;
}