/* ════════════════════════════════════════════════════════════════════ Accessibilité (RGAA) - Journée du Droit Toggles posés sur par assets/js/rgaa-accessibilite.js : .txt-more / .txt-more-2 taille de texte (120% / 140%) .a11y-focus focus visible renforcé .a11y-spacing interlignage + letter/word spacing .a11y-links soulignage forcé des liens .a11y-targets cibles ≥ 44×44 sur boutons/liens .a11y-font-legible police système plus lisible .a11y-reading mode lecture (max-width 70ch, no decor) .a11y-reduce-motion désactive animations/transitions .bg-black-txt-white contraste noir/blanc .bg-blue-txt-yellow contraste bleu/jaune RGAA ════════════════════════════════════════════════════════════════════ */ /* ─── Skip link ─────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: 8px; padding: 10px 14px; background: #000; color: #fff; z-index: 999999; text-decoration: underline; } .skip-link:is(:active, :focus, :focus-visible) { left: 8px; } /* ─── Préférence système (toujours appliquée) ───────────────────── */ @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; } } /* ════════════════════════════════════════════════════════════════════ Tailles de texte ════════════════════════════════════════════════════════════════════ */ html.txt-more { font-size: 120%; } html.txt-more-2 { font-size: 140%; } /* Pictos suivent la taille texte */ html:is(.txt-more, .txt-more-2) .picto { width: auto; height: 1.2em; } /* ════════════════════════════════════════════════════════════════════ Focus visible ════════════════════════════════════════════════════════════════════ */ html :focus-visible { outline: 1px solid currentColor; outline-offset: 0; z-index: 9; } html.a11y-focus :focus-visible { outline: 3px solid currentColor !important; outline-offset: 3px !important; border-radius: 4px !important; z-index: 9; } /* ════════════════════════════════════════════════════════════════════ Espacement texte (confort de lecture / dyslexie) ════════════════════════════════════════════════════════════════════ */ html.a11y-spacing body { line-height: 1.6; letter-spacing: 0.02em; word-spacing: 0.08em; } html.a11y-spacing :is(p, li, td, dd) { max-width: 70ch; } /* ════════════════════════════════════════════════════════════════════ Liens soulignés ════════════════════════════════════════════════════════════════════ */ html.a11y-links { & a, & a[class*="btn"], & a.sidebar-nav-item, & a.no-underline, & button { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.15em !important; } } /* ════════════════════════════════════════════════════════════════════ Cibles agrandies (touch / tremblements) ════════════════════════════════════════════════════════════════════ */ html.a11y-targets :is(a, button, .btn-featured, .btn-black, .btn-error, .btn-good, .btn-ghost) { min-height: 44px; min-width: 44px; } /* ════════════════════════════════════════════════════════════════════ Police lisible (fallback système / dyslexie) ════════════════════════════════════════════════════════════════════ */ html.a11y-font-legible body * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* ════════════════════════════════════════════════════════════════════ Animations réduites ════════════════════════════════════════════════════════════════════ */ html.a11y-reduce-motion, html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ════════════════════════════════════════════════════════════════════ Mode lecture (calmer l'UI) - Supprime ombres/décorations - Limite la largeur du contenu principal à 70ch - Masque sidebars et éléments décoratifs ════════════════════════════════════════════════════════════════════ */ html.a11y-reading *:not(input, select, textarea, .switch) { box-shadow: none !important; } html.a11y-reading { /* Sidebar account/admin masquée pour focus sur le contenu */ .account-sidebar, .sidebar-overlay { display: none !important; } .account-main, .account-content, article, .stepper-header__inner, main { max-width: 70ch !important; margin-inline: auto !important; padding-inline: clamp(16px, 4vw, 48px) !important; } /* Pictos décoratifs et badges arrondis masqués */ .picto, .badge.round, .burger-bar { display: none !important; } /* Cartes : retirer fond contrasté pour réduire le bruit */ .search-result-card, .past-card, .grey-box { background: transparent !important; border: 0 !important; } } /* ════════════════════════════════════════════════════════════════════ Contraste : Noir / Blanc On override les CSS vars du projet pour propager partout, puis on force quelques surfaces qui utilisent des couleurs hardcodées. ════════════════════════════════════════════════════════════════════ */ html.bg-black-txt-white { --color-featured: #ffffff; --color-featured-rgb: 255, 255, 255; --color-black: #ffffff; --color-white: #000000; --gray-50: #000000; --gray-100: #1a1a1a; --gray-200: #2a2a2a; --gray-300: #404040; --gray-400: #808080; --gray-500: #c0c0c0; --gray-700: #e0e0e0; --gray-900: #ffffff; --featured-soft: rgba(255, 255, 255, 0.15); background: #000 !important; color: #fff !important; [class*="text-"], & *{ background: #000 !important; color: #fff !important; } body, .account-layout, .account-sidebar, .account-main, .account-topbar, .stepper-header, .site-header, footer, .bg-white { background: #000 !important; color: #fff !important; } /* Cartes & encadrés : fond noir, bordure blanche pour les distinguer */ [class*="bg-"], .search-result-card, .past-card, .grey-box, .modal-box, .card-header, .card-body { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; box-shadow: none !important; } /* Boutons : tous en outline blanc sur noir */ .btn-featured, .btn-black, .btn-error, .btn-good, .btn-ghost { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* SVG inline */ svg path, svg rect, svg circle, svg polygon { fill: #fff !important; stroke: #fff !important; } /* Images en niveaux de gris */ img:not([src*=".svg"]) { filter: grayscale(1) contrast(1.1) !important; } /* Liens soulignés pour les distinguer */ a:not(.btn-featured, .btn-black, .btn-error, .btn-good, .btn-ghost) { color: #fff !important; text-decoration: underline !important; } /* Champs de formulaire */ input, select, textarea { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } input::placeholder, textarea::placeholder { color: #ccc !important; } /* Switch toggle (overrides du pile/pouce - voir bloc .switch principal) */ input[type="checkbox"].switch { background: #000 !important; border-color: #fff !important; box-shadow: none !important; } input[type="checkbox"].switch::before { background: #fff !important; } input[type="checkbox"].switch:checked { background: #fff !important; border-color: #fff !important; } input[type="checkbox"].switch:checked::before { background: #000 !important; } /* Badge arrondi */ .badge.round { background: #fff !important; color: #000 !important; } } /* ════════════════════════════════════════════════════════════════════ Contraste : Bleu / Jaune (RGAA) ════════════════════════════════════════════════════════════════════ */ html.bg-blue-txt-yellow { --color-featured: #ffff00; --color-featured-rgb: 255, 255, 0; --color-black: #ffff00; --color-white: #0000c0; --gray-50: #0000c0; --gray-100: #1a1ad0; --gray-200: #2a2ad8; --gray-300: #4040e0; --gray-400: #8080ec; --gray-500: #c0c0f4; --gray-700: #e0e0fa; --gray-900: #ffff00; --featured-soft: rgba(255, 255, 0, 0.18); background: #0000c0 !important; color: #ffff00 !important; [class*="text-"]{ background: #0000c0 !important; color: #ffff00 !important; } body, .account-layout, .account-sidebar, .account-main, .account-topbar, .stepper-header, .site-header, footer, .bg-white { background: #0000c0 !important; color: #ffff00 !important; } [class*="bg-"], .search-result-card, .past-card, .grey-box, .modal-box, .card-header, .card-body { background: #0000c0 !important; color: #ffff00 !important; border: 1px solid #ffff00 !important; box-shadow: none !important; } .btn-featured, .btn-black, .btn-error, .btn-good, .btn-ghost { background: #0000c0 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } svg path, svg rect, svg circle, svg polygon { fill: #ffff00 !important; stroke: #ffff00 !important; } img:not([src*=".svg"]) { filter: grayscale(1) contrast(1.1) !important; } a:not([class*="btn-"], .menu-link--cta, .btn-featured, .btn-black, .btn-error, .btn-good, .btn-ghost) { color: #ffff00 !important; text-decoration: underline !important; } input, select, textarea { background: #0000c0 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } input::placeholder, textarea::placeholder { color: #ffff88 !important; } input[type="checkbox"].switch { background: #0000c0 !important; border-color: #ffff00 !important; box-shadow: none !important; } input[type="checkbox"].switch::before { background: #ffff00 !important; } input[type="checkbox"].switch:checked { background: #ffff00 !important; border-color: #ffff00 !important; } input[type="checkbox"].switch:checked::before { background: #0000c0 !important; } .badge.round { background: #ffff00 !important; color: #0000c0 !important; } } /* Quand un thème est actif, on neutralise effets/animations qui posent souvent problème de contraste (parallax, transforms, opacités). */ html:is(.bg-black-txt-white, .bg-blue-txt-yellow) * { transform: none !important; opacity: 1 !important; text-shadow: none !important; } /* ════════════════════════════════════════════════════════════════════ Toolbar d'accessibilité - .a11y-opener : CTA fixe (droite, milieu vertical) → ouvre la popin - .a11y-toolbar : popin ancrée en bas à droite (marge), draggable par son header - .menu-accessibility : grille des options en colonnes (1×3 / 2 / 3) Sélecteurs contractuels avec assets/js/rgaa-accessibilite.js : .menu-accessibility, .a11y-*, .font-size-init/more/more-2, .color-black-white/.color-blue-yellow/.reinit-base-color ════════════════════════════════════════════════════════════════════ */ /* ─── CTA d'ouverture (fixe à droite) ──────────────────────────── */ .a11y-opener { position: fixed; top: 100px; right: 0; z-index: 99998; display: flex; align-items: center; gap: 6px; padding: 8px 12px; /*background: inherit;*/ /*color: inherit;*/ border: 2px solid inherit; border-right: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; & span{ display: none; } } @media (min-width: 1100px) { .a11y-opener { top: calc(45vh - 32px); & span{ display: inline-block; } } } body { &.register, &.login, &.reset-password, &.account { .a11y-opener { position: absolute; top: 10px; right: 5px; } } } @media (max-width: 767px){ body { &.register, &.login, &.reset-password, &.account { .a11y-opener { top: 70px; } } } } .inscription-stepper{ .a11y-opener { position: fixed; top: 90px; right: 0; } } @media (min-width: 1100px) { .inscription-stepper{ .a11y-opener { position: fixed; top: 110px; right: 5px; } } } .a11y-opener svg { width: 24px; height: 24px; } /* ─── Popin draggable ──────────────────────────────────────────── */ /* Position par défaut à chaque ouverture : bas-droite avec marge. Le drag bascule sur .is-dragged + variables --a11y-x/--a11y-y. */ .a11y-toolbar { --a11y-margin: 24px; position: fixed; right: var(--a11y-margin); bottom: var(--a11y-margin); top: auto; left: auto; transform: none; z-index: 99999; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: inherit; color: inherit; border: 2px solid #000; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); } html.bg-blue-txt-yellow{ .a11y-toolbar { border: 4px solid #ffff00; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); } } .a11y-toolbar[hidden] { display: none; } /* Une fois traînée, on bascule en coordonnées fixes ; le JS écrit --a11y-x / --a11y-y et ajoute .is-dragged. On annule explicitement right/bottom pour neutraliser la position par défaut. */ .a11y-toolbar.is-dragged { top: var(--a11y-y); left: var(--a11y-x); right: auto; bottom: auto; transform: none; } .a11y-toolbar__handle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 2px solid #000; cursor: grab; user-select: none; background: var(--gray-50, #f9fafb); } .a11y-toolbar.is-grabbing .a11y-toolbar__handle { cursor: grabbing; } .a11y-toolbar__title { margin: 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .a11y-toolbar__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; } .a11y-toolbar__close:hover { border-color: currentColor; } /* ─── Grille des options ───────────────────────────────────────── */ .menu-accessibility { display: grid; grid-template-columns: 1fr; gap: 8px 16px; list-style: none; margin: 0; padding: 16px; background: inherit; } .menu-accessibility > li { padding: 6px 0; } @media (min-width: 640px) { .menu-accessibility { grid-template-columns: 1fr 1fr; } /* text-size et color-options en pleine largeur */ .menu-accessibility > .text-size, .menu-accessibility > .color-options { grid-column: 1 / -1; } } /* Groupe taille texte */ .menu-accessibility .text-size { display: flex; align-items: center; gap: 8px; } .menu-accessibility .text-size > span { padding: 2px 10px; cursor: pointer; border: 1px solid transparent; border-radius: 4px; line-height: 1; } .menu-accessibility .text-size > span.current { border-color: #000; } .menu-accessibility .font-size-init { font-size: 1rem; } .menu-accessibility .font-size-more { font-size: 1.5rem; } .menu-accessibility .font-size-more-2 { font-size: 2rem; } /* Toggle row (option à switch) */ .menu-accessibility .option label { display: flex; width: 100%; align-items: center; cursor: pointer; gap: 12px; } .menu-accessibility .option label > span { flex: 1; } /* Switch : pile + pouce circulaire qui glisse. Sizes en px → stables quel que soit html.txt-more / txt-more-2. font-size: 0 neutralise toute hérédité rem qui ferait scaler le ::before. */ .menu-accessibility .option input[type="checkbox"].switch { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 45px; width: 45px; height: 25px; margin: 0; padding: 0; background: #fff; border: 2px solid #333; border-radius: 999px; cursor: pointer; box-shadow: none; font-size: 0; transition: background-color .15s ease, border-color .15s ease; } .menu-accessibility .option input[type="checkbox"].switch::before { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; background: #333; transition: left .15s ease, background-color .15s ease; } .menu-accessibility .option input[type="checkbox"].switch:checked { background: var(--color-featured); border-color: var(--color-featured); } .menu-accessibility .option input[type="checkbox"].switch:checked::before { left: calc(100% - 19px); /* 17 (thumb) + 2 (right padding inside border) */ background: #fff; } /* Choix de thème : 3 chips - 1 ligne, 33% chacun */ .menu-accessibility .color-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .menu-accessibility .color-options > * { text-align: center; border: 1px solid #000; padding: 10px; cursor: pointer; border-radius: 4px; } .menu-accessibility .color-black-white { background: #000 !important; color: #fff !important; } .menu-accessibility .color-blue-yellow { background: #0000c0 !important; color: #ffff00 !important; } /* Coches de l'état actif (sans JS, via classes posées sur ) */ html:not(.bg-black-txt-white, .bg-blue-txt-yellow) .menu-accessibility .reinit-base-color::after { content: ' ✔'; } html.bg-black-txt-white .menu-accessibility .color-black-white::after { content: ' ✔'; color: #fff; } html.bg-blue-txt-yellow .menu-accessibility .color-blue-yellow::after { content: ' ✔'; color: #ffff00; }