/* ============================================================================ COMPT'AMG — jetons de design (design tokens) App privée d'Adam · un seul appareil · pilotage de Sylvain (comptable virtuel) Conçu par Rams · v1 · 2026-08-30 Refabrication vectorielle de la planche v0, avec deux corrections : 1. la police d'affichage existe pour de vrai (AMG Mono, dérivée d'Iosevka) ; 2. les couleurs d'état ne recopient plus les couleurs d'activité. RÈGLE D'OR — aucune valeur en dur dans le code de l'app. Uniquement des var(). ============================================================================ */ :root { /* ═══ TYPOGRAPHIE ════════════════════════════════════════════════════════ Une seule famille : AMG Mono (dérivée d'Iosevka, OFL 1.1 — voir PLANCHE.md). Deux chasses : normale (colonnes, listes, corps) et Extended (montants, titres). C'est la chasse, pas la famille, qui fait la hiérarchie. */ --fonte-colonne: "AMG Mono", ui-monospace, "SFMono-Regular", monospace; --fonte-montant: "AMG Mono Extended", "AMG Mono", ui-monospace, monospace; --fonte-titre: "AMG Mono Extended", "AMG Mono", ui-monospace, monospace; --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 700; /* Chiffres : toujours tabulaires, toujours zéro pointé. Non négociable dans un registre comptable — les colonnes doivent s'aligner au pixel. */ --chiffres: tabular-nums lining-nums; /* Échelle — un montant héros, puis tout le reste petit et calme. */ --corps-heros: 3.25rem; /* 52px — le montant de la carte de tri */ --corps-titre: 1.5rem; /* 24px — grand titre d'écran */ --corps-section: 0.8125rem;/* 13px — intitulé de section, capitales */ --corps-montant: 1.0625rem;/* 17px — montant en ligne de liste */ --corps-base: 0.9375rem;/* 15px — libellé principal */ --corps-info: 0.8125rem;/* 13px — libellé secondaire */ --corps-meta: 0.75rem; /* 12px — date, référence, compteur */ --corps-note: 0.6875rem;/* 11px — mention de bas de carte */ --interligne-serre: 1.1; --interligne-normal: 1.45; --chasse-titre: 0.06em; /* les capitales mono respirent */ --chasse-section:0.12em; --chasse-montant:-0.01em; /* ═══ ESPACEMENTS — base 4 ══════════════════════════════════════════════ */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; /* ═══ RAYONS ════════════════════════════════════════════════════════════ */ --rayon-xs: 4px; /* micro-étiquette */ --rayon-sm: 6px; /* champ, bouton */ --rayon-md: 8px; /* jeton d'activité 24-28px */ --rayon-lg: 12px; /* carte de liste, groupe */ --rayon-xl: 16px; /* carte de tri (l'objet qu'on manipule)*/ --rayon-plein: 999px; /* ═══ TRAITS ════════════════════════════════════════════════════════════ */ --trait-fin: 1px; /* séparateur, contour de carte */ --trait-fort: 2px; /* état actif, bord d'attention */ --trait-focus: 2px; --trait-icone: 1.75; /* épaisseur UNIQUE du jeu d'icônes (grille 24) */ /* ═══ CIBLES ════════════════════════════════════════════════════════════ Le tri se fait au pouce, le soir. Rien de tapable sous 44px. */ --cible-min: 44px; --cible-confort: 56px; /* ═══ MOUVEMENT ═════════════════════════════════════════════════════════ */ --sortie: cubic-bezier(.2,.8,.2,1); --entree: cubic-bezier(.4,0,.2,1); --duree-instant: 90ms; --duree-base: 180ms; --duree-carte: 260ms; /* la carte qui part sur le côté */ /* ═══════════════════════════════════════════════════════════════════════ COULEURS — thème SOMBRE par défaut (on trie le soir). Trois familles strictement disjointes : · les NEUTRES : le papier et l'encre du registre ; · les ACTIVITÉS : une couleur = une entité, jamais autre chose ; · les ÉTATS : chroma bas, uniquement de l'encre, jamais un aplat. ═══════════════════════════════════════════════════════════════════════ */ /* — Neutres — graphite froid : ça doit ressembler à un relevé, pas à un jeu */ --c-fond: #0F1114; --c-surface: #171A1F; --c-surface-2: #1E2228; --c-surface-3: #262B33; --c-bord: #2A2F36; --c-bord-fort: #3A414A; /* Voile derrière une feuille : assombrit le fond sans le teinter. */ --c-voile: #00000099; --c-texte: #E6E8EB; /* 15.40:1 sur --c-fond */ --c-texte-second: #A0A6AD; /* 7.70:1 sur --c-fond */ --c-texte-tenu: #8A9199; /* 5.93:1 sur --c-fond — seuil AA respecté */ /* Les deux seules encres autorisées sur un jeton d'activité. Le choix se fait par mesure, pas à l'œil (tableau dans PLANCHE.md). */ --encre-sombre: #14130D; --encre-claire: #FFFFFF; /* — ACTIVITÉS — 7 en usage. Palette FERMÉE : jamais de sélecteur libre. — */ --act-globale: #4A90E2; --act-globale-encre: var(--encre-sombre); --act-fullomerta: #E67E22; --act-fullomerta-encre: var(--encre-sombre); --act-adam: #9B59B6; --act-adam-encre: var(--encre-claire); --act-walid: #16A085; --act-walid-encre: var(--encre-sombre); --act-haf: #F1C40F; --act-haf-encre: var(--encre-sombre); --act-perso: #7F8C8D; --act-perso-encre: var(--encre-sombre); --act-amg: #E84393; --act-amg-encre: var(--encre-sombre); /* — RÉSERVES — 3 emplacements pour les activités futures. Teintes placées aux milieux des trois plus grands écarts OKLCH laissés libres par les 7 en usage (≥ 30° de tout jeton actif). Le rouge franc est exclu : il appartient au danger. — */ --act-reserve-1: #669A3A; --act-reserve-1-encre: var(--encre-sombre); /* vert OKLCH H133 */ --act-reserve-2: #059AB2; --act-reserve-2-encre: var(--encre-sombre); /* azur OKLCH H214 */ --act-reserve-3: #6B5DCF; --act-reserve-3-encre: var(--encre-claire); /* indigo OKLCH H285 */ /* — REPLI au-delà de 10 activités : plus de couleur, que du libellé. — */ --act-neutre: #4B535C; --act-neutre-encre: var(--encre-claire); /* 7.80:1 */ /* — ÉTATS — rampe PROPRE, séparée, jamais confondable avec une activité. Invariant vérifiable : les trois états partagent EXACTEMENT la même clarté et le même chroma OKLCH (L=0.775, C=0.085) ; seule la teinte change. Aucun jeton d'activité ne descend sous C=0.11 (sauf PERSO, gris assumé à C=0.015). Un état ne peut donc pas être pris pour une entité : il est visiblement moins coloré, à clarté constante. Second garde-fou, de rôle : un état ne remplit JAMAIS un aplat — texte, filet de 2px, ou glyphe de 16px maximum. — */ --etat-ok: #8FC699; /* 8.89:1 sur --c-surface */ --etat-alerte: #C7B676; /* 8.62:1 */ --etat-danger: #E7A199; /* 8.27:1 */ --etat-ok-fond: #152318; --etat-alerte-fond: #241F0E; --etat-danger-fond: #2C1A17; /* Pas de --info : l'information, c'est le texte. Une couleur « info » ne dirait rien de plus et volerait une teinte à une activité future. */ /* — FOCUS — achromatique par principe : c'est le seul repère de l'interface qui ne doit rien signifier d'autre que « vous êtes ici ». — */ --c-focus: var(--c-texte); --anneau-focus: 0 0 0 2px var(--c-fond), 0 0 0 4px var(--c-focus); /* — Ombres — la carte de tri se soulève, rien d'autre. — */ --ombre-1: 0 1px 2px rgb(0 0 0 / .40); --ombre-2: 0 6px 20px rgb(0 0 0 / .45); --ombre-3: 0 18px 44px rgb(0 0 0 / .55); --z-fond: 0; --z-liste: 10; --z-carte: 20; --z-barre: 30; --z-feuille: 40; --z-modale: 50; --z-toast: 60; } /* ══════════════════════════════════════════════════════════════════════════ THÈME CLAIR — mêmes noms, autres valeurs. Le papier du registre. Les activités NE CHANGENT PAS de teinte (une couleur = une entité, quel que soit le thème) ; seules leurs encres et la rampe d'état sont recalculées. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="clair"] { --c-fond: #FAFAF8; --c-surface: #FFFFFF; --c-surface-2: #F1F0EC; --c-surface-3: #E7E6E1; --c-bord: #DEDCD6; --c-bord-fort: #C2BFB7; --c-texte: #14171B; /* 17.20:1 sur --c-fond */ --c-texte-second: #4E555D; /* 7.22:1 */ --c-texte-tenu: #6A727B; /* 4.67:1 */ /* Sur fond clair, les aplats d'activité restent identiques : c'est précisément ce qui rend l'entité reconnaissable d'un thème à l'autre. Les encres, elles, sont remesurées — et donnent le même verdict. */ --act-adam-encre: var(--encre-claire); --act-reserve-3-encre: var(--encre-claire); --etat-ok: #3C784B; /* 5.28:1 sur --c-surface */ --etat-alerte: #7A681C; /* 5.49:1 */ --etat-danger: #98524B; /* 5.76:1 */ --etat-ok-fond: #E3F6E6; --etat-alerte-fond: #F6F0DA; --etat-danger-fond: #FFE9E5; --act-neutre: #8B939B; --act-neutre-encre: var(--encre-sombre); --ombre-1: 0 1px 2px rgb(16 18 22 / .07); --ombre-2: 0 6px 20px rgb(16 18 22 / .10); --ombre-3: 0 18px 44px rgb(16 18 22 / .16); } /* ══════════════════════════════════════════════════════════════════════════ ACCESSIBILITÉ — non négociable ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --duree-instant: 0ms; --duree-base: 0ms; --duree-carte: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --c-bord: var(--c-bord-fort); --c-texte-tenu: var(--c-texte-second); --trait-fin: 2px; } } /* ══════════════════════════════════════════════════════════════════════════ SOCLE — le strict nécessaire pour que les jetons servent tout de suite ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--fonte-colonne); font-size: var(--corps-base); line-height: var(--interligne-normal); font-variant-numeric: var(--chiffres); -webkit-font-smoothing: antialiased; /* Le tri est une manipulation au pouce : rien ne doit se sélectionner. */ -webkit-tap-highlight-color: transparent; } :focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: var(--rayon-sm); } /* Tout ce qui est un nombre passe par là. Jamais autrement. */ [data-montant], .montant { font-family: var(--fonte-montant); font-variant-numeric: var(--chiffres); letter-spacing: var(--chasse-montant); }