/* --- pied de page ---
   Extrait de `home.css` le 2026-08-18. Le pied est rendu sur TOUTES les pages,
   sa feuille ne pouvait donc pas rester dans celle de l'accueil : conditionner
   `home.css` à la page d'accueil aurait emporté le pied avec elle partout
   ailleurs. Le reste de `home.css` (héros, club) ne sert qu'à l'accueil.

   Cette feuille reste chargée partout, à la différence de celles qu'elle
   laisse derrière elle. */

.ub-pied {
  background: var(--ub-creme);
  border-block-start: 1px solid var(--ub-ligne);
  margin-block-start: 2rem;
}

/* Des pistes à la largeur de leur contenu, réparties à espaces égaux, et non
   quatre pistes `1fr` : en `1fr` chaque rubrique recevait le quart de l'écran
   alors qu'aucune n'en a besoin, ses liens se calaient à gauche de sa piste et
   le pied laissait un large vide sur la droite. `space-evenly` donne le même
   intervalle avant, entre et après les rubriques — le bloc est centré sans
   perdre l'alignement à gauche des liens à l'intérieur de chaque rubrique. */
.ub-pied__colonnes {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-evenly;
  padding: 2.2rem 1.2rem 1.2rem;
}

/* La bascule est un vrai `<button>` pour l'accordéon mobile. Sur grand écran
   elle doit se lire comme le titre de colonne de la maquette : ni fond, ni
   bordure, ni curseur de clic, et le signe masqué. `inherit` sur la police évite
   qu'elle hérite de la pile du navigateur pour les contrôles de formulaire. */
.ub-pied__bascule {
  background: none;
  border: 0;
  color: inherit;
  cursor: default;
  display: block;
  font: inherit;
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

.ub-pied__signe {
  display: none;
}

.ub-pied__titre {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  margin-block-end: 0.7rem;
  text-transform: uppercase;
}

.ub-pied__liens a {
  color: var(--ub-gris);
  display: block;
  font-size: 0.7rem;
  line-height: 2;
  text-decoration: none;
}

.ub-pied-barre {
  align-items: center;
  border-block-start: 1px solid var(--ub-ligne);
  color: var(--ub-gris);
  display: flex;
  font-size: 0.62rem;
  gap: 0.8rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding: 0.9rem 1.2rem;
  text-transform: uppercase;
}

.ub-pied-barre__moyens {
  display: flex;
  gap: 0.4rem;
}

.ub-pied-barre__moyen {
  border: 1px solid var(--ub-ligne);
  display: inline-block;
  font-size: 0.55rem;
  font-style: normal;
  padding: 0.3rem 0.45rem;
}

@media (max-width: 767px) {
/* --- pied en accordéon (maquette `.mob .cb-acc`) ---
     Une colonne, chaque rubrique devenant une ligne repliable séparée par un
     filet. La grille perd sa gouttière et ses marges intérieures latérales : les
     filets doivent courir d'un bord à l'autre, comme sur la maquette, et une
     gouttière les aurait interrompus entre deux lignes. */
  .ub-pied__colonnes {
    gap: 0;
    grid-template-columns: 1fr;
    padding-block: 0;
    padding-inline: 0;
  }

  .ub-pied__colonne {
    border-block-end: 1px solid var(--ub-ligne);
  }

  /* Le titre et le signe aux deux bouts de la ligne. La zone de contact couvre
     toute la ligne, pas seulement le texte : c'est un accordéon au doigt. */
  .ub-pied__bascule {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0.95rem var(--ub-gouttiere-page);
  }

  /* La marge basse servait à détacher le titre de ses liens en colonne ; sur une
     ligne repliée elle décentrerait le texte par rapport au signe. */
  .ub-pied__titre {
    margin-block-end: 0;
  }

  .ub-pied__signe {
    color: var(--ub-gris);
    display: block;
    font-size: 0.85rem;
    line-height: 1;
  }

/* Glissement à l'ouverture et à la fermeture.

     La rangée de grille passe de `0fr` à `1fr` : c'est ce qui permet d'animer
     jusqu'à la hauteur réelle du contenu, qu'aucune valeur de `max-height` ne
     connaît d'avance — les rubriques n'ont pas le même nombre de liens. La piste
     intérieure (`.ub-pied__liste`) est l'enfant unique que la rangée rogne
     pendant le trajet.

     L'état replié est porté par `[data-ub-replie]`, posé par le script, et non
     l'inverse : sans JavaScript le pied reste donc déplié et tous ses liens
     atteignables.

     `visibility` sort les liens repliés du parcours clavier — une rangée de
     hauteur nulle laisse ses liens focusables. Elle est transitionnée avec la
     rangée pour ne basculer qu'en fin de trajet, sinon le contenu disparaîtrait
     d'un coup avant même de commencer à glisser.

     La règle globale `prefers-reduced-motion` de `base.css` ramène la durée à
     0,01 ms : rien à répéter ici. */
  .ub-pied__liens {
    display: grid;
    grid-template-rows: 1fr;

    /* Retrait latéral porté par le conteneur : sur l'axe horizontal il n'entre
       pas dans le calcul de la hauteur de rangée, contrairement au retrait bas
       (voir `.ub-pied__liste`). */
    padding: 0 var(--ub-gouttiere-page);
    visibility: visible;
  }

  /* Les transitions n'entrent en jeu qu'une fois le premier état posé, marqué par
     le script. Sans ce garde-fou, le pied — rendu déplié par le serveur — se
     serait replié en glissant au chargement, sous les yeux du visiteur. */
  .ub-pied--anime .ub-pied__liens {
    transition: grid-template-rows 260ms ease, visibility 260ms;
  }

  .ub-pied__colonne[data-ub-replie] .ub-pied__liens {
    grid-template-rows: 0fr;
    visibility: hidden;
  }

  /* Les marges intérieures vivent sur la piste et non sur le conteneur : posées
     sur ce dernier, elles resteraient visibles une fois la rangée à zéro et
     laisseraient un ruban de crème sous chaque rubrique repliée. */
/* La piste ne porte aucune marge intérieure, et ce n'est pas un oubli : une
     marge intérieure s'ajoute toujours à la contribution minimale d'un élément de
     grille — seul le contenu est rognable par `overflow: hidden`. Un
     `padding-block-end: 0.9rem` ici bloquait la rangée repliée à 14 px au lieu de
     zéro, laissant un ruban de liens tronqués sous chaque rubrique fermée.
     `min-block-size: 0` et `overflow: hidden` sont les deux conditions du
     glissement : sans eux la rangée ne descend pas sous la hauteur du contenu. */
  .ub-pied__liste {
    min-block-size: 0;
    overflow: hidden;
  }

  /* L'espace sous le dernier lien est donc posé comme du contenu, qui se rogne
     avec le reste. */
  .ub-pied__liste::after {
    block-size: 0.9rem;
    content: '';
    display: block;
  }

  .ub-pied-barre {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}