Add dark mode and accessibility features for improved user experience

Integrate a dark mode, an accessibility panel with options for dyslexia, high contrast, and text scaling, and enhance keyboard navigation. Update documentation to reflect these changes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: bbd001b6-1b5f-4425-9310-55a9081dabf8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/vOeFCU4
Replit-Helium-Checkpoint-Created: true

artifacts/voix-du-peuple/src/App.tsx

@@ -7,6 +7,8 @@ import Home from "@/pages/home";
 import About from "@/pages/about";
 import Transparence from "@/pages/transparence";
 import Flyer from "@/pages/flyer";
+import { AccessibilityProvider } from "@/hooks/use-accessibility";
+import { AccessibilityPanel } from "@/components/accessibility-panel";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -24,13 +26,14 @@ function Navbar() {
         <Link href="/" className="flex items-center gap-2 mr-6 font-serif text-xl font-bold tracking-tight text-primary" data-testid="nav-home-link">
           La Voix du Peuple
         </Link>
-        <nav className="flex items-center gap-6 text-sm font-medium">
+        <nav className="flex items-center gap-6 text-sm font-medium" aria-label="Navigation principale">
           <Link href="/" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-manifesto-link">Manifeste</Link>
           <Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-about-link">À propos</Link>
           <Link href="/transparence" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-transparence-link">Fonctionnement</Link>
           <Link href="/flyer" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-flyer-link">Flyer QR</Link>
         </nav>
-        <div className="ml-auto flex items-center">
+        <div className="ml-auto flex items-center gap-2">
+          <AccessibilityPanel />
           <span
             title="République française"
             aria-label="Drapeau français"
@@ -50,8 +53,15 @@ function Navbar() {
 function Router() {
   return (
     <div className="min-h-screen flex flex-col font-sans">
+      {/* Lien d'évitement pour lecteurs d'écran */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-primary focus:text-primary-foreground focus:px-4 focus:py-2 focus:rounded-sm focus:text-sm focus:font-semibold"
+      >
+        Aller au contenu principal
+      </a>
       <Navbar />
-      <main className="flex-1 flex flex-col">
+      <main id="main-content" className="flex-1 flex flex-col" tabIndex={-1}>
         <Switch>
           <Route path="/" component={Home} />
           <Route path="/about" component={About} />
@@ -68,10 +78,12 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
-        <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
-          <Router />
-        </WouterRouter>
-        <Toaster />
+        <AccessibilityProvider>
+          <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
+            <Router />
+          </WouterRouter>
+          <Toaster />
+        </AccessibilityProvider>
       </TooltipProvider>
     </QueryClientProvider>
   );