{# footer-multilinks.html — Footer riche : colonne brand + 3 colonnes liens + ligne © + légal.
   Variante riche de footer.html (qui reste un wordmark minimaliste).
   Slots :
   {{BRAND_NAME}} / {{BRAND_TAGLINE}}                       — colonne brand
   {{COL_1_TITLE}} / {{COL_1_LINKS_HTML}}                   — col 1 (répéter <a class="ftm__link" href="…">Label</a>)
   {{COL_2_TITLE}} / {{COL_2_LINKS_HTML}}                   — col 2
   {{COL_3_TITLE}} / {{COL_3_LINKS_HTML}}                   — col 3
   {{LEGAL_HTML}}                                           — petite ligne du bas (HTML autorisé : liens privacy/terms)
   {{YEAR}}                                                 — année courante
#}

<footer class="ftm">
  <div class="ftm__inner">
    <div class="ftm__grid">
      <div class="ftm__brand-col">
        <span class="ftm__brand">{{BRAND_NAME}}</span>
        <p class="ftm__tagline">{{BRAND_TAGLINE}}</p>
      </div>
      <div class="ftm__col">
        <h4 class="ftm__col-title">{{COL_1_TITLE}}</h4>
        <nav class="ftm__col-links">{{COL_1_LINKS_HTML}}</nav>
      </div>
      <div class="ftm__col">
        <h4 class="ftm__col-title">{{COL_2_TITLE}}</h4>
        <nav class="ftm__col-links">{{COL_2_LINKS_HTML}}</nav>
      </div>
      <div class="ftm__col">
        <h4 class="ftm__col-title">{{COL_3_TITLE}}</h4>
        <nav class="ftm__col-links">{{COL_3_LINKS_HTML}}</nav>
      </div>
    </div>
    <div class="ftm__legal">
      <span>© {{YEAR}} {{BRAND_NAME}}</span>
      <span>{{LEGAL_HTML}}</span>
    </div>
  </div>
</footer>

<style>
  .ftm { background: var(--color-bg-dark, #111); color: var(--color-bg, #fff); font-family: var(--font-body, system-ui, sans-serif); }
  .ftm__inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem 2rem; }
  .ftm__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .ftm__brand-col { display: flex; flex-direction: column; gap: 0.75rem; }
  .ftm__brand { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.5rem; }
  .ftm__tagline { font-size: 0.95rem; line-height: 1.55; opacity: 0.75; margin: 0; max-width: 22rem; }
  .ftm__col-title { font-family: var(--font-heading, inherit); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; opacity: 0.7; }
  .ftm__col-links { display: flex; flex-direction: column; gap: 0.6rem; }
  .ftm__col-links a { color: inherit; text-decoration: none; font-size: 0.95rem; opacity: 0.85; transition: opacity .2s; }
  .ftm__col-links a:hover { opacity: 1; text-decoration: underline; }
  .ftm__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: 0.825rem; opacity: 0.65; }
  .ftm__legal a { color: inherit; }
  @media (max-width: 768px) { .ftm__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .ftm__brand-col { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .ftm__grid { grid-template-columns: 1fr; } }
</style>