/* =================================================================== a11y.css — Panneau « Confort de lecture » + réglages d'accessibilité. 100 % maison, local au site (le thème mutualisé n'est pas touché). Deux parties : 1. RÉGLAGES appliqués via des data-attributes sur (posés par a11y.js d'après les préférences enregistrées en localStorage). 2. UI du panneau (bouton + dialogue), bâtie avec les variables du thème. À charger APRÈS le CSS du site. Cf. js/a11y.js. =================================================================== */ /* Couleurs locales au panneau (indépendantes des tokens des composants). */ :root { --a11y-focus: #70BD95; /* anneau de focus (lisible sur fond sombre) */ --a11y-border: #7d86a0; /* bordure de contrôle >= 3:1 (sombre) */ --a11y-on: #2c7a56; /* fond « actif » : texte blanc lisible (5.22:1) */ } [data-theme="light"] { --a11y-focus: #2a6e4e; --a11y-border: #7e8ba1; } /* ===================== 1. RÉGLAGES UTILISATEUR ===================== */ /* Taille du texte : zoom du contenu (fiable y compris sur les tailles en px). */ html[data-a11y-text="L"] body { zoom: 1.15; } html[data-a11y-text="XL"] body { zoom: 1.30; } /* Interligne : sur le corps + relance explicite sur la prose (certains éléments fixent leur propre line-height). */ html[data-a11y-line="1"] body { line-height: 1.8; } html[data-a11y-line="2"] body { line-height: 2.1; } html[data-a11y-line="1"] :is(p, li, dd, .sec-desc, .lede, .note, .feature p, .step p, .callout p, td, .comp-card__desc) { line-height: 1.8; } html[data-a11y-line="2"] :is(p, li, dd, .sec-desc, .lede, .note, .feature p, .step p, .callout p, td, .comp-card__desc) { line-height: 2.1; } /* Espacement des lettres et des mots. */ html[data-a11y-letter="1"] body { letter-spacing: 0.06em; word-spacing: 0.08em; } html[data-a11y-letter="2"] body { letter-spacing: 0.12em; word-spacing: 0.16em; } /* Largeur de lecture : raccourcit la longueur de ligne des blocs de prose. */ html[data-a11y-width="narrow"] :is(.content, .pe-main, .gallery-head, #skills, #projects, #composants) { max-width: 72ch; margin-left: auto; margin-right: auto; } /* Police plus lisible (le code garde sa police à chasse fixe). */ html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] button, html[data-a11y-font="readable"] input, html[data-a11y-font="readable"] select, html[data-a11y-font="readable"] textarea { font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif !important; } html[data-a11y-font="readable"] :is(code, pre, .mono, .comp-card__title, .hero h1 .mono) { font-family: "Consolas", "SFMono-Regular", monospace !important; } /* Contraste renforcé : éclaircit (sombre) / fonce (clair) les textes secondaires et renforce les bordures. */ html[data-a11y-contrast="more"] { --text-dim: #c2ccd8; --text-dim-strong: #d4dce6; --border: #5a6f8f; --border-light: #6f86a8; --ui-border: #93a1bb; } html[data-a11y-contrast="more"][data-theme="light"] { --text-dim: #303a47; --text-dim-strong: #2a333f; --border: #6b7c93; --border-light: #56677e; --ui-border: #5f7088; } /* Réduire les animations (en plus du respect natif de prefers-reduced-motion). */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="off"] :is(.project-card, .skill-item, .composants-promo, .intro-image, .logo, .feature, .comp-card, .cal-mock):hover { transform: none; } /* Verrou de défilement quand le panneau est ouvert. */ html.a11y-open { overflow: hidden; } /* ========================= 2. UI DU PANNEAU ======================= */ /* Bouton déclencheur (rangé dans #toolbar, à côté du toggle de thème). */ .a11y-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius, 6px); color: var(--text-dim); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .a11y-btn:hover { color: var(--text-light); background: var(--bg-panel); } .a11y-btn:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } .a11y-btn svg { width: 20px; height: 20px; display: block; } /* Voile + dialogue. */ .a11y-overlay { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(0, 0, 0, 0.5); } .a11y-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 24px; overflow: auto; } .a11y-dialog { width: 100%; max-width: 440px; background: var(--bg-sidebar); color: var(--text-light); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 16px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); } .a11y-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .a11y-dialog__head h2 { margin: 0; font-size: 1.15rem; color: var(--text-light); } .a11y-dialog__intro { margin: 6px 0 16px; font-size: 0.85rem; line-height: 1.55; color: var(--text-dim); } .a11y-close { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; background: none; border: none; border-radius: var(--radius, 6px); font-size: 26px; line-height: 1; color: var(--text-dim); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .a11y-close:hover { color: var(--text-light); background: var(--bg-panel); } .a11y-close:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } .a11y-group { margin-bottom: 14px; } .a11y-legend { display: block; margin-bottom: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; } .a11y-row > span { font-size: 0.9rem; color: var(--text-light); } /* Groupes de choix exclusif (radiogroup). */ .a11y-seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg-panel); border: 1px solid var(--a11y-border); border-radius: 8px; padding: 3px; } .a11y-seg button { flex: 1 1 auto; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); background: none; border: none; border-radius: 6px; padding: 7px 10px; min-height: 30px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .a11y-seg button:hover { color: var(--text-light); } .a11y-seg button[aria-checked="true"] { background: var(--a11y-on); color: #fff; } .a11y-seg button:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } /* Interrupteurs (toggle). */ .a11y-switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; } .a11y-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .a11y-switch .tk { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--a11y-border); transition: all 0.15s ease; } .a11y-switch .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); transition: all 0.15s ease; } .a11y-switch input:checked + .tk { background: #3a9e6f; border-color: #3a9e6f; } .a11y-switch input:checked + .tk::after { background: #fff; transform: translateX(16px); } .a11y-switch input:focus-visible + .tk { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } .a11y-actions { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); } .a11y-reset { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); background: none; border: 1px solid var(--a11y-border); border-radius: var(--radius, 6px); padding: 8px 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .a11y-reset:hover { color: var(--text-light); border-color: var(--a11y-focus); } .a11y-reset:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .a11y-btn, .a11y-close, .a11y-seg button, .a11y-switch .tk, .a11y-switch .tk::after, .a11y-reset { transition-duration: 0.001ms; } }