/* css/accessibility.css Styles d'accessibilite transverses (focus visible, classes sr-only, contrastes renforces, reduction de mouvement). Depend de css/tokens.css (variables de design). Ne doit jamais definir de couleurs ou d'espacements en dur : passer par les tokens. */ /* Focus visible au clavier : anneau contrasté pour tout element interactif. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: var(--space-1) solid var(--color-focus-ring); outline-offset: var(--space-1); border-radius: var(--radius-md); } /* Classe utilitaire pour masquer visuellement tout en conservant l'acces aux lecteurs d'ecran (accordeon, labels contextuels, etc.). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lorsque l'utilisateur demande moins de mouvement, les durees sont deja neutralisees dans tokens.css ; on supprime egalement les transitions transform/opacity non essentielles au cas ou une feuille les ajouterait. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ====================================================================== */ /* Preferences d'accessibilite persistees par l'ecran Reglages */ /* (js/screens/settings.js via js/core/i18n.js) posant des attributs */ /* data-* sur . Ces regles doivent toujours primer sur celles de */ /* tokens.css car elles sont plus specifiques (:root[attr]) et chargees */ /* apres tokens.css dans index.html. */ /* ====================================================================== */ /* -- Taille de texte : on fait varier la taille de police de , */ /* ce qui reescal toutes les tailles exprimees en rem (typographie de */ /* tous les ecrans via la pile systeme). "normal" correspond a la */ /* valeur par defaut (16px = 1rem) et n'a pas d'attribut. */ /* ---------------------------------------------------------------------- */ :root[data-text-size="small"] { font-size: 0.9375rem; /* ~15px */ } :root[data-text-size="large"] { font-size: 1.125rem; /* ~18px */ } /* -- Reduction manuelle des animations : les tokens de duree deja definis */ /* dans tokens.css sont remis a 0ms quand l'utilisateur active */ /* l'interrupteur (independant de prefers-reduced-motion systeme). */ /* ---------------------------------------------------------------------- */ :root[data-reduce-motion="true"] { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } /* -- Contraste eleve : bordures noires/epaisses et texte pur, en mode */ /* clair par defaut. Une variante sombre est declenchee ci-dessous pour */ /* le theme sombre explicite ou le mode auto sous systeme sombre. */ /* ---------------------------------------------------------------------- */ :root[data-contrast="high"] { --color-bg: var(--palette-neutral-0); --color-surface: var(--palette-neutral-0); --color-surface-raised: var(--palette-neutral-0); --color-surface-sunken: var(--palette-neutral-50); --color-border: var(--palette-neutral-950); --color-border-strong: var(--palette-neutral-950); --color-text: var(--palette-neutral-950); --color-text-muted: var(--palette-neutral-800); --color-focus-ring: var(--palette-violet-500); } :root[data-contrast="high"][data-theme="dark"] { --color-bg: var(--palette-neutral-950); --color-surface: var(--palette-neutral-950); --color-surface-raised: var(--palette-neutral-900); --color-surface-sunken: var(--palette-neutral-950); --color-border: var(--palette-neutral-0); --color-border-strong: var(--palette-neutral-0); --color-text: var(--palette-neutral-0); --color-text-muted: var(--palette-neutral-200); --color-focus-ring: var(--palette-violet-400); } /* En mode "automatique" sans data-theme, le contraste eleve doit suivre la preference systeme : on declenche la variante sombre si prefers-color-scheme est sombre, sans ecraser l'override manuel clair explicite. */ @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-contrast="high"] { --color-bg: var(--palette-neutral-950); --color-surface: var(--palette-neutral-950); --color-surface-raised: var(--palette-neutral-900); --color-surface-sunken: var(--palette-neutral-950); --color-border: var(--palette-neutral-0); --color-border-strong: var(--palette-neutral-0); --color-text: var(--palette-neutral-0); --color-text-muted: var(--palette-neutral-200); --color-focus-ring: var(--palette-violet-400); } } /* Quand le contraste eleve est actif, on renforce visuellement les bordures de tous les elements de surface pour garantir la lisibilite meme hors des tokens sementiques (rendu de secours). Ces regles ne dependent que de tokens existants pour rester conformes a "aucune valeur en dur". */ :root[data-contrast="high"] .btn, :root[data-contrast="high"] .cr-input, :root[data-contrast="high"] .jr-input, :root[data-contrast="high"] .settings-row, :root[data-contrast="high"] .settings-section, :root[data-contrast="high"] .settings-toggle__btn, :root[data-contrast="high"] .settings-segment__btn, :root[data-contrast="high"] .switch-track, :root[data-contrast="high"] .settings-lang-btn, /* BETA B2-B4 : composants ajoutes apres l'alpha, jamais inclus dans cette liste jusqu'ici (voir ACCESSIBILITY_AUDIT.md) - memes tokens de couleur que le reste de l'app donc deja lisibles en contraste eleve, mais sans la bordure de renforcement visuel des autres surfaces. */ :root[data-contrast="high"] .toast, :root[data-contrast="high"] .screen-pause-banner, :root[data-contrast="high"] .network-indicator, :root[data-contrast="high"] .game-menu-panel, :root[data-contrast="high"] .lobby-player-item, :root[data-contrast="high"] .vote-player-item, :root[data-contrast="high"] .results-guess-grid__cell { border: 2px solid var(--color-border-strong); }