/** * Eclolink A11y — styles de la boîte à outils et des adaptations visuelles. * Les classes .ecl-a11y-* sont posées sur . La boîte à outils est * protégée des adaptations globales (police/espacement) pour rester lisible. */ :root { --ecl-a11y-accent: #1f5c4a; } /* ========================================================================= * 1. Lien d'évitement (skip link) * ====================================================================== */ .ecl-a11y-skip { position: absolute; left: -9999px; top: 0; z-index: 1000001; background: var(--ecl-a11y-accent); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 6px 0; font: 600 15px/1.2 system-ui, sans-serif; text-decoration: none; } .ecl-a11y-skip:focus { left: 0; outline: 3px solid #fff; outline-offset: -6px; } /* ========================================================================= * 2. Bouton déclencheur + panneau * ====================================================================== */ .ecl-a11y-trigger { position: fixed; bottom: 20px; z-index: 1000000; height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: none; border-radius: 999px; background: var(--ecl-a11y-accent); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / 28%); font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; } .ecl-a11y-trigger__icon { flex-shrink: 0; } .ecl-a11y-trigger__label { white-space: nowrap; } .ecl-a11y-trigger--right { right: 20px; } .ecl-a11y-trigger--left { left: 20px; } .ecl-a11y-trigger:hover { filter: brightness(1.1); } .ecl-a11y-panel { position: fixed; bottom: 84px; z-index: 1000000; width: min(340px, calc(100vw - 32px)); max-height: min(78vh, 640px); overflow-y: auto; background: #fff; color: #14110f; border-radius: 12px; box-shadow: 0 10px 40px rgb(0 0 0 / 28%); /* Protégé des adaptations globales (police/espacement héritées). */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 15px !important; line-height: 1.4 !important; letter-spacing: normal !important; word-spacing: normal !important; } .ecl-a11y-panel * { font-family: inherit !important; letter-spacing: inherit !important; word-spacing: inherit !important; } .ecl-a11y-panel--right { right: 20px; } .ecl-a11y-panel--left { left: 20px; } .ecl-a11y-panel[hidden] { display: none; } .ecl-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e6e3df; position: sticky; top: 0; background: #fff; z-index: 1; } .ecl-a11y-panel__title { margin: 0; font-size: 17px; font-weight: 700; } .ecl-a11y-panel__close { border: none; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: #6b665f; padding: 0 4px; } .ecl-a11y-panel__close:hover { color: #14110f; } .ecl-a11y-panel__body { padding: 12px 16px 16px; } /* --- Lignes de contrôle --- */ .ecl-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0eeeb; } .ecl-a11y-row--stack { flex-direction: column; align-items: stretch; } .ecl-a11y-row__label { font-weight: 600; } /* --- Stepper (taille / espacement) --- */ .ecl-a11y-stepper { display: inline-flex; align-items: center; gap: 8px; } .ecl-a11y-stepper__val { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; color: #6b665f; } .ecl-a11y-step { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #d9d6d1; background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: #14110f; } .ecl-a11y-step:hover { border-color: var(--ecl-a11y-accent); color: var(--ecl-a11y-accent); } /* --- Segmented (police / contraste / daltonisme) --- */ .ecl-a11y-seg { display: flex; flex-wrap: wrap; gap: 6px; } .ecl-a11y-seg__btn { flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; border: 1.5px solid #d9d6d1; background: #fff; cursor: pointer; font: inherit; color: #14110f; } .ecl-a11y-seg__btn:hover { border-color: var(--ecl-a11y-accent); } .ecl-a11y-seg__btn.is-active { background: var(--ecl-a11y-accent); border-color: var(--ecl-a11y-accent); color: #fff; } /* --- Interrupteur --- */ .ecl-a11y-toggle { position: relative; flex-shrink: 0; display: inline-flex; } .ecl-a11y-toggle__input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; } .ecl-a11y-toggle__track { width: 46px; height: 26px; border-radius: 999px; background: #d9d6d1; position: relative; transition: background 150ms ease; } .ecl-a11y-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 150ms ease; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); } .ecl-a11y-toggle__input:checked + .ecl-a11y-toggle__track { background: var(--ecl-a11y-accent); } .ecl-a11y-toggle__input:checked + .ecl-a11y-toggle__track::after { transform: translateX(20px); } /* --- Réinitialiser + déclaration --- */ .ecl-a11y-reset { display: block; width: 100%; margin-top: 14px; padding: 10px; border: 1.5px solid #d9d6d1; border-radius: 8px; background: #f5f4f2; cursor: pointer; font: 600 15px/1.2 inherit; color: #14110f; } .ecl-a11y-reset:hover { border-color: var(--ecl-a11y-accent); color: var(--ecl-a11y-accent); } .ecl-a11y-declaration { display: block; margin-top: 12px; text-align: center; color: var(--ecl-a11y-accent); font-weight: 600; } /* --- Focus visible homogène --- */ .ecl-a11y-trigger:focus-visible, .ecl-a11y-panel button:focus-visible, .ecl-a11y-panel a:focus-visible, .ecl-a11y-toggle__input:focus-visible + .ecl-a11y-toggle__track { outline: 3px solid var(--ecl-a11y-accent); outline-offset: 2px; } /* ========================================================================= * 3. Guide de lecture * ====================================================================== */ .ecl-a11y-guide { position: fixed; left: 0; right: 0; top: 0; height: 42px; margin-top: -21px; pointer-events: none; z-index: 999999; background: rgb(255 221 51 / 22%); border-top: 2px solid rgb(0 0 0 / 45%); border-bottom: 2px solid rgb(0 0 0 / 45%); } /* ========================================================================= * 4. Adaptations globales (posées sur ) * ====================================================================== */ /* --- Espacement du texte (propriétés héritées) --- */ html.ecl-a11y-spacing-1 body { line-height: 1.7 !important; letter-spacing: .04em !important; word-spacing: .08em !important; } html.ecl-a11y-spacing-2 body { line-height: 2 !important; letter-spacing: .09em !important; word-spacing: .16em !important; } html.ecl-a11y-spacing-3 body { line-height: 2.3 !important; letter-spacing: .14em !important; word-spacing: .28em !important; } html.ecl-a11y-spacing-2 body :is(p, li) { margin-block: 1em !important; } html.ecl-a11y-spacing-3 body :is(p, li) { margin-block: 1.4em !important; } /* --- Police --- * On force la famille sur TOUT le contenu (éléments hérités ET ceux qui * déclarent leur propre font-family : titres, boutons…), en épargnant : * - notre propre interface (.ecl-a11y-panel / .ecl-a11y-trigger), * - les polices d'icônes (Dashicons, Font Awesome, Material Icons…). * On surcharge aussi les tokens de police courants pour les thèmes qui * pilotent leur typo par variables CSS. */ html.ecl-a11y-font-read { --mm-font-base: Verdana, "Segoe UI", Tahoma, Arial, sans-serif; --mm-font-sans: Verdana, "Segoe UI", Tahoma, Arial, sans-serif; --mm-font-serif: Verdana, "Segoe UI", Tahoma, Arial, sans-serif; } html.ecl-a11y-font-dys { --mm-font-base: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif; --mm-font-sans: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif; --mm-font-serif: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif; } html.ecl-a11y-font-read body :not( .ecl-a11y-panel, .ecl-a11y-panel *, .ecl-a11y-trigger, .ecl-a11y-trigger *, .dashicons, [class*="dashicons-"], .fa, .fas, .far, .fab, .fal, .fad, [class*="fa-"], .material-icons, [class^="icon-"], [class*=" icon-"], svg, svg * ) { font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif !important; } html.ecl-a11y-font-dys body :not( .ecl-a11y-panel, .ecl-a11y-panel *, .ecl-a11y-trigger, .ecl-a11y-trigger *, .dashicons, [class*="dashicons-"], .fa, .fas, .far, .fab, .fal, .fad, [class*="fa-"], .material-icons, [class^="icon-"], [class*=" icon-"], svg, svg * ) { font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important; } html.ecl-a11y-font-dys body { letter-spacing: .03em; } /* --- Contraste (filtres sur la racine) --- */ html.ecl-a11y-contrast-high { filter: contrast(1.45); } html.ecl-a11y-contrast-dark { filter: invert(0.92) hue-rotate(180deg); background: #0e0e0e; } html.ecl-a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); } /* On ré-inverse les médias et notre UI pour qu'ils restent naturels. */ html.ecl-a11y-contrast-dark :is(img, video, iframe, svg, .ecl-a11y-panel, .ecl-a11y-trigger), html.ecl-a11y-contrast-invert :is(img, video, iframe, svg, .ecl-a11y-panel, .ecl-a11y-trigger) { filter: invert(1) hue-rotate(180deg); } /* --- Daltonisme (filtres SVG) --- */ html.ecl-a11y-cb[data-ecl-cb="prot"] body { filter: url(#ecl-cb-prot); } html.ecl-a11y-cb[data-ecl-cb="deut"] body { filter: url(#ecl-cb-deut); } html.ecl-a11y-cb[data-ecl-cb="trit"] body { filter: url(#ecl-cb-trit); } /* --- Surlignage des liens --- */ html.ecl-a11y-links a:not(.ecl-a11y-trigger):not(.ecl-a11y-skip):not(.ecl-a11y-declaration) { text-decoration: underline !important; text-underline-offset: 2px; outline: 2px solid #ffbf00; outline-offset: 1px; background: rgb(255 191 0 / 18%); font-weight: 600; } /* --- Surlignage des titres --- */ html.ecl-a11y-headings :is(h1, h2, h3, h4, h5, h6):not(.ecl-a11y-panel__title) { outline: 2px dashed var(--ecl-a11y-accent); outline-offset: 3px; background: rgb(31 92 74 / 8%); } /* --- Gros curseur --- */ html.ecl-a11y-bigcursor, html.ecl-a11y-bigcursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 18-13 3 8 15-6 3-8-15-11 8z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } /* --- Arrêt des animations --- */ html.ecl-a11y-noanim *, html.ecl-a11y-noanim *::before, html.ecl-a11y-noanim *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* ========================================================================= * 5. Responsive * ====================================================================== */ @media (max-width: 480px) { .ecl-a11y-panel { width: calc(100vw - 24px); bottom: 74px; } .ecl-a11y-trigger { height: 44px; padding: 0 14px; bottom: 14px; font-size: 14px !important; } .ecl-a11y-trigger--right, .ecl-a11y-panel--right { right: 12px; } .ecl-a11y-trigger--left, .ecl-a11y-panel--left { left: 12px; } }