/* * Charte graphique Prophetix — feuille de référence. * * Source unique : Ecosystem/platform/ui/charte/. Chaque application en tient une copie dans * wwwroot/charte/ (son image Docker ne voit que son propre dossier) : une retouche se fait ici, * puis se reporte dans les copies, comme Directory.Packages.props. * * Cinq teintes Pantone, rien d'autre en couleur de marque : * * 6373 C turquoise #87D2D0 accent, sélection, repères * 6309 C lilas #BC9ECB accent secondaire, graphiques * 6327 C violet #4B37A1 couleur principale : boutons, liens, cartouche * 6423 C anis #D0D770 mise en avant ponctuelle (jamais du texte sur fond clair) * 6428 C grège #E4DDD3 fonds, bordures, texte du cartouche * * Seul le violet se lit en texte sur fond clair (contraste 8,9:1 sur blanc). Turquoise, lilas, * anis et grège sont des fonds : on y écrit en encre (--px-encre), jamais en blanc. * * Deux polices : Inter (hébergée ici, licence OFL, fonts/OFL.txt) pour tout, et Courier New pour * le seul cartouche du nom de l'application (.px-cartouche). */ /* ------------------------------------------------------------------------------------ Polices */ /* Inter variable, graisses 100 à 900, en deux sous-ensembles : latin de base et latin étendu (ŒÆ, lettres d'Europe centrale). Servie par l'application elle-même : aucun appel extérieur. */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------------------------ Jetons */ :root { /* Les cinq teintes de la charte. */ --px-turquoise: #87D2D0; /* Pantone 6373 C */ --px-lilas: #BC9ECB; /* Pantone 6309 C */ --px-violet: #4B37A1; /* Pantone 6327 C */ --px-anis: #D0D770; /* Pantone 6423 C */ --px-grege: #E4DDD3; /* Pantone 6428 C */ /* Dérivées : mêmes teintes, plus claires ou plus sombres, pour les états et les fonds. */ --px-violet-fonce: #3A2A82; /* survol, appui */ --px-violet-clair: #ECE8F7; /* fond d'un élément choisi */ --px-turquoise-fonce: #2E8E8B; /* turquoise lisible en texte sur blanc (3,9:1 : gros texte, icônes) */ --px-turquoise-clair: #E3F4F3; --px-lilas-clair: #F2ECF5; --px-anis-clair: #F3F5D9; --px-grege-clair: #F6F3EE; /* fond de page */ --px-grege-fonce: #CFC6B8; /* bordure marquée */ /* Encre et nuit : le violet poussé au noir, pour le texte et les fonds sombres. */ --px-encre: #221C3A; /* texte principal (16:1 sur blanc) */ --px-encre-douce: #5C5670; /* texte secondaire (6,9:1 sur blanc) */ --px-nuit: #16122B; /* fond de page du thème sombre */ --px-nuit-surface: #211B3D; /* cartes et panneaux du thème sombre */ --px-nuit-bordure: #3A3260; /* Rôles : ce que les applications utilisent. */ --px-fond: var(--px-grege-clair); --px-surface: #FFFFFF; --px-bordure: var(--px-grege); --px-texte: var(--px-encre); --px-texte-secondaire: var(--px-encre-douce); --px-primaire: var(--px-violet); --px-primaire-survol: var(--px-violet-fonce); --px-primaire-texte: #FFFFFF; --px-accent: var(--px-turquoise); --px-focus: rgba(75, 55, 161, .35); /* Polices. */ --px-police: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --px-police-cartouche: "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", "Cousine", monospace; } /* Thème sombre, sur l'attribut de Bootstrap (data-bs-theme) comme sur un attribut neutre. */ [data-bs-theme="dark"], [data-px-theme="sombre"] { --px-fond: var(--px-nuit); --px-surface: var(--px-nuit-surface); --px-bordure: var(--px-nuit-bordure); --px-texte: var(--px-grege); --px-texte-secondaire: #AFA8C2; --px-primaire: var(--px-lilas); /* le violet se perd sur la nuit : le lilas le relaie */ --px-primaire-survol: #CDB6D9; --px-primaire-texte: var(--px-nuit); --px-violet-clair: #2D2552; --px-focus: rgba(188, 158, 203, .45); } /* ------------------------------------------------------------------------------------ Titres */ /* FocusOnNavigate (Routes.razor des applications Blazor) place le focus sur le h1 à chaque page, pour les lecteurs d'écran. Après un clic, le cadre noir du navigateur barre le titre sans rien apporter ; au clavier, il reste, dans la couleur de la charte. */ h1:focus:not(:focus-visible) { outline: none; } h1:focus-visible { outline: 2px solid var(--px-primaire); outline-offset: 4px; border-radius: 2px; } /* ------------------------------------------------------------------------------------ Cartouche */ /* * Le petit rectangle au nom de l'application : 4 à 6 lettres, capitales, Courier New gras, grège * sur violet. Un seul par écran, dans l'en-tête, à la place du logo. * * IMMO * * Variantes : px-cartouche--anis (sur un fond violet), px-cartouche--petit (barre étroite). */ .px-cartouche { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 4.6em; padding: .34em .5em .3em .62em; /* à droite, l'espacement des lettres est déjà là */ border-radius: 2px; background: var(--px-violet); color: var(--px-grege); font-family: var(--px-police-cartouche); font-size: .95rem; font-weight: 700; font-style: normal; line-height: 1; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; user-select: none; flex: none; } a.px-cartouche:hover, a.px-cartouche:focus-visible { color: var(--px-grege); background: var(--px-violet-fonce); text-decoration: none; } .px-cartouche--anis { background: var(--px-anis); color: var(--px-nuit); } a.px-cartouche--anis:hover, a.px-cartouche--anis:focus-visible { background: #DDE38F; color: var(--px-nuit); } .px-cartouche--petit { font-size: .8rem; } /* Sur la nuit, le violet garde sa place mais se détache par un filet lilas. */ [data-bs-theme="dark"] .px-cartouche:not(.px-cartouche--anis), [data-px-theme="sombre"] .px-cartouche:not(.px-cartouche--anis) { box-shadow: inset 0 0 0 1px var(--px-lilas); } @media (forced-colors: active) { .px-cartouche { border: 1px solid CanvasText; } }