/* Jetons — palette ARDOISE + INDIGO. Deux règles tenues partout ailleurs dans la feuille : aucune règle n'écrit une couleur en dur, tout passe par var(). Changer de thème est donc un bloc de valeurs à écrire, jamais une règle à retoucher. L'AUBERGINE D'ODOO A ÉTÉ ABANDONNÉE. Elle n'était là que pour qu'on passe d'Odoo à SeeMDB sans changer de registre visuel ; SeeMDB ne se lit plus à côté d'Odoo, et cette teinte terne coûtait plus qu'elle ne rapportait : un violet désaturé tire vers le gris sale sur un écran mal réglé, et il ne laisse aucune place à une VRAIE couleur d'action. L'accent est maintenant un indigo franc, posé sur des gris ardoise légèrement froids. CLAIR PAR DÉFAUT. Le sombre reste accessible par la bascule et suit la préférence système. LE FOND N'EST PAS BLANC. Tout l'était autrefois — page, panneaux, fiches — et l'écran n'avait donc aucune profondeur : rien ne disait ce qui flotte au-dessus de quoi. Le fond porte un gris ardoise très clair, et les surfaces qui portent du contenu restent blanches. C'est ce seul écart qui fait exister les cartes, la barre d'application et le volet, sans une seule bordure de plus. Les gris ne sont pas neutres : ils tirent d'un rien vers le bleu. Un gris parfaitement neutre à côté d'un accent froid donne cet aspect « gabarit non fini » qu'on cherchait à corriger — et l'inverse est vrai aussi, d'où le changement de famille de gris en même temps que celui d'accent. Cinq familles de jetons, et rien d'écrit en dur au fil des règles : les COULEURS, les OMBRES (--shadow-1/2/3), les ARRONDIS (--r-0/1/2/3), le RYTHME vertical (--gap) et la TYPOGRAPHIE (--font, --font-mono, --fs-*). Deux jetons d'indigo et non un, parce qu'un même bleu ne peut pas servir aux deux usages : --accent texte et liens, doit contraster avec le FOND de page ; --accent-btn fond de bouton, doit contraster avec le TEXTE BLANC posé dessus. #4f46e5 donne 6,3:1 face au blanc, il tient donc en fond de bouton dans les deux thèmes ; en texte il faut le foncer en clair (#4338ca, 7,9:1 sur blanc) et l'éclaircir en sombre, d'où deux valeurs. */ :root, :root[data-theme="light"] { color-scheme: light; /* Le fond est un gris ardoise très clair ; ce sont les SURFACES qui restent blanches. Sans cet écart, rien ne flotte. */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #fafbfc; /* Fond d'un champ de saisie. Un jeton à part et non `--bg` : le fond de PAGE a sa propre couleur, et douze règles de champs la suivraient sans le vouloir — un champ blanc sur une carte blanche est le repère attendu, un champ gris sur carte blanche ressemble à un champ désactivé. */ --field-bg: #ffffff; --elev: #ffffff; --hover: #eef1f6; /* Fond de la zone qui entoure une feuille de formulaire — c'est lui qui fait « flotter » la fiche blanche. */ --view-bg: #f6f7f9; --chip: #eceff4; --chip-2: #f4f6f9; /* Les trois lavis d'indigo : fond de pastille, de survol accentué, de trait. Ils sont TRÈS peu saturés — un lavis d'accent qui se voit devient une seconde couleur d'action, et il n'en faut qu'une. */ --tint: #eef1fe; --tint-2: #dfe4fd; --tint-3: #c4ccfa; /* Le quatrième barreau de l'échelle d'indigo, entre --tint-3 et le bouton. Il existe pour les ÉCHELLES D'INTENSITÉ — la charge mensuelle du planning, les rôles du plan d'adressage — qui montent en quatre paliers du lavis à l'aplat. Sans lui, l'avant-dernier palier tombait sur --accent-soft2, qui est plus CLAIR que --accent-btn en thème sombre : l'échelle s'y inversait entre le troisième et le quatrième cran. Un barreau qui redescend n'est plus une échelle. */ --tint-4: #8b96f0; --line: #e4e7ec; --line-soft: #eef0f3; --line-2: #d7dbe3; --line-3: #a8b0bd; --fg: #15181e; --fg-bright: #05070a; --fg-1: #262b34; --fg-2: #414855; --fg-3: #616a78; --fg-4: #838c9a; --fg-5: #a2aab6; --glyph: #616a78; --accent: #4338ca; --accent-hi: #3730a3; --on-accent: #ffffff; --accent-btn: #4f46e5; --accent-btn-hi: #4338ca; --accent-soft: #4f46e5; --accent-soft2: #6366f1; --ok: #047857; --ok-soft: #065f46; --ok-2: #059669; --ok-bg: #e7f6f0; --ok-bg2: #eefaf5; --ok-bg3: #f4fbf8; --ok-line: #b6e0cf; --warn: #b45309; --warn-hi: #92400e; --warn-fg: #92400e; --warn-bg: #fdf3e3; --warn-line: #eccfa0; --warn-line2: #d8ae6f; --danger: #be123c; --danger-hi: #9f1239; --danger-bg: #fdeaef; --danger-line: #f5c2ce; --danger-line2: #eb9dae; --scrim: rgba(15, 20, 30, .45); --halo: rgba(79, 70, 229, .16); /* Barre d'application ardoise foncé. Deux jetons qui n'existaient pas : le fond de la barre et son élément de navigation actif. Ils sont IDENTIQUES dans les deux thèmes — la barre est le cadre de la page, elle ne change pas de registre quand le contenu s'assombrit ; en sombre elle tombe simplement sur la même valeur que --surface, ce qui est voulu, d'où le filet qui la sépare alors du contenu. */ --appbar: #171a21; --appbar-on: #2b3040; --appbar-hover: #21252f; --appbar-line: #2b3040; --appbar-fg: #ffffff; --appbar-fg-2: #a2aab6; --appbar-fg-3: #79828f; /* Ombres portées : trois niveaux, du filet posé au panneau qui survole. Le noir tire vers le bleu, pour qu'elles n'aient pas l'air brunes sur un fond qui ne l'est pas. */ --shadow: rgba(15, 23, 42, .13); --shadow-1: 0 1px 2px rgba(15, 23, 42, .07); --shadow-2: 0 2px 4px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .08); --shadow-3: 0 8px 20px rgba(15, 23, 42, .12), 0 24px 48px rgba(15, 23, 42, .16); } /* Thème sombre. Fond ardoise très foncé et non noir : le noir pur fait vibrer un texte clair, et il ne laisse plus de place à une surface PLUS SOMBRE que lui. Toutes les teintes d'état sont éclaircies — le vert #047857 lisible sur blanc serait noyé ici, et inversement. */ :root[data-theme="dark"] { color-scheme: dark; /* Même principe qu'en clair, à l'envers : le fond est le plus SOMBRE, les surfaces remontent. Trois niveaux au lieu de deux, pour que le volet, la liste et la boîte ne se confondent plus. */ --bg: #0e1015; --surface: #171a21; --surface-2: #13161c; /* En sombre, l'inverse du clair : le champ est plus BAS que la surface qui le porte. Un champ plus clair que sa carte donnerait un relief à l'envers. */ --field-bg: #101319; --elev: #1c2028; --hover: #232833; --view-bg: #0b0d11; --chip: #232833; --chip-2: #2b313d; --tint: #1c2040; --tint-2: #262b52; --tint-3: #333a68; /* Plus sombre que --accent-btn ici, pour que l'échelle monte du lavis vers l'aplat dans les DEUX thèmes. */ --tint-4: #3f47a8; --line: #262b34; --line-soft: #1d2129; --line-2: #313742; --line-3: #4a5261; --fg: #e6e9ef; --fg-bright: #ffffff; --fg-1: #d2d7e0; --fg-2: #b0b7c3; --fg-3: #8d96a5; --fg-4: #79828f; --fg-5: #626b78; --glyph: #8d96a5; /* Même fond de bouton que le thème clair : c'est le texte blanc posé dessus qui commande, et il ne change pas. Seul l'indigo de TEXTE s'éclaircit. */ --accent: #a5b4fc; --accent-hi: #c7d2fe; --on-accent: #ffffff; --accent-btn: #4f46e5; --accent-btn-hi: #6366f1; --accent-soft: #a5b4fc; --accent-soft2: #8b96f0; --ok: #34d399; --ok-soft: #6ee7b7; --ok-2: #10b981; --ok-bg: #0f2f26; --ok-bg2: #14352b; --ok-bg3: #102a22; --ok-line: #1d4a3b; --warn: #fbbf24; --warn-hi: #fcd34d; --warn-fg: #fbbf24; --warn-bg: #362a10; --warn-line: #4a3a16; --warn-line2: #6b5522; --danger: #fb7185; --danger-hi: #fda4af; --danger-bg: #3a1620; --danger-line: #4d1d29; --danger-line2: #6d2937; --appbar: #171a21; --appbar-on: #2b3040; --appbar-hover: #21252f; --appbar-line: #2b3040; --appbar-fg: #ffffff; --appbar-fg-2: #a2aab6; --appbar-fg-3: #79828f; --scrim: rgba(3, 6, 12, .66); --halo: rgba(129, 140, 248, .2); /* Sur fond sombre une ombre ne se voit pas : elles y sont plus denses et plus larges, et c'est surtout l'écart de surface qui porte le relief. */ --shadow: rgba(0, 0, 0, .5); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35); --shadow-3: 0 10px 26px rgba(0, 0, 0, .55), 0 28px 56px rgba(0, 0, 0, .45); } /* Ce qui ne dépend pas du thème. */ :root { /* L'indigo de marque, identique dans les deux thèmes : c'est une signature, pas une couleur d'interface. Réservée au logo. */ --brand: #4f46e5; /* ---- Typographie ---------------------------------------------------- AUCUNE police n'est téléchargée. L'application se sert souvent depuis un serveur de LAN, parfois sans route vers l'extérieur : une police Google n'y arriverait pas, et l'écran attendrait trois secondes pour finir par afficher la police système de toute façon. On demande donc d'emblée la meilleure police déjà installée — et Inter d'abord, parce que celui qui l'a l'a voulu. `--font-mono` sert à tout ce qui s'ALIGNE ou se COMPARE caractère par caractère : heures, adresses IP, numéros de série, clés. Pas au texte. */ --font: Inter, "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Échelle typographique. Il y avait TRENTE-DEUX tailles distinctes dans la feuille — .78, .8, .8125 et .82rem voisines, qui ne voulaient rien dire ensemble et donnaient cet air de brouillon. Sept valeurs suffisent, et elles tombent sur des pixels entiers à 16px de base : un demi-pixel, le navigateur l'arrondit comme il veut, et deux libellés censés être de la même taille ne le sont plus. --fs-00 11px micro-libellé (heure dans un créneau, étiquette d'état) --fs-0 12px légende, en-tête de colonne, aide sous un champ --fs-1 13px TEXTE COURANT de l'application : listes, champs, boutons --fs-2 14px texte qu'on lit vraiment : paragraphes, notes, onglets --fs-3 16px sous-titre, titre de bloc --fs-4 20px titre de fiche --fs-5 26px titre de page publique --fs-6 30px valeur d'un indicateur (accueil, convergence) --fs-7 34px valeur de l'indicateur d'une fiche */ --fs-00: .6875rem; --fs-0: .75rem; --fs-1: .8125rem; --fs-2: .875rem; --fs-3: 1rem; --fs-4: 1.25rem; --fs-5: 1.625rem; --fs-6: 1.875rem; --fs-7: 2.125rem; /* Interlignes : serré pour ce qu'on balaye, aéré pour ce qu'on lit. */ --lh-tight: 1.3; --lh: 1.5; /* Arrondis et rythme, communs aux deux thèmes. Même histoire que les tailles : des 3px, 4px, 5px, 6px, 7px, 8px, 10px et 12px voisins. Quatre valeurs, une par ÉCHELLE d'objet — pastille, contrôle, carte, fenêtre — et non une par endroit où l'on en avait besoin. */ --r-0: 4px; --r-1: 7px; --r-2: 12px; --r-3: 16px; --gap: .75rem; /* Géométrie du cadre de page. Trois valeurs et non trois douzaines d'endroits où les réécrire : la hauteur de la barre d'application sert AUSSI de `top` au bandeau de titre collant, et le jour où la barre grandit d'un pixel, le bandeau suit tout seul au lieu de laisser passer une bande de contenu. */ --appbar-h: 52px; --page-max: 1560px; --page-pad: 24px; /* Une seule courbe pour toutes les transitions : elles doivent se ressembler, sinon l'interface a l'air d'avoir été faite par deux personnes. */ --ease: cubic-bezier(.2, .7, .3, 1); } /* Personne ne demande d'animation quand il a dit qu'il n'en voulait pas. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }