/* ============================================================ OTRA Studio — tokens.css Source : livrable 1 « Kit UI » (12/08/2026), dérivé d'OTRA_STUDIO_CORE v1.1 (att 34428, TOKENS_CSS). Règle d'or : aucun module ne déclare une couleur, une police ou un rayon — tout passe par var(--*). Marque blanche : la teinte se règle par --brand-h/s/l (par société). ============================================================ */ :root { /* --- marque --- */ --brand-h: 35; --brand-s: 40%; --brand-l: 64%; --accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l)); --accent-strong: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%)); --accent-soft: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .14); --accent-line: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .35); --on-accent: #1D1D1F; /* --- rôles fixes --- --warn vit dans chaque thème : l'ocre unique ratait le contraste sur le fond réel du badge (« Expiré » à ~3:1 des deux côtés). --info est mort — aucun var(--info) dans tout le projet. (18/08, audit UX) */ /* --- type --- Fraunces 600 : h1/h2 et chiffres-héros. Inter : tout le reste. Corps ≥13,5px bureau, ≥15px terrain. */ --ff: "Inter", system-ui, sans-serif; --ff-display: "Fraunces", Georgia, serif; /* --- rayons — 8 contrôles · 12 cartes · 16 modales. Rien d'autre. --- */ --r-sm: 8px; --r: 12px; --r-lg: 14px; /* --- densité — une seule échelle, trois réglages ---------------- Denis, 20/08 : « on a des humains qui fonctionnent de manières différentes, donc on doit être lisible ET paramétrable ». Pierre pointe avec des gants sous la pluie ; Denis balaie 26 devis assis devant un grand écran. La même taille ne peut pas servir les deux. Tout ce qui se clique dérive d'ici : un attribut sur change l'outil entier, sans qu'un seul écran ait à le savoir. « Confort » est le défaut — cible 44px, seuil tactile WCAG 2.5.8. */ --tap: 44px; /* bouton, entrée de liste, cible courante */ --tap-primary: 56px; /* primaire terrain */ --nav-h: 36px; /* entrée de barre latérale */ --tab-h: 40px; /* onglet */ --row-h: 56px; /* ligne de résultat (sélecteur, listes denses) */ --vign: 40px; /* vignette produit */ --ico-rail: 20px; /* colonne des pictogrammes — fixe, sinon rien n'aligne */ --fs-nav: 13.5px; /* libellé de navigation */ /* ---------- L'ÉCHELLE DE TEXTE ---------- Mesuré le 20/08 sur le centre de contrôle : 29 styles de texte et 13 tailles sur UN SEUL écran — 18, 17, 15, 14.5, 14, 13.5, 13, 12.5, 12, 11.5, 11, 10.5, 10. Un écart d'un demi-pixel ne fabrique aucune hiérarchie : il fabrique du bruit. Et « LA FICHE » (une section) sortait à la même taille que « Client » (une étiquette) — deux niveaux, un seul rendu, donc plus de niveaux du tout. Sept marches, chacune au moins 1,15× la précédente : chacune se voit. Elles ne bougent PAS avec la densité — la densité règle des cibles et de l'espace, jamais la lisibilité d'un mot. Denis, 20/08 : « je veux le design UX impeccable ». */ /* L'ÉCHELLE D'APPLE. Denis, 23/08 : « je veux un style APPLE pour tout, c'est plus lisible ». Ce n'est pas un goût, c'est une mesure : iOS pose le CORPS à 17 px là où le web s'est habitué à 14-15, et c'est précisément ce qui rend un écran d'iPhone lisible au soleil, à bout de bras, avec des lunettes. On reprend ses valeurs, telles quelles : footnote 13 · subheadline 15 · body 17 · title3 20 title1 28 · largeTitle 34 Le corps passe donc de 15 à 17, et le titre d'écran de 22 à 34. On voit moins de choses à la fois — c'est le prix, et c'est le but. La densité (Compact / Confort / Terrain) reste là pour qui veut en voir plus. */ --fs-xs: 13px; /* étiquette, note de bas — le plancher de l'information */ --fs-sm: 15px; /* appui : la ligne qui explique la valeur au-dessus */ --fs-md: 17px; /* LE CORPS — le défaut, et le cœur de la lisibilité */ --fs-lg: 20px; /* nom d'objet, sous-titre */ --fs-xl: 28px; /* titre d'écran */ --fs-2xl: 34px; /* le chiffre qui doit dominer */ --fs-3xl: 40px; /* le chiffre unique d'un écran */ /* L'OMBRE QUI FAIT FLOTTER. Denis, 29/08, devant le tableau de bord b2u et la page d'accueil de Firefox : « j'adore comme c'est épuré, comment on a l'information ». Mesuré sur les deux : rayon 14 px, aucune bordure, ombre 0 3px 14px à 12 %, padding 20 px. La console en était déjà proche — la seule vraie différence était l'ombre. Une ombre de 1 px colle la carte au fond : elle paraît DESSINÉE. Une ombre de 14 px la fait flotter : elle paraît POSÉE. C'est tout l'écart entre un formulaire et un objet qu'on a envie de toucher, et ça ne coûte ni une couleur ni un pixel de contraste. */ --shadow: 0 3px 14px rgb(0 0 0 / .12); --shadow-lg: 0 10px 30px rgb(0 0 0 / .16); } /* Compact — bureau, souris, grand écran : on veut voir beaucoup d'un coup. C'est ce réglage qui rend à la console la densité de l'ancienne. */ [data-densite="compact"] { --tap: 36px; --tap-primary: 44px; --nav-h: 30px; --tab-h: 34px; --row-h: 46px; --vign: 32px; --fs-nav: 13px; } /* Terrain — gants, soleil, une seule main. Rien ne descend sous 52px. */ [data-densite="terrain"] { --tap: 52px; --tap-primary: 64px; --nav-h: 48px; --tab-h: 48px; --row-h: 68px; --vign: 52px; --fs-nav: 15px; } /* Le doigt ne se règle pas : sur un écran tactile, « compact » ne descend jamais sous la cible de 44px. On gagne de la densité à la souris, pas au prix d'un bouton qu'un pouce rate. */ @media (pointer: coarse) { [data-densite="compact"] { --tap: 44px; --tap-primary: 56px; --nav-h: 40px; --tab-h: 40px; --row-h: 52px; } } /* Thème sombre — défaut terrain */ [data-theme="dark"] { color-scheme: dark; /* NEUTRES FROIDS. Denis, 23/08 : « rends le site beaucoup plus fresh, moins ECO-VERT ». Le sombre tirait sur le charbon chaud (#15191C, #1D2226) et le clair sur le sable (#F1EFE8, #E5E0D4) — une ambiance terreuse qui datait le produit et le rangeait d'office au rayon « écolo ». On prend les gris d'Apple : neutres, froids, sans teinte. L'or de la marque reste — mais posé sur du gris il redevient de l'or, là où sur du sable il n'était qu'une nuance de plus. */ --surface: #1C1C1E; --surface-2: #2C2C2E; --surface-3: #3A3A3C; --line: #48484A; --line-soft: #38383A; --txt: #F5F5F7; --txt-dim: #A1A1A6; --txt-faint: #6E6E73; /* décoratif seulement — jamais pour de l'information */ /* le biosourcé n'est plus VERT : turquoise. Plus frais, et surtout distinguable pour un daltonien — le vert et le rouge se confondent, le turquoise et le rouge jamais. */ --bio: #5AC8DE; --bio-soft: #5AC8DE22; --danger: #FF6B5E; --danger-soft: #FF6B5E22; --warn: #E5B25A; --warn-soft: #E5B25A22; /* l'or porte du texte sur charcoal (≥4,5:1 mesuré) */ --accent-text: var(--accent); --focus: var(--accent); /* l'or se voit sur le sombre */ } /* Thème clair — bureau, plein soleil */ [data-theme="light"] { color-scheme: light; --surface: #F5F5F7; --surface-2: #FFFFFF; --surface-3: #EBEBEF; --line: #D8D8DE; --line-soft: #E8E8ED; --txt: #1D1D1F; --txt-dim: #6E6E73; --txt-faint: #A1A1A6; /* décoratif seulement */ --bio: #0E6E7E; /* turquoise foncé — lisible sur blanc */ --bio-soft: #0E6E7E1A; --danger: #B3261E; --danger-soft: #B3261E1A; --warn: #8A6100; /* sur blanc composité : ≥5:1 */ --warn-soft: #8A61001A; /* l'or pur ne porte jamais de texte courant sur fond clair — accent-700 */ --accent-text: hsl(var(--brand-h) 45% 32%); /* le focus doit se VOIR : l'or à 2,12:1 sur blanc était invisible (audit) */ --focus: hsl(var(--brand-h) 45% 32%); }