/* =========================================================================== LA MARQUE 2027 — LA SOURCE UNIQUE DES JETONS Arbitrée le 06/09/2026. Recopiée, jamais réinventée. Tout écran du produit cible lit ce fichier et lui seul ; aucune valeur n'est écrite en dur ailleurs. ── LA DOCTRINE DES DEUX MATIÈRES (D-024, 13/09) ─────────────────────────── Boris a refusé l'inverseur. Une matière claire obtenue en retournant les jetons d'une matière sombre donne « fond blanc + cartes grises », et il l'a pré-empté avant même de l'avoir vu. Elles sont donc conçues sur DEUX PRINCIPES DE PROFONDEUR DIFFÉRENTS : SOMBRE — LA PROFONDEUR EST UNE ÉLÉVATION. Les surfaces MONTENT vers une lumière rasante venue du haut. Un liseré clair sur l'arête supérieure dit qu'elles captent cette lumière ; une ombre portée dessous dit qu'elles la masquent. C'est le vocabulaire du métal posé sur du métal. CLAIRE — LA PROFONDEUR EST UNE ENTAILLE. Rien ne monte. Les choses sont USINÉES DANS LA PLAQUE : une ombre interne sur l'arête haute, un liseré clair sur l'arête basse. C'est exactement l'inverse d'une carte posée, et c'est ce qui donne de la matière à un fond minéral sans le charger d'ombres portées. La grammaire est la même. L'identité est la même. Le niveau est le même. La façon dont la lumière travaille ne l'est pas — et c'est le sujet. ── CE QUI EST BANNI (D-022) ─────────────────────────────────────────────── L'ancien monde du 28 août. `outils/verifier-charte.mjs` le tient. =========================================================================== */ :root { /* ---- LA PALETTE, RECOPIÉE SANS MODIFICATION --------------------------- */ --tb-graphite: #1F2328; --tb-acier: #5A7A93; --tb-acier-clair: #92ABBE; --tb-ardoise: #2A3542; --tb-gris: #7A838E; --tb-filet: #DDE2E7; --tb-blanc-casse: #F4F5F7; --tb-blanc: #FFFFFF; /* Saira porte le discours, IBM Plex Mono ne sert qu'à la donnée technique. Les deux sont sous licence OFL. La marque le verrouille. */ --tb-texte: "Saira", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --tb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Échelle de puissance 1,25 ancrée à 16 px. On choisit DEDANS, on n'invente pas entre deux crans. */ --pas--1: 0.8rem; --pas-0: 1rem; --pas-1: 1.25rem; --pas-2: 1.563rem; --pas-3: 1.953rem; --pas-4: 2.441rem; --pas-5: 3.052rem; /* Grille au pas de 4 px. La même tient l'écran et le PDF. */ --e1: 0.25rem; --e2: 0.5rem; --e3: 1rem; --e4: 1.5rem; --e5: 2.5rem; --e6: 4rem; --approche-titre: -0.012em; --approche-label: 0.12em; --interligne-titre: 1.12; --interligne-corps: 1.6; /* ---- MOUVEMENT -------------------------------------------------------- `linear()` existe dans Safari depuis 17.2. C'est la seule façon d'approcher un vrai ressort en CSS pur, sans une seule dépendance. La courbe est échantillonnée d'un masse-ressort-amortisseur. */ --ressort: linear( 0, 0.0067 1.2%, 0.0275 2.5%, 0.1113 5.1%, 0.2475 7.8%, 0.4181 10.6%, 0.6032 13.5%, 0.7834 16.5%, 0.9421 19.6%, 1.0668 22.9%, 1.1502 26.3%, 1.1919 29.9%, 1.1962 33.8%, 1.1713 38%, 1.1274 42.6%, 1.0754 47.8%, 1.0259 53.6%, 0.9876 60.2%, 0.9663 67.8%, 0.9631 76.6%, 0.9739 86.9%, 1); --detente: cubic-bezier(0.22, 0.61, 0.36, 1); --court: 180ms; --moyen: 320ms; --long: 520ms; } /* =========================================================================== MATIÈRE CLAIRE — LA PLAQUE USINÉE Minérale, pas blanche. La lumière vient du haut et n'éclaire rien : elle révèle ce qui a été creusé. =========================================================================== */ [data-matiere="clair"] { color-scheme: light; --fond: #E9ECF0; /* minéral, PAS #FFF : le blanc pur n'a pas de matière */ --fond-haut: #F6F7F9; /* la lumière rasante, en haut de la plaque */ --fond-bas: #DFE3E9; /* la plaque s'assombrit en s'éloignant de la source */ --lueur: rgba(255, 255, 255, .85); --trame: rgba(31, 35, 40, .05); --surface: #F4F5F7; --encre: var(--tb-graphite); /* 13,3:1 sur le fond */ --encre-2: #4A535C; /* 6,6:1 */ /* MESURE, PAS ESTIMATION. `--tb-gris` #7A838E rendait 3,24:1 ici — sous le seuil de 4,5. Et c'est le jeton qui porte TOUTE la provenance, c'est-a-dire la doctrine de preuve du produit. Une doctrine de preuve ecrite dans un texte illisible n'est pas une doctrine de preuve. `outils/contraste.mjs` le mesure desormais, et `verifier-marque.mjs` refuse le commit. */ --encre-3: #5F6873; /* 4,8:1 — le plus clair qui tienne */ /* UN FILET DECORATIF ne separe rien : il ne porte aucun seuil, et il ne doit JAMAIS etre la seule chose qui distingue deux zones. */ --filet: var(--tb-filet); /* UNE BORDURE QUI PORTE DU SENS, elle, doit se voir : 3,0:1 au minimum. */ --filet-fort: #7A8593; /* 3,2:1 */ /* L'ACIER pur ne tient pas 4,5 sur une plaque claire. Il reste la couleur de marque ; c'est sa DECLINAISON lisible qui porte le texte et le trait. */ --accent: #4E6B82; /* 4,7:1 */ --accent-nu: rgba(78, 107, 130, .10); /* L'ENTAILLE. Ombre INTERNE en haut, liseré clair en bas : la matière est creusée, pas posée. C'est ce qui remplace l'ombre portée. */ --creux: inset 0 1px 2px rgba(31, 35, 40, .13), inset 0 0 0 1px rgba(31, 35, 40, .07), 0 1px 0 rgba(255, 255, 255, .9); --creux-fort: inset 0 2px 5px rgba(31, 35, 40, .17), inset 0 0 0 1px rgba(31, 35, 40, .09), 0 1px 0 rgba(255, 255, 255, .95); /* Le relief existe aussi en clair, mais il est RARE : il ne sert qu'à la commande principale, et c'est ce qui lui donne son poids. */ --relief: 0 1px 1px rgba(31, 35, 40, .10), 0 6px 16px rgba(31, 35, 40, .10); --action-fond: var(--tb-graphite); --action-encre: var(--tb-blanc-casse); --action-arete: rgba(255, 255, 255, .16); } /* =========================================================================== MATIÈRE SOMBRE — LE MÉTAL POSÉ SUR LE MÉTAL La profondeur est une élévation. Les surfaces montent vers une lumière rasante et la captent sur leur arête. =========================================================================== */ [data-matiere="sombre"] { color-scheme: dark; --fond: #1B222B; --fond-haut: #29343F; /* la lumière rasante, venue du haut */ --fond-bas: #141A21; /* le métal perd la lumière en descendant */ --lueur: rgba(146, 171, 190, .17); --trame: rgba(146, 171, 190, .055); --surface: var(--tb-ardoise); --encre: #EDF1F5; /* 14,1:1 sur le fond */ --encre-2: #AFBCC8; /* 8,3:1 */ /* Meme mesure, meme correction : #7D8B99 tenait 4,6 sur le fond mais tombait a 3,6 sur la surface elevee, ou il est le plus employe. */ --encre-3: #95A3B1; /* 4,8:1 sur la surface */ --filet: rgba(146, 171, 190, .16); --filet-fort: rgba(146, 171, 190, .70); /* 3,4:1 compose sur la surface */ --accent: var(--tb-acier-clair); --accent-nu: rgba(146, 171, 190, .12); /* L'ÉLÉVATION. Liseré clair sur l'arête HAUTE — la surface capte la lumière — et ombre portée dessous — elle la masque. */ --creux: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 0 0 1px rgba(146, 171, 190, .10), 0 1px 2px rgba(0, 0, 0, .30); --creux-fort: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(146, 171, 190, .16), 0 2px 6px rgba(0, 0, 0, .38); --relief: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .34), 0 14px 34px rgba(0, 0, 0, .40); --action-fond: var(--tb-blanc-casse); --action-encre: var(--tb-graphite); --action-arete: rgba(31, 35, 40, .18); } /* =========================================================================== LE SOL — IL N'EST JAMAIS UNE COULEUR PLATE Deux couches, aucune image, aucun octet chargé : 1. une lumière rasante venue du haut, en dégradé long ; 2. une TRAME technique au pas de 24 px, atténuée par un masque radial pour qu'elle disparaisse avant les bords et ne devienne jamais un motif. C'est ce qui distingue une matière d'un aplat. =========================================================================== */ .sol { position: fixed; inset: 0; z-index: -1; background: /* 2. LA LUMIERE. Une source haute et decentree, tres large et tres faible. C'est elle qui fait qu'une plaque a une orientation : sans elle, un fond est un aplat, et un aplat n'a pas de matiere. */ radial-gradient(120% 78% at 22% -12%, var(--lueur) 0%, transparent 62%), /* 1. LE SOL. */ linear-gradient(to bottom, var(--fond-haut) 0%, var(--fond) 52%, var(--fond-bas) 100%); } .sol::after { content: ""; position: absolute; inset: 0; /* 3. LA TRAME TECHNIQUE, au pas de 32 px. Elle ne doit jamais se lire comme du papier millimetre. Deux masques multiplies l'y obligent : un masque RADIAL qui la tient pres de la source de lumiere, et un masque LINEAIRE qui l'eteint vers le bas. Le premier essai n'avait qu'un masque radial : son bord produisait une arete horizontale visible en travers de l'ecran. */ background: repeating-linear-gradient(to right, var(--trame) 0 1px, transparent 1px 32px), repeating-linear-gradient(to bottom, var(--trame) 0 1px, transparent 1px 32px); -webkit-mask-image: radial-gradient(128% 86% at 24% -6%, #000 0%, rgba(0,0,0,.35) 48%, transparent 88%), linear-gradient(to bottom, #000 0%, transparent 76%); mask-image: radial-gradient(128% 86% at 24% -6%, #000 0%, rgba(0,0,0,.35) 48%, transparent 88%), linear-gradient(to bottom, #000 0%, transparent 76%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ---- LE SOCLE COMMUN ----------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--tb-texte); font-size: var(--pas-0); line-height: var(--interligne-corps); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .signe { display: block; } .oeil { font-size: var(--pas--1); letter-spacing: var(--approche-label); text-transform: uppercase; color: var(--encre-3); font-weight: 600; } .donnee { font-family: var(--tb-mono); font-variant-numeric: tabular-nums; } /* Une cible tactile ne descend jamais sous 44 px : c'est la règle d'Apple, et sur un chantier avec des gants, c'est un plancher, pas un idéal. */ button, .action { min-height: 44px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }