/* a11y.css — Accessibilité renforcée pour l'espace Livre Yeees! (taille du texte + fort contraste). Fichier externe (comme tv-mode.css) → compatible CSP stricte. Piloté par a11y-controls.js qui pose des classes sur . Public senior / malvoyant. */ /* ── Taille du texte (le base rem grandit → tout le texte en rem suit) ── */ html.yz-txt-1 { font-size: 112.5%; } /* A+ ≈ 18px de base */ html.yz-txt-2 { font-size: 128%; } /* A++ ≈ 20.5px de base */ /* ── Fort contraste : on renforce les textes atténués et les bordures ── */ html.yz-hc .text-charcoal\/70, html.yz-hc .text-charcoal\/80, html.yz-hc .text-charcoal\/85, html.yz-hc .text-charcoal\/90 { color: #211d18 !important; } html.yz-hc .text-stone { color: #474747 !important; } html.yz-hc .text-stone\/80 { color: #4d4d4d !important; } html.yz-hc .border-stone\/10, html.yz-hc .border-stone\/15, html.yz-hc .border-stone\/20, html.yz-hc .border-stone\/25 { border-color: #7a7a7a !important; } html.yz-hc a { text-decoration-thickness: 2px; } /* ── La barre d'accessibilité (injectée par le script) ── */ .yz-a11y { position: fixed; left: 14px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid rgba(0,0,0,.12); border-radius: 9999px; padding: 6px 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-family: inherit; } .yz-a11y button { border: 1px solid rgba(0,0,0,.15); background: #fff; color: #2b2a28; border-radius: 9999px; cursor: pointer; line-height: 1; min-width: 40px; min-height: 40px; padding: 0 10px; font-weight: 700; } .yz-a11y button:hover { border-color: #E8703A; } .yz-a11y button.yz-on { background: #E8703A; color: #fff; border-color: #E8703A; } .yz-a11y .yz-lab { font-size: 11px; color: #6b6b6b; padding: 0 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } @media (max-width: 480px) { .yz-a11y .yz-lab { display: none; } .yz-a11y { left: 10px; bottom: 12px; } } /* Bouton « écouter » dans les leçons / questions */ .yz-speak { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9999px; background: #2E4057; color: #fff; font-weight: 700; font-size: .875rem; border: none; cursor: pointer; } .yz-speak:hover { background: #24334a; } .yz-speak.yz-playing { background: #E8703A; }