feat(marketing): round 3 — hero remplacé par 3-step flow canonique + 99+ langues + Cégeps spotlight + CyberPerformance + FAQ enrichie

Hero (templates/marketing/landing.html) :
- Reproduction fidèle de dictia.ca/solutions/dictai (source : Website-Sanity/components/sections/dictai-page-content.tsx lignes 260-518)
- REMPLACE le mockup app DictIA par le 3-step flow inline canonique (Importez → Texte 2 min → Résumé + actions)
- Wordmark large « DictIA » (style production) + H2 cyan « Transcription IA locale en 2 minutes — conforme Barreau, CPA Québec et ChAD »
- Sub canonique référençant OVH Beauharnois, Cadre IA MCN, 5 ordres à directives IA formelles
- Stats grid (4 col) : ~2 min · 5 ordres · 95 %+ · 0 $ (NBSP OQLF)
- Eyebrow back-link « Toutes les solutions »
- 5 animations Framer Motion → CSS pure + Alpine.js :
  1. 3-step flow auto-cycle 1→2→3 (setInterval 1.8 s, désactivé reduced-motion)
  2. Magnetic CTA primary (mousemove → translate max 8 px)
  3. Mouse parallax orb 3D (mousemove window → CSS transition)
  4. Shockwave on click (CSS pseudo-element scale 0→4 + opacity)
  5. Word-staggered title reveal (Dict + IA via animation-delay)

Sections enrichies / ajoutées :
- Pipeline : sous-titre « Du fichier au résumé — en temps réel » + hint canonique
- NEW « 99+ langues détectées » + carte « IA Mistral 7B (LOCAL) » 4 bullets
- Pricing : sous-titres canoniques par forfait + note « Tous les prix en CAD, taxes en sus (TPS 5 % + TVQ 9,975 %) »
- Conformité : 3 chips claims (~192 000 pros · 5 ordres · 0 donnée hors-Québec) + phrase secteurs réglementés
- NEW Cégeps spotlight « Conformité au 19 juin 2026 » avec Cadre IA MCN détaillé (7 bullets, 9 chips organismes, badge pulse glow)
- NEW Partenaire CyberPerformance (card horizontale + lien externe)
- FAQ : enrichie de 7 → 10 questions canoniques sourcées de dictai-page-content.tsx (Teams Copilot, Otter.ai, Barreau, Clio Manage, etc.)
- CTA final : « Prêt à protéger vos données ? » + bouton « Réserver ma démo gratuite » (préserve mailto pré-inscription)

Tests :
- Ajout tests/conftest.py (stub fcntl POSIX + env vars test) pour permettre exécution sur Windows
- Mise à jour 8 assertions liées au nouveau hero, FAQ 10 Q, CTA renforcé, NBSP OQLF dans eyebrow
- 61 passed / 3 pré-existant échecs baseline (/blog dans nav + footer + trust-bar phrasing)

Contraintes respectées : zéro JS externe, aucun emoji (SVG inline aria-hidden), V3 radii (rounded/rounded-full), brand tokens, OQLF NBSP partout, WCAG (aria-labels, focus-visible, prefers-reduced-motion désactive toutes les animations hero).

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

templates/marketing/landing.html

@@ -4,35 +4,146 @@
 {% block description %}DictIA transcrit vos réunions confidentielles 100% au Québec. Conforme Loi 25, Barreau, CPA, ChAD. Conçu avec 9 ordres professionnels — lancement printemps 2026.{% endblock %}
 
 {% block content %}
