fix: amélioration accessibilité WAVE - corrections multiples

- Ajout h2 sr-only dans Footer, login, register, forgot-password pour hiérarchie titres
- Correction contraste TicketTableRow (text-gray-700)
- Correction contraste StatusBadge (couleurs -900)
- Correction contraste page jeux (text-gray-700)
- Correction labels orphelins page profil (label → span)
- Mise à jour FAQContent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/faq/FAQContent.tsx

@@ -198,7 +198,9 @@ export default function FAQContent() {
       {/* FAQ Questions */}
       <section className="py-12 md:py-16">
         <div className="container mx-auto px-4">
-          <div className="max-w-3xl mx-auto space-y-4">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="sr-only">Liste des questions fréquentes</h2>
+            <div className="space-y-4">
             {filteredFAQs.length === 0 ? (
               <div className="bg-white rounded-2xl shadow-sm p-12 text-center">
                 <div className="w-16 h-16 bg-[#2d4a3e]/10 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -255,6 +257,7 @@ export default function FAQContent() {
                 </div>
               ))
             )}
+            </div>
           </div>
         </div>
       </section>

app/forgot-password/page.tsx

@@ -104,6 +104,8 @@ export default function ForgotPasswordPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire de réinitialisation</h2>
 
             {/* Error Message */}
             {error && (

app/jeux/page.tsx

@@ -158,7 +158,7 @@ export default function JeuxPage() {
                         </Link>
                       </div>
                     )}
-                    <p className="mt-2 text-sm text-beige-600 text-center">
+                    <p className="mt-2 text-sm text-gray-700 text-center">
                       Format: TTP2025ABC (10 caractères)
                     </p>
                   </div>

app/login/page.tsx

@@ -110,6 +110,8 @@ export default function LoginPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire de connexion</h2>
 
             {/* Login Form */}
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">

app/profil/page.tsx

@@ -128,35 +128,35 @@ export default function ProfilePage() {
                 {!isEditing ? (
                   <div className="space-y-4">
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Prénom
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.firstName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Nom
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.lastName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Email
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.email}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Téléphone
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">
                         {user.phone || "Non renseigné"}
                       </p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Rôle
-                      </label>
+                      </span>
                       <div className="mt-1">
                         <Badge variant={getRoleBadgeVariant(user.role)}>
                           {getRoleLabel(user.role)}
@@ -242,9 +242,9 @@ export default function ProfilePage() {
             </div>
             <div className="p-6 space-y-4">
               <div>
-                <label className="text-sm font-medium text-gray-600">
+                <span className="text-sm font-medium text-gray-700 block">
                   Membre depuis
-                </label>
+                </span>
                 <p className="text-sm text-gray-800 mt-1">
                   {formatDate(user.createdAt)}
                 </p>

app/register/page.tsx

@@ -129,6 +129,8 @@ export default function RegisterPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire d'inscription</h2>
 
             {/* Registration Form */}
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">

components/Footer.tsx

@@ -41,6 +41,8 @@ export default function Footer() {
 
   return (
     <footer className="bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 text-beige-800 border-t-2 border-beige-300">
+      {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+      <h2 className="sr-only">Pied de page</h2>
       {/* Main Footer */}
       <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

components/ui/StatusBadge.tsx

@@ -16,24 +16,24 @@ interface StatusBadgeProps {
 }
 
 const roleColors: Record<string, string> = {
-  ADMIN: 'bg-red-100 text-red-800',
+  ADMIN: 'bg-red-100 text-red-900',
-  EMPLOYEE: 'bg-blue-100 text-blue-800',
+  EMPLOYEE: 'bg-blue-100 text-blue-900',
-  CLIENT: 'bg-green-100 text-green-800',
+  CLIENT: 'bg-green-100 text-green-900',
 };
 
 const ticketColors: Record<string, string> = {
-  AVAILABLE: 'bg-gray-100 text-gray-800',
+  AVAILABLE: 'bg-gray-100 text-gray-900',
-  CLAIMED: 'bg-green-100 text-green-800',
+  CLAIMED: 'bg-green-100 text-green-900',
-  PENDING: 'bg-yellow-100 text-yellow-800',
+  PENDING: 'bg-yellow-100 text-yellow-900',
-  EXPIRED: 'bg-red-100 text-red-800',
+  EXPIRED: 'bg-red-100 text-red-900',
-  REJECTED: 'bg-red-100 text-red-800',
+  REJECTED: 'bg-red-100 text-red-900',
 };
 
 const statusColors: Record<string, string> = {
-  active: 'bg-green-100 text-green-800',
+  active: 'bg-green-100 text-green-900',
-  inactive: 'bg-gray-100 text-gray-800',
+  inactive: 'bg-gray-100 text-gray-900',
-  verified: 'bg-green-100 text-green-800',
+  verified: 'bg-green-100 text-green-900',
-  unverified: 'bg-yellow-100 text-yellow-800',
+  unverified: 'bg-yellow-100 text-yellow-900',
 };
 
 const roleLabels: Record<string, string> = {
@@ -74,7 +74,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
   className,
   showIcon = false,
 }) => {
-  let colorClass = 'bg-gray-100 text-gray-800';
+  let colorClass = 'bg-gray-100 text-gray-900';
   let label = value;
   let icon: React.ReactNode = null;
 
@@ -115,15 +115,15 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
 
 // Utility functions for getting colors (for backward compatibility)
 export const getRoleBadgeColor = (role: RoleType): string => {
-  return roleColors[role] || 'bg-gray-100 text-gray-800';
+  return roleColors[role] || 'bg-gray-100 text-gray-900';
 };
 
 export const getTicketStatusColor = (status: TicketStatusType): string => {
-  return ticketColors[status] || 'bg-gray-100 text-gray-800';
+  return ticketColors[status] || 'bg-gray-100 text-gray-900';
 };
 
 export const getStatusColor = (status: StatusType): string => {
-  return statusColors[status] || 'bg-gray-100 text-gray-800';
+  return statusColors[status] || 'bg-gray-100 text-gray-900';
 };
 
 export default StatusBadge;

components/ui/TicketTableRow.tsx

@@ -29,7 +29,7 @@ export const TicketTableRow: React.FC<TicketTableRowProps> = ({
       <td className="px-6 py-4 whitespace-nowrap">
         <StatusBadge type="ticket" value={ticket.status} />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
+      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
         {ticket.playedAt
           ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", showClaimedDate ? {
               day: 'numeric',
@@ -41,7 +41,7 @@ export const TicketTableRow: React.FC<TicketTableRowProps> = ({
           : "-"}
       </td>
       {showClaimedDate && (
-        <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
+        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
           {ticket.claimedAt
             ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
                 day: 'numeric',