/* COPIE DE BUILD — source : packages/shared/styles/tokens.css Ne pas éditer ici, la copie est écrasée à chaque build. */ /* yerbatsede — jetons de marque. SOURCE UNIQUE DE VÉRITÉ. Réécrits de zéro le 1er octobre 2026. ⚠ CE FICHIER A CHANGÉ D'IDENTITÉ. L'ancienne version décrivait un système serif + or sur #071A12, tiré de `design-system.md`. Le skill `yerbatsede-design` — et `packages/shared/src/theme.ts`, qui pilote déjà la web app — décrivent autre chose : registre néo-banque Revolut / Wise / Grey, canvas #0B2B1D, accent lime, **titres en sans**. Raoul a tranché pour celui-là. Les deux fronts parlent enfin la même langue. Les noms suivent `theme.ts` : un jeton porte ici le nom qu'il a là-bas. ⚠ CONTRASTES — calculés, pas estimés. `scripts/check-contrast.mjs` lit ce fichier et vérifie les paires réellement utilisées ; il échoue si l'une passe sous son seuil. Ne pas écrire de ratio à la main ici : un commentaire finit toujours par mentir quand la couleur bouge. Deux valeurs s'écartent volontairement de `theme.ts` : · --mute est éclairci à #A8BFB0 sur le canvas ; · le --text-muted de `theme.ts` (#9DB3A6) ne tient pas sur du blanc. Sur fond clair, le secondaire est --soft #4A5B51. */ :root { /* ═══ canvas — vert profond, jamais noir, jamais gris neutre ═══ */ --canvas: #0B2B1D; --canvas-raised: #123B29; /* cartes, sections alternées */ --canvas-high: #184B33; /* champs, éléments enfoncés */ --line: #1D4F38; /* bordure standard */ --line-strong: #2A6647; /* bordure appuyée, survol */ --highlight-top: rgba(255, 255, 255, 0.07); /* filet lumineux supérieur */ /* ═══ texte sur canvas ═══ */ --on-canvas: #FFFFFF; --soft: #CFE0D5; /* texte courant secondaire */ --mute: #A8BFB0; /* méta, jamais sous 14px */ /* ═══ accent — lime, rare et donc fort ═══ 🔴 Rien de clair sur le lime : blanc dessus = 1.29:1. Tout ce qui s'y pose est en --on-lime, et le survol ASSOMBRIT. */ --lime: #C8F24C; --lime-deep: #AEDC28; /* survol et pressé — plus sombre, jamais plus clair */ --lime-soft: rgba(200, 242, 76, 0.12); --on-lime: #0B2B1D; /* ═══ LE LOGO — trois jetons qui NE S'INVERSENT PAS ═══ 🔴 C'EST LE SECOND JETON DU DÉPÔT À NE PAS SUIVRE SA BANDE, après `--scrim`, et pour une raison du même ordre : un logo est un OBJET FIXE, pas une couleur de surface. L'inverser le ferait changer de dessin entre la vitrine et la web app — soit exactement le défaut qu'unifier la marque vient de fermer. 🔴 ET `--logo-halo` EST LE `--lime-soft` DE LA BANDE **SOMBRE**, FIGÉ. S'il suivait la bande, il vaudrait `rgba(18, 122, 78, 0.10)` dans la web app — un VERT, posé sur l'écusson vert profond, donc un halo invisible. C'est le piège déjà payé deux fois ici : « un bloc d'inversion n'inverse QUE ce qu'il nomme », et `generer-marque.mjs` lit `cSombre.limeSoft` pour cette raison exacte. ⚠ L'étoile ne touche JAMAIS une bande : son seul fond est `--logo-ink`, où le citron donne 11.8:1. Il n'y a donc aucune variante de couleur à choisir selon le fond — donc aucune à se tromper. Le dessin et ses rapports vivent dans `packages/shared/src/brand.ts`. */ --logo-ink: #0B2B1D; --logo-star: #C8F24C; --logo-halo: rgba(200, 242, 76, 0.12); /* ═══ accent secondaire — jaune, pour les chiffres et les repères ═══ */ --gold: #F2C230; /* en FOND : pastilles, repères */ --gold-ink: #F2C230; /* en TEXTE : voir la bande claire ci-dessous */ --gold-soft: rgba(242, 194, 48, 0.13); --on-gold: #0B2B1D; /* ═══ vert d'action — sections claires uniquement ═══ */ --action: #127A4E; --action-deep: #0E6440; /* ═══ accent D'INTERACTION — bordure de survol, anneau de focus ═══ 🔴 CE JETON EXISTE PARCE QUE LES ÉTATS D'INTERACTION ÉTAIENT CASSÉS SUR LA BANDE CLAIRE, et c'est exactement le piège documenté : un bloc d'inversion n'inverse QUE CE QU'IL NOMME. La bande claire redéfinit `--lime-soft` et PAS `--lime` — or l'anneau de focus et toutes les bordures de survol s'y référaient. Sur une carte blanche, le lime acide donne 1.4:1 : on cliquait dans un champ et il ne se passait rien de visible. Le défaut n'était visible dans AUCUN code, seulement à l'écran. ⚠ Ce jeton ne sert JAMAIS de remplissage : le bouton lime, les pastilles et la carte d'accent gardent `--lime` dans les deux bandes. C'est la SIGNALISATION d'un état qui change de couleur, pas la marque. */ --accent-ui: var(--lime); /* ═══ bande claire — inversion complète ═══ Les cartes y passent au BLANC pur : une carte plus sombre que sa bande disparaît (1.07:1). C'est l'ombre qui fait le relief sur fond clair. */ --bg-light: #F6F8F5; --surface-light: #FFFFFF; --ink: #0B2B1D; --ink-soft: #4A5B51; /* remplace le --text-muted de theme.ts */ --ink-mute: #5B6B62; --border-light: #E2E8E4; /* ═══ statuts — identiques à BOLO, pour qu'un statut se lise pareil ═══ 🔴 La couleur ne porte jamais seule le sens : un libellé ou un trait l'accompagne toujours. Le lime et le jaune se ressemblent en vision deutan. */ --success: #38A169; --error: #E53E3E; --info: #3B5BDB; --warning: #F0A500; /* ═══ statuts EN TEXTE et EN FOND TEINTÉ ═══ Les quatre valeurs ci-dessus sont des couleurs de REMPLISSAGE : posées en texte sur le canvas vert elles tombent sous le seuil AA (le rouge donne 3.70, le bleu 2.69). Un statut écrit se lit donc dans sa variante --*-ink, calculée pour passer sur la surface la plus claire de la bande, et posée sur son fond --*-soft. 🔴 Pas de pastille pleine pour un statut : le texte sombre ne tient que sur le jaune et de justesse sur le vert. Fond teinté + texte --*-ink. Ratios vérifiés par `apps/landing/scripts/check-contrast.mjs`. */ --error-ink: #F19999; --success-ink: #78BF99; --info-ink: #9DADED; --warning-ink: #F0A500; --error-soft: rgba(229, 62, 62, 0.16); --success-soft: rgba(56, 161, 105, 0.16); --info-soft: rgba(59, 91, 219, 0.20); --warning-soft: rgba(240, 165, 0, 0.16); /* ═══ 🔴 L'ANNONCE IMPORTANTE — TROIS ALIAS, ET AUCUNE VALEUR NEUVE ═══════ Demande de Raoul, 25 octobre : « refais le composant announcement avec le design maison — fond rosé, bordure rouge, apparence clairement identifiable comme une information importante ». 🔴 CE SONT DES ALIAS DU REGISTRE ROUGE, PAS UNE QUATRIÈME TEINTE. « Une couleur étrangère à la palette est ce qui fait sorti d'ailleurs avant qu'on sache dire pourquoi » — c'est ce qui a fait sortir `--info-ink` (#3B5BDB) de l'encart dans le flux. Le rouge existe déjà ici, et les deux paires `--error-ink` sur `--error-soft` sont les SEULES de cette famille que `check-contrast.mjs` ait mesurées posées l'une sur l'autre. En inventer une nuance de rosé propre rouvrirait cet angle mort. 🔴 ET UN NOM À PART, BIEN QUE LES VALEURS SOIENT LES MÊMES. Une annonce n'est PAS une erreur : écrire `--error-soft` dans la feuille de l'annonce ferait lire « cet écran est en défaut » à qui relit le code, et le premier à vouloir « nettoyer » la retirerait. L'inverse de la faute de `--scrim` — là deux ROLES partageaient un nom, ici un rôle reçoit le sien sans se fabriquer une seconde source de vérité. ⚠ `--notice-line` EST LA COULEUR DE REMPLISSAGE, PAS L'ENCRE. `--error` (#E53E3E) donne 3.98:1 sur blanc, donc au-dessus du 3:1 que WCAG 1.4.11 demande à une bordure de composant — et c'est un trait, jamais du texte. L'encre reste `--notice-ink`, qui est la variante mesurée. ⚠ LES TROIS VIVENT DANS LES DEUX BANDES. C'est le piège 1 du dépôt — « un bloc d'inversion n'inverse QUE ce qu'il nomme » : `--notice-soft` défini ici seulement garderait le rosé de la bande SOMBRE sur une carte blanche. Les deux premiers suivent donc leur source dans chaque bande ; `--notice-line` ne s'inverse pas, parce que `--error` ne s'inverse pas. */ --notice-ink: var(--error-ink); --notice-soft: var(--error-soft); --notice-line: var(--error); /* ═══ dégradé — UN SEUL sur tout le site, le bloc de clôture ═══ */ --close-grad: linear-gradient(135deg, #C8F24C 0%, #F2C230 100%); /* ═══ voile posé sur une PHOTOGRAPHIE ═══ 🔴 `--scrim-photo`, ET PLUS `--scrim`. Les deux existaient sous le MÊME nom dans ce bloc `:root` — ce dégradé ici, et le voile de surcouche (`rgba(4, 18, 12, 0.62)`) une cinquantaine de lignes plus bas. La seconde déclaration gagne, en silence : `.hero__scrim` de la vitrine demandait un voile DIRECTIONNEL (sombre à gauche où vit le texte, clair à droite où vit l'image) et recevait un aplat uniforme à 62 %. L'image était noyée, le dégradé n'avait jamais été supprimé, et rien dans aucune porte ne pouvait le dire : les deux valeurs sont valides, c'est le NOM qui était en double. ⚠ Deux rôles n'ont pas un nom. Un voile de lecture sur une photo et un voile d'extinction sous une modale ne se règlent pas ensemble : l'un suit la composition de l'image, l'autre suit la bande. ═══ */ --scrim-photo: linear-gradient(100deg, rgba(11, 43, 29, 0.97) 0%, rgba(11, 43, 29, 0.88) 34%, rgba(11, 43, 29, 0.30) 62%, rgba(11, 43, 29, 0.55) 100%), linear-gradient(0deg, rgba(11, 43, 29, 0.94) 0%, rgba(11, 43, 29, 0) 40%); /* Sur mobile le texte descend en bas de l'image : le voile doit assombrir le BAS, pas la gauche. */ --scrim-photo-tall: linear-gradient(0deg, rgba(11, 43, 29, 0.96) 0%, rgba(11, 43, 29, 0.82) 28%, rgba(11, 43, 29, 0.34) 58%, rgba(11, 43, 29, 0.42) 100%); /* ═══ typographie — sans uniquement ═══ Cabinet Grotesk porte le titrage : comptes étroits, dessin tenu, économe en chasse. Satoshi porte le texte. Les deux auto-hébergées. */ --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif; --font-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif; /* Échelle. Titres grands, interlettrage serré négatif — Revolut titre à 88px/−0.024em, Grey à 86px/−0.047em. */ --fs-display: clamp(44px, 11vw, 92px); --fs-h2: clamp(30px, 4.2vw, 56px); --fs-h3: clamp(20px, 2vw, 26px); --fs-lead: clamp(17px, 1.5vw, 21px); --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; /* ═══ espacement — 4px de base. JAMAIS 14 ni 18. ═══ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; --s-11: 128px; /* Rythme vertical mesuré sur les références : Revolut 64px, Wise 56-75, Grey 40-72. Voir docs/taste/synthese.md. */ --section-y: clamp(64px, 7vw, 112px); --gutter: clamp(20px, 5vw, 64px); --maxw: 1200px; /* ═══ rayons — contrôles 14, cartes 20, grandes cartes 28, pilules 999 ═══ */ --r-control: 14px; --r-card: 20px; --r-large: 28px; --r-pill: 999px; /* ═══════════════════════════════════════════════════════════════════════ MOUVEMENT 🔴 IL Y AVAIT DEUX DURÉES ET UNE SEULE COURBE, et c'est ce qui donnait à l'app son défaut le plus constant : tout bougeait au même rythme et sur la même inertie. Un survol, une pression, l'arrivée d'une modale et la bascule d'un écran n'ont pas la même urgence ; les rendre identiques fait lire chaque geste comme un demi-temps de retard. ⚠ LES DEUX ANCIENS NOMS SURVIVENT À L'IDENTIQUE. `--t-micro` et `--t-enter` sont lus par la vitrine (`apps/landing/assets/css/app.css`), qui est une page de lecture et non une interface manipulée : ses valeurs lui vont, et les changer sous elle serait une refonte qu'on n'a pas décidée. Seule la web app migre vers l'échelle ci-dessous. 🔴 UNE SORTIE EST TOUJOURS PLUS RAPIDE QU'UNE ENTRÉE, et c'est la règle qui porte à elle seule la sensation de « premium ». Une arrivée se regarde — elle a le droit de prendre son temps, c'est elle qui dit d'où vient l'objet. Un départ répond à un geste DÉJÀ fait : la décision est prise, l'attention est déjà ailleurs, et chaque milliseconde de plus se lit comme une hésitation du logiciel. Même valeur dans les deux sens, c'est exactement l'effet « lourd » qu'on cherche à retirer. ═══════════════════════════════════════════════════════════════════════ */ /* La PRESSION. Doit être perçue comme simultanée au doigt : au-delà de ~100ms le retour n'est plus attribué au geste, il est attribué au logiciel. */ --t-press: 90ms; /* Le SURVOL et tout changement de couleur. ⚠ Valait 200ms, et c'était le défaut le plus répandu de la feuille : une couleur de bouton qui met un cinquième de seconde à s'établir traîne derrière le curseur. */ --t-micro: 140ms; /* Un petit DÉPLACEMENT (liste qui s'ouvre, pastille qui glisse). */ --t-fast: 200ms; /* L'ARRIVÉE d'une surcouche — modale, menu latéral, feuille. */ --t-in: 280ms; /* Son DÉPART. Volontairement ~⅔ de l'arrivée : voir la règle ci-dessus. */ --t-out: 180ms; /* L'arrivée d'un ÉCRAN entier, le seul mouvement long qui reste. */ --t-enter: 520ms; /* ── Courbes ─────────────────────────────────────────────────────────── ⚠ UNE SEULE COURBE POUR TOUT EST UNE ERREUR DE RÉGLAGE, pas un parti pris. `--ease` est une expo-out très marquée : 90 % du trajet est parcouru dans le premier quart du temps, puis l'objet RAMPE jusqu'à sa place. C'est juste pour une entrée — ça donne du poids —, et c'est exactement ce qu'il ne faut pas sur un survol, où ce ramping se lit comme un retard. */ /* Entrées, et rien d'autre. Inchangée : c'est l'ancienne `--ease`. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Le cas ordinaire : changement d'état, couleur, survol. Décélère sans ramper. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* Les SORTIES accélèrent — l'objet part, il n'a pas à être accompagné. */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Le relâchement d'une pression : un dépassement court, qui rend le bouton « vivant » sans le faire rebondir comme un jouet. ⚠ Réservé au relâchement ; posé sur une entrée de panneau, il donne le registre d'une application de jeu. */ --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); /* ═══ élévation ═══ INTERDITE sur le canvas vert : une ombre portée n'y existe pas. Le relief vient de la bordure et du filet lumineux. Réservée à la bande claire et à ce qui flotte réellement au-dessus d'une image. */ --lift: 0 2px 10px rgba(11, 43, 29, 0.07), 0 20px 44px -20px rgba(11, 43, 29, 0.18); --lift-dark: 0 20px 52px -20px rgba(2, 12, 7, 0.9); /* ═══ verre — uniquement sur ce qui flotte au-dessus de quelque chose ═══ */ --glass-bg: rgba(18, 59, 41, 0.58); --glass-line: rgba(255, 255, 255, 0.14); --glass-solid: #123B29; --nav-veil: rgba(11, 43, 29, 0.78); --nav-solid: #0B2B1D; /* ═══ 🔴 LE VOILE DES SURCOUCHES — ET POURQUOI CE N'EST PAS `--nav-veil` ═══ `--nav-veil` teinte une barre de navigation : il prend la couleur de SA bande, parce qu'il doit se fondre dans la page. Un voile de surcouche fait l'inverse — il doit ASSOMBRIR ce qu'il y a derrière, pour que la boîte posée dessus se détache. 🔴 LES CONFONDRE CASSE LA BANDE CLAIRE. En clair, `--nav-veil` vaut `rgba(246, 248, 245, 0.78)` : un voile BLANC. Posé derrière un panneau blanc, il ne sépare rien du tout — le menu latéral du téléphone avait l'air d'avoir simplement décalé le contenu, et une modale flottait sans qu'on sache sur quoi. ⚠ TEINTÉ VERT PROFOND, PAS NOIR, dans les deux bandes : un noir pur sous une interface verte vire au gris et casse la chaleur de la palette. */ --scrim: rgba(4, 18, 12, 0.62); /* ═══ couleurs officielles des schémas de paiement ═══ Reprises des chartes, pour que SEPA soit du bleu SEPA. Ne pas inventer. */ --scheme-sepa: #10298E; --scheme-fps: #176FC1; --scheme-ach: #0CC400; --scheme-pix: #32BCAD; /* L'encre qui TIENT sur chacune. Calculée, pas choisie : le bleu SEPA demande du blanc (1.26:1 avec l'encre), le vert ACH et le turquoise Pix demandent l'encre (2.36:1 avec du blanc). Une seule couleur de texte pour les quatre aurait rendu deux pastilles illisibles. */ --on-scheme-sepa: #FFFFFF; --on-scheme-fps: #FFFFFF; --on-scheme-ach: #0B2B1D; --on-scheme-pix: #0B2B1D; } /* La bande claire inverse tout le jeu. Deux sections par page au maximum, jamais un thème global. */ [data-band="light"] { --canvas: #F6F8F5; --canvas-raised: #FFFFFF; --canvas-high: #EDF1EC; --line: #E2E8E4; --line-strong: #CBD8CF; /* Le lime acide ne signale rien sur du blanc : l'accent d'interaction passe au vert d'action, vérifié à 5.0:1 sur la bande et 5.36:1 sur une carte. */ --accent-ui: var(--action); --highlight-top: rgba(255, 255, 255, 0.9); --on-canvas: #0B2B1D; --soft: #4A5B51; --mute: #5B6B62; --lime-soft: rgba(18, 122, 78, 0.10); --gold-soft: rgba(140, 101, 11, 0.12); /* 🔴 L'or en texte sur du blanc donne 1.65:1 — illisible. En fond il reste vif ; en texte il descend au bronze. */ --gold-ink: #8A6508; --glass-bg: rgba(255, 255, 255, 0.72); --glass-line: rgba(11, 43, 29, 0.10); --glass-solid: #FFFFFF; /* ⚠ Ces trois-là manquaient au bloc clair, et c'est ce qui empêchait de basculer une interface entière en clair : l'en-tête gardait son voile SOMBRE par-dessus un fond blanc, et l'ombre « flottante » restait une ombre noire posée sur du clair. Un bloc d'inversion n'inverse que ce qu'il nomme — tout ce qu'il oublie reste au réglage de la bande sombre. */ --nav-veil: rgba(246, 248, 245, 0.78); --nav-solid: #F6F8F5; /* ⚠ LE VOILE DE SURCOUCHE RESTE SOMBRE EN BANDE CLAIRE, et c'est le seul jeton de ce bloc qui ne s'inverse PAS. Son rôle n'est pas de s'accorder à la page, c'est de l'éteindre : un voile clair sur une page claire ne sépare rien. Un peu moins dense qu'en bande sombre — sur du clair, 0.62 écrase. */ --scrim: rgba(11, 43, 29, 0.46); --lift-dark: 0 2px 10px rgba(11, 43, 29, 0.07), 0 20px 44px -20px rgba(11, 43, 29, 0.18); /* Les statuts s'inversent aussi : sur blanc, #F19999 donne 1.9:1. ═══ 🔴 DEUX D'ENTRE EUX ONT ÉTÉ ASSOMBRIS, ET C'EST UNE PORTE QUI L'A DIT ══ `check-contrast.mjs` ne savait pas aplatir une teinte translucide : les quatre `--*-soft` sont des `rgba()`, donc elle les ignorait, et personne n'avait jamais mesuré une encre POSÉE DESSUS. Tant que ces jetons n'habillaient qu'une pastille de 24 px, l'angle mort était petit. Depuis que l'encart d'erreur dans le flux porte une surface, c'est le fond d'un paragraphe entier — et le calcul est tombé à **4.33:1** pour `--error-ink` sur `--error-soft` posé sur la page, **4.50:1** pour `--warning-ink` sur `--warning-soft` posé sur une carte. Les deux sous AA. ⚠ ASSOMBRIR NE PEUT RIEN CASSER : toutes les autres paires de ces deux jetons passent déjà, et un texte plus foncé ne fait qu'augmenter leur ratio. C'est la correction la plus petite qui tienne. */ --error-ink: #BE3030; --success-ink: #2A794F; --info-ink: #3B5BDB; --warning-ink: #845B00; --error-soft: rgba(197, 53, 53, 0.10); --success-soft: rgba(42, 121, 79, 0.10); --info-soft: rgba(59, 91, 219, 0.10); --warning-soft: rgba(144, 99, 0, 0.12); /* 🔴 LES DEUX ALIAS DE L'ANNONCE SUIVENT LEUR SOURCE DANS CETTE BANDE, et c'est obligatoire : `var()` est résolu à l'USAGE, donc les déclarer une seule fois dans `:root` suffirait en CSS — mais PAS pour le générateur de jetons du mobile, qui « résout l'alias DANS SA BANDE » et prendrait sinon le rosé de la bande sombre pour une carte blanche. « Résoudre `--accent-ui` contre la bande sombre validerait le citron en croyant mesurer le vert. » ⚠ `--notice-line` N'EST PAS REPRIS, et c'est exact : `--error` ne s'inverse pas d'une bande à l'autre, donc le redéclarer ici écrirait la même valeur à deux endroits. */ --notice-ink: var(--error-ink); --notice-soft: var(--error-soft); }