/* Le pied de page de toutes les pages (26/10) : une bande sombre sur toute la largeur, l'encre des apps, avec tous les liens
   du site en colonnes (les apps, commencer, aide, informations) et les langues. Il garde le cadre : guides, croix,
   quadrillage des marges, ici en blanc très léger. La bande est peinte par border-image pour déborder jusqu'aux bords. */
footer.pied { z-index: 0; display: block; padding: 72px var(--marge) 40px; color: rgba(255,255,255,.62);
  font: var(--font-weight-regular) 14px/1.5 var(--font-inter);
  border-image-source: linear-gradient(#18191b, #18191b); border-image-slice: 0 fill; border-image-outset: 0 100vmax;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1); }
footer.pied::after { --fin: rgba(255,255,255,.045) !important; --fort: rgba(255,255,255,.1) !important; }   /* plus fort que le quadrillage clair de l'accueil */
footer.pied a { color: rgba(255,255,255,.72); transition: color .2s; }
footer.pied a:hover { color: #fff; }
.pied .pied-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pied .logo { color: #fff; font-size: 20px; }
.pied .logo img { width: 26px; height: 26px; }
.pied .pied-phrase { margin: 14px 0 0; font: var(--font-weight-regular) 28px/1.15 var(--font-acidgrotesk); letter-spacing: -.01em; color: #fff; max-width: 420px; }
.pied .pied-haut .pilule { background: #fff; color: #18191b; border-color: #fff; }
.pied .pied-haut .pilule:hover { background: #e9eaea; }
.pied .pied-colonnes nav { display: block; }   /* les autres pieds de page mettaient leurs liens en ligne */
.pied .pied-colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 40px 48px; }
.pied .pied-titre { margin: 0 0 14px; font: var(--font-weight-regular) var(--text-micro-label)/var(--leading-micro-label) var(--font-inter); letter-spacing: 2.64px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied .pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font: var(--font-weight-regular) var(--text-footer-body)/var(--leading-footer-body) var(--font-acidgrotesksubset); color: rgba(255,255,255,.5); }
.pied .langues { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied .langues a[aria-current] { color: #fff; }
@media (max-width: 900px) {
  footer.pied { padding: 56px var(--marge) 32px; }
  .pied .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .pied .pied-phrase { font-size: 24px; }
}
/* Très petits écrans : titres de colonnes moins espacés (« INFORMATIONEN » dépassait de sa colonne à 320 px) */
@media (max-width: 400px) { .pied .pied-titre { letter-spacing: 1.2px; } }