-{# ===== HERO ===== #}
-{# Local keyframes scoped to the hero — audio progress bar loops 50%→75%→50% over 15s #}
+{# ===== HERO — round 3 : reproduction fidèle dictia.ca/solutions/dictai ===== #}
+{# Source : InnovA-AI/Website-Sanity/components/sections/dictai-page-content.tsx (lignes 260-518)
+   Animations Framer Motion → CSS pure + Alpine.js :
+     1. 3-step flow auto-cycle 1→2→3 (setInterval 1.8 s, désactivé reduced-motion)
+     2. Magnetic CTA primary (mousemove → translate, max 8 px)
+     3. Mouse parallax orb (mousemove window → translate, inertie via CSS transition)
+     4. Shockwave on click (CSS pseudo-element, scale 0→4 + opacity 1→0)
+     5. Hero title fade-in + word-staggered animation #}
 <style>
-  @keyframes audio-progress {
-    0%, 100% { width: 50%; }
-    50%      { width: 75%; }
+  /* ── 3-step flow : auto-cycle highlight ── */
+  .hero-flow-card {
+    transition: transform 350ms ease-out, opacity 350ms ease-out, box-shadow 350ms ease-out, background-color 350ms ease-out;
   }
-  .hero-audio-progress { animation: audio-progress 15s ease-in-out infinite; }
-  .hero-audio-thumb    { animation: audio-progress 15s ease-in-out infinite; }
-  /* Mockup tilt + interactive hover — straightens on hover */
-  @media (min-width: 1024px) {
-    .hero-mockup-tilt { transform: rotate(1deg); transition: transform 500ms ease-out; }
-    .hero-mockup-tilt:hover { transform: rotate(0deg) scale(1.01); }
+  .hero-flow-card.is-active {
+    transform: scale(1.05);
+    box-shadow: 0 0 22px rgba(0, 189, 216, 0.45), 0 0 44px rgba(0, 98, 255, 0.18);
   }
-  /* Glow orbs decorative float — uses tc-float-y from tailwind.config */
-  .hero-mockup-glow-a { animation: tc-float-y 6s ease-in-out infinite; }
-  .hero-mockup-glow-b { animation: tc-float-y 8s ease-in-out infinite reverse; }
-  /* Reduced-motion: freeze all hero mockup animations on first frame */
+  .hero-flow-card.is-inactive { opacity: 0.45; }
+  /* Animated arrow draw between cards */
+  @keyframes hero-arrow-draw {
+    0%   { stroke-dashoffset: 24; opacity: 0.3; }
+    50%  { stroke-dashoffset: 0;  opacity: 1;   }
+    100% { stroke-dashoffset: -24; opacity: 0.3; }
+  }
+  .hero-flow-arrow path { stroke-dasharray: 24; animation: hero-arrow-draw 1.8s ease-in-out infinite; }
+  /* ── Magnetic CTA — Alpine writes :style="--mx,--my", we apply it ── */
+  .hero-magnetic { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
+  .hero-magnetic:hover { transform: translate(var(--mx, 0px), var(--my, 0px)); }
+  /* Pulse halo around primary CTA */
+  @keyframes hero-cta-halo {
+    0%, 100% { transform: scale(1);    opacity: 0.35; }
+    50%      { transform: scale(1.18); opacity: 0.10; }
+  }
+  .hero-cta-halo { animation: hero-cta-halo 2.4s ease-in-out infinite; }
+  /* ── Parallax orb — Alpine writes :style="--ox,--oy" ── */
+  .hero-parallax-orb {
+    transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0);
+    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    will-change: transform;
+  }
+  /* Slow rotating mesh ring overlay */
+  @keyframes hero-orb-rotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+  .hero-orb-ring-a { animation: hero-orb-rotate 28s linear infinite; }
+  .hero-orb-ring-b { animation: hero-orb-rotate 40s linear infinite reverse; }
+  /* ── Shockwave click effect ── */
+  @keyframes hero-shockwave {
+    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.55; }
+    100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0;    }
+  }
+  .hero-shockwave {
+    position: fixed;
+    width: 30vmax;
+    height: 30vmax;
+    border-radius: 9999px;
+    pointer-events: none;
+    z-index: 9999;
+    background: radial-gradient(circle, rgba(0,189,216,0.18) 0%, rgba(0,98,255,0.10) 50%, transparent 70%);
+    animation: hero-shockwave 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  }
+  /* ── Word-staggered title reveal ── */
+  @keyframes hero-word-rise {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .hero-h1-word {
+    display: inline-block;
+    opacity: 0;
+    animation: hero-word-rise 0.55s ease-out forwards;
+  }
+  /* ── Reduced-motion : freeze all hero animations ── */
   @media (prefers-reduced-motion: reduce) {
-    .hero-audio-progress, .hero-audio-thumb,
-    .hero-mockup-glow-a, .hero-mockup-glow-b {
+    .hero-flow-card, .hero-flow-arrow path, .hero-magnetic,
+    .hero-cta-halo, .hero-parallax-orb, .hero-orb-ring-a, .hero-orb-ring-b,
+    .hero-shockwave, .hero-h1-word {
       animation: none !important;
+      transition: none !important;
     }
-    .hero-audio-progress { width: 60% !important; }
-    .hero-audio-thumb    { left: 60% !important; }
-    .hero-mockup-tilt    { transform: none !important; transition: none !important; }
+    .hero-flow-card.is-active   { transform: none !important; box-shadow: none !important; }
+    .hero-flow-card.is-inactive { opacity: 1 !important; }
+    .hero-h1-word { opacity: 1 !important; transform: none !important; }
+    .hero-parallax-orb { transform: none !important; }
   }
 </style>
-<section class="relative overflow-hidden bg-brand-navy text-white py-24 md:py-32" aria-labelledby="hero-title">
+<section
+  class="relative overflow-hidden bg-brand-navy text-white py-24 md:py-32 min-h-[85vh] flex items-center"
+  aria-labelledby="hero-title"
+  x-data="{
+    flowIdx: 0,
+    flowTimer: null,
+    mx: 0, my: 0,
+    ox: 0, oy: 0,
+    shockwaves: [],
+    swId: 0,
+    startFlow() {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      if (this.flowTimer) clearInterval(this.flowTimer);
+      this.flowTimer = setInterval(() => { this.flowIdx = (this.flowIdx + 1) % 3 }, 1800);
+    },
+    onSectionMove($event) {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      const r = $event.currentTarget.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      this.ox = ($event.clientX - cx) * -0.025;
+      this.oy = ($event.clientY - cy) * -0.018;
+    },
+    onSectionLeave() { this.ox = 0; this.oy = 0; this.mx = 0; this.my = 0; },
+    onCtaMove($event) {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      const r = $event.currentTarget.getBoundingClientRect();
+      const dx = $event.clientX - (r.left + r.width / 2);
+      const dy = $event.clientY - (r.top + r.height / 2);
+      const dist = Math.sqrt(dx*dx + dy*dy);
+      const max = 110;
+      if (dist < max) {
+        const f = (1 - dist / max) * 0.18;
+        this.mx = Math.max(-8, Math.min(8, dx * f));
+        this.my = Math.max(-8, Math.min(8, dy * f));
+      } else { this.mx = 0; this.my = 0; }
+    },
+    onCtaLeave() { this.mx = 0; this.my = 0; },
+    onCtaClick($event) {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      const id = ++this.swId;
+      this.shockwaves.push({ id, x: $event.clientX, y: $event.clientY });
+      setTimeout(() => { this.shockwaves = this.shockwaves.filter(s => s.id !== id); }, 700);
+    }
+  }"
+  x-init="startFlow()"
+  @mousemove="onSectionMove($event)"
+  @mouseleave="onSectionLeave()"
+>
+  {# Shockwave overlays — fixed-position ripples on CTA click #}
+  <template x-for="sw in shockwaves" :key="sw.id">
+    <span class="hero-shockwave" :style="`left:${sw.x}px; top:${sw.y}px;`" aria-hidden="true"></span>
+  </template>
+
   {# Cosmic orbs background — 3 radial gradients (blue 16%, cyan 7%, green 11%) + subtle grid + horizontal accent line #}
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
     {# Orb 1 — primary blue, top-left #}
@@ -52,278 +163,154 @@
          style="background: linear-gradient(90deg, transparent, rgba(0,98,255,0.3), rgba(0,189,216,0.2), transparent);"></div>
   </div>
 
-  <div class="relative max-w-[1200px] mx-auto px-6">
-    {# 2-col grid on lg+: text left, app mockup right. On <lg, mockup hidden, text centered as before. #}
-    <div class="grid lg:grid-cols-[1fr_minmax(0,560px)] gap-12 lg:gap-16 items-center">
-      {# ---------- COLUMN LEFT: hero copy ---------- #}
-      <div class="text-center lg:text-left max-w-3xl mx-auto lg:mx-0">
-        {# Eyebrow with gradient text and 0.18em tracking #}
-        <p class="eyebrow grad-text mb-6 animate-tc-fade-in-up" style="animation-delay: 0ms; animation-fill-mode: backwards;">
-          TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC
-        </p>
+  {# 3D abstract orb — reacts to mouse via Alpine ox/oy → CSS variables #}
+  <div
+    class="hero-parallax-orb absolute right-[6%] top-[12%] pointer-events-none hidden lg:block"
+    :style="`--ox:${ox}px; --oy:${oy}px;`"
+    aria-hidden="true"
+  >
+    <div class="relative w-72 h-72">
+      {# Outer ring #}
+      <div class="absolute inset-0 rounded-full border border-brand-b3/15" style="transform: scale(1.35);"></div>
+      {# Ambient blob #}
+      <div class="absolute inset-0 rounded-full"
+           style="background: radial-gradient(ellipse at 40% 40%, rgba(107,159,255,0.14) 0%, rgba(0,189,216,0.07) 50%, transparent 75%); filter: blur(20px);"></div>
+      {# Rotating mesh ring A #}
+      <div class="hero-orb-ring-a absolute inset-0 rounded-full border border-dashed border-white/[0.07]" style="transform: scale(1.15);"></div>
+      {# Rotating mesh ring B #}
+      <div class="hero-orb-ring-b absolute inset-0 rounded-full border border-white/[0.05]" style="transform: scale(0.9);"></div>
+      {# Inner glow core #}
+      <div class="absolute inset-[30%] rounded-full"
+           style="background: radial-gradient(circle, rgba(107,159,255,0.25) 0%, rgba(0,189,216,0.08) 60%, transparent 100%);"></div>
+    </div>
+  </div>
 
-        {# H1 — clamp typography + grad-text accent on key phrase #}
-        <h1 id="hero-title" class="text-[clamp(2.5rem,4vw,4rem)] font-black leading-[1.05] mb-6 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
-          Transcrivez vos réunions
-          <span class="grad-text">sans risquer votre permis</span>.
-        </h1>
+  <div class="relative max-w-[1200px] mx-auto px-6 w-full">
+    {# Single-column hero — texte centré (lg : aligné gauche). Le visuel canonique est le 3-step flow inline (pas de mockup app). #}
+    <div class="max-w-4xl mx-auto lg:mx-0">
 
-        {# Sub-headline — ≤25 words, value prop #}
-        <p class="text-lg text-white/70 max-w-xl mx-auto lg:mx-0 mb-10 animate-tc-fade-in-up" style="animation-delay: 150ms; animation-fill-mode: backwards;">
-          DictIA convertit vos audio en texte, résumé et points d'action — 100% au Québec, conforme Barreau, CPA Québec, ChAD et 6 autres ordres professionnels.
-        </p>
+      {# Eyebrow / breadcrumb back-link "Toutes les solutions" — link to anchor #solutions sur landing #}
+      <a href="#tarifs"
+         class="inline-flex items-center gap-2 text-white/40 hover:text-white text-xs font-sans uppercase tracking-[0.18em] transition-colors mb-8 animate-tc-fade-in-up"
+         style="animation-delay: 0ms; animation-fill-mode: backwards;">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+        Toutes les solutions
+      </a>
 
-        {# Dual CTA — primary (demo) + secondary ghost (pricing) #}
-        <div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start animate-tc-fade-in-up" style="animation-delay: 300ms; animation-fill-mode: backwards;">
-          {% from 'macros/button.html' import button %}
-          {{ button('Réserver une démo', href='/contact', variant='primary', size='lg') }}
-          {{ button('Voir les tarifs', href='/tarifs', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
-        </div>
+      {# Sous-eyebrow — pillars #}
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-5 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
+        <span class="eyebrow grad-text">
+          TRANSCRIPTION IA · CONFORME LOI&nbsp;25 · QUÉBEC
+        </span>
+        <span class="hidden sm:block h-px bg-white/10 w-[80px]" aria-hidden="true"></span>
+      </div>
+      <p class="text-sm text-white/60 mb-8 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
+        Audio → Texte · Résumés IA · Conforme Loi&nbsp;25 &amp; ordres professionnels
+      </p>
 
-        {# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
-        <p class="mt-8 text-sm text-white/70 flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
-          <span class="inline-flex items-center gap-1.5">
-            <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
-              <path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
-            </svg>
-            <span>Conçu avec 9 ordres professionnels québécois</span>
-          </span>
-          <span class="text-white/30">·</span>
-          <span>Pré-inscription ouverte</span>
-          <span class="text-white/30">·</span>
-          <span>Lancement printemps 2026</span>
-        </p>
+      {# Brand wordmark large — Dict + IA accent #}
+      <h1 id="hero-title" class="font-black leading-[0.92] mb-6 text-white" style="font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.025em;">
+        <span class="hero-h1-word" style="animation-delay: 80ms;">Dict</span><span class="hero-h1-word grad-text" style="animation-delay: 160ms;">IA</span>
+      </h1>
+
+      {# 3-step flow inline — REMPLACE le mockup app actuel. Auto-cycle 1→2→3 toutes les 1.8s. #}
+      <div
+        class="flex flex-wrap items-center gap-2 mb-8 animate-tc-fade-in-up"
+        style="animation-delay: 200ms; animation-fill-mode: backwards;"
+        role="group"
+        aria-label="Flux DictIA en 3 étapes"
+      >
+        {% set flow_steps = [
+          ('Importez un fichier', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'),
+          ('Texte en 2&nbsp;min', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></svg>'),
+          ('Résumé + actions', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z"/><path d="M5 19l1.5-1.5"/><path d="M19 19l-1.5-1.5"/></svg>')
+        ] %}
+        {% for label, icon in flow_steps %}
+        <span
+          class="hero-flow-card inline-flex items-center gap-1.5 border border-white/10 bg-white/[0.04] rounded-full px-3.5 py-1.5 text-[12px] font-medium text-white/70"
+          :class="flowIdx === {{ loop.index0 }} ? 'is-active grad-bg !text-white !border-transparent' : 'is-inactive'"
+          aria-label="Étape {{ loop.index }} sur 3 : {{ label | striptags }}"
+        >
+          <span aria-hidden="true">{{ icon | safe }}</span>
+          <span>{{ label | safe }}</span>
+        </span>
+        {% if not loop.last %}
+        <svg class="hero-flow-arrow w-5 h-5 text-white/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12h14M13 6l6 6-6 6"/>
+        </svg>
+        {% endif %}
+        {% endfor %}
       </div>
 
-      {# ---------- COLUMN RIGHT: app mockup (lg+ only) ---------- #}
-      <div class="hidden lg:block relative animate-tc-fade-in-up" style="animation-delay: 250ms; animation-fill-mode: backwards;">
-        {# Decorative glow orbs floating behind the mockup #}
-        <div class="absolute -inset-8 pointer-events-none" aria-hidden="true">
-          <div class="hero-mockup-glow-a absolute -top-10 -left-10 w-72 h-72 rounded-full bg-brand-b1/15 blur-3xl"></div>
-          <div class="hero-mockup-glow-b absolute -bottom-10 -right-6 w-64 h-64 rounded-full bg-brand-b3/10 blur-3xl"></div>
+      {# H2 (canonique : phrase clé en cyan/grad) #}
+      <p class="text-xl md:text-2xl lg:text-3xl font-black mb-6 leading-snug grad-text animate-tc-fade-in-up" style="animation-delay: 280ms; animation-fill-mode: backwards;">
+        Transcription IA locale en 2&nbsp;minutes — conforme Barreau, CPA Québec et ChAD.
+      </p>
+
+      {# Sub canonique #}
+      <p class="text-base md:text-lg text-white/65 max-w-3xl leading-relaxed mb-10 animate-tc-fade-in-up" style="animation-delay: 360ms; animation-fill-mode: backwards;">
+        DictIA transforme vos réunions en texte, résumés et points d'action en 2&nbsp;minutes — hébergé au Québec sur OVH&nbsp;Beauharnois, zéro Cloud Act. Contrairement à Teams Copilot ou Otter.ai, vos données ne quittent jamais le Québec. Conforme au Cadre&nbsp;IA MCN et aux 5&nbsp;ordres à directives IA formelles (Barreau, ChAD, CMQ, OIIQ, OACIQ).
+      </p>
+
+      {# Stats grid — 4 colonnes #}
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-10 max-w-3xl animate-tc-fade-in-up" style="animation-delay: 440ms; animation-fill-mode: backwards;">
+        {% for stat in [
+          ('~2&nbsp;min',  'Pour 1&nbsp;h d\'audio'),
+          ('5&nbsp;ordres','Directives IA formelles'),
+          ('95&nbsp;%+',   'Précision FR-CA'),
+          ('0&nbsp;$',     'Frais par utilisateur')
+        ] %}
+        <div class="bg-white/[0.04] border border-white/10 rounded px-4 py-3 text-center">
+          <div class="font-display font-black grad-text text-xl leading-none mb-1">{{ stat[0] | safe }}</div>
+          <div class="text-[10.5px] text-white/55 uppercase tracking-wider leading-tight">{{ stat[1] | safe }}</div>
         </div>
+        {% endfor %}
+      </div>
 
-        {# The mockup itself — role=img with descriptive label for screen readers #}
-        <div role="img"
-             aria-label="Aperçu de l'interface DictIA — liste d'enregistrements à gauche, transcription au centre, résumé IA à droite"
-             class="hero-mockup-tilt relative bg-brand-navy2 border border-white/[0.08] shadow-2xl shadow-black/40 rounded overflow-hidden">
+      {# Dual CTA — primary "Réserver une démo" magnétique + ghost "Voir les forfaits" #}
+      <div class="flex flex-col sm:flex-row gap-3 animate-tc-fade-in-up" style="animation-delay: 520ms; animation-fill-mode: backwards;">
+        {# Magnetic CTA wrapper — Alpine writes mx/my via mousemove #}
+        <span class="relative inline-flex">
+          {# Pulse halo behind the primary CTA #}
+          <span class="hero-cta-halo absolute -inset-1 rounded pointer-events-none"
+                style="background: radial-gradient(ellipse, rgba(107,159,255,0.50) 0%, transparent 70%);"
+                aria-hidden="true"></span>
+          <a
+            href="/contact"
+            @mousemove="onCtaMove($event)"
+            @mouseleave="onCtaLeave()"
+            @click="onCtaClick($event)"
+            class="hero-magnetic relative inline-flex items-center justify-center gap-2 bg-gradient-to-r from-brand-b3 to-brand-b1 hover:from-brand-b1 hover:to-brand-b3 text-brand-navy font-bold px-8 h-12 text-sm rounded transition-colors w-full sm:w-auto focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2"
+            :style="`--mx:${mx}px; --my:${my}px;`"
+          >
+            <span>Réserver une démo</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+          </a>
+        </span>
+        <a
+          href="/tarifs"
+          class="inline-flex items-center justify-center gap-2 border border-white/15 hover:border-white/30 text-white font-semibold px-8 h-12 text-sm rounded transition-colors w-full sm:w-auto focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2"
+        >
+          <span>Voir les forfaits</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+        </a>
+      </div>
 
-          {# A) Browser chrome / window header (h-8) #}
-          <div class="flex items-center px-3 h-8 border-b border-white/[0.06] bg-white/[0.03]" aria-hidden="true">
-            {# Traffic light dots #}
-            <div class="flex items-center gap-1.5">
-              <span class="block w-3 h-3 rounded-full" style="background:#ff5f57"></span>
-              <span class="block w-3 h-3 rounded-full" style="background:#febc2e"></span>
-              <span class="block w-3 h-3 rounded-full" style="background:#28c840"></span>
-            </div>
-            {# Centered tab label #}
-            <div class="flex-1 text-center text-[11px] font-medium text-white/60 tracking-tight">DictIA — Enquêter</div>
-            {# Expand icon #}
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 text-white/40">
-              <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
-            </svg>
-          </div>
+      {# Social proof microcopy — defensible: 9 ordres pros + waitlist + launch date (préservé pour SEO/legal) #}
+      <p class="mt-8 text-sm text-white/70 flex flex-wrap items-center gap-x-2 gap-y-1 animate-tc-fade-in-up" style="animation-delay: 600ms; animation-fill-mode: backwards;">
+        <span class="inline-flex items-center gap-1.5">
+          <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
+            <path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
+          </svg>
+          <span>Conçu avec 9 ordres professionnels québécois</span>
+        </span>
+        <span class="text-white/30">·</span>
+        <span>Pré-inscription ouverte</span>
+        <span class="text-white/30">·</span>
+        <span>Lancement printemps 2026</span>
+      </p>
+    </div>
 
-          {# B) Main app area — 3 sub-columns (sidebar / center / summary), h-[460px] #}
-          <div class="grid grid-cols-[180px_1fr_170px] h-[460px]"
-               x-data="{ idx: 0 }"
-               x-init="$el.__hero_int = setInterval(() => { idx = (idx + 1) % 5 }, 2800)">
-
-            {# B1 — SIDEBAR (left) #}
-            <aside class="border-r border-white/[0.06] flex flex-col overflow-hidden">
-              {# Sidebar header — DictIA monogram + JD avatar #}
-              <div class="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.05]">
-                <span class="grad-text font-black text-[13px] tracking-tight">DictIA</span>
-                <span class="grad-bg rounded-full w-6 h-6 flex items-center justify-center text-[10px] font-bold text-white">JD</span>
-              </div>
-
-              {# New recording button — rounded-none brutalist #}
-              <div class="px-2 pt-2">
-                <button type="button" class="grad-bg w-full inline-flex items-center justify-center gap-1.5 py-2 text-[11px] font-semibold rounded-none" tabindex="-1" aria-hidden="true">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M12 5v14M5 12h14"/></svg>
-                  <span>Nouvel Enregistrement</span>
-                </button>
-              </div>
-
-              {# Search input #}
-              <div class="px-2 pt-2">
-                <div class="relative">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-white/40"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
-                  <div class="bg-white/[0.05] border border-white/[0.06] py-1.5 pl-7 pr-2 text-[10px] text-white/40 rounded-none">Rechercher…</div>
-                </div>
-              </div>
-
-              {# Sidebar list — scrollable area #}
-              <div class="flex-1 overflow-hidden mt-3 px-1">
-
-                {# Group: Semaine dernière #}
-                <p class="px-2 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Semaine dernière</p>
-
-                {# Item 1 — ACTIVE #}
-                <div class="px-2 py-2 mb-1 bg-white/[0.08] border-l-2 border-brand-b1">
-                  <p class="text-[11px] text-white font-semibold truncate">Dossier Beaumont — clauses 7 et 9</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">Jeu · Me Roy, Jean T., Marie C.</p>
-                  <span class="inline-block mt-1 rounded-full bg-blue-500/20 text-blue-300 text-[9px] px-2 py-0.5 font-medium">En cours</span>
-                </div>
-
-                {# Item 2 #}
-                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
-                  <p class="text-[11px] text-white/90 truncate">Succession Gagnon — répartition…</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">26 févr. · Me Gagnon, Client</p>
-                </div>
-
-                {# Group: Mois dernier #}
-                <p class="px-2 mt-3 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Mois dernier</p>
-
-                {# Item 3 #}
-                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
-                  <p class="text-[11px] text-white/90 truncate">Consultation Tremblay — litige loc…</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">19 févr. · Me Roy, Sophie T.</p>
-                </div>
-
-                {# Item 4 — Barreau Confidentiel #}
-                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
-                  <p class="text-[11px] text-white/90 truncate">Réunion constitutive INC Bédard…</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Sophie B., Jean R.</p>
-                  <span class="inline-block mt-1 rounded-full bg-purple-500/20 text-purple-300 text-[9px] px-2 py-0.5 font-medium">Barreau Confidentiel</span>
-                </div>
-
-                {# Item 5 — CPA Corporatif #}
-                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
-                  <p class="text-[11px] text-white/90 truncate">Entretien RQAP et structure salariale</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Me Roy, Allison, Robert</p>
-                  <span class="inline-block mt-1 rounded-full bg-emerald-500/20 text-emerald-300 text-[9px] px-2 py-0.5 font-medium">CPA Corporatif</span>
-                </div>
-
-                {# Item 6 — Urgent Client #}
-                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
-                  <p class="text-[11px] text-white/90 truncate">Révision contrat Côté &amp; Associés</p>
-                  <p class="text-[9px] text-white/50 truncate mt-0.5">5 févr. · Me Roy, Marie C.</p>
-                  <span class="inline-block mt-1 rounded-full bg-red-500/20 text-red-300 text-[9px] px-2 py-0.5 font-medium">Urgent Client</span>
-                </div>
-
-              </div>
-            </aside>
-
-            {# B2 — CENTER (audio + transcript) #}
-            <section class="flex flex-col p-3 overflow-hidden">
-
-              {# Header card #}
-              <div class="mb-3">
-                <h3 class="text-[13px] font-bold text-white">Dossier Beaumont — clauses 7 et 9</h3>
-                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-[10px] text-white/50">
-                  <span class="inline-flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-                    <span>Me Roy, Jean T., Marie C.</span>
-                  </span>
-                  <span class="inline-flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
-                    <span>27 févr. 2026</span>
-                  </span>
-                  <span class="inline-flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
-                    <span>38:47</span>
-                  </span>
-                  <span class="inline-flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
-                    <span>28.3 MB</span>
-                  </span>
-                </div>
-              </div>
-
-              {# Audio player block #}
-              <div class="bg-white/[0.04] p-3 rounded-none">
-                {# Progress bar #}
-                <div class="relative h-1 bg-white/10">
-                  <div class="hero-audio-progress h-full grad-bg" style="width:60%"></div>
-                  <div class="hero-audio-thumb absolute -top-1 grad-bg w-3 h-3 rounded-full" style="left:60%; transform: translateX(-50%);"></div>
-                </div>
-                {# Time + speed + play row #}
-                <div class="flex items-center justify-between mt-2">
-                  <div class="text-[10px] font-mono text-white/60">
-                    <span class="text-white/80">28:17</span>
-                    <span class="text-white/30 mx-1">/</span>
-                    <span>46:23</span>
-                  </div>
-                  <div class="flex items-center gap-2">
-                    <span class="text-[9px] text-white/60 px-1.5 py-0.5 bg-white/[0.06] rounded-full font-mono">1x</span>
-                    <button type="button" class="grad-bg w-8 h-8 rounded-full flex items-center justify-center animate-plus-breathe" tabindex="-1" aria-hidden="true">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-3 h-3"><path d="M8 5v14l11-7z"/></svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              {# Transcript area — 5 lines, active line cycles via Alpine idx #}
-              <div class="flex-1 mt-3 overflow-hidden space-y-1.5">
-                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 0 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
-                  <p class="text-[10px]">
-                    <span class="text-brand-b1 font-bold">Allison</span>
-                    <span class="text-white/80 ml-1.5">Tu l'as su? Comment ça va, vous deux?</span>
-                  </p>
-                </div>
-                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 1 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
-                  <p class="text-[10px]">
-                    <span class="text-brand-b3 font-bold">SPEAKER_02</span>
-                    <span class="text-white/80 ml-1.5">Super bien, super vite, mais très bien.</span>
-                  </p>
-                </div>
-                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 2 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
-                  <p class="text-[10px]">
-                    <span class="text-brand-b1 font-bold">Allison</span>
-                    <span class="text-white/80 ml-1.5">Oui, oui. Je suis contente d'entendre ça.</span>
-                  </p>
-                </div>
-                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 3 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
-                  <p class="text-[10px]">
-                    <span class="text-brand-b3 font-bold">SPEAKER_02</span>
-                    <span class="text-white/80 ml-1.5">Moi, je l'ai vu quand vous l'avez payé.</span>
-                  </p>
-                </div>
-                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 4 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
-                  <p class="text-[10px]">
-                    <span class="text-brand-b1 font-bold">Allison</span>
-                    <span class="text-white/80 ml-1.5">J'étais comme, « Hein? »</span>
-                  </p>
-                </div>
-              </div>
-
-              {# Question input (disabled — visual only) #}
-              <div class="mt-3">
-                <input type="text" disabled tabindex="-1" aria-hidden="true"
-                       placeholder="Posez une question sur cette transcription…"
-                       class="w-full bg-white/[0.05] border border-white/10 px-3 py-2 text-[11px] text-white/40 placeholder-white/40 rounded-none">
-              </div>
-            </section>
-
-            {# B3 — RIGHT pane (summary) #}
-            <aside class="border-l border-white/[0.06] p-3 overflow-hidden">
-              {# Tabs #}
-              <div class="flex items-center gap-3 border-b border-white/[0.06] pb-2 mb-3">
-                <span class="text-[10px] uppercase tracking-[0.12em] text-brand-b1 font-bold border-b-2 border-brand-b1 pb-1 -mb-[0.5rem]">Résumé</span>
-                <span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Notes</span>
-                <span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Discuter</span>
-              </div>
-
-              {# Summary text #}
-              <p class="text-[10px] text-white/80 leading-relaxed">
-                Cette réunion aborde les complexités fiscales et juridiques liées à la création d'un nouveau produit nommé Dictéa…
-              </p>
-
-              {# Key points #}
-              <p class="mt-3 text-[9px] uppercase tracking-[0.12em] text-white/50 font-bold mb-1.5">Points clés</p>
-              <ul class="space-y-1 text-[10px] text-white/70 leading-snug">
-                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Structure de propriété : SNC + INC</span></li>
-                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>RQAP et Salaire : Allison ne peut pas se verser</span></li>
-                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Subventions : 4 ans à conserver</span></li>
-                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Exonération des gains personnels</span></li>
-              </ul>
-            </aside>
-
-          </div>{# /Main app area #}
-        </div>{# /mockup container #}
-      </div>{# /column right #}
-    </div>{# /grid #}
   </div>
 </section>
 
@@ -1075,11 +1062,14 @@
     <div class="text-center max-w-2xl mx-auto mb-14">
       <p class="eyebrow grad-text mb-4">COMMENT&nbsp;ÇA MARCHE</p>
       <h2 id="pipeline-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
-        Du fichier au résumé <span class="grad-text">en 4 étapes</span>.
+        Du fichier au résumé <span class="grad-text">— en temps réel</span>.
       </h2>
       <p class="text-lg text-brand-navy/70">
         Aucune installation côté utilisateur, aucune conversion préalable. DictIA orchestre l'ensemble du pipeline — du téléversement à l'export — en moins de deux minutes pour une heure d'audio.
       </p>
+      <p class="text-sm text-brand-navy/55 mt-3 italic">
+        Survolez une fonctionnalité pour voir la machine en action. Glissez pour calculer votre gain de productivité.
+      </p>
     </div>
 
     {# Pipeline track + 4 nodes — Alpine state drives all visuals.
@@ -1235,6 +1225,82 @@
   </div>
 </section>
 
+{# ===== LANGUES + IA LOCALE ===== #}
+{# Section compacte : grille 99+ langues détectées (gauche) + carte IA Mistral 7B LOCAL (droite). #}
+<section class="bg-brand-bg py-16 border-y border-brand-border" aria-labelledby="langues-title">
+  <div class="max-w-[1100px] mx-auto px-6">
+    <div class="grid lg:grid-cols-2 gap-8">
+      {# Colonne gauche — 99+ langues #}
+      <div class="bg-white rounded border border-brand-border p-6">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="grad-bg w-9 h-9 rounded flex items-center justify-center text-white" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          </span>
+          <div>
+            <h2 id="langues-title" class="text-lg font-bold text-brand-navy leading-tight">99+ langues détectées</h2>
+            <p class="text-xs text-brand-navy/55 mt-0.5">WhisperX Large-v3 · multilingue par défaut</p>
+          </div>
+        </div>
+
+        {# Grille codes langue — 12 puces (FR mis en avant via grad-bg) #}
+        <ul class="grid grid-cols-6 sm:grid-cols-8 gap-1.5 mb-4" role="list" aria-label="Quelques langues supportées">
+          {% for code in ['FR','EN','ES','DE','PT','IT','NL','PL','ZH','JA','KO','AR','RU','HI','TR','VI','TH','SV','DA','NO','FI'] %}
+          <li class="text-center">
+            <span class="block text-[10px] font-mono font-bold py-1 rounded
+                         {{ 'grad-bg text-white' if code == 'FR' else 'bg-brand-bg border border-brand-border text-brand-navy/70' }}">
+              {{ code }}
+            </span>
+          </li>
+          {% endfor %}
+        </ul>
+
+        <p class="text-xs text-brand-navy/55 flex items-center gap-1.5">
+          <span class="inline-block w-1.5 h-1.5 rounded-full bg-brand-b3"></span>
+          <span><strong class="text-brand-navy">Auto</strong> · Détection automatique de la langue à l'upload</span>
+        </p>
+      </div>
+
+      {# Colonne droite — IA intégrée Mistral 7B LOCAL #}
+      <div class="bg-brand-navy text-white rounded p-6 relative overflow-hidden">
+        {# Subtle orb décoratif #}
+        <div class="absolute -top-12 -right-12 w-48 h-48 rounded-full pointer-events-none" aria-hidden="true"
+             style="background: radial-gradient(circle, rgba(0,189,216,0.15) 0%, transparent 60%); filter: blur(30px);"></div>
+
+        <div class="relative">
+          <div class="flex items-center gap-3 mb-4">
+            <span class="bg-white/10 border border-white/15 w-9 h-9 rounded flex items-center justify-center text-brand-b3" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M12 2a3 3 0 0 0-3 3v1a3 3 0 0 0-3 3v1a3 3 0 0 0 0 6v1a3 3 0 0 0 3 3 3 3 0 0 0 6 0 3 3 0 0 0 3-3v-1a3 3 0 0 0 0-6V9a3 3 0 0 0-3-3V5a3 3 0 0 0-3-3z"/></svg>
+            </span>
+            <div>
+              <h3 class="text-lg font-bold leading-tight">IA intégrée — Mistral 7B <span class="grad-text">(LOCAL)</span></h3>
+              <p class="text-xs text-white/55 mt-0.5">Inférence sur votre GPU · zéro cloud étranger</p>
+            </div>
+          </div>
+
+          <ul class="space-y-2 text-sm" role="list">
+            <li class="flex items-start gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 text-brand-b3 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+              <span class="text-white/80"><strong class="text-white">Résumé · Points d'action · Q&amp;R</strong></span>
+            </li>
+            <li class="flex items-start gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 text-brand-b3 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+              <span class="text-white/80">Données hébergées sur <strong class="text-white">vos serveurs</strong> · jamais partagées</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 text-brand-b3 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+              <span class="text-white/80">Zéro connexion <strong class="text-white">OpenAI · Google · Microsoft</strong></span>
+            </li>
+            <li class="flex items-start gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 text-brand-b3 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+              <span class="text-white/80">Inférence <strong class="text-white">hors-ligne</strong> · résultats en secondes</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
 {# ===== BENTO FEATURES ===== #}
 <section class="bg-white py-20" aria-labelledby="bento-title">
   <div class="max-w-[1060px] mx-auto px-6">
@@ -1472,6 +1538,10 @@
 
     {% include 'marketing/_partials/_pricing_tiers.html' %}
 
+    <p class="text-center text-xs text-brand-navy/60 mt-6 max-w-2xl mx-auto">
+      Tous les prix en CAD, taxes en sus (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%).
+    </p>
+
     {# ROI CALCULATOR — Alpine.js, hypotheses transparentes pour LPC art. 219 hygiene #}
     <div x-data="roiCalculator()" class="mt-16 max-w-3xl mx-auto bg-white p-8 rounded border border-brand-border" aria-labelledby="roi-title">
       <p class="eyebrow text-center grad-text mb-2">CALCULATEUR ROI</p>
@@ -1633,8 +1703,22 @@
         Architecture <span class="grad-text">conçue avec</span> les exigences professionnelles québécoises.
       </h2>
       <p class="text-lg text-white/70">
-        DictIA mappe son architecture aux cadres réglementaires applicables au secteur public et aux ordres professionnels du Québec. Détails techniques (EFVP, audit trail, déclaration CAI) disponibles sur demande&nbsp;: <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
+        DictIA mappe son architecture aux cadres réglementaires applicables au secteur public et aux ordres professionnels du Québec. DictIA a été conçu pour les secteurs réglementés du Québec — Loi&nbsp;25, Cloud Act, Barreau, ChAD, AMF. Détails techniques (EFVP, audit trail, déclaration CAI) disponibles sur demande&nbsp;: <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
       </p>
+
+      {# Chips claims — 3 marqueurs canoniques (~192 000 pros · 5 ordres · 0 donnée hors-Québec) #}
+      <div class="flex flex-wrap items-center justify-center gap-2 mt-6" role="list" aria-label="Chiffres clés conformité">
+        {% for chip in [
+          ('~192&nbsp;000 professionnels Tier&nbsp;1', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>'),
+          ('5&nbsp;ordres · directives IA formelles', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>'),
+          ('0&nbsp;donnée transmise hors Québec', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>')
+        ] %}
+        <span class="inline-flex items-center gap-1.5 bg-white/[0.06] border border-white/15 rounded-full px-3 py-1 text-xs text-white/85" role="listitem">
+          <span class="text-brand-b3" aria-hidden="true">{{ chip[1] | safe }}</span>
+          <span>{{ chip[0] | safe }}</span>
+        </span>
+        {% endfor %}
+      </div>
     </div>
 
     {# 4 conformity pillars — dark cards with grad-bg icon corners (matches Solution pillars style).
@@ -1910,6 +1994,140 @@
   </div>
 </section>
 
+{# ===== CÉGEPS · CONFORMITÉ AU 19 JUIN 2026 (spotlight) ===== #}
+{# Source canonique : texte fourni par l'utilisateur — Cadre IA MCN, Énoncé de principes mis à jour
+   + Indication d'application IAG (publié 19 déc. 2025, conformité 19 juin 2026, art. 21 LGGRI). #}
+<style>
+  /* Pulse glow autour du badge "Conformité imminente" */
+  @keyframes cegep-pulse-badge {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
+    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);    }
+  }
+  .cegep-badge-pulse { animation: cegep-pulse-badge 2.2s ease-in-out infinite; }
+  /* Bullets reveal staggered (intersection observer via Alpine x-intersect non requis, on utilise CSS animation-delay) */
+  @keyframes cegep-bullet-rise {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .cegep-bullet { opacity: 0; animation: cegep-bullet-rise 0.5s ease-out forwards; }
+  @media (prefers-reduced-motion: reduce) {
+    .cegep-badge-pulse, .cegep-bullet { animation: none !important; }
+    .cegep-bullet { opacity: 1 !important; transform: none !important; }
+  }
+</style>
+<section class="bg-brand-bg py-20 border-y border-brand-border" aria-labelledby="cegeps-title">
+  <div class="max-w-[1100px] mx-auto px-6">
+
+    {# Bandeau d'eyebrow + badge pulse #}
+    <div class="flex flex-wrap items-center justify-center gap-3 mb-5">
+      <span class="cegep-badge-pulse inline-flex items-center gap-1.5 bg-amber-50 border border-amber-300 text-amber-800 rounded-full px-3 py-1 text-[11px] font-bold uppercase tracking-wider">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        Conformité imminente
+      </span>
+      <span class="text-xs uppercase tracking-[0.18em] text-brand-navy/55 font-semibold">
+        Adopté 19&nbsp;déc.&nbsp;2025 · Décret officiel
+      </span>
+    </div>
+
+    <div class="text-center max-w-3xl mx-auto mb-12">
+      <h2 id="cegeps-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-5 text-brand-navy leading-tight">
+        Conformité au <span class="grad-text">19&nbsp;juin&nbsp;2026</span> — vous dirigez un cégep, un CISSS ou un ministère&nbsp;?
+      </h2>
+      <p class="text-lg text-brand-navy/80 font-semibold mb-3">
+        Vous avez jusqu'au 19&nbsp;juin&nbsp;2026.
+      </p>
+      <p class="text-base text-brand-navy/70 leading-relaxed">
+        Depuis le 19&nbsp;décembre&nbsp;2025, tous les organismes publics québécois doivent appliquer un cadre IA strict. Aucun outil cloud non approuvé ne peut recevoir de renseignements confidentiels — fini ChatGPT ou Teams Copilot dans les CA, les séances cliniques ou les comités universitaires.
+      </p>
+    </div>
+
+    {# Carte spotlight — Cadre IA MCN détaillé #}
+    <div class="bg-white border border-brand-border rounded p-6 md:p-8 max-w-4xl mx-auto">
+      <div class="flex items-start gap-3 mb-5">
+        <span class="grad-bg w-10 h-10 rounded flex items-center justify-center text-white shrink-0" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M3 21h18"/><path d="M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/></svg>
+        </span>
+        <div class="min-w-0">
+          <h3 class="text-lg md:text-xl font-bold text-brand-navy leading-tight">
+            Cadre IA MCN — Énoncé de principes mis à jour + Indication d'application IAG
+          </h3>
+          <p class="text-xs text-brand-navy/55 mt-1">Publié le 19&nbsp;décembre&nbsp;2025 sous l'art.&nbsp;21 LGGRI</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-brand-navy/75 leading-relaxed mb-5">
+        Interdit aux organismes publics (art.&nbsp;2 LGGRI) d'entrer des renseignements confidentiels dans un système IA non approuvé — ministères, organismes budgétaires, Santé&nbsp;Québec, CISSS/CIUSSS, centres de services scolaires, cégeps, universités. Régime allégé pour entreprises du gouvernement (art.&nbsp;4 — Hydro-Québec, SAQ, Loto-Québec, CDPQ).
+      </p>
+
+      <ul class="space-y-2.5 mb-6" role="list">
+        {% for bullet in [
+          ('Énoncé de principes — 12 principes éthiques applicables à tout système IA dans l\'administration publique', 0),
+          ('Indication d\'application IAG — gouvernance, gestion des risques, mesures de contrôle, protection des données, formation du personnel', 80),
+          ('Délai conformité&nbsp;: <strong>19&nbsp;juin&nbsp;2026</strong> (6&nbsp;mois post publication 19&nbsp;déc.&nbsp;2025)', 160),
+          ('Municipalités, MRC et Assemblée nationale <em>non</em> visées par l\'Énoncé — mais Loi sur l\'accès (A-2.1) reste applicable aux séances publiques', 240),
+          ('<strong>Loi&nbsp;25</strong> — voix = donnée biométrique (LCCJTI art.&nbsp;44-45), déclaration CAI obligatoire si banque biométrique', 320),
+          ('<strong>Loi&nbsp;96 (C-11)</strong> — documents générés en français pour organisations 25+ employés', 400),
+          ('Hébergement au Québec — aucune société US dans la chaîne (Cloud Act inapplicable)', 480)
+        ] %}
+        <li class="cegep-bullet flex items-start gap-2.5 text-sm text-brand-navy/80 leading-relaxed" role="listitem"
+            style="animation-delay: {{ bullet[1] }}ms;">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-1 text-brand-b3 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+          <span>{{ bullet[0] | safe }}</span>
+        </li>
+        {% endfor %}
+      </ul>
+
+      {# Liste organismes visés (chips) #}
+      <div class="border-t border-brand-border pt-5">
+        <p class="text-[11px] uppercase tracking-[0.16em] font-bold text-brand-navy/50 mb-3">Organismes visés par le Cadre&nbsp;IA MCN</p>
+        <div class="flex flex-wrap gap-1.5" role="list">
+          {% for org in ['Ministères', 'Santé Québec', 'CISSS/CIUSSS', 'Universités', 'Cégeps', 'Hydro-Québec', 'SAQ', 'SAAQ', 'CDPQ'] %}
+          <span class="inline-flex items-center bg-brand-bg border border-brand-border rounded-full px-2.5 py-0.5 text-[11px] text-brand-navy/75" role="listitem">{{ org }}</span>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{# ===== PARTENAIRE DE CONFIANCE — CyberPerformance ===== #}
+<section class="bg-white py-12" aria-labelledby="partner-title">
+  <div class="max-w-[1100px] mx-auto px-6">
+    <div class="flex items-center gap-3 mb-4">
+      <span id="partner-title" class="text-[10px] font-bold uppercase tracking-[0.20em] text-brand-navy/45">
+        Partenaire de confiance
+      </span>
+      <span class="flex-1 h-px max-w-[60px] bg-brand-border"></span>
+    </div>
+
+    <a
+      href="https://cyberperformance.ca"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="group flex flex-wrap sm:flex-nowrap items-center gap-5 px-5 py-4 rounded border border-brand-border hover:border-brand-b1 transition-colors no-underline focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
+      aria-label="CyberPerformance — Marketing numérique, Lévis, QC. Site externe (s'ouvre dans un nouvel onglet)"
+    >
+      {# Icône SVG handshake générique (pas d'emoji, pas de logo bitmap) #}
+      <span class="shrink-0 w-12 h-12 grad-bg rounded flex items-center justify-center text-white" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M11 17l-2-2 2-2"/><path d="M13 7l2 2-2 2"/><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
+      </span>
+
+      <span class="hidden sm:block w-px h-8 bg-brand-border shrink-0"></span>
+
+      <span class="flex-1 min-w-0">
+        <span class="block text-sm font-bold text-brand-navy leading-tight">CyberPerformance</span>
+        <span class="block text-xs text-brand-navy/60 mt-0.5">Marketing numérique · Lévis, QC</span>
+      </span>
+
+      <span class="shrink-0 inline-flex items-center gap-1.5 ml-auto text-xs text-brand-navy/55 group-hover:text-brand-b1 transition-colors">
+        <span>cyberperformance.ca</span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M7 17L17 7M7 7h10v10"/></svg>
+        <span class="sr-only">(s'ouvre dans un nouvel onglet)</span>
+      </span>
+    </a>
+  </div>
+</section>
+
 {# ===== TÉMOIGNAGES (placeholder pré-lancement) ===== #}
 <section class="bg-brand-bg py-20" aria-labelledby="testimonials-title">
   <div class="max-w-[1200px] mx-auto px-6">
@@ -2019,15 +2237,19 @@
   <div class="relative max-w-[820px] mx-auto px-6 text-center">
     <p class="eyebrow grad-text mb-4">PRÊT&nbsp;?</p>
     <h2 id="cta-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-6">
-      Réservez votre <span class="grad-text">pré-inscription</span>.
+      Prêt à <span class="grad-text">protéger vos données</span>&nbsp;?
     </h2>
-    <p class="text-lg text-white/80 mb-8">
+    <p class="text-lg text-white/80 mb-3">
+      Réservez une démonstration gratuite. Nous analyserons vos besoins et vous recommanderons le forfait adapté à votre réalité.
+    </p>
+    <p class="text-base text-white/65 mb-8">
       Lancement printemps&nbsp;2026. Les premiers utilisateurs bénéficient d'une remise de bienvenue et d'un accompagnement direct par notre équipe technique. Aucun engagement.
     </p>
 
     <div class="flex flex-col sm:flex-row gap-4 justify-center">
       {% from 'macros/button.html' import button %}
-      {{ button('Pré-inscription par courriel', href='mailto:info@dictia.ca?subject=Pré-inscription%20DictIA', variant='primary', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') }}
+      {{ button('Réserver ma démo gratuite', href='/contact', variant='primary', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') }}
+      {{ button('Pré-inscription par courriel', href='mailto:info@dictia.ca?subject=Pré-inscription%20DictIA', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') }}
       {{ button('Voir les forfaits', href='#tarifs', variant='ghost', size='lg') }}
     </div>