/* ============================================================ Accessibilité — classes appliquées sur Police OpenDyslexic chargée depuis un CDN public (jsDelivr) ============================================================ */ /* Charge la police OpenDyslexic uniquement quand on l'active, pour économiser le bandwidth au premier chargement. */ body.a11y-dys { --font-body: 'OpenDyslexic', var(--font-title), sans-serif !important; --font-title: 'OpenDyslexic', sans-serif !important; } body.a11y-dys, body.a11y-dys * { font-family: var(--font-body) !important; letter-spacing: .02em; } @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Grand texte : +20 % tailles de police partout */ body.a11y-big { font-size: calc(1.15rem * 1.2); } body.a11y-big .site-title, body.a11y-big .section-title, body.a11y-big h1, body.a11y-big h2, body.a11y-big h3 { font-size: 1.25em !important; } /* Contraste élevé : fond blanc pur, texte noir pur, bordures plus nettes */ body.a11y-hi { background: #fff !important; background-image: none !important; color: #000 !important; } body.a11y-hi::before { display: none; } body.a11y-hi .section, body.a11y-hi .section.section-conditions, body.a11y-hi .section.section-enfants, body.a11y-hi .section.section-lois, body.a11y-hi .section.section-comparaison, body.a11y-hi .section.section-quiz, body.a11y-hi .section.section-plus, body.a11y-hi .section.section-carte, body.a11y-hi .section.section-temoignages, body.a11y-hi .section.section-ma-journee { background: #fff !important; color: #000 !important; } body.a11y-hi .section.section-germinal { background: #000 !important; color: #fff !important; } body.a11y-hi .section.section-germinal * { color: #fff !important; } body.a11y-hi .card, body.a11y-hi .sector-card, body.a11y-hi .law-content, body.a11y-hi .day-in-life, body.a11y-hi .plus-card, body.a11y-hi .historical-figure, body.a11y-hi .timeline-mini, body.a11y-hi .fun-fact-box, body.a11y-hi .quiz-container, body.a11y-hi .mod-step, body.a11y-hi .mod-card { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; box-shadow: none !important; } body.a11y-hi strong { color: #b50000 !important; } body.a11y-hi a, body.a11y-hi .nav-link { color: #00368a !important; text-decoration: underline; } /* Espacement large : interligne, space between paragraphs */ body.a11y-gap { line-height: 2.1 !important; word-spacing: .1em; } body.a11y-gap p { margin-bottom: 1em; } body.a11y-gap h1, body.a11y-gap h2, body.a11y-gap h3, body.a11y-gap h4 { line-height: 1.6 !important; } /* Combo : DYS + espacement = encore plus lisible */ body.a11y-dys.a11y-gap { letter-spacing: .04em; } /* ============================================================ Panneau + bouton ============================================================ */ #a11y-toggle { position: fixed; bottom: 160px; right: 24px; z-index: 9994; width: 50px; height: 50px; background: var(--c-teal); color: #fff; border: 3px solid #fff; border-radius: 50%; font-size: 1.3rem; cursor: pointer; box-shadow: 0 5px 14px rgba(30, 75, 95, .3); transition: transform .2s, background .2s; } #a11y-toggle:hover { transform: scale(1.08); background: var(--c-teal-dark); } #a11y-panel { position: fixed; bottom: 220px; right: 24px; z-index: 9995; width: 280px; max-width: calc(100vw - 32px); background: #fff; border-radius: 20px; box-shadow: 0 18px 50px rgba(30, 75, 95, .28); border: 3px solid var(--c-teal); overflow: hidden; animation: a11y-in .2s ease; } #a11y-panel.hidden { display: none; } @keyframes a11y-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel-head { background: var(--c-teal-dark); color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-title); font-weight: 800; } #a11y-close { background: rgba(255,255,255,.18); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; font-weight: 700; line-height: 1; } .a11y-opts { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .a11y-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--c-cream); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .95rem; transition: background .15s; } .a11y-opt:hover { background: var(--c-yellow-soft); } .a11y-opt input { margin: 0; width: 22px; height: 22px; cursor: pointer; accent-color: var(--c-coral); flex-shrink: 0; } .a11y-opt-icon { font-size: 1.1rem; } .a11y-reset { display: block; width: 100%; padding: 10px 14px; background: none; border: none; border-top: 2px dashed var(--c-cream-2); color: var(--c-coral); font-family: var(--font-title); font-weight: 700; font-size: .88rem; cursor: pointer; } .a11y-reset:hover { background: var(--c-coral-soft); } /* ============================================================ Focus visible — keyboard navigation ============================================================ */ :focus-visible { outline: 3px solid var(--c-coral, #ff6b6b); outline-offset: 3px; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--c-coral, #ff6b6b); outline-offset: 3px; } .mod-btn:focus-visible { outline-offset: 4px; box-shadow: 0 5px 0 rgba(0,0,0,.15), 0 0 0 3px var(--c-coral, #ff6b6b); } .mod-card:focus-visible { outline: 3px solid var(--c-coral, #ff6b6b); outline-offset: 4px; transform: translateY(-3px); } .mod-quiz-option:focus-visible { outline: 3px solid var(--c-teal, #1e6f8c); outline-offset: 2px; border-color: var(--c-teal, #1e6f8c); } @media print { #a11y-root { display: none !important; } }