/* APIA — Page « L'annuaire des membres » (T1) — node Figma 786:26974. Rail 1052, grille 4 cols, carte c-regt-profil réutilisée.
   Deps : apia-enjeu.css (l-rail, c-enjeu-btn, --apia-* tokens) · apia-home.css (c-join) · apia-region-term.css (c-regt-profil*). */

.s-annu{margin-block:96px}
.s-annu--head{margin-top:48px;margin-bottom:64px}
.s-annu--list{margin-top:0;margin-bottom:96px}
.s-annu--join{margin-block:128px}

/* H1 — Figtree SemiBold 48/52, gris Figma → bleu nuit (règle projet D8) */
.c-annu-h1{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0 auto 32px}

/* Toolbar : recherche + pastilles */
.c-annu-tools{display:flex;flex-direction:column;gap:24px}
.c-annu-search{position:relative;max-width:480px;width:100%}
.c-annu-search__ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--apia-gris-bleu);pointer-events:none}
.c-annu-search__input{width:100%;box-sizing:border-box;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:22px;color:var(--apia-bleu-marine);background:#fff;border:1px solid #9FB2C5;border-radius:12px;padding:12px 16px 12px 44px}
.c-annu-search__input::placeholder{color:var(--apia-gris-bleu)}
.c-annu-search__input:focus{outline:none;border-color:var(--apia-bleu);box-shadow:0 0 0 3px rgba(13,88,201,.12)}

/* Pastilles région — Figma : active marine/ciel, inactive bleu clair/marine, r8 14/18 medium */
.c-annu-pills{display:flex;flex-wrap:wrap;gap:8px}
.c-annu-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:var(--apia-bleu-marine);background:var(--apia-bleu-clair);border:0;border-radius:8px;padding:8px 12px;cursor:pointer;transition:background .15s,color .15s}
.c-annu-pill.is-active{background:var(--apia-bleu-marine);color:var(--apia-bleu-ciel)}
.c-annu-pill__n{font-weight:600;font-size:12px;line-height:1;padding:2px 6px;border-radius:999px;background:rgba(0,31,95,.10);color:var(--apia-bleu-marine)}
.c-annu-pill.is-active .c-annu-pill__n{background:rgba(255,255,255,.18);color:var(--apia-bleu-ciel)}

/* Grille 4 → 3 → 2 → 1 (carte = c-regt-profil 251×312 r28, réutilisée) */
.c-annu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c-annu-grid .c-regt-profil[hidden]{display:none}

/* État vide soigné (carte bleu clair r28) */
.c-annu-empty{max-width:1052px;margin:0 auto;background:var(--apia-bleu-clair);border-radius:28px;padding:64px 40px;text-align:center}
.c-annu-empty__t{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:0}

/* « Voir plus » — bouton c-enjeu-btn centré entre deux filets (Figma 786:27026) */
.c-annu-more{margin:64px auto 0;max-width:1052px;display:flex;align-items:center;gap:24px}
.c-annu-more::before,.c-annu-more::after{content:"";flex:1 1 auto;height:1px;background:#cdd9e6}
.c-annu-more__btn{flex:0 0 auto;align-self:center;cursor:pointer;border:0}
/* l'attribut [hidden] doit l'emporter sur le display de la classe (sinon « Voir plus » reste visible à 0 carte) */
.c-annu-more[hidden],.c-annu-empty[hidden]{display:none}

@media (max-width:1100px){
.s-annu .l-rail{padding-inline:16px;box-sizing:border-box}
.c-annu-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991px){
.s-annu{margin-block:56px}
.s-annu--head{margin-top:32px;margin-bottom:48px}
.s-annu--list{margin-bottom:56px}
.s-annu--join{margin-block:96px}
.c-annu-h1{font-size:33px;line-height:36px}
.c-annu-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.c-annu-grid{grid-template-columns:1fr}
.c-annu-h1{font-size:28px;line-height:34px}
.c-annu-search{max-width:none}
.c-annu-more{margin-top:48px}
.c-annu-empty{padding:48px 24px}
}
/* =====================================================================
   APIA — Mouvement (2026-08-28). Tokens : Bricks > Settings > Custom CSS.
   Un seul idiome : le fond s'assombrit vers le marine, l'element monte d'1px,
   le chevron avance de 3px ; au clic il redescend et se comprime a 99 %.
   Remplace les idiomes filter:brightness(). Zero JavaScript.
   ===================================================================== */

/* /!\ L'etat actif .is-active vaut deja --apia-bleu-marine : le survol part donc
   vers le bleu ciel, dans l'autre direction, et la pastille active est exclue
   par :not(.is-active) pour qu'un survol ne l'imite jamais. */
.c-annu-pill{transition:background-color var(--apia-dur-fast) var(--apia-ease),color var(--apia-dur-fast) var(--apia-ease),transform var(--apia-dur-fast) var(--apia-ease)}
@media (hover:hover){
  .c-annu-pill:hover:not(.is-active){background-color:var(--apia-bleu-ciel);color:var(--apia-bleu-marine);transform:translateY(-1px)}
  .c-annu-pill.is-active:hover{transform:translateY(-1px)}
}
.c-annu-pill:focus-visible{outline:2px solid var(--apia-bleu-marine);outline-offset:2px}