/* ============================================================ ATYPIKIA - Mode dyslexie (classe .dys-mode sur ) Police OpenDyslexic + espacements de confort de lecture. Charge EN DERNIER (apres mobile.css) pour garder la priorite. Bascule : bouton .js-dys-toggle (header + menu mobile), persistance localStorage cle "atk_dys", script anti-flash dans le de includes/header.php. ============================================================ */ @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------ Police : tout le contenu, sauf le code (JetBrains Mono), les SVG (icones Lucide) et le logo (identite de marque). ------------------------------------------------------------ */ html.dys-mode body, html.dys-mode body *:not(code):not(pre):not(pre *):not(svg):not(svg *):not(.logo-text) { font-family: 'OpenDyslexic', Verdana, sans-serif !important; font-style: normal !important; /* pas d'italique en mode dys */ } /* ------------------------------------------------------------ Espacements : c'est la partie qui a le plus d'effet mesurable (lettres, mots, interligne), pas la police seule. ------------------------------------------------------------ */ html.dys-mode body { letter-spacing: 0.04em; word-spacing: 0.16em; } html.dys-mode p, html.dys-mode li, html.dys-mode blockquote, html.dys-mode .wiki-content, html.dys-mode .blog-content, html.dys-mode .question-text, html.dys-mode label { line-height: 1.8 !important; text-align: left !important; /* jamais de texte justifie */ } /* Taille plancher : jamais de texte courant sous 16px en mode dys (la nav et les boutons gardent leur taille compacte volontairement) */ html.dys-mode p, html.dys-mode li, html.dys-mode blockquote, html.dys-mode label, html.dys-mode td, html.dys-mode th, html.dys-mode .question-text { font-size: max(1em, 16px); } html.dys-mode small, html.dys-mode figcaption { font-size: max(1em, 14px); } /* Pas de texte tout-en-capitales : les mots en majuscules perdent leur silhouette et sont plus durs a dechiffrer */ html.dys-mode body *:not(svg):not(svg *) { text-transform: none !important; } /* OpenDyslexic est plus large : on compense dans la nav pour eviter que les derniers liens passent sous les boutons */ html.dys-mode .nav-menu { gap: var(--space-2, 8px); } html.dys-mode .nav-link { letter-spacing: 0; word-spacing: normal; font-size: 0.78rem; padding-left: 4px; padding-right: 4px; } /* Le logo garde la police de marque (il herite de body sinon) */ html.dys-mode .logo-text { font-family: 'Plus Jakarta Sans', sans-serif !important; letter-spacing: normal; word-spacing: normal; } /* ------------------------------------------------------------ Bouton de bascule (pastille, style switch de langue) ------------------------------------------------------------ */ .dys-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--primary-color, #0D7377); background: transparent; color: var(--primary-color, #0D7377); border-radius: 999px; padding: 4px 9px; font-size: 0.7rem; font-weight: 600; line-height: 1; cursor: pointer; margin-right: 12px; transition: background-color 0.15s ease, color 0.15s ease; } .dys-toggle:hover { background: rgba(13, 115, 119, 0.08); } .dys-toggle svg { width: 12px; height: 12px; flex-shrink: 0; } /* Ecran etroit : icone seule (le title/aria-label reste) */ @media (max-width: 1330px) { .dys-toggle-label { display: none; } .dys-toggle { padding: 4px 7px; } } .dys-toggle[aria-pressed="true"] { background: var(--primary-color, #0D7377); color: #ffffff; } /* Version menu mobile : rendu comme les autres entrees du menu */ button.mobile-nav-link.js-dys-toggle { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font: inherit; } button.mobile-nav-link.js-dys-toggle[aria-pressed="true"] { color: var(--primary-color, #0D7377); font-weight: 700; }