/* ============================================
   FOOTER — assets/css/footer.css
   ============================================ */

footer {
  background: var(--s6);
  padding: 3.5rem 2rem 2rem;
}

.ft-wrap {
  max-width: var(--mw);
  margin: 0 auto;
}

/* ── Top grid ── */
.ft-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(191,150,106,.1);
  margin-bottom: 1.8rem;
}

/* Brand */
.ft-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .8rem;
}
.ft-name {
  font-family: var(--ff);
  font-size: .95rem; font-weight: 600;
  color: var(--s1);
  letter-spacing: .04em;
}
.ft-sub {
  font-size: .52rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--s4);
}
.ft-brand p {
  font-size: .8rem;
  color: var(--s3);
  line-height: 1.7;
}
.ft-brand a {
  color: var(--s3);
  text-decoration: none;
  transition: color .2s;
}
.ft-brand a:hover { color: var(--s1); }

/* Colonne link */
.ft-col h4,
.ft-col-title {
  font-size: .6rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--au);
  margin-bottom: .9rem;
  font-family: var(--fb);
}
.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ft-col a {
  font-size: .8rem;
  color: var(--s3);
  text-decoration: none;
  transition: color .2s;
}
.ft-col a:hover { color: var(--s1); }

/* ── Bottom bar ── */
.ft-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .68rem;
  color: var(--s4);
}
.ft-bot a {
  color: var(--s4);
  text-decoration: none;
  transition: color .2s;
}
.ft-bot a:hover { color: var(--au2); }
.ft-bot-links { display: flex; gap: 1.2rem; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .ft-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ft-top { grid-template-columns: 1fr; }
  .ft-bot { flex-direction: column; align-items: flex-start; }
}

/* ── WCAG: prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}