.a11y-fab-icon { width:38px; height:38px; object-fit:contain; display:block; flex-shrink:0; transition:transform .2s; } .a11y-fab-icon:hover { transform:scale(1.1); } .a11y-fab-icon:focus-visible { outline:3px solid var(--gold); outline-offset:4px; border-radius:50%; } /* Cacher le bouton handifriendly dans le menu mobile hamburger */ @media(max-width:1024px) { .nav-links li:has(#a11yFab) { display:none; } #a11yFab { position:fixed; bottom:24px; left:24px; z-index:999; margin:0; } } .a11y-panel { position:fixed; right:28px; top:76px; z-index:9999; width:320px; max-width:calc(100vw - 40px); background:var(--warm-white); border-radius:16px; box-shadow:0 16px 48px rgba(26,35,50,.2), 0 0 0 1px var(--border); padding:20px; transform:translateY(-12px) scale(.96); transform-origin:top right; opacity:0; pointer-events:none; transition:transform .2s, opacity .2s; } .a11y-panel[data-open="true"] { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; } .a11y-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); } .a11y-panel-title { font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:var(--text-dark); } .a11y-close { background:transparent; border:none; cursor:pointer; color:var(--text-soft); padding:4px; display:flex; align-items:center; justify-content:center; border-radius:6px; } .a11y-close:hover { background:var(--cream); color:var(--text-dark); } .a11y-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; font-size:14px; color:var(--text-dark); font-weight:500; } .a11y-row + .a11y-row { border-top:1px solid var(--border); } .a11y-row-label { display:flex; align-items:center; gap:10px; } .a11y-row-label svg { color:var(--blue); flex-shrink:0; } .a11y-size-ctrls { display:flex; gap:6px; } .a11y-size-btn { width:32px; height:32px; border-radius:8px; background:var(--blue-light); color:var(--blue); border:none; cursor:pointer; font-weight:700; font-family:'Nunito',sans-serif; transition:background .15s; } .a11y-size-btn:hover { background:#ddeaf8; } .a11y-size-btn.sm { font-size:12px; } .a11y-size-btn.md { font-size:14px; } .a11y-size-btn.lg { font-size:16px; } .a11y-size-btn.is-active { background:var(--blue); color:#fff; } .a11y-toggle { position:relative; width:44px; height:24px; background:#d5dce6; border-radius:100px; border:none; cursor:pointer; transition:background .2s; flex-shrink:0; } .a11y-toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; } .a11y-toggle[aria-pressed="true"] { background:var(--sage); } .a11y-toggle[aria-pressed="true"]::after { left:23px; } .a11y-reset { width:100%; margin-top:12px; padding:10px; border-radius:10px; background:var(--cream); color:var(--text-mid); border:1px solid var(--border); font-size:13px; font-weight:600; cursor:pointer; font-family:'Nunito',sans-serif; transition:background .15s; } .a11y-reset:hover { background:var(--sand); } /* Modes d'accessibilité appliqués via data-attributes sur */ /* Les tailles de texte sont définies en pixels sur presque tous les éléments, donc on utilise zoom (supporté par tous les navigateurs majeurs) pour que l'agrandissement affecte réellement le contenu visible. */ html[data-a11y-font="110"] { zoom:1.10; } html[data-a11y-font="120"] { zoom:1.20; } html[data-a11y-font="135"] { zoom:1.35; } html[data-a11y-contrast="high"] { --cream:#000; --warm-white:#111; --sand:#0a0a0a; --text-dark:#fff; --text-mid:#f0f0f0; --text-soft:#ccc; --border:#555; --blue:#ffd400; --blue-light:#1a1a1a; --sage:#00ff88; --sage-light:#0a1a10; --gold:#ffd400; --gold-light:#1a140a; } /* Règle universelle : tout en noir/blanc */ html[data-a11y-contrast="high"] *:not(script):not(style) { background-color: #000 !important; color: #fff !important; border-color: #444 !important; box-shadow: none !important; } /* Exceptions : images et iframes */ html[data-a11y-contrast="high"] img { background-color: transparent !important; filter: grayscale(.3) contrast(1.1); } html[data-a11y-contrast="high"] iframe { background-color: #111 !important; } /* Exceptions : boutons d'action principaux */ html[data-a11y-contrast="high"] .btn-main, html[data-a11y-contrast="high"] .btn-test, html[data-a11y-contrast="high"] .nav-rdv, html[data-a11y-contrast="high"] .cta-submit, html[data-a11y-contrast="high"] button[type="submit"] { background-color: #ffd400 !important; color: #000 !important; border-color: #ffd400 !important; } /* Exceptions : liens */ html[data-a11y-contrast="high"] a { color: #ffd400 !important; } html[data-a11y-contrast="high"] .nav-rdv { color: #000 !important; } /* Exceptions : nav */ html[data-a11y-contrast="high"] nav { background-color: #000 !important; border-bottom-color: #444 !important; } /* Exceptions : inputs/selects lisibles */ html[data-a11y-contrast="high"] input, html[data-a11y-contrast="high"] select, html[data-a11y-contrast="high"] textarea { background-color: #111 !important; color: #fff !important; border-color: #888 !important; } /* Exceptions : panneau a11y */ html[data-a11y-contrast="high"] .a11y-toggle[aria-pressed="true"] { background-color: #ffd400 !important; color: #000 !important; } /* Exceptions : footer fond distinct */ html[data-a11y-contrast="high"] footer { background-color: #111 !important; } /* Cartes avec fond légèrement distinct pour les différencier du fond */ html[data-a11y-contrast="high"] .avis-card, html[data-a11y-contrast="high"] .srv-card, html[data-a11y-contrast="high"] .why-card, html[data-a11y-contrast="high"] .remb-card, html[data-a11y-contrast="high"] .hero-card, html[data-a11y-contrast="high"] .cta-form, html[data-a11y-contrast="high"] .a11y-panel { background-color: #1a1a1a !important; border-color: #555 !important; }