/* Pages de catégories : mention QWERTY des cartes, liens vers les pages voisines, bouton sous la grille. Valeurs via tokens.css. */
.carte .qwerty { font-size: var(--sg-t-legende); font-weight: 600; color: var(--sg-lien); margin-top: var(--sg-1); }
.liens-lies { display: flex; flex-wrap: wrap; gap: var(--sg-3) var(--sg-5); margin-top: var(--sg-6); }
.liens-lies a { display: inline-flex; align-items: center; min-height: 44px; }
.grille + .actions { margin-top: var(--sg-6); }

/* Pastilles : passer d'une catégorie voisine à l'autre */
.sous-nav { display: flex; flex-wrap: wrap; gap: var(--sg-2) var(--sg-3); margin-top: var(--sg-5); }
.sous-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sg-4); border: 1px solid var(--sg-champ); border-radius: 999px; background: var(--sg-blanc); font-weight: 500; font-size: var(--sg-t-petit); }
.sous-nav a[aria-current] { background: var(--sg-encre); border-color: var(--sg-encre); color: var(--sg-blanc); }
@media (hover: hover) { .sous-nav a:not([aria-current]):hover { border-color: var(--sg-encre); } }

/* Bandeau : pastilles en papier sur le fond bleu */
.bandeau .sous-nav a { background: transparent; border-color: var(--sg-papier); color: var(--sg-papier); }
.bandeau .sous-nav a[aria-current] { background: var(--sg-papier); border-color: var(--sg-papier); color: var(--sg-encre); }
@media (hover: hover) { .bandeau .sous-nav a:not([aria-current]):hover { background: var(--sg-encre-survol); } }