/* Le sélecteur groupé évite de déclarer deux fois la palette du thème par défaut : :root la pose sur quand aucun data-theme n'est présent, et [data-theme="emeraude"] la pose sur n'importe quel élément qui porte cet attribut. C'est ce second cas qui permet aux pastilles du sélecteur de thème (page Profil) de lire la vraie palette au lieu de couleurs recopiées : elles n'étaient jusqu'au 2026-08-25 que des valeurs de la table theme_couleur, qui avaient déjà dérivé deux fois de celles-ci. */ :root, [data-theme="emeraude"] { /* Thème par défaut : Émeraude (theme_couleur.code = 'emeraude') Teintes assombries le 2026-07-27 (V1-P07-L01-T01, accessibilité WCAG 2.2 AA 1.4.3) : les couleurs d'origine (--primary #4a8c6c 3.99:1, --secondary/--accent #24c5d0 2.1:1) échouaient au contraste comme texte sur blanc / texte blanc sur fond. Nouvelles valeurs de même famille (vert/turquoise) atteignant ≥4.5:1 sur blanc ET sur les fonds pastel des badges. Les pastels (fonds clairs) sont inchangés. Les autres thèmes (corail, menthe…) ont leurs propres écarts de contraste, à traiter séparément. 2026-08-24 : --primary passe de #3f7a5a à #3c7455. Le badge « admin » (--primary sur --primary-pastel) restait à 4,41:1 ; il atteint 4,78:1, et le blanc sur --primary gagne au passage (5,07 → 5,50). Assombrir le pastel à la place aurait aggravé l'écart, les deux couleurs se rapprochant. */ --primary: #3c7455; --primary-pastel: #e3f2f3; --secondary: #0e6b73; --secondary-pastel: #d7e4de; --accent: #0e6b73; --accent-pastel: #e3f2f3; --tertiary: #d9d9d9; --text: #1d1d1b; --background: #f2f5f8; --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; --border: var(--tertiary); } /* Jetons indépendants du thème : échelle de texte, sémantiques, bordures de contrôle, focus. Ils ne sont pas redéfinis par les palettes. */ :root { /* ── Échelle de texte (2026-08-24) ────────────────────────────────────── Remplace les onze paliers d'`opacity` appliqués à var(--text), qui échouaient tous au contraste en dessous de 0,65 (0,60 rend #777776, soit 4,48:1 sur blanc). Deux niveaux suffisent. Les valeurs sont les plus CLAIRES qui tiennent 4,5:1 sur les quatre surfaces du thème — ratios donnés dans cet ordre : blanc, --background, --primary-pastel, --secondary-pastel. C'est --secondary-pastel (#d7e4de), la plus foncée, qui fixe la limite : sans elle --text-subtle pourrait être plus clair. Un niveau plus effacé n'est pas possible à ce niveau de conformité — c'est la contrainte, pas un choix esthétique. L'opacité reste l'outil du décoratif (animations, survols, barres de graphe, calques de carte), jamais du texte. */ --text-muted: #474f4c; /* 8,43 / 7,71 / 7,33 / 6,44 — libellés secondaires */ --text-subtle: #5b645f; /* 6,12 / 5,59 / 5,32 / 4,67 — méta, états vides */ /* Seule teinte claire qui atteint 4,5:1 sur --primary : sur ce fond, même le blanc à 0,85 d'opacité retombe à 4,49. Utilisée pour le texte secondaire du bandeau de FicheModal. */ --text-sur-primaire: var(--primary-pastel); /* ── Surfaces ─────────────────────────────────────────────────────────── */ --surface: #ffffff; --surface-alt: var(--background); /* ── Couleurs sémantiques ──────────────────────────────────────────────── Déjà appelées avant d'exister (var(--danger, …) dans form.css, var(--surface, …) dans agenda.css et documents-view.css) : elles fonctionnaient par valeur de repli, donc hors thème. */ --danger: #c0392b; /* était #e74c3c (3,82) → 5,44 sur blanc */ --success: #15653f; /* 7,08 sur blanc */ --warning: #8a5104; /* était #E65100 (3,79) → 6,44 */ /* ── Bordures ──────────────────────────────────────────────────────────── --border reste clair pour les séparateurs décoratifs (bas de carte, lignes de tableau, pied de modale), non soumis au critère 1.4.11. --border-controle s'applique aux limites de composants interactifs (champs, boutons d'action, interrupteur), qui doivent atteindre 3:1 contre le blanc intérieur ET contre le fond de page. */ --border-controle: #888f8c; /* 3,30 sur blanc / 3,02 sur --background */ /* Anneau de focus : --primary-pastel ne donnait que 1,15:1. */ --focus: var(--secondary); /* 6,23 sur blanc */ } /* Thèmes alternatifs. La table theme_couleur ne porte plus que le code et le libellé depuis la migration 0028 : le code est posé en data-theme sur par App.razor, et sélectionne le bloc ci-dessous. Ajouter un thème en base sans ajouter son bloc ici donne un thème qui s'affiche dans le sélecteur mais rend le thème par défaut. Ces quatre palettes échouent au contraste sur les douze paires mesurées le 2026-08-24 (jusqu'à 1,78:1). Point connu, différé sur décision. */ [data-theme="corail"] { --primary: #f4a261; --primary-pastel: #ffffff; --secondary: #f4a261; --secondary-pastel: #f2fcfa; --accent: #ff7e5e; --accent-pastel: #e3f2f3; --tertiary: #d9d9d9; --text: #1d1d1b; --background: #f2f5f8; } [data-theme="menthe"] { --primary: #9fcda8; --primary-pastel: #ffffff; --secondary: #7dc2a5; --secondary-pastel: #fffbf1; --accent: #f1f1d3; --accent-pastel: #e3f2f3; --tertiary: #d9d9d9; --text: #1d1d1b; --background: #f2f5f8; } [data-theme="olive"] { --primary: #b7ce66; --primary-pastel: #ffffff; --secondary: #8fb43a; --secondary-pastel: #f2fcfa; --accent: #b7ce66; --accent-pastel: #e3f2f3; --tertiary: #d9d9d9; --text: #1d1d1b; --background: #f2f5f8; } [data-theme="mauve"] { --primary: #bb988c; --primary-pastel: #ffffff; --secondary: #ab87b9; --secondary-pastel: #ffffff; --accent: #ab87b9; --accent-pastel: #e3f2f3; --tertiary: #d9d9d9; --text: #1d1d1b; --background: #f2f5f8; } /* Reset Global pour le Border-Radius et la Box-Sizing */ *, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; } body { background-color: var(--background); color: var(--text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; line-height: 1.6; } a { color: #006bb7; } /* ========================================================================== POINTS DE RUPTURE — convention du projet (2026-08-24) Il ne s'agit pas de « faire du mobile » : la matrice signée en P07 exclut les plateformes mobiles. Ces seuils servent le ZOOM sur poste de bureau. Zoomer à 200 % sur un écran de 1280 px ne grossit pas une image : cela réduit la fenêtre à 640 px de pixels CSS ; à 400 %, on tombe à 320 px. Un agent malvoyant qui zoome se retrouve donc exactement dans la situation d'un petit écran (critères 1.4.10 Redistribution et 1.4.4 Redimensionnement du texte). 1024px — zoom ~150 % : les barres latérales cessent d'être fixes 768px — zoom ~170 % : les grilles de champs passent sur une colonne 480px — zoom ~270 % : on récupère l'espace pris par les marges Avant cette date, six seuils différents coexistaient (576, 768, 900, 992, 1024, 1100) et aucun ne couvrait les écrans de travail. Utiliser ceux-ci. ========================================================================== */ /* ========================================================================== MOUVEMENT RÉDUIT (2026-08-25) Respecte la préférence système « réduire les animations » (Windows : Accessibilité → Effets visuels ; macOS : Accessibilité → Moniteur). Ce n'est pas une préférence esthétique : un mouvement que l'utilisateur n'a pas initié peut provoquer nausées et vertiges chez les personnes atteintes de troubles vestibulaires. Ce qui bougeait ici : le panneau de fiche monte de 16px à chaque ouverture — plusieurs dizaines de fois par session de travail — et quatre cartes se soulèvent de 2px au survol. Version large, retenue le 2026-08-25 : les transitions de couleur sont neutralisées aussi. Quand quelqu'un demande moins d'animation, lui donner le minimum est plus sûr que d'arbitrer à sa place. 0.01ms plutôt que « none » : l'animation se termine instantanément mais émet quand même son événement animationend, ce qui ne casse pas un code qui l'attendrait. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== FOCUS CLAVIER Un seul indicateur pour toute l'application. Avant, aucune règle ne couvrait .btn-action, .tab-item ni .gestion-nav-item : le focus traversait la navigation principale sans être visible. :focus-visible et non :focus, pour ne pas encadrer ce qu'on vient de cliquer à la souris. Les champs de formulaire gardent leur propre traitement (bordure + anneau, cf. form.css) qui vaut aussi pour le clic. ========================================================================== */ a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible, [tabindex]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Sur le bandeau --primary (FicheModal), l'anneau doit trancher sur le fond sombre plutôt que sur le blanc de la page. */ .fiche-modal-header *:focus-visible, .home-hero *:focus-visible { outline-color: #ffffff; } /* Le titre de page reçoit le focus à chaque navigation (FocusOnNavigate) : l'indicateur y est utile, il annonce où l'on vient d'arriver. */ h1:focus:not(:focus-visible) { outline: none; } /* Lien d'évitement : hors écran jusqu'à recevoir le focus au clavier. Il n'est pas masqué par display:none, qui le retirerait aussi de l'ordre de tabulation. */ .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 1300; padding: 12px 20px; background: var(--surface); color: var(--secondary); font-weight: 700; text-decoration: none; box-shadow: var(--shadow); } .lien-evitement:focus { left: 0; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; }