/**
 * Bloc « Annuaire des comités ».
 *
 * L'alphabet en tête, les logos groupés par lettre. Aucun script : les
 * ancres sont natives, le navigateur fait le défilement.
 */

.annuaire { margin-block: var(--e-section); }

.annuaire__intro {
  max-width: var(--largeur-texte);
  margin: 0 0 var(--e-l);
  font-size: var(--t-corps-grand);
}

/* ---------------------------------------------------------------
 * L'alphabet
 * --------------------------------------------------------------- */

.annuaire__alphabet { margin-bottom: var(--e-l); }

.annuaire__lettres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.annuaire__saut,
.annuaire__lettre-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2,75rem : la cible tactile minimale, y compris pour une seule lettre. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-family: var(--police-titre);
  /* De 26 px sur un grand écran à 16 sous 514 px de fenêtre. */
  font-size: clamp(1rem, 0.55rem + 1.4vw, 1.625rem);
  font-weight: var(--graisse-forte);
  text-decoration: none;
}

/*
 * Deux lignes de treize.
 *
 * L'alphabet se répartit sur toute la largeur plutôt que de se tasser à
 * gauche : treize colonnes égales, donc deux rangs de treize lettres,
 * et la fin de l'alphabet tombe au bord droit comme le début au bord
 * gauche.
 *
 * Au-dessus de 768 px seulement, et ce n'est pas un chiffre choisi : en
 * dessous, treize colonnes feraient des cibles de 36 px à 620, 27 à 480
 * et 21 sur un téléphone de 390 — sous les 24 px que demande le
 * référentiel, et loin des 44 que le thème tient partout ailleurs. En
 * dessous, l'alphabet reprend donc son repli libre, qui garde ses 44 px
 * et s'étale sur trois à six rangs selon la largeur.
 *
 * La bascule ne se voit pas : à 768 px, le repli libre donne déjà
 * exactement treize colonnes. Mesuré de part et d'autre — 13 colonnes de
 * 45 px au-dessus, 13 de 44 en dessous, et le même corps puisque le
 * clamp, lui, vaut à toutes les largeurs.
 */
@media (min-width: 48rem) {

  .annuaire__lettres {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
  }

  /* La colonne fait la largeur ; la cible tactile n'a plus à la porter. */
  .annuaire__saut,
  .annuaire__lettre-vide { min-width: 0; }
}

.annuaire__saut {
  color: var(--couleur-rubrique-texte);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.annuaire__saut:hover,
.annuaire__saut:focus-visible { border-bottom-color: var(--couleur-rubrique); }

.annuaire__saut:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

/* Une lettre sans comité reste visible — l'alphabet doit être complet
   pour qu'on le lise comme un alphabet — mais n'est pas cliquable. */
.annuaire__lettre-vide { color: var(--c-gris-40); }

/* ---------------------------------------------------------------
 * Les groupes
 * --------------------------------------------------------------- */

.annuaire__titre-lettre {
  margin: var(--e-xl) 0 var(--e-s);
  padding-bottom: var(--e-3xs);
  font-size: var(--t-h3);
  color: var(--couleur-rubrique-texte);
  border-bottom: 1px solid var(--couleur-separateur);

  /*
   * L'en-tête du site est collant : sans cette marge, l'ancre amènerait
   * le titre de lettre dessous et on croirait le lien cassé.
   */
  scroll-margin-top: 6rem;
}

/*
 * Chaque comité porte un ancrage, visé par la recherche du site : sans
 * réserve, l'en-tête collant couvrirait celui qu'on vient chercher.
 */
.annuaire__item { scroll-margin-top: 6rem; }

.annuaire__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--colonnes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.annuaire__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2xs);
  min-height: 7rem;
  padding: var(--e-s);
  border: 1px solid var(--couleur-filet);
  background-color: var(--couleur-fond);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.annuaire__lien:hover,
.annuaire__lien:focus-visible {
  border-color: var(--couleur-rubrique);
  box-shadow: var(--ombre-carte);
}

.annuaire__lien:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

.annuaire__logo {
  max-width: 100%;
  max-height: 5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * Le nom, sous le logo.
 *
 * Il coûte peu : les rangées de la grille s'alignent déjà sur leur carte
 * la plus haute, et l'ajouter rallonge l'annuaire de 22 % à 1440 px,
 * 17 à 992 et 4 sur un téléphone, où une carte par rangée laisse la
 * place. Les sigles développés n'y ajoutent que 9 % de plus que les noms
 * courts — ce n'est donc pas la mise en page qui décide de leur forme.
 *
 * « balance » répartit les lignes d'un nom qui passe à la ligne au lieu
 * de laisser un mot seul en dessous.
 */
.annuaire__nom {
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--graisse-medium);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: var(--couleur-titre);
}

.annuaire__lien--inactif {
  border-style: dashed;
  opacity: 0.7;
}

/*
 * Le défilement doux rend l'ancre lisible — on voit où l'on va. Il est
 * désactivé pour qui a demandé moins d'animation : un défilement long
 * peut déclencher un malaise vestibulaire.
 */
@media (prefers-reduced-motion: no-preference) {
  html:has(.annuaire) { scroll-behavior: smooth; }
}