/** * =================================================== * A11Y.CSS – Accessibilité RGAA 4.2 – MonAppli_V2 * Version : 2.5 (Exclusion du menu burger) * Objectif : Fournir une base solide pour l'accessibilité et un mode à contraste élevé optionnel. * =================================================== */ /* ============================================= * RÈGLES GLOBALES (Toujours actives) * Améliorations de base qui ne dégradent pas le design. * ============================================= */ /* 🔍 [RGAA 10.4] Focus visible et clair pour la navigation au clavier. * `focus-visible` est utilisé pour n'afficher l'outline que pour les utilisateurs de clavier, * sans gêner les utilisateurs de souris. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-color, #005FCC); outline-offset: 2px; box-shadow: 0 0 0 2px white; /* Ajoute un contour interne pour la visibilité sur tous les fonds */ } /* 🧠 [RGAA 10.13] Classe pour masquer visuellement du contenu tout en le gardant accessible aux lecteurs d'écran. */ .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; } /* 🔗 [RGAA 12.8] Lien d'évitement pour sauter les menus et aller directement au contenu. */ .skip-link { position: absolute; left: -9999px; /* On le sort de l'écran */ top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10001; /* Doit être au-dessus de tout */ } /* Le lien devient visible uniquement lorsqu'il reçoit le focus (via la touche Tab). */ .skip-link:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; padding: 0.5em 1em; background: #003c99; color: white; border: 2px solid white; } /* ✅ [CORRECTION V4] Positionnement et alignement du bouton à côté du logo */ /* On s'assure que le conteneur principal du header utilise Flexbox et qu'il aligne verticalement tous ses enfants au centre. */ .bandeau-haut { display: flex; justify-content: space-between; /* Pousse le groupe logo et le menu aux extrémités */ align-items: center; /* Aligne verticalement tout le contenu du header */ padding: 0.5rem 1rem; } /* On utilise aussi Flexbox pour le groupe logo/bouton pour un contrôle parfait. */ .header-left-part { display: flex; align-items: center; /* Aligne verticalement le logo et le bouton */ gap: 1rem; /* Crée un espace entre le logo et le bouton */ } /* ♿ Style du bouton d'accessibilité adapté pour être dans le header. * Il n'est plus en position "fixed". */ .a11y-button { background: none; border: 2px solid #555; color: #333; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 1.2rem; display: inline-flex; align-items: center; transition: background-color 0.2s, color 0.2s; } .a11y-button:hover { background-color: #f0f0f0; } /* ======================================================= * MODE RGAA AMÉLIORÉ (Actif SEULEMENT avec la classe .a11y-mode) * Ces styles surchargent les styles par défaut pour un contraste et une lisibilité maximum. * ======================================================= */ /* Styles appliqués directement au quand le mode est actif. */ body.a11y-mode { /* [RGAA 3.2] Contraste élevé : fond noir, texte blanc. */ background-color: #000000 !important; color: #ffffff !important; /* [RGAA 3.1] Lisibilité améliorée : police plus grande et interlignage augmenté. */ font-size: 115% !important; line-height: 1.8 !important; } /* [RGAA 3.3] Liens très contrastés et toujours soulignés. */ body.a11y-mode a { color: #00ffff !important; /* Cyan sur fond noir : excellent contraste. */ text-decoration: underline !important; } body.a11y-mode a:hover, body.a11y-mode a:focus { color: #a7ffff !important; background-color: #333333 !important; /* Fond léger au survol pour un meilleur retour visuel. */ } /* Le bouton d'accessibilité change de couleur pour indiquer que le mode est actif. */ body.a11y-mode .a11y-button { background: #ff5722 !important; /* Orange vif pour contraster avec le mode normal. */ color: black !important; border-color: black !important; } /* ✅ [CORRECTION] On exclut le bouton burger et le bouton d'accessibilité de la règle générale, * car ils ont leurs propres styles et ne doivent pas être affectés. */ body.a11y-mode button:not(.burger-menu):not(.a11y-button), body.a11y-mode input, body.a11y-mode select, body.a11y-mode textarea { background-color: #222222 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } body.a11y-mode button:not(.burger-menu):not(.a11y-button):hover, body.a11y-mode input[type="submit"]:hover { background-color: #444444 !important; } /* Titres avec une couleur distincte pour une meilleure hiérarchie visuelle. */ body.a11y-mode h1, body.a11y-mode h2, body.a11y-mode h3, body.a11y-mode h4 { color: #ffeb3b !important; /* Jaune pour les titres. */ } /* [RGAA 10.7] Indication visuelle claire des zones qui peuvent être lues par les lecteurs d'écran (alertes, etc.). */ body.a11y-mode [role="alert"], body.a11y-mode [aria-live] { padding: 1em; border: 2px dashed #ff9800; /* Bordure orange pour attirer l'attention. */ background-color: #332300 !important; }