<footer class="bg-brand-navy2 text-white py-16 mt-20" aria-labelledby="footer-heading">
  <h2 id="footer-heading" class="sr-only">Navigation du pied de page</h2>
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="grid md:grid-cols-4 gap-8 mb-12">

      {# Column 1 — Brand + contact #}
      <div>
        <a href="/" class="font-black text-xl grad-text" aria-label="DictIA — page d'accueil">DictIA</a>
        <p class="text-sm text-white/70 mt-3">Transcription IA conforme Loi&nbsp;25, conçue au Québec.</p>
        <address class="not-italic text-xs text-white/70 mt-4 leading-relaxed">
          77&nbsp;ch. de la Seigneurie<br>
          Inverness QC G0S&nbsp;1K0<br>
          <a href="tel:+15819968471" class="hover:text-white">(581)&nbsp;996-8471</a><br>
          <a href="mailto:info@dictia.ca" class="hover:text-white">info@dictia.ca</a>
        </address>
      </div>

      {# Column 2 — Produit #}
      <nav aria-label="Produit">
        <p class="eyebrow text-white/70 mb-4">Produit</p>
        <ul class="space-y-2 text-sm text-white/70">
          <li><a href="/fonctionnalites" class="hover:text-white">Fonctionnalités</a></li>
          <li><a href="/tarifs" class="hover:text-white">Tarifs</a></li>
          <li><a href="/conformite" class="hover:text-white">Conformité</a></li>
          <li><a href="/blog" class="hover:text-white">Blog</a></li>
        </ul>
      </nav>

      {# Column 3 — Légal #}
      <nav aria-label="Légal">
        <p class="eyebrow text-white/70 mb-4">Légal</p>
        <ul class="space-y-2 text-sm text-white/70">
          <li><a href="/legal/conditions" class="hover:text-white">Conditions d'utilisation</a></li>
          <li><a href="/legal/confidentialite" class="hover:text-white">Confidentialité (Loi&nbsp;25)</a></li>
          <li><a href="/legal/cookies" class="hover:text-white">Cookies</a></li>
          <li><a href="/legal/remboursement" class="hover:text-white">Remboursement</a></li>
          <li><a href="/legal/accessibilite" class="hover:text-white">Accessibilité</a></li>
        </ul>
      </nav>

      {# Column 4 — Compte #}
      <nav aria-label="Compte">
        <p class="eyebrow text-white/70 mb-4">Compte</p>
        <ul class="space-y-2 text-sm text-white/70">
          <li><a href="/login" class="hover:text-white">Connexion</a></li>
          <li><a href="/signup" class="hover:text-white">Créer un compte</a></li>
          <li><a href="/contact" class="hover:text-white">Contact</a></li>
          <li><a href="https://gitea.innova-ai.ca/Innova-AI/dictia-public" target="_blank" rel="noopener" class="hover:text-white">Code source AGPL&nbsp;<span aria-hidden="true">↗</span><span class="sr-only">(s'ouvre dans un nouvel onglet)</span></a></li>
        </ul>
      </nav>
    </div>

    <div class="pt-8 border-t border-white/[0.045] flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-white/70">
      <p>© 2026 DictIA Inc. · AGPL v3 · Fait au Québec</p>
      <div class="flex gap-4">
        <a href="https://www.linkedin.com/company/dictiaqc" rel="noopener" target="_blank" class="hover:text-white">LinkedIn</a>
        <a href="https://www.facebook.com/dictiaqc" rel="noopener" target="_blank" class="hover:text-white">Facebook</a>
      </div>
    </div>
  </div>
</footer>
