/* ═════════════════════════════════════════════════════════════════ Ophtapod : module Accessibilité avancée Bouton flottant + panneau de réglages (assets/js/accessibilite.js). S'appuie sur les tokens de :root définis dans main.css (--c-navy, --c-gold, --c-blue-pale, --c-gray, --c-gray-light...). Sommaire : 1. Bouton flottant et panneau (structure, contrôles, responsive) 2. Réduction des animations (classe .op-a11y-reduire-anim) 3. Alignement du texte à gauche (classe .op-a11y-align-left) 4. Contraste renforcé (classe .op-a11y-contrast) 5. Soulignement des liens (classe .op-a11y-soulignement) 6. Taille du texte + interlignage (classes .op-a11y-fs-*, .op-a11y-interligne) ═════════════════════════════════════════════════════════════════ */ /* Le module ne s'affiche que si le JavaScript tourne (classe op-js posée sur par le thème) : sans JS le panneau ne fait rien, autant ne pas afficher un bouton inopérant. */ .op-a11y { display: none; } .op-js .op-a11y { display: contents; } /* ── 1. Bouton flottant ───────────────────────────────────────────── */ .op-a11y__toggle { position: fixed; left: 24px; bottom: 24px; z-index: 9600; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-navy-deep); color: var(--c-white); border: 0; border-radius: 50%; cursor: pointer; transition: opacity 0.3s, box-shadow 0.3s; } .op-a11y__toggle:hover { opacity: 0.85; } .op-a11y__toggle.is-active { box-shadow: 0 0 0 3px var(--c-gold); } .op-a11y__toggle-icon { pointer-events: none; } /* ── 1. Panneau : structure ───────────────────────────────────────── */ .op-a11y__panel[hidden] { display: none; } .op-a11y__panel { position: fixed; left: 24px; bottom: 84px; z-index: 9700; width: min(90vw, 380px); max-height: min(80vh, 640px); background: var(--c-white); border: 1px solid var(--c-gray-light); border-radius: 0; /* Angles droits, comme les autres panneaux du thème (sous-menu, menu mobile). */ box-shadow: 0 2px 16px rgba(21, 39, 63, 0.16); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } .op-a11y__panel.is-open { opacity: 1; transform: translateY(0); } .op-a11y__panel-inner { display: flex; flex-direction: column; max-height: min(80vh, 640px); padding: 22px; overflow-y: auto; } .op-a11y__panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .op-a11y__panel-title { margin: 0; font-size: 20px; line-height: 26px; } .op-a11y__panel-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px -8px 0 0; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--c-navy); cursor: pointer; transition: background-color 0.2s; } .op-a11y__panel-close:hover { background: var(--c-blue-pale); } .op-a11y__intro { margin: 0 0 18px; font-size: 14px; line-height: 20px; /* Gris dédié, plus foncé que --c-gray (~4,25:1, insuffisant à 14px) : le panneau doit rester conforme AA quel que soit l'état du réglage « Contraste renforcé ». Contraste avec le blanc : environ 10,5:1. */ color: #3B3D40; } /* ── 1. Panneau : groupes et légendes ─────────────────────────────── */ .op-a11y__form { display: flex; flex-direction: column; gap: 20px; } .op-a11y__group { margin: 0; padding: 0; border: 0; } .op-a11y__legend { padding: 0 0 10px; font-family: var(--font-title); font-weight: 500; font-size: 15px; color: var(--c-navy); } /* ── 1. Contrôle segmenté (taille du texte, alignement) ─────────────── Un vrai groupe de boutons radio : l'input est visuellement masqué (technique « screen-reader-text », jamais display:none pour rester focalisable) et l'étiquette liée (for/id) sert de face visible du bouton. L'état s'appuie sur :checked et :focus-visible, aucune classe JS n'est nécessaire pour l'affichage. */ .op-a11y__seg { display: flex; flex-wrap: wrap; gap: 8px; } .op-a11y__seg-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .op-a11y__seg-face { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 16px; /* Gris dédié (pas --c-gray-light, trop clair pour délimiter un contrôle actif) : contraste avec le blanc environ 3,3:1. */ border: 1px solid #8B8F94; border-radius: 30px; font-family: var(--font-title); font-weight: 500; font-size: 14px; color: var(--c-navy); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .op-a11y__seg-input:checked + .op-a11y__seg-face { background: var(--grad-gold); border-color: transparent; } .op-a11y__seg-input:focus-visible + .op-a11y__seg-face { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* ── 1. Interrupteurs (contraste, interlignage, soulignement, animations) Vraies cases à cocher, visuellement présentées en interrupteur. Même principe que le contrôle segmenté : l'input est masqué visuellement mais reste dans le flux du clavier, l'étiquette liée porte le style. */ .op-a11y__switches { display: flex; flex-direction: column; gap: 4px; } .op-a11y__switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .op-a11y__switch-label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; } .op-a11y__switch-track { flex: 0 0 auto; position: relative; width: 42px; height: 24px; /* Gris dédié (pas --c-gray-light, trop clair) : contraste avec le blanc environ 3,3:1, pour que l'état « non coché » reste bien visible. */ background: #8B8F94; border-radius: 30px; transition: background-color 0.2s; } .op-a11y__switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--c-white); border-radius: 50%; transition: transform 0.2s; } .op-a11y__switch-input:checked + .op-a11y__switch-label .op-a11y__switch-track { background: var(--c-navy); } .op-a11y__switch-input:checked + .op-a11y__switch-label .op-a11y__switch-thumb { transform: translateX(18px); } .op-a11y__switch-input:focus-visible + .op-a11y__switch-label .op-a11y__switch-track { outline: 2px solid var(--c-gold); outline-offset: 2px; } .op-a11y__switch-text { font-size: 15px; line-height: 20px; color: var(--c-navy); } /* ── 1. Pied de panneau ────────────────────────────────────────────── */ .op-a11y__panel-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-gray-light); } .op-a11y__reset { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: 10px 20px; background: var(--c-blue-pale); border: 0; border-radius: 30px; font-family: var(--font-title); font-weight: 500; font-size: 14px; color: var(--c-navy); cursor: pointer; transition: background-color 0.2s; } .op-a11y__reset:hover { background: var(--c-gray-light); } /* ── 1. Responsive : panneau plein écran ou presque sous 767px ────────── */ @media (max-width: 767px) { .op-a11y__toggle { left: 16px; bottom: 16px; } .op-a11y__panel { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: min(85vh, 720px); } .op-a11y__panel-inner { max-height: min(85vh, 720px); } } /* ── 1. Le module respecte lui-même le mouvement réduit du système ──── */ @media (prefers-reduced-motion: reduce) { .op-a11y__panel { transition: none; } .op-a11y__switch-track, .op-a11y__switch-thumb, .op-a11y__seg-face, .op-a11y__toggle { transition: none; } } /* ═════════════════════════════════════════════════════════════════ 2. Réduction des animations (équivalent manuel de prefers-reduced-motion) Reprend exactement la logique déjà posée dans main.css sous @media (prefers-reduced-motion: reduce), mais déclenchée par une classe plutôt que par le système : permet à une personne de couper les animations du site même si son système ne le signale pas. ═════════════════════════════════════════════════════════════════ */ html.op-a11y-reduire-anim { scroll-behavior: auto !important; } html.op-a11y-reduire-anim .anim-fade, html.op-a11y-reduire-anim .anim-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; } html.op-a11y-reduire-anim *, html.op-a11y-reduire-anim *::before, html.op-a11y-reduire-anim *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ═════════════════════════════════════════════════════════════════ 3. Alignement du texte à gauche Annule les centrages et alignements à droite sur les contenus de lecture (titres, paragraphes, listes...). Volontairement limité aux familles de sélecteurs porteuses de texte de lecture : les conteneurs utilisant text-align uniquement pour centrer une icône ou une image ne sont pas concernés, pour ne pas casser leur mise en page. ═════════════════════════════════════════════════════════════════ */ html.op-a11y-align-left body, html.op-a11y-align-left h1, html.op-a11y-align-left h2, html.op-a11y-align-left h3, html.op-a11y-align-left h4, html.op-a11y-align-left h5, html.op-a11y-align-left h6, html.op-a11y-align-left p, html.op-a11y-align-left li, html.op-a11y-align-left dt, html.op-a11y-align-left dd, html.op-a11y-align-left blockquote, html.op-a11y-align-left blockquote p, html.op-a11y-align-left figcaption, html.op-a11y-align-left legend, html.op-a11y-align-left label, html.op-a11y-align-left .op-eyebrow, html.op-a11y-align-left .op-hero__eyebrow, html.op-a11y-align-left .op-hero__title, html.op-a11y-align-left .op-hero__subtitle, html.op-a11y-align-left .op-hero__sub, html.op-a11y-align-left .op-shortcuts__title, html.op-a11y-align-left .op-shortcut__title, html.op-a11y-align-left .op-shortcut__sub, html.op-a11y-align-left .op-services__title, html.op-a11y-align-left .op-services__text, html.op-a11y-align-left .op-svc-card__title, html.op-a11y-align-left .op-svc-card__text, html.op-a11y-align-left .op-about__title, html.op-a11y-align-left .op-about__intro, html.op-a11y-align-left .op-about__bottom p, html.op-a11y-align-left .op-pathos__title, html.op-a11y-align-left .op-patho-card__title, html.op-a11y-align-left .op-patho-card__text, html.op-a11y-align-left .op-patho-more__title, html.op-a11y-align-left .op-patho-more__text, html.op-a11y-align-left .op-tslide blockquote p, html.op-a11y-align-left .op-tslide figcaption, html.op-a11y-align-left .op-contact-card__title, html.op-a11y-align-left .op-form p, html.op-a11y-align-left .op-news__title, html.op-a11y-align-left .op-news-card__title, html.op-a11y-align-left .op-news-card__date, html.op-a11y-align-left .op-faq-item__question, html.op-a11y-align-left .op-faq-item__panel p, html.op-a11y-align-left .op-footer__title, html.op-a11y-align-left .op-footer__baseline, html.op-a11y-align-left .op-footer__col-title, html.op-a11y-align-left .op-inner-page .entry-title, html.op-a11y-align-left .op-inner-page .page-title, html.op-a11y-align-left .op-inner-page .entry-content, html.op-a11y-align-left .op-post-card .entry-title { text-align: left !important; } /* ═════════════════════════════════════════════════════════════════ 4. Contraste renforcé Le thème centralise ses couleurs dans des variables CSS (:root, dans main.css) : redéfinir ces variables sur .op-a11y-contrast suffit à corriger la couleur partout où elle est utilisée, sans avoir à lister chaque sélecteur. - --c-gray (texte gris courant, #797B7E sur blanc ≈ 4,6:1) devient un gris beaucoup plus foncé (#3B3D40, ≈ 10,5:1 sur blanc). - --c-gray-light (bordures, séparateurs, #DADEE3) devient plus visible. - Le hero (titre + accroche) est la seule zone du site où du texte est posé directement sur une photo : un voile bleu nuit garantit le contraste quelle que soit l'image choisie par le client. ═════════════════════════════════════════════════════════════════ */ html.op-a11y-contrast { --c-gray: #3B3D40; --c-gray-light: #8A8F96; } /* Bordures des champs de formulaire : plus épaisses en plus d'être plus foncées (--c-gray-light renforcé ci-dessus s'applique déjà à la couleur). */ html.op-a11y-contrast .op-form__field input, html.op-a11y-contrast .op-form__field textarea { border-width: 2px; } /* Voile opaque derrière le texte du hero, posé directement sur la photo de fond. position: relative n'a aucun effet sur la disposition en flex déjà en place : cela ne fait qu'ancrer le voile en position absolue. */ html.op-a11y-contrast .op-hero { position: relative; } html.op-a11y-contrast .op-hero::before { content: ''; position: absolute; inset: 0; background: rgba(21, 39, 63, 0.72); pointer-events: none; } html.op-a11y-contrast .op-hero__top, html.op-a11y-contrast .op-hero__bottom { position: relative; } /* ═════════════════════════════════════════════════════════════════ 5. Soulignement de tous les liens Le thème retire le soulignement par défaut (a { text-decoration: none }) et compte sur la couleur pour distinguer les liens : utile pour la majorité, insuffisant pour une partie de la patientèle malvoyante ou daltonienne. !important est volontaire ici : le réglage doit primer sur tous les styles de liens du thème, y compris les plus spécifiques. ═════════════════════════════════════════════════════════════════ */ html.op-a11y-soulignement a { text-decoration: underline !important; text-underline-offset: 3px; } /* ═════════════════════════════════════════════════════════════════ 6. Taille du texte et interlignage ───────────────────────────────────────────────────────────────── Le thème exprime toutes ses tailles de police en rem (voir main.css et home.css), donc la mise à l'échelle tient en trois règles : on change la taille de référence du document, et tout le texte suit. Aucun sélecteur du thème n'est dupliqué ici, et les modèles de page ajoutés plus tard sont couverts automatiquement s'ils utilisent rem. Les deux titres du hero sont fluides (en vw) pour coller à la référence : ils suivent l'échelle par la variable --op-display, définie ci-dessous. Restent volontairement à taille fixe : le mot défilant du marquee et le grand nom du footer, qui déborderaient s'ils suivaient l'agrandissement, ainsi que ce panneau lui-même, qui doit garder une taille stable pour rester utilisable. ═════════════════════════════════════════════════════════════════ */ html.op-a11y-fs-115 { font-size: 115%; --op-display: 1.15; } html.op-a11y-fs-130 { font-size: 130%; --op-display: 1.3; } html.op-a11y-fs-150 { font-size: 150%; --op-display: 1.5; } /* Interlignage : appliqué largement aux contenus de lecture. Le confort prime ici sur la fidélité à la maquette, d'où le !important. */ html.op-a11y-interligne p, html.op-a11y-interligne li, html.op-a11y-interligne dd, html.op-a11y-interligne figcaption, html.op-a11y-interligne .op-shortcut__sub, html.op-a11y-interligne .op-counter__label, html.op-a11y-interligne .op-footer__col a { line-height: 1.9 !important; } html.op-a11y-interligne h1, html.op-a11y-interligne h2, html.op-a11y-interligne h3, html.op-a11y-interligne h4, html.op-a11y-interligne h5, html.op-a11y-interligne .op-shortcut__title, html.op-a11y-interligne .op-faq-item__question { line-height: 1.35 !important; } /* Composants dont la hauteur est figée dans la maquette : ils passent en hauteur automatique dès qu'une taille de texte est active, sinon le texte agrandi déborderait (et serait même invisible pour .op-patho-more, qui masque son débordement). Les minimums sont en rem pour suivre l'échelle. */ html[class*="op-a11y-fs-"] .op-form__field input { height: auto; min-height: 3.0625rem; } html[class*="op-a11y-fs-"] .op-shortcut { height: auto; min-height: 4.125rem; padding-block: 8px; } html[class*="op-a11y-fs-"] .op-patho-card, html[class*="op-a11y-fs-"] .op-patho-more { height: auto; min-height: 22rem; } html[class*="op-a11y-fs-"] .op-header__nav li > a { height: auto; min-height: 2.625rem; padding-block: 6px; } html[class*="op-a11y-fs-"] .op-header__nav > ul { height: auto; min-height: 3.125rem; flex-wrap: wrap; }