Migration Panda CSS + Ark UI #16
Description
Problem statement
La stack CSS du prototype (Tailwind CSS v4) diffère de la stack cible production (Panda CSS). Les composants interactifs (dropdowns, selects, menus mobiles) sont implémentés manuellement sans gestion d'accessibilité (ARIA, navigation clavier).
Solution
Migrer le styling vers Panda CSS (CSS-in-JS typesafe) et intégrer Ark UI pour les composants interactifs headless avec accessibilité native.
Scope
In scope
- Setup Panda CSS + Ark UI
- Migration design tokens (colors, fonts, shadows, animations auditées)
- Migration atoms (Button, Badge, Input)
- Migration layouts (Grid, Section, Container)
- Ark UI sur Navbar, NewsletterWidget, Contact Select
- Migration pages
- Suppression Tailwind
Out of scope
- Nouvelles features UI
- Refacto architecture composants
- Ajout de nouveaux composants Ark UI non listés
Features (22 total)
- High priority: 10 features
- Medium priority: 10 features
- Low priority: 2 features
See full PRD: specs/panda-css-ark-ui-migration.md
Definition of done
- All functional features passing
- All validation features passing
- Visual regression check via Storybook
- Accessibility audit via Storybook a11y addon
- Tailwind fully removed
- No console errors in dev/build