/* footer.css — footer marketing autonome, identique à refonte.css mais sans dépendance
   aux tokens (valeurs en dur). À charger sur les pages qui n'utilisent pas refonte.css
   (pages légales, contact) pour avoir le MÊME footer partout. À charger en dernier. */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700&family=Work+Sans:wght@400;500;600&display=swap');

.site-footer { background: #141412; color: #cececc; padding: 64px 24px 44px;
  font-family: 'Work Sans', system-ui, sans-serif; }
.site-footer * { box-sizing: border-box; }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top { display: flex; gap: 64px; flex-wrap: wrap; justify-content: space-between; }
.footer-brand { max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.footer-brand .footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand .footer-logo img { width: 32px; height: 32px; }
.footer-brand .footer-logo .footer-word { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 20px; color: #eeeeec; }
.footer-tagline { font-size: 0.82rem; line-height: 1.5; color: #cececc; margin: 0; }
.footer-contacts { display: flex; flex-direction: column; gap: 8px; }
.footer-contacts a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.82rem; color: #c3aaf2; text-decoration: none; }
.footer-contacts a svg { width: 18px; height: 18px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { width: 180px; display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-family: 'Epilogue', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: #dededc; margin: 0; }
.footer-col a { font-size: 0.82rem; color: #c1c1bf; text-decoration: none; transition: color .15s ease; }
.footer-col a:hover { color: #eeeeec; }
.footer-divider { height: 1px; background: #2d2d45; margin: 32px 0; border: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.78rem; color: #979795; }
.footer-legal span { display: block; }

@media (max-width: 768px) {
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-col { width: auto; }
  .footer-col:nth-child(3) { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; gap: 6px; }
}