/* ============================================================================ Beaver — jetons du système de conception T-UX-1 · le système de conception Beaver, adapté à un SaaS d'exploitation. UN SEUL SYSTÈME, PAS DEUX ------------------------- Ce fichier existait déjà (DESIGN-01), avec 69 variables consommées par douze feuilles. T-UX-1 ne crée pas de fichier parallèle : il REMPLACE les valeurs derrière les noms existants (`--bg-canvas`, `--bg-surface`, `--text-primary`…) et n'ajoute un nom que lorsqu'aucun ne porte le rôle — le dégradé de marque, le violet des données, l'orange d'accent vif, la police d'affichage. Chaque variable neuve est justifiée par un RÔLE, jamais par une couleur. CE QUI VIENT DU KIT, ET CE QUI N'EN VIENT PAS ---------------------------------------------- Le kit est une source de JETONS, pas une identité. On reprend ses couleurs, sa typographie, ses espacements, ses rayons, ses ombres, ses formes de composants et son dégradé de signature. On ne reprend ni logo, ni mot-symbole, ni image, ni nom d'entreprise : ce fichier n'en cite aucun. DEUX « AUBERGINES », UNE DÉCISION --------------------------------- Le kit porte deux violets sombres proches : `#5E1A4D` et `#4A1340`. Le premier est l'AUBERGINE de titre et de bouton structurant ; le second est RÉSERVÉ AU SURVOL de ce bouton. Ne pas les intervertir : le survol plus sombre que le repos est ce qui fait lire « pressé ». L'INTERFACE MÉTIER RESTE CALME ------------------------------ Le dégradé de marque n'apparaît qu'au filet supérieur de la coquille, sur les éléments de marque, sur au plus un bouton de haute emphase par page et sur quelques séparateurs. Le fond de page est un gris à peine violet, les cartes sont blanches, les tableaux restent des tableaux. ============================================================================ */ :root { /* ── Fonds ────────────────────────────────────────────────────────────── Un fond de page très clair, une carte blanche, un creux gris. Le gris « carte » du kit (#E7E6E6) sert aux zones enfoncées, pas aux cartes : dans un écran d'exploitation dense, une carte grise sur fond gris ne se détache plus. */ --bg-canvas: #F6F5F7; /* fond de page */ --bg-surface: #FFFFFF; /* cartes, panneaux, tableaux */ --bg-surface-muted: #EDECEF; /* en-têtes de tableau, zones secondaires */ --bg-surface-sunken: #E7E6E6; /* creux : pistes de barres, champs désactivés */ /* La barre latérale est CALME : blanche, bordée, texte fusain. L'élément actif se signale par l'orange d'accent, pas par une colonne violette. */ --bg-sidebar: #FFFFFF; --bg-sidebar-hover: #F6F5F7; --bg-sidebar-active: #FDEBDC; /* orange très clair : l'entrée active */ /* « Inverse » = ce sur quoi le texte est blanc : l'aubergine structurante. */ --bg-inverse: #5E1A4D; /* ── Texte ────────────────────────────────────────────────────────────── Trois niveaux du kit (#2A2330 / #4A4452 / #6E6878) et un quatrième pour les métadonnées, qui existait déjà et reste distinct à l'écran. */ --text-primary: #2A2330; --text-secondary: #4A4452; --text-muted: #6E6878; /* T-UX-7 — le quatrième niveau (#9B96A3) ne venait pas du kit et faisait 3,0:1 sur blanc : illisible au sens AA pour du texte, et axe le disait sur chaque écran (horodatages, méta, légendes). Le kit fournit son niveau le plus clair, #6E6878 (5,36 sur blanc, 4,94 sur le fond de page) : c'est lui. La hiérarchie tient par la taille et la graisse. */ --text-faint: #6E6878; /* horodatages, métadonnées techniques */ --text-inverse: #FFFFFF; /* sur aubergine, sur orange, sur dégradé */ --text-inverse-muted: #D9A9CB; /* second niveau sur fond aubergine */ /* Le texte de la barre latérale a ses propres rôles : elle n'est plus inversée, mais elle garde une hiérarchie à elle. */ --sidebar-text: #4A4452; --sidebar-text-muted: #6E6878; --sidebar-text-active:#A8350C; /* l'entrée active, sur l'orange pâle : #C43E0F n'y fait que 4,48 */ /* ── Bordures ───────────────────────────────────────────────────────────*/ --border-default: #DEDCE2; --border-subtle: #EDECEF; /* T-UX-8 — WCAG 1.4.11 (décision du propriétaire : l'accessibilité prime) : la LIMITE d'un composant interactif (champ, sélecteur, bouton, pagination, filtre) tient 3:1 sur blanc ET sur le fond de page. Le kit n'a aucun gris qui y arrive (#9B96A3 = 2,88 / 2,65) ; #918C9A est le plus clair de la même teinte qui tienne (3,27 / 3,01). Les filets DÉCORATIFS (cartes, panneaux, lignes de tableau, séparateurs, badges non interactifs) gardent `--border-default` : ce ne sont pas des limites de composants. */ --border-control: #918C9A; /* limite d'un contrôle interactif, 3:1 */ --border-strong: #6E6878; /* survol d'un contrôle : plus sombre que sa limite (5,36) */ --border-inverse: #DEDCE2; /* séparateurs de la barre latérale, désormais claire */ /* ── Marque ───────────────────────────────────────────────────────────── Les tons du dégradé de signature, nommés par rôle. Ils ne structurent pas l'interface ; ils la signent, aux endroits nommés en tête de fichier. */ --brand-aubergine: #5E1A4D; /* titres de page, bouton structurant */ --brand-aubergine-hover: #4A1340; /* survol du bouton structurant, et rien d'autre */ --brand-purple: #63114D; /* départ du dégradé */ --brand-magenta: #8E2C7B; /* milieu du dégradé, accent secondaire */ --brand-pink: #C16BA5; /* milieu du dégradé */ --brand-coral: #E88D6B; /* transition du dégradé */ --data-violet: #503078; /* CHIFFRES CLÉS — jamais du texte courant */ --gradient-brand: linear-gradient(90deg, #63114D, #8E2C7B 28%, #C16BA5 50%, #E88D6B 72%, #F5821F); --gradient-orange: linear-gradient(90deg, #E05206, #F5821F); --brand-rule-height: 3px; /* le filet dégradé en haut de la coquille */ /* ── Couleurs sémantiques ─────────────────────────────────────────────── L'orange est LA couleur d'action : bouton primaire, lien, focus, élément actif. Employée avec parcimonie — un seul bouton primaire par page. */ --accent: #E05206; --accent-hover: #C43E0F; --accent-bright: #F5821F; /* fin du dégradé, orange vif de haute emphase */ --accent-subtle: #FDEBDC; /* T-UX-7 — ACCESSIBILITÉ (WCAG 2.1 AA, décision du propriétaire du 4 octobre 2026) : la conformité prime sur la valeur littérale du kit pour les RÔLES DE TEXTE ; l'orange #E05206 reste l'accent de marque, NON TEXTUEL (filets, dégradé, anneau de focus — 3,90:1 sur blanc tient le 3:1 d'un indicateur). Mesuré : #E05206 en texte sur blanc = 3,90, sur le fond de page = 3,59 ; échec pour du texte courant. #C43E0F (le survol du kit) = 5,19 : conforme. Un test recalcule chaque couple depuis CE fichier. */ --accent-text: #C43E0F; /* tout texte orange : libellés de section, liens, boutons fantômes */ --accent-fill: #C43E0F; /* fond du bouton primaire sous texte blanc (5,19:1) */ --accent-fill-hover: #A8350C; /* l'état actif du kit, au survol du primaire */ /* Sur la teinte orange pâle (#FDEBDC : badges, entrée active), #C43E0F ne fait que 4,48:1 — recalculé, pas supposé. L'état actif du kit (#A8350C) y tient 6,0:1 : c'est lui, le texte orange sur teinte. */ --accent-text-on-tint:#A8350C; --success: #5BA130; --success-subtle: #EEF6E8; /* Le vert n'est JAMAIS une couleur de texte sur fond clair : #5BA130 sur blanc = 3,19. Quand un texte vert est indispensable (badges d'état, verdict « prête »), cette nuance assombrie du vert du kit tient 4,5:1 : #3B6B1F sur blanc = 6,19, sur #EEF6E8 = 5,55, sur le fond de page = 5,70. */ --success-text: #3B6B1F; --warning: #F5821F; --warning-subtle: #FDEBDC; /* Texte d'avertissement sur fond clair : l'orange vif ne contraste pas assez ; on prend l'orange sombre. Consommé par la feuille des campagnes, qui le référençait SANS qu'il soit défini — mesuré par le garde de T-UX-1. */ --warning-text: #C43E0F; --danger: #C0392B; --danger-subtle: #F8E6E3; /* ── Rayons ───────────────────────────────────────────────────────────── 8 px boutons et champs, 16 px cartes et panneaux, 999 px badges. Le rayon « xs » reste pour les pastilles de texte et les touches clavier. */ --radius-xs: 4px; --radius-sm: 8px; /* boutons, champs */ --radius-md: 8px; --radius-lg: 16px; /* cartes, panneaux, modales */ --radius-pill: 999px; /* badges */ /* ── Espacement ───────────────────────────────────────────────────────── Échelle 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Les pas 20 et 40 restent : douze feuilles les consomment déjà. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* ── Typographie ──────────────────────────────────────────────────────── Quicksand 600/700 pour les titres de page, Open Sans pour tout le reste. Les deux sont AUTO-HÉBERGÉES (`fonts.css`, `frontend/fonts/`) : aucun appel à un serveur de polices tiers en production. Le monospace reste RÉSERVÉ aux données techniques : identifiants, horodatages, versions. Pas au texte courant. */ --font-display: 'Quicksand', 'Trebuchet MS', 'Segoe UI', sans-serif; --font-ui: 'Open Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; /* L'échelle reste DENSE : un écran d'exploitation se lit en tableau, pas en page de site. Seuls le titre de page et le chiffre clé grandissent. */ --text-2xs: 10px; /* étiquettes techniques, méta */ --text-xs: 11px; /* badges, légendes */ --text-sm: 12px; /* navigation, cellules denses */ --text-base: 13px; /* corps de tableau */ --text-md: 14px; /* corps */ --text-lg: 16px; /* sous-titres */ --text-title: 30px; /* titre de page — Quicksand, aubergine */ --text-data: 42px; /* chiffre clé — Open Sans gras, violet des données */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; /* libellés de section (eyebrow), en-têtes de tableau */ /* ── Mise en page ───────────────────────────────────────────────────────*/ --sidebar-expanded: 258px; --sidebar-collapsed: 68px; --topbar-height: 52px; --content-max: 1560px; /* ── Ombres ───────────────────────────────────────────────────────────── Teintées d'aubergine, douces, toujours extérieures. Ni verre dépoli, ni flou d'arrière-plan, ni ombre lourde. */ --shadow-card: 0 2px 8px rgba(74, 19, 64, .08); --shadow-popover: 0 4px 16px rgba(74, 19, 64, .12); --shadow-modal: 0 10px 36px rgba(74, 19, 64, .18); /* ── Mouvement ────────────────────────────────────────────────────────── 0,2 s ease sur survol et focus. Rien de rebondissant, rien de décoratif. */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; } /* Respecter la préférence système. Une interface qui ignore prefers-reduced-motion est inutilisable pour une partie des utilisateurs. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 1ms; --transition-normal: 1ms; } } /* ── Utilitaires typographiques ──────────────────────────────────────────── Trois classes, pas trente. Elles existent parce qu'elles seront répétées sur chaque écran ; tout le reste appartient aux composants. */ .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-normal); } /* Chiffres alignés en colonne dans les tableaux : sans cela, une colonne de scores « saute » d'une ligne à l'autre et se lit mal. */ .u-tnum { font-variant-numeric: tabular-nums; } /* Libellé de section (eyebrow) : Open Sans gras, orange DE TEXTE, petites capitales. */ .u-label { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); font-weight: 700; }