/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
/* 🔴 EN BANDE SOMBRE, PLANCHE 2 (Ludovic, 29/09 au soir). Une bande à fond
   perdu : elle respire par son padding, et sa marge est le blanc qui la
   sépare de la page (principe 2). Sous un double filet, l'identité à gauche,
   quatre colonnes à droite derrière un filet, la ligne légale sous un filet
   fort. Les couleurs sont celles du sombre du site : le fond de la barre,
   le texte clair, les gris et les filets « sur sombre ». */
.pied {
  margin-top: var(--espace-bloc);
  padding: var(--espace-bloc) 0 36px;
  background: var(--gris-noir);
  color: var(--gris-clair-sur-sombre);
  font-family: var(--police-meta);
}
.pied a { color: inherit; }
/* Après une bande à fond perdu — l'affiche de la masterclass, qui ferme
   l'accueil —, le pied la touche : deux bandes qui se suivent se touchent
   (principe 2). Sa marge s'y lisait comme une bande blanche (Ludovic, 29/09). */
.bandeau-masterclass + .pied { margin-top: 0; }

.pied-tete {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 64px;
  padding-top: 36px;
  border-top: 3px double var(--filet-sur-sombre-fort);
}

/* L'identité : le logo de la barre, en plus grand ; la devise en PT Serif ;
   l'adresse en gris. */
.pied-logo { height: 32px; width: auto; display: block; }
.pied-devise { margin: 24px 0 0; font-family: var(--police-texte); font-size: 15px; line-height: 1.5; }
.pied-adresse { margin: 24px 0 0; font-style: normal; font-size: 13px; line-height: 1.55; color: var(--gris-meta-sur-sombre); }

/* Les quatre colonnes, et le filet qui les sépare de l'identité, tracé dans
   la gouttière (principe 1). */
.pied-grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.pied-grille::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  border-left: 1px solid var(--filet-sur-sombre);
}
.pied h2 {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-meta-sur-sombre);
}
.pied-grille ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}
/* Une destination se souligne au survol, rien ne bouge (socle). */
.pied-grille a:hover,
.pied-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pied-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--filet-sur-sombre-fort);
  font-size: 13px;
  color: var(--gris-meta-sur-sombre);
}
.pied-bas p { margin: 0; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* LES RÉSEAUX (28/09) — une rangée de logos, la brique `template-parts/
   reseaux.php` : au bas du burger, et au pied en colonne, le nom à côté du
   logo (`reseaux-noms`). Gris, noirs au survol ; une cible de 32 px pour un
   logo de 18. */
.reseaux { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reseaux a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gris-texte-secondaire);
}
.reseaux a:hover,
.reseaux a:focus-visible { color: var(--gris-texte); }

/* Au pied : la colonne des autres, le logo gris devant le nom. */
.pied .reseaux-noms { flex-direction: column; gap: 10px; margin-top: 16px; font-size: 15px; line-height: 1.45; }
.pied .reseaux-noms a { width: auto; height: auto; justify-content: flex-start; gap: 10px; color: inherit; }
.pied .reseaux-noms svg { flex: none; color: var(--gris-meta-sur-sombre); }
.pied .reseaux-noms a:hover .reseau-nom { text-decoration: underline; text-underline-offset: 3px; }
.pied .reseaux-noms a:hover svg { color: var(--gris-clair-sur-sombre); }