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/_layout.html

@@ -5,24 +5,38 @@
 
 {% block head_extra %}
 <style>
-  /* Typographic styles for markdown-rendered legal content.
-     Inlined here so we don't need to rebuild static/css/marketing.css. */
+  /* ---------------------------------------------------------------------------
+     Typographie pour le markdown rendu (héritée de B-2.9, étendue B-2.10).
+     Inlinée pour ne pas avoir à reconstruire static/css/marketing.css.
+  --------------------------------------------------------------------------- */
   .legal-content h2 {
+    position: relative;
     font-size: 1.5rem; /* 24px */
     line-height: 2rem;
     font-weight: 700;
     color: #060d1a; /* brand-navy */
-    margin-top: 2rem;
-    margin-bottom: 0.75rem;
+    margin-top: 2.75rem;
+    margin-bottom: 1rem;
     letter-spacing: -0.022em;
+    scroll-margin-top: 90px; /* pour ancres sous le header sticky */
+  }
+  .legal-content h2::after {
+    content: '';
+    display: block;
+    width: 56px;
+    height: 4px;
+    margin-top: 0.5rem;
+    border-radius: 4px;
+    background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896);
   }
   .legal-content h3 {
     font-size: 1.25rem; /* 20px */
     line-height: 1.75rem;
     font-weight: 600;
     color: #060d1a;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    scroll-margin-top: 90px;
   }
   .legal-content h4 {
     font-size: 1.05rem;
@@ -34,17 +48,17 @@
   .legal-content p {
     margin-bottom: 1rem;
     font-size: 1rem;
-    line-height: 1.7;
+    line-height: 1.75;
   }
   .legal-content ul,
   .legal-content ol {
     margin-bottom: 1rem;
     margin-left: 1.5rem;
-    line-height: 1.7;
+    line-height: 1.75;
   }
   .legal-content ul { list-style-type: disc; list-style-position: outside; }
   .legal-content ol { list-style-type: decimal; list-style-position: outside; }
-  .legal-content li { margin-bottom: 0.25rem; }
+  .legal-content li { margin-bottom: 0.35rem; }
   .legal-content a {
     background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896);
     -webkit-background-clip: text;
@@ -61,26 +75,33 @@
   }
   .legal-content table {
     width: 100%;
-    margin-bottom: 1rem;
+    margin: 1rem 0 1.5rem;
     border-collapse: collapse;
     font-size: 0.875rem;
   }
   .legal-content th,
   .legal-content td {
     border: 1px solid #e6ebf2;
-    padding: 0.5rem;
+    padding: 0.6rem 0.75rem;
     text-align: left;
+    vertical-align: top;
   }
   .legal-content th {
     background-color: #f7f9fc;
     font-weight: 600;
+    color: #060d1a;
+  }
+  .legal-content tbody tr:nth-child(even) td {
+    background-color: #fafbfd;
   }
   .legal-content blockquote {
     border-left: 4px solid #0062ff;
-    padding-left: 1rem;
-    margin: 1rem 0;
+    background-color: rgba(247, 249, 252, 0.6);
+    padding: 0.75rem 1rem;
+    margin: 1.25rem 0;
+    border-radius: 0 8px 8px 0;
     font-style: italic;
-    color: rgba(6, 13, 26, 0.7);
+    color: rgba(6, 13, 26, 0.75);
   }
   .legal-content code {
     padding: 0.15rem 0.4rem;
@@ -89,6 +110,19 @@
     font-size: 0.875rem;
     font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
   }
+  .legal-content pre {
+    background-color: #f7f9fc;
+    border: 1px solid #e6ebf2;
+    border-radius: 8px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+    font-size: 0.875rem;
+  }
+  .legal-content pre code {
+    background-color: transparent;
+    padding: 0;
+  }
   .legal-content hr {
     margin: 2rem 0;
     border: none;
@@ -107,28 +141,239 @@
     font-size: 0.9rem;
     color: #78350f;
   }
