/* * Tokens du système de design v2 — source de vérité unique (DESIGN.md §2-§4). * Aucune couleur en dur dans les gabarits : tout passe par ces variables. * v2 « l'app posée sur la table » : canvas gris chaud, surfaces flottantes * à ombre douce, pilules. Thème sombre : [data-theme="dark"] sur , * prefers-color-scheme respecté au premier chargement (DESIGN.md §2). */ /* Police unique : Geist, auto-hébergée (pas de CDN — exigence RGPD). */ @font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* Mode clair (défaut) — gris chauds « pierre », jamais de blanc posé sur du presque-blanc : le canvas se distingue franchement des surfaces. */ --bg-app: #F2F1EF; --bg-surface: #FFFFFF; --bg-raised: #F6F5F3; --bg-inset: #EBEAE7; --text-primary: #1B1B18; --text-secondary: #63635D; /* Le tertiaire reste AA (4,6:1) : métadonnées et légendes, pas de décor. */ --text-tertiary: #75756F; /* Sous AA, réservé aux placeholders et aux éléments désactivés — jamais un texte porteur (DESIGN.md §8). */ --text-faint: #A3A29B; /* Bordures en alpha : elles se fondent dans n'importe quel fond au lieu de découper l'écran en zones. */ --border: rgb(27 27 24 / 0.07); --border-strong: rgb(27 27 24 / 0.14); --accent: #1B1B18; --accent-contrast: #FFFFFF; --focus-ring: rgb(27 27 24 / 0.35); /* Couleur de la **structure**, distincte de l'accent du produit : elle marque ce qui lui appartient — la bande d'en-tête d'un tableau de production, et demain le papier, le lien famille, les titres mis en avant (PLAN §54). Surchargée par `apps/core/marque.py` quand la structure a posé la sienne dans ses paramètres ; à défaut, elle vaut l'accent du thème, et la bande reste lisible chez tout le monde. Le texte posé dessus est **déduit**, jamais choisi. */ --marque: #1B1B18; --marque-contrast: #FFFFFF; /* Couleurs sémantiques — les seules couleurs des écrans de travail (DESIGN.md §2), désaturées d'un cran par rapport à la v1. */ --danger: #C4372B; --warning: #B96D12; --success: #2E7D46; --info: #3563B0; /* Surfaces sémantiques : fond poudré + texte foncé de la même famille (pastilles d'état, bandeaux d'issue). Contrastes vérifiés ≥ 5:1. */ --success-surface: #E5F2E8; --success-texte: #256A3E; --danger-surface: #FBECE9; --danger-texte: #9F2A20; --warning-surface: #FBF0DC; --warning-texte: #8A5A10; --info-surface: #E7EEF9; --info-texte: #274F94; /* Décor — la chaleur des références, bornée par DESIGN.md §14 Q9 : connexion, premiers pas, états vides, célébrations. Jamais dans un tableau, une fiche ou un formulaire. */ --decor-peche: #F7E7DA; --decor-ciel: #E2EAF3; --decor-sauge: #E6EEE3; /* Typographie */ --font-sans: "Geist", "DM Sans", system-ui, sans-serif; /* Chaînes à recopier caractère par caractère (clés, codes de secours) : une chasse fixe distingue 0/O et 1/l, et aligne les colonnes. */ --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* Rayons (DESIGN.md §4) — la pilule est la forme des actions. */ --radius-control: 10px; /* inputs, selects, chips carrées */ --radius-card: 14px; /* cartes, menus flottants */ --radius-modal: 18px; /* modales, panneaux */ --radius-pill: 999px; /* boutons, pastilles, segmented */ /* Profondeur douce — deux niveaux et pas un de plus (DESIGN.md §2). Si on remarque l'ombre, elle est trop forte. */ --shadow-card: 0 1px 2px rgb(23 20 14 / 0.04), 0 2px 10px rgb(23 20 14 / 0.04); --shadow-float: 0 2px 8px rgb(23 20 14 / 0.06), 0 16px 40px -12px rgb(23 20 14 / 0.18); /* Grille 4pt */ --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; /* Layout back-office */ --sidebar-width: 248px; --topbar-height: 52px; --content-max-width: 1200px; /* Transitions : 120-150ms ease-out, jamais au-delà de 200ms */ --transition: 140ms ease-out; /* * Palette catégorielle — la seule du produit, partagée par tout ce qui a * besoin de distinguer des catégories sans hiérarchie entre elles : les * tournées sur la carte de planification, les formules de menu sur le * calendrier. Une seule palette, pas une par écran. * * Elle ne contredit pas « la couleur est une information » (DESIGN.md §1) : * ici la teinte **est** l'information — elle dit à quelle tournée un arrêt * appartient, ou quelle formule un jour propose. * * Trois règles la tiennent : * 1. **Jamais seule.** Le nom est toujours écrit à côté. * 2. **Distincte des quatre sémantiques.** La couleur catégorielle habille * une identité, l'état habille une pastille sémantique. * 3. **Le rouge est réservé.** Rien de catégoriel ne peut être rouge. * v2 : teintes réchauffées d'un cran pour vivre avec les gris pierre. * v3 (25 août 2026) : plus vives pour distinguer les tournées sur la * carte de planification — demande du porteur après l'ajout de la * couleur choisie par tournée. Le gain de saturation fait descendre le * contraste texte/blanc à 3,9:1 pour les huit teintes (sous les 4,5:1 * visés ailleurs) ; seul un usage en texte existe * (`.optimiser-comparaison__propose`, 12px), accepté en connaissance * de cause plutôt que de garder une teinte moins vive pour ce seul cas. */ --categorielle-1: #2B7FEE; --categorielle-2: #0C9083; --categorielle-3: #CB6410; --categorielle-4: #A25DF2; --categorielle-5: #0C944C; --categorielle-6: #EE2F85; --categorielle-7: #6A8C0B; --categorielle-8: #6674F3; /* Échelle séquentielle — une grandeur qui n'a pas d'identité mais une **intensité** : l'âge d'une créance, un volume. Un seul ton qui fonce (DESIGN.md §6). Des teintes catégorielles à sa place feraient croire à trois choses différentes là où il y en a une qui s'aggrave. Le rouge reste réservé à ce qui coûte déjà, y compris ici. */ --sequentiel-1: #DFE7F3; --sequentiel-2: #B9CBE7; --sequentiel-3: #8DAAD9; --sequentiel-4: #5C82C0; --sequentiel-5: #2F5A9E; /* Le voile du hero d'accueil (DESIGN.md §8) : la photo passe dessous, le texte garde son contraste calculé. Opaque à gauche, où vivent le bonjour et le montant en jeu ; presque transparent à droite, où l'image a le droit d'exister. Un dégradé et non une opacité globale — voiler l'image entière la rendrait terne partout sans rendre le texte lisible nulle part. */ --hero-voile: linear-gradient( 100deg, rgb(255 255 255 / 0.98) 0%, rgb(255 255 255 / 0.94) 34%, rgb(255 255 255 / 0.62) 62%, rgb(255 255 255 / 0.28) 100% ); } [data-theme="dark"] { --bg-app: #131312; --bg-surface: #1D1D1B; --bg-raised: #262624; --bg-inset: #0E0E0D; --text-primary: #EDECE8; --text-secondary: #A5A49E; --text-tertiary: #87867F; --text-faint: #5C5B55; --border: rgb(237 236 232 / 0.08); --border-strong: rgb(237 236 232 / 0.16); --accent: #EDECE8; --accent-contrast: #1B1B18; --focus-ring: rgb(237 236 232 / 0.4); --marque: #EDECE8; --marque-contrast: #1B1B18; /* En sombre, le voile fonce au lieu d'éclaircir — et il couvre plus : une photo de plein soleil sur une surface sombre éblouit, et c'est l'écran qu'on ouvre à sept heures du matin. */ --hero-voile: linear-gradient( 100deg, rgb(29 29 27 / 0.98) 0%, rgb(29 29 27 / 0.95) 34%, rgb(29 29 27 / 0.78) 62%, rgb(29 29 27 / 0.55) 100% ); /* Sémantiques désaturées en sombre */ --danger: #F58B80; --warning: #F0B455; --success: #7BC894; --info: #8FB4E8; /* En sombre, le rapport s'inverse : le fond devient une teinte sourde et c'est le texte qui s'éclaircit. Reprendre les pastels du mode clair donnerait un bloc lumineux qui brûlerait la page. */ --success-surface: #1C2F22; --success-texte: #99D4AC; --danger-surface: #3A211D; --danger-texte: #F0A9A0; --warning-surface: #38290F; --warning-texte: #EFC178; --info-surface: #1D2838; --info-texte: #A9C4EC; /* Le décor s'éteint presque en sombre : des teintes sourdes, jamais des pastels lumineux. */ --decor-peche: #33281F; --decor-ciel: #20262E; --decor-sauge: #232B21; /* Catégorielle éclaircie : les teintes du mode clair s'enfoncent dans le fond sombre — un tracé qu'on ne suit plus des yeux ne dit plus rien. */ --categorielle-1: #60A5FA; --categorielle-2: #34D399; --categorielle-3: #FB923C; --categorielle-4: #A78BFA; --categorielle-5: #22D3EE; --categorielle-6: #F472B6; --categorielle-7: #A3E635; --categorielle-8: #818CF8; /* En sombre l'échelle s'éclaircit au lieu de foncer : c'est le contraste avec le fond qui porte l'intensité, pas la luminosité absolue. */ --sequentiel-1: #26364F; --sequentiel-2: #33517E; --sequentiel-3: #4468A0; --sequentiel-4: #5386C8; --sequentiel-5: #7BB0FA; /* L'élévation vient surtout de la teinte de surface ; l'ombre appuie. */ --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 10px rgb(0 0 0 / 0.25); --shadow-float: 0 2px 8px rgb(0 0 0 / 0.35), 0 16px 40px -12px rgb(0 0 0 / 0.6); } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }