/* ============================================================================ AgentFlow · Console cabinet — JETONS ---------------------------------------------------------------------------- Un nouveau cabinet = on édite le bloc [1]. Rien d'autre, jamais. Ombres, halos, focus, dégradés doux, teintes de puces : TOUT est dérivé de [1] par color-mix. C'est le bug que le kit corrige : les consoles existantes paramètrent le dégradé mais gardent le bleu en dur dans --shadow-btn et dans le halo du logo. ========================================================================== */ :root{ /* ------------------------------------------------------------------------ [1] MARQUE DU CABINET — les 3 seules lignes à changer par client. Défaut = AgentFlow (royal électrique). ---------------------------------------------------------------------- */ --grad-from:#0e1f66; /* début du dégradé des actions primaires */ --grad-to:#1e54e0; /* fin du dégradé */ --royal:#2563eb; /* accent : focus, tri actif, liens, sélection */ /* ------------------------------------------------------------------------ [2] DÉRIVÉ de [1] — ne pas éditer. ---------------------------------------------------------------------- */ --grad:linear-gradient(120deg,var(--grad-from) 0%,var(--grad-to) 100%); --grad-soft:linear-gradient(120deg, color-mix(in srgb,var(--grad-to) 9%,var(--surface)) 0%, color-mix(in srgb,var(--grad-from) 9%,var(--surface)) 100%); /* Dégradé pour du TEXTE (background-clip:text). Sur fond blanc, --grad convient. Sur fond sombre, son point de départ (bleu nuit) rend le chiffre illisible : on le remonte en clarté. D'où un jeton séparé — un dégradé de remplissage et un dégradé de texte ne sont pas le même objet. */ --grad-text:var(--grad); --tint:color-mix(in srgb,var(--royal) 8%,var(--surface)); /* fond de puce identifiant */ --tint-br:color-mix(in srgb,var(--royal) 24%,var(--surface));/* bord de puce */ --tint-tx:color-mix(in srgb,var(--grad-from) 72%,var(--royal)); /* texte de puce */ --ring:0 0 0 4px color-mix(in srgb,var(--royal) 14%,transparent); /* halo de focus */ --glow:0 6px 16px color-mix(in srgb,var(--grad-to) 34%,transparent);/* halo du logo */ --shadow-btn:0 2px 6px color-mix(in srgb,var(--grad-to) 30%,transparent), 0 1px 2px color-mix(in srgb,var(--grad-from) 26%,transparent); --shadow-btn-h:0 4px 12px color-mix(in srgb,var(--grad-to) 34%,transparent), 0 1px 3px color-mix(in srgb,var(--grad-from) 30%,transparent); /* ------------------------------------------------------------------------ [3] NEUTRES — identiques chez tous les cabinets. --ink-3 est à 5,1:1 sur blanc (AA). Le #86868b des consoles actuelles tombe à 3,6:1 : il échoue l'AA sur du 11–12px, or c'est exactement la taille de nos libellés. Le décoratif pur (traits, désactivé) : --ink-4. ---------------------------------------------------------------------- */ --bg:#f5f5f7; --surface:#ffffff; --surface-2:#fbfbfd; --surface-3:#f0f1f5; --border:#e8e8ed; --border-2:#d9d9e0; --line:#f1f1f5; --ink:#1d1d1f; --ink-2:#5b5b60; --ink-3:#6e6e73; --ink-4:#a0a0a8; --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05); --shadow-lift:0 4px 14px rgba(16,24,40,.09); --shadow-pop:0 12px 32px rgba(16,24,40,.18); --shadow-modal:0 24px 64px rgba(16,24,40,.28); --radius:16px; --radius-sm:11px; --radius-xs:8px; /* ------------------------------------------------------------------------ [4] STATUTS — JAMAIS thémés. Le vert de « OK » est le même chez tous les cabinets : un état n'est pas une couleur de marque. 6 tons, pas plus. L'app mappe SES statuts métier sur un de ces 6 tons (data-s="…"). ---------------------------------------------------------------------- */ --ok-bg:#e9fbf0; --ok-tx:#067a45; --ok-dot:#12b76a; /* fait, conforme, à jour */ --info-bg:#eaf1ff; --info-tx:#1d4ed8; --info-dot:#3b82f6; /* en cours, en attente */ --warn-bg:#fff6e8; --warn-tx:#b25e00; --warn-dot:#f79009; /* à compléter, à rattacher */ --prio-bg:#fff0e8; --prio-tx:#b23a10; --prio-dot:#ef6820; /* à vérifier, prioritaire */ --err-bg:#fef3f2; --err-tx:#b42318; --err-dot:#f04438; /* échec, bloquant */ --mut-bg:#f0f0f4; --mut-tx:#5b5b60; --mut-dot:#a0a0a8; /* ignoré, hors périmètre */ --err-br:#fecdca; --warn-br:#f5d9a8; /* Palette des séries de graphes — ordre imposé, jamais improvisé. */ --s1:#1e54e0; --s2:#12b76a; --s3:#f79009; --s4:#7a5af8; --s5:#06aed4; --s6:#86868b; /* Durées — 3 valeurs, pas une de plus. */ --t-fast:.12s; /* survol, appui : doit être imperceptible */ --t-ui:.14s; /* pilules, champs, onglets */ --t-move:.45s; /* une barre qui grandit, une jauge qui se remplit */ --ease:cubic-bezier(.2,.8,.2,1); } /* ---------------------------------------------------------------------------- Mode sombre — OPT-IN EXPLICITE, JAMAIS AUTOMATIQUE. Une console cabinet est BLANCHE. C'est le style CERFIN, c'est ce que le cabinet attend, et ce n'est pas au réglage d'affichage de Windows d'en décider : un collaborateur qui a mis son OS en sombre pour lire ses mails le soir ne demande pas que son outil comptable change d'identité. Brancher `prefers-color-scheme` ici, c'est laisser une préférence système repeindre le produit du client. Erreur commise, corrigée : le sombre ne s'active QUE si quelqu'un pose en connaissance de cause. Le vérificateur échoue si la console noircit sous un OS sombre. -------------------------------------------------------------------------- */ :root{ color-scheme:light; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0b0b0d; --surface:#161619; --surface-2:#1c1c20; --surface-3:#26262b; --border:#2a2a30; --border-2:#3a3a42; --line:#232328; --ink:#f5f5f7; --ink-2:#c3c3c8; --ink-3:#9a9aa1; --ink-4:#6e6e75; --tint-tx:color-mix(in srgb,var(--royal) 55%,#fff); --grad-text:linear-gradient(120deg, color-mix(in srgb,var(--grad-to) 55%,#fff) 0%, color-mix(in srgb,var(--royal) 72%,#fff) 100%); --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3); --shadow-lift:0 4px 14px rgba(0,0,0,.45); --shadow-pop:0 12px 32px rgba(0,0,0,.55); --shadow-modal:0 24px 64px rgba(0,0,0,.6); --ok-bg:#0d2b1c; --ok-tx:#5ee9a4; --info-bg:#141f3d; --info-tx:#8ab4ff; --warn-bg:#2e2110; --warn-tx:#f5b661; --prio-bg:#2e1a10; --prio-tx:#ff9f70; --err-bg:#2d1414; --err-tx:#ff9d95; --err-br:#5a2420; --mut-bg:#232328; --mut-tx:#b0b0b8; --warn-br:#4a3a1c; } /* ---------------------------------------------------------------------------- Repli si color-mix n'est pas supporté (navigateur < 2023). Les consoles tournent sur Chrome/Edge à jour côté cabinet : ce bloc n'est qu'un filet. -------------------------------------------------------------------------- */ @supports not (color:color-mix(in srgb,red 50%,blue)){ :root{ --tint:#eef2ff; --tint-br:#dbe4ff; --tint-tx:#1e40af; --ring:0 0 0 4px rgba(37,99,235,.14); --glow:0 6px 16px rgba(30,84,224,.34); --shadow-btn:0 2px 6px rgba(30,84,224,.3), 0 1px 2px rgba(14,31,102,.26); --shadow-btn-h:0 4px 12px rgba(30,84,224,.34), 0 1px 3px rgba(14,31,102,.3); --grad-soft:linear-gradient(120deg,#eef2ff 0%,#e6edff 100%); } }