§2 — featured case study · Septembre 2026

Kidigo · Jade Premium

« Marketplace familiale d'activités enfants — Suisse romande. Livré en jours, 31 routes statiques, audit WCAG AA passé. »

statut · livré

§2.1

Tokens

« La palette Jade s’est fixée à la troisième itération après échec WCAG du vert initial. Outfit a remplacé Cabinet Grotesk après HTTP 400 sur Google Fonts. »

§2.1 — palette finale post-audit
token CSSvaleurrôle
--color-canvas#F3F6F1Fond principal sage warm
--color-surface#E6EBE2Sections alternées
--color-elevated#FFFFFFCards élevées
--color-accent#0F7D36Jade — WCAG AA 5.24:1 (post-audit)
--color-accent-hover#0A5D28Hover states
--color-text-primary#111814Corps principal — 17:1 AAA
--color-text-secondary#5D635BSub-heading — 5.66:1 AA
--color-text-muted#6B7369Meta · captions — 4.50:1 AA
§2.2

Ratios WCAG

Audit a11y vague 1 a révélé quatre ratios critiques en échec. Trois shifts de tokens ont permis l’atteinte du seuil AA sans rupture de l’identité Jade.

§2.2 — ratios mesurés (WCAG 2.1)
combinaisonrationiveauusage
#111814 sur #F3F6F115.8:1AAATexte body principal
#5D635B sur #F3F6F15.66:1AATexte secondaire (post-shift)
#6B7369 sur #F3F6F14.50:1AATexte muted (seuil exact, post-shift)
#0F7D36 sur #FFFFFF5.24:1AAAccent sur blanc (post-shift)
#0F7D36 sur #F3F6F14.81:1AAAccent sur canvas
#FFFFFF sur #0F7D365.24:1AATexte sur bouton accent

†1Audit DevTools axe-core 4.x, vérification manuelle WebAIM contrast checker. Aucune violation critique post-corrections.

§2.3

Architecture des routes

routes au total. Toutes statiques · zéro Server Action · zéro API route. Conforme GitHub Pages static export.

§2.3 — inventaire complet
chemintypecountnotes
/static1Hero bento 58/42 + 7 sections
/recherchestatic1Rail sticky 9 sections + masonry CSS columns
/activite/[slug]SSG13generateStaticParams · gallery split 2fr/1fr
/reservation/[slug]SSG133-step client-side · booking ID KID-XXX-NNNN
/comptestatic1Timeline groupée par mois — stub auth
/connexionstatic1Form stub avec error state simulé
/inscriptionstatic1Form stub
§2.4

Lighthouse — cibles

« Audit Lighthouse en cours sur build production. Valeurs publiées dès la livraison du sprint. »

§2.4 — cibles à publier post-build prod
métriqueciblestatut
Performance (mobile)≥ 95pending
Accessibility100pending
Best Practices≥ 95pending
SEO100pending
LCP< 1.8 spending
INP< 150 mspending
CLS< 0.05pending
First Load JS≤ 180 kBpending

†2Méthodologie : Lighthouse local sur build statique servi via npx serve out. Throttling Slow 4G + CPU 4× simulé. Aucun audit DevServer (résultats non comparables).

§2.5

Accessibilité — 3 vagues

Trois vagues d’audit + corrections, chacune commit-trackée, couvrant la palette, les composants interactifs et les patterns motion.

§2.5 — chronologie des correctifs
vaguecommitscoperésultat
Vague 119495b0Palette contraste · StarRating aria · FilterBar dialog4 ratios AA atteints · role="img" complet · role="dialog" + aria-modal
Vague 293f0282Touch targets · Breadcrumb · aria-hidden iconsTous boutons ≥ 44 px · nav>ol>li · aria-current="page"
Vague 31d37da9prefers-reduced-motion · og-image · backdrop-blurTriple couche reduced-motion · pipeline SVG→PNG · backdrop retiré scrollables
§2.6

Décisions écartées

« Ce qui a failli entrer dans le projet — et pourquoi non. La transparence sur les choix rejetés vaut autant que la documentation des choix retenus. »

§2.6 — rejected by design
décisionraison
Variante 1 design-shotgun (Orange)Trop proche du kitsch enfantin — moins premium pour parents en Suisse romande.
Variante 3 design-shotgun (Teal)Trop froid pour rassurer — manque de chaleur naturelle.
Cabinet Grotesk via fonts.googleapis.comPolice indisponible sur Google Fonts (HTTP 400). Remplacée par Outfit, alternative TASTE-compatible.
next/og ImageResponseCrash createContext incompatible avec output:export + framer-motion. Pipeline SVG→PNG via @resvg/resvg-js.
lucide-reactSignature AI slop. Migration complète vers @phosphor-icons/react — weight prop + duotone.
source.unsplash.comHTTP 403 systématique en static export. Remplacé par picsum.photos/seed/.