/* ═══════════════════════════════════════════════════════════════════════════════════════════════ JETONS DE DESIGN — la source unique de l'apparence du CRM (20.09.2026) Constat qui a motivé ce fichier : 1 223 couleurs écrites en dur dans le JS et le CSS contre 29 variables. L'apparence n'était pas une décision, c'était 1 223 décisions indépendantes prises à des moments différents — d'où l'impression de « presque cohérent ». Ici, une valeur n'existe qu'une fois. Un écran ne choisit jamais une couleur : il choisit une INTENTION (« ceci est un danger », « ceci est une surface secondaire ») et le jeton décide. C'est ce qui permet de changer l'identité entière en dix minutes, de tenir un mode sombre sans le réécrire, et d'habiller une saison sans se battre. Règle d'usage : dans un écran, on écrit var(--c-danger), jamais #EF4444. Ce fichier doit rester le PREMIER chargé : tout le reste en dépend. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marque ───────────────────────────────────────────────────────────────────────────────── Le bleu marine Assurex et le turquoise du point de REX.CRM. Relevés sur les fichiers de marque officiels, pas approchés à l'œil. */ --m-marine: #113679; --m-marine-fonce: #0B2458; --m-marine-nuit: #0E1B33; --m-turquoise: #00CFFF; --m-turquoise-doux: #7DD3FC; /* Version sourde, utilisee comme accent d'interface : le turquoise de marque reste reserve au logo et au point de REX.CRM, ou il doit briller. Sur des boutons et des liens, il fatigue. */ --m-turquoise-fonce: #0095B8; --m-or: #D4A94A; /* ── Gris ─────────────────────────────────────────────────────────────────────────────────── Une seule échelle, du plus clair au plus sombre. Tous les gris du CRM doivent en sortir : c'est ce qui donne l'impression d'unité qu'on ne sait pas nommer quand on la voit. */ --g-0: #FFFFFF; --g-25: #F8FAFC; --g-50: #F4F6F9; --g-100:#EEF2F7; --g-200:#E2E8F0; --g-300:#CBD5E1; --g-400:#94A3B8; --g-500:#64748B; --g-600:#56627A; --g-700:#334155; --g-800:#1E293B; --g-900:#0F172A; /* ── Intentions ───────────────────────────────────────────────────────────────────────────── Trois déclinaisons par intention : la couleur pleine, une version sourde pour les fonds, une version foncée pour le texte posé sur ce fond. Sans les trois, chaque écran réinvente son propre mélange — c'est ce qui se passait jusqu'ici. */ --c-succes: #16A34A; --c-succes-fond: rgba(34,197,94,.13); --c-succes-texte: #15803D; --c-alerte: #F59E0B; --c-alerte-fond: rgba(245,158,11,.13); --c-alerte-texte: #B45309; --c-danger: #EF4444; --c-danger-fond: rgba(239,68,68,.12); --c-danger-texte: #B91C1C; --c-info: #2563EB; --c-info-fond: rgba(37,99,235,.10); --c-info-texte: #1D4ED8; --c-neutre: var(--g-500); --c-neutre-fond: var(--g-100); --c-neutre-texte: var(--g-700); /* ── Espacements ──────────────────────────────────────────────────────────────────────────── Échelle de 4 px. Une marge ne se choisit plus « à l'œil » : elle prend le cran au-dessus ou en dessous. C'est ce qui aligne les écrans entre eux sans que personne ne le remarque. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; /* ── Rayons ───────────────────────────────────────────────────────────────────────────────── Quatre valeurs, pas douze. Les rayons intermédiaires inventés au cas par cas sont la première chose qui trahit un assemblage. */ --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 24px; --r-rond: 999px; /* ── Élévations ───────────────────────────────────────────────────────────────────────────── Trois niveaux seulement : posé, détaché, flottant. Au-delà, l'œil ne distingue plus. */ --o-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05); --o-2: 0 4px 10px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05); --o-3: 0 14px 34px rgba(15,23,42,.16), 0 4px 10px rgba(15,23,42,.08); /* ── Typographie ──────────────────────────────────────────────────────────────────────────── Une hiérarchie de six niveaux. C'est elle, et non les cadres colorés, qui fait la lisibilité d'un outil professionnel : on doit pouvoir lire la page sans aucune couleur. */ --t-xs: 11px; --t-s: 12.5px; --t-m: 13.5px; --t-l: 15px; --t-xl: 19px; --t-2xl: 26px; --t-titre: 34px; --t-normal: 400; --t-moyen: 600; --t-gras: 700; --t-lourd: 800; --t-serre: 1.25; --t-aere: 1.55; --t-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── Mouvement ────────────────────────────────────────────────────────────────────────────── Deux durées, deux courbes. Une animation plus lente que 300 ms sur une action attendue donne l'impression que l'outil rame. */ --v-court: .15s; --v-moyen: .28s; --v-courbe: cubic-bezier(.2, .8, .2, 1); --v-entree: cubic-bezier(.16, 1, .3, 1); /* ── Densité ──────────────────────────────────────────────────────────────────────────────── Réglage confortable par défaut. En mode compact, les hauteurs de ligne et les marges se resserrent partout d'un coup — un courtier qui traite quarante lignes veut voir quarante lignes, pas douze. Se pose avec . */ --d-ligne: 42px; --d-cellule-y: 10px; --d-cellule-x: 14px; --d-carte: var(--e-4); } body[data-densite="compact"] { --d-ligne: 32px; --d-cellule-y: 5px; --d-cellule-x: 10px; --d-carte: var(--e-3); --t-m: 12.5px; --t-s: 11.5px; } /* Mode sombre : seules les valeurs qui doivent changer sont redéfinies. Les intentions gardent leur sens — un danger reste un danger, il est juste accordé au fond. */ body.theme-sombre { --g-0: #0B1220; --g-25: #0E1628; --g-50: #111C33; --g-100:#1E2A42; --g-200:#243350; --g-300:#33455F; --g-400:#64748B; --g-500:#94A3B8; --g-600:#B6C2D4; --g-700:#CBD5E1; --g-800:#E2E8F0; --g-900:#E7ECF4; --c-succes-fond: rgba(74,222,128,.16); --c-succes-texte: #4ADE80; --c-alerte-fond: rgba(245,158,11,.18); --c-alerte-texte: #FBBF24; --c-danger-fond: rgba(248,113,113,.16); --c-danger-texte: #FCA5A5; --c-info-fond: rgba(125,211,252,.14); --c-info-texte: #7DD3FC; --o-1: 0 1px 2px rgba(0,0,0,.4); --o-2: 0 4px 10px rgba(0,0,0,.45); --o-3: 0 14px 34px rgba(0,0,0,.55); } /* Pour qui demande moins d'animations, les durées tombent à zéro en un seul endroit plutôt que dans quarante règles @media dispersées. */ @media (prefers-reduced-motion: reduce) { :root { --v-court: 0s; --v-moyen: 0s; } }