/* ========================================================================== Accessibilité — contraste élevé et taille de texte -------------------------------------------------------------------------- Deux préférences, pilotées par des attributs posés sur par a11y.js : data-contrast="high" → palette à contraste renforcé data-text-size="xl" → texte agrandi Aucune classe utilitaire n'est réécrite ici : global.css fait déjà passer toutes les couleurs par des variables (--bs-primary, --body-text…) et Bootstrap/MDB dimensionnent le texte en rem. Il suffit donc de redéfinir les variables et la taille de police racine — les .text-*, .bg-*, .btn-* et .border-* existants suivent automatiquement. ========================================================================== */ /* ========================================================================== 1. Contraste élevé ========================================================================== */ :root[data-contrast="high"] { /* Vert de marque assombri : ~11:1 sur blanc, contre ~3,4:1 à l'origine. */ --primary-rgb: 20, 56, 26; --primary-color: #14381a; --bs-primary: #14381a; --bs-primary-rgb: 20, 56, 26; --bs-primary-subtle: #e8efe8; /* Orange secondaire assombri : ~7:1 sur blanc. */ --secondary-rgb: 122, 59, 0; --secondary-color: #7a3b00; --bs-secondary: #7a3b00; --bs-secondary-rgb: 122, 59, 0; --bs-secondary-subtle: #ffffff; --tertiary-rgb: 26, 26, 26; --tertiary-color: #1a1a1a; --bs-tertiary: #1a1a1a; --bs-tertiary-subtle: #333333; --bs-success-rgb: 15, 92, 32; --bs-success: #0f5c20; --bs-success-subtle: #e3f1e6; --bs-info-rgb: 10, 82, 105; --bs-info: #0a5269; --bs-info-subtle: #e0eff4; /* Le jaune d'origine est illisible sur blanc : viré vers un brun sombre. */ --bs-warning-rgb: 122, 79, 0; --bs-warning: #7a4f00; --bs-warning-subtle: #fbf1dd; --bs-danger-rgb: 154, 12, 25; --bs-danger: #9a0c19; --bs-danger-subtle: #fbe6e8; --bs-light-rgb: 255, 255, 255; --bs-light: #ffffff; --bs-light-subtle: #ffffff; --bs-dark-rgb: 0, 0, 0; --bs-dark: #000000; --bs-dark-subtle: #1a1a1a; --bs-light-gray-rgb: 255, 255, 255; --bs-light-gray: #ffffff; --bs-light-gray-subtle: #767676; --body-text: #000000; --mdb-link-hover-color: #000000; } /* Fonds unis : les nuances translucides du thème disparaissent au profit du blanc, pour garantir un rapport de contraste constant avec le texte. */ :root[data-contrast="high"] body, :root[data-contrast="high"] .bg-light, :root[data-contrast="high"] .bg-light-gray, :root[data-contrast="high"] .bg-white, :root[data-contrast="high"] .bg-secondary-subtle, :root[data-contrast="high"] .bg-primary-10, :root[data-contrast="high"] .bg-primary-25, :root[data-contrast="high"] .card { background-color: #ffffff !important; color: #000000 !important; } /* Le gris « discret » descend à 7:1 sur blanc : il reste discret sans devenir illisible. */ :root[data-contrast="high"] .text-muted, :root[data-contrast="high"] .text-black-50 { color: #4a4a4a !important; } /* Sur fonds sombres (navbar, footer), le texte atténué repasse en blanc plein. */ :root[data-contrast="high"] .text-white-50 { color: #ffffff !important; } /* Les bordures portent la séparation visuelle une fois les aplats supprimés. */ :root[data-contrast="high"] .card, :root[data-contrast="high"] .border, :root[data-contrast="high"] .border-top, :root[data-contrast="high"] .border-bottom, :root[data-contrast="high"] .border-start, :root[data-contrast="high"] .border-end, :root[data-contrast="high"] .form-control, :root[data-contrast="high"] .form-select, :root[data-contrast="high"] .dropdown-menu { border-color: #000000 !important; } :root[data-contrast="high"] .card, :root[data-contrast="high"] .dropdown-menu { border: 1px solid #000000 !important; box-shadow: none !important; } /* Les liens de contenu ne doivent plus reposer sur la seule couleur (WCAG 1.4.1). */ :root[data-contrast="high"] main a:not(.btn):not(.nav-item):not(.dropdown-item):not(.page-link), :root[data-contrast="high"] .card-body a:not(.btn):not(.nav-item):not(.dropdown-item):not(.page-link) { text-decoration: underline !important; } /* Contours des boutons épaissis, et focus nettement visible partout. */ :root[data-contrast="high"] .btn { border-width: 2px !important; } :root[data-contrast="high"] :focus-visible { outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* Les images décoratives de fond perdent leur opacité réduite. */ :root[data-contrast="high"] .opacity-25, :root[data-contrast="high"] .opacity-50, :root[data-contrast="high"] .opacity-75 { opacity: 1 !important; } /* ========================================================================== 2. Texte agrandi ========================================================================== */ /* Bootstrap, MDB et le CSS maison dimensionnent le texte en rem : relever la police racine de 16 à 20px agrandit l'ensemble d'environ 25 % sans toucher à une seule règle de typographie. */ :root[data-text-size="xl"] { font-size: 20px; /* La navbar a une hauteur fixe en px : sans ce rattrapage, son contenu agrandi déborderait et passerait sous le contenu de la page. */ --nav-height: 104px; } /* Quelques conteneurs sont contraints en px dans les gabarits ; on les laisse s'étendre pour éviter que le texte agrandi ne soit tronqué. */ :root[data-text-size="xl"] .text-truncate { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; } :root[data-text-size="xl"] .text-nowrap { white-space: normal !important; } /* ========================================================================== 3. Commandes d'accessibilité du pied de page ========================================================================== */ .a11y-toggle { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .a11y-toggle[aria-pressed="true"] { font-weight: 700; text-decoration: underline; } /* Réservé aux lecteurs d'écran (annonce du changement d'état). */ .a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }