/* ───────────────────────────────────────────────────────────── Flaynn · Couche des deux univers (handoff design de septembre 2026) Deux mondes, un seul moteur : Intelligence (Investor, nuit) préfixe --int-* Atelier (Founder, papier) préfixe --atl-*, scope body[data-universe="atelier"] Ce fichier NE redéfinit PAS la palette de base. Il s'aliasse sur les tokens sans préfixe déjà chargés par les pages : · marketing : /css/ds/tokens.css · app : bloc V10 de /css/flaynn-design-system.css Les deux portent les mêmes noms (--bg, --surface-1, --text-1, --violet, --violet-2, --orange, --strongyes, --yes, --almost, --notyet, --pillar-*). Un repli est fourni pour les cas où la page n'a chargé aucun des deux. Ce qui est nouveau ici, et nulle part ailleurs : l'univers papier, la provenance comme primitive, l'échelle d'espacement et de rayons du handoff, les ombres et les durées. DESIGN.md dit ce qui fait foi et ce qui reste legacy (--fly-*, /shared/tokens.css, :root inline). Aucune page ne doit copier ces valeurs ailleurs. Règles tenues : · Vérifié n'est jamais vert (décision du 2026-08-03, confirmée le 2026-09-03). Le vert appartient au seul Strong Yes. · L'orange de marque se nomme flaynn, jamais « flame ». · Le violet est en aplat ; le seul dégradé autorisé est celui des jauges de progression (violet vers orange), signé handoff. ───────────────────────────────────────────────────────────── */ :root { /* ─── Intelligence · nuit ─── */ --int-bg: var(--bg, #030407); --int-surface: var(--surface-1, #0a0d14); --int-surface-raised: var(--surface-2, #0f1219); --int-ink: var(--text-1, #f0f0f3); --int-ink-strong: #f4eef7; /* titres et valeurs clés, blanc à peine violet */ --int-ink-muted: #9ba2b3; /* texte secondaire, 7,4:1 sur --int-bg */ --int-ink-faint: #8b93a7; /* labels mono, métadonnées, 6,1:1 */ --int-accent: var(--violet, #7b2d8e); --int-accent-mid: var(--violet-2, #a85ec0); --int-accent-soft: #c98edd; /* labels accentués, liens */ --int-border: var(--line, rgba(255, 255, 255, 0.06)); --int-border-strong: var(--line-strong, rgba(255, 255, 255, 0.10)); --int-border-accent: rgba(168, 94, 192, 0.7); --int-wash: rgba(123, 45, 142, 0.14); /* état sélectionné, fond de survol */ --int-shadow-glow: 0 60px 140px -50px rgba(123, 45, 142, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07); --int-shadow-cta: 0 10px 30px -10px rgba(123, 45, 142, 0.8); --int-shadow-pop: 0 24px 50px -20px rgba(0, 0, 0, 0.9); /* ─── Atelier · papier ─── */ --atl-desk: #f7f2e9; /* fond de bureau, avec grain */ --atl-paper: #fffdf8; /* cartes, carnet */ --atl-paper-sunken: #f3ecdd; /* sidebar, lignes creuses */ --atl-paper-dense: #efe8da; /* squelettes, jauges vides */ --atl-ink: #241c15; --atl-ink-muted: #4a4032; --atl-ink-faint: #7a6f5f; /* eyebrows, métadonnées, 4,9:1 sur papier */ --atl-flaynn: var(--orange, #e8651a); /* fonds de bouton, traits, jauges ; jamais du texte */ --atl-flaynn-ink: #c2550d; /* texte orange sur papier, 4,6:1 */ --atl-flaynn-soft: #f5a36e; /* fin de dégradé, surlignage marqueur */ --atl-flaynn-wash: #fdebdc; /* « à prouver », étape courante */ --atl-border: rgba(36, 28, 21, 0.10); --atl-border-dashed: rgba(36, 28, 21, 0.28); --atl-shadow-paper: 0 1px 2px rgba(66, 46, 22, 0.05), 0 10px 30px -16px rgba(66, 46, 22, 0.18); --atl-shadow-paper-lg:0 2px 4px rgba(66, 46, 22, 0.05), 0 24px 60px -30px rgba(66, 46, 22, 0.3); --atl-shadow-cta: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 20px -8px rgba(232, 101, 26, 0.55); --atl-cta: linear-gradient(180deg, #f0732c, #dd5c12); /* Les quatre signaux de lecture, valeurs AA sur papier. L'enum ne change pas (Strong Yes, Yes, Almost, Not Yet), seule la teinte est assombrie pour tenir le contraste sur fond clair. */ --atl-strongyes: #1a7f3f; --atl-yes: #8b2ea3; --atl-almost: #b45309; --atl-notyet: #c0321b; /* ─── Provenance, primitive partagée par les deux univers ─── */ --prov-verified: var(--violet-2, #a85ec0); /* recalculé depuis une pièce : violet, jamais vert */ --prov-declared: #8b93a7; /* affirmé, non recalculable en l'état */ --prov-inferred: var(--almost, #f59e0b); /* reconstruit par le moteur, méthode explicitée */ --prov-missing: var(--almost, #f59e0b); /* pièce attendue et absente : cercle en tirets */ --prov-conflict: var(--notyet, #dc2626); /* deux sources se contredisent : seul usage du rouge */ --prov-verified-atl: #8b2ea3; --prov-declared-atl: #7a6f5f; --prov-inferred-atl: #b45309; /* ─── Piliers (inchangés, alias du canon) ─── */ --u-pillar-market: var(--pillar-market, #a85ec0); --u-pillar-product: var(--pillar-product, #ec4899); --u-pillar-traction: var(--pillar-traction, #f97316); --u-pillar-team: var(--pillar-team, #facc15); --u-pillar-execution: var(--pillar-execution, #06b6d4); /* ─── Surfaces de travail de l'Investment Desk ────────────────────────── Décision du 2026-09-06 : le nuit du Desk est CHAUD, et lui seul. Le portail, les pages de lancement, les connexions et le fond général restent sur --int-bg, c'est-à-dire #030407. Ces tokens ne sont appliqués nulle part pour l'instant : les surfaces qui les portent (La table, Chemise ouverte, Nouvelle chemise, Mémo) arrivent au lot 6. Ils sont posés ici pour que la couche des univers reste le seul endroit où une valeur de fond se décide. */ --desk-bg: #100e0c; --desk-surface: #1a1512; --desk-surface-raised:#1f1a16; --desk-ink: #e9e2d6; --desk-ink-strong: #f3ede3; --desk-ink-muted: #a89c8c; --desk-border: rgba(233, 226, 214, 0.14); --desk-border-strong: rgba(233, 226, 214, 0.25); /* Les deux valeurs de la reliure de la chemise ouverte. Le pli est le creux au centre de la feuille, plus sombre que la table elle-même ; le bord est la tranche extérieure, plus claire que la surface. Elles vivent ici et pas dans desk.css parce que la couche des univers est le seul endroit où une valeur de fond se décide. */ --desk-fold: #0e0b09; --desk-page-edge: #1e1915; /* ─── Espacement, base 4 ─── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 40px; --sp-8: 56px; /* ─── Rayons, une seule échelle, quatre crans ─────────────────────────── Décision du 2026-09-06. Le handoff proposait trois langages indépendants par monde ; ils sont ramenés à une échelle unique dans laquelle chaque monde puise. La pilule est la seule exception, réservée aux boutons et chips de l'Atelier. --r-1 2px Investment Desk, surfaces de travail investisseur --r-2 6px portail, Super Admin, contrôles et champs --r-3 10px Atelier, cartes et encarts --r-4 14px Atelier, grandes surfaces --r-pill boutons et chips Atelier Un rayon hors de cette liste est une dérive, pas un choix. Les noms historiques --r-xs à --r-xl restent servis pour ne rien casser, mais ils ne portent plus de valeur propre : ils pointent sur l'échelle. Ils sont gelés, on n'en ajoute pas. */ --r-1: 2px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 999px; --r-xs: var(--r-1); --r-sm: var(--r-2); --r-md: var(--r-3); --r-lg: var(--r-4); --r-xl: var(--r-4); /* Rayon par monde, à préférer aux crans nus dans les surfaces neuves. */ --r-desk: var(--r-1); --r-portal: var(--r-2); --r-atelier: var(--r-3); --r-atelier-lg: var(--r-4); /* Onglet de chemise : exception de composant, documentée ici et nulle part ailleurs. Ce n'est pas un cinquième cran, c'est une forme. */ --r-desk-tab: 3px 10px 3px 3px; /* ─── Durées et courbes ─── */ --dur-1: 180ms; /* survols, chips, focus */ --dur-2: 280ms; /* rebond des boutons papier, cartes */ --dur-3: 320ms; /* changements d'état */ --dur-4: 550ms; /* entrée d'écran */ --dur-5: 900ms; /* frontière du portail */ --dur-6: 1300ms; /* jauges, anneaux, barres de provenance */ --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.4, 0.5, 1); /* ─── Typographie ─── */ --font-serif-note: 'IBM Plex Serif', Georgia, serif; /* notes privées, citations, italique */ --font-title: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif; /* titres Atelier */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* Le scope Atelier bascule le document sur le papier. Les composants de primitives.css lisent --u-* et suivent sans réécriture. */ :root { --u-bg: var(--int-bg); --u-surface: var(--int-surface); --u-ink: var(--int-ink); --u-ink-strong: var(--int-ink-strong); --u-ink-muted: var(--int-ink-muted); --u-ink-faint: var(--int-ink-faint); --u-accent: var(--int-accent); --u-accent-ink: var(--int-accent-soft); --u-border: var(--int-border); --u-border-strong: var(--int-border-strong); --u-wash: var(--int-wash); --u-shadow: none; --u-shadow-cta: var(--int-shadow-cta); --u-strongyes: var(--strongyes, #22c55e); --u-yes: var(--yes, #a85ec0); --u-almost: var(--almost, #f59e0b); --u-notyet: var(--notyet, #dc2626); --u-prov-verified: var(--prov-verified); --u-prov-declared: var(--prov-declared); --u-prov-inferred: var(--prov-inferred); } body[data-universe="atelier"] { --u-bg: var(--atl-desk); --u-surface: var(--atl-paper); --u-ink: var(--atl-ink); --u-ink-strong: var(--atl-ink); --u-ink-muted: var(--atl-ink-muted); --u-ink-faint: var(--atl-ink-faint); --u-accent: var(--atl-flaynn); --u-accent-ink: var(--atl-flaynn-ink); --u-border: var(--atl-border); --u-border-strong: var(--atl-border-dashed); --u-wash: var(--atl-flaynn-wash); --u-shadow: var(--atl-shadow-paper); --u-shadow-cta: var(--atl-shadow-cta); --u-strongyes: var(--atl-strongyes); --u-yes: var(--atl-yes); --u-almost: var(--atl-almost); --u-notyet: var(--atl-notyet); --u-prov-verified: var(--prov-verified-atl); --u-prov-declared: var(--prov-declared-atl); --u-prov-inferred: var(--prov-inferred-atl); background-color: var(--atl-desk); background-image: radial-gradient(900px 500px at 88% -12%, rgba(232, 101, 26, 0.09), transparent 62%), var(--grain); color: var(--atl-ink); color-scheme: light; }