/* Le pied de page : une barre discrète, la signature et les réseaux sociaux. */

.footer{background:var(--bark);color:var(--cream);padding:.7rem 0;position:relative}
.footer p,.footer li,.footer a{color:rgba(227,241,248,.75);font-size:.9rem}
.footer a:hover{color:var(--olive)}
.socials{display:flex;gap:.5rem;flex:0 0 auto;margin-left:auto}
.socials a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);font-family:var(--font-display);font-size:.8rem;transition:.3s var(--ease)}
.socials a svg{width:16px;height:16px;display:block}
.socials a:hover{background:var(--clay);color:var(--paper);transform:translateY(-3px)}
/* même formule de largeur que .container : avec max-width seul, la barre
   touche les bords dès que l'écran est plus étroit que le conteneur */
.footer-bar{display:flex;justify-content:space-between;padding-top:0;font-size:.8rem;
  color:rgba(227,241,248,.55);flex-wrap:wrap;gap:1rem;
  width:min(100% - 2.5rem,var(--container));margin-inline:auto}
@media (min-width:1400px){
  .footer-bar{width:min(100% - 6rem,var(--container));max-width:none}
}