/* Le pied de page : une seule feuille, comme il n y a qu une seule source de
 * balisage dans scripts/lib/pied-de-page.mjs.
 *
 * Ces regles vivaient dans styles.css, que les pages du blog ne chargent pas.
 * Le pied de page etait donc SERVI mais INVISIBLE sur onze pages : les quatre
 * colonnes et la bande basse etaient dans le HTML, sans une regle qui les
 * atteigne. Le test d empreinte etait vert, il gardait le balisage.
 *
 * C est exactement la regression deja rencontree sur l en-tete, et la meme
 * correction : une source unique de balisage exige une source unique de mise
 * en forme, chargee par les quatre familles.
 *
 * Les variables de charte sont declarees par styles.css comme par blog.css :
 * l une des deux est toujours chargee en amont. */

.footer {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 64px 0 32px;
}

.footer-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--yellow);
}

.footer-inner {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.footer-col-titre {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  margin: 0 0 16px;
}

.footer-lien {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.footer-a-paraitre {
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 32px;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-legal .footer-lien {
  display: inline;
  margin: 0 0 0 16px;
  font-size: 13px;
}

.footer-legal .footer-lien:first-child {
  margin-left: 0;
}

.footer-col h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yellow);
  margin: 0 0 6px;
  font-weight: 600;
}

/* Les points de rupture, les MEMES que la grille d articles.
   Les bornes sont en min-width, jamais en max-width : c est une declaration
   en max-width qui avait fait basculer la tablette du cote mobile. */

@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}

a.footer-lien:hover {
  color: var(--yellow);
}

/* La denomination de la bande basse n etait stylee NULLE PART : ni dans
   styles.css, ni ailleurs. Elle heritait du paragraphe courant sur les quatre
   familles, et non de la bande qui la porte. */
.footer-identite {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}