/* ========================================================================== SoftiField v2 - jetons de la charte SoftiROB -------------------------------------------------------------------------- Bloc 1 : copie a l'identique des jetons de design-system.html (source de verite visuelle, voir doc/21-CHARTE-SOFTIROB.md). Ne rien modifier ici sans modifier la charte : une valeur qui diverge ne se voit qu'a la comparaison. Bloc 2 : jetons propres a l'application (shell, cibles tactiles, glass, contraste, surfaces posees, empilement), absents de la charte. Tout jeton de couleur du bloc 2 a sa valeur claire ET sa valeur sombre (ou un commentaire qui dit pourquoi elle ne change pas). Mode clair par defaut, sombre via [data-theme="dark"] sur (theme.js). ========================================================================== */ /* ---------- Bloc 1 : charte SoftiROB (copie) ---------- */ :root { /* Surfaces & texte */ --bg: #FFFFFF; --bg-2: #F5F5F0; --bg-3: #EAEAE2; --line: #E1E1DC; --line-strong: #BFC0B8; --ink: #0D0F0E; --ink-2: #2A2D2B; --ink-soft: #4A4D4B; --muted: #80847F; /* Sidebar - inverse selon theme (clair -> fond clair, sombre -> fond sombre) */ --sidebar-bg: #FFFFFF; --sidebar-bg-2: #F5F5F0; --sidebar-text: #0D0F0E; --sidebar-muted: #80847F; --sidebar-line: #E1E1DC; /* Canvas de l'app (different du fond du site) */ --app-canvas: #F5F5F0; /* Marque Softirob */ --brand: #0a85ff; --brand-bright: #2196FF; --brand-soft: #D2E8FF; /* 2e niveau de tint, plus leger que --brand-soft : surlignage d'une ligne ou d'une carte selectionnee, fond d'une entree de nav active */ --brand-softer: #EAF3FF; --brand-deep: #0066CC; /* Accent rare */ --ble: #ffbf0c; --ble-deep: #C69400; --ble-soft: #FFEDB5; /* Contour (violet) - feature « trace de contour » de la page Champs uniquement. Decoratif (trait et remplissage sur imagerie satellite, poignees de sommet) : ne porte jamais de texte, donc pas de variante -ink. Sature, distinct du bleu de marque des champs enregistres. */ --contour: #A371F7; --contour-soft: #EFE7FB; /* Severite */ --warning: #E89E1F; --danger: #D43838; /* On-color (jamais ne change entre themes) */ --on-brand: #FFFFFF; --on-ble: #0D0F0E; /* Bleu institutionnel (rare : liens, accents secondaires). --link porte du texte : 4,77:1 sur --bg blanc en clair, 6,5:1 sur --bg sombre en nuit (>= 4,5:1). Sur --bg-2 clair il tombe a 4,35:1 : le reserver aux fonds --bg. --sb-blue est un aplat de marque, pas du texte. */ --sb-blue: #1B3A8C; --link: #1B6FE0; /* Typo */ --display: 'Bricolage Grotesque', system-ui, sans-serif; --sans: 'Public Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; /* Rayons */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; } /* ============= DARK MODE ============= */ [data-theme="dark"] { --bg: #14181A; --bg-2: #1A1F22; --bg-3: #242A2E; --line: #2A3134; --line-strong: #3D454A; --ink: #F2F4F2; --ink-2: #D5DBD8; --ink-soft: #A8B0AC; --muted: #707670; --sidebar-bg: #0B0E0D; --sidebar-bg-2: #14181A; --sidebar-text: #F2F4F2; --sidebar-muted: #7E817C; --sidebar-line: #1A1F22; --app-canvas: #0A0C0B; --brand-soft: rgba(10, 133, 255, 0.20); /* --brand-softer nuit : tint de marque a 10 % sur le fond sombre. --brand #0a85ff dessus reste a 4,89:1 sur --sidebar-bg (nav active lisible). */ --brand-softer: rgba(10, 133, 255, 0.10); --ble-soft: rgba(255, 191, 12, 0.20); --contour-soft: rgba(163, 113, 247, 0.20); --danger: #E84A4A; /* --contour et --sb-blue : pas d'override nuit (identiques aux deux themes, comme dans la charte) */ --link: #4FA0F2; } /* ---------- Bloc 2 : jetons d'application ---------- */ /* Schema des controles natifs (auto-remplissage, barres de defilement, light-dark() des feuilles du navigateur) : il suit le theme de l'application, pas celui du systeme. Sans lui, un champ auto-rempli devient un pave bleu clair a texte noir en theme sombre. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } :root { /* Shell : topbar 64 px (C1). ECART : sidebar a 192 px au lieu des 240 px de C2, choix de l'utilisateur (plus de place pour la carte). */ --topbar-h: 64px; --sidebar-w: 192px; /* ECART : sidebar retractable (> 1024 px), retractee par defaut, choix de l'utilisateur. Colonne d'icones aussi large que la topbar est haute : l'icone d'une entree y garde ses 12 px de padding, comme dans la colonne deployee (bordure 1, padding 8 + 12, icone 22), centree a 0,5 px pres ; elle ne bouge ni en largeur ni en hauteur a la bascule (css/app.css). */ --sidebar-w-collapsed: 72px; /* Cible tactile minimale (WCAG 2.5.5, usage en cabine) */ --tap: 44px; /* Glass sombre des panneaux flottants sur la carte (C7, B9). Toujours sombre quel que soit le theme : il flotte sur une image satellite. */ --glass: rgba(15, 18, 17, 0.92); --glass-soft: rgba(15, 18, 17, 0.85); --glass-line: #2A2D2E; --glass-ink: #F2F4F2; --glass-muted: rgba(255, 255, 255, 0.55); --glass-fill: rgba(255, 255, 255, 0.06); --glass-rule: rgba(255, 255, 255, 0.10); --glass-ink-soft: rgba(255, 255, 255, 0.85); /* Bordure d'un bouton secondaire sur glass : contraste de --line-strong sur son fond (environ 1,9:1) */ --glass-line-strong: rgba(255, 255, 255, 0.20); --glass-blur: blur(10px); /* Selection sur le glass (cellule de la couche peinte) : --brand-soft est opaque et clair en theme clair, illisible sous du texte blanc */ --glass-brand: rgba(10, 133, 255, 0.24); /* Fond opaque des listes deroulantes ouvertes depuis le glass (icon-btn--dark de la charte) */ --glass-solid: #1F2324; /* Fond teinte des messages d'erreur (zone de connexion, icone de modal danger, badge erreur). Suit --danger, qui s'eclaircit en sombre. */ --danger-soft: rgba(212, 56, 56, 0.15); /* Contraste des petits textes (WCAG 1.4.3, 4,5:1). Les jetons de la charte n'y arrivent pas ; ils restent pour les icones et filets. - --muted-ink : texte attenue (meta, sous-titre, placeholder, fil d'Ariane, libelles de section). --muted fait 3,8:1 sur --bg ; celui-ci 5,4:1 sur --bg, 5:1 sur --bg-2, 5,4:1 sur --sidebar-bg en clair, 5,5 / 5,1 / 6:1 en sombre. - --brand-fill : fond plein qui porte un texte blanc (bouton primaire, entree active, avatar, bouton segmente actif). Blanc sur --brand : 3,6:1 ; sur ce bleu a peine plus profond : 4,6:1. --brand reste pour les bordures, anneaux, icones et fonds sans texte. - --danger-fill : fond du bouton danger. --danger s'eclaircit en sombre (texte d'erreur sur fond sombre) : blanc dessus 3,8:1 ; ce fond ne bouge pas (4,75:1). - --warning-ink : icone ou texte d'avertissement. --warning sur blanc : 2,25:1 ; en sombre il suffit (7,9:1). - --brand-ink : texte de marque sur --bg ou sur --brand-soft (badge, etiquette, onglet actif). --brand-deep ne change pas en sombre et tombe a 2,5:1 sur la teinte sombre ; celui-ci 5,4:1 sur --brand-soft en clair, 6:1 en sombre. */ --muted-ink: #676B66; --brand-ink: #0059B3; /* --brand-fill et --danger-fill : identiques dans les deux themes. --brand-fill-deep : ombre de relief du CTA (0 3px 0) et survol d'une selection pleine. --brand-deep n'est qu'a 1,2:1 de --brand-fill, le relief disparaissait ; celui-ci garde l'ecart de la charte (1,5:1). */ --brand-fill: #0072E5; --brand-fill-deep: #0059B3; --danger-fill: #D43838; --warning-ink: #9A6500; /* Surfaces posees au-dessus du contenu (modal, toast, tiroir) : fond, bordure et ombre. En sombre, une ombre ne se voit pas sur un fond presque noir : le detachement passe par la bordure et le fond. */ --pop-bg: var(--bg); --pop-line: var(--line); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.28); /* Ombre d'une carte posee sur le canevas (carte de connexion, D1) */ --shadow-card: 0 8px 18px rgba(0, 0, 0, 0.06); /* Empilement. Le
du shell isole ses propres z-index (Leaflet monte a 1000) : ces valeurs n'ont a gagner que contre le shell lui-meme. */ --z-topbar: 10; /* Bulles de la sidebar retractee, au-dessus de la topbar et de la page */ --z-tooltip: 20; --z-backdrop: 40; --z-drawer: 50; --z-modal: 100; --z-toast: 110; } [data-theme="dark"] { --danger-soft: rgba(232, 74, 74, 0.20); --muted-ink: #8A908B; --brand-ink: #6CB4FF; --warning-ink: var(--warning); /* Toast sur --bg-3 : sur --bg il avait la couleur exacte des cartes qu'il recouvre. Bordure --line-strong : --line y fait 1,3:1. */ --pop-bg: var(--bg-3); --pop-line: var(--line-strong); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.60); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.40); }