/* =========================================================================== LE SOCLE DE LA PLANCHE — jetons partagés par les trois surfaces =========================================================================== ── CE QUE CE FICHIER EST, ET CE QU'IL N'EST PAS ─────────────────────────── Boris a fermé la recherche artistique le 16/09/2026 et figé une planche visuelle comme contrat : « La planche est la base. Lorsque tu hésites visuellement : REGARDE LA PLANCHE. » Ce fichier est la traduction de cette planche en valeurs, et rien d'autre. IL NE CONTIENT AUCUN COMPOSANT. Un socle qui dessine des boutons devient un cadre, et l'on se met à construire des pages qui ressemblent au cadre au lieu de ressembler à la planche. Ici : des couleurs, une échelle, des profondeurs, des durées. Chaque surface compose avec. « Ne commence pas par fabriquer un immense framework de composants dont aucune page n'est terminée. » ── L'ALTERNANCE SOMBRE / CLAIR EST DANS LA PLANCHE ──────────────────────── Elle porte les DEUX, et Boris l'a validée nommément (« cette alternance sombre / clair »). Ce n'est pas un thème au choix de l'utilisateur, c'est une DRAMATURGIE : L'IVOIRE est le jour ordinaire — l'accueil, ce qu'on lit, ce qu'on fait. LE BLEU NUIT est le moment où Dona prend la parole. L'écran change alors de nature, et c'est exactement ce que Boris demandait en citant Siri. On ne mélange donc jamais les deux sur une même surface au même instant : on BASCULE, et la bascule est l'événement. ── CE QUI EST INTERDIT, ET QUI REVIENT TOUJOURS PAR LA FENÊTRE ──────────── Le cyan et le turquoise (« bleu ≠ eau » — aucun lien littéral avec l'hydraulique n'est nécessaire), l'accent néon sur presque-noir, l'ancienne charte du 28 août (#191d20, #d4571f, Archivo), le rouge sprinklage comme accent de la Growth Machine, et le monospace comme personnalité. Tout ce qui est froid vit entre 205 et 230 degrés de teinte. Au-delà de 190 on entre dans le turquoise, et c'est le refus le plus ancien du dossier. =========================================================================== */ /* ── LA POLICE EST DECLAREE ICI, ET SOUS SON VRAI NOM ───────────────────── ELLE ETAIT DECLAREE « Familjen » DANS `app/ecran.css` ET DEMANDEE « Familjen Grotesk » PARTOUT AILLEURS. Consequence mesuree le 17/09 : `document.fonts` etait VIDE sur le pupitre, le terrain, la route, l'ecran riche et l'equipe — ces cinq surfaces prechargeaient le fichier et s'affichaient en police systeme. Seule `/` fonctionnait, parce que c'est la seule feuille qui demandait le nom tronque. C'EST EXACTEMENT LE PIEGE DE SAIRA, DIX JOURS PLUS TARD : « NOMMEE et jamais CHARGEE ». Un nom de famille est un contrat entre deux fichiers, et quand les deux ne sont pas au meme endroit, personne ne voit qu'ils divergent. La declaration vit donc dans le SOCLE, avec les jetons : toute surface qui charge le socle a la police, et il n'y a plus qu'un seul endroit ou le nom est ecrit. Le nom est celui de la table `name` du fichier. */ @font-face { font-family: 'Familjen Grotesk'; src: url('/polices/familjen-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ── LA NUIT. Relevée sur la bande « expérience vocale » de la planche : un bleu presque noir, jamais un gris. C'est lui qui donne à la matière froide sa profondeur et à l'ambre sa rareté. */ --nuit: #070B14; --nuit-haute: #0B1220; /* le haut du dégradé, à peine plus clair */ --abysse: #0B1323; /* le cœur d'un volume, dans l'ombre */ /* ── L'ACIER ET SA LUMIÈRE. La matière des voiles, puis ce qui les éclaire. Deux valeurs seulement : au-delà, on fabrique un dégradé de marque et l'on perd le contraste qui fait la planche. */ /* Le nom porte « bleu » EXPRES : l'ancienne charte du 28 aout avait deja un `--acier`, et il valait un presque-noir. Deux jetons du meme nom dans un meme depot sont un piege, et `verifier-charte` a eu raison de le refuser. */ --bleu-acier: #37598C; --bleu-acier-clair: #6E93C4; --lumiere: #A5C4E6; /* ── L'AMBRE. Le seul chaud, et il est RARE. Mesuré sur la planche : 29 degrés de teinte, 61 % de saturation. Un beige à 37 degrés lit « crémeux » et tue l'effet. Il ne sert qu'à ce qui vient d'agir ou attend une main. */ --ambre: #DAAB60; --ambre-sourd: #8A6A38; /* ── LE JOUR. L'accueil de la planche : un ivoire, pas un blanc d'écran. */ --ivoire: #F5F3EC; --ivoire-haut: #FBFAF6; --ivoire-creux: #EBE7DD; --graphite: #1B2028; /* le texte sur l'ivoire */ --graphite-doux: #5A646F; /* ── LES RÔLES. Les surfaces n'emploient QUE ceux-là : une couleur nommée par son rôle se déplace d'un sol à l'autre ; une couleur nommée par sa teinte oblige à réécrire chaque règle. */ --sol: var(--ivoire); --sol-haut: var(--ivoire-haut); --sol-creux: var(--ivoire-creux); --encre: var(--graphite); --encre-douce: var(--graphite-doux); --filet: color-mix(in srgb, var(--graphite) 12%, transparent); --accent: var(--bleu-acier); --chaud: var(--ambre-sourd); /* ── L'ÉCHELLE. Fermée. Sept valeurs, et rien entre elles : c'est ce qui fait qu'un écran a des proportions au lieu d'avoir des tailles. */ --t-lire: 1.0625rem; /* 17 px — le corps, plancher de lisibilité */ --t-dit: 1.375rem; /* ce que Dona dit */ --t-phrase: 1.75rem; /* la phrase d'ouverture */ --t-titre: 2.375rem; /* « Bonjour Boris » */ --t-detail: 0.9375rem; /* 15 px — jamais moins pour de la prose */ --t-mention: 0.8125rem; /* 13 px — étiquettes, jamais des phrases */ /* L'ESPACE SUIT LA MÊME DISCIPLINE : une seule série, tout s'y aligne. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --arrondi: 14px; --arrondi-pouce: 999px; /* ── LA PROFONDEUR. La planche ne pose pas d'ombres portées de carte : elle a de la LUMIÈRE et de la matière. Deux valeurs, et elles sont douces — une ombre dure fabrique un objet posé, donc une carte. */ --relief-pose: 0 1px 2px color-mix(in srgb, var(--nuit) 10%, transparent); --relief-leve: 0 10px 30px color-mix(in srgb, var(--nuit) 16%, transparent); /* ── LE TEMPS. Trois durées. Ce qui répond au doigt est court, ce qui transforme l'écran est long, et rien n'est entre les deux par hasard. */ --vite: 140ms; --pose: 320ms; --bascule: 620ms; --courbe: cubic-bezier(.22, .61, .36, 1); --marge-haute: max(var(--e5), env(safe-area-inset-top)); --marge-basse: max(var(--e5), env(safe-area-inset-bottom)); color-scheme: light; } /* ── LA NUIT : LE MÊME JEU DE RÔLES, D'AUTRES VALEURS ───────────────────── On bascule un attribut sur la racine et TOUTE la surface change de nature. C'est l'événement que Boris décrit en parlant de Siri, et il coûte une classe. Aucune règle de composant ne connaît la couleur : elles ne connaissent que les rôles. */ [data-sol="nuit"] { --sol: var(--nuit); --sol-haut: var(--nuit-haute); --sol-creux: #050810; --encre: #E6EEF8; --encre-douce: #8FA6C0; --filet: color-mix(in srgb, var(--lumiere) 14%, transparent); --accent: var(--bleu-acier-clair); --chaud: var(--ambre); --relief-pose: 0 1px 2px #00000055; --relief-leve: 0 12px 40px #00000077; color-scheme: dark; } /* ── CE QUE TOUTE SURFACE HÉRITE ────────────────────────────────────────── Le strict nécessaire pour qu'une page ne parte pas de travers : la police du dépôt, une couleur de sol explicite, et le pouce respecté. */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--sol); color: var(--encre); font: 400 var(--t-lire)/1.45 'Familjen Grotesk', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* AUCUNE TRANSITION DE FOND ICI. Une couleur de fond n'est pas composee par le processeur graphique : elle repeint toute la couche a chaque image. Le fondu du sol est fait par la presence, dont la toile est deja repeinte — il y coute zero. La couleur du texte, elle, ne couvre que des glyphes. */ transition: color var(--pose) var(--courbe); } * { -webkit-tap-highlight-color: transparent; } button, a.acte { font-family: inherit; } /* PLANCHER DU POUCE. Apple dit 44 ; rien de cliquable n'y échappe, et ce n'est pas une recommandation sur un téléphone tenu d'une main sur un chantier. */ button, a.acte, [role="button"] { min-height: 44px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }