dictia-public/templates/marketing/landing.html

{% extends 'marketing/base.html' %}

{% block title %}Transcription IA conforme Loi 25 — DictIA pour avocats, CPA, secteur public{% endblock %}
{% 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 ===== #}
<section class="relative overflow-hidden bg-brand-navy text-white py-24 md:py-32" aria-labelledby="hero-title">
  {# 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 #}
    <div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full opacity-100"
         style="background: radial-gradient(circle, rgba(0,98,255,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
    {# Orb 2 — cyan, mid-right #}
    <div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
         style="background: radial-gradient(circle, rgba(0,189,216,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
    {# Orb 3 — accent green, bottom-left #}
    <div class="absolute bottom-1/4 left-1/3 w-[400px] h-[400px] rounded-full"
         style="background: radial-gradient(circle, rgba(0,200,150,0.11) 0%, transparent 60%); filter: blur(40px);"></div>
    {# Subtle grid overlay (FlexiHub signature) #}
    <div class="absolute inset-0"
         style="background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px;"></div>
    {# Horizontal accent line — gradient blue to cyan to transparent #}
    <div class="absolute top-1/3 left-0 right-0 h-px"
         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">
    <div class="max-w-3xl mx-auto text-center">
      {# 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>

      {# 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>

      {# Sub-headline — ≤25 words, value prop #}
      <p class="text-lg text-white/70 max-w-2xl mx-auto 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>

      {# Dual CTA — primary (demo) + secondary ghost (pricing) #}
      <div class="flex flex-col sm:flex-row gap-3 justify-center 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>

      {# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
      <p class="mt-8 text-sm text-white/70 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="mx-2 text-white/30">·</span>
        <span>Pré-inscription ouverte</span>
        <span class="mx-2 text-white/30">·</span>
        <span>Lancement printemps 2026</span>
      </p>
    </div>
  </div>
</section>

{# ===== TRUST BAR ===== #}
<section class="bg-white py-16 border-y border-brand-border" aria-labelledby="trust-bar-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <p id="trust-bar-title" class="eyebrow text-center text-brand-navy/60 mb-8">
      MAPPÉ AUX 9 ORDRES PROFESSIONNELS QUÉBÉCOIS
    </p>

    {# 9 monogram placeholders — stylized, not official logos (licensing) #}
    <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-6 items-center justify-items-center mb-16">
      {% for ordre in [
        ('Barreau du Québec', 'BAR'),
        ('Chambre des notaires du Québec', 'CNQ'),
        ('CPA Québec', 'CPA'),
        ('ChAD — Chambre de l\'assurance de dommages', 'ChAD'),
        ('OACIQ — Courtage immobilier', 'OACIQ'),
        ('CMQ — Médecins', 'CMQ'),
        ('OIIQ — Infirmières', 'OIIQ'),
        ('OPQ — Pharmaciens', 'OPQ'),
        ('OEQ — Ergothérapeutes', 'OEQ')
      ] %}
      <div class="flex flex-col items-center group" title="{{ ordre[0] }}">
        <div class="w-12 h-12 rounded-full bg-brand-grad flex items-center justify-center font-black text-white text-sm shadow-cta opacity-50 group-hover:opacity-100 transition-opacity duration-300">
          {{ ordre[1] }}
        </div>
        <p class="text-xs mt-2 text-brand-navy/70 group-hover:text-brand-navy transition-colors duration-300">{{ ordre[0] }}</p>
      </div>
      {% endfor %}
    </div>

    {# 4 KPI metrics — defensible numbers with footnote attribution #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      {% for kpi in [
        ('~5 min', 'par heure d\'audio', 'Traitement local 30× temps réel sur GPU RTX'),
        ('95&nbsp;%+', 'précision FR-CA', 'WhisperX Large-v3 — test interne 2026-Q1'),
        ('0&nbsp;$', 'frais par utilisateur', 'Modèle par serveur, volume illimité'),
        ('100&nbsp;%', 'local au Québec', 'OVH Beauharnois ou vos serveurs')
      ] %}
      <div class="text-center">
        <div class="text-4xl font-black grad-text mb-2">{{ kpi[0] | safe }}</div>
        <div class="text-sm font-semibold text-brand-navy mb-1">{{ kpi[1] }}</div>
        <div class="text-xs text-brand-navy/60">{{ kpi[2] }}</div>
      </div>
      {% endfor %}
    </div>

    {# Footnote — discloses methodology for the 95% claim (LPC art. 219 hygiene) #}
    <p class="text-xs text-brand-navy/70 text-center mt-8 max-w-2xl mx-auto">
      Précision mesurée sur un échantillon interne d'audio professionnel québécois (juridique, médical, municipal) — méthodologie disponible sur demande à <a href="mailto:info@dictia.ca" class="hover:text-brand-navy">info@dictia.ca</a>.
    </p>
  </div>
</section>

{# ===== PROBLÈME (P de PAS) ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="probleme-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">LE PROBLÈME — TRANSCRIPTION CLOUD</p>
      <h2 id="probleme-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
        Vos réunions confidentielles dans Teams Copilot ou Otter.ai
        <span class="grad-text">violent la Loi&nbsp;25</span>.
      </h2>
      <p class="text-lg text-brand-navy/70">
        Le transfert de données vocales hors-Québec sans consentement explicite expose les professionnels réglementés à des sanctions disciplinaires de leurs ordres et à des amendes CAI jusqu'à 25&nbsp;M$ ou 4&nbsp;% du chiffre d'affaires mondial.
      </p>
    </div>

    {# 3 problem cards on white surface — Cloud Act, Loi 25, Sanctions #}
    <div class="grid md:grid-cols-3 gap-6 mt-12">
      {% for card in [
        ('Cloud Act', 'Loi américaine 2018', 'Microsoft, Google et OpenAI sont soumis au Cloud Act. Vos données peuvent être saisies par les autorités américaines sans votre consentement ni notification — y compris les enregistrements de vos réunions client.',
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" aria-hidden="true"><path d="M12 3v18"/><path d="M5 7h14"/><path d="M5 7l-2 6a4 4 0 0 0 8 0L9 7"/><path d="M19 7l2 6a4 4 0 0 1-8 0l2-6"/><path d="M8 21h8"/></svg>'),
        ('Loi 25 — biométrie', 'Sanctions CAI jusqu\'à 25&nbsp;M$', 'La voix est une donnée biométrique au sens des articles 44-45 de la LCCJTI et un renseignement sensible au sens de la Loi 25 (art.&nbsp;12 LSP). Tout traitement nécessite un consentement explicite, une déclaration préalable à la CAI et un transfert vers un territoire offrant une protection équivalente — ce que les États-Unis n\'offrent pas.',
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>'),
        ('Sanctions disciplinaires', '~250&nbsp;000 pros réglementés QC (CIQ)', 'Les ordres professionnels québécois — au premier rang desquels le Barreau, la Chambre des notaires et CPA Québec — exigent une obligation stricte de confidentialité. Le transfert de données client hors-juridiction sans consentement explicite peut être qualifié de manquement, jusqu\'à la radiation pour les fautes graves.',
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>')
      ] %}
      <article class="bg-white p-6 rounded border border-brand-border">
        <div class="grad-text mb-4" aria-hidden="true">{{ card[3] | safe }}</div>
        <h3 class="text-lg font-bold mb-1 text-brand-navy">{{ card[0] }}</h3>
        <p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-3 font-semibold">{{ card[1] | safe }}</p>
        <p class="text-sm text-brand-navy/70 leading-relaxed">{{ card[2] | safe }}</p>
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== SOLUTION (S de PAS) ===== #}
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="solution-title">
  {# Single subtle orb in solution bg — less busy than hero #}
  <div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
       style="background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 60%); filter: blur(60px);"></div>

  <div class="relative max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">LA SOLUTION — DICTIA</p>
      <h2 id="solution-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
        Conforme <span class="grad-text">par design</span>, pas par défaut.
      </h2>
      <p class="text-lg text-white/70">
        DictIA reproduit la précision des outils cloud — WhisperX Large-v3 + Mistral 7B — mais avec une architecture où vos données ne quittent jamais vos murs ou nos serveurs OVH Beauharnois.
      </p>
    </div>

    {# 3 solution pillars — dark cards with grad-bg icon corners #}
    <div class="grid md:grid-cols-3 gap-6">
      {% for pillar in [
        ('100&nbsp;% local', 'Vos données ne sortent jamais de vos murs. Inférence GPU sur place ou VPS Québec OVH Beauharnois — vous gardez le contrôle, l\'audit, et les clés.'),
        ('Conforme Loi&nbsp;25', 'Audit trail intégré (qui a écouté quoi, quand). Déclaration CAI prête. Consentement explicite tracé pour chaque enregistrement. Code source AGPL v3 — transparence vérifiable.'),
        ('Précision FR-CA', 'WhisperX Large-v3 fine-tuné français québécois. Diarisation pyannote 8 locuteurs. Résumés Mistral 7B local — aucune connexion OpenAI/Google/Microsoft.')
      ] %}
      <article class="bg-white/[0.05] backdrop-blur-sm p-6 rounded border border-white/[0.08]">
        <div class="w-10 h-10 grad-bg rounded-none mb-4 flex items-center justify-center text-white shadow-cta" 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-5 h-5"><path d="M5 13l4 4L19 7"/></svg>
        </div>
        <h3 class="text-lg font-bold mb-2 text-white">{{ pillar[0] | safe }}</h3>
        <p class="text-sm text-white/70 leading-relaxed">{{ pillar[1] | safe }}</p>
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== BENTO FEATURES ===== #}
<section class="bg-white py-20" aria-labelledby="bento-title">
  <div class="max-w-[1060px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">FONCTIONNALITÉS</p>
      <h2 id="bento-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black text-brand-navy">
        Tout ce dont vous avez besoin, <span class="grad-text">rien que vous n'ayez besoin</span>.
      </h2>
    </div>

    {# NOTE: bento card content is duplicated between landing.html and fonctionnalites.html.
       When editing, sync both files. Future refactor: extract to _partials/_bento_features.html.
       Icon SVGs (heroicons-style outline) are inlined directly because the macro renders `icon | safe`. #}
    {% from 'macros/bento.html' import bento_card %}
    {%- set icon_microphone = '<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" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>' -%}
    {%- set icon_users = '<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" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' -%}
    {%- set icon_document = '<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" 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="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>' -%}
    {%- set icon_chat = '<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" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' -%}
    {%- set icon_export = '<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" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' -%}
    {%- set icon_plug = '<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" aria-hidden="true"><path d="M9 2v6"/><path d="M15 2v6"/><path d="M5 8h14v4a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5z"/><path d="M12 17v5"/></svg>' -%}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[1.5px] bg-brand-border rounded overflow-hidden">
      {{ bento_card('01', 'Transcription WhisperX', 'Large-v3 fine-tuné FR-CA. Précision 95&nbsp;%+ sur réunions, dictées, audiences (méthodologie disponible sur demande).', icon_microphone) }}
      {{ bento_card('02', 'Diarisation 8 locuteurs', 'pyannote sépare automatiquement les intervenants. Identification par embeddings vocaux.', icon_users) }}
      {{ bento_card('03', 'Résumés Mistral 7B', 'IA locale génère résumés, points d\'action et procès-verbaux. Aucune connexion cloud.', icon_document) }}
      {{ bento_card('04', 'Q&amp;R sur enregistrement', 'Posez des questions à vos réunions. RAG local sur embeddings sentence-transformers.', icon_chat) }}
      {{ bento_card('05', 'Exports multiples', 'DOCX, PDF, SRT, VTT, TXT, JSON, MD. Formats avocat, notaire, CPA.', icon_export) }}
      {{ bento_card('06', 'Intégrations', 'Word, Outlook, Teams, Notion, Obsidian, Zapier, Make, n8n.', icon_plug) }}
    </div>
  </div>
</section>

{# ===== PRICING ===== #}
<section class="bg-brand-bg py-20" id="tarifs" aria-labelledby="pricing-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">TARIFS</p>
      <h2 id="pricing-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        Choisissez votre formule.
      </h2>
      <p class="text-lg text-brand-navy/70">
        Tous les forfaits incluent WhisperX Large-v3, volume illimité et zéro frais par utilisateur. Prix en CAD, taxes en sus (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%).
      </p>
    </div>

    {% include 'marketing/_partials/_pricing_tiers.html' %}

    {# 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>
      <h3 id="roi-title" class="text-2xl font-black text-center mb-6 text-brand-navy">Combien DictIA peut vous faire économiser&nbsp;?</h3>
      <div class="grid sm:grid-cols-3 gap-4 mb-6">
        <label class="flex flex-col">
          <span class="text-xs font-semibold mb-1 text-brand-navy">Utilisateurs</span>
          <input type="range" x-model.number="users" min="1" max="25" step="1" class="accent-brand-b1" aria-label="Nombre d'utilisateurs">
          <span class="text-sm text-brand-navy/70" x-text="users + ' utilisateur' + (users > 1 ? 's' : '')"></span>
        </label>
        <label class="flex flex-col">
          <span class="text-xs font-semibold mb-1 text-brand-navy">Heures audio / jour</span>
          <input type="range" x-model.number="hours" min="0.5" max="4" step="0.5" class="accent-brand-b1" aria-label="Heures d'audio par jour">
          <span class="text-sm text-brand-navy/70" x-text="hours + ' h/jour'"></span>
        </label>
        <label class="flex flex-col">
          <span class="text-xs font-semibold mb-1 text-brand-navy">Tarif horaire ($)</span>
          <input type="range" x-model.number="rate" min="50" max="500" step="25" class="accent-brand-b1" aria-label="Tarif horaire en dollars">
          <span class="text-sm text-brand-navy/70" x-text="rate + ' $/h'"></span>
        </label>
      </div>
      <div class="text-center pt-6 border-t border-brand-border">
        <p class="text-sm text-brand-navy/70 mb-2">Économies estimées par an</p>
        <p class="text-5xl font-black grad-text" aria-live="polite" aria-atomic="true"
           x-text="savings.toLocaleString('fr-CA') + ' $'"></p>
        <p class="text-sm text-brand-navy/70 mt-2"
           x-text="payback === null ? 'Payable dès la première année' : (payback < 1 ? 'Payback : moins d\'un mois' : 'Payback : ' + Math.round(payback) + ' mois')"></p>
      </div>
      <p class="text-xs text-brand-navy/70 mt-6 text-center">
        Hypothèses&nbsp;: 80&nbsp;% du temps de transcription manuelle économisé, 220 jours ouvrables/an, comparé à DictIA 16 (5&nbsp;750&nbsp;$ + 201&nbsp;$/mois). Estimation à titre indicatif.
      </p>
    </div>
  </div>
</section>

{# ===== COMPARATIF ===== #}
<section class="bg-white py-20" aria-labelledby="comparatif-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-3xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">COMPARATIF</p>
      <h2 id="comparatif-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        DictIA face aux solutions cloud américaines.
      </h2>
      <p class="text-lg text-brand-navy/70">
        Comparaison factuelle au 2026-04-27. Sources&nbsp;: politiques de confidentialité publiques + grilles tarifaires officielles. Détails sur demande&nbsp;: <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
      </p>
    </div>

    <div class="overflow-x-auto rounded border border-brand-border">
      <table class="w-full min-w-[720px] text-sm">
        <caption class="sr-only">Comparaison DictIA, Microsoft Teams Premium, Otter.ai Business, Whisper local sur 6 critères</caption>
        <thead class="bg-brand-bg">
          <tr>
            <th scope="col" class="text-left p-4 font-bold text-brand-navy">Critère</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">DictIA</th>
            <th scope="col" class="p-4 font-bold text-brand-navy/70">MS Teams Premium</th>
            <th scope="col" class="p-4 font-bold text-brand-navy/70">Otter.ai Business</th>
            <th scope="col" class="p-4 font-bold text-brand-navy/70">Whisper local (DIY)</th>
          </tr>
        </thead>
        {# Status SVGs — check (green), x (red), warning (amber). `aria-label` preserves the meaning for AT users. #}
        {%- set svg_check = '<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 inline-block flex-shrink-0 text-brand-b3" aria-label="Conforme" role="img"><path d="M5 13l4 4L19 7"/></svg>' -%}
        {%- set svg_x = '<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 inline-block flex-shrink-0 text-red-500" aria-label="Non conforme" role="img"><path d="M6 18L18 6M6 6l12 12"/></svg>' -%}
        {%- set svg_warn = '<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 inline-block flex-shrink-0 text-amber-500" aria-label="Partiel" role="img"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>' -%}
        <tbody class="divide-y divide-brand-border">
          {% for row in [
            {
              'critere': 'Conforme Loi&nbsp;25 sans transfert hors-Québec',
              'dictia': {'status': 'check', 'text': 'Hébergement OVH Beauharnois'},
              'teams':  {'status': 'x',     'text': 'Soumis Cloud Act (US)'},
              'otter':  {'status': 'x',     'text': 'Hébergement US'},
              'whisper':{'status': 'check', 'text': 'Aucun transfert (local)'}
            },
            {
              'critere': 'Souveraineté hors Cloud Act US',
              'dictia': {'status': 'check', 'text': 'Aucune exposition'},
              'teams':  {'status': 'x',     'text': 'Microsoft = entité US'},
              'otter':  {'status': 'x',     'text': 'Otter.ai Inc. = US'},
              'whisper':{'status': 'check', 'text': 'Local'}
            },
            {
              'critere': 'WhisperX Large-v3 fine-tuné FR-CA',
              'dictia': {'status': 'check', 'text': 'FR-CA optimisé'},
              'teams':  {'status': 'warn',  'text': 'FR générique (FR-FR)'},
              'otter':  {'status': 'x',     'text': 'Anglais privilégié'},
              'whisper':{'status': 'warn',  'text': 'FR générique de base'}
            },
            {
              'critere': 'Diarisation jusqu\'à 8 locuteurs (pyannote)',
              'dictia': {'status': 'check', 'text': 'Inclus par défaut'},
              'teams':  {'status': 'warn',  'text': 'Limité ~6 (Premium)'},
              'otter':  {'status': 'warn',  'text': 'Variable selon le forfait'},
              'whisper':{'status': 'x',     'text': 'Non incluse'}
            },
            {
              'critere': 'Coût mensuel par utilisateur',
              'dictia': {'status': None, 'text': '0&nbsp;$ (forfait fixe)'},
              'teams':  {'status': None, 'text': '~14&nbsp;$ CAD (Premium)'},
              'otter':  {'status': None, 'text': '~20&nbsp;$ US (Business)'},
              'whisper':{'status': None, 'text': '0&nbsp;$ (mais GPU&nbsp;+ DevOps requis)'}
            },
            {
              'critere': 'Audit trail intégré (Loi&nbsp;25 art.&nbsp;3.5)',
              'dictia': {'status': 'check', 'text': 'Inclus par défaut'},
              'teams':  {'status': 'warn',  'text': 'Via M365 Audit séparé'},
              'otter':  {'status': 'warn',  'text': 'Logs basiques seulement'},
              'whisper':{'status': 'x',     'text': 'À développer soi-même'}
            }
          ] %}
          {%- set status_svg = {'check': svg_check, 'x': svg_x, 'warn': svg_warn} -%}
          <tr class="hover:bg-brand-bg/50 transition-colors">
            <th scope="row" class="text-left p-4 font-semibold text-brand-navy/80">{{ row.critere | safe }}</th>
            <td class="p-4 text-center font-semibold text-brand-navy">
              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-none bg-brand-b3/10 text-brand-navy">
                {%- if row.dictia.status -%}{{ status_svg[row.dictia.status] | safe }}{%- endif -%}
                <span>{{ row.dictia.text | safe }}</span>
              </span>
            </td>
            <td class="p-4 text-center text-brand-navy/70">
              <span class="inline-flex items-center gap-1.5">
                {%- if row.teams.status -%}{{ status_svg[row.teams.status] | safe }}{%- endif -%}
                <span>{{ row.teams.text | safe }}</span>
              </span>
            </td>
            <td class="p-4 text-center text-brand-navy/70">
              <span class="inline-flex items-center gap-1.5">
                {%- if row.otter.status -%}{{ status_svg[row.otter.status] | safe }}{%- endif -%}
                <span>{{ row.otter.text | safe }}</span>
              </span>
            </td>
            <td class="p-4 text-center text-brand-navy/70">
              <span class="inline-flex items-center gap-1.5">
                {%- if row.whisper.status -%}{{ status_svg[row.whisper.status] | safe }}{%- endif -%}
                <span>{{ row.whisper.text | safe }}</span>
              </span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <p class="text-xs text-brand-navy/70 mt-6 text-center max-w-3xl mx-auto">
      Comparatif établi à partir de sources publiques (politiques de confidentialité, grilles tarifaires officielles, documentation produit) au 2026-04-27. Microsoft Teams Premium et Otter.ai sont des marques déposées de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits.
    </p>
  </div>
</section>

{# ===== CONFORMITÉ FORTERESSE ===== #}
<section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="conformite-title">
  {# Subtle decorative orb — green this time, like the Solution section #}
  <div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
       style="background: radial-gradient(circle, rgba(0,200,150,0.07) 0%, transparent 60%); filter: blur(60px);"></div>

  <div class="relative max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">CONFORMITÉ — FORTERESSE QUÉBÉCOISE</p>
      <h2 id="conformite-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
        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>.
      </p>
    </div>

    {# 4 conformity pillars — dark cards with grad-bg icon corners (matches Solution pillars style).
       Icons (heroicons-style outline): map-pin (Québec), scale (Loi 25), building-library (LGGRI), code-bracket (AGPL). #}
    {%- set svg_pin = '<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" 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>' -%}
    {%- set svg_scale = '<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" aria-hidden="true"><path d="M12 3v18"/><path d="M5 7h14"/><path d="M5 7l-2 6a4 4 0 0 0 8 0L9 7"/><path d="M19 7l2 6a4 4 0 0 1-8 0l2-6"/><path d="M8 21h8"/></svg>' -%}
    {%- set svg_building = '<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" aria-hidden="true"><path d="M3 21h18"/><path d="M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/><path d="M9 11h.01"/><path d="M15 11h.01"/></svg>' -%}
    {%- set svg_code = '<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" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="14" y1="4" x2="10" y2="20"/></svg>' -%}
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      {% for card in [
        {
          'icon': svg_pin,
          'title': 'Hébergement OVH Beauharnois',
          'desc': 'Centre de données opéré par OVHcloud Canada en territoire québécois. Conformité documentée selon les services (ISO&nbsp;27001, SOC&nbsp;2 selon le périmètre). Détails sur demande.'
        },
        {
          'icon': svg_scale,
          'title': 'Mappé Loi&nbsp;25 (LPRPSP)',
          'desc': 'Audit trail art.&nbsp;3.5, EFVP préparée art.&nbsp;3.3, registre des consentements art.&nbsp;14. Modèles de déclaration CAI fournis.'
        },
        {
          'icon': svg_building,
          'title': 'Compatible Cadre IA secteur public',
          'desc': 'DictIA est conçu pour s\'inscrire dans le cadre de gestion des systèmes d\'IA du secteur public québécois (LGGRI). Documentation détaillée sur demande.'
        },
        {
          'icon': svg_code,
          'title': 'Code source AGPL&nbsp;v3 vérifiable',
          'desc': 'Architecture entièrement auditable sur <a href="https://gitea.innova-ai.ca/Innova-AI/dictia-public" target="_blank" rel="noopener" class="underline hover:text-white">Gitea public</a>. Aucune boîte noire. Vos auditeurs peuvent examiner chaque ligne.'
        }
      ] %}
      <article class="bg-white/[0.05] backdrop-blur-sm p-6 rounded border border-white/[0.08]">
        <div class="w-10 h-10 grad-bg rounded-none mb-4 flex items-center justify-center text-white shadow-cta" aria-hidden="true">{{ card.icon | safe }}</div>
        <h3 class="text-lg font-bold mb-2 text-white">{{ card.title | safe }}</h3>
        <p class="text-sm text-white/80 leading-relaxed">{{ card.desc | safe }}</p>
      </article>
      {% endfor %}
    </div>

    <div class="text-center mt-10">
      <p class="text-sm text-white/70">
        Lancement prévu&nbsp;: <strong class="text-white">printemps 2026</strong>. Pré-inscription ouverte.
      </p>
    </div>
  </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">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">TÉMOIGNAGES</p>
      <h2 id="testimonials-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        Premiers cabinets pilotes interviewés au printemps&nbsp;2026.
      </h2>
      <p class="text-lg text-brand-navy/70">
        Trois pilotes confidentiels en cours&nbsp;: un cabinet juridique, un cabinet CPA, une municipalité. Témoignages publiés ici dès l'aboutissement des entrevues, accompagnés d'une métrique vérifiable.
      </p>
    </div>

    <div class="grid md:grid-cols-3 gap-6">
      {% for t in testimonials %}
      <article class="bg-white p-6 rounded border border-brand-border flex flex-col items-center text-center"
               aria-label="Témoignage {{ t.placeholder_label }} à venir">
        <div class="w-16 h-16 rounded-full grad-bg flex items-center justify-center mb-4 shadow-cta text-white" aria-hidden="true">
          {%- if t.persona == 'avocat' -%}
            <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-7 h-7"><path d="M12 3v18"/><path d="M5 7h14"/><path d="M5 7l-2 6a4 4 0 0 0 8 0L9 7"/><path d="M19 7l2 6a4 4 0 0 1-8 0l2-6"/><path d="M8 21h8"/></svg>
          {%- elif t.persona == 'cpa' -%}
            <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-7 h-7"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>
          {%- elif t.persona == 'municipal' -%}
            <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-7 h-7"><path d="M3 21h18"/><path d="M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/><path d="M9 11h.01"/><path d="M15 11h.01"/></svg>
          {%- endif -%}
        </div>
        <p class="text-sm font-bold text-brand-navy mb-1">{{ t.placeholder_label | safe }}</p>
        <p class="text-xs text-brand-navy/70 mb-4">Témoignage à venir &middot; {{ t.expected | safe }}</p>
        <p class="text-sm text-brand-navy/70 italic">
          « Citation et métrique publiées après validation par le pilote. »
        </p>
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== FAQ ===== #}
<section class="bg-white py-20" aria-labelledby="faq-title">
  <div class="max-w-[820px] mx-auto px-6">
    <div class="text-center mb-12">
      <p class="eyebrow grad-text mb-4">FAQ</p>
      <h2 id="faq-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        Vos questions les plus fréquentes.
      </h2>
      <p class="text-lg text-brand-navy/70">
        Une question qui n'est pas couverte ici&nbsp;? Écrivez-nous&nbsp;:
        <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
      </p>
    </div>

    <div class="divide-y divide-brand-border border-y border-brand-border" role="list">
      {% for item in faq %}
      <div x-data="{ open: false }" class="py-2" role="listitem">
        <h3>
          <button type="button"
                  class="w-full flex items-center justify-between gap-4 py-4 text-left hover:bg-brand-bg/50 transition-colors rounded-none px-2 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
                  @click="open = !open"
                  :aria-expanded="open.toString()"
                  aria-controls="faq-panel-{{ loop.index }}">
            <span class="font-semibold text-brand-navy text-base">{{ item.q | safe }}</span>
            <span class="grad-text text-2xl flex-shrink-0 transition-transform"
                  :class="open ? 'rotate-45' : ''" aria-hidden="true">+</span>
          </button>
        </h3>
        <div id="faq-panel-{{ loop.index }}"
             x-show="open"
             x-transition.opacity.duration.200ms>
          <p class="px-2 pb-4 text-sm text-brand-navy/80 leading-relaxed">{{ item.a | safe }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  {# Schema.org FAQPage JSON-LD for SEO/GEO — inline so it travels with this page only #}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {%- for item in faq -%}
      {
        "@type": "Question",
        "name": {{ (item.q | striptags | replace('&nbsp;', ' '))|tojson }},
        "acceptedAnswer": {
          "@type": "Answer",
          "text": {{ (item.a | striptags | replace('&nbsp;', ' '))|tojson }}
        }
      }{{ "," if not loop.last }}
      {%- endfor -%}
    ]
  }
  </script>
</section>

{# ===== CTA FINAL ===== #}
<section class="relative bg-brand-navy text-white py-24 overflow-hidden" aria-labelledby="cta-title">
  {# Two warm cosmic orbs to mirror the Hero — visual closure of the page #}
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <div class="absolute top-1/4 left-1/3 w-[500px] h-[500px] rounded-full"
         style="background: radial-gradient(circle, rgba(0,98,255,0.14) 0%, transparent 60%); filter: blur(50px);"></div>
    <div class="absolute bottom-1/4 right-1/3 w-[450px] h-[450px] rounded-full"
         style="background: radial-gradient(circle, rgba(0,200,150,0.10) 0%, transparent 60%); filter: blur(50px);"></div>
  </div>

  <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>.
    </h2>
    <p class="text-lg text-white/80 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('Voir les forfaits', href='#tarifs', variant='ghost', size='lg') }}
    </div>

    <p class="text-xs text-white/70 mt-8">
      Pré-inscription par courriel jusqu'à l'ouverture de la plateforme. Inscription en ligne disponible dès le lancement.
    </p>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="/static/js/roi_calculator.js" defer></script>
{% endblock %}