/* ===================================================================== BOXBOX ERP — v3-tokens.css · LE CSS MAÎTRE ===================================================================== Ce fichier est la SOURCE UNIQUE de toute l'identité visuelle de l'ERP : couleurs, espacements, typographie, rayons, bordures, élévation, contrôles, mouvement. Il est chargé EN PREMIER, avant toute autre feuille : tout le reste de l'application consomme ces variables. Pour changer l'apparence globale de l'ERP, c'est ICI et nulle part ailleurs. Aucune valeur de couleur ou d'espacement ne doit être réécrite en dur dans les feuilles de module ni dans le JavaScript. Deux thèmes : :root = mode clair · [data-theme="dark"] = mode sombre. ===================================================================== */ /* Variables CSS */ :root { /* Couleurs principales */ --primary-color: #0e515d; --primary-dark: #0a3d47; --primary-light: #1a6b78; --accent-color: #28a745; --accent-dark: #1e7e34; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; /* Accent FOURNISSEURS — même famille que la marque, turquoise franc. Les deux types de contact doivent se distinguer d'un coup d'œil sans sortir de la charte : le vert d'eau reste aux clients, les fournisseurs prennent le même vert d'eau tiré vers le bleu. Remplace l'indigo #4f46e5 qui, lui, n'appartenait à aucune palette de l'ERP. 6,4:1 sur blanc. */ --supplier-color: #0f6b64; --supplier-rgb: 15, 107, 100; /* pour composer n'importe quelle transparence */ --supplier-dark: #0a544f; --supplier-tint: rgba(15, 107, 100, 0.08); --supplier-tint-line: rgba(15, 107, 100, 0.25); /* Urgent / Warning tones (Light) */ --urgent-bg: #fde8e9; --urgent-border: #ffc9c9; --urgent-text: #b02a37; --urgent-bg-glass: rgba(220, 53, 69, 0.08); /* Couleurs neutres */ --white: #ffffff; --gray-50: #f8f9fa; --gray-100: #e9ecef; --gray-200: #dee2e6; --gray-300: #ced4da; --gray-400: #adb5bd; --gray-500: #6c757d; --gray-600: #495057; --gray-700: #343a40; --gray-800: #212529; --gray-900: #000000; /* Espacement */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Bordures */ --border-radius: 8px; --border-radius-sm: 4px; --border-radius-lg: 12px; --border-radius-md: var(--border-radius); /* Ombres */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Typographie */ --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Layout */ --sidebar-width: 280px; --sidebar-collapsed-width: 70px; --header-height: 70px; /* Aliases legacy / modules */ --primary: var(--primary-color); --accent: var(--accent-color); --border-color: var(--gray-200); --card-bg: var(--white); --bg-secondary: var(--gray-50); --text-primary: var(--gray-900); --text-secondary: var(--gray-700); --text-muted: var(--gray-600); /* Refonte mode sombre 2026-07 — tokens partagés (valeurs claires ici ; teintes sombres dans [data-theme="dark"]) */ --primary-strong: var(--primary-dark); --link: var(--primary-color); --primary-tint: rgba(14, 81, 93, 0.08); --primary-tint-line: rgba(14, 81, 93, 0.25); --focus-ring: 0 0 0 3px rgba(14, 81, 93, 0.22); --bg-raised: var(--gray-50); --bg-sunken: var(--white); /* Alias de compat. — d'anciens modules (contacts, mailhub, auth, configurateur) utilisent ces noms non canoniques. Définis UNE fois ici → ils héritent du thème via les tokens canoniques (résolution paresseuse : dark override de --card-bg/--text-primary/--link s'applique). */ --bg-card: var(--card-bg); --text-color: var(--text-primary); --link-color: var(--link); /* Alias « fantômes » — tokens utilisés par des modules mais qui n'étaient définis NULLE PART (ils retombaient sur un fallback → couleurs cassées/incohérentes). Définis ici une fois → thème-aware via les tokens canoniques. */ --success: var(--accent-color); --success-dark: var(--accent-dark); --danger: var(--danger-color); --warning: var(--warning-color); --info: var(--info-color); --success-light: var(--status-installation-bg); --danger-light: var(--status-retard-bg); --warning-light: var(--status-production-bg); --success-bg: var(--status-installation-bg); --success-text: var(--status-installation); --info-bg: var(--status-devis-bg); --info-text: var(--status-devis); --bg-primary: var(--card-bg); --bg-hover: var(--bg-raised); --bg-input: var(--bg-sunken); --bg-body: var(--bg-secondary); --bg-accent: var(--primary-tint); --primary-hover: var(--primary-dark); --hover-color-light: var(--bg-raised); --hover-color-dark: var(--bg-raised); --accent-light: var(--primary-tint); --border: var(--border-color); --border-strong: var(--gray-400); --border-accent: var(--primary-color); --font-size-md: var(--font-size-base); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Listes & tableaux — démarcation des lignes (voir override sombre plus bas). --row-alt-bg : zébrure ; --row-separator : trait entre lignes (doit rester visible sur --card-bg) ; --row-hover-bg : ligne survolée (teinte de marque). */ --row-bg: var(--card-bg); --row-alt-bg: rgba(0, 0, 0, 0.022); --row-separator: var(--gray-200); /* Survol : valeur d'origine de la liste des offres (Commercial), retenue comme référence et propagée telle quelle à toutes les listes. */ --row-hover-bg: rgba(32, 201, 151, 0.05); --row-selected-bg: rgba(32, 201, 151, 0.12); /* Pipeline de statuts métier (Devis → Conception → Production → Installation → Terminé) */ --status-devis: #0c6d80; --status-devis-bg: #e2f2f5; --status-devis-line: #b5dde5; --status-conception: #5f43b2; --status-conception-bg: #ece7fa; --status-conception-line: #cfc3ef; --status-production: #a8500a; --status-production-bg: #fdefe0; --status-production-line: #f3d4b3; --status-installation: #1e7e34; --status-installation-bg: #e6f4ea; --status-installation-line: #b7dfc2; --status-termine: #15692c; --status-termine-bg: #dcefe1; --status-termine-line: #b3ddbf; --status-retard: #b02a37; --status-retard-bg: #fde8e9; --status-retard-line: #f5c2c7; --status-archive: #5c676d; --status-archive-bg: #eef0f2; --status-archive-line: #d5dadd; } /* Dark Theme - Cursor Inspired Aesthetics */ [data-theme="dark"] { /* Primary Overrides — Vert d'eau (validé 2026-07) */ --primary-color: #2bb98a; /* Accent principal : icônes, liens, nav active, focus */ --primary-dark: #1b775d; /* Fond des boutons primaires (texte blanc lisible) */ --primary-light: #4fd0a3; --accent-color: #23964f; /* Vert CTA « Nouveau projet », distinct du vert d'eau */ /* Accent FOURNISSEURS — frère du vert d'eau, tiré vers le turquoise. Même R et presque même G que #2bb98a : les deux teintes ont exactement le même poids à l'écran, aucune ne domine l'autre. 7,3:1 sur la carte. */ --supplier-color: #2bbab5; --supplier-rgb: 43, 186, 181; --supplier-dark: #4fd0cb; /* en sombre, « dark » = survol plus CLAIR */ --supplier-tint: rgba(43, 186, 181, 0.14); --supplier-tint-line: rgba(43, 186, 181, 0.34); /* Deep Surface Palette - Revised for lower contrast */ --gray-50: #0e1214; /* Global Background (ardoise teintée) */ --gray-100: #151a1d; /* Card Surfaces, Header */ --gray-200: #1c2226; /* Elevated Surfaces, Hover */ --gray-300: #232b30; /* Distinct Borders */ --gray-400: #354148; /* Input Borders, Active */ --gray-500: #5c676d; /* Muted Elements */ --gray-600: #8a959b; /* Low Contrast Text */ --gray-700: #b3bcc1; /* Secondary Text */ --gray-800: #c8ced2; /* Strong Text */ --gray-900: #e7eaec; /* Primary Text */ --white: #151a1d; /* Surface mapping for legacy classes */ --sidebar-bg: #0c1013; /* Specific sidebar tone (softer contrast) */ /* Semantic Aliases */ --primary: var(--primary-color); --accent: var(--accent-color); --border-color: var(--gray-300); --card-bg: var(--gray-100); --bg-secondary: var(--gray-50); --text-primary: var(--gray-900); --text-secondary: var(--gray-700); --text-muted: var(--gray-600); /* Refonte mode sombre 2026-07 — accents vert d'eau & statuts (mêmes noms qu'en clair) */ --primary-strong: var(--primary-dark); --link: #2bb98a; --primary-tint: rgba(43, 185, 138, 0.14); --primary-tint-line: rgba(43, 185, 138, 0.34); --focus-ring: 0 0 0 3px rgba(43, 185, 138, 0.35); --bg-raised: var(--gray-200); --bg-sunken: #0b0f11; /* Listes & tableaux — en sombre, --gray-100 vaut la couleur de la CARTE : un séparateur ne doit donc jamais l'utiliser (il serait invisible). Le survol ÉCLAIRCIT la ligne (teinte vert d'eau), il ne l'assombrit pas. */ /* Les lignes sont un cran PLUS CLAIRES que la fiche : la liste se détache du fond de carte, et le trait de séparation reste franc entre chaque ligne. (Ne dépend d'aucune parité DOM, contrairement à une zébrure.) */ --row-bg: #222a30; --row-alt-bg: rgba(255, 255, 255, 0.028); --row-separator: #38454e; --row-hover-bg: rgba(32, 201, 151, 0.05); --row-selected-bg: rgba(32, 201, 151, 0.12); /* Pipeline de statuts métier — teintes sombres */ --status-devis: #62c8dd; --status-devis-bg: rgba(79,168,184,0.13); --status-devis-line: rgba(79,168,184,0.32); --status-conception: #b9a7e6; --status-conception-bg: rgba(146,118,216,0.15); --status-conception-line: rgba(146,118,216,0.35); --status-production: #ff8c2b; --status-production-bg: rgba(255,140,43,0.14); --status-production-line: rgba(255,140,43,0.34); --status-installation: #5fd08c; --status-installation-bg: rgba(46,184,92,0.13); --status-installation-line: rgba(46,184,92,0.32); --status-termine: #46a869; --status-termine-bg: rgba(70,168,105,0.13); --status-termine-line: rgba(70,168,105,0.32); --status-retard: #f28b95; --status-retard-bg: rgba(233,86,99,0.13); --status-retard-line: rgba(233,86,99,0.36); --status-archive: #9aa5ab; --status-archive-bg: rgba(148,163,171,0.13); --status-archive-line: rgba(148,163,171,0.30); /* Effects */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 12px -3px rgba(0, 0, 0, 0.6); /* Urgent / Warning tones (Dark - Glassmorphism) */ --urgent-bg: rgba(220, 53, 69, 0.15); --urgent-border: rgba(220, 53, 69, 0.4); --urgent-text: #ff8787; --urgent-bg-glass: rgba(220, 53, 69, 0.2); /* Clean Scrollbars */ scrollbar-color: var(--gray-400) var(--gray-50); } /* ===================================================================== ÉCHELLES CANONIQUES — issues de l'audit (4 workflows, 30 101 lignes) ===================================================================== AJOUT PUREMENT ADDITIF : aucun token existant n'est modifié ici, donc aucun pixel ne bouge. Ces noms sont la cible ; les anciens tokens (--spacing-*, --font-size-*, --border-radius*, --shadow-*) restent valides et sont aliasés plus bas, à valeur STRICTEMENT identique. ===================================================================== */ :root { /* 1 — ESPACEMENT · 50 valeurs constatées → 8. Le barreau 12px manquait : à lui seul il explique 1 897 déclarations codées en dur (aucun token n'existait entre 8 et 16). */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* 2 — TAILLES DE TEXTE · 86 constatées → 7 (+1 glyphe non textuel). */ --text-xs: 0.6875rem; /* 11 — plancher : badges, étiquettes */ --text-sm: 0.75rem; /* 12 — texte dense, libellés */ --text-md: 0.875rem; /* 14 — CORPS PAR DÉFAUT de l'ERP */ --text-lg: 1rem; /* 16 — titre de carte */ --text-xl: 1.125rem; /* 18 — titre de section */ --text-2xl: 1.25rem; /* 20 — titre de page */ --text-3xl: 1.5rem; /* 24 — KPI et montants uniquement */ --text-glyph: 3rem; /* 48 — glyphe d'état vide, hors hiérarchie */ /* 3 — GRAISSES ET RYTHME · 12 interlignes constatés → 4. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-wide: 0.05em; /* unique interlettrage d'étiquette */ --tracking-tight: -0.01em; /* grands nombres ≥ 20px */ --font-sans: var(--font-family); /* 4 — RAYONS · 42 constatés → 6. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --radius-round: 50%; /* 5 — BORDURES · 331 signatures constatées → 3 épaisseurs + 1 composite. */ --border-width: 1px; --border-width-thick: 2px; --border-width-accent: 3px; --border-hairline: var(--border-width) solid var(--border-color); /* 6 — ÉLÉVATION · 172 ombres constatées → 5 niveaux. Repos / survol / flottant / modale. */ --elev-0: none; --elev-1: 0 1px 2px rgba(16, 32, 40, 0.05), 0 1px 1px rgba(16, 32, 40, 0.03); --elev-2: 0 4px 12px rgba(16, 32, 40, 0.08), 0 1px 3px rgba(16, 32, 40, 0.05); --elev-3: 0 12px 28px rgba(16, 32, 40, 0.12), 0 2px 6px rgba(16, 32, 40, 0.06); --elev-4: 0 28px 60px rgba(16, 32, 40, 0.18), 0 4px 12px rgba(16, 32, 40, 0.08); /* 7 — CONTRÔLES · 27 hauteurs de bouton et 11 de champ constatées → 3. Bouton et champ partagent hauteur, rayon et padding : ils s'alignent. */ --control-h-sm: 28px; --control-h-md: 36px; --control-h-lg: 44px; --control-pad-x-sm: var(--space-xs); --control-pad-x: var(--space-sm); --control-pad-x-lg: var(--space-md); --control-radius: var(--radius-md); --control-gap: var(--space-xs); --control-font: var(--text-md); --control-font-sm: var(--text-sm); /* 8 — MISE EN PAGE · 4 alignements de gauche constatés → 1. DÉCISION 2026-07-27 : la page n'a AUCUNE largeur maximale. L'ERP doit se comporter comme une application en plein écran, sur portable comme sur 32 pouces — une colonne centrée entre deux marges vides, c'est une mise en page de site vitrine. La place gagnée sert à afficher PLUS DE COLONNES (les grilles sont en auto-fill), pas des colonnes plus larges. Ce sont donc les CONTRÔLES qui sont plafonnés, jamais la page. */ --page-pad-x: var(--space-xl); --page-pad-y: var(--space-lg); --page-gap: var(--space-lg); --section-gap: var(--space-lg); --grid-gap: var(--space-md); --card-min: 320px; /* seuil de colonne des grilles : c'est lui qui fait gagner des colonnes */ --field-max: 460px; /* un champ isolé plus large ne se lit plus, il se scanne mal */ --prose-max: 72ch; /* uniquement les blocs de texte suivi, rares dans un ERP */ --card-pad: var(--space-md); --card-pad-lg: var(--space-lg); --card-radius: var(--radius-lg); --card-head-h: 44px; --block-header-h: 48px; --toolbar-h: 48px; --sticky-top: var(--header-height); /* 9 — ESPACEMENTS INTERNES (anatomie des sous-div). */ --gap-label: var(--space-2xs); --gap-icon: var(--space-2xs); --gap-inline: var(--space-xs); --gap-inline-tight: var(--space-2xs); --gap-blocks: var(--space-sm); --gap-stack: var(--space-md); --gap-section: var(--space-lg); --gap-tight-stack: var(--space-3xs); --pad-body: var(--space-md); --row-lead-size: 32px; /* 10 — MOUVEMENT · le mouvement doit RÉPONDRE, jamais divertir. */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-med: 240ms; --dur-slow: 380ms; --ease-out: cubic-bezier(.22, .8, .28, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --lift-sm: translateY(-1px); --lift-md: translateY(-2px); --press: translateY(1px); /* 11 — COULEURS DE DONNÉES — À PRÉSERVER, JAMAIS UNIFORMISER. Elles portent une INFORMATION (catégorie de coût). Les rendre monochromes détruirait la lecture des graphiques. */ --data-main-oeuvre: #3498db; --data-panneaux: #2ecc71; --data-quincaillerie: #e67e22; --data-finitions: #9b59b6; --data-transport: #f1c40f; --data-divers: #95a5a6; } /* Élévation adaptée au mode sombre (les ombres claires y sont invisibles). */ [data-theme="dark"] { --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.18); --elev-2: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.28); --elev-3: 0 14px 32px rgba(0, 0, 0, 0.50), 0 3px 8px rgba(0, 0, 0, 0.32); --elev-4: 0 30px 64px rgba(0, 0, 0, 0.62), 0 6px 16px rgba(0, 0, 0, 0.42); } /* Mise en page : adaptations aux 3 ruptures retenues (768 / 1024 / 1440). 18 valeurs de breakpoint étaient en circulation. */ @media (max-width: 1024px) { :root { --page-pad-x: var(--space-lg); --grid-gap: var(--space-sm); } } @media (max-width: 768px) { :root { --page-pad-x: var(--space-md); --page-pad-y: var(--space-md); --section-gap: var(--space-md); --card-pad: var(--space-sm); } }