/* ============================================================================ ERATO — Barre d'accessibilité (inspirée de PostHack v26) Contrôles : taille du texte, police adaptée, thème, vision des couleurs. Persistance localStorage (om-*), pilotage par attributs sur . Tous AAA. Chargée dans les deux layouts (public + membre). ============================================================================ */ /* ---- Taille du texte : multiplie toutes les tailles rem ---- */ html[data-fontscale="-2"] { font-size: 81.25%; } html[data-fontscale="-1"] { font-size: 87.5%; } html[data-fontscale="1"] { font-size: 112.5%; } html[data-fontscale="2"] { font-size: 125%; } html[data-fontscale="3"] { font-size: 137.5%; } /* ---- Polices adaptées (remplacent corps ET titres) ---- */ html[data-font="luciole"] * { font-family: 'Luciole', sans-serif !important; } html[data-font="dyslexia"] * { font-family: 'OpenDyslexic', sans-serif !important; } /* Conserve les icônes Unicode décoratives lisibles : pas d'exception nécessaire, les glyphes restent rendus par la police choisie. */ /* ---- Vision des couleurs (daltonisme) : remplace l'accent saisonnier ---- !important pour gagner sur [data-saison] et le mode sombre. Variantes claires/sombres pour conserver le contraste AAA du texte d'accent. */ :root[data-cv="protanopia"] { --accent: #2471a3 !important; --accent-2: #1f618d !important; --accent-deep: #15527a !important; --accent-soft: #d6e6f2 !important; --accent-profond: #15527a !important; } :root[data-cv="deuteranopia"] { --accent: #1f7c8c !important; --accent-2: #178a8a !important; --accent-deep: #124d52 !important; --accent-soft: #d7ecee !important; --accent-profond: #124d52 !important; } :root[data-cv="tritanopia"] { --accent: #b83055 !important; --accent-2: #a3284a !important; --accent-deep: #8e2240 !important; --accent-soft: #f7dce3 !important; --accent-profond: #8e2240 !important; } /* En mode sombre, le texte d'accent doit être clair (--accent-deep clair) */ :root[data-theme="dark"][data-cv="protanopia"] { --accent: #6fb0e0 !important; --accent-2: #5a9fd4 !important; --accent-deep: #aad2f0 !important; --accent-soft: #14304a !important; } :root[data-theme="dark"][data-cv="deuteranopia"] { --accent: #5fc0c9 !important; --accent-2: #4fb3aa !important; --accent-deep: #a9e2e7 !important; --accent-soft: #103035 !important; } :root[data-theme="dark"][data-cv="tritanopia"] { --accent: #e98aa3 !important; --accent-2: #e0738f !important; --accent-deep: #f3b6c4 !important; --accent-soft: #3a2129 !important; } /* ============================================================================ Widget : déclencheur flottant + panneau ============================================================================ */ .er-a11y { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 70; } .er-a11y__trigger { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); box-shadow: var(--ombre-md); cursor: pointer; font-size: 1.4rem; line-height: 1; } .er-a11y__trigger:hover { border-color: var(--accent); color: var(--accent-deep); } .er-a11y__trigger:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .er-a11y__trigger[aria-expanded="true"] { background: var(--accent-profond); color: #fff; border-color: var(--accent-profond); } .er-a11y__panel { position: absolute; bottom: calc(100% + 0.75rem); right: 0; width: 19rem; max-width: calc(100vw - 2rem); background: var(--papier); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon-lg); box-shadow: var(--ombre-lg); padding: 1rem; max-height: min(80vh, 34rem); overflow-y: auto; } .er-a11y__panel[hidden] { display: none; } .er-a11y__title { font-family: var(--font-titre); font-size: 1.05rem; margin: 0 0 0.75rem; } .er-a11y__group { margin-bottom: 0.9rem; } .er-a11y__legend { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-douce); margin-bottom: 0.4rem; font-weight: 700; } .er-a11y__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .er-a11y__btn { min-height: 2.75rem; min-width: 2.75rem; padding: 0.4rem 0.7rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-sm); background: var(--creme); color: var(--encre); font-size: 0.85rem; font-weight: 600; cursor: pointer; flex: 1 1 auto; } .er-a11y__btn:hover { border-color: var(--accent); } .er-a11y__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .er-a11y__btn[aria-pressed="true"] { background: var(--accent-profond); color: #fff; border-color: var(--accent-profond); } .er-a11y__level { min-width: 4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .er-a11y__reset { width: 100%; margin-top: 0.25rem; min-height: 2.75rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-full); background: transparent; color: var(--encre); font-weight: 600; cursor: pointer; } .er-a11y__reset:hover { background: var(--creme-ombre); } .er-a11y__reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .er-a11y__trigger, .er-a11y__btn { transition: none; } } @media print { .er-a11y { display: none; } }