---
/**
 * Footer — pied de page commun.
 *
 * Slots : default (colonnes / liens), legal (ligne basse : mentions, copyright).
 */
---

<footer class="tf-footer">
  <div class="tf-footer__inner">
    <div class="tf-footer__content"><slot /></div>
    <div class="tf-footer__legal"><slot name="legal" /></div>
  </div>
</footer>

<style>
  .tf-footer {
    margin-block-start: auto;
    background: var(--bg-alt);
    border-block-start: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
  }

  .tf-footer__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-block: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .tf-footer__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
  }

  .tf-footer__legal {
    border-block-start: 1px solid var(--border);
    padding-block-start: var(--space-md);
    color: var(--text-subtle);
  }

  .tf-footer__legal:empty {
    display: none;
  }
</style>