fix(marketing): trust bar accuracy + WCAG AA contrast + LPC art. 219 hygiene

- Critical (C1): align 9-ordre list with dictia.ca canonical (Barreau, CNQ,
  CPA, ChAD, OACIQ, CMQ, OIIQ, OPQ, OEQ). Drop ambiguous OPPQ; replace M/P
  short monograms with disambiguated 3-5 char abbreviations (BAR, CNQ, CPA,
  ChAD, OACIQ, CMQ, OIIQ, OPQ, OEQ). Tooltips show full disambiguating names.
- Critical (C2): raise text-brand-navy/40 -> /70 on footnote (2.69:1 -> 9:1
  contrast, passes WCAG AAA) and text-[10px] navy/50 -> text-xs navy/70 on
  monogram captions (12px minimum + AA contrast). Critical for legal
  disclosure legibility.
- Critical (C3): drop unverifiable '50 heures' specific number from
  methodology footnote — replaced with 'methodologie disponible sur demande'
  (defensible without committing to numbers we can't verify).
- Important (I1): use   before %/$ in KPI numbers per OQLF French
  typography rules + |safe filter to render entities.
- Important (I2): replace fragile substring-strip test with explicit
  forbidden-phrase list (RECONNU PAR, ENDOSSÉ PAR, etc.). Update ordre
  list test + footnote test to match new wording.
This commit is contained in:
Allison
2026-04-27 17:35:43 -04:00
parent 2a7e142b03
commit 54168e443b
3 changed files with 41 additions and 30 deletions

View File

@@ -77,21 +77,21 @@
{# 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', 'B'),
('Notaires (CNQ)', 'N'),
('Barreau du Québec', 'BAR'),
('Chambre des notaires du Québec', 'CNQ'),
('CPA Québec', 'CPA'),
('ChAD', 'CH'),
('OACIQ', 'OQ'),
('CMQ', 'M'),
('OIIQ', 'II'),
('OPPQ', 'PP'),
('OPQ', 'P')
('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-[10px] mt-2 text-brand-navy/50 group-hover:text-brand-navy transition-colors duration-300">{{ ordre[0] }}</p>
<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>
@@ -100,12 +100,12 @@
<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 %+', 'précision FR-CA', 'WhisperX Large-v3 — test interne 2026-Q1'),
('0 $', 'frais par utilisateur', 'Modèle par serveur, volume illimité'),
('100 %', 'local au Québec', 'OVH Beauharnois ou vos serveurs')
('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] }}</div>
<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>
@@ -113,8 +113,8 @@
</div>
{# Footnote — discloses methodology for the 95% claim (LPC art. 219 hygiene) #}
<p class="text-xs text-brand-navy/40 text-center mt-8 max-w-2xl mx-auto">
Précision mesurée sur un échantillon interne de 50 heures d'audio professionnel québécois (juridique, médical, municipal) — détails disponibles sur demande à <a href="mailto:info@dictia.ca" class="hover:text-brand-navy/70">info@dictia.ca</a>.
<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>