/* 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. */ :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 so every rem/em-based size follows proportionally. The app has ~500 rem-based font sizes, so this covers most of the UI and, crucially, PRESERVES THE TYPE HIERARCHY: a 1.25rem title stays larger than a 0.875rem label at every scale. px-based sizes (~380 of them) can't follow a root font-size, and they are handled further down (search data-a11y-font-scaled). Do NOT "fix" those by forcing a font-size on a region's descendants: any single value — whether a fixed `0.875rem` base or a relative `1em`/`%`, which both resolve against the PARENT, not the element — collapses every element in the region to one size. That is what made a 20px page title render smaller at 105% than at 100%. */ 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 (~100 files) 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. Labels/inputs excluded from letter-spacing? No — spacing is safe on them; only line-height was the problem. */ html[data-a11y-letter-spaced="true"] .Cmt-sidebar *, html[data-a11y-letter-spaced="true"] .Cmt-appMainContent *, html[data-a11y-letter-spaced="true"] .Cmt-header *, 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"] .Cmt-sidebar *, html[data-a11y-word-spaced="true"] .Cmt-appMainContent *, html[data-a11y-word-spaced="true"] .Cmt-header *, 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"] .Cmt-appMainContent p, html[data-a11y-line-spaced="true"] .Cmt-appMainContent span, html[data-a11y-line-spaced="true"] .Cmt-appMainContent li, html[data-a11y-line-spaced="true"] .Cmt-appMainContent a, html[data-a11y-line-spaced="true"] .Cmt-appMainContent td, html[data-a11y-line-spaced="true"] .Cmt-appMainContent .MuiTypography-root, html[data-a11y-line-spaced="true"] .Cmt-appMainContent .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; } /* px-based font sizes can't follow the root font-size, so text-scaling used to miss them. The previous attempt forced `font-size` onto every text-bearing descendant of each region, which flattened them all to one size — a 20px title and a 12px caption came out identical, and anything above the base actually SHRANK when the slider moved off 100%. `zoom` scales an element and its subtree proportionally, so each element keeps its own authored size and their relative hierarchy. Applied to the region's text blocks rather than a font-size override. Gated behind data-a11y-font-scaled, so it is a no-op at 100%. Kept to plain text blocks on purpose — `zoom` establishes a new coordinate space, so applying it to table cells would rescale column widths, and to inputs/buttons would disturb MUI's popover placement math. Those are overwhelmingly rem-based and already follow the root font-size above. Prefer rem over px for new font sizes, and mark such text `a11y-rem-text` so it opts OUT of the zoom below — otherwise it scales twice (once via the root font-size, once via zoom), which is scale² at every stop. */ html[data-a11y-font-scaled="true"] .Cmt-appMainContent p:not(.a11y-rem-text), html[data-a11y-font-scaled="true"] .Cmt-appMainContent q:not(.a11y-rem-text), html[data-a11y-font-scaled="true"] .Cmt-appMainContent li:not(.a11y-rem-text), html[data-a11y-font-scaled="true"] .MuiDialog-root p:not(.a11y-rem-text), html[data-a11y-font-scaled="true"] .MuiDialog-root li:not(.a11y-rem-text) { zoom: var(--a11y-font-scale); } /* Logo scales with the slider too. It's an image at its natural size, so use a transform (scales from whatever its intrinsic width is) rather than guessing a px base. transform-origin left keeps it anchored to the sidebar's left edge. */ html[data-a11y-font-scaled="true"] #logoEducap { transform: scale(var(--a11y-font-scale)); transform-origin: left center; } /* Headings need no rule of their own: MUI's h1–h6 are rem-based, so they follow the root font-size and keep their size relative to body text automatically. (A `font-size` override here would flatten them to the parent's size — the very bug where a 20px title rendered smaller at 105% than at 100%.) */ /* 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 render glyphs from their font via ligatures, so overriding their family would show the icon NAME as text. (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; } /* 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"] .Cmt-appMainContent .MuiTableCell-root { padding-top: 6px !important; padding-bottom: 6px !important; } html[data-a11y-reduce-density="true"] .Cmt-appMainContent .MuiListItem-root { padding-top: 4px !important; padding-bottom: 4px !important; } html[data-a11y-reduce-density="true"] .Cmt-appMainContent .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 purple 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"]) .Cmt-appMainContent, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent p, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent span, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent td, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent th, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent label, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent li, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent .MuiTableCell-root, html[data-a11y-high-contrast="true"]:not([data-a11y-dark="true"]) .Cmt-appMainContent .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"] .Cmt-appMainContent, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent p, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent span, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent td, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent th, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent label, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent li, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent .MuiTableCell-root, html[data-a11y-high-contrast="true"][data-a11y-dark="true"] .Cmt-appMainContent .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"] .Cmt-appMainContent .MuiOutlinedInput-notchedOutline, html[data-a11y-high-contrast="true"] .MuiDialog-root .MuiOutlinedInput-notchedOutline { border-color: #000000 !important; } html[data-a11y-high-contrast="true"] .Cmt-appMainContent .MuiTableCell-root, html[data-a11y-high-contrast="true"] .Cmt-appMainContent 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"] .Cmt-appMainContent { max-width: var(--a11y-reading-width); margin-left: auto; margin-right: auto; }