/* Accessibility layer — consumes CSS variables + data-* attributes set on by AccessibilityApplier. Applying settings here (not per-component) means the whole app reacts live. Defaults are no-ops so nothing changes until the user opts in via the Accessibilité panel. Ported from educap-front-sag's public/vendors/accessibility.css. Region selectors are adapted to this app's layout (components/app.js): - Sidebar: #mySidenav (Sidenav component) - Main content: #main .left-box (Header + page content) instead of SAG's .Cmt-sidebar / .Cmt-appMainContent. */ :root { --a11y-font-scale: 1; --a11y-page-zoom: 1; --a11y-line-height: 1.5; --a11y-letter-spacing: 0em; --a11y-word-spacing: 0em; --a11y-reading-width: none; } /* Font scaling — scale the root font size; rem-based sizes follow. */ html { font-size: calc(100% * var(--a11y-font-scale)); } /* Page zoom — applied to #root, NOT body. MUI portals (Dialog/Menu/Popover/ Tooltip) mount directly under by default, as siblings of #root, not descendants. If `zoom` were applied to `body`, those portals would sit *inside* the zoomed subtree — their `getBoundingClientRect()`-based placement math (computed in real px from the trigger element) would then get re-scaled a second time by the ancestor zoom, making tooltips/menus/ dialogs drift further from their anchor the more the zoom differs from 100%. Scoping `zoom` to #root keeps the zoomed coordinate space contained to the app UI while portals stay in the real, unzoomed viewport where MUI's math is already correct. Compensate #root's height by the inverse of the zoom so it still fills the viewport (otherwise zooming out leaves empty space below the footer, since 100vh content scales to <100vh). */ #root { zoom: var(--a11y-page-zoom); min-height: calc(100vh / var(--a11y-page-zoom)); } html[data-a11y-zoomed="true"] #root > div { min-height: calc(100vh / var(--a11y-page-zoom)); } /* Text rhythm — apply line-height only to reading text, NOT form controls. Inputs/selects are height-constrained and rely on their own line-height for vertical centering; forcing 1.5 there pushes the text to the bottom of the field (uneven placeholders). Letter/word-spacing is safe on inputs, so those are applied separately below. */ body, p, span, li, a, td, th { line-height: var(--a11y-line-height); letter-spacing: var(--a11y-letter-spacing); word-spacing: var(--a11y-word-spacing); } /* Field labels get NO reading-rhythm adjustments at all. MUI labels (especially required ones with a "*") are absolutely positioned and vertically centered; line-height/word-spacing shift or widen them, pushing the text off-center or wrapping the asterisk onto a second line. Leave them to MUI's own layout. */ /* MUI cells/typography set their own line-height that would win over the generic rule, so re-apply the reading variables to them (not inputs). */ .MuiTableCell-root, .MuiTypography-root { line-height: var(--a11y-line-height); letter-spacing: var(--a11y-letter-spacing); word-spacing: var(--a11y-word-spacing); } /* Inputs: spacing only, never line-height (keeps text vertically centered). */ input, textarea, button, .MuiInputBase-input { letter-spacing: var(--a11y-letter-spacing); word-spacing: var(--a11y-word-spacing); } /* Letter/word spacing OVERRIDE. The rules above are ignored wherever a component hardcodes its own letter-spacing or the MUI theme sets one on Typography/ buttons. So when the user actually moves the spacing sliders, force the value onto all text-bearing elements in the main regions with !important. Gated behind data-* flags so it is a complete no-op at the default (0), leaving the app's normal typographic tracking untouched until the user opts in. */ html[data-a11y-letter-spaced="true"] #mySidenav *, html[data-a11y-letter-spaced="true"] #main *, html[data-a11y-letter-spaced="true"] .MuiDialog-root *, html[data-a11y-letter-spaced="true"] .MuiPopover-root *, html[data-a11y-letter-spaced="true"] .MuiDrawer-root * { letter-spacing: var(--a11y-letter-spacing) !important; } html[data-a11y-word-spaced="true"] #mySidenav *, html[data-a11y-word-spaced="true"] #main *, html[data-a11y-word-spaced="true"] .MuiDialog-root *, html[data-a11y-word-spaced="true"] .MuiPopover-root *, html[data-a11y-word-spaced="true"] .MuiDrawer-root * { word-spacing: var(--a11y-word-spacing) !important; } /* Line-height (Interligne) OVERRIDE. Same problem as spacing — many components hardcode line-height. Force it when the user picks Confortable/Large, but EXCLUDE form controls (input/textarea/select/labels/buttons): a tall line-height there breaks the vertical centering of the text in the field. Gated so it is a no-op at the default (Normal / 1.5). */ html[data-a11y-line-spaced="true"] #main p, html[data-a11y-line-spaced="true"] #main span, html[data-a11y-line-spaced="true"] #main li, html[data-a11y-line-spaced="true"] #main a, html[data-a11y-line-spaced="true"] #main td, html[data-a11y-line-spaced="true"] #main .MuiTypography-root, html[data-a11y-line-spaced="true"] #main .MuiTableCell-root, html[data-a11y-line-spaced="true"] .MuiDialog-root p, html[data-a11y-line-spaced="true"] .MuiDialog-root span, html[data-a11y-line-spaced="true"] .MuiDialog-root li, html[data-a11y-line-spaced="true"] .MuiDialog-root .MuiTypography-root { line-height: var(--a11y-line-height) !important; } /* Font scaling for px-based content. Root font-size scaling only reaches rem/em values, but components across the app hardcode px font sizes — so the text-size slider never touched them. Rather than chase every class, we scale all text- bearing descendants within each major REGION (sidebar, main content, dialogs). Gated behind data-a11y-font-scaled so it is a no-op at 100%. Icons are SVG (sized by width/height), so font-size scaling never distorts them. */ html[data-a11y-font-scaled="true"] #mySidenav span, html[data-a11y-font-scaled="true"] #mySidenav a, html[data-a11y-font-scaled="true"] #mySidenav p, html[data-a11y-font-scaled="true"] #mySidenav li, html[data-a11y-font-scaled="true"] #mySidenav label, html[data-a11y-font-scaled="true"] #mySidenav input, html[data-a11y-font-scaled="true"] #mySidenav .MuiTypography-root, html[data-a11y-font-scaled="true"] #main span, html[data-a11y-font-scaled="true"] #main p, html[data-a11y-font-scaled="true"] #main q, html[data-a11y-font-scaled="true"] #main a, html[data-a11y-font-scaled="true"] #main li, html[data-a11y-font-scaled="true"] #main td, html[data-a11y-font-scaled="true"] #main th, html[data-a11y-font-scaled="true"] #main label, html[data-a11y-font-scaled="true"] #main input, html[data-a11y-font-scaled="true"] #main textarea, html[data-a11y-font-scaled="true"] #main button, html[data-a11y-font-scaled="true"] #main .MuiTableCell-root, html[data-a11y-font-scaled="true"] .MuiDialog-root span, html[data-a11y-font-scaled="true"] .MuiDialog-root p, html[data-a11y-font-scaled="true"] .MuiDialog-root a, html[data-a11y-font-scaled="true"] .MuiDialog-root li, html[data-a11y-font-scaled="true"] .MuiDialog-root td, html[data-a11y-font-scaled="true"] .MuiDialog-root th, html[data-a11y-font-scaled="true"] .MuiDialog-root label, html[data-a11y-font-scaled="true"] .MuiDialog-root input, html[data-a11y-font-scaled="true"] .MuiDialog-root textarea, html[data-a11y-font-scaled="true"] .MuiDialog-root button { font-size: calc(0.875rem * var(--a11y-font-scale)) !important; } /* Headings keep a larger base so titles stay above body text when scaled. */ html[data-a11y-font-scaled="true"] #main .MuiTypography-h1, html[data-a11y-font-scaled="true"] #main .MuiTypography-h2, html[data-a11y-font-scaled="true"] #main .MuiTypography-h3, html[data-a11y-font-scaled="true"] #main .MuiTypography-h4, html[data-a11y-font-scaled="true"] #main .MuiTypography-h5, html[data-a11y-font-scaled="true"] #main .MuiTypography-h6, html[data-a11y-font-scaled="true"] #main h1, html[data-a11y-font-scaled="true"] #main h2, html[data-a11y-font-scaled="true"] #main h3, html[data-a11y-font-scaled="true"] .MuiDialog-root .MuiTypography-h6 { font-size: calc(1rem * var(--a11y-font-scale)) !important; } /* Dyslexia mode — swap the base font to Atkinson Hyperlegible Next everywhere, including elements that hardcode their own font-family (Typography, nav text, table cells, buttons, inputs). The universal selector with !important is scoped under the dyslexia flag, so it only activates when the user turns it on. */ html[data-a11y-dyslexia="true"], html[data-a11y-dyslexia="true"] body, html[data-a11y-dyslexia="true"] * { font-family: "Atkinson Hyperlegible Next", "Inter", sans-serif !important; } /* Keep ligature icon fonts intact — Material Icons / FontAwesome render glyphs from their font via ligatures/private-use codepoints, so overriding their family would show the icon NAME as text or a missing-glyph box. (SVG-based MuiSvgIcon elements don't use font-family, so they're unaffected.) */ html[data-a11y-dyslexia="true"] .material-icons { font-family: "Material Icons", sans-serif !important; } html[data-a11y-dyslexia="true"] .fa, html[data-a11y-dyslexia="true"] [class^="fa-"], html[data-a11y-dyslexia="true"] [class*=" fa-"] { font-family: "FontAwesome", sans-serif !important; } /* Underline links. */ html[data-a11y-underline-links="true"] a { text-decoration: underline !important; } /* Reduce motion — kill animations/transitions app-wide. */ html[data-a11y-reduce-motion="true"] *, html[data-a11y-reduce-motion="true"] *::before, html[data-a11y-reduce-motion="true"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Reduced density — tighten table row / list / cell padding so more fits on screen. Scoped to the content region and to layout containers (not text), so it compacts spacing without affecting readability. */ html[data-a11y-reduce-density="true"] #main .MuiTableCell-root { padding-top: 6px !important; padding-bottom: 6px !important; } html[data-a11y-reduce-density="true"] #main .MuiListItem-root { padding-top: 4px !important; padding-bottom: 4px !important; } html[data-a11y-reduce-density="true"] #main .MuiCardContent-root { padding: 12px !important; } /* High contrast — raise legibility by darkening text and strengthening borders, NOT by applying a global `filter` (which recolors the whole UI, washes out the brand palette, and breaks position:fixed elements). We target text-bearing elements in the content/dialog regions and push their color toward near-black, and make borders darker/thicker. The sidebar and buttons keep their brand colors (they already have strong contrast). */ /* Light mode → near-black text. */ html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main p, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main span, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main td, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main th, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main label, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main li, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main .MuiTableCell-root, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) #main .MuiTypography-root, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .MuiDialog-root .MuiTypography-root, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .MuiDialog-root label, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .MuiDialog-root td, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .MuiDialog-root th { color: #000000 !important; } /* Dark mode → pure-white text (black would be invisible on the dark background). */ html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main p, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main span, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main td, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main th, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main label, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main li, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main .MuiTableCell-root, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] #main .MuiTypography-root, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .MuiDialog-root .MuiTypography-root, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .MuiDialog-root label, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .MuiDialog-root td, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .MuiDialog-root th { color: #ffffff !important; } /* Strengthen borders/dividers so structure is clearer under high contrast. */ html[data-a11y-high-contrast="true"] #main .MuiOutlinedInput-notchedOutline, html[data-a11y-high-contrast="true"] .MuiDialog-root .MuiOutlinedInput-notchedOutline { border-color: #000000 !important; } html[data-a11y-high-contrast="true"] #main .MuiTableCell-root, html[data-a11y-high-contrast="true"] #main hr, html[data-a11y-high-contrast="true"] .MuiDialog-root hr { border-color: #64748b !important; } /* Left align — force left text alignment for readability. */ html[data-a11y-left-align="true"] body { text-align: left !important; } /* Reading width — cap content width ONLY when the user enabled it. Applying max-width/margin unconditionally to the flex content area collapses its size, so this is gated behind the data attribute and is a no-op by default. */ html[data-a11y-reading-width="true"] #main { max-width: var(--a11y-reading-width); margin-left: auto; margin-right: auto; }