/* * Smart ID — Accessibilité – Confort d'affichage * Feuille de style du widget. Toutes les classes sont préfixées * "sid-a11y-" pour ne jamais entrer en collision avec le thème. * Les réglages activés par un visiteur ajoutent une classe sur * (voir sid-a11y.js) ; ce fichier ne fait qu'en décrire l'effet. */ /* Respecte par défaut la préférence système, avant même toute action du visiteur. */ @media (prefers-reduced-motion: reduce) { html *, html *::before, html *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Bouton flottant ---------- */ /* Forme "rectangle à coins arrondis" (et non un cercle) pour s'aligner sur les boutons flottants habituels d'un site (ex. bouton "haut de page"). Taille et décalages pilotés par des variables CSS injectées par le script (voir sid-a11y.js) à partir des réglages du plugin — modifiable sans toucher à ce fichier, y compris pour s'empiler proprement au-dessus d'un bouton déjà présent sur le site. */ .sid-a11y-toggle { position: fixed; z-index: 999999; bottom: var(--sid-a11y-offset-bottom, 20px); width: var(--sid-a11y-size, 40px); height: var(--sid-a11y-size, 40px); border-radius: 10px; border: none; display: flex; align-items: center; justify-content: center; background: var(--sid-a11y-accent, #1a1a2e); color: #fff; cursor: pointer; padding: 0; } .sid-a11y-toggle svg, .sid-a11y-toggle img { width: 55%; height: 55%; fill: #fff; object-fit: contain; } .sid-a11y-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } .sid-a11y-position-bottom-right { right: var(--sid-a11y-offset-side, 20px); } .sid-a11y-position-bottom-left { left: var(--sid-a11y-offset-side, 20px); } /* ---------- Panneau ---------- */ .sid-a11y-panel { position: fixed; z-index: 999999; bottom: var(--sid-a11y-panel-bottom, 78px); width: min(320px, calc(100vw - 40px)); max-height: min(70vh, 560px); overflow-y: auto; background: #ffffff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); padding: 16px; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; } .sid-a11y-panel[hidden] { display: none; } .sid-a11y-panel.sid-a11y-position-bottom-right { right: var(--sid-a11y-offset-side, 20px); } .sid-a11y-panel.sid-a11y-position-bottom-left { left: var(--sid-a11y-offset-side, 20px); } .sid-a11y-panel h2 { font-size: 16px; margin: 0 0 8px; } .sid-a11y-panel p.sid-a11y-disclaimer { font-size: 12px; color: #555; margin: 0 0 12px; } .sid-a11y-option { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eee; } .sid-a11y-option:first-of-type { border-top: none; } .sid-a11y-option button { flex: 1; text-align: left; background: #f4f4f6; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 14px; color: #1a1a1a; } .sid-a11y-option button[aria-pressed="true"] { background: var(--sid-a11y-accent, #1a1a2e); border-color: var(--sid-a11y-accent, #1a1a2e); color: #fff; } .sid-a11y-option button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 1px; } .sid-a11y-footer { margin-top: 12px; display: flex; justify-content: space-between; gap: 8px; } .sid-a11y-footer button { background: none; border: 1px solid #ccc; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; } /* ---------- Effets appliqués au site (déclenchés depuis ) ---------- */ html.sid-a11y-contrast { filter: contrast(1.35) saturate(1.1); } html.sid-a11y-invert { filter: invert(1) hue-rotate(180deg); } /* On ré-inverse les médias pour éviter des photos et vidéos négatives. */ html.sid-a11y-invert img, html.sid-a11y-invert video, html.sid-a11y-invert picture, html.sid-a11y-invert svg, html.sid-a11y-invert iframe, html.sid-a11y-invert canvas { filter: invert(1) hue-rotate(180deg); } /* * Agrandissement du texte : on utilise "zoom" plutôt qu'un pourcentage de * font-size sur . Un site qui fixe ses tailles de texte en pixels * (très fréquent) ignore un simple changement de font-size racine — le * bouton "Agrandir le texte" n'a alors visuellement aucun effet. "zoom" * agit comme le zoom natif du navigateur : il s'applique uniformément, * quelle que soit l'unité utilisée par le thème. Il est appliqué sur * uniquement (jamais sur ) pour que le widget lui-même, * ajouté hors de , ne soit jamais agrandi avec le reste du site. */ html.sid-a11y-fontsize-1 body { zoom: 1.15; } html.sid-a11y-fontsize-2 body { zoom: 1.3; } html.sid-a11y-fontsize-3 body { zoom: 1.45; } /* Valeurs alignées sur le critère WCAG 1.4.12 (espacement du texte). */ html.sid-a11y-text-spacing body, html.sid-a11y-text-spacing body * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.sid-a11y-text-spacing p { margin-bottom: 2em !important; } html.sid-a11y-readable-font body, html.sid-a11y-readable-font body * { font-family: "OpenDyslexic", Verdana, "Segoe UI", Arial, sans-serif !important; line-height: 1.6 !important; letter-spacing: 0.02em !important; } html.sid-a11y-reduce-motion *, html.sid-a11y-reduce-motion *::before, html.sid-a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.sid-a11y-underline-links a { text-decoration: underline !important; } html.sid-a11y-grayscale { filter: grayscale(1); } html.sid-a11y-big-cursor, html.sid-a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 2 2, auto !important; } /* Deux filtres visuels (contraste + inversion) ne doivent pas se cumuler pour rester lisibles : le script empêche déjà cette combinaison côté JS, cette règle est une sécurité supplémentaire côté CSS. */ html.sid-a11y-contrast.sid-a11y-invert { filter: invert(1) hue-rotate(180deg); }