L'atelier

Colophon — la méthode derrière les mots et la palette.

Ce site n'est pas un template. Chaque détail — la typographie, la palette terracotta, la voix éditoriale, l'accessibilité — résulte d'un choix. Voici la transparence sur la méthode, les standards et l'équipe qui ont permis d'aboutir à ce que vous lisez.

Direction éditoriale

Éditrice et conseillère : Océanne Brodeur, inscrite à l'Autorité des marchés financiers du Québec (certificat n° 271218). Cabinet d'attache : iA Groupe financier — Agence Beaubien, 1611 boul. Crémazie Est, bureau 501, Montréal (Québec), H2M 2R9.

Voix éditoriale : chaque phrase de ce site a été écrite à la première personne par Océanne, à partir d'un brief signé. Les mantras répétés — « Sinon je vous le dis aussi », « Mon travail est simple », « Vous décidez » — sont verbatim, non négociables, présents pour vous rappeler la posture du conseil.

Histoires : les témoignages nommés (Sophie, Marie-Pier, etc.) sont des voix composites anonymisées, validées avec d'anciennes clientes. Aucun cas réel n'est divulgué sans consentement écrit. Les vrais cas seront identifiés progressivement après le lancement.

Typographie

EB Garamond — serif classique pour les titres (h1, h2, h3), citations et eyebrows italiques. Conçu par Georg Duffner, libre de droits (SIL Open Font License). Self-hosté via @fontsource — pas de tracking Google Fonts. Une seule graisse chargée (400 régulier) pour réduire le poids du bundle.

Manrope Variable — sans-serif moderne pour le corps de texte, boutons et UI. Variable font (graisses 300 à 800 dans un seul fichier woff2), conçue par Mikhail Sharanda. Self-hostée. Corps fixé à 500 (medium) pour un poids confortable sur fond cream contre Garamond serif.

Hiérarchie : titres serif (display), corps sans (lecture), eyebrows italiques (signature). Ligne globale 1.65 sur le corps pour respirer, 1.1 sur les titres pour la densité éditoriale. Largeur max 65ch sur les paragraphes (anti-ligne-infinie).

Palette

La palette dite « Sage Garden » a été construite en OKLCH (P3-ready, gamut large) pour éviter les approximations HEX. Chaque couleur a un rôle éditorial précis :

  • Cream oklch(0.97 0.011 80) — fond éditorial neutre chaleureux (#FAF6F0).
  • Terracotta oklch(0.62 0.135 38) — CTA, accents brand, focus rings (#C96546). Phase 23 BOLDER : saturation augmentée pour ressortir sur cream.
  • Sage oklch(0.69 0.055 122) — accent secondaire éditorial (eyebrows italiques).
  • Peach oklch(0.78 0.085 38) — tertiaire (chips, statuts).
  • Rose blush oklch(0.94 0.025 5) — fusion d'accents (marginalia, surfaces tendres).

Principes & voix

Compliance AMF non négociable. Aucun chiffre financier n'est présenté sans qualifier indicatif : « environ 12 000 $ », « souvent moins de 10 jours », « pour la plupart des profils admissibles ». Les garanties dépendent de l'assureur et du contrat — toujours.

Loi 25 du Québec. La case de consentement marketing n'est jamais pré-cochée (la loi l'interdit). Les transferts hors-Québec sont encadrés par l'article 17. Aucune séquence courriel automatique après formulaire — c'est Océanne qui vous répond personnellement.

Pas de promesse de rendement. L'assurance maladie grave n'est pas un placement. Les économies présentées sur la calculatrice AMG sont indicatives, basées sur les barèmes moyens des trois grands assureurs canadiens, et soumises à la souscription effective.

Trois soumissions, toujours. Manuvie, Canada-Vie, Sun Life — comparées devant vous, sans présélection. C'est rare dans l'industrie, c'est la méthode signature Océanne.

Accessibilité

Le site vise la conformité WCAG 2.2 niveau AA. Score Lighthouse Accessibilité : 100/100 sur mobile et desktop. Audit Chrome DevTools mensuel.

Contraste : ratios 4.5+ pour le texte normal, 3.0+ pour le large. Cibles tactiles : minimum 24×24 px (recommandé 44×44). Lecteurs d'écran : aria-labels, HTML sémantique, focus trap dans les modaux, restauration du focus à la fermeture.

Préférences moteur : prefers-reduced-motion désactive les animations parallaxe et le scroll lissé. Bilingue FR/EN (français par défaut, Loi 96 du Québec).

Une barrière vous gêne ? Écrivez-moi directement par WhatsApp ou courriel — je corrige.

Stack technique

Frontend : React 19 + TypeScript strict + Vite 8 (Rolldown) + TanStack Router file-based + View Transitions API native. Tailwind CSS v4 avec @theme inline et tokens OKLCH.

Backend : Cloudflare Workers (API + assets unifiés) avec D1 (base SQLite distribuée pour les leads), R2 (sauvegardes mensuelles), KV (cache articles). 3 crons R2 : purge D1 le 1, export R2 le 8, purge R2 le 15.

Pipeline V6 : formulaire → API Worker → D1 + GHL (CRM) → webhook tracking. 4 couches de défense leads (honeypot + timing + rate limit + validation server-side). Conformité Loi 25.

Observabilité : Sentry SDK installé (no-op silencieux tant que VITE_SENTRY_DSN absent). Core Web Vitals reportés (LCP, INP, CLS).

Studio : ce site a été conçu et codé par Intralys, studio éditorial spécialisé en sites pour conseillers AMF au Québec.