/* ============================================================ STRALEAD — tokens Source de vérité : DESIGN_SYSTEM.md §1 et §2. Chargé AVANT composants.css. Ne contient que des variables et les déclarations de polices : aucune règle de mise en page. ============================================================ */ /* --- Polices servies en local (HDS : aucun appel tiers) ------- Polices variables, sous-tranches latin et latin-ext : le latin couvre le français, le latin-ext les noms d'Europe centrale (Dvořák, Węgrzyn) qu'un cabinet peut avoir dans son équipe. Le navigateur ne télécharge que la tranche dont il a besoin. */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin.87c506d88b9f.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; 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: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-ext.0bb2ef2eda4e.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; 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; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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"; src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; } /* ------------------------------------------------------------ Deux thèmes, un seul jeu de noms. `:root` porte le thème CLAIR, qui est le défaut. Le thème nuit est un bloc d'exceptions posé par l'attribut `data-theme` sur ``, rendu côté serveur depuis `User.theme` : aucun clignotement au chargement, aucune lecture de JavaScript. Règle : une feuille de composants ne doit jamais écrire une couleur. Toute valeur qui change d'un thème à l'autre porte un nom ici. Les teintes de statut, elles, se dérivent de --ok, --warn et --bad par `color-mix` : un seul point de vérité. Les deux blocs sont écrits en sélecteur d'attribut, pas seulement sur `:root` : un élément peut ainsi porter le thème opposé à celui de la page. C'est ce qui permet aux deux vignettes de l'écran Réglages de se peindre chacune dans son thème, sans qu'aucune couleur ne soit écrite dans le gabarit. ------------------------------------------------------------ */ :root, [data-theme="clair"] { /* Jour */ --bg-0: #f4f5fb; /* fond de page */ --bg-1: #ffffff; /* panneaux, modales */ --bg-2: #ffffff; /* surfaces posées (menus) */ --line: rgba(23, 30, 74, .10); --line-strong: rgba(23, 30, 74, .17); /* Encre. Les ratios sont mesurés non pas sur --bg-1 mais sur --surface-1, le fond réel des cartes et des blocs : un gris qui passe sur blanc pur tombe sous 4.5:1 dès qu'un voile bleuté s'intercale. */ --ink-1: #131739; /* titres, valeurs */ --ink-2: #444a72; /* corps */ --ink-3: #5c638c; /* labels, méta */ /* Axe chromatique unique — identique dans les deux thèmes, c'est la marque. Seuls les fonds et l'encre s'inversent. */ --g-a: #2f4bff; /* deep blue */ --g-b: #7b3dff; /* purple */ --g-c: #b44dff; /* pointe violette */ --grad: linear-gradient(100deg, var(--g-a), var(--g-b) 55%, var(--g-c)); --grad-soft: linear-gradient(100deg, rgba(47, 75, 255, .11), rgba(123, 61, 255, .11)); --glow: 0 0 24px rgba(93, 66, 255, .28); /* Sémantique — usage parcimonieux (rentabilité, statuts). En clair, les teintes de nuit deviendraient illisibles sur blanc : ce sont les mêmes familles, assombries jusqu'à tenir 4.5:1 sur leur propre aplat teinté, qui est le fond sur lequel elles s'écrivent. */ --ok: #086b48; --warn: #8c4d00; --bad: #b01a30; /* Accents de texte, quand la teinte de nuit ne passe pas sur blanc */ --accent-texte: var(--g-b); --accent-temps: #3f4fbe; --accent-patients: #10605b; /* Surfaces posées sur un panneau, du plus discret au plus marqué */ --surface-0: rgba(47, 75, 255, .025); --surface-1: rgba(47, 75, 255, .04); --surface-2: rgba(47, 75, 255, .05); /* Verre : opaque en clair, sinon l'aurore transparaît sous le texte */ --glass-a: #ffffff; --glass-b: #fbfbff; /* Interactions */ --survol: rgba(47, 75, 255, .07); --survol-doux: rgba(47, 75, 255, .04); --line-survol: rgba(47, 75, 255, .32); --piste: rgba(23, 30, 74, .12); /* Coquille */ --nav-fond: rgba(255, 255, 255, .82); --nav-actif-encre: var(--g-a); --rail-fond: rgba(23, 30, 74, .05); --voile: rgba(19, 23, 57, .38); /* Ombres */ --ombre-modale: 0 24px 80px rgba(23, 30, 74, .18); --ombre-menu: 0 12px 40px rgba(23, 30, 74, .16); --ombre-bloc: 0 6px 18px rgba(23, 30, 74, .14); --ombre-glisse: 0 10px 30px rgba(23, 30, 74, .2); --ombre-grad: 0 4px 18px rgba(93, 66, 255, .28); --ombre-grad-forte: 0 6px 26px rgba(93, 66, 255, .4); /* Anneaux et halos */ --anneau-focus: rgba(123, 61, 255, .22); --anneau-swatch: rgba(123, 61, 255, .4); --anneau-marque: rgba(123, 61, 255, .10); --halo-jauge: rgba(123, 61, 255, .35); --selection: rgba(123, 61, 255, .22); /* Atmosphère — très effacée en clair, sinon elle salit le blanc */ --aurora-a: rgba(47, 75, 255, .10); --aurora-b: rgba(123, 61, 255, .06); --aurora-points: rgba(23, 30, 74, .06); /* Encre posée sur le dégradé : blanche dans les deux thèmes */ --sur-grad: #ffffff; /* Dosage d'une couleur de donnée employée comme encre. La palette assignable est faite de pastels : lisibles sur fond nuit, illisibles sur fond blanc. En clair on les ramène vers l'encre, en nuit on les laisse. */ --melange-teinte: 35%; /* Rayons */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px; /* Typo — la pile de repli évite un écran cassé si le woff2 manque */ --font-d: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-b: "Inter", "Segoe UI", system-ui, sans-serif; --t-xs: .6875rem; --t-sm: .8125rem; --t-md: .875rem; --t-lg: 1.0625rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --ease: cubic-bezier(.22, 1, .36, 1); /* Largeur de la navigation latérale, relue par la grille du shell */ --nav-w: 232px; } /* ------------------------------------------------------------ Thème nuit — la direction d'origine, « instrument de nuit ». Ne redéfinit que ce qui dépend du fond : la marque, les rayons et la typographie sont communs. ------------------------------------------------------------ */ [data-theme="sombre"] { --bg-0: #070a18; --bg-1: #0b0f22; --bg-2: #11162e; --line: rgba(148, 163, 255, .10); --line-strong: rgba(148, 163, 255, .18); --ink-1: #eef0ff; --ink-2: #a7abce; --ink-3: #63678f; --grad-soft: linear-gradient(100deg, rgba(47, 75, 255, .16), rgba(123, 61, 255, .16)); --glow: 0 0 24px rgba(93, 66, 255, .35); --ok: #3ddc97; --warn: #ffb454; --bad: #ff6b81; --accent-texte: var(--g-c); --accent-temps: var(--pal-1); --accent-patients: var(--pal-8); --surface-0: rgba(148, 163, 255, .03); --surface-1: rgba(148, 163, 255, .04); --surface-2: rgba(148, 163, 255, .05); --glass-a: rgba(148, 163, 255, .05); --glass-b: rgba(148, 163, 255, .02); --survol: rgba(148, 163, 255, .08); --survol-doux: rgba(148, 163, 255, .045); --line-survol: rgba(148, 163, 255, .35); --piste: rgba(148, 163, 255, .11); --nav-fond: rgba(11, 15, 34, .55); --nav-actif-encre: var(--sur-grad); --rail-fond: rgba(11, 15, 34, .7); --voile: rgba(4, 6, 16, .66); --ombre-modale: 0 24px 80px rgba(0, 0, 0, .55); --ombre-menu: 0 12px 40px rgba(0, 0, 0, .5); --ombre-bloc: 0 6px 18px rgba(0, 0, 0, .35); --ombre-glisse: 0 10px 30px rgba(0, 0, 0, .45); --ombre-grad: 0 4px 18px rgba(93, 66, 255, .35); --ombre-grad-forte: 0 6px 26px rgba(93, 66, 255, .5); --anneau-marque: rgba(123, 61, 255, .12); --halo-jauge: rgba(123, 61, 255, .55); --selection: rgba(123, 61, 255, .35); --aurora-a: rgba(63, 64, 255, .28); --aurora-b: rgba(123, 61, 255, .12); --aurora-points: rgba(148, 163, 255, .10); /* Sur fond nuit, un pastel de la palette est déjà lisible : aucune correction, la teinte est rendue telle qu'elle est stockée. */ --melange-teinte: 100%; } /* Palette des couleurs assignables (praticiens, familles d'actes). Désaturées volontairement : sur fond nuit, une teinte vive concurrencerait le dégradé. Pastille d'identification, pas fond. */ :root { --pal-1: #7b8cff; --pal-2: #e88bff; --pal-3: #ff7ab8; --pal-4: #ff8080; --pal-5: #ffb08a; --pal-6: #ffe08a; --pal-7: #8affc1; --pal-8: #7ee8e0; --pal-9: #7ec8ff; --pal-10: #c3c8d8; /* Onzième teinte, ajoutée le 05/09/2026 avec la catégorie « Prothésiste » de la Précomptabilité. Elle comble le seul creux de la roue, entre le jaune de --pal-6 et le vert de --pal-7, et garde la clarté et la saturation des dix autres : une part de camembert de plus ne doit pas se distinguer par autre chose que sa teinte. */ --pal-11: #c6f58a; /* Quatre teintes de plus, ajoutées le 07/09/2026 avec les catégories de dépense que le cabinet crée lui-même (SPEC C.6). Ce sont les quatre derniers creux de la roue dont l'écart de teinte dépasse quarante degrés : entre le vert-jaune de --pal-11 et le vert de --pal-7, entre le bleu de --pal-1 et le magenta de --pal-2, entre --pal-2 et le rose de --pal-3, et entre le jaune de --pal-6 et --pal-11. Même clarté et même saturation que les onze autres. Ce sont les derniers creux à cette clarté : la roue est pleine. */ --pal-12: #8bff85; --pal-13: #ad85ff; --pal-14: #ff85eb; --pal-15: #f5ff85; /* Cinq teintes soutenues, ajoutées le 07/09/2026 pour que la Précomptabilité puisse porter neuf catégories du cabinet sans doublon. La roue étant pleine à la clarté des quinze premières, elles ne se distinguent pas par leur teinte mais par leur CLARTÉ, 57 % contre 75 %, à saturation contenue. Un bleu clair et un bleu soutenu se lisent comme deux parts différentes d'un camembert, là où deux bleus clairs séparés de vingt degrés ne se lisent pas. Elles restent des pastilles d'identification, pas des fonds : leur clarté suffit à les tenir lisibles sur le fond nuit comme sur le fond clair. */ --pal-16: #429fe0; --pal-17: #7c42e0; --pal-18: #e04291; --pal-19: #e08442; --pal-20: #77e042; }