/* ============================================================= Mode "Bénéficiaire AAH" — accessibilité malvoyance (contrastes forts, textes agrandis), partagé par TOUS les jeux de la plateforme. ⚠️ NOTES DE MAINTENANCE — LIRE AVANT DE MODIFIER UN JEU ⚠️ Voir /root/jeux-en-ligne/public/shared/AAH_MODE.md pour l'explication complète (architecture, pourquoi ce nom, checklist par jeu). En résumé : - Ce fichier n'agit que quand porte la classe `jel-aah` (posée par public/shared/party.js + un petit script inline en tout début de de chaque page, voir AAH_MODE.md — le script inline évite un flash sans contraste le temps que party.js, chargé en fin de , s'exécute). - Il fonctionne PRINCIPALEMENT en écrasant (!important) les variables CSS --bg-1/--text/--primary/... que la quasi-totalité des jeux de cette plateforme utilisent pour TOUTES leurs couleurs de "chrome" (cartes, boutons, champs, badges...). Si un jeu colore un élément de chrome, ça DOIT passer par une de ces variables (ou par une des classes génériques ci-dessous : .card, .btn, .field, input/select/button, .toast, [class*="badge"]...) pour hériter automatiquement de ce mode. Une couleur codée en dur (`background:#fff` au lieu de `background:var(--surface)`) restera invisible pour ce mode — bug silencieux, pas d'erreur, à surveiller à chaque nouvelle UI. - 8-americain utilise une convention de noms différente (--bg/--ink/ --accent au lieu de --bg-1/--text/--primary) : gérée séparément ci-dessous, sous les mêmes sélecteurs (les deux jeux de variables cohabitent sans conflit, chaque jeu ne définissant que les siennes). - Volontairement PAS touché : les couleurs "sémantiques" propres à un jeu qui encodent une information de jeu plutôt qu'un style (ex. --token-red/--token-yellow de Puissance 4, --water de Bataille navale, les couleurs des familles de cartes du Solitaire, les pastilles de couleur de Cluedo) — les recolorer casserait la lisibilité du jeu lui- même (ex. les deux joueurs de Puissance 4 deviendraient indiscernables si leurs jetons prenaient tous les deux le même jaune). Si un jeu a un vrai problème de contraste sur ces couleurs-là, il faut un correctif ciblé dans le style.css de CE jeu, pas ici. - Limite connue et acceptée : le contenu dessiné dans un (dino-run, draw-together) n'est PAS modifié par ce fichier — CSS n'a pas prise dessus. Seule la "chrome" autour (boutons, textes, cadres) profite du mode. - Si tu ajoutes un nouveau jeu : suis le patron des jeux existants (variables --bg-1/--text/--primary/..., classes .card/.btn/.field/ .hint/[class*="badge"]) et il héritera de ce mode automatiquement, sans qu'il soit nécessaire de toucher à ce fichier. Sinon, complète-le. ============================================================= */ html.jel-aah { /* Palette unique et fixe, y compris en présence de prefers-color-scheme : la prévisibilité prime sur le thème du système pour ce mode — un malvoyant qui active ce mode doit toujours retrouver le même rendu, jour ou nuit, sur cet appareil ou un autre. Fond noir + texte blanc + jaune vif pour l'action/l'accent : combinaison "contraste maximal" classique et bien éprouvée (proche de "Increase Contrast" iOS/Android), ratio de contraste texte/fond ≈ 21:1 (le maximum possible en sRGB). */ color-scheme: dark; /* --- Convention commune (bataille-navale, blind-test, cluedo, draw-together, monopoly, petit-bac, puissance4, slam, slam-duel, démineur, dino-run, solitaire, sudoku, hub) --- */ --bg-1: #000000 !important; --bg-2: #000000 !important; --surface: #000000 !important; --surface-alt: #0d0d0d !important; --text: #ffffff !important; --text-dim: #ffffff !important; --primary: #ffe600 !important; --primary-dark: #ffe600 !important; --primary-contrast: #000000 !important; --accent: #ffe600 !important; --success: #4dff4d !important; --success-bg: #002200 !important; --danger: #ff5c5c !important; --danger-bg: #330000 !important; --border: #ffffff !important; --shadow: none !important; /* --- Convention 8-americain (--bg/--ink au lieu de --bg-1/--text) --- */ --bg: #000000 !important; --bg-soft: #000000 !important; --ink: #ffffff !important; --ink-soft: #ffffff !important; --accent-dark: #ffe600 !important; } html.jel-aah body { background: #000 !important; color: #fff !important; font-size: 19px !important; line-height: 1.55 !important; font-weight: 600 !important; } /* ---- Textes : nettement agrandis partout, c'est l'objet même du mode ("les infos les plus contrastées et grosses possible") ---- */ html.jel-aah h1 { font-size: 2.1em !important; } html.jel-aah h2 { font-size: 1.35em !important; letter-spacing: normal !important; } html.jel-aah h3 { font-size: 1.25em !important; } html.jel-aah p, html.jel-aah span, html.jel-aah label, html.jel-aah li, html.jel-aah td, html.jel-aah th, html.jel-aah a { font-size: 1.1em !important; color: inherit; } html.jel-aah .hint, html.jel-aah .subtitle, html.jel-aah [class*="dim"], html.jel-aah [class*="hint"] { font-size: 1.08em !important; font-weight: 700 !important; color: #fff !important; opacity: 1 !important; } /* ---- Boutons, champs, sélecteurs : bordures nettes et épaisses, texte agrandi et gras, zones tactiles plus grandes, focus toujours visible (WCAG 2.4.7 AAA : anneau d'au moins 2px, ici volontairement plus large). ---- */ html.jel-aah button, html.jel-aah input, html.jel-aah select, html.jel-aah textarea, html.jel-aah .btn, html.jel-aah .chip, html.jel-aah .icon-btn { font-size: 1.15em !important; font-weight: 800 !important; border: 3px solid #ffffff !important; border-radius: 10px !important; background: #000 !important; color: #fff !important; } html.jel-aah .btn-primary, html.jel-aah button.btn-primary, html.jel-aah .chip.active { background: #ffe600 !important; color: #000 !important; border-color: #ffe600 !important; } html.jel-aah input::placeholder, html.jel-aah textarea::placeholder { color: #cccccc !important; opacity: 1 !important; } html.jel-aah input[type="checkbox"] { width: 28px !important; height: 28px !important; } html.jel-aah *:focus-visible { outline: 4px solid #ffe600 !important; outline-offset: 2px !important; } /* ---- Cartes / panneaux / modales : bordure nette plutôt qu'une ombre portée à faible contraste (souvent peu ou pas perçue en cas de malvoyance). ---- */ html.jel-aah .card, html.jel-aah [class*="panel"], html.jel-aah [class*="modal"] { background: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; } /* ---- Badges / pastilles / étiquettes (score, niveau, statut...) : toujours le même traitement jaune vif + texte noir + contour noir net, quel que soit le jeu ou le nom exact de la classe. ---- */ html.jel-aah [class*="badge"], html.jel-aah [class*="-tag"], html.jel-aah [class*="-pill"], html.jel-aah [class*="-chip"] { background: #ffe600 !important; color: #000 !important; border: 2px solid #000 !important; font-weight: 800 !important; } /* ---- Bannières de connexion / toasts : déjà couvertes par --danger/ --success via les variables, on renforce juste l'épaisseur du contour et la taille du texte. ---- */ html.jel-aah .toast, html.jel-aah .connection-banner, html.jel-aah [class*="banner"] { border: 3px solid #fff !important; font-size: 1.15em !important; font-weight: 800 !important; }