/** * Styles d'apparence globaux (thème + packs d'accessibilité). * * Lus sur tous les portails (admin, pro, patient). Appliqués via les data-* * posés par AppearanceProvider sur . */ /* ══════════════════════════════════════════════════════════════════════════ THÈMES (filtre global subtil — pas de réécriture des classes Tailwind) ══════════════════════════════════════════════════════════════════════════ */ /* Energy : défaut, pas de filtre (couleurs saturées des classes Tailwind) */ /* Sérénité : moins agressif pour les yeux */ html[data-app-theme='serenity'] body { filter: saturate(0.65) brightness(1.02); } /* Nuit productive : contrasté + saturation ++ */ html[data-app-theme='night'] body { filter: brightness(0.95) saturate(1.3) contrast(1.05); } html[data-app-theme='night'] { background-color: #0a0a14; } /* Classique : kill-switch sobre */ html[data-app-theme='classic'] body { filter: saturate(0.15); } /* ══════════════════════════════════════════════════════════════════════════ PACK VISION ET PERCEPTION Objectifs : meilleure lisibilité, moins de fatigue visuelle - Contraste augmenté - Taille du texte ~+15% - Animations réduites (prefers-reduced-motion forcé) - Focus indicators plus visibles ══════════════════════════════════════════════════════════════════════════ */ html[data-a11y-vision='1'] { font-size: 115%; /* rem scale → tous les text-sm, text-base, etc. grossissent */ } html[data-a11y-vision='1'] body { filter: contrast(1.1); } html[data-a11y-vision='1'] *, html[data-a11y-vision='1'] *::before, html[data-a11y-vision='1'] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05ms !important; scroll-behavior: auto !important; } html[data-a11y-vision='1'] *:focus-visible { outline: 3px solid #8b5cf6 !important; outline-offset: 2px !important; border-radius: 6px !important; } /* ══════════════════════════════════════════════════════════════════════════ PACK LECTURE ET COGNITION Objectifs : rendre la lecture plus confortable - Fonte adaptée (Atkinson Hyperlegible en priorité, stack fallback) - Hauteur de ligne augmentée - Espacement lettres légèrement augmenté - Paragraphes plus aérés ══════════════════════════════════════════════════════════════════════════ */ html[data-a11y-reading='1'] body { font-family: 'Atkinson Hyperlegible', 'OpenDyslexic', 'Lexend', 'Verdana', -apple-system, BlinkMacSystemFont, sans-serif !important; line-height: 1.75; letter-spacing: 0.01em; word-spacing: 0.05em; } html[data-a11y-reading='1'] p, html[data-a11y-reading='1'] li { line-height: 1.8; margin-bottom: 0.75em; } html[data-a11y-reading='1'] h1, html[data-a11y-reading='1'] h2, html[data-a11y-reading='1'] h3 { line-height: 1.4; } /* ══════════════════════════════════════════════════════════════════════════ PACK MOTRICITÉ ET NAVIGATION Objectifs : cibles de clic plus grosses, navigation clavier améliorée - Boutons / liens : min-height 44x44 (recommandation Apple/Google) - Focus indicators très marqués - Zone de clic étendue ══════════════════════════════════════════════════════════════════════════ */ html[data-a11y-motor='1'] button, html[data-a11y-motor='1'] a, html[data-a11y-motor='1'] [role='button'], html[data-a11y-motor='1'] input[type='checkbox'], html[data-a11y-motor='1'] input[type='radio'] { min-height: 44px; min-width: 44px; } html[data-a11y-motor='1'] *:focus-visible { outline: 3px solid #10b981 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2) !important; } /* Scroll bar plus large */ html[data-a11y-motor='1'] *::-webkit-scrollbar { width: 14px; height: 14px; } html[data-a11y-motor='1'] *::-webkit-scrollbar-thumb { background-color: rgba(100, 100, 100, 0.5); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }