feat(legal): polished UX for 5 legal pages + AGPL external link (sticky TOC, prev/next, breadcrumb)

Refonte visuelle et accessibilité (WCAG 2.2 AA) de la section /legal/
sans toucher au contenu juridique signé (dc4ac97).

Templates :
- templates/legal/index.html : grille 6 cartes (5 internes + AGPL externe)
  avec icônes SVG sémantiques, hero gradient, bloc info sous-processeurs,
  carte AGPL ↗ (target=_blank, rel=noopener noreferrer).
- templates/legal/_layout.html : breadcrumb sticky, TOC sticky desktop +
  collapsible mobile (Alpine.js + IntersectionObserver), prev/next nav
  entre les 6 docs, skip link, landmarks (main / aside / nav), typographie
  améliorée (h2 avec accent gradient, tables zebrées, blockquotes), print
  stylesheet (cache header/breadcrumb/TOC/prev-next).

Routes (src/legal/routes.py) :
- DISPLAY_ORDER + EXTERNAL_LINKS + PAGE_ICONS exposés.
- legal_page() calcule prev/next via _neighbour() helper.
- legal_index() concatène pages internes + EXTERNAL_LINKS dans `pages`.

Footer : lien AGPL déjà présent depuis dc4ac97 (col 4 Compte, ligne 49).

Tests (tests/test_legal_pages.py) : 9 anciens + 9 nouveaux = 18/18 PASS
- AGPL external link (target+rel)
- 5 internes + 1 externe sur l'index
- Skip link présent partout
- Prev/next existe sur chaque page
- Conditions (1ère) sans prev / Mentions (dernière) sans next
- Landmarks aside aria-label="Table des matières"
- Landmark main role + id="main-content"
- Breadcrumb avec aria-current="page"

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

templates/legal/index.html

@@ -3,25 +3,117 @@
 {% block title %}{{ title }}{% endblock %}
 {% block description %}{{ description }}{% endblock %}
 
+{% block head_extra %}
+<style>
+  /* Card hover/lift uniquement pour les cartes légales (sobre, accessible). */
+  .legal-card {
+    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
+  }
+  .legal-card:hover {
+    transform: translateY(-2px);
+  }
+  .legal-card:focus-visible {
+    outline: 2px solid #0062ff;
+    outline-offset: 3px;
+  }
+  /* Icône circulaire avec dégradé de marque, contraste suffisant. */
+  .legal-card-icon {
+    background: linear-gradient(135deg, rgba(0,98,255,0.10), rgba(0,200,150,0.10));
+    color: #0062ff;
+  }
+  .legal-card.is-external .legal-card-icon {
+    background: linear-gradient(135deg, rgba(0,189,216,0.12), rgba(0,200,150,0.12));
+  }
+  /* Print : pas de bouton CTA, pas d'animations. */
+  @media print {
+    .legal-card { box-shadow: none !important; transform: none !important; }
+  }
+</style>
+{% endblock %}
+
 {% block content %}
