feat: add accessibility

css/styles.css

@@ -5,6 +5,19 @@
     box-sizing: border-box;
 }
 
+/* Accessibilité - Classes utilitaires */
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
 :root {
     --primary-red: #FF0000;
     --primary-green: #008000;
@@ -42,6 +55,38 @@ a {
     color: var(--text-color);
 }
 
+/* Amélioration du focus pour l'accessibilité */
+a:focus,
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+    outline: 2px solid var(--primary-red);
+    outline-offset: 2px;
+    border-radius: 2px;
+}
+
+/* Support pour les préférences d'animation réduite */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Support pour le contraste élevé */
+@media (prefers-contrast: high) {
+    :root {
+        --text-color: #000000;
+        --primary-red: #CC0000;
+        --card-bg: #FFFFFF;
+        --sidebar-bg: #F0F0F0;
+        --tag-bg: #E8E8E8;
+        --search-bg: #D0D0D0;
+    }
+}
+
 img {
     max-width: 100%;
     height: auto;