+
+  /* ---------------------------------------------------------------------------
+     Sticky TOC + breadcrumb (desktop ≥ lg).
+  --------------------------------------------------------------------------- */
+  .legal-toc {
+    position: sticky;
+    top: 86px; /* sous header 62px + marge */
+    max-height: calc(100vh - 110px);
+    overflow-y: auto;
+  }
+  .legal-toc a {
+    border-left: 2px solid transparent;
+    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
+  }
+  .legal-toc a:hover {
+    background-color: rgba(0, 98, 255, 0.05);
+  }
+  .legal-toc a.is-active {
+    border-left-color: #0062ff;
+    color: #0062ff !important;
+    background-color: rgba(0, 98, 255, 0.06);
+  }
+  .legal-breadcrumb {
+    position: sticky;
+    top: 62px;
+    z-index: 30;
+    background-color: rgba(247, 249, 252, 0.92);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-bottom: 1px solid #e6ebf2;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Print stylesheet — hide nav chrome, keep article + header.
+  --------------------------------------------------------------------------- */
+  @media print {
+    header.fixed,
+    .legal-breadcrumb,
+    .legal-toc-wrapper,
+    .legal-prev-next,
+    footer {
+      display: none !important;
+    }
+    main { padding-top: 0 !important; }
+    .legal-content a {
+      color: #000 !important;
+      background: none !important;
+      -webkit-text-fill-color: #000 !important;
+      text-decoration: underline !important;
+    }
+    body { background: white !important; }
+  }
 </style>
 {% endblock %}
 
 {% block content %}
-<section class="bg-brand-bg py-16 px-4" aria-labelledby="legal-title">
-  <article class="max-w-3xl mx-auto bg-white p-8 md:p-10 rounded-[18px] border border-brand-border shadow-cta">
-    <header class="mb-8 pb-6 border-b border-brand-border">
-      <p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">Document légal DictIA</p>
-      <h1 id="legal-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-3">{{ title }}</h1>
-      <p class="text-sm text-brand-navy/70">
-        Version {{ legal_version }}{{ ' ' }}&middot;{{ ' ' }}Dernière révision&nbsp;: {{ legal_version }}.
-        Pour toute question, écrivez à <a href="mailto:rprp@dictia.ca" class="grad-text font-semibold">rprp@dictia.ca</a>.
-      </p>
-    </header>
+{# Skip link (WCAG 2.4.1) — visible uniquement au focus clavier. #}
+<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>
 
-    <div class="legal-content text-brand-navy/90 leading-relaxed">
-      {{ content | safe }}
-    </div>
+{# Breadcrumb sticky #}
+<nav class="legal-breadcrumb px-4 py-3" aria-label="Fil d'Ariane">
+  <ol class="max-w-[1200px] mx-auto flex flex-wrap items-center gap-2 text-xs md:text-sm text-brand-navy/70">
+    <li><a href="/" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Accueil</a></li>
+    <li aria-hidden="true" class="text-brand-navy/40">›</li>
+    <li><a href="{{ url_for('legal.legal_index') }}" class="hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded">Documents légaux</a></li>
+    <li aria-hidden="true" class="text-brand-navy/40">›</li>
+    <li class="text-brand-navy font-semibold truncate" aria-current="page">{{ title }}</li>
+  </ol>
+</nav>
 
-    <footer class="mt-10 pt-6 border-t border-brand-border text-sm text-brand-navy/70">
-      <p>&larr; <a href="{{ url_for('legal.legal_index') }}" class="grad-text font-semibold">Index des documents légaux</a></p>
-    </footer>
-  </article>
+<section class="bg-brand-bg pt-8 pb-16 px-4">
+  <div class="max-w-[1200px] mx-auto lg:grid lg:grid-cols-[1fr_240px] lg:gap-10">
+
+    {# Article principal #}
+    <article id="main-content"
+             role="main"
+             aria-labelledby="legal-title"
+             class="bg-white p-6 md:p-10 rounded-[18px] border border-brand-border shadow-cta order-1">
+      <header class="mb-8 pb-6 border-b border-brand-border">
+        <p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">Document légal DictIA</p>
+        <h1 id="legal-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-4 tracking-tight">{{ title }}</h1>
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-brand-navy/70">
+          <span class="inline-flex items-center gap-1.5">
+            <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">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+              <line x1="16" y1="2" x2="16" y2="6"/>
+              <line x1="8" y1="2" x2="8" y2="6"/>
+              <line x1="3" y1="10" x2="21" y2="10"/>
+            </svg>
+            <span>Version <strong class="text-brand-navy">{{ legal_version }}</strong></span>
+          </span>
+          <span class="text-brand-navy/40" aria-hidden="true">·</span>
+          <span>Dernière mise à jour&nbsp;: {{ legal_version }}</span>
+          <span class="text-brand-navy/40" aria-hidden="true">·</span>
+          <span>RPRP&nbsp;: <a href="mailto:rprp@dictia.ca" class="grad-text font-semibold underline">rprp@dictia.ca</a></span>
+        </div>
+      </header>
+
+      {# TOC mobile (collapsible) — visible < lg seulement #}
+      <details class="lg:hidden mb-6 border border-brand-border rounded-[12px] bg-brand-bg/50">
+        <summary class="cursor-pointer px-4 py-3 text-sm font-semibold text-brand-navy flex items-center justify-between focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded-[12px]">
+          <span>Sur cette page</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+               stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </summary>
+        <ul id="legal-toc-mobile" class="px-4 pb-3 pt-1 space-y-1 text-sm">
+          {# Rempli côté JS (Alpine via init du desktop). #}
+        </ul>
+      </details>
+
+      <div class="legal-content text-brand-navy/90 leading-relaxed">
+        {{ content | safe }}
+      </div>
+
+      {# Prev / Next navigation #}
+      {% if prev_page or next_page %}
+      <nav class="legal-prev-next mt-12 pt-6 border-t border-brand-border grid sm:grid-cols-2 gap-3"
+           aria-label="Navigation entre documents légaux">
+        {% if prev_page %}
+        <a href="{{ url_for('legal.legal_page', page=prev_page) }}"
+           rel="prev"
+           class="block p-4 bg-brand-bg/60 border border-brand-border rounded-[12px] hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
+          <span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
+            <span aria-hidden="true">←</span> Précédent
+          </span>
+          <span class="block text-sm font-semibold text-brand-navy">{{ prev_title }}</span>
+        </a>
+        {% else %}
+        <span></span>
+        {% endif %}
+
+        {% if next_page %}
+        <a href="{{ url_for('legal.legal_page', page=next_page) }}"
+           rel="next"
+           class="block p-4 bg-brand-bg/60 border border-brand-border rounded-[12px] hover:border-brand-b1 hover:bg-white transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 sm:text-right">
+          <span class="block text-xs uppercase tracking-wider text-brand-navy/60 mb-1">
+            Suivant <span aria-hidden="true">→</span>
+          </span>
+          <span class="block text-sm font-semibold text-brand-navy">{{ next_title }}</span>
+        </a>
+        {% endif %}
+      </nav>
+      {% endif %}
+
+      <footer class="mt-8 pt-6 border-t border-brand-border text-sm text-brand-navy/70">
+        <p>
+          <span aria-hidden="true">←</span>
+          <a href="{{ url_for('legal.legal_index') }}" class="grad-text font-semibold">Index des documents légaux</a>
+        </p>
+      </footer>
+    </article>
+
+    {# TOC desktop — sidebar sticky #}
+    <aside class="legal-toc-wrapper hidden lg:block order-2"
+           aria-label="Table des matières">
+      <div x-data="legalToc()"
+           x-init="init()"
+           class="legal-toc bg-white border border-brand-border rounded-[14px] p-5 mt-0">
+        <h2 class="text-xs font-bold uppercase tracking-wider text-brand-navy/70 mb-3">
+          Sur cette page
+        </h2>
+        <ul role="list">
+          <template x-for="item in items" :key="item.id">
+            <li>
+              <a :href="'#' + item.id"
+                 :class="active === item.id ? 'is-active font-semibold' : ''"
+                 :aria-current="active === item.id ? 'true' : null"
+                 class="block py-1.5 pl-3 pr-2 text-sm text-brand-navy/70 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded"
+                 x-text="item.text"></a>
+            </li>
+          </template>
+          <template x-if="items.length === 0">
+            <li class="text-xs text-brand-navy/50 italic py-1">
+              Aucune section à afficher.
+            </li>
+          </template>
+        </ul>
+      </div>
+    </aside>
+
+  </div>
 </section>
 {% endblock %}
+
+{% block scripts %}
+<script>
+  // Construit la TOC en scannant les <h2> du contenu rendu, met l'élément actif
+  // à jour via IntersectionObserver. Synchronise aussi la liste mobile.
+  function legalToc() {
+    return {
+      items: [],
+      active: '',
+      init() {
+        const populate = () => {
+          const headings = Array.from(document.querySelectorAll('.legal-content h2'));
+          this.items = headings
+            .filter(h => h.id) // markdown.toc auto-id; skip if missing
+            .map(h => ({ id: h.id, text: h.textContent.trim() }));
+
+          // Mirror dans le <details> mobile.
+          const mobileList = document.getElementById('legal-toc-mobile');
+          if (mobileList) {
+            mobileList.innerHTML = '';
+            this.items.forEach(it => {
+              const li = document.createElement('li');
+              const a = document.createElement('a');
+              a.href = '#' + it.id;
+              a.textContent = it.text;
+              a.className = 'block py-1.5 text-brand-navy/80 hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 rounded';
+              li.appendChild(a);
+              mobileList.appendChild(li);
+            });
+          }
+
+          if (headings.length === 0) return;
+          const observer = new IntersectionObserver((entries) => {
+            entries.forEach(e => {
+              if (e.isIntersecting) this.active = e.target.id;
+            });
+          }, { rootMargin: '-100px 0px -60% 0px' });
+          headings.forEach(el => observer.observe(el));
+        };
+        // Lance après que Alpine ait rendu et que le DOM soit posé.
+        if (document.readyState === 'complete') populate();
+        else window.addEventListener('load', populate, { once: true });
+      },
+    };
+  }
+</script>
+{% endblock %}