/* * ╔══════════════════════════════════════════╗ * ║ SEiiA — Trésorerie ║ * ║ seiia.eu ║ * ║ Dark Corporate / Teal Accents ║ * ║ Brand: #0097af · #002c30 ║ * ╚══════════════════════════════════════════╝ */ /* ============================================ VARIABLES ============================================ */ :root { /* ── Tokens de MARQUE (réglables via /admin/charte-graphique) ────────── Source de vérité de l'identité visuelle d'un tenant. Une charte entreprise surcharge UNIQUEMENT ces variables ; l'override cascade ensuite sur les thèmes clair ET sombre via les dérivés ci-dessous. Ne PAS référencer --brand-* directement dans les composants : passer toujours par --gold / --bg-sidebar / --radius / --font-family. */ --brand-primary: #0097af; /* couleur d'accent principale */ --brand-primary-light: #00b8d4; --brand-primary-dark: #007a8f; --brand-sidebar: #002c30; /* fond sidebar + top-bar (teal foncé) */ --brand-radius: 12px; --brand-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Couleurs sémantiques réglables (succès / danger / avertissement / info). --green/--red/--orange/--blue en dérivent → un override cascade partout. Le mode daltonien ([data-a11y="cvd"]) les remplace par une palette sûre. */ /* Assombri le 2026-07-28 vs #10b981 : le texte BLANC des boutons/badges « succès » n'y avait que 2.54:1, très en dessous du seuil WCAG AA de 4.5:1 — même défaut que celui déjà corrigé sur --brand-danger et --brand-info. #047857 : 5.48:1. Mesure : scripts/audit_contraste.py. */ --brand-success: #047857; --brand-danger: #dc2626; /* assombri vs #ef4444 → texte blanc 4.8:1 (WCAG AA) sur boutons/badges/toasts */ --brand-warning: #f59e0b; --brand-info: #2563eb; /* assombri vs #3b82f6 → texte blanc 5.2:1 (WCAG AA) */ /* Options de mise en page (réglables IRIS — défauts = valeurs actuelles, donc zéro régression tant qu'aucune charte ne les surcharge). */ --brand-font-scale: 1; /* échelle globale du texte */ --brand-heading-weight: 700; /* graisse des titres */ --brand-line-height: 1.6; /* interlignage du corps */ --brand-card-padding: 24px; /* densité : padding des cartes */ --brand-border-width: 1px; /* épaisseur des bordures de cartes */ --brand-button-radius: 8px; /* arrondi des boutons */ /* Couleur d'identité par neurone (icônes barre modules + titres sidebar). Réglables via IRIS ; défauts = couleurs historiques (zéro régression). */ --neuro-synapse: #0097af; --neuro-axone: #7b61ff; --neuro-dendrite: #60a5fa; --neuro-soma: #34d399; /* 2026-08-19 : etait #06b6d4, a dE76 = 12.0 de --neuro-synapse — la zone bleu-cyan hebergeait 4 modules en 18 degres de teinte (synapse, flux, care, cortex). Synapse porte la marque, donc c'est flux qui bouge : vert (flux logistique), dE 23.1 du voisin le plus proche, et c'est le SEUL candidat teste a passer aussi 3:1 sur les deux fonds de tuile (3.54 / 4.07 ; l'ancien cyan etait a 1.97 en theme clair). #2563eb a ete ecarte : il vaut exactement --blue/--info, on aurait refait l'erreur « identite = couleur semantique ». ATTENTION : RH est olive (L=47) et flux vert (L=47) — meme luminosite, 23 degres d'ecart de teinte. Mesure OK, mais si l'oeil hesite, l'alternative chiffree est #16a34a (L=57, dL=12) au prix d'un lisere a 2.67 en clair. */ --neuro-flux: #15803d; --neuro-production: #fb923c; /* 2026-08-19 : etait #0097af, soit EXACTEMENT --neuro-synapse et la couleur de marque — deux modules indiscernables dans la barre laterale comme dans la fenetre des modules. Synapse garde la marque ; Care prend un teal plus fonce : meme famille (soin), dE76 = 14.8 de la marque, et le lisere des tuiles passe 3:1 dans les DEUX themes (3.31 / 4.35). */ --neuro-care: #0e7490; --neuro-sentinel: #ef4444; --neuro-cortex: #00c8ff; /* 2026-08-19 : etait #f59e0b = --warning/--orange — l'identite du module portait la couleur qui signifie « attention » partout ailleurs. Un framboise (#e11d48) avait ete essaye : dE 13.9 de --neuro-sentinel, au-dessus du seuil mais la planche de controle montrait deux rouges voisins a l'oeil pour deux modules tres utilises (RH / Qualite). Olive retenu : c'est la teinte la plus ISOLEE de la palette (dE 39.0 du voisin le plus proche, 38.3 des tokens semantiques) et elle passe 3:1 sur les deux fonds de tuile (3.55 / 4.05). Choix de distinction, pas d'evocation : aucun rose ne pouvait s'eloigner assez de Qualite. Verifier avec scripts/audit_identite_modules.py. */ --neuro-pulse: #4d7c0f; --neuro-memoire: #f0c040; --neuro-hippocampe: #14b8a6; --neuro-glia: #a78bfa; --neuro-iris: #ec4899; /* 2026-08-19 : etait #94a3b8 = EXACTEMENT --text-secondary — le module n'avait pas de couleur, il avait la teinte du texte secondaire. Bleu-ardoise : garde l'esprit « systeme » mais devient une identite (dE 20.7 de --text-muted, 23.0 de --neuro-dendrite). */ --neuro-admin: #5b7db1; /* 2026-08-19 : etait #4f46e5, a dE76 = 11.7 de --neuro-axone — deux violets quasi jumeaux, et la zone en comptait 3 (axone, glia, bolero) sur 1 degre. Axone (Commerce) est un module majeur, bolero n'est visible que des admins : c'est donc bolero qui bouge. Violet franc, dE 21.4 d'axone, 39.3 des tokens semantiques, et il passe les deux fonds de tuile (3.30 / 4.37). */ --neuro-bolero: #9333ea; --neuro-codex: #e0a458; --neuro-janus: #84cc16; --neuro-dd: #d946ef; /* 2026-08-20 : la Salle de jeux n'avait pas d'identite, elle portait var(--gold) = var(--brand-primary), donc la couleur de MARQUE — elle changeait avec le tenant au lieu d'avoir la sienne. Dans le produit par defaut cela vaut #0097af, soit EXACTEMENT --neuro-synapse (dE 0, le defaut corrige sur Care le 2026-08-19) ; chez un tenant qui a une charte c'est sa marque a lui (E-COBOT : #2E8B57, vert). Le nom « gold » est trompeur depuis que la marque par defaut est passee au cyan. Corail retenu : de tous les candidats mesures c'est le plus ISOLE (dE 27.8 de sentinel, 28.8 d'iris, 38.0 du token semantique --red) — la zone 0-20 deg etait le dernier trou de teinte large. Choix de sens autant que de mesure : le seul module non metier de la maison ne doit ressembler a aucun module metier. Contrastes dans les eaux de la palette (6.59 sur la tuile sombre, 5.56 sur la sidebar, 2.18 sur la tuile claire — au niveau des identites claires existantes : glia 2.21, dendrite 2.06). En dichromatie, ce corail s'approche de soma (deuteranopie, dE 9.5) et d'iris (tritanopie, dE 9.5) : 2 paires ajoutees aux 33 que la palette comptait deja, et les moins serrees des deux listes (les pires sont a dE 0.4 et 0.9). Verifier avec scripts/audit_identite_modules.py et scripts/audit_daltonisme.py. */ --neuro-jeux: #fb7185; /* CERVELET (2026-08-20, ADR_013), valeur MESUREE le 2026-08-21. Bronze sombre : la zone teal/cyan, violette et bleue est saturee ; le warm fonce restait libre et n'a pas de charge semantique d'alerte. audit_identite_modules : 0 paire sous le seuil de 12 en vision normale (le plus proche est codex #e0a458 a dE 35.8, meme teinte mais L 71.6 contre 36.1 ici). Le premier essai #a16207 passait aussi en vision normale, mais partageait clarte ET saturation avec pulse #4d7c0f (L~47, C~57) : seule la teinte les separait, donc ils se confondaient des qu'un daltonien perd cette information (dE 6.4 en protanopie). Descendre la clarte a 36 tranche par le canal qui SURVIT a la dichromatie : audit_daltonisme passe de 38 a 36 confusions, la paire cervelet/pulse en protanopie disparait, celle en deuteranopie remonte de 8.4 a 9.2. Contraste du titre de sidebar 5.09:1. Ne pas « harmoniser » vers un bronze plus clair sans relancer les deux audits : on retomberait sur pulse ou sur codex. */ --neuro-cervelet: #7a4a05; /* MYÉLINE — DSI & conformité. Cuivre : la conduction, et la teinte la plus distincte disponible (dE76 24,5 du module le plus proche, audit scripts/audit_identite_modules.py, seuil 12). */ --neuro-myeline: #b45309; --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-card: #1a2235; --bg-card-hover: #1f2a40; --bg-sidebar: var(--brand-sidebar); --bg-input: #1e293b; --gold: var(--brand-primary); --gold-light: var(--brand-primary-light); /* Accent des zones qui restent SOMBRES quel que soit le theme (barre laterale). --gold/--gold-light y sont inutilisables : le theme clair les assombrit pour un fond clair, et l'item de menu actif tombait a 3.50:1 (mesure). #00b8d4 sur le voile teal : 5.10:1. Suit les chartes tenant ET les palettes daltonisme via --brand-primary-light. */ /* 2026-08-20 : ECLAIRCI. `--brand-primary-light` seul suffisait dans la palette par defaut (5.10:1 sur le voile de l'item actif) mais PAS dans les modes daltonisme, qui retintent AUSSI le fond de la barre : l'item de menu actif retombait a 3.67:1 (okabe, rouge-vert) et 3.39:1 (bleu-jaune). Mesure sur le rendu, pas sur les tokens. Avec 25% de blanc : defaut 6.21, okabe 5.17, bleu-jaune 5.07 — et toute charte tenant future en beneficie. */ --sidebar-accent: color-mix(in srgb, var(--brand-primary-light) 75%, #fff); --gold-dark: var(--brand-primary-dark); --gold-glow: rgba(0, 151, 175, 0.15); /* Texte des boutons .btn-gold : suit le contraste de la couleur de marque. Défaut = texte foncé (le teal #0097af le porte bien : 5.1:1). Un tenant qui choisit une primaire FONCÉE (vert E-COBOT…) reçoit du blanc via --on-gold recalculé côté charte (charte.py::ideal_on_color). */ --on-gold: #111827; --blue: var(--brand-info); --blue-dark: #1e40af; --green: var(--brand-success); --green-dark: #047857; --red: var(--brand-danger); --red-dark: #b91c1c; --orange: var(--brand-warning); --orange-light: rgba(245, 158, 11, 0.15); --purple: #8b5cf6; /* Alias sémantiques (compatibilité templates) */ --success: var(--green); --danger: var(--red); --info: var(--blue); --warning: var(--orange); --text-primary: #f1f5f9; --text-secondary: #94a3b8; /* Contraste mesuré (scripts/audit_contraste.py, 2026-07-28) : #64748b ne donnait que 3.07:1 sur --bg-input et 3.33:1 sur --bg-card, sous le seuil WCAG AA de 4.5:1 — d'où les libellés, aides et placeholders « difficiles à lire » en mode sombre. #8593a8 : 4.69:1 au pire (champ), 5.09:1 en carte, et reste nettement plus discret que --text-secondary. */ --text-muted: #8593a8; /* Alias de compatibilite (cf. --warning-text) : sans usage, mais conserve pour que var(--text-gold) reste valide. Ne PAS supprimer comme « token mort ». */ --text-gold: var(--gold); /* #1e293b était à 1.08:1 sur --bg-card et 1.00:1 sur --bg-input : les cartes, lignes de tableau et contours de champs ne se détachaient PAS du fond. #334259 les rend visibles (1.56:1 sur carte, 1.90:1 sur la page) sans alourdir le design. NB : le seuil WCAG « non textuel » de 3:1 n'est pas atteint — l'y porter changerait franchement l'aspect, c'est un arbitrage de design, pas une correction de lisibilité. */ --border: #334259; /* Contour des CHAMPS de formulaire — composants d'interface au sens WCAG 1.4.11, donc seuil non textuel 3:1 requis (mesuré : 3.1:1 sur --bg-input, 3.3:1 sur --bg-card). Les bordures décoratives (cartes, séparateurs) restent sur --border — arbitrage design documenté ci-dessus. */ --border-input: #778699; --border-gold: rgba(0, 151, 175, 0.3); /* ── Variantes TEXTE des couleurs sémantiques (2026-07-28) ────────── --blue/--green/--red/--orange/--purple servent de FOND à du texte blanc (boutons, badges, toasts) ET de couleur de TEXTE sur les fonds de l'app. Les deux usages tirent dans des sens opposés : les éclaircir pour lire le texte casse le contraste des boutons. On sépare donc les rôles — les tokens ci-dessus restent les couleurs de SURFACE (inchangés, zéro régression), ceux-ci sont les couleurs de TEXTE. Dérivés par color-mix des tokens de MARQUE, et non figés en dur : la charte graphique d'un tenant continue ainsi de cascader jusqu'ici. Pourcentages choisis pour atteindre 4.5:1 (WCAG AA) sur le pire fond du thème — mesuré par scripts/audit_contraste.py. */ --blue-text: color-mix(in srgb, var(--brand-info) 70%, #fff); /* 4.83:1 */ --green-text: color-mix(in srgb, var(--brand-success) 60%, #fff); /* 5.65:1 */ --red-text: color-mix(in srgb, var(--brand-danger) 70%, #fff); /* 4.54:1 */ --orange-text: var(--orange); /* 6.81:1 déjà conforme */ --purple-text: color-mix(in srgb, var(--purple) 80%, #fff); /* 4.74:1 */ --info-text: var(--blue-text); --success-text: var(--green-text); --danger-text: var(--red-text); /* Alias de compatibilite : aucun usage aujourd'hui, mais la famille -text est systematique (green/red/blue/orange/purple) et un dev qui ecrit var(--warning-text) par symetrie doit obtenir une couleur, pas du vide. Ne PAS supprimer au motif « token mort » (audit 2026-08-20). */ --warning-text: var(--orange-text); --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-gold: 0 0 20px rgba(0, 151, 175, 0.12); --radius: var(--brand-radius); --radius-sm: 8px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Typography scale — multipliée par --brand-font-scale (défaut 1 = inchangé) */ --font-xs: calc(10px * var(--brand-font-scale, 1)); --font-sm: calc(11px * var(--brand-font-scale, 1)); --font-base: calc(13px * var(--brand-font-scale, 1)); --font-md: calc(14px * var(--brand-font-scale, 1)); --font-lg: calc(16px * var(--brand-font-scale, 1)); --font-xl: calc(18px * var(--brand-font-scale, 1)); --font-2xl: calc(24px * var(--brand-font-scale, 1)); --font-3xl: calc(28px * var(--brand-font-scale, 1)); --font-family: var(--brand-font); /* Chart defaults (shared across all dashboards) */ --chart-text: #94a3b8; --chart-grid: rgba(30, 41, 59, 0.5); } /* ============================================ MODE DALTONIEN (accessibilité — par utilisateur) ============================================ Choisi via le sélecteur de la top-bar (œil) — localStorage `mysynapse-a11y` → html[data-a11y=""]. Applique un THÈME ACCESSIBLE COMPLET pour l'utilisateur : couleur principale + accents + fond sidebar + couleurs de statut, tous remplacés par une palette distinguable selon le type de daltonisme. C'est un réglage PAR UTILISATEUR (chacun voit le thème qui lui convient), indépendant de la charte de marque du tenant. Le sélecteur `html[data-a11y=...]` (spécificité 0,1,1) prime volontairement sur le `:root` injecté par la charte du tenant → le thème accessible de l'utilisateur l'emporte sur la personnalisation de marque. ⚠️ SOURCE DE VÉRITÉ des hex : ce bloc. Les mêmes valeurs (statuts) sont reprises dans le sélecteur top-bar (templates/base.html) et la page IRIS Accessibilité (modules/iris.py CVD_PROFILES) pour l'aperçu — garder cohérent. Profils (cf. recommandations Okabe-Ito 2008 / Paul Tol / guides daltonisme) : • universel (okabe) — palette Okabe-Ito (accent bleu franc), sûre pour TOUS. Recommandé. • rouge-vert (deutéranopie/protanopie, ~6% des hommes) — accent bleu, danger orange vif. • bleu-jaune (tritanopie, rare) — accent violet (évite le bleu, confusable), axe rouge-vert. */ html[data-a11y="cvd"], /* alias rétro-compat (ancien on/off) */ html[data-a11y="okabe"] { --brand-primary: #0072b2; /* bleu Okabe (accent principal accessible) */ --brand-primary-light: #56b4e9; /* bleu ciel */ --brand-primary-dark: #004c78; --brand-sidebar: #0a2a40; /* bleu très foncé (sidebar/entête) */ --brand-success: #009e73; /* vert bleuté */ --brand-danger: #d55e00; /* vermillon */ --brand-warning: #e69f00; /* orange ambre */ --brand-info: #0072b2; /* bleu franc */ /* Accent principal retinté (cascade --brand-primary → --gold partout) : le mode devient VISIBLE sur toute l'appli (boutons, liens, états actifs, barres KPI), pas seulement sur les 4 statuts. Bleu Okabe sûr. */ --brand-primary: #0072b2; --brand-primary-light: #3a8fd0; --brand-primary-dark: #005a8c; --gold-glow: rgba(0, 114, 178, 0.15); --purple: #cc79a7; /* pourpre Okabe (sûr) */ /* 2026-08-20 : ce token MANQUAIT ici. Sans lui, l'encre des boutons de marque restait celle du thème (#111827) sur le bleu Okabe : 3.42:1, sous le seuil. Le correctif existait déjà — mais avait été écrit dans le bloc `redgreen`, dont le commentaire parle pourtant d'Okabe. Blanc sur #0072b2 : 5.19:1. */ --on-gold: #ffffff; } html[data-a11y="redgreen"] { --brand-primary: #0072b2; /* bleu (sûr en rouge-vert) */ --brand-primary-light: #56b4e9; --brand-primary-dark: #004c78; --brand-sidebar: #0a2a40; --brand-success: #009e73; /* vert bleuté (froid, ≠ rouge) */ --brand-danger: #e8590c; /* orange-rouge vif (visible en protanopie) */ --brand-warning: #f2c200; /* jaune doré (forte luminance) */ --brand-info: #0072b2; /* bleu profond */ --brand-primary: #0072b2; /* accent bleu sûr (≠ rouge/vert) */ --brand-primary-light: #3a8fd0; --brand-primary-dark: #005a8c; --gold-glow: rgba(0, 114, 178, 0.15); --purple: #cc79a7; /* Okabe ET rouge-vert partagent la primaire #0072b2 : blanc 5.19:1, le noir n'y faisait que 3.42:1. Le bloc okabe a sa propre déclaration (2026-08-20) — ne pas croire que celle-ci le couvre, un bloc ne cascade pas vers l'autre. */ --on-gold: #ffffff; } html[data-a11y="blueyellow"] { --brand-primary: #8e2dc2; /* violet (≠ bleu/jaune confusables) */ --brand-primary-light: #b15ce0; --brand-primary-dark: #6a1f93; --brand-sidebar: #26133a; /* violet très foncé */ --brand-success: #1b8a3f; /* vert saturé (axe rouge-vert intact) */ --brand-danger: #d81b1b; /* rouge saturé */ --brand-warning: #e8740a; /* orange */ --brand-info: #8e2dc2; /* violet (≠ vert, évite bleu↔vert) */ --brand-primary: #8e2dc2; /* accent violet (≠ vert, évite bleu↔jaune) */ --brand-primary-light: #a64fd6; --brand-primary-dark: #6f1f9c; --gold-glow: rgba(142, 45, 194, 0.15); --purple: #8e2dc2; --on-gold: #ffffff; /* primaire violet #8e2dc2 : blanc 6.4:1 (le noir échouait à 2.8) */ } /* ── Mode daltonien : renforcement de contraste (couleur + FORME) ── `html[data-a11y]` = un profil est actif (attribut retiré quand désactivé). 1) Corrige les fonds d'alerte codés en dur qui ne suivaient PAS les variables → ils s'adaptent désormais au profil choisi. 2) Ajoute un repère de FORME (bordure gauche épaisse, soulignement) en plus de la couleur — conforme WCAG 1.4.1 « ne pas reposer sur la couleur seule ». */ html[data-a11y] .alert-success { background: color-mix(in srgb, var(--green) 16%, transparent); border-color: var(--green); border-left: 4px solid var(--green); } html[data-a11y] .alert-error { background: color-mix(in srgb, var(--red) 16%, transparent); border-color: var(--red); border-left: 4px solid var(--red); } html[data-a11y] .alert-warning { background: color-mix(in srgb, var(--orange) 16%, transparent); border-color: var(--orange); border-left: 4px solid var(--orange); } html[data-a11y] .alert-info { background: color-mix(in srgb, var(--blue) 16%, transparent); border-color: var(--blue); border-left: 4px solid var(--blue); } html[data-a11y] .status-ok, html[data-a11y] .status-ecart { text-decoration: underline; text-underline-offset: 2px; } /* Survol des options du sélecteur de profil daltonien (top-bar). */ .a11y-opt:hover { background: var(--bg-secondary); } /* Le menu déroulant vit dans la top-bar : en thème clair, la top-bar force --text-primary en BLANC (pour son fond sombre), mais le menu a un fond clair (--bg-card #fff) → texte blanc sur blanc = libellés illisibles. On réinitialise les variables aux couleurs PAGE pour ce menu (même correctif que #tb-ent-dropdown). */ [data-theme="light"] #a11y-dropdown { --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #556372; --bg-card: #ffffff; --bg-secondary: #f1f5f9; --border: #e2e8f0; } /* ============================================ LIGHT THEME ============================================ */ [data-theme="light"] { --bg-primary: #f1f5f9; --bg-secondary: #e2e8f0; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-sidebar: var(--brand-sidebar); --bg-input: #f8fafc; /* En clair, on assombrit l'accent de marque pour garder le contraste sur fond clair (dérivé de --brand-primary, pas une couleur figée). */ --gold: color-mix(in srgb, var(--brand-primary) 81%, #000); --gold-light: var(--brand-primary); --gold-dark: color-mix(in srgb, var(--brand-primary) 63%, #000); --gold-glow: rgba(0, 122, 143, 0.1); --text-primary: #0f172a; --text-secondary: #475569; /* 2.56:1 sur --bg-card avec #94a3b8 : illisible. #556372 → 4.99:1 au pire (fond secondaire). Même mesure que le mode sombre. */ --text-muted: #556372; --text-gold: var(--gold); /* 1.48:1 sur blanc : bordures quasi absentes. #b4c0cf → 1.85:1. */ --border: #b4c0cf; /* Champs de formulaire : 3:1 (cf. :root) — 3.1:1 sur --bg-input clair. */ --border-input: #808fa5; --border-gold: rgba(0, 122, 143, 0.3); /* Variantes TEXTE (cf. bloc :root) — mélange vers le NOIR ici, seuil AA atteint sur le pire fond clair (--bg-secondary). */ --blue-text: color-mix(in srgb, var(--brand-info) 95%, #000); /* 4.55:1 */ --green-text: color-mix(in srgb, var(--brand-success) 90%, #000); /* 5.22:1 */ --red-text: color-mix(in srgb, var(--brand-danger) 90%, #000); /* 4.66:1 */ --orange-text: color-mix(in srgb, var(--brand-warning) 55%, #000); /* 5.03:1 */ --purple-text: color-mix(in srgb, var(--purple) 80%, #000); /* 4.94:1 */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-gold: 0 0 20px rgba(0, 122, 143, 0.08); --orange-light: rgba(245, 158, 11, 0.1); } /* Keep sidebar & top-bar dark in light mode */ [data-theme="light"] .sidebar, [data-theme="light"] .top-bar, [data-theme="light"] .sidebar { --bg-sidebar: var(--brand-sidebar); /* Ces zones restent sombres en thème clair : les variantes TEXTE doivent y reprendre le réglage du thème sombre, sinon un vert foncé « clair » atterrit sur le teal foncé de la sidebar. 2026-08-19 : `.sidebar` AJOUTÉ au sélecteur. Le commentaire ci-dessus la visait déjà, mais elle n'héritait que des surfaces — ses textes passaient en encre sombre sur le teal (.sbf-copyright mesuré à 1.19:1). Désormais 13.66:1 / 5.84:1 / 4.80:1 sur #002c30. */ --blue-text: color-mix(in srgb, var(--brand-info) 70%, #fff); --green-text: color-mix(in srgb, var(--brand-success) 60%, #fff); --red-text: color-mix(in srgb, var(--brand-danger) 70%, #fff); --orange-text: var(--orange); --purple-text: color-mix(in srgb, var(--purple) 80%, #fff); --border: #004050; --text-primary: #f1f5f9; --text-secondary: #94a3b8; /* #64748b (valeur d'avant le fix 2026-07-28) ne faisait que ~2.6:1 sur les surfaces sombres de la sidebar/top-bar — aligné sur le token sombre. */ --text-muted: #8593a8; --gold: var(--brand-primary); --gold-light: var(--brand-primary-light); --gold-dark: var(--brand-primary-dark); --gold-glow: rgba(0, 151, 175, 0.15); --border-gold: rgba(0, 151, 175, 0.3); } [data-theme="light"] .top-bar { background: var(--brand-sidebar); border-bottom-color: #004050; } /* Light mode : la sidebar reste sombre (teal). Ses SURFACES internes (boutons, cartes, inputs) doivent rester sombres aussi, sinon contenu clair sur fond clair = illisible (ex. sélecteur d'espace « SAV » : texte blanc sur lavande). */ [data-theme="light"] .sidebar { --bg-secondary: #013b41; --bg-card: #024c54; --bg-input: #013b41; } /* Dropdown entreprise top-bar : doit utiliser les couleurs PAGE, pas top-bar */ [data-theme="light"] #tb-ent-dropdown { --text-primary: #1e293b; --text-secondary: #475569; --bg-card: #ffffff; --bg-secondary: #f1f5f9; --border: #e2e8f0; --shadow: 0 4px 16px rgba(0,0,0,0.12); --gold-glow: rgba(0,151,175,0.1); --gold: #0097af; } [data-theme="light"] #tb-ent-dropdown a { color: #1e293b !important; } [data-theme="light"] #tb-ent-dropdown span { color: #1e293b; } /* Dropdown notifications top-bar : même problème — héritait des variables .top-bar (text-primary blanc) → texte blanc sur fond blanc. Force les couleurs PAGE pour que les titres/bodies/dates soient lisibles. */ [data-theme="light"] #notif-dropdown { --text-primary: #1e293b; --text-secondary: #475569; /* #94a3b8 sur carte blanche : 2.56:1 — même valeur que le thème clair. */ --text-muted: #556372; --bg-card: #ffffff; --bg-secondary: #f1f5f9; --border: #e2e8f0; --shadow: 0 4px 16px rgba(0,0,0,0.12); --gold: #0097af; --gold-glow: rgba(0,151,175,0.1); } [data-theme="light"] #notif-dropdown a, [data-theme="light"] #notif-dropdown span, [data-theme="light"] #notif-dropdown div { color: inherit; } /* Dropdown "Mes activités" top-bar : même problème que #notif-dropdown — héritait de --text-primary blanc (scope .top-bar) sur fond --bg-card clair → titres invisibles en mode clair. Force les couleurs PAGE. */ [data-theme="light"] #act-dropdown { --text-primary: #1e293b; --text-secondary: #475569; /* #94a3b8 sur carte blanche : 2.56:1 — même valeur que le thème clair. */ --text-muted: #556372; --bg-card: #ffffff; --bg-secondary: #f1f5f9; --border: #e2e8f0; --shadow: 0 4px 16px rgba(0,0,0,0.12); --gold: #0097af; --gold-glow: rgba(0,151,175,0.1); } [data-theme="light"] #act-dropdown a, [data-theme="light"] #act-dropdown span, [data-theme="light"] #act-dropdown div { color: inherit; } /* Barre de recherche globale (top-bar) : même problème — le scope .top-bar force --text-primary blanc mais ne redéfinit pas --bg-secondary (reste clair) → le texte saisi est blanc sur fond clair = invisible en mode clair. L'input utilise background:var(--bg-secondary) + color:var(--text-primary) en inline, donc on corrige via les VARIABLES (l'inline var() les résout) : fond sombre cohérent avec la top-bar + texte clair lisible. */ [data-theme="light"] #globalSearchInput { --bg-secondary: #013b41; --text-primary: #f1f5f9; } [data-theme="light"] .data-table th { background: #e2e8f0; color: #007a8f; border-bottom-color: #007a8f; } [data-theme="light"] .login-page { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%); } [data-theme="light"] .login-box { background: #ffffff; border-color: rgba(0, 122, 143, 0.3); } [data-theme="light"] .form-input, [data-theme="light"] .form-select { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } [data-theme="light"] .matrix-table th { background: #e2e8f0; color: #007a8f; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); background: var(--bg-primary); color: var(--text-primary); line-height: var(--brand-line-height, 1.6); min-height: 100vh; } /* Graisse des titres réglable (IRIS) — défaut 700 = inchangé */ h1, h2, h3, .page-title { font-weight: var(--brand-heading-weight, 700); } a { color: var(--gold); text-decoration: none; transition: var(--transition); } a:hover { color: var(--gold-light); } /* ============================================ LAYOUT ============================================ */ .app-layout { display: flex; flex-direction: column; min-height: 100vh; } .app-body { display: flex; flex: 1; margin-top: 40px; } /* Top bar */ .top-bar { position: fixed; top: 0; left: 0; right: 0; height: 40px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 16px; z-index: 110; } .top-bar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .top-bar-left img { height: 22px; max-width: 100px; object-fit: contain; } .top-bar-left .top-bar-sep { width: 1px; height: 18px; background: var(--border); } .top-bar-left .top-bar-app { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.5px; } .top-bar-center { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.3px; font-family: 'JetBrains Mono', monospace; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; } .top-bar-center .clock-sep { opacity: 0.4; } /* Élément du bandeau masqué par l'utilisateur (popup « Personnaliser », cf. modules/topbar_prefs.py). Rendu côté serveur → pas de clignotement au load ; la case à cocher ne fait que basculer cette classe → pas de rechargement. `!important` OBLIGATOIRE : plusieurs éléments du bandeau reçoivent un `display` en style INLINE (le widget chat passe à `display:flex` depuis son poll). Sans lui — ou avec l'attribut `hidden` — le style inline gagnerait et l'élément masqué réapparaîtrait. */ .tb-off { display: none !important; } .top-bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .top-bar-right .tb-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none; position: relative; } .top-bar-right .tb-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); } /* État actif (ex. bouton Mode daltonien activé) */ .top-bar-right .tb-btn.active { background: var(--gold); color: var(--on-gold, #fff); box-shadow: 0 0 0 2px var(--gold-glow); } /* ── Harmonisation des icônes du bandeau (2026-07-20) ── Chaque glyphe est enveloppé dans un `.tb-ico` : emojis rendus en gris monochrome sobre au repos, couleur pleine au survol / à l'état actif. Le wrapper est INDISPENSABLE — un `filter` posé sur le `.tb-btn` griserait aussi les badges de notification (le filtre englobe les enfants, impossible à annuler côté enfant). Ici seul le glyphe est filtré : les badges gardent leur couleur pour ressortir. Aucun changement de comportement. */ .top-bar-right .tb-btn .tb-ico { display: inline-flex; align-items: center; justify-content: center; filter: grayscale(1); opacity: 0.62; color: var(--text-secondary); transition: opacity 0.18s ease, filter 0.18s ease, color 0.18s ease; } .top-bar-right .tb-btn:hover .tb-ico, .top-bar-right .tb-btn.active .tb-ico { filter: grayscale(0); opacity: 1; color: var(--text-primary); } .top-bar-right .tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } .top-bar-right .tb-user { width: 28px; height: 28px; border-radius: 50%; background: var(--gold-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--bg-primary); cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; } .top-bar-right .tb-user:hover { border-color: var(--gold); } /* Sidebar */ .sidebar { width: 220px; background: var(--bg-sidebar); /* `color` doit etre declaree ICI : la couleur heritee de body transmet la VALEUR deja resolue (encre sombre en theme clair), pas la reference var(). Sans cette ligne, les tokens de texte redefinis pour la sidebar ne sont jamais consultes et tout texte non style y devient illisible en theme clair (mesure : .sbf-copyright a 1.19:1). Identique en sombre. */ color: var(--text-primary); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 40px; /* sous la top-bar (bandeau modules retiré) */ height: calc(100vh - 40px); z-index: 105; transition: var(--transition); } /* Sélecteur de neurone (sidebar — espace de travail) */ .snrn { padding: 12px 14px; border-bottom: 1px solid var(--border); position: relative; } .snrn-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .snrn-current { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background .2s, border-color .2s; color: var(--text-primary); font-size: 14px; font-weight: 700; text-align: left; } .snrn-current:hover { background: var(--bg-card); border-color: var(--gold); } .snrn-icon { font-size: 16px; flex-shrink: 0; line-height: 1; } .snrn-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snrn-chevron { color: var(--text-muted); font-size: 12px; flex-shrink: 0; } /* Raccourcis « Récents » sous le sélecteur — révélés par JS (classe .show, PAS l'attribut [hidden] qui perdrait contre display:flex). Le changement de module lui-même passe par la fenêtre plein écran (.modbrowse-*), plus par un menu déroulant : 20 modules ne s'y lisaient pas (scroll interne, pas de vue d'ensemble). */ .snrn-recents { display: none; margin-top: 10px; } .snrn-recents.show { display: block; } .snrn-recents-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px 2px; } .snrn-recent { display: none; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--text-secondary); font-size: 12px; font-weight: 500; transition: background .15s, color .15s; } .snrn-recent.show { display: flex; } .snrn-recent:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; } .snrn-recent-icon { font-size: 13px; flex-shrink: 0; line-height: 1; } .snrn-recent-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Navigateur de modules — fenêtre plein écran (« Tout parcourir ») ── */ .modbrowse-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 10000; align-items: flex-start; justify-content: center; padding: 4vh 20px 20px; overflow-y: auto; } .modbrowse-overlay.open { display: flex; } .modbrowse-panel { width: 100%; max-width: 1100px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,0.45); overflow: hidden; } .modbrowse-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); } .modbrowse-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); } .modbrowse-title-icon { font-size: 1.4rem; } .modbrowse-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .modbrowse-close:hover { background: var(--bg-secondary); color: var(--red-text); } /* Barre de filtre — le popup est désormais l'unique chemin de changement de module : à 20 modules, la frappe doit pouvoir remplacer le balayage visuel. */ .modbrowse-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .modbrowse-search { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; transition: border-color .15s; } .modbrowse-search:focus-within { border-color: var(--gold); } .modbrowse-search-icon { font-size: 14px; color: var(--text-muted); flex-shrink: 0; } .modbrowse-search-input { /* Pas d'`outline: none` ici : la regle globale :focus-visible (fin de fichier) la neutraliserait de toute facon, et l'anneau clavier est souhaite en plus du lisere de .modbrowse-search:focus-within. */ flex: 1; min-width: 0; padding: 10px 0; background: transparent; border: none; color: var(--text-primary); font-family: inherit; font-size: 0.95rem; } .modbrowse-hint { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-muted); } .modbrowse-hint kbd { font-family: inherit; font-size: 0.7rem; padding: 1px 5px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); } .modbrowse-empty { display: none; padding: 0 24px 24px; text-align: center; color: var(--text-muted); font-size: 0.9rem; } .modbrowse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 20px 24px 24px; } .modbrowse-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text-primary); transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; } .modbrowse-card:hover { transform: translateY(-3px); border-color: var(--card-accent, var(--gold)); box-shadow: 0 10px 24px rgba(0,0,0,0.18); color: var(--text-primary); text-decoration: none; } .modbrowse-card-active { border-color: var(--card-accent, var(--gold)); box-shadow: inset 0 0 0 1px var(--card-accent, var(--gold)); } /* Carte survolée au clavier (flèches) — distincte du module courant (.modbrowse-card-active). */ .modbrowse-card-kb { border-color: var(--card-accent, var(--gold)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-accent, var(--gold)) 55%, transparent); } .modbrowse-card-icon { font-size: 2rem; line-height: 1; } .modbrowse-card-label { font-size: 0.95rem; font-weight: 600; text-align: center; color: var(--text-primary); } .modbrowse-card-badge { position: absolute; top: 8px; right: 8px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; /* L'accent porte le lisere, pas le texte : il va du violet fonce au jaune et aucune encre unique n'y tient (blanc : 1.70:1 sur Dossier ; encre sombre : 2.82:1 sur Turbo). Ici 16:1 en sombre, 17.8:1 en clair. */ color: var(--text-primary); background: var(--bg-card); border: 1.5px solid var(--card-accent, var(--gold)); padding: 1px 6px; border-radius: 999px; } @media (max-width: 768px) { .modbrowse-overlay { padding: 3vh 12px 12px; } .modbrowse-toolbar { padding: 12px 16px; } .modbrowse-hint { display: none; } /* pas de clavier physique */ .modbrowse-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 16px; } .modbrowse-card { padding: 20px 12px; } .modbrowse-card-icon { font-size: 2rem; } } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid var(--border); text-align: center; } .sidebar-brand h1 { font-size: 18px; font-weight: 700; color: var(--gold); letter-spacing: 3px; text-transform: uppercase; } .sidebar-brand .subtitle { font-size: 10px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } .sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; } /* ============================================ PIED DE SIDEBAR (compte / aide / langue / AppStore / repli) — façon GitLab ============================================ */ .sb-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-sidebar); } .sbf-account { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: background .15s; } .sbf-account:hover { background: var(--bg-secondary); } .sbf-avatar, .sbf-avatar-img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .sbf-avatar { display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--on-gold, #000); font-weight: 700; font-size: 13px; } .sbf-account-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; } .sbf-actions { display: flex; align-items: center; gap: 5px; } .sbf-btn { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 15px; cursor: pointer; text-decoration: none; transition: all .15s; } .sbf-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--bg-card); } .sbf-lang { position: relative; flex: 1; display: flex; } .sbf-lang .sbf-btn { width: 100%; } .sbf-lang-dropdown { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 200; overflow: hidden; } .sbf-lang-dropdown.open { display: block; } .sbf-lang-opt { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-primary); transition: background .15s; } .sbf-lang-opt:hover { background: var(--bg-secondary); } .sbf-lang-opt.active { background: var(--gold-glow); font-weight: 700; } .sbf-collapse { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all .15s; } .sbf-collapse:hover { background: var(--bg-secondary); color: var(--text-primary); } .sbf-collapse-icon { font-size: 10px; flex-shrink: 0; } /* Épingler la sidebar large — n'existe QUE dans la plage du rail tablette (769–1180 px), où la sidebar se réduit d'office à des icônes. Masqué partout ailleurs : au-delà elle est déjà large, en deçà c'est la bottom-nav. La règle qui l'affiche vit dans le @media du rail (chercher `.sbf-wide`). */ .sbf-wide { display: none; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all .15s; } .sbf-wide:hover { background: var(--bg-secondary); color: var(--text-primary); } .sbf-wide-icon { font-size: 12px; flex-shrink: 0; } /* Épinglée : l'état actif se lit sans survol (le title seul ne suffit pas). */ html.pref-sidebar-wide .sbf-wide { color: var(--gold); } /* Numéro de version + build (pied de sidebar) */ .sbf-version { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 10px 2px; font-size: 10px; line-height: 1.4; color: var(--text-muted); opacity: 0.7; letter-spacing: 0.3px; user-select: none; } .sbf-version-app { font-weight: 600; } .sbf-version-sep { opacity: 0.5; } .sbf-version-build { font-variant-numeric: tabular-nums; } /* Mention de copyright (pied de sidebar) : aucune regle de base n'existait, le bloc heritait donc du corps de la sidebar (14 px) et s'imposait plus que le contenu. Discret et sous la ligne de version, sans passer sous le seuil de contraste : --text-muted vaut #8593a8 sur le teal (~4.8:1), donc PAS d'opacity supplementaire ici (cf. fix 2026-08-19). */ .sbf-copyright { padding: 0 10px 4px; text-align: center; font-size: 9px; line-height: 1.35; letter-spacing: 0.2px; color: var(--text-muted); user-select: none; } .nav-section { padding: 8px 20px 4px; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.55); /* couleur fixe sur fond sidebar sombre */ text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: color 0.2s; margin-top: 4px; } .nav-section:hover { color: var(--gold-light); } .nav-section .nav-chevron { font-size: 10px; transition: transform 0.25s ease; display: inline-block; } .nav-section.collapsed .nav-chevron { transform: rotate(-90deg); } .nav-group { overflow: hidden; max-height: 600px; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 1; } .nav-group.collapsed { max-height: 0; opacity: 0; pointer-events: none; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px; color: var(--text-secondary); transition: var(--transition); border-left: 3px solid transparent; font-size: 12px; } .nav-item .icon { font-size: 14px; width: 20px; text-align: center; } .nav-item:hover { background: var(--gold-glow); color: var(--sidebar-accent); border-left-color: var(--gold); } .nav-item.active { background: var(--gold-glow); /* Mesure 2026-08-19 : var(--gold) donnait 3.50:1 a 13px sur le voile teal, dans les DEUX themes. C'est l'element le plus regarde de la barre. */ color: var(--sidebar-accent); border-left-color: var(--gold); font-weight: 600; } .nav-item .icon { font-size: 18px; width: 24px; text-align: center; } .nav-badge { margin-left: auto; background: var(--red); color: white; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } /* Main content */ .main-content { flex: 1; margin-left: 220px; padding: 32px; min-height: 100vh; } /* ============================================ CARDS ============================================ */ .card { background: var(--bg-card); border: var(--brand-border-width, 1px) solid var(--border); border-radius: var(--radius); padding: var(--brand-card-padding, 24px); transition: var(--transition); } .card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } /* ============================================ KPI CARDS ============================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; transition: var(--transition); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); border-color: var(--border-gold); } .kpi-card .kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .kpi-card .kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .kpi-card.green::before { background: var(--green); } .kpi-card.red::before { background: var(--red); } .kpi-card.blue::before { background: var(--blue); } /* ═══════════════════════════════════════════════════════════ */ /* COMPOSANT TABS CANONIQUE — à utiliser sur toutes les pages */ /* Classe : .page-tabs > .page-tab */ /* Remplace progressivement : .fc-tabs, .kpi-tabs, etc. */ /* ═══════════════════════════════════════════════════════════ */ .page-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 5px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; scrollbar-width: thin; } .page-tab { padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: transparent; border: none; border-radius: var(--radius-sm); transition: var(--transition); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .page-tab:hover { color: var(--text-primary); background: var(--bg-card); } .page-tab.active { color: var(--on-gold, #000); /* auto-contraste : --gold peut être sombre (marque) */ font-weight: 700; background: var(--gold); box-shadow: var(--shadow); } .page-tab .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--text-primary); background: var(--bg-card); border-radius: 10px; } .page-tab.active .tab-badge { background: var(--bg-primary); color: var(--gold); } /* Container de contenu d'onglet (pour tabs JS, pas pages séparées) */ .page-tab-content { display: none; } .page-tab-content.active { display: block; } .kpi-card.orange::before { background: var(--orange); } .kpi-card.purple::before { background: var(--purple); } /* ============================================ TABLES ============================================ */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { background: var(--bg-secondary); color: var(--gold); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--gold-dark); position: sticky; top: 0; z-index: 10; } .data-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); transition: var(--transition); } .data-table tr:hover td { background: var(--bg-card-hover); color: var(--text-primary); } .data-table .row-orange td { background: var(--orange-light); border-left: 3px solid var(--orange); } .data-table .amount { text-align: right; font-family: 'JetBrains Mono', monospace; } .data-table .amount.positive { color: var(--green-text); } .data-table .amount.negative { color: var(--red-text); } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--brand-button-radius, var(--radius-sm)); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; } /* Un bouton désactivé doit SE VOIR désactivé. ───────────────────────────────────────────── Sans cette règle, il garde l'apparence d'un bouton actif ET le `cursor: pointer` ci-dessus : l'écran promet un clic qui ne se passera pas. L'utilisateur clique, rien n'arrive, et rien ne lui dit pourquoi. Mesuré le 2026-09-04 par le filet géométrique, qui compare l'opacité, le fond et le curseur d'un contrôle désactivé à ceux d'un contrôle actif : « Appliquer » et « Rattacher » sur /axone/opportunites, « Appliquer » sur /fabrication/ — et AUCUNE règle globale n'existait, alors que 30 gabarits posent un bouton désactivé. Le défaut n'était pas sur deux écrans, il était PARTOUT ; c'est le design system qui devait répondre, pas chaque page. */ .btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; } /* a11y : le teal porte mieux le texte FONCÉ (5.1–7.4:1) que le blanc (3.5:1). Gradient éclairci (--gold-light→--gold) + texte foncé, comme .page-tab.active. Hover via brightness() pour ne jamais dégrader le contraste. */ .btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--on-gold, #111827); /* auto-contraste selon la couleur de marque */ } .btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 151, 175, 0.3); color: var(--on-gold, #111827); } /* Bleu/rouge : tokens assombris (#2563eb / #dc2626) → texte blanc ≥4.5:1. */ .btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: #1d4ed8; } /* blanc 6.7:1 */ /* Vert clair : blanc 2.5:1 → texte foncé 7.0:1 (AAA). */ .btn-green { background: var(--green); color: #111827; } .btn-green:hover { filter: brightness(1.05); } .btn-red { background: var(--red); color: #fff; } .btn-red:hover { background: #b91c1c; } /* blanc 6.5:1 */ .btn-outline { background: transparent; border: 1px solid var(--border-gold); color: var(--gold); } .btn-outline:hover { background: var(--gold-glow); border-color: var(--gold); color: var(--gold-light); } .btn-sm { padding: 6px 12px; font-size: 12px; } /* ============================================ FORMS ============================================ */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .form-input, .form-select { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; transition: var(--transition); } /* Sans cette règle, les placeholders gardent le gris PAR DÉFAUT du navigateur (#757575 sous Chrome) : 4.40:1 sur --bg-input clair et ~3:1 en sombre, sous le seuil WCAG AA de 4.5:1. --text-muted est calibré pour ce rôle sur les deux thèmes (5.88:1 clair, 4.69:1 sombre — scripts/audit_contraste.py). opacity:1 : Firefox applique sinon une opacité réduite par défaut. */ input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; } /* Contour des champs à 3:1 (WCAG 1.4.11) : on re-scope la VARIABLE --border sur les contrôles de formulaire plutôt que border-color — ainsi les dizaines de templates qui écrivent `border:1px solid var(--border)` (inline ou en classe locale type .rfq-input) héritent du contour renforcé sans modification, et les règles qui posent border-color directement (:focus doré, états d'erreur) continuent de gagner. Les checkbox/radio en profitent aussi (même seuil). */ input, select, textarea { --border: var(--border-input); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } /* ============================================ CONTROLE BANQUE ============================================ */ /* Contrôle Banque — tableau compact */ .ctrl-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ctrl-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; } .ctrl-table thead th:first-child { text-align: left; } .ctrl-table tbody td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; } .ctrl-table tbody tr:last-child td { border-bottom: none; } .ctrl-table tbody tr:hover { background: rgba(148,163,184,0.04); } .ctrl-bank-name { text-align: left !important; } .ctrl-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap; } .ctrl-compact { padding: 4px 6px !important; font-size: 12px !important; text-align: center; max-width: 130px; } .btn-extract-solde { background: none; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); font-size: 12px; padding: 2px 6px; cursor: pointer; line-height: 1; flex-shrink: 0; } .btn-extract-solde:hover { background: rgba(212,175,55,0.1); } .status-ok { color: var(--green-text); font-weight: 700; } .status-ecart { color: var(--red-text); font-weight: 700; } .status-attente { color: var(--text-muted); font-style: italic; } /* ============================================ ALERTS / FLASH ============================================ */ .alert { padding: 14px 20px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 12px; animation: slideIn 0.3s ease-out; } .alert-success { background: rgba(16, 185, 129, 0.15); border: 1px solid var(--green-dark); color: var(--green-text); } .alert-error { background: rgba(239, 68, 68, 0.15); border: 1px solid var(--red-dark); color: var(--red-text); } .alert-warning { background: rgba(245, 158, 11, 0.15); border: 1px solid var(--orange); color: var(--orange-text); } .alert-info { background: rgba(59, 130, 246, 0.15); border: 1px solid var(--blue-dark); color: var(--blue-text); } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ LOGIN PAGE ============================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0e17 0%, #111827 50%, #0d1321 100%); position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 40%, rgba(0, 151, 175, 0.07) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0, 44, 48, 0.05) 0%, transparent 50%); animation: bgPulse 15s ease-in-out infinite alternate; } @keyframes bgPulse { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.1) rotate(5deg); } } .login-box { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 16px; padding: 48px; width: 420px; text-align: center; position: relative; box-shadow: var(--shadow), var(--shadow-gold); } .login-box h1 { font-size: 24px; font-weight: 700; color: var(--gold); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 4px; } .login-box .login-subtitle { font-size: 12px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 32px; } .login-divider { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 24px auto; } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font-size: 15px; font-weight: 500; cursor: pointer; transition: var(--transition); margin-bottom: 12px; text-decoration: none; } .btn-oauth:hover { border-color: var(--gold); background: var(--gold-glow); color: var(--gold-light); transform: translateY(-1px); } /* ============================================ CHARTS AREA ============================================ */ .chart-container { position: relative; height: 300px; padding: 20px; } /* ============================================ PAGINATION ============================================ */ .pagination { display: flex; gap: 4px; justify-content: center; margin-top: 24px; } .pagination a, .pagination span { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--border); color: var(--text-secondary); transition: var(--transition); } .pagination a:hover { border-color: var(--gold); color: var(--gold); } .pagination .active { background: var(--gold); color: var(--on-gold, var(--bg-primary)); /* auto-contraste : --gold peut être sombre (marque) */ border-color: var(--gold); font-weight: 600; } /* ============================================ MATRIX REPORT TABLE ============================================ */ .matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; } .matrix-table th { background: var(--bg-secondary); color: var(--gold); padding: 8px 10px; font-weight: 600; font-size: 11px; text-align: right; border-bottom: 2px solid var(--gold-dark); } .matrix-table th:first-child { text-align: left; } .matrix-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); } .matrix-table td:first-child { text-align: left; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--text-primary); } .matrix-table tr:hover td { background: var(--bg-card-hover); } .matrix-table .total-row td { font-weight: 700; color: var(--gold); border-top: 2px solid var(--gold-dark); background: var(--gold-glow); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .sidebar { width: 200px; } .main-content { margin-left: 200px; padding: 20px; } /* !important : bat les styles inline repeat(N,1fr) posés sur .kpi-grid dans les templates (sinon 4-5 colonnes forcées → chiffres coupés lettre à lettre). */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); position: fixed; /* Au-dessus du bottom-nav (1000) pour passer devant la nav quand ouverte */ z-index: 1100; /* Plein écran sur mobile (le top:88px desktop laisse la top-bar visible) */ top: 0; height: 100vh; height: 100dvh; /* dynamic viewport height — gère la barre Safari */ max-width: 85vw; padding-top: env(safe-area-inset-top, 0); box-shadow: 4px 0 24px rgba(0,0,0,0.4); } .sidebar.open { transform: translateX(0); } /* Overlay au-dessus du bottom-nav, sous la sidebar — couvre tout l'écran */ .sidebar-overlay { top: 0; z-index: 1050; } .main-content { margin-left: 0; } /* KPI : 2 colonnes sur mobile (≈170px/carte à 375px → le grand nombre tient sur une ligne). !important bat les styles inline repeat(4/5,1fr) des templates qui écrasaient les chiffres verticalement (« 3635 » en 3/6/3/5). */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Défensif : les en-têtes/barres bespoke en flex « space-between » (titre + boutons) passent en multi-lignes sur mobile. Évite que le titre s'écrase à ~1 caractère de large et se coupe verticalement (ex. « Emails » vertical) quand les boutons (flex-shrink:0) refusent de rétrécir. Ne wrappe que si le contenu déborde → inoffensif quand tout tient sur une ligne. */ [style*="justify-content:space-between"], [style*="justify-content: space-between"] { flex-wrap: wrap; } .ctrl-table { font-size: 11px; } .ctrl-compact { max-width: 100px; font-size: 11px !important; } .top-bar { padding: 0 8px; } .top-bar-center { display: none; } .top-bar-left .top-bar-app { display: none; } .top-bar-left .top-bar-sep { display: none; } .top-bar-right .tb-sep { display: none; } /* Tap targets Apple HIG ≥ 44×44 px (au lieu de 28×28) */ .top-bar-right .tb-btn { width: 44px; height: 44px; font-size: 16px; } /* Inputs : font-size ≥ 16px pour empêcher le zoom auto iOS au focus */ .form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select, textarea { font-size: 16px !important; } /* Boutons compacts : hauteur minimale 40px pour rester tappables */ .btn-sm { min-height: 40px; padding: 8px 14px; } .btn { min-height: 44px; } /* Tableaux denses : scroll horizontal au lieu de casser le layout */ .data-table, .matrix-table, .ctrl-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Cartes : padding réduit pour gagner de l'espace mobile */ .card { padding: 14px !important; } /* Onglets de page : tap targets agrandis */ .page-tab { padding: 12px 14px; min-height: 44px; } /* Safe-area iPhone (encoche / Dynamic Island) : géré DANS le bloc « MODE MINIMAL » ci-dessous, qui porte les !important gagnants (padding-top = inset, hauteur = 56px + inset). Le padding-top posé ici serait annulé par le `padding: 0 10px !important` du bloc minimal. */ /* Padding-bottom = bottom-nav height (60px) + safe area */ .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); } /* ── Top-bar mobile : MODE MINIMAL — ne garder que l'essentiel utilisable au pouce ── */ /* Layout : flex space-between, juste logo à gauche + 3 boutons à droite */ .top-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; /* Safe-area iPhone : padding-top = inset (encoche/Dynamic Island), hauteur = 56px + inset. box-sizing:border-box → sans le « +inset » la hauteur fixe mange le padding et le logo passe SOUS l'horloge iOS. env()=0 sur les appareils sans encoche → comportement inchangé. */ padding: env(safe-area-inset-top, 0) 10px 0 10px !important; height: calc(56px + env(safe-area-inset-top, 0)) !important; box-sizing: border-box !important; } .top-bar-left { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; } .top-bar-right { flex: 0 0 auto !important; gap: 4px !important; } /* Logo : SVG + "mySYNAPSE" compact, le reste caché */ .top-bar-left a span.fw-800 { font-size: 13px !important; letter-spacing: 0.8px !important; } .top-bar-left a span.text-xs { display: none !important; } /* "by SEiiA" */ /* Cacher TOUT le reste à gauche : liens "● mySynapse", "🛠 AppStore", séparateurs */ .top-bar-app, .top-bar-left .top-bar-sep { display: none !important; } /* Centre : horloge et recherche → cachés (recherche accessible via le module bar) */ .top-bar-center, #top-bar-clock, .global-search-wrap { display: none !important; } /* Sélecteur entreprise : conserver uniquement le badge coloré (initiales), masquer nom + chevron. Deux markups coexistent (base.html) :