-<section class="bg-brand-bg py-16 px-4 min-h-[60vh]" aria-labelledby="legal-index-title">
-  <div class="max-w-3xl mx-auto">
-    <header class="mb-8 text-center">
-      <p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">DictIA Inc.</p>
-      <h1 id="legal-index-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-3">Documents légaux</h1>
-      <p class="text-sm text-brand-navy/70">Version {{ legal_version }} de l'ensemble des documents.</p>
+<a href="#main-content"
+   class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-brand-navy focus:text-white focus:rounded-lg focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
+  Aller au contenu principal
+</a>
+
+<section class="bg-brand-bg pt-12 pb-20 px-4" aria-labelledby="legal-index-title">
+  <div id="main-content" class="max-w-[1100px] mx-auto">
+
+    {# Hero #}
+    <header class="text-center max-w-3xl mx-auto mb-12">
+      <p class="eyebrow text-brand-navy/60 mb-3">DictIA Inc.</p>
+      <h1 id="legal-index-title" class="text-4xl md:text-5xl font-black text-brand-navy mb-4 tracking-tight">
+        Documents <span class="grad-text">légaux</span> DictIA
+      </h1>
+      <p class="text-base md:text-lg text-brand-navy/70 leading-relaxed mb-5">
+        Transparence totale conforme à la {{ 'Loi&nbsp;25' | safe }} du Québec : tous nos documents juridiques,
+        notre code source et notre politique de confidentialité sont publics et indexables.
+      </p>
+      <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-brand-border text-xs font-semibold text-brand-navy/80">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10"/>
+          <polyline points="12 6 12 12 16 14"/>
+        </svg>
+        <span>Version {{ legal_version }} · dernière mise à jour {{ legal_version }}</span>
+      </span>
     </header>
 
-    <ul class="space-y-3" role="list">
+    {# Grille 6 cartes — 5 internes + 1 externe AGPL #}
+    <ul class="grid sm:grid-cols-2 gap-4 md:gap-5" role="list">
       {% for page in pages %}
       <li>
-        <a href="{{ url_for('legal.legal_page', page=page.slug) }}" class="block p-5 bg-white border border-brand-border rounded-[12px] hover:border-brand-b1 hover:shadow-cta transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
-          <h2 class="text-lg font-semibold text-brand-navy mb-1">{{ page.title }}</h2>
-          <p class="text-sm text-brand-navy/70">{{ page.description }}</p>
+        {% if page.external %}
+          <a href="{{ page.url }}"
+             target="_blank"
+             rel="noopener noreferrer"
+             class="legal-card is-external group block h-full p-5 md:p-6 bg-white border border-brand-border rounded-[14px] hover:border-brand-b1 hover:shadow-cta focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 relative">
+        {% else %}
+          <a href="{{ url_for('legal.legal_page', page=page.slug) }}"
+             class="legal-card group block h-full p-5 md:p-6 bg-white border border-brand-border rounded-[14px] hover:border-brand-b1 hover:shadow-cta focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 relative">
+        {% endif %}
+          <div class="flex items-start gap-4">
+            <div class="legal-card-icon shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl">
+              {{ page.icon | safe }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <h2 class="text-base md:text-lg font-bold text-brand-navy mb-1.5 group-hover:grad-text transition-colors">
+                {{ page.title }}{% if page.external %}<span class="ml-1.5 text-brand-b1" aria-hidden="true">↗</span>{% endif %}
+              </h2>
+              <p class="text-sm text-brand-navy/70 leading-relaxed">{{ page.description }}</p>
+              {% if page.external %}
+              <p class="mt-2 text-xs text-brand-navy/50 font-medium">
+                <span aria-hidden="true">→</span>
+                <span>{{ page.url }}</span>
+                <span class="sr-only">(s'ouvre dans un nouvel onglet)</span>
+              </p>
+              {% endif %}
+            </div>
+          </div>
         </a>
       </li>
       {% endfor %}
     </ul>
+
+    {# Bloc info pied — signature, contact, sous-processeurs #}
+    <aside class="mt-12 max-w-3xl mx-auto bg-white border border-brand-border rounded-[14px] p-6 md:p-7"
+           aria-label="Informations complémentaires sur les documents légaux">
+      <p class="text-sm text-brand-navy/80 leading-relaxed mb-3">
+        Documents signés numériquement par <strong class="text-brand-navy">Allison Rioux</strong>,
+        présidente et responsable de la protection des renseignements personnels (RPRP) —
+        version&nbsp;{{ legal_version }}.
+      </p>
+      <p class="text-sm text-brand-navy/80 leading-relaxed mb-3">
+        Pour toute question, demande d'accès, rectification ou plainte&nbsp;:
+        <a href="mailto:rprp@dictia.ca" class="grad-text font-semibold underline">rprp@dictia.ca</a>.
+      </p>
+      <p class="text-xs text-brand-navy/60 leading-relaxed">
+        <strong>5&nbsp;sous-processeurs</strong> : OVH (Beauharnois,&nbsp;QC) ·
+        Google Cloud (Toronto, Ontario) · Cloudflare (US) · HubSpot (US) · Stripe (US) —
+        détails dans la <a href="{{ url_for('legal.legal_page', page='confidentialite') }}" class="grad-text font-semibold">Politique de confidentialité</a>.
+      </p>
+    </aside>
   </div>
 </section>
 {% endblock %}