- Pipe macro title/description through | safe to render NBSP/& correctly
(autoescape was producing literal '95 %+' and 'Q&R' text on screen)
- Replace dynamic col-span-{{ span }} with static lookup table so Tailwind
scanner generates the utilities for A-2.7+ reuse
- Replace inline border style with border-white/[0.045] utility (codebase consistency)
- Add explicit Q&R assertion + autoescape regression guard test
- Problème section (light bg-brand-bg, white cards): 3 risk cards
(Cloud Act, Loi 25 biométrie art. 60.1 LPRPSP, sanctions disciplinaires
9 ordres pros). H2 grad-text accent on 'violent la Loi 25' — defensible
legal claim citing CAI + LPRPSP statutes by name. text-brand-navy/70 for
all body text (WCAG AA compliant, no /40 or /50 regression).
- Solution section (bg-brand-navy with single subtle green orb): 3 pillars
(100% local, Conforme Loi 25, Précision FR-CA). H2 grad-text accent on
'par design'. Pillars cite specific tech (WhisperX Large-v3, Mistral 7B,
pyannote, OVH Beauharnois, AGPL v3) — all factually verifiable.
- French typography: NBSP via + |safe before %, $, and within
'Loi 25' to prevent line break separation (OQLF rule).
- 4 new tests verify both sections, 3 cards each, key tech mentions,
and WCAG-safe opacity policy.
- 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.
- Section AFTER hero, white bg with brand-border y-borders
- 9 monogram placeholders (gradient circles with initials, NOT official
logos to avoid licensing issues + false-endorsement exposure)
hover from opacity-50 to opacity-100 for subtle interaction
- Eyebrow phrasing 'MAPPÉ AUX 9 ORDRES PROFESSIONNELS' (factual scope,
not 'CERTIFIÉ PAR' which would be a false-endorsement claim under
LPC art. 219 / Competition Act s. 52)
- 4 KPIs with grad-text numbers: ~5 min/heure, 95%+ FR-CA, 0$ par user,
100% local — each with a 1-line context line and a small subtext
- Methodology footnote: 'Précision mesurée sur 50 heures d'audio
interne, détails sur demande' — defensible disclosure for the 95%
claim (LPC art. 219 hygiene)
- 4 new tests verify ordres list, factual phrasing, KPIs, footnote
- Add @media (prefers-reduced-motion: reduce) override to disable animations
for vestibular-sensitive users (covers hero + future scroll/infinite anims)
- Replace 5-star icon + '27 cabinets' claim with shield + 'Conçu avec 9
ordres professionnels' + 'Pré-inscription ouverte' (LPC art. 219 +
Competition Act s. 52 compliance — pre-launch claims must be factual)
- Convert H1/H2/H3 letter-spacing from absolute px to em-relative (-3px →
-0.028em on H1) so tracking scales correctly with clamp font-size on mobile
- Update test_hero_has_social_proof_microcopy to assert new copy
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Button macro: variants/sizes use .get() with primary/md fallback (no KeyError),
add as_button=True parameter for form submit CTAs (forms in B-2.2 signup,
B-2.7 checkout)
- Header: drop hidden sm:inline-block on Connexion link so login is always
visible from mobile (avoids UX dead-end before A-2.7 hamburger lands)
- Add placeholder static/images/favicon.svg (brand gradient + 'D')
- Add placeholder 1x1 PNG static/images/og/og-default.png (replaced in A-3.3
with real 1200x630 branded OG image)
Adds Tailwind v4 / PostCSS pipeline that compiles to static/css/marketing.css,
to be loaded only by future templates/marketing/** templates and to coexist
with the existing legacy v3 JIT runtime used by index.html / account.html /
admin.html. The legacy v3 runtime stays untouched.
- package.json: postcss-cli build:css and watch:css scripts
- postcss.config.js: @tailwindcss/postcss + autoprefixer
- static/css/tailwind.config.js: brand tokens (b1/b2/b3, navy, navy2, navy3,
bg, border), font families, brand-grad, cta shadows, FlexiHub keyframes
(tc-fade-in-up/right, tc-float-y, tc-pulse-glow, plus-breathe). content
paths scoped to marketing/legal/billing/macros only - purge cannot touch
legacy templates.
- static/css/input.css: @import "tailwindcss"; + @config directive (Tailwind
v4 backward-compat for v3-style JS config). @font-face Inter Variable +
JetBrains Mono Variable (woff2). base layer body font/color, h1-h3
letter-spacing. utilities: grad-text, grad-bg, eyebrow.
- Dockerfile: new stage 3 'assets-builder' (node:20-alpine) compiles CSS;
runtime stage copies the built file in via --from=assets-builder, after
COPY . . so the freshly-built file always wins.
- .gitignore + .dockerignore: exclude node_modules.
Build verified locally: marketing.css = 121 KB minified (Tailwind v4 ships
all default theme tokens + reset properties even with empty content;
realistic baseline, will not grow much as marketing markup is added).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
