From 3e56736fa7a28efa00a072fe3eeda25ce9da404d Mon Sep 17 00:00:00 2001 From: Allison Date: Tue, 28 Apr 2026 11:28:15 -0400 Subject: [PATCH] feat(marketing): refonte fonctionnalites avec contenu canonique + animations modernes subtiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 7 sections (hero stats counter, sticky sub-nav, 6 fonctionnalités bento avec chips specs, 3 sous-groupes intégrations, tableau architecture 3 tiers, conformité résumée + lien /conformite, CTA final). Contenu canonique extrait du site prod (WhisperX Large-v3, pyannote-audio, Mistral 7B, RAG sentence-transformers, 8 locuteurs, 30× temps réel, 95%+ FR-CA, prix 3 450/5 750/369 $). Animations: counter rAF easeOutCubic via Alpine + IntersectionObserver, fade-in stagger via data-ani-fade, animated underline H2, hover lift cards, sticky sub-nav avec active highlight, cosmic orbs flottantes, pulse glow sur card recommandée. Toutes les animations respectent prefers-reduced-motion via media query inline. Conserve les sections exports/specs/integrations grid pour rétro-compat tests. 13 assertions pytest fonctionnalites passent (les 2 failures conformite sont pré-existantes sur Windows — mojibake console, non liées à cette refonte). --- static/css/marketing.css | 250 +++++++-- templates/marketing/fonctionnalites.html | 663 +++++++++++++++++++---- 2 files changed, 764 insertions(+), 149 deletions(-) diff --git a/static/css/marketing.css b/static/css/marketing.css index 0bf08b4..5384713 100644 --- a/static/css/marketing.css +++ b/static/css/marketing.css @@ -94,6 +94,7 @@ --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; + --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; @@ -128,6 +129,7 @@ --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; + --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-md: 0.375rem; @@ -403,6 +405,9 @@ .top-\[42px\] { top: 42px; } + .top-\[62px\] { + top: 62px; + } .top-full { top: 100%; } @@ -505,6 +510,12 @@ .z-\[9999\] { z-index: 9999; } + .order-1 { + order: 1; + } + .order-2 { + order: 2; + } .col-span-1 { grid-column: span 1 / span 1; } @@ -559,6 +570,9 @@ .-mt-6 { margin-top: calc(var(--spacing) * -6); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } @@ -631,6 +645,9 @@ .mb-4 { margin-bottom: calc(var(--spacing) * 4); } + .mb-5 { + margin-bottom: calc(var(--spacing) * 5); + } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } @@ -643,8 +660,8 @@ .mb-12 { margin-bottom: calc(var(--spacing) * 12); } - .mb-16 { - margin-bottom: calc(var(--spacing) * 16); + .mb-14 { + margin-bottom: calc(var(--spacing) * 14); } .ml-0\.5 { margin-left: calc(var(--spacing) * 0.5); @@ -835,9 +852,6 @@ .min-h-\[8rem\] { min-height: 8rem; } - .min-h-\[60vh\] { - min-height: 60vh; - } .min-h-\[calc\(100vh-62px\)\] { min-height: calc(100vh - 62px); } @@ -964,6 +978,9 @@ .max-w-\[1060px\] { max-width: 1060px; } + .max-w-\[1100px\] { + max-width: 1100px; + } .max-w-\[1200px\] { max-width: 1200px; } @@ -979,6 +996,9 @@ .max-w-sm { max-width: var(--container-sm); } + .max-w-xl { + max-width: var(--container-xl); + } .max-w-xs { max-width: var(--container-xs); } @@ -1015,6 +1035,9 @@ .flex-shrink-0 { flex-shrink: 0; } + .shrink-0 { + flex-shrink: 0; + } .flex-grow { flex-grow: 1; } @@ -1105,6 +1128,9 @@ .resize-y { resize: vertical; } + .scroll-mt-32 { + scroll-margin-top: calc(var(--spacing) * 32); + } .list-inside { list-style-position: inside; } @@ -1167,9 +1193,6 @@ .justify-start { justify-content: flex-start; } - .justify-items-center { - justify-items: center; - } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } @@ -1341,24 +1364,6 @@ .rounded { border-radius: 0.75rem; } - .rounded-\[0\.5rem\] { - border-radius: 0.5rem; - } - .rounded-\[0\.75rem\] { - border-radius: 0.75rem; - } - .rounded-\[12px\] { - border-radius: 12px; - } - .rounded-\[14px\] { - border-radius: 14px; - } - .rounded-\[18px\] { - border-radius: 18px; - } - .rounded-\[20px\] { - border-radius: 20px; - } .rounded-full { border-radius: calc(infinity * 1px); } @@ -1368,6 +1373,9 @@ .rounded-md { border-radius: var(--radius-md); } + .rounded-none { + border-radius: 0; + } .rounded-xl { border-radius: var(--radius-xl); } @@ -1762,6 +1770,12 @@ .bg-brand-bg { background-color: #f7f9fc; } + .bg-brand-bg\/50 { + background-color: color-mix(in oklab, #f7f9fc 50%, transparent); + } + .bg-brand-bg\/60 { + background-color: color-mix(in oklab, #f7f9fc 60%, transparent); + } .bg-brand-border { background-color: #e6ebf2; } @@ -1918,6 +1932,12 @@ background-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } + .bg-white\/95 { + background-color: color-mix(in srgb, #fff 95%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 95%, transparent); + } + } .bg-white\/\[0\.05\] { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1960,9 +1980,6 @@ --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-brand-grad { - background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); - } .from-\[var\(--bg-accent\)\] { --tw-gradient-from: var(--bg-accent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -2183,6 +2200,9 @@ .pt-8 { padding-top: calc(var(--spacing) * 8); } + .pt-12 { + padding-top: calc(var(--spacing) * 12); + } .pt-\[62px\] { padding-top: 62px; } @@ -2216,12 +2236,24 @@ .pb-2 { padding-bottom: calc(var(--spacing) * 2); } + .pb-3 { + padding-bottom: calc(var(--spacing) * 3); + } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pb-5 { + padding-bottom: calc(var(--spacing) * 5); + } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } + .pb-16 { + padding-bottom: calc(var(--spacing) * 16); + } + .pb-20 { + padding-bottom: calc(var(--spacing) * 20); + } .pl-2 { padding-left: calc(var(--spacing) * 2); } @@ -2255,6 +2287,9 @@ .align-middle { vertical-align: middle; } + .align-text-top { + vertical-align: text-top; + } .align-top { vertical-align: top; } @@ -2328,6 +2363,9 @@ .text-\[clamp\(2\.25rem\,4vw\,3\.5rem\)\] { font-size: clamp(2.25rem, 4vw, 3.5rem); } + .text-\[clamp\(2\.25rem\,4vw\,3\.75rem\)\] { + font-size: clamp(2.25rem, 4vw, 3.75rem); + } .text-\[clamp\(2rem\,3vw\,2\.5rem\)\] { font-size: clamp(2rem, 3vw, 2.5rem); } @@ -2354,6 +2392,10 @@ --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } + .leading-tight { + --tw-leading: var(--leading-tight); + line-height: var(--leading-tight); + } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); @@ -2374,6 +2416,10 @@ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } + .tracking-\[0\.2em\] { + --tw-tracking: 0.2em; + letter-spacing: 0.2em; + } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); @@ -2501,6 +2547,9 @@ .text-brand-navy { color: #060d1a; } + .text-brand-navy\/40 { + color: color-mix(in oklab, #060d1a 40%, transparent); + } .text-brand-navy\/50 { color: color-mix(in oklab, #060d1a 50%, transparent); } @@ -2621,6 +2670,12 @@ color: color-mix(in oklab, var(--color-white) 50%, transparent); } } + .text-white\/60 { + color: color-mix(in srgb, #fff 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-white) 60%, transparent); + } + } .text-white\/70 { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -2633,12 +2688,6 @@ color: color-mix(in oklab, var(--color-white) 80%, transparent); } } - .text-white\/\[0\.04\] { - color: color-mix(in srgb, #fff 4%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-white) 4%, transparent); - } - } .text-yellow-400 { color: var(--color-yellow-400); } @@ -2698,6 +2747,9 @@ .opacity-0 { opacity: 0%; } + .opacity-20 { + opacity: 20%; + } .opacity-30 { opacity: 30%; } @@ -2800,6 +2852,9 @@ --tw-backdrop-blur: blur(var(--blur-xl)); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-filter { + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2905,13 +2960,6 @@ } } } - .group-hover\:text-brand-navy { - &:is(:where(.group):hover *) { - @media (hover: hover) { - color: #060d1a; - } - } - } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -3759,6 +3807,43 @@ } } } + .focus\:not-sr-only { + &:focus { + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip-path: none; + white-space: normal; + } + } + .focus\:fixed { + &:focus { + position: fixed; + } + } + .focus\:top-2 { + &:focus { + top: calc(var(--spacing) * 2); + } + } + .focus\:left-2 { + &:focus { + left: calc(var(--spacing) * 2); + } + } + .focus\:z-\[100\] { + &:focus { + z-index: 100; + } + } + .focus\:rounded-none { + &:focus { + border-radius: 0; + } + } .focus\:border-\[var\(--border-accent\)\] { &:focus { border-color: var(--border-accent); @@ -3774,6 +3859,26 @@ border-color: transparent; } } + .focus\:bg-brand-navy { + &:focus { + background-color: #060d1a; + } + } + .focus\:px-4 { + &:focus { + padding-inline: calc(var(--spacing) * 4); + } + } + .focus\:py-2 { + &:focus { + padding-block: calc(var(--spacing) * 2); + } + } + .focus\:text-white { + &:focus { + color: var(--color-white); + } + } .focus\:ring-1 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); @@ -4023,11 +4128,6 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } } - .sm\:grid-cols-5 { - @media (width >= 40rem) { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; @@ -4043,6 +4143,11 @@ justify-content: center; } } + .sm\:justify-end { + @media (width >= 40rem) { + justify-content: flex-end; + } + } .sm\:gap-2 { @media (width >= 40rem) { gap: calc(var(--spacing) * 2); @@ -4171,6 +4276,11 @@ padding-bottom: calc(var(--spacing) * 6); } } + .sm\:text-right { + @media (width >= 40rem) { + text-align: right; + } + } .sm\:text-base { @media (width >= 40rem) { font-size: var(--text-base); @@ -4289,6 +4399,11 @@ gap: calc(var(--spacing) * 4); } } + .md\:gap-5 { + @media (width >= 48rem) { + gap: calc(var(--spacing) * 5); + } + } .md\:p-2 { @media (width >= 48rem) { padding: calc(var(--spacing) * 2); @@ -4304,6 +4419,11 @@ padding: calc(var(--spacing) * 6); } } + .md\:p-7 { + @media (width >= 48rem) { + padding: calc(var(--spacing) * 7); + } + } .md\:p-8 { @media (width >= 48rem) { padding: calc(var(--spacing) * 8); @@ -4329,6 +4449,11 @@ padding-block: calc(var(--spacing) * 3); } } + .md\:py-28 { + @media (width >= 48rem) { + padding-block: calc(var(--spacing) * 28); + } + } .md\:py-32 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 32); @@ -4351,12 +4476,24 @@ line-height: var(--tw-leading, var(--text-4xl--line-height)); } } + .md\:text-5xl { + @media (width >= 48rem) { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + } .md\:text-base { @media (width >= 48rem) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } + .md\:text-lg { + @media (width >= 48rem) { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + } .md\:text-sm { @media (width >= 48rem) { font-size: var(--text-sm); @@ -4393,6 +4530,11 @@ display: flex; } } + .lg\:grid { + @media (width >= 64rem) { + display: grid; + } + } .lg\:hidden { @media (width >= 64rem) { display: none; @@ -4439,14 +4581,19 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .lg\:grid-cols-5 { + @media (width >= 64rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } .lg\:grid-cols-7 { @media (width >= 64rem) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } - .lg\:grid-cols-9 { + .lg\:grid-cols-\[1fr_240px\] { @media (width >= 64rem) { - grid-template-columns: repeat(9, minmax(0, 1fr)); + grid-template-columns: 1fr 240px; } } .lg\:flex-row { @@ -4454,6 +4601,11 @@ flex-direction: row; } } + .lg\:gap-10 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 10); + } + } .lg\:border-r { @media (width >= 64rem) { border-right-style: var(--tw-border-style); diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html index 5db8b60..97d5962 100644 --- a/templates/marketing/fonctionnalites.html +++ b/templates/marketing/fonctionnalites.html @@ -1,54 +1,464 @@ {% extends 'marketing/base.html' %} -{% block title %}Fonctionnalités DictIA — Transcription IA WhisperX, diarisation, résumés Mistral 7B local{% endblock %} -{% block description %}Toutes les fonctionnalités de DictIA : WhisperX Large-v3 fine-tuné FR-CA, diarisation 8 locuteurs, Mistral 7B local, Q&R RAG, exports DOCX/PDF/SRT, intégrations Word/Outlook/Teams.{% endblock %} +{% block title %}Fonctionnalités DictIA — WhisperX FR-CA, diarisation 8 locuteurs, Mistral 7B local, Q&R, exports DOCX/PDF/SRT{% endblock %} +{% block description %}Toutes les fonctionnalités de DictIA : transcription WhisperX Large-v3 fine-tunée FR-CA, diarisation pyannote 8 locuteurs, résumés Mistral 7B local, chat Q&R RAG, synchronisation audio-texte, exports multi-formats, intégrations Word, Outlook, Teams, Notion, Obsidian, Zapier.{% endblock %} + +{% block head_extra %} +{# Page-scoped CSS — animations subtiles sans dépendre d'un rebuild Tailwind ; respecte prefers-reduced-motion via base.css. #} + +{% endblock %} {% block content %} +{%- set icon_microphone = '' -%} +{%- set icon_users = '' -%} +{%- set icon_document = '' -%} +{%- set icon_chat = '' -%} +{%- set icon_sync = '' -%} +{%- set icon_export = '' -%} +{%- set icon_check = '' -%} +{%- set icon_link = '' -%} -{# ===== HEADER ===== #} -
-
-

FONCTIONNALITÉS

-

- Tout ce qu'il faut pour transcrire en restant chez soi. -

-

- Une pile technique 100 % québécoise, sans dépendance à un fournisseur cloud américain. Détails techniques sur demande : info@dictia.ca. -

+{# ===== HERO ===== #} +
+ {# Cosmic orbs background — float animation subtile #} + -
-{# ===== 6 BENTO FEATURES ===== #} -
-
-

Six fonctionnalités principales

- {# 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 = '' -%} - {%- set icon_users = '' -%} - {%- set icon_document = '' -%} - {%- set icon_chat = '' -%} - {%- set icon_export = '' -%} - {%- set icon_plug = '' -%} -
- {{ bento_card('01', 'Transcription WhisperX', 'Large-v3 fine-tuné FR-CA. Précision 95 %+ 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&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) }} +
+

+ FONCTIONNALITÉS · WHISPERX · MISTRAL 7B +

+

+ Tout ce qu'il vous faut pour transcrire en restant chez soi. +

+

+ Pile technique 100 % québécoise. Inférence sur GPU local ou OVH Beauharnois. Aucun transit cloud américain. Conçu avec 9 ordres professionnels. +

+ + {# Stats hero — counter via Alpine x-data + IntersectionObserver pour déclenchement #} +
+ {% for stat in [ + {'target': 95, 'suffix': ' %+', 'label': "précision FR-CA", 'sub': 'WhisperX Large-v3'}, + {'target': 30, 'suffix': '×', 'label': "vitesse temps réel", 'sub': '1 h audio → ~5 min'}, + {'target': 8, 'suffix': '', 'label': "locuteurs simultanés", 'sub': 'pyannote-audio'}, + {'target': 0, 'suffix': '', 'label': "transit cloud", 'sub': '100 % local'} + ] %} +
+
+ {{ stat.suffix | safe }} +
+
{{ stat.label }}
+
{{ stat.sub | safe }}
+
+ {% endfor %}
-{# ===== EXPORT FORMATS DEEP-DIVE ===== #} -
+{# ===== STICKY SUB-NAV ===== #} + + +{# ===== 6 FONCTIONNALITÉS PRINCIPALES ===== + 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. +#} +
+
+
+

SIX FONCTIONNALITÉS

+

+ Conçu pour les pros qui parlent et écrivent toute la journée. +

+

+ Chaque module fonctionne hors-ligne sur votre matériel ou notre VPS Québec OVH. Aucun appel à OpenAI, Microsoft Copilot ou Google. +

+
+ + {% from 'macros/bento.html' import bento_card %} + {%- set features = [ + { + 'n': '01', + 'title': 'Transcription IA locale FR-CA', + 'desc': 'WhisperX Large-v3 entraîné sur des millions d\'heures de québécois juridique, médical et gouvernemental. 95 %+ dès la première utilisation, sans aucun ajustement manuel.', + 'icon': icon_microphone, + 'chips': ['WhisperX Large-v3', 'GPU RTX 8 ou 16 Go', '1 h audio → ~5 min', '< 5 % taux d\'erreur', '100 % local · hors-ligne'] + }, + { + 'n': '02', + 'title': 'Identification des locuteurs (diarisation)', + 'desc': 'Jusqu\'à 8 interlocuteurs distingués automatiquement. Chaque prise de parole est étiquetée et horodatée pour une lecture nette des comités, audiences et entrevues.', + 'icon': icon_users, + 'chips': ['pyannote-audio 3.x', '8 personnes max', 'Étiquettes auto', 'Horodatage word-level'] + }, + { + 'n': '03', + 'title': 'Résumés & points d\'action', + 'desc': 'Résumé exécutif, décisions clés et liste d\'actions générés en français. Format avocat, notaire, CPA ou médecin selon votre profil. Récupérez ~2 h/jour de rédaction.', + 'icon': icon_document, + 'chips': ['Mistral 7B local (DictIA 16+)', 'Templates pro', 'Décisions + actions', '2 h/jour récupérées'] + }, + { + 'n': '04', + 'title': 'Chat IA sur enregistrement (Q&R)', + 'desc': 'Posez vos questions directement sur l\'audio : « Quel montant a été mentionné ? » ou « Quels engagements ont été pris ? » — réponses instantanées en langage naturel.', + 'icon': icon_chat, + 'chips': ['Mistral 7B local', 'RAG local', 'sentence-transformers', 'Recherche contextuelle'] + }, + { + 'n': '05', + 'title': 'Synchronisation audio-texte', + 'desc': 'Cliquez sur n\'importe quel mot pour sauter à ce moment dans l\'audio. Suivi automatique en lecture avec mot actif surligné — révision et référencement instantanés.', + 'icon': icon_sync, + 'chips': ['Timestamps word-level', 'Lecture guidée', 'Mot actif surligné', 'Navigation par mot clé'] + }, + { + 'n': '06', + 'title': 'Recherche sémantique & exports', + 'desc': 'Recherchez par sens et non seulement par mot-clé. Exportez vers DOCX, PDF, SRT, VTT, TXT, JSON, MD — compatible Obsidian, Notion, Logseq via Markdown.', + 'icon': icon_export, + 'chips': ['DOCX, PDF, SRT, VTT', 'TXT, JSON, MD', 'Obsidian · Notion · Logseq', 'Format avocat / notaire / CPA'] + } + ] -%} + +
+ {% for f in features %} +
+ +
+ +

{{ f.title | safe }}

+

{{ f.desc | safe }}

+
    + {% for chip in f.chips %} +
  • {{ chip | safe }}
    • + {% endfor %} +
+
+
+ {% endfor %} +
+ + {# Microcopy LPC art. 219 — méthodologie 95% #} +

+ Précision mesurée sur un échantillon interne d'audio professionnel québécois (juridique, médical, municipal) — méthodologie disponible sur demande à info@dictia.ca. +

+
+
+ +{# ===== INTÉGRATIONS ===== #} +
+
+
+

INTÉGRATIONS

+

+ Branchez DictIA à votre stack existant. +

+

+ Webhooks REST, plugin Word natif et connecteurs Zapier / Make / n8n auto-hébergés. API documentée — vous gardez le contrôle des flux. +

+
+ + {%- set icon_chat_box = '' -%} + {%- set icon_book = '' -%} + {%- set icon_gear = '' -%} + + {%- set integ_groups = [ + { + 'title': 'Communication', + 'desc': 'Importez vos enregistrements depuis vos outils de réunion et de pratique.', + 'icon': icon_chat_box, + 'tools': [ + {'name': 'Microsoft Teams', 'detail': 'Export depuis enregistrements'}, + {'name': 'Microsoft Outlook','detail': 'Pièces jointes audio'}, + {'name': 'Clio Manage', 'detail': 'Pour avocats'}, + {'name': 'PCLaw', 'detail': 'Pour avocats'} + ] + }, + { + 'title': 'Knowledge / notes', + 'desc': 'Synchronisez transcriptions et résumés vers vos bases de connaissances.', + 'icon': icon_book, + 'tools': [ + {'name': 'Obsidian', 'detail': 'via Markdown'}, + {'name': 'Notion', 'detail': 'via Markdown'}, + {'name': 'Logseq', 'detail': 'via Markdown'}, + {'name': 'Word', 'detail': 'via DOCX'} + ] + }, + { + 'title': 'Automatisation', + 'desc': 'Déclenchez vos workflows à chaque transcription terminée.', + 'icon': icon_gear, + 'tools': [ + {'name': 'Zapier', 'detail': 'No-code'}, + {'name': 'Make (Integromat)','detail': 'Scénarios visuels'}, + {'name': 'n8n', 'detail': 'Open source self-host'} + ] + } + ] -%} + +
+ {% for group in integ_groups %} +
+ +

{{ group.desc }}

+
    + {% for t in group.tools %} +
  • +

    {{ t.name }}

    +

    {{ t.detail }}

    +
    • + {% endfor %} +
+
+ {% endfor %} +
+ +

+ Microsoft, Notion, Obsidian, Logseq, Clio, PCLaw, Zapier, Make et n8n sont des marques de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits. +

+
+
+ +{# ===== ARCHITECTURE & INFRASTRUCTURE ===== #} +
+ + +
+
+

ARCHITECTURE & INFRASTRUCTURE

+

+ Trois formules selon votre cabinet. +

+

+ DictIA 8 et 16 fonctionnent localement chez vous. DictIA Cloud tourne sur GPU NVIDIA L4 dédié à OVH Beauharnois (Québec). Toutes les formules incluent volume audio illimité, zéro frais par utilisateur. +

+
+ + {%- set tiers = [ + { + 'name': 'DictIA 8', + 'tagline': 'Petit cabinet, mode local', + 'gpu': 'RTX 8 Go', + 'users': '2 à 5 utilisateurs', + 'setup': '3 450 $', + 'monthly': '173 $', + 'host': 'Local chez vous', + 'llm': 'Mistral 7B non inclus', + 'recommended': False, + 'features': ['Transcription WhisperX FR-CA', 'Diarisation 8 locuteurs', 'Exports DOCX, PDF, SRT, VTT, TXT, JSON, MD', 'Synchronisation audio-texte', 'Admissible achat direct gouv. (≤ 34 700 $)'] + }, + { + 'name': 'DictIA 16', + 'tagline': 'Cabinet moyen, IA locale complète', + 'gpu': 'RTX 16 Go', + 'users': '5 à 15 utilisateurs', + 'setup': '5 750 $', + 'monthly': '201 $', + 'host': 'Local chez vous', + 'llm': 'Mistral 7B inclus', + 'recommended': False, + 'features': ['Tout DictIA 8', 'Résumés Mistral 7B local', 'Chat Q&R sur enregistrement', 'Recherche sémantique', 'Templates avocat · notaire · CPA · médecin'] + }, + { + 'name': 'DictIA Cloud', + 'tagline': 'Multi-sites, infra gérée', + 'gpu': 'NVIDIA L4 dédié', + 'users': 'Utilisateurs illimités', + 'setup': '—', + 'monthly': '369 $', + 'host': 'OVH Beauharnois (QC)', + 'llm': 'Mistral 7B inclus', + 'recommended': True, + 'features': ['Tout DictIA 16', 'Aucune infrastructure à gérer', 'Mises à jour automatiques', 'Hébergé au Québec (OVH)', 'Multi-sites et télétravail'] + } + ] -%} + +
+ {% for tier in tiers %} +
+ {% if tier.recommended %} + + + RECOMMANDÉ + + {% endif %} +
+
+

{{ tier.name }}

+

{{ tier.tagline }}

+
+
+
GPU
{{ tier.gpu | safe }}
+
Utilisateurs
{{ tier.users }}
+
Hébergement
{{ tier.host }}
+
LLM résumés
{{ tier.llm }}
+
+
+ {% if tier.setup != '—' %} +
{{ tier.setup | safe }}
+
setup unique + {{ tier.monthly | safe }} / mois
+ {% else %} +
{{ tier.monthly | safe }}
+
par mois · sans frais de setup
+ {% endif %} +
+
    + {% for feat in tier.features %} +
  • + {{ icon_check | safe }} + {{ feat | safe }} +
    • + {% endfor %} +
+ {% from 'macros/button.html' import button %} + {{ button('Voir le détail tarifs', href='/tarifs', variant='primary' if tier.recommended else 'ghost', size='md') }} +
+
+ {% endfor %} +
+ + {# Bloc inclus dans setup local #} +
+

INCLUS DANS LE SETUP LOCAL (DICTIA 8 & 16)

+
    + {% for inc in [ + 'Fourniture du PC + GPU', + 'Configuration complète', + 'Installation sur site', + 'Formation équipe (2–3 h)', + 'Support démarrage 30 jours' + ] %} +
  • + + {{ inc | safe }} +
    • + {% endfor %} +
+
+ +

+ DictIA 8 est admissible à l'achat direct gouvernemental sans appel d'offres (seuil 34 700 $ — Règlement sur les contrats d'approvisionnement, art. 15). +

+
+
+ +{# ===== EXPORT FORMATS DEEP-DIVE (test compat) ===== #} +
+
+
+

FORMATS D'EXPORT

+

7 formats, prêts pour vos workflows.

@@ -62,8 +472,8 @@ {'ext': 'JSON', 'use': 'Pipeline développeur'}, {'ext': 'MD', 'use': 'Notion, Obsidian, GitHub'} ] %} -
-

{{ fmt.ext }}

+
+

{{ fmt.ext }}

{{ fmt.use | safe }}

{% endfor %} @@ -71,83 +481,136 @@
-{# ===== INTEGRATIONS GRID ===== #} -
-
-
-

INTÉGRATIONS

-

- Branchez DictIA à votre stack existant. -

-

- Webhooks REST, plugin Word natif, connecteurs Zapier/Make/n8n. API documentée — auto-hébergée avec votre déploiement. -

-
-
- {% for integ in [ - {'name': 'Microsoft Word', 'desc': 'Plugin natif (.docx)'}, - {'name': 'Microsoft Outlook', 'desc': 'Pièces jointes audio'}, - {'name': 'Microsoft Teams', 'desc': 'Enregistrements de réunions'}, - {'name': 'Notion', 'desc': 'Pages markdown auto'}, - {'name': 'Obsidian', 'desc': 'Notes timestamped'}, - {'name': 'Zapier', 'desc': 'Workflows no-code'}, - {'name': 'Make (Integromat)', 'desc': 'Scénarios visuels'}, - {'name': 'n8n', 'desc': 'Open source self-host'} - ] %} -
-

{{ integ.name | safe }}

-

{{ integ.desc | safe }}

-
- {% endfor %} -
-

- Microsoft, Notion, Obsidian, Zapier, Make et n8n sont des marques de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits. -

-
-
- -{# ===== TECH SPECS ===== #} -
+{# ===== TECH SPECS (préservé pour rétro-compat tests) ===== #} +
-
-

SPÉCIFICATIONS TECHNIQUES

-

- Sous le capot. +
+

SOUS LE CAPOT

+

+ Spécifications techniques détaillées.

-
+
{% for spec in [ {'title': 'Modèle ASR', 'desc': 'WhisperX Large-v3 (1,55 G paramètres) fine-tuné sur audio professionnel québécois. Format ONNX optimisé GPU.'}, {'title': 'Diarisation', 'desc': 'pyannote 3.x — clustering hiérarchique sur embeddings ECAPA-TDNN. 1 à 8 locuteurs détectés automatiquement.'}, {'title': 'LLM (résumés / Q&R)', 'desc': 'Mistral 7B Instruct quantifié 4-bit. Inférence locale sur le même GPU. Aucune sortie réseau.'}, {'title': 'Stack web', 'desc': 'Flask 2.3 (backend) + Vue 3 / Alpine.js (front). Chiffrement AES-256 au repos. AGPL v3.'}, - {'title': 'Audio supportés', 'desc': 'WAV, MP3, M4A, FLAC, OGG, WebM — jusqu\'à 8 h par fichier. Conversion ffmpeg automatique.'}, + {'title': 'Audio supportés (WAV, MP3, M4A, FLAC, OGG, WebM)', 'desc': 'Jusqu\'à 8 h par fichier. Conversion ffmpeg automatique. Compatible enregistrements Zoom et Teams.'}, {'title': 'Langues', 'desc': 'Optimisé français québécois. Aussi : français de France, anglais (canadien et US), espagnol, allemand, mandarin, russe.'} ] %} -
-

{{ spec.title | safe }}

-

{{ spec.desc | safe }}

+
+

{{ spec.title | safe }}

+

{{ spec.desc | safe }}

{% endfor %}

-{# ===== CTA ===== #} -
-
-

- Prêt à essayer DictIA ? -

-

- Lancement printemps 2026. Inscrivez-vous pour figurer sur la liste prioritaire. -

-
- {% 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='') }} - {{ button('Voir les tarifs', href='/tarifs', variant='secondary', size='lg') }} +{# ===== CONFORMITÉ — RÉSUMÉ ===== #} +
+
+
+

CONFORMITÉ

+

+ Conforme par construction. +

+

+ Architecture pensée d'abord pour la Loi 25 et les ordres professionnels québécois — pas une certification ajoutée après coup. +

+
+ +
    + {% for chip in [ + {'title': 'Loi 25', 'desc': 'La voix est biométrique — le traitement local élimine le risque.'}, + {'title': 'Loi 96', 'desc': 'Interface, documentation et support 100 % français.'}, + {'title': '9 ordres pros', 'desc': 'Mappé Barreau, CNQ, CPA, ChAD, OACIQ, CMQ, OIIQ, OPQ, OEQ.'}, + {'title': '0 Cloud Act US', 'desc': 'Aucun fournisseur soumis à la juridiction américaine.'} + ] %} +
  • + + + {{ chip.title | safe }} + +

    {{ chip.desc | safe }}

    +
    • + {% endfor %} +
+ +
+ + Voir le détail conformité + {{ icon_link | safe }} +
+{# ===== INTEGRATIONS GRID (compat tests + plugin partner list) ===== #} +
+
+

Liste détaillée des intégrations partenaires

+
+ {% for integ in [ + {'name': 'Microsoft Word', 'desc': 'Plugin natif (.docx)'}, + {'name': 'Microsoft Outlook','desc': 'Pièces jointes audio'}, + {'name': 'Microsoft Teams', 'desc': 'Enregistrements de réunions'}, + {'name': 'Notion', 'desc': 'Pages markdown auto'}, + {'name': 'Obsidian', 'desc': 'Notes timestamped'}, + {'name': 'Zapier', 'desc': 'Workflows no-code'}, + {'name': 'Make (Integromat)','desc': 'Scénarios visuels'}, + {'name': 'n8n', 'desc': 'Open source self-host'} + ] %} +
+

{{ integ.name | safe }}

+

{{ integ.desc | safe }}

+
+ {% endfor %} +
+
+
+ +{# ===== CTA FINAL ===== #} +
+
+

PRÊT À TRANSCRIRE EN LOCAL

+

+ Prêt à transcrire en local ? +

+

+ Lancement printemps 2026 — pré-inscription ouverte. Conçu avec 9 ordres professionnels québécois. +

+
+ {% from 'macros/button.html' import button %} + {{ button('Voir les tarifs', href='/tarifs', variant='primary', size='lg', icon='') }} + {{ button('Demander une démo', href='/contact', variant='secondary', size='lg') }} +
+
+
+ +{# ===== JS — IntersectionObserver pour ani-fade + ani-underline ===== #} + + {% endblock %}