/**
 * Le pied de page, identique sur tout le site.
 *
 * Il était réécrit dans chaque fichier, avec des marges et des liens
 * légèrement différents d'une page à l'autre : le site paraissait bricolé au
 * moment précis où le visiteur cherche à savoir qui est derrière.
 */

footer {
  margin-top: 3.5rem;
  padding: 2.25rem 0 2.75rem;
  border-top: 1px solid rgba(45, 74, 30, .12);
  font-size: .85rem;
  color: #8a8478;
}

footer .wrap {
  max-width: 1000px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2.5rem;
}

/* Marque à gauche : le logo, le nom, et dessous ce que fait la maison — sans
   quoi « Chèque Équitation » se lit comme un intitulé de rubrique. */
.pied-marque { display: flex; align-items: center; gap: 1rem; }
/* Rogné en carré, le logo devenait une tache : on garde ses proportions et une
   taille où le dessin se lit encore. */
.pied-marque img {
  height: 82px; width: auto; max-width: 130px; flex: none;
  border-radius: 12px; object-fit: contain;
}
.pied-nom { display: block; font-weight: 700; color: #3d3830; font-size: 1.02rem; }
.pied-baseline {
  display: block; margin-top: .15rem; max-width: 34ch;
  color: #8a8478; font-size: .8rem; line-height: 1.4;
}

/* Les liens sont mis en gras : ce sont les seuls du pied, et on les cherche.
   Ils passent à la ligne quand la place manque. Les forcer sur une seule
   ligne tenait avec trois liens courts ; à cinq, dont un long, la ligne
   devenait plus large que l'écran et élargissait toute la page — on pouvait
   la faire glisser sur le côté, et la marque centrée sur cette largeur
   fantôme se retrouvait décalée et coupée. */
.pied-liens {
  display: flex; flex-direction: column; gap: .55rem;
}
/* Une ligne par public : le petit libellé dit à qui elle s'adresse. Il garde
   une largeur fixe pour que les liens s'alignent d'une ligne à l'autre. */
.pied-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem; }
.pied-quoi {
  flex: none; min-width: 5.2rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #a39d92;
}
.pied-reste { margin-top: .35rem; font-size: .8rem; }
.pied-reste a { font-weight: 600; }
.pied-liens a { color: #55504a; font-weight: 700; text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }

/* Sans min-width, le texte de la marque refuse de rétrécir sous sa largeur
   naturelle et pousse le bloc hors de l'écran au lieu de passer à la ligne. */
.pied-marque > span { min-width: 0; }

@media (max-width: 620px) {
  footer .wrap { flex-direction: column; align-items: center; text-align: center; }
  .pied-marque { text-align: left; }
  /* Sur téléphone, le libellé passe au-dessus de ses liens, centré : côte à
     côte, il laissait trop peu de place aux liens et les coupait. */
  .pied-liens { gap: .9rem; }
  .pied-ligne { justify-content: center; gap: .2rem 1.1rem; }
  .pied-quoi { flex-basis: 100%; min-width: 0; }
  .pied-reste { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; }
}