/*! * a11y-core / base.css — styles du socle d'accessibilité. * 1) Mécanismes de conformité (skip-link, focus, sr-only). * 2) Rendu des préférences utilisateur (classes a11y-pref-* sur ). * Portable, sans dépendance. Préfixe a11y- pour éviter les collisions thème. */ /* ------------------------------------------------------------------ * * 1. Lien d'évitement (RGAA 12.7 / WCAG 2.4.1) * ------------------------------------------------------------------ */ .a11y-skip-link { position: absolute; left: 8px; top: -60px; z-index: 100000; padding: 10px 16px; background: #10243b; color: #fff; font: 600 1rem/1.2 system-ui, sans-serif; text-decoration: none; border-radius: 0 0 6px 6px; transition: top .15s ease; } .a11y-skip-link:focus { top: 0; outline: 3px solid #ffbf47; outline-offset: 2px; } .a11y-reduced-motion .a11y-skip-link { transition: none; } /* Cible du skip-link : pas de contour disgracieux quand on la focus par programmation */ [id][tabindex="-1"]:focus { outline: none; } /* ------------------------------------------------------------------ * * 2. Focus visible baseline (RGAA 10.7 / WCAG 2.4.7) * Activé via .a11y-focus-visible sur . Ne s'applique qu'au * focus clavier grâce à :focus-visible ; laisse le thème gagner s'il * définit déjà un focus (on ne fait qu'un filet de sécurité). * ------------------------------------------------------------------ */ .a11y-focus-visible :focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } /* ------------------------------------------------------------------ * * 3. Utilitaire "réservé lecteur d'écran" * ------------------------------------------------------------------ */ .a11y-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * 4. Réduction des animations (préférence user OU système) * ------------------------------------------------------------------ */ .a11y-reduced-motion *, .a11y-reduced-motion *::before, .a11y-reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ================================================================== * * 5. PROFILS de personnalisation (confort — pas de la conformité) * Classes posées sur par preferences.js. Chaque profil est * indépendant et combinable. * ================================================================== */ /* --- Dyslexie : police lisible + espacement + liens soulignés ------ */ .a11y-prof-dyslexia body, .a11y-prof-dyslexia p, .a11y-prof-dyslexia li, .a11y-prof-dyslexia a, .a11y-prof-dyslexia span { font-family: Verdana, Tahoma, Arial, sans-serif !important; } .a11y-prof-dyslexia p, .a11y-prof-dyslexia li { line-height: 1.9 !important; letter-spacing: .03em; word-spacing: .14em; } .a11y-prof-dyslexia a { text-decoration: underline !important; } /* --- Fatigue visuelle : contraste + taille renforcés --------------- */ .a11y-prof-visual body { font-size: 112%; } .a11y-prof-visual p, .a11y-prof-visual li { color: #111 !important; line-height: 1.75 !important; } .a11y-prof-visual a { color: #0033cc !important; text-decoration: underline !important; } /* --- Confort de lecture : texte agrandi et aéré -------------------- */ .a11y-prof-reading body { font-size: 118%; } .a11y-prof-reading p, .a11y-prof-reading li { line-height: 1.85 !important; max-width: 72ch; } /* --- Motricité : cibles cliquables agrandies ---------------------- */ .a11y-prof-motor a, .a11y-prof-motor button, .a11y-prof-motor input, .a11y-prof-motor label { min-height: 44px; } .a11y-prof-motor a, .a11y-prof-motor button { padding-top: 6px !important; padding-bottom: 6px !important; } /* --- Mode nuit : inversion maîtrisée + ré-inversion des médias ----- * IMPORTANT : on n'applique PAS le filtre sur lui-même — un `filter` * sur un ancêtre casse le `position: fixed` de ses descendants (le widget * disparaîtrait). On filtre donc les enfants de body SAUF le widget, et on * ré-inverse les médias pour qu'ils gardent leurs couleurs. */ .a11y-prof-night { background: #0e0e10; } .a11y-prof-night body { background: #0e0e10 !important; } .a11y-prof-night body > *:not(#a11y-pref-root) { filter: invert(1) hue-rotate(180deg); } .a11y-prof-night img, .a11y-prof-night picture, .a11y-prof-night video, .a11y-prof-night iframe, .a11y-prof-night svg, .a11y-prof-night [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } /* ================================================================== * * 6. Widget de préférences (bouton + panneau + interrupteurs) * ================================================================== */ #a11y-pref-root { position: fixed; right: 18px; bottom: 18px; z-index: 99999; font: 400 .95rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; } #a11y-pref-toggle { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #10243b; color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .15s ease; } #a11y-pref-toggle:hover { transform: scale(1.06); } .a11y-reduced-motion #a11y-pref-toggle { transition: none; } #a11y-pref-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } #a11y-pref-panel { position: absolute; right: 0; bottom: 66px; width: 320px; max-width: 90vw; background: #fff; color: #14243b; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.28); } #a11y-pref-panel[hidden] { display: none; } .a11y-pref-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #10243b; color: #fff; } .a11y-pref-brand { font-size: 1.3rem; } .a11y-pref-brand-txt { font-weight: 700; font-size: 1.1rem; flex: 1; } .a11y-pref-close { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; } .a11y-pref-close:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; } .a11y-pref-tagline { margin: 0; padding: 12px 16px 4px; text-align: center; font-size: .88rem; color: #55606e; } .a11y-pref-list { padding: 6px 8px 8px; max-height: 46vh; overflow-y: auto; } .a11y-prof-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #eef0f3; } .a11y-prof-row:last-child { border-bottom: 0; } .a11y-prof-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f0f3f7; font-size: 1.25rem; } .a11y-prof-texts { flex: 1; display: flex; flex-direction: column; } .a11y-prof-label { font-weight: 600; color: #14243b; } .a11y-prof-desc { font-size: .78rem; color: #7a8494; } /* Interrupteur accessible (role=switch) */ .a11y-switch { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 0; background: #c7ced8; cursor: pointer; transition: background .15s ease; } .a11y-reduced-motion .a11y-switch, .a11y-reduced-motion .a11y-switch-knob { transition: none; } .a11y-switch[aria-checked="true"] { background: #1f9d55; } .a11y-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; } .a11y-switch[aria-checked="true"] .a11y-switch-knob { transform: translateX(20px); } .a11y-switch:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } .a11y-pref-reset { display: block; width: calc(100% - 24px); margin: 8px 12px 14px; padding: 9px; border-radius: 10px; background: #eef1f5; border: 1px solid #d7dce3; color: #14243b; cursor: pointer; font-weight: 600; } .a11y-pref-reset:hover { background: #e3e8ef; } .a11y-pref-reset:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } /* --- Actions (mode lecture + synthèse vocale) --- */ .a11y-pref-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; } .a11y-act-btn { flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; background: #f0f3f7; border: 1px solid #d7dce3; color: #14243b; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; } .a11y-act-btn:hover { background: #e3e8ef; } .a11y-act-btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } /* ================================================================== * * 7. Profil Concentration : déparasitage (le masque JS est dans focus.js) * ================================================================== */ .a11y-prof-concentration *, .a11y-prof-concentration *::before, .a11y-prof-concentration *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .a11y-prof-concentration video, .a11y-prof-concentration [class*="carousel" i], .a11y-prof-concentration [class*="slider" i], .a11y-prof-concentration [class*="marquee" i], .a11y-prof-concentration [class*="ticker" i] { display: none !important; } /* Masque de lecture : deux voiles sombres, bande lisible entre les deux. */ .a11y-mask { position: fixed; left: 0; right: 0; z-index: 99990; background: rgba(15, 23, 42, .62); pointer-events: none; } .a11y-mask-top { top: 0; } .a11y-mask-bot { bottom: 0; } /* Mode lecture linéaire (« Page Livre ») */ .a11y-reader-open { overflow: hidden; } #a11y-reader { position: fixed; inset: 0; z-index: 100001; background: #fbf9f4; color: #1c2733; overflow-y: auto; } .a11y-reader-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #10243b; color: #fff; } .a11y-reader-title { flex: 1; font-weight: 700; } .a11y-reader-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; font: inherit; font-weight: 600; } .a11y-reader-btn:hover { background: rgba(255,255,255,.15); } .a11y-reader-btn:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; } .a11y-reader-content { max-width: 68ch; margin: 0 auto; padding: 32px 22px 80px; font: 400 1.25rem/1.9 Georgia, "Times New Roman", serif; } .a11y-reader-content h1, .a11y-reader-content h2, .a11y-reader-content h3 { font-family: system-ui, sans-serif; line-height: 1.3; margin: 1.4em 0 .5em; } .a11y-reader-content img { max-width: 100%; height: auto; border-radius: 8px; } .a11y-reader-content a { color: #0033cc; } /* Bouton flottant "Lire la sélection" (TTS) */ #a11y-tts-sel { position: absolute; z-index: 100000; padding: 5px 12px; border-radius: 999px; border: 0; background: #10243b; color: #fff; font: 600 .85rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); } #a11y-tts-sel:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }