/*! * a11y-system.css — Feuille système d'accessibilité (page-type: share). * * Deux rôles complémentaires : * A. Respect des PRÉFÉRENCES SYSTÈME de l'utilisateur, détectées par les * media queries `prefers-reduced-motion`, `prefers-contrast` et * `prefers-reduced-transparency`. C'est la « feuille système dédiée » * demandée : elle s'applique automatiquement, sans aucune interaction. * B. Support du WIDGET D'ACCESSIBILITÉ optionnel : styles de l'interface * (bouton flottant + panneau) et classes de préférences utilisateur * posées sur par a11y.js (taille texte, espacement, contraste, * police lisible, animations off, curseur agrandi, mode lecture). * * Persistance : 100 % via localStorage (géré par a11y.js) — AUCUN cookie. * Réutilise les tokens de palette du CSS global (style..css). */ /* ========================================================================= * 0. Variable d'échelle typographique (curseur du widget « taille texte »). * Valeur par défaut = 1 → aucun changement de rendu tant que le widget * ne l'a pas modifiée. Les overrides ci-dessous (spécificité (0,2,0)) * priment sur les styles px/clamp scopés de la page (spécificité (0,1,0)), * donc calc(... * 1) reproduit exactement le rendu de base. * ===================================================================== */ :root { --a11y-font-scale: 1; } body.page-share .share-hero__lede { font-size: calc(clamp(15px, 1.6vw, 18px) * var(--a11y-font-scale, 1)); } body.page-share .share-cause__text, body.page-share .share-capsule__input { font-size: calc(14px * var(--a11y-font-scale, 1)); } body.page-share .share-capsule__label, body.page-share .share-sep, body.page-share .share-header__back, body.page-share .share-header__sign { font-size: calc(12px * var(--a11y-font-scale, 1)); } /* ========================================================================= * 1. Focus visible UNIVERSEL — garantit un anneau de focus net sur TOUS les * éléments interactifs (clavier), au-delà des règles dédiées du CSS global. * ===================================================================== */ body.page-share a:focus-visible, body.page-share button:focus-visible, body.page-share input:focus-visible, body.page-share select:focus-visible, body.page-share textarea:focus-visible, body.page-share [tabindex]:focus-visible, body.page-share [role="switch"]:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; } /* ========================================================================= * A. PRÉFÉRENCES SYSTÈME (automatiques) * ===================================================================== */ /* --- A.1 Réduction des animations ------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.page-share, body.page-share *, body.page-share *::before, body.page-share *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- A.2 Contraste renforcé ------------------------------------------- */ @media (prefers-contrast: more) { body.page-share { --text-dim: #f4ecd8; --text-mute: #d8d0bc; --border-strong: rgba(239, 68, 68, 0.7); } body.page-share .share-card, body.page-share .share-capsule__input, body.page-share .share-net, body.page-share .share-cause { border-width: 2px; } body.page-share .share-hero__lede, body.page-share .share-cause__text { color: var(--text); } body.page-share a, body.page-share .share-net { text-decoration-thickness: from-font; } } /* --- A.3 Transparence réduite ----------------------------------------- */ @media (prefers-reduced-transparency: reduce) { body.page-share .share-header { background: var(--bg-0); -webkit-backdrop-filter: none; backdrop-filter: none; } body.page-share .share-bg { display: none; } body.page-share .share-card { background: var(--bg-1); } body.page-share .share-capsule__input, body.page-share .share-net { background: var(--bg-0); } body.page-share .a11y-fab, body.page-share .a11y-panel { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ========================================================================= * B. CLASSES DE PRÉFÉRENCES UTILISATEUR (posées sur par a11y.js) * ===================================================================== */ /* --- B.1 Espacement du texte (lisibilité) ----------------------------- */ html.a11y-spacing body.page-share p, html.a11y-spacing body.page-share li, html.a11y-spacing body.page-share label, html.a11y-spacing body.page-share .share-hero__lede, html.a11y-spacing body.page-share .share-cause__text { line-height: 1.9 !important; letter-spacing: 0.06em !important; word-spacing: 0.16em !important; } /* --- B.2 Contraste élevé (forcé par le widget) ------------------------ */ html.a11y-contrast body.page-share { --text: #ffffff; --text-dim: #f4ecd8; --text-mute: #e6dfca; --accent-text: #ff6b6b; --border-strong: rgba(255, 107, 107, 0.75); } html.a11y-contrast body.page-share .share-card { background: #000; } html.a11y-contrast body.page-share .share-capsule__input, html.a11y-contrast body.page-share .share-net { background: #0a0a0a; border-width: 2px; } html.a11y-contrast body.page-share .share-hero__lede, html.a11y-contrast body.page-share .share-cause__text { color: var(--text); } /* --- B.3 Police lisible ----------------------------------------------- */ html.a11y-readable-font body.page-share, html.a11y-readable-font body.page-share .display, html.a11y-readable-font body.page-share h1, html.a11y-readable-font body.page-share h2, html.a11y-readable-font body.page-share h3, html.a11y-readable-font body.page-share p, html.a11y-readable-font body.page-share input, html.a11y-readable-font body.page-share button, html.a11y-readable-font body.page-share label, html.a11y-readable-font body.page-share .eyebrow, html.a11y-readable-font body.page-share .share-header__back, html.a11y-readable-font body.page-share .share-header__sign, html.a11y-readable-font body.page-share .share-capsule__label, html.a11y-readable-font body.page-share .share-sep { font-family: "Atkinson Hyperlegible", "Verdana", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* --- B.4 Animations désactivées (réplique B.1 système, mais à la demande) */ html.a11y-no-animations body.page-share, html.a11y-no-animations body.page-share *, html.a11y-no-animations body.page-share *::before, html.a11y-no-animations body.page-share *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* --- B.5 Curseur agrandi ---------------------------------------------- */ /* Grande flèche SVG (data URI) — point chaud en haut-gauche. */ html.a11y-big-cursor body.page-share, html.a11y-big-cursor body.page-share * { 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='M6 4l30 18-12 3 7 14-5 2-7-14-9 8z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } html.a11y-big-cursor body.page-share a, html.a11y-big-cursor body.page-share button, html.a11y-big-cursor body.page-share [role="switch"], html.a11y-big-cursor body.page-share label, html.a11y-big-cursor body.page-share .share-net { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M16 22v-9a3 3 0 0 1 6 0v8' fill='%23000'/%3E%3Cpath d='M22 16a3 3 0 0 1 6 0v4' fill='%23000'/%3E%3Cpath d='M28 17a3 3 0 0 1 6 0v3' fill='%23000'/%3E%3Cpath d='M34 19a3 3 0 0 1 6 0v9a12 12 0 0 1-12 12h-4a10 10 0 0 1-8-4l-6-9a3 3 0 0 1 5-3l3 3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 18 4, pointer !important; } /* --- B.6 Mode lecture -------------------------------------------------- */ /* Épure : fond uni, ornements masqués, contenu recentré et aéré. */ html.a11y-reading-mode body.page-share { background: #0c0c0c; } html.a11y-reading-mode body.page-share .share-bg { display: none; } html.a11y-reading-mode body.page-share .share-card__star, html.a11y-reading-mode body.page-share .share-card::before { display: none; } html.a11y-reading-mode body.page-share .share-header { background: var(--bg-0); -webkit-backdrop-filter: none; backdrop-filter: none; } html.a11y-reading-mode body.page-share .share-card { background: #111; box-shadow: none; border-color: rgba(244, 236, 216, 0.25); } html.a11y-reading-mode body.page-share .share-hero__lede, html.a11y-reading-mode body.page-share .share-cause__text { color: #f4ecd8; line-height: 1.85; } html.a11y-reading-mode body.page-share .share-capsule__input, html.a11y-reading-mode body.page-share .share-net { background: #0a0a0a; } /* Élément en cours de lecture audio (TTS) — surlignage discret. */ html body.page-share .a11y-speaking { outline: 2px dashed var(--accent-text); outline-offset: 3px; background: var(--accent-soft); border-radius: 4px; } /* ========================================================================= * C. INTERFACE DU WIDGET D'ACCESSIBILITÉ * ===================================================================== */ /* Conteneur (masqué tant que JS n'a pas activé le widget). */ .a11y-widget[hidden] { display: none !important; } /* Bouton flottant (FAB) — coin bas-gauche pour ne pas heurter le toast (bas-centre) ni le partage natif. */ .a11y-fab { position: fixed; left: clamp(14px, 4vw, 28px); bottom: clamp(14px, 4vw, 28px); z-index: 120; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--accent-deep) 0%, #5e0707 100%); color: var(--text); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.85); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .a11y-fab:hover { transform: translateY(-2px); } .a11y-fab svg { width: 26px; height: 26px; } /* Panneau d'options. */ .a11y-panel { position: fixed; left: clamp(14px, 4vw, 28px); bottom: clamp(74px, 11vw, 92px); z-index: 121; width: min(330px, calc(100vw - 28px)); max-height: min(76vh, 620px); overflow-y: auto; padding: 18px; background: rgba(16, 8, 8, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9); color: var(--text); } .a11y-panel[hidden] { display: none !important; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .a11y-panel__title { margin: 0; font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .a11y-panel__close { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .a11y-panel__close:hover { color: var(--accent-text); border-color: var(--accent-text); } .a11y-panel__close svg { width: 16px; height: 16px; } .a11y-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } /* Ligne d'option (label à gauche, contrôle à droite). */ .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid rgba(196, 30, 30, 0.22); border-radius: 10px; background: rgba(10, 5, 5, 0.55); } .a11y-row__label { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); } .a11y-row__label svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); } /* Interrupteur (role="switch"). */ .a11y-switch { flex: none; width: 44px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(10, 5, 5, 0.8); position: relative; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform 0.2s ease, background 0.2s ease; } .a11y-switch[aria-checked="true"] { background: linear-gradient(180deg, #1f7a32 0%, #0f4d1f 100%); border-color: #2f9d4a; } .a11y-switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; } /* Stepper « taille texte ». */ .a11y-stepper { display: inline-flex; align-items: center; gap: 8px; } .a11y-stepper__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(10, 5, 5, 0.7); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .a11y-stepper__btn:hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent-text); } .a11y-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; } .a11y-stepper__value { min-width: 44px; text-align: center; font-family: var(--font-stencil); font-size: 13px; color: var(--text); } /* Bouton « Lire la page » (TTS) — pleine largeur. */ .a11y-tts { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(10, 5, 5, 0.6); color: var(--text); font-size: 14px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .a11y-tts:hover { color: var(--accent-text); border-color: var(--accent-text); } .a11y-tts svg { width: 18px; height: 18px; flex: none; } .a11y-tts.is-speaking { background: linear-gradient(180deg, var(--accent-deep) 0%, #5e0707 100%); color: var(--text); } /* Bouton de réinitialisation. */ .a11y-reset { width: 100%; margin-top: 10px; padding: 9px; border-radius: 10px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-dim); font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .a11y-reset:hover { color: var(--accent-text); border-color: var(--accent-text); } /* Réduction de mouvement : neutralise aussi les transitions du widget. */ @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-switch, .a11y-switch::after, .a11y-stepper__btn, .a11y-tts, .a11y-reset, .a11y-panel__close { transition: none; } }