/** * Accessibilité — Surcharges CSS pour les préférences d'affichage. * * Toutes les règles utilisent html.a11y-* car les classes sont posées * sur par le script anti-FOUC dans . */ /* ═══════════════════════════════════════════════ Lecture ═══════════════════════════════════════════════ */ html.a11y-font-dyslexia body { font-family: 'OpenDyslexic', sans-serif !important; } html.a11y-font-luciole body { font-family: 'Luciole', sans-serif !important; } /* * Taille de texte : cible (pas body) pour que les unités `rem` * utilisées par Gutenberg, le thème et le panneau a11y suivent la * préférence utilisateur. Cibler body seul laisse les rem figées. * * Les variables WP --wp--preset--font-size--{small,medium,large,x-large} * sont définies en px dans theme.json (13/20/36/42) et n'héritent donc * pas d'un changement de font-size sur . On les surcharge ici * pour que les éléments qui les utilisent suivent aussi la préférence. */ html.a11y-fontsize-125 { font-size: 125% !important; --wp--preset--font-size--small: 16px; --wp--preset--font-size--medium: 25px; --wp--preset--font-size--large: 45px; --wp--preset--font-size--x-large: 52px; } html.a11y-fontsize-150 { font-size: 150% !important; --wp--preset--font-size--small: 19px; --wp--preset--font-size--medium: 30px; --wp--preset--font-size--large: 54px; --wp--preset--font-size--x-large: 63px; } html.a11y-lineheight-loose body { line-height: 1.8 !important; } html.a11y-no-justify * { text-align: left !important; } /* ═══════════════════════════════════════════════ Navigation ═══════════════════════════════════════════════ */ html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-bold-links a { font-weight: bold !important; } html.a11y-highlight-links a { background-color: rgba(251, 178, 28, 0.25) !important; padding: 0.1em 0.2em !important; } html.a11y-outline-buttons button, html.a11y-outline-buttons .btn, html.a11y-outline-buttons input[type="submit"], html.a11y-outline-buttons input[type="button"], html.a11y-outline-buttons [role="button"] { outline: 2px solid currentColor !important; outline-offset: 2px !important; } html.a11y-focus-enhanced *:focus-visible { outline: 3px solid #0044FB !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 68, 251, 0.3) !important; } /* ═══════════════════════════════════════════════ Affichage ═══════════════════════════════════════════════ */ html.a11y-contrast-high { --dimosia-navy: #000033; --dimosia-blue: #0000CC; --dimosia-dark: #000000; --dimosia-grey: #E0E0E0; } html.a11y-contrast-high body { color: #000000 !important; background-color: #FFFFFF !important; } html.a11y-contrast-high a { color: #0000CC !important; } /* ═══════════════════════════════════════════════ Reduced motion (préférence système, pas de toggle) ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════ Composant — Bouton flottant ═══════════════════════════════════════════════ */ .dms-a11y-trigger { position: fixed; z-index: 9990; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; /* Neutralise padding: 15px 25px et gap: 1rem hérités de la règle button {} du thème. */ padding: 0; gap: 0; box-sizing: border-box; border: none; border-radius: 50%; background: #0044FB; color: #FFFFFF; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.2s, transform 0.2s; } .dms-a11y-trigger:hover { background: #0033CC; transform: scale(1.05); } .dms-a11y-trigger:focus-visible { outline: 3px solid #0044FB; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0, 68, 251, 0.3); } /* SVG icons — dimensions forcées pour résister aux overrides globaux du thème */ .dms-a11y-trigger svg, .dms-a11y-panel__close svg { display: block; flex-shrink: 0; width: 24px; height: 24px; max-width: none; fill: currentColor; } .dms-a11y-panel__close svg { width: 20px; height: 20px; } /* Mobile : remonter le bouton au-dessus du CTA sticky */ body.has-sticky-cta .dms-a11y-trigger { bottom: 80px !important; } /* ═══════════════════════════════════════════════ Composant — Panneau ═══════════════════════════════════════════════ */ .dms-a11y-panel { position: fixed; top: 0; right: 0; z-index: 9991; width: 100%; max-width: 400px; height: 100vh; overflow: hidden; background: #FFFFFF; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); } /* Version inline (page /accessibilite/) */ .dms-a11y-panel.dms-a11y-inline { position: static; max-width: none; height: auto; box-shadow: none; border: 1px solid #E0E0E0; border-radius: 8px; } .dms-a11y-panel__inner { display: flex; flex-direction: column; height: 100%; } .dms-a11y-inline .dms-a11y-panel__inner { height: auto; } .dms-a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E0E0E0; } .dms-a11y-panel__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: #1A1A2E; } .dms-a11y-panel__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; /* Neutralise padding: 15px 25px et gap: 1rem hérités de la règle button {} du thème. */ padding: 0; gap: 0; box-sizing: border-box; border: none; border-radius: 50%; background: transparent; color: #666; cursor: pointer; } .dms-a11y-panel__close:hover { background: #F0F0F0; color: #1A1A2E; } .dms-a11y-panel__close:focus-visible { outline: 2px solid #0044FB; outline-offset: 2px; } .dms-a11y-panel__body { flex: 1; overflow-y: auto; padding: 16px 20px; } .dms-a11y-panel__footer { padding: 16px 20px; border-top: 1px solid #E0E0E0; } /* ═══════════════════════════════════════════════ Composant — Groupes ═══════════════════════════════════════════════ */ .dms-a11y-group { border: none; padding: 0; margin: 0 0 20px; } .dms-a11y-group__title { display: block; margin-bottom: 12px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #888; } /* ═══════════════════════════════════════════════ Composant — Toggle switch ═══════════════════════════════════════════════ */ .dms-a11y-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: none; background: transparent; cursor: pointer; font-size: 0.9375rem; color: #1A1A2E; text-align: left; } .dms-a11y-toggle:hover { color: #0044FB; } .dms-a11y-toggle:focus-visible { outline: 2px solid #0044FB; outline-offset: 2px; border-radius: 4px; } .dms-a11y-toggle__label { flex: 1; margin-right: 12px; } .dms-a11y-toggle__track { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 12px; background: #CCC; transition: background-color 0.2s; } .dms-a11y-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s; } .dms-a11y-toggle[aria-checked="true"] .dms-a11y-toggle__track { background: #0044FB; } .dms-a11y-toggle[aria-checked="true"] .dms-a11y-toggle__track::after { transform: translateX(20px); } /* ═══════════════════════════════════════════════ Composant — Radio group ═══════════════════════════════════════════════ */ .dms-a11y-option { padding: 2px 0; } .dms-a11y-option__label { display: block; padding: 10px 0 6px; font-size: 0.9375rem; color: #1A1A2E; } .dms-a11y-radio-group { display: flex; gap: 8px; } .dms-a11y-radio { flex: 1; padding: 8px 12px; border: 2px solid #CCC; border-radius: 6px; background: transparent; cursor: pointer; font-size: 0.875rem; color: #1A1A2E; text-align: center; transition: border-color 0.2s, background-color 0.2s; } .dms-a11y-radio:hover { border-color: #0044FB; } .dms-a11y-radio:focus-visible { outline: 2px solid #0044FB; outline-offset: 2px; } .dms-a11y-radio[aria-checked="true"] { border-color: #0044FB; background: rgba(0, 68, 251, 0.08); font-weight: 700; color: #0044FB; } /* ═══════════════════════════════════════════════ Composant — Bouton reset ═══════════════════════════════════════════════ */ .dms-a11y-reset { display: block; width: 100%; padding: 10px 16px; border: 1px solid #CCC; border-radius: 6px; background: transparent; cursor: pointer; font-size: 0.875rem; color: #666; text-align: center; transition: border-color 0.2s, color 0.2s; } .dms-a11y-reset:hover { border-color: #E74C3C; color: #E74C3C; } .dms-a11y-reset:focus-visible { outline: 2px solid #0044FB; outline-offset: 2px; } /* ═══════════════════════════════════════════════ Mobile — panneau plein écran ═══════════════════════════════════════════════ */ @media (max-width: 480px) { .dms-a11y-panel:not(.dms-a11y-inline) { max-width: 100%; } }