.c-a11y-panel { position: fixed; inset-block-start: 0; inset-inline-end: 0; width: min(320px, 100%); height: 100%; overflow-y: auto; background-color: var(--misaju-color-primary); color: var(--misaju-color-text); border-inline-start: 1px solid var(--misaju-color-secondary); padding: var(--misaju-spacing-md); z-index: 200; } .c-a11y-panel__header { display: flex; align-items: center; justify-content: space-between; } .c-a11y-panel__group { border: none; padding: 0; margin: var(--misaju-spacing-md) 0; } .c-a11y-panel__group legend { font-weight: 600; margin-bottom: var(--misaju-spacing-sm); } .c-a11y-panel__group button { margin-inline-end: var(--misaju-spacing-sm); margin-block-end: var(--misaju-spacing-sm); border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: var(--misaju-radius, 8px); padding: 0.4rem 0.75rem; cursor: pointer; } .c-a11y-panel__group button[aria-pressed='true'] { background-color: var(--misaju-color-accent); color: var(--misaju-color-primary); } .c-a11y-panel__reset { width: 100%; padding: 0.6rem; border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: var(--misaju-radius, 8px); cursor: pointer; } /* * Réglages posés par C_AccessibilityPanel.js sur . * * L'agrandissement, l'interligne et le contraste élevé du front public sont pilotés par * les tokens `--a11y-*` / `--menu-*` de `global.css`, sur les MÊMES sélecteurs. Les * redéclarer ici les cumulait au lieu de les remplacer : * - `font-size: 112.5%` s'ajoutait à `--a11y-scale: 1.18` (texte à ~1.33× au lieu de 1.18×) ; * - `line-height: 1.9` doublait `--a11y-line-height: 1.8` ; * - `html[…] body { background: #000 }` (spécificité 0-1-2) battait `.menu-shell` (0-1-0) * et faisait virer la carte au NOIR, là où le contraste élevé la passe au blanc. * Ne subsistent donc ici que les réglages sans équivalent côté tokens. */ html[data-a11y-font='dyslexic'] body { font-family: 'Atkinson Hyperlegible', sans-serif; letter-spacing: 0.02em; } html[data-a11y-spacing='relaxed'] p { margin-block-end: 1.2em; } /* Écrans hors front public (authentification) : ils n'ont pas les tokens `--menu-*`, les réglages doivent donc y rester portés par des propriétés directes. */ html[data-a11y-size='large'] body:not(.menu-shell) { font-size: 112.5%; } html[data-a11y-size='xlarge'] body:not(.menu-shell) { font-size: 130%; } html[data-a11y-spacing='relaxed'] body:not(.menu-shell) { line-height: 1.9; } html[data-a11y-contrast='high'] body:not(.menu-shell) { background-color: #000000; color: #FFFFFF; } html[data-a11y-contrast='high'] body:not(.menu-shell) a { color: #FFFF00; }