/* ══════════════════════════════════════════════════════════════ Horsio — Surcharges de thèmes (sprints UX1 / UX5) Un thème = un bloc [data-theme="…"] qui surcharge les variables de core/app.css. Whitelist des noms : APP_THEMES (JSX) et $appThemes (api/routes/settings.php) — jamais de nom interpolé dans un chemin ou du CSS. Double sélecteur `:root[data-theme=…], [data-theme=…]` : - `:root[…]` (0,2,0) l'emporte sur le `:root` (0,1,0) de app.css pour le thème appliqué à , sans dépendre de l'ordre de chargement ; - `[…]` seul permet de thémer **n'importe quel conteneur** — indispensable aux pastilles d'aperçu du sélecteur (Paramètres > Affichage), qui posent data-theme sur un . Avec `:root[…]` seul, ces pastilles affichaient toutes la palette du thème actif (bug constaté le 2026-07-29). Principe de sobriété (§6) : on ne surcharge que la famille de marque (primary/accent) et les fonds chauds. Les couleurs sémantiques (danger, warning, success, info) et les neutres restent celles de app.css — un thème saisonnier ne doit jamais rendre une alerte moins lisible. Aucune animation, aucun décor. Contraste WCAG AA vérifié par calcul sur 10 paires réelles du code (topbar sand/primary, btn-primary bg/primary, onglet actif, textes, accent sur primary…) — relevé complet dans docs/sprints/SPRINTS_REFACTORING_UX.md §7 (sprint UX5). Distinction entre thèmes : la couleur --h-primary de chaque thème doit être à ΔE (CIE76) >= 12 de celle de tous les autres, sinon le thème se lit comme un clone. Vérifié par calcul dans tests/static/theming.py. ══════════════════════════════════════════════════════════════ */ /* ── Noël : rouge profond + doré, fonds chauds ─────────────── */ :root[data-theme="noel"], [data-theme="noel"] { --h-primary: #7E1C2A; --h-teal: #7A3B44; --h-accent: #C8A96E; --h-accent-soft: #DCC08A; --h-primary-soft: #F7E7E9; --h-primary-softer: #FBF2F3; --h-primary-pale: #E4C4C9; --h-bg: #F9F5F1; --h-surface-warm: #FCF8F5; --h-border-warm: #EFE2E2; --h-sand: #F5E9DC; } /* ── Halloween : brun sombre + orange citrouille ───────────── */ :root[data-theme="halloween"], [data-theme="halloween"] { --h-primary: #3A2A1A; --h-teal: #6B4A2A; --h-accent: #E07B39; --h-accent-soft: #EFA76F; --h-primary-soft: #F6EDE4; --h-primary-softer: #F7F1EA; --h-primary-pale: #DFCBB3; --h-bg: #FAF5EE; --h-surface-warm: #FCF8F3; --h-border-warm: #EDE3D7; --h-sand: #F3E6D6; } /* ── Pâques : lilas pastel + jaune poussin ─────────────────── */ /* Le vert printanier d'origine était à ΔE 9,8 de la famille Horsio : les pastilles d'aperçu et l'app entière se lisaient comme le thème par défaut (retour Stéphane du 2026-07-30). Le pastel de Pâques — lilas, jaune poussin — sort de la famille de marque sans rien perdre en sobriété. */ :root[data-theme="paques"], [data-theme="paques"] { --h-primary: #5B4A8A; --h-teal: #7A6AA8; --h-accent: #F0C75E; --h-accent-soft: #F5DA96; --h-primary-soft: #EEE9F7; --h-primary-softer: #F6F3FB; --h-primary-pale: #D6CCEC; --h-bg: #FBF8FD; --h-surface-warm: #FDFBFE; --h-border-warm: #EAE4F2; --h-sand: #EFE6F5; } /* ══════════════════════════════════════════════════════════════ Thèmes figés (2026-07-30) — identités d'écurie, jamais saisonniers. Aucune entrée dans themeSaisonnier() : ils ne s'appliquent que si l'écurie les choisit explicitement dans Paramètres > Affichage. ══════════════════════════════════════════════════════════════ */ /* ── Concours : bleu marine + or (tenue de concours) ───────── */ :root[data-theme="concours"], [data-theme="concours"] { --h-primary: #1F2E4A; --h-teal: #3D5273; --h-accent: #C8A24A; --h-accent-soft: #DCC08A; --h-primary-soft: #E8EDF5; --h-primary-softer: #F2F5FA; --h-primary-pale: #C6D2E4; --h-bg: #F7F8FA; --h-surface-warm: #FBFCFD; --h-border-warm: #E4E8EF; --h-sand: #EDEFF3; } /* ── Été : turquoise + abricot ─────────────────────────────── */ :root[data-theme="ete"], [data-theme="ete"] { --h-primary: #0E5A63; --h-teal: #2F7B80; --h-accent: #E8A33D; --h-accent-soft: #F0C078; --h-primary-soft: #E3F2F1; --h-primary-softer: #F0F8F7; --h-primary-pale: #BEDEDC; --h-bg: #F5FAFA; --h-surface-warm: #FAFDFD; --h-border-warm: #DFEAE9; --h-sand: #EAF1EE; } /* ── Hiver : ardoise + givre ───────────────────────────────── */ :root[data-theme="hiver"], [data-theme="hiver"] { --h-primary: #2F4858; --h-teal: #4C6A7C; --h-accent: #8FB8CE; --h-accent-soft: #B4D2E2; --h-primary-soft: #E9F0F5; --h-primary-softer: #F3F7FA; --h-primary-pale: #C8DAE6; --h-bg: #F7F9FB; --h-surface-warm: #FBFCFE; --h-border-warm: #E4EAEF; --h-sand: #EDF1F4; } /* ── Poney club : framboise + miel ─────────────────────────── */ :root[data-theme="poney"], [data-theme="poney"] { --h-primary: #8A3A5E; --h-teal: #A75E7C; --h-accent: #F2B33D; --h-accent-soft: #F7CB7C; --h-primary-soft: #FBEAF1; --h-primary-softer: #FDF4F7; --h-primary-pale: #EFC9D8; --h-bg: #FDF8F9; --h-surface-warm: #FEFBFC; --h-border-warm: #F3E4EA; --h-sand: #F6E8DC; }