/* ── HUKAIA · LES JETONS DE DESIGN, EN UN SEUL ENDROIT ───────────────────── Chantier B1 (7 novembre 2026, plan validé par Charlotte) : couleurs, typographie, espacements, rayons, ombres et mouvements vivaient dans huit feuilles, et 29 variables étaient définies à plusieurs endroits. Elles sont toutes ici, chargées EN PREMIER. Les feuilles ne font plus que s'en servir (var(--…)). Ce déplacement ne change aucune valeur : les blocs sont repris tels quels, dans l'ordre où les feuilles se chargeaient, si bien que la dernière définition l'emporte comme avant. tools/banc-jetons.js le vérifie (valeurs calculées identiques, en clair et en sombre) et refuse toute nouvelle couleur écrite en dur dans les feuilles. Les surcharges de thème (nuit, sombre) restent dans leur feuille : ce sont des variantes, pas des définitions. */ /* ════ Repris de core.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ :root{ /* ── L'encoche ──────────────────────────────────────────────────────── env(safe-area-inset-top) était écrit en toutes lettres à quatorze endroits. Deux inconvénients, et le second est celui qui a coûté : · un écran qui oublie de la reprendre laisse une bande crème sous l'heure — c'est arrivé au Monde, dont le globe démarrait SOUS la barre d'état au lieu de passer dessous (retour de Charlotte, le 6 septembre : « le bandeau blanc en haut à corriger ») ; · et rien ne pouvait le vérifier : le navigateur du harnais rend env(safe-area-inset-top) à zéro, sans moyen de lui en donner une autre. Un banc mesurait donc un iPhone sans encoche, c'est-à-dire aucun iPhone. Le passage par une variable règle les deux : un banc pose --encoche:59px sur la racine et mesure ce que voit vraiment quelqu'un avec une Dynamic Island. Les écrans convertis sont ceux qui touchent au haut de l'écran — .tabview, le héros de l'Accueil, le globe du Monde ; le reste utilise encore env() en direct et pourra suivre. */ --encoche:env(safe-area-inset-top, 0px); /* Aucun mode sombre n'existe encore dans cette DA — sans cette ligne, un iPhone en mode sombre système laissait WebKit essayer d'assombrir certains éléments natifs (champs, défilement) tout seul, en désaccord avec le reste de l'interface qui restait clair. Déclare explicitement "cette page est claire, ne touche à rien" plutôt que de laisser un mode sombre à moitié auto-appliqué. */ color-scheme:light; /* Surfaces — blanc et gris neutres, zéro teinte parchemin/sable */ --bg:#FFFFFF; --surface:#FAFAF8; --surface2:#F0F0EE; --surface-raised:#FAFAF8; /* Encre — brun-noir profond, jamais pur noir */ --ink:#221D16; --ink-soft:#5C5345; --sub:#756B58; /* Lignes */ --line:#E8E8E6; --line2:#DFDFDC; /* Or — patiné, signature de la marque, réservé aux accents ponctuels */ --gold:#A6824A; --gold-soft:#C9A96E; --gold-deep:#8A6526; --gold-bright:#E8C98C; /* Divers */ /* --ph assombri de #8F8F89 (~3.25:1 sur blanc) à #7A7062 (~4.86:1) : sous le minimum WCAG AA (4.5:1) pour un placeholder, texte pourtant lu comme un vrai libellé tant qu'aucune saisie n'a eu lieu (ex: champ vide dans un formulaire). Reste plus clair que --sub pour garder la distinction visuelle "indice" vs contenu réel. */ --onink:#F6F6F3; --ph:#7A7062; --ok:#5d7a4e; /* --warn/--danger : jusqu'ici des hex répétés en dur à quelques endroits (badge "non confirmé", alerte pluie, message d'erreur), jamais posés en variable — repris tels quels ici, juste nommés, pour rester cohérent si un jour on passe en mode sombre (un seul endroit à redéfinir). */ --warn:#C9822B; --warn-deep:#9C7C2E; /* Rouge système iOS. Trois briques différentes cohabitaient (#B3452E, #B23B2E, #C0503C), toutes un peu sales à côté de la menthe et étrangères à la plateforme. Le rouge destructeur d'iOS est celui que tout le monde reconnaît sans avoir à lire le mot. */ --danger:#FF3B30; --danger-deep:#D70015; /* Typographie — Sora (titres, labels, UI) / Hanken Grotesk (texte courant) / Spline Sans Mono */ --serif:'Sora',-apple-system,'Helvetica Neue',sans-serif; --serif-text:'Sora',-apple-system,sans-serif; --sf:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif; --sans:'Hanken Grotesk',-apple-system,sans-serif; --mono:'Spline Sans Mono','SF Mono',monospace; /* Géométrie — radius généreux et cohérent. --card-radius-sm : cartes compactes en liste (repère réservation, pépite, hébergement…) — un radius plus petit que --card-radius pour rester proportionné à leur taille, mais un SEUL chiffre entre elles plutôt que 14px ici, 16px là au hasard des écrans (audit DA globale, retour de Charlotte). */ --card-radius:var(--r-lg); --card-radius-sm:var(--r-md); --btn-radius:var(--r-pill); /* Ombres — neutres, plates, aucune teinte sépia */ --shadow-card:0 1px 2px rgba(20,18,14,0.04),0 4px 16px rgba(20,18,14,0.05),0 20px 44px -26px rgba(20,18,14,0.28); --shadow-float:0 24px 64px -28px rgba(20,18,14,0.32); --shadow-raised:0 12px 28px -18px rgba(20,18,14,0.32); --shadow-postcard:0 12px 28px -18px rgba(20,18,14,0.5); --tile-bg:linear-gradient(160deg,#F4F4F2,#EDEDEA); --tap-min:44px; --tap-comfortable:52px; --spring:cubic-bezier(0.34,1.2,0.4,1); --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.4,0,0.2,1); } /* ════ Repris de da.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* Les @font-face vivent en tête de core.css — polices embarquées. */ /* ══════════════════════════════════════════════════════════════════════════ HIC SUNT — IDENTITÉ VISUELLE (refonte complète) Chargée en dernier, après core / screens / overlays / features / atlas. Le squelette de l'app (HTML, JS, navigation) reste intact : cette couche ne fait que remplacer l'habillage. Principes : · fond blanc chaud, aéré, hyper moderne · AUCUN aplat noir : ni carte noire, ni bouton noir · l'or #A6824A = la maison — actions, sélections, chrome · Sora (titres + labels) · Hanken Grotesk (texte) — ni serif ni mono · filets fins, ombres douces et précises, rayons cohérents · plus de parchemin, plus de sable, plus de coordonnées ══════════════════════════════════════════════════════════════════════════ */ /* ══ 1. JETONS ═══════════════════════════════════════════════════════════ L'app appelle ses couleurs et polices par variables : les redéfinir ici rhabille tous les écrans d'un seul coup. */ :root{ /* Surfaces L'ivoire était à #FCFBFA — 1,03:1 contre le blanc des cartes, un point et demi de clarté. Toute la grammaire de la référence (« des cartes blanches POSÉES sur l'ivoire ») reposait donc sur un écart que l'œil ne voit pas : les cartes n'existaient que par leur ombre portée. L'ivoire est franc maintenant, et le blanc se lève dessus. */ /* ══ L’ÉCHELLE DES NEUTRES ═════════════════════════════════════════ Relevé avant d’écrire : douze fonds rendus sur cinq écrans, dont DEUX gris distants de deux points — --fog-soft #EDEAE4 et --surface2 #EBE7DE. Deux points, c’est en dessous du seuil de l’œil : ce n’était pas une nuance, c’était un doublon. Huit valeurs de gris tenaient sur vingt-huit points, posées une à une au fil des écrans. Cinq marches, d’un pas régulier d’environ neuf points. Les huit anciens noms restent — ils sont cités partout — mais ils désignent désormais une marche, et deux noms qui désignent la même marche sont la même couleur, pour de bon. */ /* ── LA CHALEUR, ET LE JOUR OÙ ELLE EST DEVENUE DU BEIGE ─────────── Charlotte : « pourquoi l’app est devenue beige, à quel moment j’ai demandé ça ? » Elle ne l’a pas demandé. C’est une décision que j’ai prise seul le 31 août (« Audit esthétique — l’ivoire, la barre… ») et elle n’était qu’à moitié juste. LA MOITIÉ JUSTE : le fond était à #FCFBFA contre le blanc des cartes, soit 1,03:1. Un point et demi de clarté — l’œil ne le voit pas. Toute la grammaire « des cartes blanches posées sur le fond » reposait sur un écart qui n’existait pas : les cartes ne tenaient que par leur ombre. Il fallait creuser cet écart, et il le faut toujours. LA MOITIÉ FAUSSE : j’ai creusé l’écart EN AJOUTANT DE LA CHALEUR. Le fond est passé à #F4F1EA — dix points d’écart entre le rouge et le bleu — et toute l’échelle a suivi jusqu’à vingt-deux points. Ce n’est pas la clarté qui fait le beige, c’est cet écart-là. Et les deux directions que Charlotte a fournies sont l’une et l’autre sur un fond neutre : la référence que je citais pour justifier le changement ne l’autorisait pas. LA CORRECTION : on garde la CLARTÉ au point près — l’écart avec le blanc, durement gagné, reste intact, à un millième près : chaque valeur a été RÉSOLUE pour retomber sur la clarté qu’elle avait — et on retire les deux tiers de la chaleur. Un blanc de papier, pas un beige. La chaleur de la marque reste où elle a un sens : dans l’encre (--ink, brun-noir) et dans la couleur du jour. */ --n-0:#FFFFFF; /* la surface posée : carte, feuille, champ */ --n-1:#F3F1EF; /* le fond de l’app */ --n-2:#EBE9E6; /* le creux léger : rangée, pilule au repos */ --n-3:#E1DEDB; /* le creux marqué : vignette, filet */ --n-4:#D7D4D0; /* le trait appuyé */ --bg:var(--n-1); /* Les surfaces SOMBRES — bannières, cartes en relief, voiles de photo. Elles étaient teintées vert menthe (var(--nuit) → var(--nuit-profond)), hérité de la direction « Verre & Menthe » : la couleur de marque d'alors se retrouvait jusque dans le fond des cartes. Depuis que l'accent suit la saison, ce vert ne s'accorde qu'au printemps — onze mois sur douze il jure avec la couleur du jour. Ces valeurs sont donc NEUTRES, de la même famille que --ink : la couleur du jour redevient la seule couleur de l'écran. */ --nuit:#2B2622; --nuit-profond:#16120F; --nuit-voile:20,17,14; --surface:var(--n-0); --surface2:var(--n-2); --surface-raised:var(--n-0); /* ── Encre : mesurée, pas choisie à l'œil ───────────────────────── Une application de voyage se lit dehors, en plein soleil, sur un écran qu'on n'a pas le temps de régler. Les valeurs ont donc été CALCULÉES : pour chaque encre, la plus claire qui atteigne 4,5:1 (le seuil de lisibilité du texte courant) sur le PIRE des trois fonds où elle sert — --surface2, le creux des champs et des rangées. Teinte et saturation inchangées, seule la clarté descend. Mesures avant : --sub #79726A 4,21 sur le fond de l'app, 3,91 dans un creux --ph #ABA498 2,19 sur le fond de l'app, 2,04 dans un creux --ok #129A8B 3,10 sur le fond de l'app, 2,88 dans un creux --sub porte tout le texte secondaire : sous-titres, descriptions, l'essentiel de ce qui se lit. --ph porte les indications de saisie — à 2,0:1 elles n'existaient tout simplement pas au soleil, et ce sont elles qui disent quoi écrire dans le questionnaire. Après : 4,53 à 5,50 partout. L'écart avec --ink reste large (15:1), donc la hiérarchie tient : le secondaire reste secondaire, il devient seulement lisible. */ --ink:#1F1A14; --ink-soft:#6F6861; --sub:#6F6861; /* Filets */ /* Les filets étaient à 1,27:1 sur blanc : présents dans la feuille, absents à l'écran. */ --line:var(--n-3); --line2:var(--n-4); /* Maison — encre neutre (l'or a été retiré : la seule couleur de l'interface est désormais l'ADN de la destination) */ --gold:#1F1A14; --gold-soft:#4A4640; --gold-deep:#000000; --gold-bright:#6F6861; /* Divers */ --onink:#FFFFFF; --ph:#70685B; --ok:#0E766B; /* ── Échelle typographique ──────────────────────────────────────── Mesurée, pas inventée. Un relevé sur huit écrans réels a trouvé TRENTE-SIX couples taille/graisse distincts, pour vingt et une tailles — dont dix couples utilisés une seule fois. Une échelle n'a pas dix marches d'exception : ce sont des accidents, pas des choix. Le vrai défaut n'est pas le nombre, c'est qu'un même RÔLE se rend à des tailles différentes selon l'écran. L'ouverture de section en porte trois : .section-h h2 (22/600), .ref-entete h2 (20,5/700) et .pf-entete h2 (19/700). Trois tailles et deux graisses pour la même chose, à un onglet de distance. Les huit marches ci-dessous sont celles que l'application utilise déjà le plus — 11,5/400 revient 49 fois, 15/600 vingt-cinq fois. C'est donc une échelle constatée, à laquelle le reste se rallie peu à peu. Les 603 déclarations de font-size du dossier ne sont PAS toutes converties : ce jeu de jetons est le point de départ, et banc-typographie tient le compte pour qu'il ne reparte pas à la hausse. */ /* ── LES QUATRE MARCHES D'AFFICHAGE ─────────────────────────────────── Relevé du 5 septembre : au-dessus de 17 px, l'app employait VINGT-CINQ tailles — 17, 18, 19, 20, 20,5, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 34, 36, 38, 40, 42, 44, 48, 56. Ce n'est pas une échelle, c'est un continuum : personne ne distingue 26 de 27, mais tout le monde sent qu'il n'y a pas de règle. C'est très exactement ce qui fait qu'une app « n'a pas l'air dessinée ». Quatre marches, rapport constant de 1,29 : 21 · 27 · 34 · 44. Soixante-treize déclarations y ont été ramenées, jamais de plus de 4 px. En cas d'égalité on monte : le but est d'ÉCARTER les marches. --t-section descend de 20,5 à 21 pour rejoindre la première marche. Sans ça le jeton dirait 20,5 pendant que tout le reste dit 21, et on retomberait dans le défaut qu'on vient de corriger. --t-hero et --t-ecran ne sont cités par aucune règle — comme --t-fort et --t-corps. C'est la découverte de la journée : quatre marches sur huit ne servaient à rien, l'échelle était un DOCUMENT et pas un système. On les aligne quand même sur les marches réelles : un document qui ment est pire qu'un document absent. */ /* ══ R9 (9 novembre 2026) : L'ÉCHELLE DEVIENT LE SYSTÈME ═══════════ Relevé sur les 110 écrans (tools/audit-r8.js --typo) avant d'écrire ces lignes : 73 couples taille/graisse rendus. L'échelle ci-dessous existait, mais presque aucune règle ne s'en servait — 985 tailles étaient écrites en dur, de 10 à 36 px par demi-pixels. Elles sont toutes ramenées ici, à la marche la plus proche, et tools/banc-echelle.js refuse désormais une taille hors de l'échelle. Le texte courant monte de 13 à 15 px, la mention de 11,5 à 13 : le plancher de lecture d'iOS, et celui de Revolut. En dessous de 10 px (pastilles de compte) et au-dessus de 37 (titres d'affiche), les tailles restent libres : ce sont des dessins, pas du texte courant. */ --t-hero:44px; --t-hero-g:700; /* le titre d'accueil */ --t-ecran:34px; --t-ecran-g:700; /* titre d'écran */ --t-titre:28px; --t-titre-g:700; /* grand chiffre, grande carte */ --t-section:22px; --t-section-g:700; /* ouverture de section */ --t-carte:17px; --t-carte-g:600; /* titre de carte, rangée */ --t-fort:15px; --t-fort-g:600; /* libellé appuyé, bouton */ --t-corps:15px; --t-corps-g:400; /* texte courant */ --t-petit:13px; --t-petit-g:400; /* mention, sous-titre */ --t-micro:12px; --t-micro-g:600; /* étiquette, pastille */ /* Typographie */ --serif:'Sora',-apple-system,'Helvetica Neue',sans-serif; --serif-text:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif; --sf:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif; --sans:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif; --mono:'Sora',-apple-system,'Helvetica Neue',sans-serif; /* Géométrie */ /* 22px et non 18 : Charlotte, sur une référence, « j'aime bien aussi la DA avec des arrondis ». 18px lisait « carte de tableau de bord » ; 22px lit « objet posé », et c'est la même valeur que le socle (core.css) — cette surcharge à 18 les avait désaccordés. */ /* ══ LA GÉOMÉTRIE, EN QUATRE VALEURS ═══════════════════════════════ Relevé à l'écran avant d'écrire ces lignes : quinze arrondis rendus, dont DIX pour la seule famille des cartes — 22, 20, 18, 16, 14, 13, 12, 10, 9, 7 — plus deux écritures de la même pilule (999px et 100px). Ce n'était pas un système, c'était une accumulation : chaque composant ajouté avait choisi son arrondi tout seul. Quatre valeurs, dans un rapport constant d'environ 1,4 — l'œil lit une progression, pas une liste. Et elles sont GÉNÉREUSES : c'est ce que la référence apportée par Charlotte fait de mieux, et c'est ce qui sépare une app tendre d'une app administrative. */ --r-xl:28px; /* nappes, feuilles, grandes cartes photo */ --r-lg:24px; /* cartes standard (R9 : celui de R8, 24 — il y en avait deux) */ --r-md:16px; /* rangées, champs, cartes moyennes */ --r-sm:12px; /* vignettes, étiquettes, petits éléments */ --r-pill:999px;/* pilules, badges, boutons */ /* ══ TROIS OMBRES, UNE SEULE ENCRE ═════════════════════════════════ Dix-sept ombres rendues, avec CINQ encres différentes : l'encre chaude (31,26,20), un vert-noir froid (10,15,12), un brun (26,22,16), un autre brun (30,22,12), du noir pur (0,0,0) — et deux ombres ORANGE, sous le bouton principal et sous l'onglet actif. Une ombre colorée sous un bouton, c'est une lueur : ça date, et ça se voit. Une ombre est de la lumière absente. Elle prend donc l'encre de l'écran, toujours la même, et ne varie que par la hauteur. */ /* --sh-1 était l'ombre de REPOS : celle des cartes, des pilules sélectionnées, des vignettes — trente objets qui ne flottent nulle part. Une carte posée sur du papier ne projette pas d'ombre, elle a un BORD. C'est le même geste que --shadow-card, étendu aux trente règles qui appelaient le jeton directement au lieu de passer par lui. --sh-2 et --sh-3 gardent leur ombre : eux servent à ce qui flotte VRAIMENT au-dessus du contenu — la barre d'onglets, le bouton flottant, les feuilles modales. Là, l'ombre n'est pas un ornement, c'est l'information « ceci est par-dessus ». */ --sh-1:0 0 0 1px var(--n-2); --sh-2:0 2px 6px rgba(31,26,20,.05), 0 16px 34px -20px rgba(31,26,20,.30); --sh-3:0 8px 18px rgba(31,26,20,.07), 0 32px 64px -26px rgba(31,26,20,.38); /* Les anciens noms restent — ils sont cités partout — mais ils ne portent plus de valeur : ils pointent sur l’échelle. */ /* ══ LA STATURE DES BOUTONS ════════════════════════════════════════ Relevé à l’écran, cartes empilées du questionnaire écartées (elles sont rendues à 0,95 : tout ce qu’elles contiennent mesure faux) : SEIZE hauteurs de bouton — 32, 34, 35, 36, 38, 39, 40, 42, 44, 46, 48, 52 — pour six corps de texte et quatre graisses. Et DIX de ces seize hauteurs passent sous les 44 px qu’Apple donne comme minimum tactile. Trois statures, et rien entre les deux. Ce qui n’entre dans aucune des trois n’est pas un bouton : c’est une carte cliquable, et elle suit la règle des cartes. */ --b-lg:52px; --b-lg-x:22px; /* l’action de l’écran, pleine largeur */ --b-md:44px; --b-md-x:18px; /* action secondaire, pilule d’action */ --b-sm:36px; --b-sm-x:14px; /* filtre, onglet, pilule discrète */ /* ══ LA RESPIRATION DES CARTES ═════════════════════════════════════ Douze paddings rendus, dont CINQ asymétriques : « 11px 13px 11px 11px », « 16px 15px », « 20px 18px 16px ». Personne n’a décidé qu’une carte respirerait deux pixels de plus à droite qu’à gauche ; c’est arrivé. Trois respirations, toujours symétriques. */ --p-lg:20px; /* grande carte */ --p-md:16px; /* carte, rangée */ --p-sm:12px; /* rangée compacte */ --card-radius:var(--r-lg); --btn-radius:var(--r-pill); /* Les trois anciens noms sont cités dans plus de cent règles : on les garde, mais ils ne portent plus de valeur propre — ils désignent désormais une hauteur de l’échelle, et rien d’autre. */ /* ── DU TABLEAU DE BORD AU CARNET DE CARTOGRAPHE ───────────────────── Charlotte : « je veux qu'elle sorte du lot ». Or moderne-propre est devenu une marchandise — cartes blanches, coins arrondis, ombre douce. Tout le monde l'a. Le faire mieux ne fait pas sortir du lot, ça fait ressembler à tout le monde en mieux. Le parti pris existait déjà, latent, dans le nom même de la maison : « ici sont les dragons », le bord de la carte. Une PLANCHE d'atlas ne flotte pas au-dessus du papier, elle est imprimée dessus, et ce qui la sépare du reste est un FILET, pas une ombre portée. Ce jeton est cité par une soixantaine de règles. Le redéfinir suffit donc à changer toute l'app d'un coup, sans toucher un composant : ce qui portait une ombre porte un filet, exactement au même endroit et avec le même rayon. C'est aussi ce qui rend le geste réversible en une ligne s'il ne vous plaît pas. */ --shadow-card:var(--sh-1); --shadow-raised:var(--sh-2); --shadow-float:var(--sh-3); /* Vignettes — aplat doux, plus de dégradé sable */ --tile-bg:var(--n-3); /* Jetons ajoutés */ --paper:var(--n-1); --fog:var(--n-4); --fog-soft:var(--n-2); /* Même valeur mesurée que --ph, et c'est un constat plutôt qu'un choix : sous 4,5:1 rien n'est lisible, et au-dessus de 4,5:1 sur un creux à #EBE9E6 il ne reste plus assez de place pour trois gris distinguables. Deux d'entre eux se ressembleraient à 1 % près, ce qui n'est pas une hiérarchie, seulement trois jetons pour une seule couleur. La hiérarchie se fait donc à la taille et à la graisse. */ --ink-faint:#70685B; --gold-tint:var(--n-2); /* ADN de la destination — posé par da-accent.js selon le pays affiché. C'est la seule couleur de l'interface, et elle change à chaque voyage. */ /* ── Les jetons de la VITRINE (site/site.css), pour la coquille ──── Charlotte, le 3 octobre : « ramener app.hukaia.com sur la DA de la vitrine ». Ce sont les valeurs du site, recopiées et nommées ; elles servent à l'en-tête et au pied de page web (core.css, « LA MÊME COQUILLE »). La couleur de la saison, elle, reste celle de l'app : Charlotte, le 3 octobre, à la question « saison, ou terre cuite ? » : « saison ». La terre cuite est donc la couleur de la COQUILLE du site (en-tête, porte, pied, trait de l'onglet courant) ; la saison reste celle du CONTENU de l'app, où qu'il s'affiche. */ --terre:#DE643F; --terre-fonce:#C7502E; --terre-clair:#F0B99A; --site-creme:#F7F5F2; --site-sable:#E7DFD2; --site-turquoise:#4FB7B4; --site-nuit:#0C0A08; --site-nuit-texte:#F3EEE6; --site-nuit-sub:#A79E92; --site-nuit-ligne:#241F1A; --accent:#2F7DE1; --accent-tint:#2F7DE116; --accent-soft:#2F7DE12A; --accent-shadow:#2F7DE1b0; } /* ════ Repris de mouvement.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* ── R6 · La grammaire du mouvement (Charlotte, 8 novembre 2026, référence Revolut : « les micro-interactions sont soignées et cohérentes ») ───────────────────────────────────────────────────────── Trois vitesses et trois courbes, pour tout ce qui répond à un geste. Il y en avait 68 et 20, écrites une à une. tools/banc-mouvement-r6.py refuse qu'on en réécrive une à la main ; seules les ambiances (une seconde et plus : photo qui respire, attente, boucles) gardent la leur. --mv-rapide 160 ms le toucher : enfoncement, coche, survol --mv-normal 260 ms ce qui change d'état : onglet, feuille, pastille --mv-lent 420 ms ce qui arrive : écran, carte, liste qui se pose --mv-sortie décélère : ce qui entre, ce qui se pose --mv-ressort dépasse un peu et revient : ce qu'on vient de toucher --mv-depart accélère : ce qui s'en va */ :root{ --mv-sortie:cubic-bezier(.2,.7,.2,1); --mv-ressort:var(--spring, cubic-bezier(.34,1.56,.64,1)); --mv-depart:cubic-bezier(.4,0,1,1); --mv-rapide:160ms; --mv-normal:260ms; --mv-lent:420ms; } /* ════ Repris de extreme.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* ═══════════════════════════════════════════════════════════════════════ VERRE ET LUMIÈRE — la couche qui pousse le moderne à l'extrême ───────────────────────────────────────────────────────────────────── Charlotte, le 3 octobre : « je veux pousser à l'extrême l'aspect moderne, que ça soit sur l'app comme sur le site, partout ». Ce que « moderne » veut dire en 2026, et qu'on tient ici : · LE VERRE. Ce qui flotte est translucide et flouté : la barre d'onglets, le pied de prix, la barre d'un écran ouvert, les pilules posées sur une photo. Un filet de lumière en haut, une ombre très diffuse en bas : la surface a une épaisseur. · LA LUMIÈRE. Les boutons principaux portent un dégradé et un reflet ; au survol, un éclat les traverse. Les cartes ont une arête claire. Rien n'est plat. · LA TYPOGRAPHIE. Les titres montent et se resserrent (-0,045 em) ; le gras est franc ; le reste s'efface. · LE RAYON. 24 à 28 px partout où une surface se tient seule ; pilule pour tout ce qui s'appuie. · LE CALME. prefers-reduced-motion coupe tout ; aucune boucle. Les jetons restent ceux de da.css. Rien ici ne change un comportement. ═══════════════════════════════════════════════════════════════════ */ :root{ --xl-verre:rgba(255,255,255,.58); --xl-verre-sombre:rgba(20,17,14,.56); --xl-filet-clair:rgba(255,255,255,.72); --xl-ombre:0 1px 2px rgba(31,26,20,.04), 0 26px 60px -34px rgba(31,26,20,.36); --xl-ombre-forte:0 2px 6px rgba(31,26,20,.05), 0 40px 90px -44px rgba(31,26,20,.5); --xl-degrade:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, #FFC79E) 100%); --xl-sortie:cubic-bezier(.2,.7,.2,1); } /* ════ Repris de direction.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* ══ LA DIRECTION RETENUE : « A + C sur blanc » ═══════════════════════════ Charlotte, le 4 octobre, devant la planche des trois directions (Nuit, Carnet, Galerie) : « Je veux un mélange de A et C fond blanc ». Ce qui vient de A (Nuit) : la barre d'onglets en capsule d'encre avec ses mots, l'onglet actif dit par la couleur et non par une pastille ; les grandes photos qui portent l'écran. Ce qui vient de C (Galerie) : les cartes très arrondies dont la légende est une étiquette posée SUR la photo ; les surfaces pleines plutôt que bordées ; le bouton « Créer » rond au centre de la barre. Et le fond : blanc franc, partout. Chargée en dernier : elle tranche sur extreme.css et les couches d'avant sans les réécrire. La couleur de la saison est la seule couleur de l'app, barre comprise (pas d'or : voir la barre). */ :root{ --n-1:#FFFFFF; --bg:#FFFFFF; --d-creux:#F4F3F0; /* la surface pleine : champ, pilule, carte */ --d-creux-2:#ECEAE6; /* la même, appuyée */ --d-encre:#1A1712; /* la barre, la pilule active */ } /* ── 1. La barre d'onglets (application) ───────────────────────────── Charlotte, le 4 octobre, en voyant l'encre et l'or : « Le doré on oublie, on a dit couleur qui change en fonction de la saison », et « je veux que la barre d'onglets soit en verre poli comme avant, comme Instagram » — le verre FUMÉ validé avant le 4 octobre (sa réponse à la question posée). Donc : verre sombre translucide, flou et saturé ; l'onglet actif et le bouton Créer prennent la couleur de la saison. --d-actif éclaircit l'accent pour le texte de 10 px posé sur le verre sombre : l'accent nu (le rouge d'octobre, le bleu d'hiver) y tombe sous 4,5:1. La teinte reste celle de la saison. Le verre est à 0,80 : plus clair, sur fond blanc, le mot actif tombait à 3,4:1 (banc-contraste). À 0,80 il passe 5:1, et le flou reste visible. */ :root{ --d-actif:color-mix(in srgb, var(--accent) 50%, #FFFFFF) } /* ════ Repris de wow.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* ══ WOW : LA MISE EN SCÈNE ════════════════════════════════════════════ Charlotte, le 5 octobre : « on avait dit de moderniser au maximum le questionnaire, rien n'a changé. Et on ne voit pas encore un méga changement sur le reste de l'app — fais-moi quelque chose de wow ». Cette feuille est la couche de mouvement et de matière, chargée après direction.css. Tout ce qui bouge ici s'arrête sous « moins de mouvements » (réglage iOS), en bas de fichier. */ :root{ --wow-sortie:cubic-bezier(.2,.8,.2,1); --wow-ressort:cubic-bezier(.22,1.25,.36,1); --wow-a:color-mix(in srgb, var(--accent) 72%, #FFFFFF); --wow-b:color-mix(in srgb, var(--accent) 45%, #FFE2CC); --wow-c:color-mix(in srgb, var(--accent) 30%, #FFFFFF); } /* ════ Repris de police.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ :root{ --serif:'Geist',-apple-system,'Helvetica Neue',sans-serif; --serif-text:'Geist',-apple-system,'Helvetica Neue',sans-serif; --sf:'Geist',-apple-system,'Helvetica Neue',sans-serif; --sans:'Geist',-apple-system,'Helvetica Neue',sans-serif; --mono:'Geist',-apple-system,'Helvetica Neue',sans-serif; } /* ════ Repris de octobre.css (même ordre qu'au chargement : la dernière définition l'emporte) ════ */ /* ── HUKAIA · les retouches d'octobre ──────────────────────────────────── Charlotte, le 10 octobre, après la refonte du site (charte d'octobre, tout en terre cuite) : « avec ce nouveau skill je veux faire des améliorations aussi sur l'app ». Cinq choix, et seulement ceux-là : 1. Le CHROME fixe prend la terre cuite du site : la barre d'onglets (onglet actif, rond central) et les boutons « Continuer » du questionnaire. Le CONTENU garde la couleur de la saison — décision du 3 octobre, redemandée et confirmée le 10 : « garder la saison ». 2. Le questionnaire sans barre d'onglets, dès qu'on a choisi comment composer (html.deck-concentre, posé par positionDeck dans deck.js). La première carte la garde : c'est par elle qu'on s'en va. 3. Les questions perdent leur mot en couleur : un mot accentué par titre est la signature visuelle « faite par une IA » que le site a quittée (DOSSIER-IDENTITE, site/). 4. (screens-main.js, presence.js, place-stories.js : textes.) 5. Des gestes plus nets : un appui se sent sur les cartes et les choix, le programme du jour arrive ligne après ligne. Tout s'éteint sous « Réduire les animations » (core.css garde son interrupteur). Chargée en DERNIER (index.html) : elle n'a pas à gagner par la force. ─────────────────────────────────────────────────────────────────────── */ /* ── 1. Le chrome suit la saison ──────────────────────────────────── Le 10 octobre, le chrome (barre d'onglets, « Continuer ») avait pris la terre cuite fixe du site, et le contenu gardait la saison. Le 23 octobre, la saison glissant vers le grenat, Charlotte voit « deux oranges différents » sur l'accueil et choisit « la saison partout » : le chrome lit maintenant la couleur du jour, comme tout le reste. Les noms --chrome* restent pour ne pas toucher aux règles qui les lisent. */ :root{ --chrome:var(--accent); /* Sur le verre sombre de la barre : la saison éclaircie de moitié, la même recette que --d-actif (direction.css). */ --chrome-clair:color-mix(in srgb, var(--accent) 50%, #FFFFFF); --chrome-encre:var(--accent-ink); /* le texte posé sur l'aplat, choisi par da-accent.js */ --d-actif:var(--chrome-clair); } /* ════ B1 · Sur une photo (7 novembre 2026) ════ Le texte et les traits posés sur une photo (premier écran, en-têtes) portaient une dizaine de blancs translucides presque identiques (.72, .78, .82, .86, .92…). Une échelle de cinq suffit. */ :root{ --photo-texte:#FFFFFF; /* Le texte posé sur l'accent : da-accent.js le choisit selon la destination ; ceci n'est que la valeur avant qu'il ne parle. */ --accent-ink:#FFFFFF; --photo-texte-2:rgba(255,255,255,.88); /* phrase d'accroche, promesses */ --photo-texte-3:rgba(255,255,255,.75); /* libellés, liens discrets */ --photo-trait:rgba(255,255,255,.62); /* contour d'un bouton sur photo */ --photo-fond:rgba(255,255,255,.06); /* fond d'un bouton sur photo */ --photo-ombre:rgba(10,15,12,.45); /* ombre portée du texte */ --photo-voile:linear-gradient(180deg,rgba(20,17,14,.40) 0%,rgba(20,17,14,.14) 30%,rgba(10,15,12,.42) 62%,rgba(10,15,12,.93) 100%); --photo-voile-carte:linear-gradient(180deg,transparent 38%,rgba(10,8,6,.74)); } /* ════ B1 · Composer, l'attente et le partage (7 novembre 2026) ════ Les mêmes valeurs qu'avant, nommées une fois : blanc, noir des masques, encre et nuit à chaque transparence (a04 = 4 %), et les quelques teintes propres au questionnaire. Aucune valeur n'a changé. */ :root{ --blanc:#FFFFFF; --blanc-a55:rgba(255,255,255,.55); --blanc-a60:rgba(255,255,255,.6); --blanc-a65:rgba(255,255,255,.65); --blanc-a78:rgba(255,255,255,.78); --blanc-a82:rgba(255,255,255,.82); --blanc-a85:rgba(255,255,255,.85); --blanc-a90:rgba(255,255,255,.9); --blanc-a94:rgba(255,255,255,.94); --blanc-a95:rgba(255,255,255,.95); --creux-carte:#EEECE8; --creux-choix:#F3F2EF; --encre-a3:rgba(31,26,20,.03); --encre-a32:rgba(31,26,20,.32); --encre-a4:rgba(31,26,20,.04); --encre-a45:rgba(31,26,20,.45); --lueur-barre:#FFD7A8; --noir:#000000; --noir-a40:rgba(0,0,0,.4); --nuit-a0:rgba(20,17,14,0); --nuit-a24:rgba(20,17,14,.24); --nuit-a42:rgba(20,17,14,.42); --nuit-a78:rgba(20,17,14,.78); --nuit-a8:rgba(20,17,14,0.08); --nuit-profonde-a45:rgba(14,12,10,.45); --ocre:#8A5A1E; --ocre-a10:rgba(138,90,30,.10); --ombre-froide-a55:rgba(2,12,20,.55); --ombre-froide-a70:rgba(2,12,20,.7); --ombre-froide-a80:rgba(2,12,20,.8); --suie-a35:rgba(26,23,18,.35); --suie-a4:rgba(26,23,18,.04); --suie-a50:rgba(26,23,18,.5); --suie-a7:rgba(26,23,18,.07); } /* ════ B1 · L'écran du voyage (7 novembre 2026) : mêmes valeurs, nommées une fois ════ */ :root{ --ambre:#C9822B; --blanc-a14:rgba(255,255,255,.14); --blanc-a16:rgba(255,255,255,.16); --blanc-a22:rgba(255,255,255,.22); --blanc-a28:rgba(255,255,255,.28); --blanc-a30:rgba(255,255,255,.3); --blanc-a34:rgba(255,255,255,.34); --blanc-a35:rgba(255,255,255,.35); --blanc-a75:rgba(255,255,255,.75); --blanc-a80:rgba(255,255,255,.8); --blanc-a84:rgba(255,255,255,.84); --blanc-a86:rgba(255,255,255,.86); --blanc-a88:rgba(255,255,255,.88); --blanc-a96:rgba(255,255,255,.96); --encre-a35:rgba(31,26,20,.35); --encre-a50:rgba(31,26,20,.5); --encre-a60:rgba(31,26,20,.6); --gris-sable:#A79E8E; --noir-a28:rgba(0,0,0,.28); --noir-a4:rgba(0,0,0,.035); --noir-a55:rgba(0,0,0,.55); --noir-a6:rgba(0,0,0,.06); --nuit-a18:rgba(20,17,14,0.18); --nuit-a2:rgba(20,17,14,0.02); --nuit-a22:rgba(20,17,14,.22); --nuit-a34:rgba(20,17,14,0.34); --nuit-a38:rgba(20,17,14,.38); --nuit-a4:rgba(20,17,14,.04); --nuit-a55:rgba(20,17,14,.55); --nuit-a6:rgba(20,17,14,0.06); --nuit-a62:rgba(20,17,14,0.62); --nuit-a70:rgba(20,17,14,.70); --nuit-a72:rgba(20,17,14,0.72); --nuit-a74:rgba(20,17,14,.74); --nuit-encre:#1C1815; --nuit-profonde-a32:rgba(14,12,10,.32); --ombre-mer-a50:rgba(3,20,26,.5); --ombre-mer-a60:rgba(3,20,26,.6); --papier-a72:rgba(246,244,241,.72); --papier-clair:#F4F3F0; } /* ════ B1 · Toutes les autres feuilles (7 novembre 2026) : mêmes valeurs, nommées une fois ════ */ :root{ --blanc-a10:rgba(255,255,255,.1); --blanc-a12:rgba(255,255,255,.12); --blanc-a13:rgba(255,255,255,.13); --blanc-a15:rgba(255,255,255,0.15); --blanc-a18:rgba(255,255,255,.18); --blanc-a20:rgba(255,255,255,.2); --blanc-a24:rgba(255,255,255,.24); --blanc-a25:rgba(255,255,255,.25); --blanc-a26:rgba(255,255,255,.26); --blanc-a32:rgba(255,255,255,.32); --blanc-a38:rgba(255,255,255,.38); --blanc-a45:rgba(255,255,255,.45); --blanc-a5:rgba(255,255,255,.05); --blanc-a50:rgba(255,255,255,.5); --blanc-a58:rgba(255,255,255,.58); --blanc-a6:rgba(255,255,255,.06); --blanc-a62:rgba(255,255,255,.62); --blanc-a66:rgba(255,255,255,.66); --blanc-a70:rgba(255,255,255,.7); --blanc-a72:rgba(255,255,255,.72); --blanc-a76:rgba(255,255,255,.76); --blanc-a8:rgba(255,255,255,.08); --blanc-a92:rgba(255,255,255,.92); --blanc-a97:rgba(255,255,255,0.97); --encre-a10:rgba(31,26,20,.1); --encre-a16:rgba(31,26,20,.16); --encre-a18:rgba(31,26,20,.18); --encre-a20:rgba(31,26,20,.20); --encre-a22:rgba(31,26,20,.22); --encre-a25:rgba(31,26,20,.25); --encre-a30:rgba(31,26,20,.3); --encre-a34:rgba(31,26,20,.34); --encre-a40:rgba(31,26,20,.4); --encre-a42:rgba(31,26,20,.42); --encre-a5:rgba(31,26,20,.05); --encre-a55:rgba(31,26,20,.55); --encre-a6:rgba(31,26,20,.06); --encre-a70:rgba(31,26,20,.7); --noir-a0:rgba(0,0,0,0); --noir-a16:rgba(0,0,0,.16); --noir-a18:rgba(0,0,0,.18); --noir-a20:rgba(0,0,0,.2); --noir-a26:rgba(0,0,0,.26); --noir-a30:rgba(0,0,0,.3); --noir-a32:rgba(0,0,0,.32); --noir-a34:rgba(0,0,0,.34); --noir-a35:rgba(0,0,0,.35); --noir-a38:rgba(0,0,0,.38); --noir-a45:rgba(0,0,0,.45); --noir-a5:rgba(0,0,0,.05); --noir-a50:rgba(0,0,0,.5); --noir-a60:rgba(0,0,0,.6); --noir-a62:rgba(0,0,0,.62); --noir-a7:rgba(0,0,0,.07); --noir-a70:rgba(0,0,0,.7); --noir-a8:rgba(0,0,0,.08); --noir-a80:rgba(0,0,0,.8); --noir-a84:rgba(0,0,0,.84); --noir-a90:rgba(0,0,0,.9); --nuit-a10:rgba(20,17,14,0.1); --nuit-a12:rgba(20,17,14,.12); --nuit-a14:rgba(20,17,14,0.14); --nuit-a15:rgba(20,17,14,.15); --nuit-a16:rgba(20,17,14,.16); --nuit-a20:rgba(20,17,14,.2); --nuit-a28:rgba(20,17,14,.28); --nuit-a30:rgba(20,17,14,.3); --nuit-a35:rgba(20,17,14,.35); --nuit-a40:rgba(20,17,14,.4); --nuit-a45:rgba(20,17,14,.45); --nuit-a50:rgba(20,17,14,.5); --nuit-a52:rgba(20,17,14,.52); --nuit-a58:rgba(20,17,14,.58); --nuit-a60:rgba(20,17,14,.6); --nuit-a66:rgba(20,17,14,.66); --nuit-a68:rgba(20,17,14,.68); --nuit-a76:rgba(20,17,14,.76); --nuit-a80:rgba(20,17,14,.80); --nuit-a82:rgba(20,17,14,.82); --nuit-a85:rgba(20,17,14,.85); --nuit-a86:rgba(20,17,14,.86); --nuit-a88:rgba(20,17,14,.88); --nuit-a9:rgba(20,17,14,.09); --nuit-a92:rgba(20,17,14,.92); --nuit-a94:rgba(20,17,14,.94); --nuit-a95:rgba(20,17,14,.95); --nuit-profonde-a42:rgba(14,12,10,.42); --nuit-profonde-a72:rgba(14,12,10,.72); --ocre-a12:rgba(138,90,30,.12); --ombre-froide-a35:rgba(2,12,20,.35); --ombre-froide-a60:rgba(2,12,20,.6); --ombre-froide-a75:rgba(2,12,20,.75); --ombre-mer-a40:rgba(3,20,26,.4); --papier-a74:rgba(246,244,241,.74); --suie-a10:rgba(26,23,18,.1); --suie-a16:rgba(26,23,18,.16); --suie-a55:rgba(26,23,18,.55); --suie-a6:rgba(26,23,18,.06); --suie-a60:rgba(26,23,18,.6); --suie-a8:rgba(26,23,18,.08); --teinte-050810:#050810; --teinte-050810-a0:rgba(5,8,16,0); --teinte-050810-a35:rgba(5,8,16,.35); --teinte-050810-a55:rgba(5,8,16,.55); --teinte-050810-a62:rgba(5,8,16,.62); --teinte-050810-a90:rgba(5,8,16,.9); --teinte-0a0806-a0:rgba(10,8,6,0); --teinte-0a0806-a45:rgba(10,8,6,.45); --teinte-0a0806-a55:rgba(10,8,6,.55); --teinte-0a0806-a90:rgba(10,8,6,.9); --teinte-0a0f0c:#0A0F0C; --teinte-0a0f0c-a0:rgba(10,15,12,0); --teinte-0a0f0c-a10:rgba(10,15,12,.10); --teinte-0a0f0c-a16:rgba(10,15,12,.16); --teinte-0a0f0c-a40:rgba(10,15,12,.4); --teinte-0a0f0c-a45:rgba(10,15,12,.45); --teinte-0a0f0c-a50:rgba(10,15,12,.5); --teinte-0a0f0c-a6:rgba(10,15,12,.06); --teinte-0a0f0c-a7:rgba(10,15,12,.07); --teinte-0a0f0c-a72:rgba(10,15,12,.72); --teinte-0a0f0c-a8:rgba(10,15,12,.08); --teinte-0a0f0c-a82:rgba(10,15,12,.82); --teinte-0b1d1b:#0B1D1B; --teinte-0c0a08:#0C0A08; --teinte-0c0a08-a0:rgba(12,10,8,0); --teinte-0c0a08-a35:rgba(12,10,8,.35); --teinte-0c0a08-a46:rgba(12,10,8,.46); --teinte-0c0a08-a72:rgba(12,10,8,.72); --teinte-0c0a08-a74:rgba(12,10,8,.74); --teinte-0c0a08-a78:rgba(12,10,8,.78); --teinte-0c0a08-a80:rgba(12,10,8,.8); --teinte-0c0a08-a82:rgba(12,10,8,.82); --teinte-0c0a08-a88:rgba(12,10,8,.88); --teinte-0d0b08:#0D0B08; --teinte-0d1b18-a100:rgba(13,27,24,1); --teinte-0e0c0a:#0E0C0A; --teinte-0e121c-a58:rgba(14,18,28,.58); --teinte-0e121c-a60:rgba(14,18,28,.6); --teinte-0e141766:#0E141766; --teinte-0e2b26:#0E2B26; --teinte-0e4a78-a10:rgba(14,74,120,.10); --teinte-0e4a78-a22:rgba(14,74,120,.22); --teinte-100c09-a55:rgba(16,12,9,.55); --teinte-100c09-a90:rgba(16,12,9,.9); --teinte-100c09-a97:rgba(16,12,9,.97); --teinte-10241f-a0:rgba(16,36,31,0); --teinte-10241f-a38:rgba(16,36,31,.38); --teinte-10241f-a86:rgba(16,36,31,.86); --teinte-10241f-a96:rgba(16,36,31,.96); --teinte-10241f-a98:rgba(16,36,31,.98); --teinte-111111:#111111; --teinte-120a06:#120A06; --teinte-140f08-a50:rgba(20,15,8,.5); --teinte-140f08-a62:rgba(20,15,8,.62); --teinte-141008:#141008; --teinte-14110d:#14110D; --teinte-14110e:#14110E; --teinte-14120e-a30:rgba(20,18,14,.3); --teinte-14120e-a4:rgba(20,18,14,0.04); --teinte-14120e-a50:rgba(20,18,14,0.5); --teinte-16120f:#16120F; --teinte-16130f:#16130F; --teinte-161310-a86:rgba(22,19,16,.86); --teinte-161311:#161311; --teinte-171411:#171411; --teinte-1a1613:#1A1613; --teinte-1a1814:#1A1814; --teinte-1b6ca8-a34:rgba(27,108,168,.34); --teinte-1e1a17:#1E1A17; --teinte-1e6b53:#1E6B53; --teinte-1e6b53-a9:rgba(30,107,83,.09); --teinte-1f1a14:#1F1A14; --teinte-1fa8a8:#1FA8A8; --teinte-1fa8a8-a9:rgba(31,168,168,.09); --teinte-211d19:#211D19; --teinte-221d16:#221D16; --teinte-262019:#262019; --teinte-2a241e:#2A241E; --teinte-2a2521:#2A2521; --teinte-2b241d:#2B241D; --teinte-2f7de1:#2F7DE1; --teinte-2fbf71:#2FBF71; --teinte-332b23:#332B23; --teinte-34c759:#34C759; --teinte-352f2a:#352F2A; --teinte-3dd68c:#3DD68C; --teinte-3dd68c-a0:rgba(61,214,140,0); --teinte-3dd68c-a55:rgba(61,214,140,.55); --teinte-3dd68c-a70:rgba(61,214,140,.7); --teinte-4a443a:#4A443A; --teinte-4fb7b4:#4FB7B4; --teinte-4fb7b4-a0:rgba(79,183,180,0); --teinte-4fb7b4-a12:rgba(79,183,180,.12); --teinte-4fb7b4-a22:rgba(79,183,180,.22); --teinte-4fb7b4-a45:rgba(79,183,180,.45); --teinte-4fb7b4-a50:rgba(79,183,180,.50); --teinte-4fb7b4-a55:rgba(79,183,180,.55); --teinte-4fb7b4-a7:rgba(79,183,180,.07); --teinte-5c5345:#5C5345; --teinte-5d7a4e-a12:rgba(93,122,78,0.12); --teinte-6b2a12:#6B2A12; --teinte-6b604f:#6B604F; --teinte-6f6861:#6F6861; --teinte-6fa8dc:#6FA8DC; --teinte-756b58:#756B58; --teinte-78b4ff-a55:rgba(120,180,255,0.55); --teinte-79726a:#79726A; --teinte-7fe0da:#7FE0DA; --teinte-888888:#888888; --teinte-8e7cc3:#8E7CC3; --teinte-8e8578:#8E8578; --teinte-9a9187:#9A9187; --teinte-9c7c44:#9C7C44; --teinte-a79e92:#A79E92; --teinte-a93226:#A93226; --teinte-b3261e:#B3261E; --teinte-b3261e-a70:rgba(179,38,30,.7); --teinte-b3452c:#B3452C; --teinte-b7b0a6:#B7B0A6; --teinte-b89242-a8:rgba(184,146,66,0.08); --teinte-b8ae98:#B8AE98; --teinte-c0392b-a8:rgba(192,57,43,.08); --teinte-c9c6be:#C9C6BE; --teinte-c9ced6:#C9CED6; --teinte-d5d3d0:#D5D3D0; --teinte-d8d0c6:#D8D0C6; --teinte-d9553f:#D9553F; --teinte-de643f:#DE643F; --teinte-de643f-a10:rgba(222,100,63,.10); --teinte-e0612b:#E0612B; --teinte-e3ded6:#E3DED6; --teinte-ede8e1:#EDE8E1; --teinte-eef0eb:#EEF0EB; --teinte-f2c14e:#F2C14E; --teinte-f2f0ea:#F2F0EA; --teinte-f3eee6-a78:rgba(243,238,230,.78); --teinte-f3eee6-a80:rgba(243,238,230,.8); --teinte-f4eedf-a14:rgba(244,238,223,0.14); --teinte-f4eedf-a25:rgba(244,238,223,0.25); --teinte-f4efe7:#F4EFE7; --teinte-f6f6f3-a10:rgba(246,246,243,0.1); --teinte-f6f6f3-a22:rgba(246,246,243,0.22); --teinte-f6f6f3-a40:rgba(246,246,243,0.4); --teinte-f6f6f3-a60:rgba(246,246,243,0.6); --teinte-f6f6f3-a70:rgba(246,246,243,0.7); --teinte-faf8f5:#FAF8F5; --teinte-fcfbfa:#FCFBFA; --teinte-fcfbfa-a14:rgba(252,251,250,.14); --teinte-fcfbfa-a24:rgba(252,251,250,.24); --teinte-fcfbfa-a70:rgba(252,251,250,0.7); --teinte-fcfbfa-a72:rgba(252,251,250,.72); --teinte-fcfbfa-a82:rgba(252,251,250,.82); --teinte-fcfbfa-a92:rgba(252,251,250,0.92); --teinte-ffffff2b:#FFFFFF2B; --teinte-ffffff2e:#FFFFFF2E; --teinte-ffffff59:#FFFFFF59; --teinte-ffffffc4:#FFFFFFC4; --teinte-ffffffd6:#FFFFFFD6; } /* ── C4 · Le livre imprimé (livre.js) ────────────────────────────────────── Un livre se lit sur du papier : ses couleurs ne suivent PAS le thème de l'app. Sans ces jetons, le livre fabriqué en mode sombre sortait en pages noires et texte clair. Aucun thème ne les redéfinit. */ :root{ --livre-papier:#FBFAF7; --livre-encre:#1F1A14; --livre-sous:#6E665C; --livre-accent:#1F7A75; --livre-trait:rgba(31,26,20,.14); --livre-voile:rgba(0,0,0,.62); --livre-blanc:#FFFFFF; } /* ── R8 · L'esthétique façon Revolut, direction B « clair et graphique » ── Charlotte, 9 novembre 2026 : « quand je parle de l'UX Revolut j'entends aussi l'aspect esthétique », puis le choix B sur maquettes. Fond ivoire, cartes blanches très arrondies à ombre douce, titres en gras écrits normalement (plus de capitales étroites), grand chiffre héros, icônes dans des pastilles rondes aux couleurs douces, une seule couleur d'accent. Ces jetons ne servent qu'à r8.css. */ :root{ --r8-fond:#F4F3F0; --r8-carte:#FFFFFF; --r8-encre:#111111; --r8-creux:#ECEAE6; --r8-trait:#ECEAE6; --r8-ombre:0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.05); --r8-rayon:var(--r-lg); --r8-rayon-s:var(--r-md); --r8-p1-fond:#E3F1EF; --r8-p1:#1F7A75; --r8-p2-fond:#FBEBDD; --r8-p2:#B45F22; --r8-p3-fond:#E6ECF8; --r8-p3:#3C5FB0; --r8-p4-fond:#EFE8DD; --r8-p4:#7A6447; }