/* ═══════════════════════════════════════════════════════════════════════ MARPEAP — jetons globaux Source de vérité des couleurs, des voiles et de la typographie du site. Tout fichier qui pose une couleur en dur diverge : importer ceci d'abord. La direction artistique reste celle des règles Barthez (papier, encre, accent unique). Ce qui suit ne l'élargit pas, il la corrige sur un point que la doctrine ne pouvait pas prévoir : ici le fond n'est pas du papier, c'est un film. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Fonds et encres ───────────────────────────────────────────────── Jamais #FFFFFF ni #000000 : un blanc chaud et un noir encre. --paper/--ink font 17,37:1 l'un sur l'autre. */ --paper: #F2F0EB; --paper-2: #E7E4DC; /* aplat de section claire (Méthode) */ --ink: #0A0A0C; --ink-2: #14141A; /* élévation 1 sur fond sombre */ --mute: #6A6765; /* texte secondaire SUR papier — 4,9:1 */ --rule: #A19E99; /* filets sur papier. Jamais du texte : 2,3:1 */ /* Sur fond sombre, le secondaire et les filets se dérivent du papier : une opacité tient sur n'importe quelle frame, un gris fixe non. */ /* Les composantes brutes, pour composer une opacite sans figer la teinte. Un jeu de styles s'echange en changeant CES lignes : tout ce qui derive suit. Sans elles, chaque voile et chaque ombre reste une couleur ecrite en dur dans une page, et l'echange laisse des traces de l'ancien jeu. */ --ink-rgb: 10, 10, 12; --paper-rgb: 242, 240, 235; --ombre-rgb: 10, 10, 26; /* teintee du fond, jamais du noir pur */ --mute-ink: rgba(var(--paper-rgb), .72); --rule-ink: rgba(var(--paper-rgb), .16); --rule-ink-2: rgba(var(--paper-rgb), .30); /* ── L'accent, en deux tons de la MÊME teinte ──────────────────────── Une seule couleur d'accentuation dans tout le produit : la teinte 240°. Deux tons, parce qu'il y a deux fonds et qu'aucune couleur ne peut passer 4,5:1 sur du papier ET sur un fond sombre à la fois — le calcul l'interdit (il faudrait une luminance à la fois ≥0,198 et ≤0,156). Le choix de la teinte n'est pas esthétique, il est mesuré : sur les trois films, les pixels colorés se répartissent à 56 % dans l'ambre (15-45°) et 33 % dans le cyan (180-225°). La bande 240° en occupe 0,14 %. L'accent ne peut donc jamais être confondu avec l'image — c'est la condition pour qu'il désigne encore quelque chose. Contrastes vérifiés (voir --scrim plus bas pour le fond de référence) : --accent-paper sur --paper .................. 8,22:1 --accent-ink sur --ink .................... 7,10:1 --accent-ink sur le plan le plus clair des films, voiles appliqués .. 5,71:1 */ --accent-paper: #0A0AEA; --accent-ink: #8F8FFF; /* --accent est le ton du fond COURANT. Le corps sombre prend le sien ; toute section claire redéclare la paire (voir .sur-papier plus bas). */ --accent: var(--accent-ink); --accent-on: var(--ink); /* texte lisible SUR un aplat d'accent */ /* ── États ─────────────────────────────────────────────────────────── Sémantique, jamais décoration : ces couleurs ne servent qu'à dire ce qui a marché, ce qui attend, ce qui a échoué. Elles ne remplacent jamais l'accent, et ne s'emploient jamais côte à côte avec lui. */ --ok-ink: #6EE7A8; --ok-paper: #067A47; --warn-ink: #F5C86B; --warn-paper: #8A5A00; --alert-ink: #FF8A8A; --alert-paper: #B3261E; /* ── Voiles ────────────────────────────────────────────────────────── Deux voiles, pas un. Le voile GLOBAL couvre tout l'écran ; chaque point d'opacité qu'il prend est du film qu'on ne voit plus. Il descend donc à 0,14 au centre — il ne sert plus qu'à asseoir la barre et le pied. Le voile LOCAL ne couvre que la colonne où le texte est posé, et s'éteint avant d'atteindre l'autre moitié du cadre. C'est lui qui porte la lisibilité, et lui seul. Résultat mesuré sur le plan le plus clair des trois films : le texte tient 13,97:1, l'accent 5,71:1, et 86 % de la surface du film reste hors de tout voile local. L'ancien voile unique à 0,34 en laissait 66 % et ne donnait à l'accent que 1,49:1 — il était illisible. */ --voile-haut: .46; --voile-centre: .14; --voile-bas: .72; --scrim: .62; /* opacité maximale du voile local */ /* La fourche empile trois voiles sous les mêmes mots — le global, le voile de bloc et le fond des voies. Le voile de bloc y descend donc, sinon le film disparaît juste au moment où on demande de le juger. */ --scrim-fourche: .40; --fond-voie: .30; /* ── Typographie ───────────────────────────────────────────────────── Un display grotesque condensé ultra-gras en capitales, une seule graisse de labeur, une mono pour les étiquettes. Pas de serif : rien ici n'est éditorial au sens d'une publication. */ --f-display: Anton, "Arial Narrow", Impact, sans-serif; --f-body: "Instrument Sans", system-ui, -apple-system, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* ── Grille et rythme ──────────────────────────────────────────────── Base 8. Les écarts INTRA valent au plus la moitié des écarts INTER : c'est l'espacement qui dit le groupe, pas une bordure. */ --u: 8px; --gap-intra: 12px; --gap-inter: 28px; --max: 1180px; --bord: 3px; /* rayon des elements cliquables */ --bord-carte: 16px; /* rayon des blocs poses sur le film */ --ombre-carte: 0 2px 8px rgba(var(--ombre-rgb), .34), 0 18px 40px rgba(var(--ombre-rgb), .28); --cible: 44px; /* plancher tactile. Rien de cliquable en dessous. */ --cible-prim: 52px; /* ── Mouvement ─────────────────────────────────────────────────────── Sous 400 ms l'interaction reste continue ; au-delà il faut un état. */ --t-instant: .12s; --t-court: .18s; --t-moyen: .35s; --e: cubic-bezier(.22,.61,.36,1); } /* Une section posée sur du papier bascule la paire d'accent d'un seul endroit. Sans cela l'accent clair se retrouve à 2,36:1 sur le papier. */ .sur-papier { --accent: var(--accent-paper); --accent-on: var(--paper); --mute-ink: var(--mute); --rule-ink: var(--rule); --rule-ink-2: var(--rule); color: var(--ink); background: var(--paper-2); } @media (prefers-reduced-motion: reduce) { :root { --t-instant: 0s; --t-court: 0s; --t-moyen: 0s; } }