/* ========================================================================= JETONS DE STYLE ========================================================================= Une seule declaration des valeurs de design, pour que la refonte a venir consiste a changer ces valeurs plutot qu'a repasser dans une dizaine de feuilles (admin-dashboard, lk, journey, portal, diagnostic-viewer, diagnostic-expert, business...) ou tout est aujourd'hui ecrit en dur. Trois regles pour que cette couche serve a quelque chose : 1. Les noms sont SEMANTIQUES, pas litteraux : `--couleur-danger`, pas `--rouge-500`. Une refonte change les valeurs, pas les noms ; un nom qui decrit la couleur devient un mensonge des le premier changement de charte. 2. Les valeurs ci-dessous ne sont pas inventees, elles sont relevees dans le code existant. La palette s'est trouvee etre celle de Tailwind, deja coherente mais recopiee a la main partout. On la nomme, on ne la remplace pas : la bascule ne doit rien changer a l'ecran. 3. Les feuilles existantes migrent progressivement. Tant qu'une feuille n'est pas migree, elle continue de fonctionner : ce fichier n'ecrase rien. ========================================================================= */ :root { /* --- L'echelle neutre ------------------------------------------------ La palette, sous les noms de role. Elle est nommee par la CLARTE, jamais par un usage, et c'est tout l'interet : le produit a un portail clair et des ecrans sombres, si bien que la meme valeur y joue deux roles opposes. #f8fafc est le fond du portail, et c'est aussi la couleur du texte sur les ecrans sombres. Un jeton appele « surface » qui peint du texte rend la bonne couleur et raconte le contraire de ce qui se passe : la relecture devient trompeuse, et c'est le seul benefice qu'on cherchait ici. Les noms de role ci-dessous s'y appuient. Changer un ton de gris se fait donc a un seul endroit, et se propage aux deux themes. --------------------------------------------------------------------- */ --white: #ffffff; --ink-50: #f8fafc; --ink-200: #e2e8f0; --ink-300: #cbd5e1; --ink-400: #94a3b8; --ink-600: #334155; --ink-900: #111827; /* --- Surfaces ------------------------------------------------------- */ --surface-fond: var(--ink-50); /* fond de page clair */ --surface-carte: #ffffff; /* carte posee sur le fond */ /* LE FOND DE PAGE SOMBRE. Il alimente `--mimex-bg` (le corps des pages du produit), `--portal-bg` et deux degrades : c'est LA valeur du noir, pas une parmi d'autres. #05080d ET NON #07111f, DECIDE LE 26/08. C'est le noir des pages de reference, `boutons-retenus` et `blocs`, qui le portent depuis le debut : les surfaces, les filets et leurs dosages ont tous ete arretes en les regardant. Le produit jugeait donc ses compositions sur un fond plus clair que celui qui avait servi a les choisir. */ --surface-sombre: #05080d; --surface-voile: rgba(18, 27, 43, 0.54); /* panneau translucide */ /* --- Texte ---------------------------------------------------------- */ --texte-fort: var(--ink-900); /* titres, chiffres */ --texte-normal: var(--ink-600); --texte-discret: var(--ink-400); /* legendes, mentions */ --texte-sur-sombre: rgba(255, 255, 255, 0.94); --texte-discret-sur-sombre: rgba(255, 255, 255, 0.68); /* L encre qui se lit sur un VOILE DE `--white-rgb` : etiquette de valeur posee sur une pastille claire, pastille d'un graphique, badge sur fond blanc. Elle etait ecrite en dur (`#0B1626`) a cote d'un fond qui, lui, suivait la charte : la paire se cassait des que `--white-rgb` changeait. La valeur ci-dessous est exactement celle d'avant. */ --encre-sur-voile: #0b1626; /* L encre qui se pose sur un fond QUI NE CHANGE PAS DE THEME : les deux boutons dont le degrade est ecrit en dur, la consultation en violet et la commande en or. Ces fonds restent sombres a dessein ; leur texte lisait `--white-rgb`, qui se retourne, et devenait sombre sur sombre. Valeur identique a ce que rendait `rgb(var(--white-rgb))`. */ --encre-sur-fond-fixe: #ffffff; /* --- Traits --------------------------------------------------------- */ --trait: var(--ink-200); --trait-marque: var(--ink-300); --trait-sur-sombre: rgba(255, 255, 255, 0.10); /* --- Couleurs de sens ----------------------------------------------- */ /* Chacune a une variante douce, employee en fond d'alerte ou de pastille. */ /* UNE FAMILLE NOMMEE « ACCENT » QUI VALAIT DU BLEU. Elle habille les etats selectionnes, les anneaux de focus, l'`accent-color` des cases et des radios, la barre de progression : tout ce qui dit « ceci est l'interface ». Tant qu'elle restait bleue, /accompagnement affichait un bloc bleu-violet au milieu d'une page cyan, et l'identite se contredisait elle-meme sans qu'aucune regle soit fausse. ON NE L A BASCULEE QU APRES AVOIR SORTI LA DONNEE. Les canaux R/Y/B/G/M du test, la courbe et la pastille du canal B, le bouton « Terminer » empruntaient ce meme jeton comme « bleu ». Les laisser dedans aurait fait changer de couleur un CANAL, c'est-a-dire un fait, en meme temps qu'un habillage. Ils pointent desormais `--blue-rgb` et `--blue-deep`, aux memes valeurs qu'avant, donc rien de leur cote n'a bouge. La teinte globale habille l'interface, la donnee garde la sienne. */ --couleur-accent: #00cfea; --couleur-accent-doux: #67e8f9; /* La version appuyee, pour le survol et l'etat presse. Un survol change l'INTENSITE d'une couleur, jamais sa teinte : la couleur d'un bouton porte son role, et en changer sous le pointeur annonce une autre action que celle qu'on s'apprete a declencher. */ --couleur-accent-fort: #0096c8; --couleur-danger: #ef4444; --couleur-danger-doux: #fecaca; /* --- LES TROIS ETATS D UNE MESURE --------------------------------- Rouge la charge domine, jaune a surveiller, vert l equilibre tient. ILS NE BASCULENT PAS AVEC LE THEME, et c est tout leur interet. Le theme clair assombrit une grande partie de la palette pour en faire des encres lisibles sur du blanc : `--amber-rgb` tombe de 251 191 36 a 122 82 4, `--gold-bright` de 255 210 90 a 138 106 30. En encre c est juste ; en APLAT, le jaune devient brun, et un point d etat jaune ne dit plus rien. La regle est celle qu on s est donnee : la teinte globale habille l interface, la donnee garde la sienne. Ces trois-la peignent de la donnee, jamais de l interface. Un accent qui devient bronze en clair est un choix ; un etat qui devient brun est une perte. ------------------------------------------------------------------ */ --etat-charge: #ef4444; --etat-charge-rgb: 239, 68, 68; --etat-vigilance: #facc15; --etat-vigilance-rgb: 250, 204, 21; --etat-tenu: #22c55e; --etat-tenu-rgb: 34, 197, 94; --couleur-succes: #22c55e; --couleur-succes-doux: #bbf7d0; /* * Teintes de la landing, exprimees en composantes pour pouvoir moduler * l'opacite sans redeclarer la couleur. * * Sept domaines de pratique, donc SEPT teintes. Il n'y en avait que cinq : * le violet servait a la fois la psychologie et l'accompagnement du * changement, le vert la nutrition et la prevention. La palette rebouclait, * et deux domaines partageaient leur repere avec un autre. * * Deux bandes de teinte sont interdites ici, parce qu'elles appartiennent * a la marque et qu'une pastille ne doit pas s'y confondre : * - l'or (~45 deg), qui annonce les titres de section et les boutons ; * - le cyan de l'accent (~187 deg), qui vit a l'interieur des cartes. * Le fitness portait justement l'or, c'est-a-dire l'accent de marque exact. * * Le vert passe de 170 a 140 degres : a 170 il tirait vers le cyan et * flottait pres de l'accent. */ --teinte-bleue: 95, 168, 255; /* ~215 deg */ --teinte-violette: 169, 139, 255; /* ~256 deg */ --teinte-verte: 110, 214, 148; /* ~140 deg */ --teinte-rouge: 248, 113, 113; /* ~0 deg */ --teinte-orange: 247, 152, 94; /* ~23 deg */ --teinte-rose: 240, 132, 196; /* ~322 deg */ --teinte-anis: 188, 214, 106; /* ~76 deg */ /* L'or reste declare : il sert la marque, plus aucun domaine. */ --teinte-or: 242, 190, 99; /* --- Rayons --------------------------------------------------------- */ /* Echelle relevee : 8, 10, 12, 14, 16, 18, 20, 24, et la pilule. */ --rayon-xs: 8px; --rayon-s: 10px; --rayon-m: 12px; --rayon-l: 14px; --rayon-xl: 16px; --rayon-xxl: 20px; --rayon-carte: 24px; --rayon-pilule: 999px; /* --- Espacements ---------------------------------------------------- */ --espace-xs: 4px; --espace-s: 8px; --espace-m: 12px; --espace-l: 16px; --espace-xl: 24px; --espace-xxl: 32px; --espace-section: 64px; /* --- Typographie ---------------------------------------------------- */ /* Le corps courant est a 13-14px, d'ou une echelle serree en bas. */ --taille-mention: 11px; --taille-legende: 12px; --taille-corps: 13px; --taille-corps-l: 14px; --taille-intro: 15px; --taille-titre-s: 18px; --taille-titre-m: 22px; --taille-titre-l: 28px; --graisse-normale: 400; --graisse-moyenne: 600; --graisse-forte: 700; --graisse-titre: 800; /* --- Ombres --------------------------------------------------------- */ --ombre-posee: 0 2px 8px rgba(0, 0, 0, 0.18); --ombre-flottante: 0 6px 20px rgba(0, 0, 0, 0.30); /* --- Mouvement ------------------------------------------------------ */ --transition: .18s ease; } /* * Compatibilite : portal.css declarait deja ses propres variables `--portal-*`. * Elles pointent desormais sur les jetons, ce qui unifie les deux couches sans * toucher aux centaines d'usages existants. Elles disparaitront quand portal.css * aura ete migre, ce que la refonte de la vitrine fera de toute facon. */ :root { --portal-bg: var(--surface-sombre); --portal-panel: var(--surface-voile); --portal-border: var(--trait-sur-sombre); --portal-text: var(--texte-sur-sombre); --portal-muted: var(--texte-discret-sur-sombre); --portal-gold-rgb: var(--teinte-or); --portal-blue-rgb: var(--teinte-bleue); --portal-purple-rgb: var(--teinte-violette); --portal-green-rgb: var(--teinte-verte); --portal-red-rgb: var(--teinte-rouge); --portal-orange-rgb: var(--teinte-orange); --portal-rose-rgb: var(--teinte-rose); --portal-anis-rgb: var(--teinte-anis); /* * DEUX ACCENTS, et la regle qui dit lequel va ou. * * L'OR ANNONCE ou APPELLE : les intitules de section, la marque, * les boutons et les controles de formulaire. * LE BLEU vit A L'INTERIEUR : titres de cartes, legendes de groupe, * chiffres, rangs, puces, liseres, liens. * * Un titre de carte n'est pas un titre de section, meme s'il en a la * fonction a son echelle : il est dedans, donc il est bleu. * * L'or existait deja comme teinte du domaine « fitness ». Le declarer une * seconde fois n'aurait servi a rien : c'est le meme jeton, employe pour * deux roles qui ne se croisent pas a l'ecran. * * Le bleu vaut le cyan du trace du logo, releve sur le degrade du fichier * source : de rgb(0,194,206) en haut a rgb(0,240,255) en bas. La valeur * retenue est la teinte mediane, lisible en texte sur fond sombre. */ --portal-gold-clair-rgb: 255, 232, 159; --portal-accent-rgb: 0, 207, 234; --portal-accent-clair-rgb: 0, 240, 255; --portal-accent-fonce-rgb: 0, 150, 200; } /* ========================================================================= LES CINQ ETAPES DU PARCOURS Dans le parcours, la couleur designe l'ETAPE, pas l'etat : c'est le badge qui dit « effectue » ou « a venir ». Deux etapes achevees ne se ressemblent donc pas, et c'est voulu, chaque etape gardant son identite d'un ecran a l'autre. CES VALEURS VIVAIENT DANS journey.css, ET C'ETAIT LE DEFAUT. La messagerie, les actualites et le tableau de bord lisent l'accent d'etape, mais le gabarit ne charge pas journey.css : hors du parcours, la variable etait vide, la propriete ignoree, et le bouton « Envoyer » se retrouvait sans fond. Un systeme d'identite doit vivre dans la charte, chargee partout, pas dans la feuille d'un seul ecran. Turquoise a l'ouverture, vert a la fermeture : le parcours commence et finit par un test, et la parente des deux teintes le dit sans legende. ========================================================================= */ :root { --journey-demo-rgb: 99, 215, 196; /* test d'entrainement */ --journey-demo-solid: #63D7C4; --journey-testing-rgb: var(--teinte-bleue); /* test principal */ --journey-testing-solid: rgb(var(--teinte-bleue)); --journey-results-rgb: var(--teinte-violette); /* consultation */ --journey-results-solid: rgb(var(--teinte-violette)); --journey-course-rgb: var(--teinte-or); /* programmes */ --journey-course-solid: rgb(var(--teinte-or)); --journey-retesting-rgb: 119, 214, 122; /* test de suivi */ --journey-retesting-solid: #77D67A; /* Hors du parcours il n'y a pas d'etape en cours, donc aucune raison d'emprunter la couleur de l'une d'elles : l'accent retombe sur celui du produit. C'est journey.css qui le redefinit, ecran par ecran. */ --journey-accent-rgb: var(--portal-accent-rgb); --journey-accent-solid: rgb(var(--portal-accent-rgb)); } /* ========================================================================= LES ANCRES SE REJOIGNENT EN GLISSANT Un saut instantane fait perdre le fil : on ne sait pas si la page a change ou si elle a defile, et il faut relire pour se resituer. Le glissement dit le trajet, donc la distance parcourue. `scroll-margin-top` reserve la place du bandeau : sans lui, l'ancre se cale en haut de la fenetre, c'est-a-dire DERRIERE le bandeau fixe, et le titre qu'on venait chercher est le seul qu'on ne voit pas. Sous `prefers-reduced-motion`, le saut reprend : quelqu'un qui demande moins de mouvement demande aussi ce mouvement-la. ========================================================================= */ html { scroll-behavior: smooth; } :target, [id] { scroll-margin-top: 104px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================= LES COULEURS DE ROLE DU VISUALISEUR Elles etaient ecrites en dur, 527 fois dans une seule feuille. Nommees ici, elles deviennent modifiables en un seul endroit et lisibles a la relecture. Elles sont en TRIPLET et non en hexadecimal : la plupart servent avec une transparence variable, et `rgba(var(--x), 0.3)` exige un triplet. Aucune valeur n'a bouge en les nommant. Ce sont exactement les couleurs qui etaient deja a l'ecran. ========================================================================= */ :root { /* Le blanc, et le noir des ombres. Ils ne sont pas « une surface » ni « un texte » : ils servent aux deux, dilues. */ --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; /* LES MEMES EN APLAT. Trois teintes n'existaient qu'en triplet, et servent pourtant aussi pleines : leur hexadecimal etait alors recopie a la main vingt et une fois, hors de portee du jour ou la teinte change. */ --black: #000000; --slate: #0f172a; --portal-accent: #00cfea; /* Le fond ardoise des panneaux et des champs, sous le fond vivant. */ --slate-rgb: 15, 23, 42; /* Le gris de bordure et de texte secondaire du produit. */ --slate-light-rgb: 148, 163, 184; /* LES MEMES QU'AU-DESSUS, SOUS LEUR FORME DILUABLE. Ces dix teintes sont declarees en hexadecimal plus haut, parce qu'elles servent d'abord en aplat. Mais on les dilue aussi, et `rgba()` ne sait pas lire un hexadecimal : faute de cette forme, leur triplet etait recopie a la main cent trente-deux fois dans les feuilles, hors de portee du jour ou la teinte change. Meme paire que `--white` / `--white-rgb`, qui sert de modele. */ --ink-200-rgb: 226, 232, 240; --ink-300-rgb: 203, 213, 225; --ink-50-rgb: 248, 250, 252; --ink-600-rgb: 51, 65, 85; --ink-900-rgb: 17, 24, 39; --surface-sombre-rgb: 5, 8, 13; --couleur-accent-doux-rgb: 103, 232, 249; --couleur-accent-fort-rgb: 0, 150, 200; --couleur-succes-doux-rgb: 187, 247, 208; --couleur-danger-doux-rgb: 254, 202, 202; /* LE PARTAGE. Le vert profond remplit, le vert clair contourne : c'est le contour qui porte l'etat, la surface ne fait que l'appuyer. */ --share-fill-rgb: 16, 122, 87; --share-line-rgb: 52, 211, 153; --share-bright-rgb: 34, 197, 94; /* * CE QUI EST ACHETE : le meme vert, tire vers le jaune. * * Il reste dans la famille du partage, donc il ne promet pas autre chose, * et il s'en distingue au premier coup d'oeil. Teintes mesurees : le vert * du partage est a 155 degres, celui-ci a 68, assez loin pour ne pas se * confondre, assez proche pour rester du vert. */ --achat-fill-rgb: 122, 138, 22; --achat-line-rgb: 190, 214, 96; /* L'attente et l'alerte. */ --amber-rgb: 251, 191, 36; --amber-deep-rgb: 245, 158, 11; --red-rgb: 239, 68, 68; --red-light-rgb: 248, 113, 113; /* Le bleu d'information, distinct du cyan de l'outil. */ --blue-rgb: 59, 130, 246; --blue-light-rgb: 96, 165, 250; /* LE VIOLET DE LA CONSULTATION. Il porte le moment ou le praticien et son client regardent ensemble : la banniere « consultation active » et le bouton qui l'ouvre. Il etait ecrit en dur, donc muet ; nomme, il peut relier ce qui appartient a ce moment-la. */ --consultation-rgb: 168, 85, 247; /* Le cyan de la planche des boutons, entre le vert et le bleu. */ --cyan-rgb: 103, 232, 249; } /* ========================================================================= LA BARRE DE DEFILEMENT, PARTOUT LA MEME Elle etait traitee cent neuf fois, dans six feuilles, conteneur par conteneur, et jamais pour la page elle-meme : la barre principale restait celle du navigateur, claire, sur une interface sombre. C'est celle qu'on voit le plus, et c'etait la seule qu'aucune regle ne couvrait. DEUX NIVEAUX, ET LE PREMIER FAIT L'ESSENTIEL. `color-scheme: dark` declare a la racine que le document est sombre. Le navigateur en tire lui-meme les consequences : barres de defilement, menus de