fix: honor prefers-reduced-motion for page transitions (MON-194)

frontend/src/app/accessibilite/page.tsx

@@ -9,7 +9,6 @@ export const metadata: Metadata = {
 }
 
 const pStyle = { fontSize: '15px', lineHeight: 1.75, color: 'var(--dp-text-secondary)', margin: 0 }
-const liStyle = { fontSize: '15px', lineHeight: 1.75, color: 'var(--dp-text-secondary)' }
 
 export default function AccessibilitePage() {
   return (
@@ -38,35 +37,31 @@ export default function AccessibilitePage() {
       </LegalSection>
 
       <LegalSection title="Résultats des tests">
-        <p style={pStyle}>Non-conformités identifiées à ce jour :</p>
-        <ul style={{ margin: '10px 0 0', paddingLeft: '20px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
-          <li style={liStyle}>
-            <strong>Animations non désactivables</strong> - le défilement animé de la page d&apos;accueil et les
-            transitions de l&apos;interface ne tiennent pas compte de la préférence système{' '}
-            <code>prefers-reduced-motion</code> (critères RGAA 13.8/13.9 / WCAG 2.3.3).
-          </li>
-        </ul>
-        <p style={{ ...pStyle, margin: '14px 0 0' }}>
-          En complément, ces mêmes tests ont confirmé qu&apos;une partie du travail d&apos;accessibilité était déjà en
-          place : l&apos;hémicycle interactif (<code>/votes/[id]</code>) est navigable au clavier avec des libellés{' '}
-          <code>aria-label</code> dynamiques, et la recherche globale expose des rôles <code>dialog</code>/
-          <code>listbox</code> corrects.
+        <p style={pStyle}>
+          Aucune non-conformité n&apos;est actuellement identifiée sur l&apos;échantillon de pages couvert par
+          cette auto-évaluation. Ces tests ont notamment confirmé qu&apos;une partie du travail
+          d&apos;accessibilité était déjà en place : l&apos;hémicycle interactif (<code>/votes/[id]</code>) est
+          navigable au clavier avec des libellés <code>aria-label</code> dynamiques, la recherche globale expose
+          des rôles <code>dialog</code>/<code>listbox</code> corrects, et le défilement animé de la page
+          d&apos;accueil comme les transitions de l&apos;interface respectent la préférence système{' '}
+          <code>prefers-reduced-motion</code>.
         </p>
       </LegalSection>
 
       <LegalSection title="Contenus non accessibles">
         <p style={pStyle}>
-          La non-conformité listée ci-dessus affecte principalement la page d&apos;accueil. Sa correction est
-          suivie individuellement ; le code source de MonÉlu étant public (voir{' '}
-          <Link href="/mentions-legales" style={{ color: 'var(--dp-text)' }}>mentions légales</Link>), l&apos;avancement
-          de ces corrections est vérifiable dans l&apos;historique du dépôt.
+          Aucun contenu non accessible n&apos;est actuellement identifié à partir de cette auto-évaluation ;
+          celle-ci ne couvre toutefois qu&apos;un échantillon de pages (voir méthode ci-dessus), pas un audit
+          exhaustif. Le code source de MonÉlu étant public (voir{' '}
+          <Link href="/mentions-legales" style={{ color: 'var(--dp-text)' }}>mentions légales</Link>), tout
+          correctif reste vérifiable dans l&apos;historique du dépôt.
         </p>
       </LegalSection>
 
       <LegalSection title="Établissement de cette déclaration">
         <p style={pStyle}>
-          Cette déclaration a été établie le 27 juillet 2026. Elle sera mise à jour au fur et à mesure de la
-          correction des non-conformités listées ci-dessus et de tout nouvel audit.
+          Cette déclaration a été établie le 27 juillet 2026. Elle sera mise à jour au fur et à mesure de tout
+          nouvel audit ou de toute non-conformité identifiée.
         </p>
       </LegalSection>
 

frontend/src/app/globals.css

@@ -12,6 +12,19 @@
 @keyframes nudge { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,5px); } }
 [data-hint] { animation: nudge 2s ease-in-out infinite; }
 
+/* RGAA 13.8/13.9, WCAG 2.3.3: honor the OS "reduce motion" preference as a
+   CSS-level fallback in addition to the JS useReducedMotion() gates - this
+   catches any transition/animation that isn't already gated in script
+   (MON-194). */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 :root {
   --color-bg: theme('colors.gray.off');
   --color-fg: theme('colors.navy.DEFAULT');

frontend/src/components/PageTransition.tsx

@@ -1,15 +1,22 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
+import { useReducedMotion } from 'framer-motion'
 import { useEffect, useRef } from 'react'
 
 export function PageTransition({ children }: { children: React.ReactNode }) {
   const pathname = usePathname()
   const ref = useRef<HTMLDivElement>(null)
+  const reduceMotion = useReducedMotion()
 
   useEffect(() => {
     const el = ref.current
     if (!el) return
+    if (reduceMotion) {
+      el.style.opacity = '1'
+      el.style.transform = 'none'
+      return
+    }
     el.style.opacity = '0'
     el.style.transform = 'translateY(6px)'
     const raf = requestAnimationFrame(() => {
@@ -18,7 +25,7 @@ export function PageTransition({ children }: { children: React.ReactNode }) {
       el.style.transform = 'translateY(0)'
     })
     return () => cancelAnimationFrame(raf)
-  }, [pathname])
+  }, [pathname, reduceMotion])
 
   return <div ref={ref}>{children}</div>
 }