/* ============================================================================= JETONS — la physique du système ============================================================================= Barre : Dynamic 365 · Sales Hub (voir ../BARRE.md) LA DÉCISION QUI GOUVERNE TOUT CE FICHIER, tirée de la barre : LA COULEUR EST UN LAVIS, PAS UNE ENCRE. Un accent ne s'écrit pas — il teinte une surface, et une encre neutre se pose dessus. C'est pour ça qu'il existe ici DEUX familles de couleur, `--lavis-*` et `--encre-*`, et qu'aucune ne fait le travail de l'autre. Un système qui écrirait en tilleul obtiendrait 1,4:1 de contraste et raterait l'intention. Chaque valeur est définie EN CLAIR ET EN SOMBRE, adjacentes, dans ce fichier. C'est la seule façon de voir qu'on n'a pas oublié la moitié d'un thème. Personne d'autre que ce fichier n'écrit une valeur. Un composant qui a besoin d'une couleur absente la remonte ici — il n'en invente jamais une localement. C'est ce qui empêche le dixième composant d'avoir son propre gris. ========================================================================== */ :root { color-scheme: light dark; /* ─────────────────────────────────────────────── surfaces — thème clair Neutres CHAUDS, pris à la barre. Un gris froid sous un lavis pêche vire au sale ; un gris chaud le porte. */ --fond: #f6f5f2; /* la page — blanc cassé chaud. RELEVÉ de #f1f0ec : à #f1f0ec, l accent validé du porteur tombait à 4,42:1 et ratait AA. On éclaircit le fond plutôt que d altérer une couleur qu il a tranchée. */ --surface: #ffffff; /* les panneaux qui flottent sur le lavis */ --creuse: #f3f2ed; /* les puits : champs, zones inertes. Éclairci depuis #efeee9, où l accent et le vert tombaient à 4,3:1. Un puits plus sombre que le fond paraît logique et coûte deux couleurs — le fond gagne. */ --ligne: #e8e6df; /* filet à peine visible — voir --regle-bordure */ --voile: #6e6e76; /* hors-application, comme la barre */ /* ───────────────────────────────────────────────────── encres — clair Trois seulement. Au-delà, la hiérarchie se fait par la couleur au lieu de se faire par la taille, et c'est exactement ce que la barre évite. */ --encre: #17160f; /* noir CHAUD, jamais #000 — 16,3:1 sur --fond */ --encre-douce: #6e6a60; /* 4,95:1 sur --fond — MESURÉ, pas estimé */ --encre-faible: #a5a096; /* 2,9:1 — décoratif SEULEMENT, jamais du texte */ /* ────────────────────────────────────────────────────── accent — clair Teinte validée par le porteur (kb/31). Ce qui change ici, ce n'est pas la couleur : c'est SON EMPLOI. */ --accent: #856621; /* 4,91 sur --fond · 4,78 sur --creuse. Le #8a6a25 de kb/31 tombait à 4,49 sur le puits — un centième sous le seuil. Une règle qui interdirait l accent sur un puits serait vraie et inapplicable : personne ne la vérifie en écrivant un composant. On assombrit de 3 % et la teinte reste la sienne. */ --accent-fort: #6d5218; /* pour les gros aplats et les états actifs */ --accent-doux: #d9c79a; /* filets, bordures d'appui */ /* ─────────────────────────────────────────────── états — clair (kb/31) */ --ok: #3a7448; /* même raison que l accent : 4,40 sur le puits */ --alerte: #8b6310; /* assombri depuis le #9a6f16 de kb/31 : il tombait à 4,13:1 sur le fond de page. Même famille, même lecture, mais lisible partout et pas seulement sur un panneau blanc. */ --danger: #b3402a; --info: #2f5f9e; /* ═══════════════════════════════════════════════════ LES LAVIS — clair Le geste signature. Ce sont des SURFACES : on écrit dessus en --encre, jamais dans la teinte elle-même. Assez pâles pour que le noir chaud garde son contraste, assez présents pour séparer sans bordure. */ --lavis-accent: #f6f1e2; --lavis-ok: #eaf2e8; --lavis-alerte: #f9f1de; --lavis-danger: #fae9e4; --lavis-info: #e8eff7; --lavis-neutre: #f0efe9; /* ─────────────────────────────── l'échelle de température (de la barre) La barre code la VALEUR par la chaleur : 90 sur tilleul, 32 sur rose. On lit le niveau avant de lire le chiffre. Cinq crans, pas dix. C'EST UNE ÉCHELLE DE LAVIS, PAS D'ENCRES — et c'est la leçon principale de la référence. Dans la barre, le « 90 » est écrit EN NOIR sur le tilleul : la teinte porte le niveau, l'encre reste neutre. J'ai d'abord produit cinq encres de température en plus des cinq lavis ; trois tombaient sous 4,5:1 et aucune n'existait dans la référence. Les cinq encres ont été supprimées. Un chiffre coloré sans lavis utilise --ok / --alerte / --danger, tous mesurés. */ --lavis-temp-5: #eeede7; --lavis-temp-4: #eaf2e8; --lavis-temp-3: #f9f1de; --lavis-temp-2: #fceade; --lavis-temp-1: #fae9e4; /* ═════════════════════════════════════════ TYPOGRAPHIE — six tailles Six, et pas sept. Au-delà, ce n'est plus une hiérarchie, c'est du bruit : personne ne distingue 15 px de 16 px, mais tout le monde voit la différence entre trois niveaux nets. */ /* DEUX FACTEURS, et toute l'echelle en decoule. C'est ce qui rend la typographie REGLABLE sans que personne ait a rouvrir ce fichier : le Style Lab ecrit --facteur-titre et --facteur-texte, et les six tailles suivent. Sans eux, « agrandir les titres » voudrait dire retoucher six valeurs a la main, dans le bon ordre, sans casser les rapports. */ --facteur-titre: 1; --facteur-texte: 1; --t-geant: calc(clamp(2rem, 1.4rem + 2.4vw, 3rem) * var(--facteur-titre)); --t-titre: calc(clamp(1.5rem, 1.28rem + 0.9vw, 1.875rem) * var(--facteur-titre)); --t-section: calc(1.25rem * var(--facteur-titre)); --t-sous: calc(1rem * var(--facteur-texte)); --t-corps: calc(0.875rem * var(--facteur-texte)); --t-menu: calc(0.75rem * var(--facteur-texte)); /* Trois graisses. La barre n'en montre pas davantage, et deux suffisent presque toujours à séparer un titre d'un corps. */ --g-normal: 400; --g-moyen: 500; --g-fort: 600; --i-serre: 1.15; --i-titre: 1.3; --i-texte: 1.55; --chasse-menu: 0.02em; --police: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --police-chiffre: "Inter", ui-sans-serif, system-ui, sans-serif; /* ══════════════════════════════════════════ ESPACE — huit pas, grille 4/8 */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; /* ════════════════════════════════════════════ RAYONS — trois, généreux La barre est franchement ronde : cartes ~22 px, pilules entières. C'est ce qui fait la douceur, et c'est gratuit. */ --r-controle: 10px; --r-carte: 18px; --r-puce: 999px; /* ══════════════════════════════════ ÉLÉVATION — trois crans, à peine là La barre suggère l'élévation, elle ne l'affiche pas. Une échelle à cinq ombres ne veut plus rien dire : aucune ne se distingue de la suivante. */ --ombre-1: 0 1px 2px rgb(23 22 15 / 0.04); --ombre-2: 0 2px 10px rgb(23 22 15 / 0.06), 0 1px 2px rgb(23 22 15 / 0.03); --ombre-3: 0 12px 36px rgb(23 22 15 / 0.10), 0 2px 6px rgb(23 22 15 / 0.05); /* ═══════════════════════════════════════════════ MOUVEMENT — deux valeurs */ --duree: 180ms; --duree-long: 700ms; --courbe: cubic-bezier(0.2, 0.7, 0.3, 1); /* ═══════════════════════════════════════════════════════════ CONVENTIONS */ --cible: 44px; /* plancher tactile, D-7 — jamais moins */ --bascule-carte: 48rem; /* tableau → cartes étiquetées */ --flanc: 15rem; /* rail de navigation */ } /* ═══════════════════════════════════════════════════════ THÈME SOMBRE PAS une comparaison — une DÉRIVATION. La barre ne montre aucun sombre (BARRE.md, tension 2). Ce thème est jugé sur le plancher mécanique et sur sa fidélité au principe du lavis, jamais contre une image qui n'existe pas. Le principe transposé : en clair, un lavis ÉCLAIRCIT une surface blanche ; en sombre, il RÉCHAUFFE une surface noire. Même rôle, sens inversé. */ [data-theme="sombre"] { --fond: #14130f; --surface: #1c1b16; --creuse: #232219; --ligne: #2e2c23; --voile: #0a0a08; --encre: #f0eee6; /* 15.1:1 sur --fond */ --encre-douce: #a8a294; /* 6.2:1 — plus clair qu'en miroir du clair, parce qu'un gris moyen s'effondre sur fond noir */ --encre-faible: #6d6a5e; --accent: #d4b36a; /* remonté : #8a6a25 sur #14130f donne 2.1:1 */ --accent-fort: #e6c882; --accent-doux: #5a4c2c; --ok: #6fae7e; --alerte: #d3a552; --danger: #e08a70; --info: #7aa8e0; /* Les lavis en sombre : des teintes basses, pas des pastels assombris. Assombrir un pastel donne de la boue ; il faut repartir de la teinte. */ --lavis-accent: #2a2418; --lavis-ok: #1b271d; --lavis-alerte: #2a2316; --lavis-danger: #2c1d18; --lavis-info: #1a222e; --lavis-neutre: #201f18; --lavis-temp-5: #26251d; --lavis-temp-4: #1b271d; --lavis-temp-3: #2a2316; --lavis-temp-2: #2c2117; --lavis-temp-1: #2c1d18; --ombre-1: 0 1px 2px rgb(0 0 0 / 0.5); --ombre-2: 0 2px 10px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.35); --ombre-3: 0 12px 36px rgb(0 0 0 / 0.65), 0 2px 6px rgb(0 0 0 / 0.4); } /* ═══════════════════════════════════════════════════════════ SOCLE MINIMAL Ce fichier définit des valeurs. Il ne dessine pas de composant — c'est le travail des pages de composants. Seules les règles qui garantissent le PLANCHER vivent ici, parce qu'aucun composant ne doit pouvoir les oublier. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--police); font-size: var(--t-corps); line-height: var(--i-texte); -webkit-font-smoothing: antialiased; } /* D-7 · le focus se voit toujours. Un parcours au clavier invisible est un parcours qui n'existe pas. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-controle); } :focus:not(:focus-visible) { outline: none; } /* D-7 · le mouvement se retire, le contenu reste. */ @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; } } /* La règle de bordure, écrite pour qu'on ne l'oublie pas : ON NE BORDE PAS PAR DÉFAUT. On sépare par le lavis et l'élévation. La bordure est un dernier recours, à --ligne, et jamais deux bordures adjacentes. */ .lavis { background: var(--lavis-neutre); } .lavis-ok { background: var(--lavis-ok); } .lavis-alerte { background: var(--lavis-alerte); } .lavis-danger { background: var(--lavis-danger); } .lavis-info { background: var(--lavis-info); } /* ═══════════════════════════════════════════════════════════════════════════ DENSITÉ — structure.md §78. Trois modes. Le mode change les HAUTEURS et le RYTHME, jamais les couleurs ni les rayons : on change le confort de lecture, pas l'identité du système. ═══════════════════════════════════════════════════════════════════════════ */ :root { --flanc-replie: 4.5rem; --r-champ: 10px; } :root, [data-densite="standard"] { --h-controle: 2.5rem; /* 40 px */ --h-ligne: 3rem; /* 48 px — 14 lignes par 900 px, la densité de la barre */ --p-carte: var(--e-5); --p-cellule: var(--e-3) var(--e-4); --gap-pile: var(--e-4); } [data-densite="compact"] { --h-controle: 2.125rem; /* 34 px */ --h-ligne: 2.375rem; /* 38 px — 22 lignes par 900 px, sessions longues */ --p-carte: var(--e-4); --p-cellule: var(--e-2) var(--e-3); --gap-pile: var(--e-3); } [data-densite="confort"] { --h-controle: 2.875rem; /* 46 px */ --h-ligne: 3.5rem; /* 56 px */ --p-carte: var(--e-6); --p-cellule: var(--e-4); --gap-pile: var(--e-5); } /* La cible tactile NE SUIT PAS la densité. 44 px reste le plancher (loi D-7, §116) : en compact le contrôle est visuellement plus court, mais sa zone cliquable est étendue par un pseudo-élément. Voir .btn::after. */ /* ═══════════════════════════════════════════════════════════════════════════ LE BORD D'UN CONTROLE — et pourquoi il n'est pas `--ligne`. `--ligne` (le filet qui separe deux zones) mesure ~1,2:1 sur `--surface` : assez pour suggerer une separation, pas assez pour DIRE qu'un objet est cliquable. WCAG 1.4.11 exige 3:1 sur la limite visuelle d'un controle. Un bouton `second` ou `discret` pose sur une carte blanche n'a que son bord pour exister — donc son bord doit tenir ce seuil, et il lui faut un jeton a lui. Mesure, sur TOUS les fonds clairs du systeme : 3,49 sur --surface, 3,20 sur --fond, 3,11 sur --creuse, 3,09 sur --lavis-accent, 3,03 sur --lavis-neutre. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bord-controle: #8d897f; } /* Sa valeur sombre se tient JUSTE A COTE, et pas 140 lignes plus haut. `[data-theme="sombre"]` et `:root` ont la MEME specificite (0,1,0) : entre les deux, c'est le dernier ecrit qui gagne. Un bloc de base ajoute plus bas dans le fichier annulait donc en silence l'override de theme — la valeur sombre etait ecrite, commentee, mesuree, et n'arrivait jamais a l'ecran. Voir structure.md §141.3.16. */ [data-theme="sombre"] { --bord-controle: #7a7466; } /* 3,65:1 sur --surface sombre, 4,0:1 sur --fond */ /* ═══════════════════════════════════════════════════════════════════════════ L'ENCRE POSEE SUR UNE COULEUR PLEINE. `#fff` en dur sur un bouton d'accent marche tant que l'accent est SOMBRE. En thème sombre l'accent s'eclaircit — c'est le principe meme d'un thème sombre — et le blanc tombe a 2,01:1. Les cinq couleurs pleines du systeme avaient le meme defaut : 2,01 a 2,61:1. L'encre sur une couleur est donc un JETON, qui bascule avec le thème. En clair c'est du blanc ; en sombre, une version tres assombrie de la couleur elle-meme, ce qui conserve la teinte : brun sur l'or, brun-rouge sur le corail, vert profond sur le vert. Mesure : >= 6:1 dans les deux thèmes. ═══════════════════════════════════════════════════════════════════════════ */ /* UN JETON, UN ROLE — et `--danger` en avait deux. Il servait d'ENCRE (le mot « Bloquee » sur son lavis) et de REMPLISSAGE (le bouton destructif). Les deux tirent dans des sens opposes : une encre doit s'eclaircir en theme sombre pour se lire sur un fond sombre, un remplissage doit rester assez sombre pour porter du blanc. En les confondant, le bouton rouge se retrouvait ecrit en brun fonce — lisible, mesure, et faux : un bouton destructif s'ecrit en blanc, c'est une convention que le theme sombre n'a pas a casser. `--danger` reste l'ENCRE. `--danger-plein` est le REMPLISSAGE, choisi pour porter du blanc dans les deux themes (5,70:1 en clair, 5,02:1 en sombre) tout en se detachant de la surface sombre (3,44:1). Voir structure.md §141.3.14. */ :root { --danger-plein: #b3402a; --sur-accent: #ffffff; --sur-danger: #ffffff; /* le destructif garde son encre blanche */ --sur-ok: #ffffff; --sur-info: #ffffff; --sur-alerte: #ffffff; /* Le pouce de l'interrupteur est un OBJET pose sur le rail, pas du texte : il reste clair dans les deux themes, mais il se nomme. */ --pouce-bascule: #ffffff; } /* Et le versant sombre, COLLE au versant clair (§141.3.16). Separes, ils se perdent : ces six valeurs vivaient en haut du fichier et etaient annulees par le `:root` ci-dessus. Mesure du degat : un bouton primaire en theme sombre ecrit en blanc sur or, 2,01:1 — exactement le defaut que §141.3.9 avait corrige, revenu par la porte de derriere. */ [data-theme="sombre"] { --danger-plein: #c2452e; /* blanc dessus 5,02:1 · surface sombre 3,44:1 */ --sur-accent: #3d341f; /* 6,12:1 sur --accent sombre */ --sur-danger: #ffffff; /* le destructif garde son encre blanche */ --sur-ok: #18261c; /* 6,03:1 sur --ok sombre */ --sur-info: #1d2836; /* 6,04:1 sur --info sombre */ --sur-alerte: #372b15; /* 6,11:1 sur --alerte sombre */ } /* ═══════════════════════════════════════════════════════════════════════════ LES TROIS VOIX — et pourquoi il en faut trois, pas une, pas cinq. Ce produit fabrique des INVITATIONS. Une console qui n'aurait qu'une police sans-serif ecrirait « Zineb & Mehdi » exactement comme elle ecrit « Filtrer par ville » — et perdrait la seule chose qui distingue une invitation d'un formulaire. Mais l'inverse est pire : une console entiere en calligraphie est illisible au bout de dix minutes. D'ou le partage, et il est FONCTIONNEL, pas decoratif : --police la CONSOLE. Tout ce qu'on utilise. Neutre, dense, lisible a 13 px pendant huit heures. --police-titre la CEREMONIE. Ce que l'invite lit : le nom des maries, la date, le lieu. Une serif editoriale. --police-main LA SIGNATURE. UN moment par ecran, jamais deux. Les prenoms sur le carton, rien d'autre. --police-chiffre les DONNEES. Chiffres tabulaires. Sans elle une colonne de montants ondule. La regle qui les tient : une voix de ceremonie ne porte JAMAIS de texte fonctionnel. Pas de bouton, pas de libelle, pas de message d'erreur, pas de navigation. Si on ne peut pas la remplacer par la sans sans perdre du SENS, c'est qu'elle est mal employee. ─── La tension, nommee plutot que cachee ──────────────────────────────────── Les piles ci-dessous ne telechargent RIEN. Elles se resolvent donc differemment selon le systeme — surtout `--police-main`, dont les faces cursives ne sont pas installees partout. En production on auto-heberge UNE face par role, avec `font-display: swap` et un `size-adjust` sur la substitution pour que la page ne saute pas au chargement. Le systeme nomme le ROLE ; le role survit a la substitution, la face non. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* LES TITRES DE L'INTERFACE. Par defaut la meme sans que le texte : un titre de page est du texte FONCTIONNEL, et la regle de §143.1 s'y applique. Mais il a son propre jeton, donc il se regle — c'est ce qui permet d'habiller les 44 ecrans en serif ou en calligraphie sans toucher au corps. */ --police-titre: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; /* LA CEREMONIE. Ce que l'invite lit sur le carton : la date, le lieu, le mot d'accueil. Elle n'est PAS reglable depuis le tableau de bord — elle appartient a l'invitation, pas a la console. */ --police-ceremonie: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", serif; --police-main: "Segoe Script", "Bradley Hand", "Apple Chancery", "Snell Roundhand", "Brush Script MT", "Lucida Handwriting", cursive; /* L'APPROCHE SUIT LA TAILLE — c'est de l'optique, pas du gout. Une lettre dessinee pour 13 px a deja l'air trop serree a 40 px, et une lettre dessinee pour 40 px a l'air lache a 13 px. On resserre en montant, on ouvre en descendant. */ --chasse-geant: -0.032em; --chasse-titre: -0.022em; --chasse-sous: -0.012em; --chasse-corps: 0em; --chasse-caps: 0.08em; /* les capitales ont besoin d'air, toujours */ /* LA JUSTIFICATION. 45 a 75 caracteres : en dessous l'oeil saute trop souvent a la ligne, au-dessus il perd le debut de la suivante. 62ch vise le milieu. */ --mesure: 62ch; --mesure-large: 78ch; }