/* ════════════════════════════════════════════════════════════════ OBSIONIS — jetons de design Direction artistique « Trajectoire » v3.0. Source de vérité unique. Aucune couleur n'est écrite en dur ailleurs dans le projet. La loi qui structure tout ce fichier, c'est la doctrine des deux couches (§ 2.1) : • LA COQUE — l'univers, le jeu, le mouvement. Rayons généreux (12–20 px), couleur libre dans la palette, mouvement avec élan. • L'INSTRUMENT — le chiffre, et rien d'autre. Rayons stricts (2–6 px), fond en creux, mono tabulaire aligné à droite, jamais de dégradé, jamais l'accent Royal en fond. Un écran mélange les deux. Un composant, jamais. ════════════════════════════════════════════════════════════════ */ :root{ /* ── 1. SURFACES — la coque ────────────────────────────────── Le noir n'est jamais neutre : il est légèrement violet. C'est ce qui fait lire l'obscurité comme une teinte de marque et non comme une absence de choix. */ --bg-rgb: 10 10 21; --bg: rgb(var(--bg-rgb)); /* Vide — fond de page, unique */ --bg-cut: #06060E; /* la coupure — plus sombre, sans ambiance */ --bg-2: #14142A; /* Coque — surface, carte */ --bg-3: #1C1C36; /* Coque haute — flottant, modale */ --voile: rgba(18, 18, 33, .5); /* #12122180 composé sur --bg-2*/ /* ── 2. SURFACE — l'instrument ─────────────────────────────── En creux, plus sombre que la coque : le chiffre est posé dans un puits, pas sur un décor. */ --bg-inst: #0E0E1C; /* ── 3. TEXTE ─────────────────────────────────────────────── Contrastes mesurés sur --bg. */ --ink: #F5F8FD; /* 17,4:1 chiffres, montants, texte fort */ --muted: #A8ADC7; /* 8,9:1 labels, unités, texte courant */ --faint: #6E7392; /* 4,3:1 MÉTADONNÉES NON ESSENTIELLES — */ /* sous le seuil AA : jamais pour */ /* une information qui compte, et */ /* jamais sur --bg-3 (3,6:1) */ --whisper: rgba(245,248,253,.10); /* non textuel */ /* ── 4. MARQUE — une seule teinte, déclinée en profondeur ──── Le logo fourni garde son dégradé violet→cyan : c'est la seule zone bi-teinte du système, et elle n'est pas retouchée. L'interface, elle, est entièrement violette. Royal ne sort JAMAIS de sa liste fermée (§ 3.1) : 1. le fond du CTA principal 2. le remplissage d'une progression 3. l'indicateur de navigation active 4. le badge de rang ou de jalon atteint Partout ailleurs — texte d'accent, liseré, survol — c'est Cornflower ou Lavande : Royal est trop sombre pour être lu sur le Vide (2,4:1), il n'est pas une couleur de texte. */ --accent-rgb: 65 54 195; --accent: rgb(var(--accent-rgb)); /* Royal — remplissage */ --accent-2-rgb: 124 140 255; --accent-2: rgb(var(--accent-2-rgb)); /* Cornflower 6,6:1 — survol, état actif */ --lavande: #A79BF0; /* 8,0:1 AAA — liseré, texte d'accent */ --brume: #E8D7F8; /* tinte très claire — badge */ --indigo: #3E3183; /* ancrage sombre — fond, pas accent */ /* Dégradé mono-teinte. Cartes hero, fonds immersifs, célébration d'un jalon. Jamais sur un bouton, jamais sur un chiffre ni sur son fond immédiat. */ --g-violet: linear-gradient(160deg, #0B0A16 0%, #4136C3 60%, #7C8CFF 100%); /* ── 5. ÉTATS — pas de dégradé ici non plus ───────────────── Loi qui traverse tous les territoires, non négociable : un solde négatif n'est JAMAIS coloré en rouge. Le rouge appartient aux erreurs de l'application, jamais au résultat de l'utilisateur. */ --pass: #4FD98C; /* défi réussi, entrée positive */ --warn: #F5A94E; /* seuil approché, attention */ --fail: #F2586B; /* erreur de saisie ou système UNIQUEMENT */ --neutre: #6E7392; /* inactif, comparatif */ /* ── 6. TRAITS ──────────────────────────────────────────────*/ --line: rgba(245,248,253,.10); --line-2: rgba(245,248,253,.20); --glass: rgba(20, 20, 42, .72); /* ── 7. TYPOGRAPHIE — deux rôles, tenus fermement séparés ─── Archivo est variable : la display est la même fonte resserrée à 78 %, pas une seconde famille. Tout ce qui est chiffre passe en mono tabulaire — le mélange des deux dans un même bloc est la règle, pas l'exception. */ --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --sans: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; /* ── 8. ESPACEMENT ──────────────────────────────────────────*/ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --pad: clamp(1.25rem, 5vw, 6rem); /* gouttière de page */ --rythme: clamp(6rem, 15vh, 12rem); /* pas vertical */ /* ── 9. RAYONS — la doctrine se lit dans les angles ───────── L'app peut respirer sur la coque ; l'instrument garde la rigueur du chiffre. */ --r-inst: 3px; /* instrument — puits de chiffre */ --r-inst-lg: 6px; /* instrument — carte de données */ --r-sm: 6px; --r-md: 12px; /* coque basse */ --r-lg: 16px; /* coque */ --r-xl: 20px; /* coque haute */ --r-pill: 100px; /* ── 10. ÉLÉVATION sur fond sombre ────────────────────────── Une ombre noire sur du presque-noir est invisible : l'élévation se lit au trait clair posé en haut de surface. */ --e1: 0 1px 0 0 rgba(245,248,253,.05) inset, 0 12px 34px rgba(0,0,0,.45); --e2: 0 1px 0 0 rgba(245,248,253,.09) inset, 0 22px 60px rgba(0,0,0,.55); --glow: 0 0 60px rgba(var(--accent-rgb) / .30); /* Lueur de bord : réservée à l'état actif ou réussi. Jamais sur l'état neutre — sinon ce n'est plus une information. */ --lueur: 0 0 0 1px rgba(167,155,240,.30), 0 0 32px rgba(var(--accent-rgb) / .35); /* ── 11. MOUVEMENT — le mouvement raconte un vol ──────────── Accélération, franchissement, stabilisation. De l'élan, jamais du bruit gratuit. Les plafonds sont ceux de la DA : 400 ms — micro-célébration 600 ms — transition immersive 320 ms — instrument : la donnée ne doit jamais sembler ludique, donc jamais d'élan sur un chiffre. */ --t-fast: .16s; --t-base: .28s; --t-inst: .32s; /* plafond instrument */ --t-slow: .4s; /* plafond micro-célébration */ --t-imm: .6s; /* plafond transition immersive */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.19, 1, .22, 1); /* Rebond léger — toléré sur la coque, interdit sur l'instrument */ --ease-elan: cubic-bezier(.34, 1.28, .64, 1); /* ── 12. AMBIANCE — l'anneau et la fissure ────────────────── Vocabulaire hérité du logo : une source de lumière qui traverse un anneau à 45°. Pas un halo qui flotte — un tracé qui coupe. Un halo par écran, motivé. Jamais de nébuleuse permanente. */ --halo: radial-gradient(closest-side, rgba(var(--accent-rgb) / .42), rgba(var(--accent-rgb) / .16) 40%, rgba(var(--accent-2-rgb) / .08) 64%, transparent 78%); /* La fissure : bandes perpendiculaires à une ligne à 132°, donc un trait qui monte vers la droite — la diagonale du logo. */ --fissure: linear-gradient(132deg, transparent 42%, rgba(var(--accent-2-rgb) / .05) 46%, rgba(167,155,240,.34) 50%, rgba(var(--accent-rgb) / .10) 54%, transparent 58%); /* ── 13. POINTS DE RUPTURE (référence) ────────────────────── 560 mobile · 820 rail non pinné · 1080 desktop · 1400 large */ }