/* ============================================================================ gt-tokens.css — PALETTE UNIQUE de GestTech. ---------------------------------------------------------------------------- Ce fichier est la seule source de vérité pour les couleurs, rayons et ombres. Les trois systèmes historiques (modern-style.css, gesttech-shared.css et le :root inline de technicien/tech_layout.php) définissaient chacun leur propre vocabulaire pour des couleurs quasi identiques, et gesttech-ui.css imposait ensuite l'accent orange à coups de !important. Désormais ils ALIASENT tous ces tokens : leurs noms de variables historiques sont conservés — donc aucune page n'est à réécrire — mais ils pointent tous vers les mêmes valeurs. Changer une couleur ici la change partout. À charger EN PREMIER, avant les autres feuilles. ========================================================================== */ /* Une seule fois pour toute l'application. Ces deux familles n'étaient jusqu'ici chargées QUE par le thème sombre : l'application changeait donc de police en changeant de thème. */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); :root { /* ── Accent : la couleur d'action de GestTech ─────────────────────────── */ --gt-accent: #EA580C; --gt-accent-strong: #C2410C; --gt-accent-soft: #FFF1E9; /* ── Neutres ──────────────────────────────────────────────────────────── */ --gt-canvas: #F8FAFC; /* fond de page */ --gt-surface: #FFFFFF; /* fond de carte */ --gt-sunken: #F1F5F9; /* fond en creux */ --gt-line: #E2E8F0; /* filets, bordures */ --gt-ink: #1E293B; /* texte principal */ --gt-muted: #64748B; /* texte secondaire */ /* Le tertiaire était à #94A3B8 : 2,56 de rapport sur blanc, sous le seuil lisible. Discret ne veut pas dire illisible — mesuré, pas estimé. */ --gt-faint: #7C8899; /* texte tertiaire */ /* ── Sémantique : un sens, une couleur, partout ───────────────────────── */ --gt-ok: #059669; --gt-ok-soft: #ECFDF5; --gt-warn: #D97706; --gt-warn-soft: #FFFBEB; --gt-danger: #DC2626; --gt-danger-strong: #7F1D1D; /* fond plein d'un bandeau d'alerte */ --gt-danger-soft: #FEF2F2; --gt-info: #2563EB; --gt-info-soft: #EFF6FF; /* Le droit de réponse VQSE est un état à part entière, ni retard ni validation : il lui faut sa couleur, pas un emprunt. */ --gt-violet: #7C3AED; --gt-violet-soft: #F3E8FF; /* Texte posé SUR une couleur pleine (bouton d'action, bandeau, pastille de nom). Il ne suit pas le thème : le fond sous lui est coloré dans les deux cas. Écrire var(--gt-surface) ici donnerait du texte sombre sur orange dès qu'on passe au thème sombre. */ --gt-on-accent: #FFFFFF; /* Fond de la barre supérieure : translucide, parce qu'elle est collante et que le contenu défile dessous. Écrit en dur en blanc, il faisait une bande claire en haut de chaque page en thème sombre. */ --gt-topbar-bg: rgba(255,255,255,.92); /* Texte posé sur une couleur SÉMANTIQUE pleine (bouton « Nouvelle dette » en ambre, onglet actif en bleu, pastille d'initiales). Il ne peut pas être blanc en permanence : en thème sombre, ces couleurs sont éclaircies — elles y servent de TEXTE sur fond foncé, pas de fond. Un aplat clair avec du blanc dessus devient illisible. On inverse donc. */ --gt-on-color: #FFFFFF; /* Un cran EN DESSOUS du « soft » : teinter une ligne de tableau sans la transformer en pavé de couleur. Les fonds de ligne et les survols ne jouent pas dans la même catégorie que les pastilles. */ --gt-ok-wash: #F4FDF8; --gt-warn-wash: #FFFCF2; --gt-danger-wash: #FFF6F6; --gt-info-wash: #F7FAFF; --gt-violet-wash: #FDF8FF; /* ── Typographie ────────────────────────────────────────────────────────── Deux rôles, pas trois. Le texte courant reste dans la pile système : sur un outil consulté tous les jours, parfois en 4G depuis un camion, une police distante se paie à chaque écran et n'apporte rien à de la donnée dense. La singularité de ce produit n'est pas une police d'affichage : c'est que tout y est IDENTIFIANT ou MONTANT. Un code article (LSA1+LSAFP), un numéro de carte (0001), un numéro de transaction (AEYDLQGW), un ND — on ne les LIT pas, on les COMPARE caractère par caractère. Le chasse fixe n'est donc pas un effet « technique » : c'est ce qui rend la comparaison possible. Sept déclarations monospace différentes coexistaient dans l'application ; il n'y en a plus qu'une. */ --gt-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Deux familles, et une règle : Syne ne sert QU'AUX TITRES. C'est une grotesque large, à peine élargie — elle donne un caractère aux en-têtes sans jamais toucher aux tableaux de chiffres, où seule compte la lecture. DM Sans porte le texte courant. Le repli système reste en place : si la police distante n'arrive pas, la page reste juste, seulement moins typée. */ --gt-display: 'Syne', ui-sans-serif, system-ui, -apple-system, sans-serif; --gt-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ── Formes ───────────────────────────────────────────────────────────── */ --gt-radius: 14px; --gt-radius-sm: 10px; --gt-radius-xs: 7px; --gt-shadow: 0 1px 2px rgba(20,25,34,.04), 0 8px 24px rgba(20,25,34,.06); --gt-shadow-sm: 0 1px 2px rgba(20,25,34,.06); --gt-shadow-lg: 0 12px 32px rgba(20,25,34,.12); } /* ═══ ALIAS — déclarés sur BODY, et c'est essentiel ═══════════════════════════ Une variable qui en cite une autre est résolue LÀ OÙ ELLE EST DÉCLARÉE, pas là où elle est utilisée. Ces alias vivaient sur :root, au-dessus du qui porte la palette sombre : « --text: var(--gt-ink) » y capturait donc l'encre CLAIRE, et la gardait même en thème sombre. Résultat, des titres noirs sur fond noir sur une dizaine de pages — et une longue feuille de rustines !important écrite pour les rattraper. Déclarés sur body, ils se résolvent sur l'élément qui porte, lui, la bonne palette. Les deux thèmes en découlent sans rien dupliquer. */ body { /* ═══ ALIAS : vocabulaire de modern-style.css ═════════════════════════════ Ces noms restent utilisés par une cinquantaine de pages. Ils ne sont plus définis ailleurs : ils dérivent de la palette ci-dessus. */ --primary: var(--gt-accent); --primary-dark: var(--gt-accent-strong); --primary-light: #FB923C; --secondary: var(--gt-info); --success: var(--gt-ok); --warning: var(--gt-warn); --danger: var(--gt-danger); --info: var(--gt-info); --bg-primary: var(--gt-canvas); --bg-secondary: var(--gt-surface); --bg-card: var(--gt-surface); --bg-dark: var(--gt-ink); --text-primary: var(--gt-ink); --text-secondary: var(--gt-muted); --text-muted: var(--gt-faint); --text-white: #FFFFFF; --border-color: var(--gt-line); --border-radius: var(--gt-radius); --border-radius-sm: var(--gt-radius-sm); --border-radius-lg: 16px; --shadow-sm: var(--gt-shadow-sm); --shadow: var(--gt-shadow); --shadow-md: var(--gt-shadow); --shadow-lg: var(--gt-shadow-lg); /* ═══ ALIAS : vocabulaire de gesttech-shared.css ══════════════════════════ */ --blue: var(--gt-info); --indigo: var(--gt-accent); /* l'indigo historique devient l'accent */ --green: var(--gt-ok); --amber: var(--gt-warn); --red: var(--gt-danger); --purple: #8B5CF6; --border: var(--gt-line); --bg: var(--gt-canvas); --card: var(--gt-surface); --text: var(--gt-ink); --muted: var(--gt-muted); --radius: var(--gt-radius); --radius-sm: var(--gt-radius-sm); --radius-lg: 16px; /* ═══ ALIAS : vocabulaire de gesttech-ui.css ══════════════════════════════ */ --ui-radius: var(--gt-radius); --ui-radius-sm: var(--gt-radius-sm); --ui-shadow: var(--gt-shadow); /* ═══ ALIAS : espace technicien (technicien/tech_layout.php) ══════════════ */ --accent: var(--gt-accent); --sidebar-bg: var(--gt-ink); } /* ── Thème sombre ────────────────────────────────────────────────────────── Valeurs reprises de css/gesttech-dark.css, qui posait ces couleurs en dur sans passer par des variables. Les deux fichiers décrivent donc désormais le MÊME thème sombre : gesttech-dark.css habille les composants, ces tokens alimentent tout le reste. */ /* Portée par (posée dans le , avant toute peinture) ET par : la première évite que les blocs se dessinent en clair puis basculent, la seconde garde compatible le JavaScript existant. « :root.dark-theme » l'emporte sans ambiguïté sur « :root ». */ :root.dark-theme, body.dark-theme { --gt-canvas: #151A26; /* fond de page */ --gt-surface: #1E2533; /* fond de carte */ --gt-sunken: #252D3D; /* fond en creux */ --gt-line: #252D3D; /* filets */ --gt-ink: #E2E8F4; /* texte principal */ /* Sur fond sombre, un texte gris se lit BEAUCOUP moins bien que le même gris sur fond clair : l'œil, ébloui par le fond en thème clair, est au contraire dilaté ici, et les nuances basses s'écrasent. Ces deux valeurs partaient de 3,56 et 2,47 de rapport — secondaire limite, tertiaire illisible. Elles montent à 7,4 et 5,9, l'écart entre les deux étant conservé pour que la hiérarchie reste perceptible. */ --gt-muted: #A8B5CE; /* texte secondaire */ --gt-faint: #93A1BC; /* texte tertiaire */ /* En sombre, l'accent est éclairci pour rester lisible sur fond foncé — c'est la nuance qu'utilise déjà gesttech-dark.css. */ --gt-accent: #FF6B35; --gt-accent-strong: #FF9A6C; --gt-accent-soft: #3A1D0C; --gt-ok: #4ADE80; --gt-ok-soft: #0C2A20; --gt-warn: #FCD34D; --gt-warn-soft: #2E220A; --gt-danger: #FCA5A5; --gt-danger-soft: #331416; --gt-info: #93C5FD; --gt-info-soft: #12213D; --gt-violet: #C4B5FD; --gt-violet-soft: #241A3D; /* Les couleurs sémantiques sont claires ici : sur un aplat, c'est le TEXTE qui doit être sombre. */ --gt-on-color: #151A26; --gt-topbar-bg: rgba(26,31,46,.92); /* Les lavis suivent : à peine décollés du fond de carte (#1E2533). */ --gt-ok-wash: #17251F; --gt-warn-wash: #241F14; --gt-danger-wash: #271A1C; --gt-info-wash: #1A2130; --gt-violet-wash: #221D31; --gt-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --gt-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --gt-shadow-lg: 0 12px 32px rgba(0,0,0,.45); --bg-dark: #0B0F14; }