/* ========================================================================= * adns-tokens.css — jetons de la charte back-office ADNS, sans Bootstrap (v0) * * [2026-10-20] AJOUT - Jetons en trois couches (primitives, rôles, accent de module) * * CONTEXTE : passe P1 du chantier d'uniformisation des back-offices (dev_wo/docs/modules/inter-module/ * uniformisation-back-office/PLAN_PASSES.md, socle/CHARTE_CIBLE.md §2-3). Valeurs identiques au * DESIGN.md « Univers v2 » et à la charte Éditeur A (adns-charte-editeur-a.css, bloc 1). * Fichier de jetons SEULEMENT : aucune règle de mise en forme, aucune classe. * SANS EFFET SUR L'EXISTANT : tout est déclaré sous :where(...), de spécificité nulle. Là où la charte * Éditeur A définit déjà un jeton (:root[data-charte="saas"], spécificité 0,2,0), c'est sa valeur * qui reste servie ; ce fichier ne fait que combler les jetons absents (dont ceux du régime Pixel). * Valeurs volontairement différentes d'Éditeur A, posées sous des NOMS NEUFS pour ne rien changer : * --adns-h-header (48 px, contre --adns-header-height 56 px), --adns-radius-menu (8 px, contre * --adns-radius-item 10 px), --adns-shadow-surcouche (ombre Univers, contre --adns-shadow-layer). * DÉCISIONS : teintes de module validées par Antoine le 20/10/2026 (gipco bleu nuit, mail sarcelle, web violet, * lead prune, socle encre). [2026-10-21] Direction B d'Antoine (« pour essayer ») : le bouton décisif * prend la teinte du module (adns-ui.css, .adns-btn--decisif), pour se distinguer du soleil d'Univers. * L'accent ne colore toujours ni lien, ni état, ni focus (CHARTE_CIBLE §3.2, révisé pour le décisif). * DÉPENDANCES : aucune. Chargé par aucune page en v0 ; s'inclut AVANT adns-ui.css. * AUTEUR : Antoine LAGIER / Claude Code * RÉFÉRENCE : Conversation Claude Code du 2026-10-20 (ticket d'épic à créer avant tout commit) * ========================================================================= */ /* ---------- Couche 1 : primitives (noms et valeurs d'Univers v2) ---------- */ :where(:root) { --ad-c-blanc: #ffffff; --ad-c-neige: #fafafa; --ad-c-brume: #f3f3f3; --ad-c-perle: #eaeaea; --ad-c-filet: #e4e4e4; --ad-c-filet-fort: #cdcdcd; --ad-c-acier: #8c8c8c; /* bordure de champ seulement (3,36:1) */ --ad-c-graphite: #6a6a6a; /* texte discret (5,41:1) */ --ad-c-ardoise: #4f4f4f; /* texte doux (8,19:1) */ --ad-c-encre: #111112; /* texte, focus, actif (18,87:1) */ --ad-c-soleil: #ffda1a; /* action décisive */ --ad-c-soleil-vif: #ffce00; /* survol, pression */ --ad-c-soleil-pale: #fff1a8;/* sélection */ --ad-c-vert: #0f7a47; --ad-c-vert-pale: #e5f4ec; --ad-c-ambre: #965a00; --ad-c-ambre-pale: #fcf1da; --ad-c-rouge: #b3261e; --ad-c-rouge-pale: #fcebea; /* erreur et destructif, jamais un état normal */ /* Teintes de module (couche 3 ci-dessous ; blanc dessus >= 7:1) */ --ad-c-bleu-nuit: #1e3a8a; /* gipco-adns : 10,36:1 */ --ad-c-sarcelle: #0e5a5c; /* mail-adns : 7,97:1 (déjà servie par Éditeur A) */ --ad-c-violet: #6d28d9; /* web-adns : 7,10:1 (déjà servie par Éditeur A) */ --ad-c-prune: #86198f; /* lead-adns / communauté : 8,24:1 */ } /* ---------- Couche 2 : rôles (noms d'Éditeur A conservés, ajouts de CHARTE_CIBLE §2.2) ---------- */ :where(:root) { /* Couleur */ --adns-color-bg-page: var(--ad-c-blanc); --adns-color-bg-surface: var(--ad-c-blanc); --adns-color-bg-side: var(--ad-c-brume); --adns-color-bg-hover: var(--ad-c-neige); --adns-color-bg-selected: var(--ad-c-soleil-pale); --adns-color-bg-field: var(--ad-c-blanc); --adns-color-bg-head: var(--ad-c-neige); --adns-color-bg-disabled: var(--ad-c-brume); --adns-color-bg-veil: color-mix(in srgb, var(--ad-c-encre) 20%, transparent); --adns-color-border-subtle: var(--ad-c-filet); --adns-color-border-row: var(--ad-c-perle); --adns-color-border-control: var(--ad-c-filet-fort); --adns-color-border-input: var(--ad-c-acier); --adns-color-text-default: var(--ad-c-encre); --adns-color-text-muted: var(--ad-c-ardoise); --adns-color-text-subtle: var(--ad-c-graphite); --adns-color-text-disabled: var(--ad-c-graphite); --adns-color-action-bg: var(--ad-c-soleil); --adns-color-action-bg-hover: var(--ad-c-soleil-vif); --adns-color-on-action: var(--ad-c-encre); --adns-color-link: var(--ad-c-encre); --adns-color-link-trait: var(--ad-c-acier); --adns-color-status-success-bg: var(--ad-c-vert-pale); --adns-color-status-success-fg: var(--ad-c-vert); --adns-color-status-warning-bg: var(--ad-c-ambre-pale); --adns-color-status-warning-fg: var(--ad-c-ambre); --adns-color-status-danger-bg: var(--ad-c-rouge-pale); --adns-color-status-danger-fg: var(--ad-c-rouge); --adns-color-status-info-bg: var(--ad-c-brume); --adns-color-status-info-fg: var(--ad-c-ardoise); --adns-color-status-neutral-bg: var(--ad-c-brume); --adns-color-status-neutral-fg: var(--ad-c-ardoise); --adns-color-status-brand-bg: var(--ad-c-soleil-pale); --adns-color-status-brand-fg: var(--ad-c-encre); --adns-focus-ring: 2px solid var(--ad-c-encre); --adns-shadow-surcouche: 0 1px 2px color-mix(in srgb, var(--ad-c-encre) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ad-c-encre) 12%, transparent); /* Typographie : échelle 11, 12, 13, 14, 16, 20, 24 ; graisses 400, 500, 600 seulement */ --adns-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --adns-fs-key: 11px; /* touche, sous-méta (500) */ --adns-fs-group: 12px; /* statut, titre de groupe de menu (500) */ --adns-fs-label: 13px; /* libellé, en-tête de tableau (500), méta (400) */ --adns-fs-body: 14px; /* corps, cellule, bouton */ --adns-fs-section: 16px; /* titre de section (600) */ --adns-fs-figure: 20px; /* chiffre sur lequel on agit (600, tnum) */ --adns-fs-page: 24px; /* titre de page (600, -0,01 em) */ --adns-lh-body: 1.5; --adns-lh-table: 1.3; --adns-lh-title: 1.2; /* Espacement : pas de 4 px ; 48 px n'appartient pas à l'échelle */ --adns-sp-1: 4px; --adns-sp-2: 8px; /* dans un groupe */ --adns-sp-3: 12px; /* cellule, champ */ --adns-sp-4: 16px; /* entre champs, marge de panneau */ --adns-sp-6: 24px; /* entre groupes, dialogue */ --adns-sp-8: 32px; /* entre sections */ --adns-sp-10: 40px; /* gouttière */ --adns-gutter: var(--adns-sp-10); /* Rayons (règle concentrique : extérieur = intérieur + écart) */ --adns-radius-key: 4px; --adns-radius-inner: 6px; --adns-radius-control: 8px; --adns-radius-menu: 8px; --adns-radius-container: 12px; --adns-radius-pill: 999px; /* Densité (valeurs Univers) */ --adns-h-control: 36px; --adns-h-control-bar: 32px; --adns-h-touch: 44px; /* actions principales sous 992 px */ --adns-h-row: 36px; --adns-h-head: 32px; --adns-h-bar: 40px; --adns-h-header: 48px; --adns-h-status: 22px; --adns-w-nav: 232px; --adns-w-content-max: 1880px; /* Mouvement : transform, opacity et fondu de couleur seulement ; tout à 0 sous prefers-reduced-motion */ --adns-dur-short: 100ms; --adns-dur-mid: 150ms; --adns-dur-long: 200ms; --adns-ease: cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 575.98px) { :where(:root) { --adns-gutter: var(--adns-sp-4); } } @media (prefers-reduced-motion: reduce) { :where(:root) { --adns-dur-short: 0ms; --adns-dur-mid: 0ms; --adns-dur-long: 0ms; } } /* ---------- Couche 3 : accent de module (4 emplacements seulement, CHARTE_CIBLE §3.2) ---------- * Monogramme du menu, filet de 2 px de la barre haute, première série des graphiques, pastille de module. * Jamais : bouton, lien, état, focus, sélection, bordure de champ, onglet actif, texte courant. * Valeurs de data-produit : celles posées sur par HeaderFooterApplicationBootstrap.dataProduit() * (espace PostHog sans « -adns ») : gipco, mail, web, lead, back-office (socle, sysadmin), front-cloud. */ :where(:root) { --adns-accent: var(--ad-c-encre); --adns-accent-on: var(--ad-c-blanc); --adns-accent-pale: color-mix(in srgb, var(--adns-accent) 12%, var(--ad-c-blanc)); } :where(:root[data-produit="gipco"]) { --adns-accent: var(--ad-c-bleu-nuit); --adns-accent-selection: #dbe6ff; } /* sélection : bleu franc pâle, 15,1:1 sous l'encre */ :where(:root[data-produit="mail"]) { --adns-accent: var(--ad-c-sarcelle); --adns-accent-selection: var(--ad-c-soleil-pale, #d5ecec); } :where(:root[data-produit="web"]) { --adns-accent: var(--ad-c-violet); --adns-accent-selection: var(--ad-c-soleil-pale, #ece3fb); } :where(:root[data-produit="lead"]) { --adns-accent: var(--ad-c-prune); --adns-accent-selection: var(--ad-c-soleil-pale, #f1dcf4); } :where(:root[data-produit="back-office"]) { --adns-accent: var(--ad-c-encre); } /* socle, sysadmin */