/* ============================================= PALETTE COMMUNE - charte V3.2, les deux marques (primitives --ds-*) Source unique des valeurs de couleur des deux sites (chantier sites-web, lot 4). generer-blocs.py la recopie dans /maquette/design-system/palette.css, chargée avant tokens.css : chaque site n'y garde que ses ALIAS et les RÔLES du contrat commun, qui pointent vers ces primitives. Une primitive ne se lit jamais depuis un composant (verifier-jetons.py le refuse pour le socle). Les primitives d'orgatypik prennent le nom que pylotik leur donnait déjà (--ds-orga-navy, --ds-orga-violet…) : deux sites, une seule façon de nommer une couleur. Les commentaires cités en ratio restent ceux de leur charte d'origine. ============================================= */ :root { /* --------------------------------------------- PYLOTIK : primitives du produit, et la série --ds-orga-* qu'il employait déjà --------------------------------------------- */ /* Rôles de couleur - charte V3.1, §19. Deux rôles communs avec orgatypik : primary (le navy, le MÊME dans les deux marques) et le gris. Un rôle propre à pylotik : secondary, le terracotta. L'accent de pylotik, le miel #DBA751, ne dit pas la marque, il dit « aujourd'hui » (bouton et colonne du jour de l'application) : le site n'a pas de jour à marquer, il ne l'emploie pas. La turquoise est restée à orgatypik ; les repères d'interaction sont le primary. */ --ds-blue-700: #1F2F7A; /* Primary · navy · titres, structure, segment « pylot » */ --ds-blue-500: #6B9BF6; /* Navy clair · halo froid des fonds (pas de second bleu) */ --ds-blue-300: #6B9BF6; /* Navy clair mode sombre · cède l'affichage au primary */ --ds-terra-700: #CC5500; /* Terracotta · accent, appels à l'action, segment « ik » */ /* Encre du terracotta (charte V3.1, §13 et §18). Le terracotta de la charte ne donne que 4.31:1 sur blanc : sous le seuil AA de 4.5:1 en TEXTE comme en FOND PORTEUR DE TEXTE. La 3.1 lui donne un seul palier de texte, son encre, qui remplace les deux terracottas assombris hors charte de la 2.6 (#B84D00, #A84600). Jamais dans le logotype. */ --ds-terra-ink: #B34A00; /* 5.4:1 sur blanc */ --ds-terra-600: #E06D20; /* Terracotta lumineux · survol, accent sur fond foncé */ --ds-terra-500: #E2752C; /* Terracotta mode sombre */ --ds-grey-eq: #928D86; /* Gris Équilibre · le point « . » du mot de marque */ --ds-grey-eq-dark: #B7B2AB; /* Gris Équilibre mode sombre */ /* @hors-charte paliers de dégradé, plus sombres que le Bleu principal. Ils ne servent QU'À composer les fonds de héros : la charte ne définit pas de dégradé, mais elle n'en interdit pas - et le site frère orgatypik en fait sa signature de héros. Le palier le PLUS CLAIR reste le Bleu principal #1F2F7A : c'est lui qui contraint tous les contrastes posés dessus. */ --ds-blue-900: #182461; --ds-blue-950: #151E52; /* @hors-charte un cran sous le 900 - départ du dégradé des bandeaux en thème sombre */ --ds-blue-800: #182461; /* Charte V3.2 : le terracotta éclairci #F2A268 et le bleu éclairci #9EBEFA, qui servaient au texte sur le navy, sont retirés. Sur le navy, le texte est blanc ; les repères et libellés courts prennent les teintes de la coque sombre (#6B9BF6, #E2752C). */ /* MARQUE ORGATYPIK - charte orgatypik V2.0, §02 et §03. Ces valeurs ne sont PAS la palette de pylotik : elles n'existent ici que pour composer le mot « orgatypik » avec son propre wordmark quand il est cité, l'éditeur ayant lui aussi une règle de composition stricte (Nunito ExtraBold, bas-de-casse, interlettrage -0,065 em, dégradé continu navy → violet, point toujours gris). Ne jamais les employer pour autre chose. */ --ds-orga-navy: #1F2F7A; /* 12.03:1 sur blanc */ --ds-orga-violet-deep: #4A1A9E; /* fin du héros de marque d'orgatypik (charte V3.0, §14) */ --ds-orga-navy-deep: #182461; /* @hors-charte palier de degrade, repris du hero orgatypik */ --ds-orga-navy-dark: #151E52; /* @hors-charte palier le plus sombre */ --ds-orga-navy-mid: #2A3A8A; /* @hors-charte palier le plus clair, contraint le contraste */ --ds-orga-violet: #5F23C7; /* 8.23:1 sur blanc */ --ds-orga-navy-light: #6B9BF6; /* variante fond sombre */ --ds-orga-violet-light: #A379EB; /* variante fond sombre */ --ds-orga-grey: #928D86; /* le point - jamais dégradé, jamais coloré */ --ds-orga-grey-light: #B7B2AB; /* Charte V3.1, « orgatypik cité sur fond navy » : paliers éclaircis pour le seul mot « orgatypik » posé sur le navy de nos héros. Ses variantes fond sombre sont calibrées pour la coque noire ; sur le navy, le violet clair retombe à 2.98:1. 5.14:1 et 4.71:1 sur le palier le plus clair du dégradé. */ --ds-orga-navy-on-navy: #9EBEFA; --ds-orga-violet-on-navy: #C4A8F5; /* Neutres & surfaces - charte §03, bloc « neutres & surfaces ». */ --ds-white: #FFFFFF; /* surface / panneau */ --ds-gray-050: #F5F5F7; /* fond / coque */ --ds-gray-500: #6B6B70; /* texte courant */ --ds-shell-dark: #212124; /* fond / coque, mode sombre */ --ds-surface-dark: #1A1A1D; /* surface / panneau, mode sombre */ --ds-text-dark: #E1E1E4; /* texte titre, mode sombre */ --ds-text-soft-dark: #8E8E96;/* texte courant, mode sombre */ /* Neutres d'interface. @hors-charte : la charte ne définit ni filet ni fond de survol. Dérivés du gris de fond, vérifiés en aplat uniquement. */ --ds-gray-150: #E6E6EC; /* @hors-charte filet, bordure */ --ds-gray-100: #EDEDF1; /* @hors-charte fond de survol, alternance de lignes */ --ds-gray-700: #4A4A52; /* @hors-charte texte courant renforcé - 8.6:1 sur blanc */ --ds-line-dark: #33333A; /* @hors-charte filet sur coque sombre */ --ds-blue-600-line: #3B4B94; /* @hors-charte filet sur fond navy - 1.4:1 sur #1F2F7A, un filet ne porte rien */ --ds-line-dark-soft: #2A2A31; /* @hors-charte alternance de lignes sur coque sombre */ /* ACTEURS - repris du design system du produit (pylot-base.css / pylot-dark.css). Ce sont les couleurs qui identifient le périmètre d'un objet dans l'application : le client, notre organisation, le fournisseur. Le site les emploie pour parler des mêmes acteurs, avec les mêmes teintes, afin qu'un visiteur qui verra l'outil y retrouve son repère. Depuis la charte V3.1, le fournisseur prend la prune tertiaire d'orgatypik, comme le client prend son violet : une donnée, jamais la marque. Elle se tient loin du vert de succès et du rouge d'alerte. */ --ds-actor-client-bg: #E2DAF0; --ds-actor-client-tx: #5F23C7; /* violet d'orgatypik */ --ds-actor-self-bg: #D4D9EC; --ds-actor-self-tx: #1F2F7A; /* navy, le primary */ --ds-actor-supplier-bg: #EAD8E9; --ds-actor-supplier-tx: #723072; /* prune d'orgatypik */ --ds-actor-client-bg-dark: #2B203E; --ds-actor-client-tx-dark: #A379EB; --ds-actor-self-bg-dark: #252E4E; --ds-actor-self-tx-dark: #6B9BF6; --ds-actor-supplier-bg-dark: #362138; --ds-actor-supplier-tx-dark: #CF81CF; /* Badge « success-light » du produit : anis sur fond anis très clair, 7.19:1. C'est la mise en avant positive du design system, reprise ici telle quelle. */ --ds-badge-success-light-bg: #DFEDBD; --ds-badge-success-light-tx: #3A510E; /* Palette fonctionnelle - charte §03. Ce sont les états applicatifs (cellules date + état, anneaux de progression, badges) : le site les emploie pour DÉMONTRER le produit, jamais comme couleurs de marque. Deux séries, jamais à croiser : la série claire sur fond clair, la série sombre sur coque sombre. */ --ds-state-success: #13864D; --ds-state-success-dark: #4CFFA6; --ds-state-success-light: #93C322; --ds-state-success-light-dark: #A3E635; --ds-state-waiting: #FFE41A; --ds-state-waiting-dark: #FFD633; --ds-state-running: #EF5C06; --ds-state-running-dark: #FF8E4C; --ds-state-alert: #BC281B; --ds-state-alert-dark: #FF5B4C; --ds-state-alert-on-navy: #FF988E; /* @hors-charte rouge d'alerte éclairci pour le TEXTE sur fond bleu - 4.65:1 */ /* @hors-charte ROUGE PASTÈQUE, pour le TEXTE sur fond bleu - 4.51:1. Distinct du rouge d'alerte, et pas par nuance : c'est une autre teinte. Le rouge d'alerte vient du #BC281B de la charte, à 5° ; celui de la pastèque du #F0596A des supports serviciz, à 353°. L'un tire vers le corail, l'autre vers la framboise, et l'œil les distingue côte à côte. Reprendre l'alerte pour parler du fruit désolidarisait le site de ses kakémonos. Teinte et saturation sont celles du support imprimé ; seule la clarté monte, de 65 % à 78 %, parce que le #F0596A tombe à 2.91:1 sur le bleu du héros - sous le seuil du texte large lui-même. Un kakémono se lit à trois mètres avec des lettres de 30 mm, un écran non. */ --ds-pasteque-on-navy: #F697A1; /* Échelle des conditions de travail (composant PylotScale de l'application), reprise pour les jauges d'exposition. Charte V3.1, §14 : ses niveaux n'ont plus de teinte propre, ils reprennent les états, et suivent chacun son état en mode sombre. Les jauges du site n'en emploient que quatre : Bonne = citron, Normale = mimosa, Difficile = orange, Très difficile = alerte (Très bonne, le succès, n'y sert pas). Voir les alias --scale-*. */ /* @hors-charte série claire assombrie POUR LE TEXTE. Dans l'application, ces états sont des aplats et des anneaux : le seuil est 3:1 et les valeurs de la charte conviennent. Sur ce site, ils sont rendus en TEXTE dans les badges de démonstration, où le seuil monte à 4.5:1 - le jaune d'attente n'y donne que 1.28:1 et le vert clair 2.09:1. Ces trois valeurs assombries ne remplacent pas la charte : elles la transposent au texte sur fond clair. La série sombre, elle, passe déjà l'AA sans retouche. */ --ds-state-success-deep: #0F6B3E; /* @hors-charte vert soutenu pour le TEXTE posé sur son propre voile */ --ds-state-waiting-txt: #8A6D00; /* @hors-charte 4.92:1 sur blanc */ --ds-state-success-light-txt: #5C7A0F; /* @hors-charte 4.95:1 sur blanc */ --ds-state-running-txt: #C04700; /* @hors-charte 5.07:1 sur blanc */ --ds-blue-600-txt: #3B55B8; /* @hors-charte navy éclairci lisible en texte - 6.5:1 sur blanc */ /* Transparences DÉRIVÉES de leur couleur source, jamais recopiées. rgb(from X r g b / a) lit les canaux de X : réassigner --ds-blue-700 change donc aussi ses transparences. Un rgba(31, 47, 122, 0.08) écrit à la main resterait, lui, au bleu d'aujourd'hui. Syntaxe de couleur relative : Baseline « largement disponible » (Chrome 119, Safari 16.4, Firefox 128). Sur un navigateur antérieur, la déclaration est ignorée et le repli de la ligne suivante s'applique. */ --ds-blue-a08: rgba(31, 47, 122, 0.08); --ds-blue-a08: rgb(from var(--ds-blue-700) r g b / 0.08); --ds-blue-a16: rgba(31, 47, 122, 0.16); --ds-blue-a16: rgb(from var(--ds-blue-700) r g b / 0.16); --ds-terra-a10: rgba(204, 85, 0, 0.10); --ds-terra-a10: rgb(from var(--ds-terra-700) r g b / 0.10); --ds-shadow: rgba(31, 47, 122, 0.10); --ds-shadow: rgb(from var(--ds-blue-700) r g b / 0.10); /* Ombre d'un OBJET DÉTOURÉ posé sur un fond sombre. Distincte de --ds-shadow, qui est bleutée et calibrée pour du contenu sur fond clair : à 10 % sur du bleu marine, elle ne se voit pas. Un objet sans ombre y flotte. */ --ds-shadow-object: rgba(0, 0, 0, 0.42); /* Typographie - charte §04. Cinq familles, cinq rôles. Nunito est RÉSERVÉE au mot « pylotik. » : ne jamais l'employer pour du texte courant ou des titres (règle explicite de la charte). */ --ds-font-nunito: 'Nunito', system-ui, sans-serif; --ds-font-montserrat: 'Montserrat', system-ui, sans-serif; --ds-font-dm-sans: 'DM Sans', system-ui, sans-serif; --ds-font-jetbrains: 'JetBrains Mono', ui-monospace, monospace; /* Échelle d'espacement, base 4 px. */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-7: 1.75rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; /* Rayons, ombres, transitions */ --ds-radius-sm: 6px; --ds-radius: 12px; --ds-radius-lg: 18px; --ds-radius-pill: 999px; /* --------------------------------------------- ORGATYPIK : primitives propres au cabinet (charte V3.2, valeurs inchangées depuis la V2.1 ; celles que pylotik déclarait déjà, --ds-orga-navy et la série, sont plus haut, à valeur égale vérifiée) --------------------------------------------- */ /* Bleus */ /* Violets */ --ds-orga-violet-mix: #3A2878; /* @hors-charte palier de degrade, melange navy/violet */ --ds-orga-violet-overline: #D0BBFA; /* @hors-charte surtitre sur navy - 6.97:1 · 5.88:1 */ /* Gris de marque */ --ds-orga-grey-text: #6E6A66; /* Neutres */ --ds-orga-gray-50: #F5F5F7; /* @hors-charte fond de section - la charte le cite comme surface de la serie claire */ --ds-orga-gray-100: #F0F0F2; /* @hors-charte neutre d interface */ --ds-orga-gray-200: #E2E2E6; /* @hors-charte filet, bordure */ --ds-orga-gray-500: #686C78; /* @hors-charte gris de texte secondaire - 5.24:1 */ --ds-orga-gray-600: #5C6070; /* @hors-charte gris de texte secondaire */ --ds-orga-gray-900: #2D303D; /* @hors-charte texte courant - la charte ne definit qu un gris texte (#6E6A66), trop clair pour du corps de texte (5.4:1) */ /* Neutres froids lisibles sur navy. Les fonds sombres sont des DÉGRADÉS : les ratios sont vérifiés sur le stop le plus clair (--ds-orga-navy-mid), et non sur --ds-orga-navy. L'ancienne valeur #A5AAC5 n'y donnait que 4.42:1. */ --ds-orga-blue-gray-200: #C2C6DB; /* @hors-charte 7.10:1 sur navy · 5.99:1 sur navy-mid */ --ds-orga-blue-gray-300: #A7ACC7; /* @hors-charte 5.37:1 sur navy · 4.52:1 sur navy-mid */ /* Couleurs secondaires - charte V2.1. La charte les réserve aux « usages de catégorisation ou d'illustration ». Les variantes 300 sont les déclinaisons « fond sombre ». Elles sont la référence de assets/engagement-gallup.svg, qui les code en dur : un SVG chargé en ne lit pas les tokens. */ --ds-orga-emerald: #206E61; /* 6.10:1 sur blanc */ --ds-orga-emerald-light: #63D8C4; /* 5.87:1 sur navy-mid */ --ds-orga-steel: #3B617B; /* @doc-svg silo-transversal - 6.62:1 sur blanc */ --ds-orga-steel-light: #93B7D1; /* @doc-svg engagement-gallup - 4.80:1 sur navy-mid */ --ds-orga-plum: #723072; /* 8.76:1 sur blanc */ --ds-orga-plum-light: #CF81CF; /* 3.72:1 sur navy-mid - objets graphiques et texte large uniquement (seuil 3:1) */ /* Accent - charte V2.1. Le seul retenu. Conçu pour ressortir sur fond de marque (6.46:1 sur navy, 4.42:1 sur violet), jamais en texte sur blanc. Aucun composant CSS ne le lit : il vit dans silo-transversal.svg, où il ouvre le fil de la gouvernance. Cette ligne en est la référence. */ --ds-orga-turquoise: #1CD0EC; /* @doc-svg silo-transversal */ /* Pastel navy de la charte. Il était absent - « à rétablir le jour où un composant en aura besoin » - et ce jour est venu : c'est l'aplat de l'en-tête du tableau comparatif, qui portait un fond navy. APLAT SEULEMENT, jamais en texte : la charte est formelle. Ce qui se pose dessus, en revanche, doit tenir l'AA. Vérifié : navy 8.55:1, et le violet qui ferme le dégradé du wordmark 5.85:1. Le point gris du wordmark, lui, n'y donne que 2.34:1 avec --gray-brand : il prend --text-light (3.81:1), qui est le gris texte de la charte. Voir .brand-word dans style.css. Le pastel violet #E2DAF0 entre le jour où un composant le lit : le panneau de marque clair de approche.html (dégradé pastel navy → violet), pas avant. */ --ds-orga-navy-pastel: #D4D9EC; --ds-orga-violet-pastel: #E2DAF0; /* pastel violet de la charte, aplat only */ /* États. La charte définit deux séries de voyants, jamais à croiser : série fond clair (#D91117 · #F69431 · #F6E531 · #1DA43E) et série fond sombre (#F43339 · #F99938 · #FAEA42 · #1ED64C). Elles sont validées en APLAT (seuil 3:1), pas en texte : sur blanc, le vert de la charte ne donne que 3.26:1 et l'orange 2.28:1, sous le seuil AA de 4.5:1. Nos états sont du TEXTE (.form-hint), d'où ces teintes assombries. Seul le rouge de la charte passe en texte (5.19:1) : il est repris tel quel. */ --ds-orga-red: #D91117; /* rouge de la charte, série fond clair */ --ds-orga-green-text: #137A4A; /* @hors-charte vert assombri pour le TEXTE - celui de la charte ne donne que 3.26:1 */ --ds-orga-orange-text: #A95604; /* @hors-charte orange assombri pour le TEXTE - celui de la charte ne donne que 2.28:1 */ --ds-orga-link-blue: #1953D0; /* @hors-charte lien - le navy manque d affordance dans un texte deja gris. 6.58:1 sur blanc */ /* Transparences de marque - DÉRIVÉES de leur couleur source, jamais recopiées. rgb(from X r g b / a) lit les canaux de X : changer --ds-orga-navy change donc aussi ses transparences. Un rgba(31, 47, 122, 0.08) écrit à la main, lui, resterait au navy d'orgatypik le jour où une seconde marque réassignerait la palette - et le fond des icônes de carte trahirait l'ancienne identité. C'est ce qui fait tenir la promesse du fichier : une couleur changée ici se propage à TOUTE la maquette, transparences comprises. Syntaxe de couleur relative : Baseline « largement disponible » (Chrome 119, Safari 16.4, Firefox 128). Sur un navigateur antérieur, la déclaration devient invalide et l'aplat disparaît : perte cosmétique, jamais de texte illisible - aucune de ces transparences ne porte de contraste. */ --ds-orga-navy-alpha-08: rgb(from var(--ds-orga-navy) r g b / 0.08); --ds-orga-navy-alpha-12: rgb(from var(--ds-orga-navy) r g b / 0.12); --ds-orga-navy-light-alpha-10: rgb(from var(--ds-orga-navy-light) r g b / 0.10); --ds-orga-violet-alpha-05: rgb(from var(--ds-orga-violet) r g b / 0.05); --ds-orga-violet-alpha-08: rgb(from var(--ds-orga-violet) r g b / 0.08); --ds-orga-violet-alpha-10: rgb(from var(--ds-orga-violet) r g b / 0.10); --ds-orga-violet-alpha-15: rgb(from var(--ds-orga-violet) r g b / 0.15); --ds-orga-violet-alpha-30: rgb(from var(--ds-orga-violet) r g b / 0.30); --ds-orga-violet-alpha-40: rgb(from var(--ds-orga-violet) r g b / 0.40); --ds-orga-orange-alpha-08: rgb(from var(--ds-orga-orange-text) r g b / 0.08); /* Le blanc et le noir ne sont pas des couleurs de marque : ils ne changeront pas d'une marque à l'autre. Les dériver n'apporterait rien. */ --ds-orga-black-alpha-25: rgba(0, 0, 0, 0.25); --ds-orga-white-alpha-06: rgba(255, 255, 255, 0.06); --ds-orga-white-alpha-10: rgba(255, 255, 255, 0.10); --ds-orga-white-alpha-15: rgba(255, 255, 255, 0.15); --ds-orga-white-alpha-97: rgba(255, 255, 255, 0.97); }