/* ============================================================ ACCESSIBILITY — BOUTON CONTRASTE & MODE HAUT CONTRASTE Cabinet Dr. Meliani Samira ============================================================ La palette V3 du thème est déjà accessible (WCAG AA/AAA). Le mode haut contraste pousse vers l'extrême (AAA renforcé). Référence couleurs : V3 normal → Haut contraste #1a5fa8 → #0A3872 (bleu principal | ratio ≈ 11.7:1 sur blanc) #0e4a8a → #061A40 (bleu foncé | ratio ≈ 17:1 sur blanc) #5A3D0A → #5A3D0A (or | ratio ≈ 9.5:1 sur blanc) #f8f9fb → #FFFFFF (fond | blanc pur) #2A2A2A → #000000 (texte | noir pur, 21:1) #555555 → #111111 (texte moyen | ratio ≈ 18:1) #6b6b6b → #3D3D3D (texte clair | ratio ≈ 9.5:1) ============================================================ */ /* ── BOUTON ACCESSIBILITÉ ────────────────────────────────── */ .a11y-contrast-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 2px solid var(--c-border); border-radius: var(--r-full); color: var(--c-primary-dark); cursor: pointer; transition: var(--transition); flex-shrink: 0; /* Alignement vertical avec les autres éléments du header */ vertical-align: middle; } .a11y-contrast-btn svg { width: 18px; height: 18px; display: block; flex-shrink: 0; pointer-events: none; } .a11y-contrast-btn:hover { background: var(--c-primary-light); border-color: var(--c-primary); color: var(--c-primary-dark); } .a11y-contrast-btn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; } /* État actif (haut contraste ON) */ .a11y-contrast-btn[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary-dark); color: var(--c-white); } .a11y-contrast-btn[aria-pressed="true"]:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); } /* ── MODE HAUT CONTRASTE ─────────────────────────────────── */ /* La classe .high-contrast est ajoutée sur par JS. On surcharge uniquement les variables CSS et quelques propriétés qui ne passent pas par les variables, en restant dans la même famille chromatique bleue du thème. */ html.high-contrast { /* Bleu principal : #1a5fa8 → #0A3872 (ratio ≈ 11.7:1 / blanc) */ --c-primary: #0A3872; --c-primary-dark: #061A40; --c-primary-light: #C5DEF4; /* Accents bleus */ --c-accent: #0A3872; --c-accent-light: #D8EAF7; /* Or : #5A3D0A → #5A3D0A (ratio ≈ 9.5:1 / blanc) */ --c-gold: #5A3D0A; --c-gold-dark: #5A3D0A; --c-gold-light: #F5E8CC; /* Fonds : snow #f8f9fb → blanc pur */ --c-bg: #FFFFFF; --c-bg-alt: #E0EEF8; --c-white: #FFFFFF; /* Bordures : bleu bien visible */ --c-border: #0A3872; /* Textes : renforcés */ --c-text: #000000; /* 21:1 */ --c-text-md: #111111; /* 18:1 */ --c-text-light: #3D3D3D; /* 9.5:1 */ /* Ombres : légèrement renforcées */ --shadow-sm: 0 1px 3px rgba(0,0,0,.18); --shadow-md: 0 4px 16px rgba(0,0,0,.22); --shadow-lg: 0 8px 32px rgba(0,0,0,.26); --shadow-xl: 0 16px 48px rgba(0,0,0,.30); } /* ── Surcharges ciblées ──────────────────────────────────── Pour les éléments qui utilisent des valeurs codées en dur plutôt que des variables CSS. ────────────────────────────────────────────────────────── */ /* Base */ html.high-contrast body { background-color: #FFFFFF; color: #000000; } html.high-contrast a { color: #0A3872; } html.high-contrast a:hover, html.high-contrast a:focus { color: #061A40; text-decoration: underline; } /* Header */ html.high-contrast .site-header { background: #FFFFFF; border-bottom: 2px solid #0A3872; } html.high-contrast .site-logo__name { color: #000000; } html.high-contrast .site-logo__title { color: #111111; } /* Navigation */ html.high-contrast .site-nav a { color: #000000; } html.high-contrast .site-nav a:hover, html.high-contrast .site-nav a:focus { color: #0A3872; } html.high-contrast .site-nav .current-menu-item > a, html.high-contrast .site-nav [aria-current="page"] { color: #061A40; font-weight: 700; } /* Bouton CTA */ html.high-contrast .btn--primary { background: #0A3872; border-color: #0A3872; color: #FFFFFF; } html.high-contrast .btn--primary:hover, html.high-contrast .btn--primary:focus { background: #061A40; border-color: #061A40; color: #FFFFFF; } html.high-contrast .btn--outline, html.high-contrast .btn--secondary { border-color: #0A3872; color: #0A3872; } html.high-contrast .btn--outline:hover { background: #0A3872; color: #FFFFFF; } /* Téléphone header */ html.high-contrast .header-phone { color: #000000; } html.high-contrast .header-phone:hover { color: #0A3872; } html.high-contrast .header-phone svg { fill: currentColor; } /* Burger mobile */ html.high-contrast .nav-toggle span { background-color: #000000; } /* Sélecteur de langue */ html.high-contrast .lang-switcher__toggle { color: #000000; border-color: #0A3872; } html.high-contrast .lang-switcher__dropdown { background: #FFFFFF; border: 2px solid #0A3872; box-shadow: 0 4px 16px rgba(0,0,0,.22); } html.high-contrast .lang-switcher__dropdown a { color: #000000; } html.high-contrast .lang-switcher__dropdown a:hover { background: #C5DEF4; color: #061A40; } /* Titres */ html.high-contrast h1, html.high-contrast h2, html.high-contrast h3, html.high-contrast h4, html.high-contrast h5, html.high-contrast h6 { color: #000000; } /* Sections alternées */ html.high-contrast [class*="--alt"], html.high-contrast .section--alt, html.high-contrast .bg-alt { background-color: #E0EEF8; } /* Cartes et blocs génériques */ html.high-contrast [class*="card"], html.high-contrast [class*="-card"] { border: 1px solid #0A3872; } /* Formulaires */ html.high-contrast input, html.high-contrast textarea, html.high-contrast select { background: #FFFFFF; color: #000000; border: 2px solid #0A3872; } html.high-contrast input::placeholder, html.high-contrast textarea::placeholder { color: #3D3D3D; } html.high-contrast input:focus, html.high-contrast textarea:focus, html.high-contrast select:focus { outline: 3px solid #0A3872; outline-offset: 2px; } /* Focus universel renforcé */ html.high-contrast *:focus-visible { outline: 3px solid #0A3872; outline-offset: 3px; } /* Footer */ html.high-contrast .site-footer { border-top: 2px solid #0A3872; color: #000000; } html.high-contrast .site-footer a { color: #0A3872; } html.high-contrast .site-footer a:hover { color: #061A40; text-decoration: underline; } /* Or / étoiles / décorations */ html.high-contrast [class*="star"], html.high-contrast [class*="gold"], html.high-contrast [class*="rating"] { color: #5A3D0A; fill: #5A3D0A; } /* Bouton contraste lui-même en mode actif */ html.high-contrast .a11y-contrast-btn { border-color: #0A3872; color: #0A3872; background: transparent; } html.high-contrast .a11y-contrast-btn[aria-pressed="true"] { background: #0A3872; border-color: #061A40; color: #FFFFFF; } html.high-contrast .a11y-contrast-btn:focus-visible { outline: 3px solid #061A40; outline-offset: 3px; }