/* =============================================
PYLOTIK - DESIGN SYSTEM · tokens
Charte de marque et d'identité visuelle, version du 14 juin 2026
SOURCE DE VÉRITÉ UNIQUE des couleurs, de la typographie et des espacements du
site pylotik.com. Aucune valeur de couleur ni d'espacement ne doit exister
ailleurs : une couleur changée ici se propage à toute la maquette, et à elle
seule.
Deux couches, reprises du design system orgatypik :
1. PRIMITIVES - des valeurs, sans intention (--ds-*)
2. ALIAS - des rôles, qui pointent vers les primitives
Seuls les alias sont consommés par style.css. C'est cette séparation qui rend
le mode sombre tenable : le bloc @media en fin de fichier NE RÉASSIGNE QUE DES
ALIAS, il n'invente aucune couleur. La charte (p. 4) prescrit exactement cette
mécanique : sur la coque sombre, le Bleu principal cède l'affichage au Bleu
clair, l'accent passe au Terracotta lumineux, le gris s'éclaircit.
Chargé par , jamais par @import : un @import bloque le rendu. Il doit
précéder la feuille qui le consomme.
============================================= */
:root {
/* ---------------------------------------------
1. PRIMITIVES
--------------------------------------------- */
/* Couleurs identitaires - charte §03. Les cinq valeurs font foi. */
--ds-blue-700: #26466D; /* Bleu principal · titres, structure, segment « pylot » */
--ds-blue-500: #4D7CB1; /* Bleu clair · information, variante claire */
--ds-blue-300: #7096C1; /* Bleu clair mode sombre · cède l'affichage au Bleu principal */
--ds-terra-700: #CC5500; /* Terracotta · accent, appels à l'action, segment « ik » */
/* @hors-charte terracotta assombris. Le terracotta de la charte ne donne que
4.31:1 sur blanc : sous le seuil AA de 4.5:1, aussi bien en TEXTE (lien,
surtitre) qu'en FOND PORTEUR DE TEXTE (bouton blanc sur terracotta). Il
reste la couleur juste pour les aplats décoratifs qui ne portent rien -
filets, bordures, pastilles - où seul le seuil 3:1 s'applique. D'où deux
valeurs assombries, sur le modèle des états assombris d'orgatypik. */
--ds-terra-800: #B84D00; /* @hors-charte 5.12:1 sur blanc · 4.70:1 sur le fond */
--ds-terra-900: #A84600; /* @hors-charte survol, un cran plus sombre - 5.93:1 */
--ds-terra-600: #E06D20; /* Terracotta lumineux · survol, accent sur fond foncé */
--ds-terra-500: #E2752C; /* Terracotta mode sombre */
--ds-grey-eq: #909090; /* Gris Équilibre · le point « . » du mot de marque */
--ds-grey-eq-dark: #939393; /* 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
#26466D : c'est lui qui contraint tous les contrastes posés dessus. */
--ds-blue-900: #16283F;
--ds-blue-950: #0F1D2E; /* @hors-charte un cran sous le 900 - départ du dégradé des bandeaux en thème sombre */
--ds-blue-800: #1D3654;
/* @hors-charte terracotta éclairci, seule teinte d'accent lisible en TEXTE sur
le dégradé navy : le Terracotta lumineux de la charte n'y donne que 2.93:1.
4.65:1 sur le palier le plus clair du dégradé. */
--ds-terra-300: #F2A268;
/* @hors-charte bleu éclairci pour le TEXTE sur le dégradé navy. La variante
foncée de la charte (#7096C1) est conçue pour la coque quasi noire, où elle
donne 5.22:1 ; sur un fond bleu, elle retombe à 3.13:1. Ce palier-ci donne
5.44:1 sur le plus clair des stops. */
--ds-blue-200: #A8C6E4;
/* 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-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;
/* @hors-charte orgatypik : paliers encore plus clairs, pour le seul cas du
mot « orgatypik » posé sur le dégradé navy de nos héros. Ses variantes fond
sombre sont calibrées pour la coque noire (#1A1A1D) ; sur du bleu, 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: #3B5A80; /* @hors-charte filet sur fond bleu - 1.4:1 sur #26466D, 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.
Le « rouge » du fournisseur est en réalité un prune 330°, choisi dans le
produit pour ne pas se confondre avec le vert de succès. */
--ds-actor-client-bg: #E2D8F0; --ds-actor-client-tx: #5B2D8E; /* violet */
--ds-actor-self-bg: #D8E2F0; --ds-actor-self-tx: #26466D; /* bleu de marque */
--ds-actor-supplier-bg: #ECD9E2; --ds-actor-supplier-tx: #7A3D5A; /* prune */
--ds-actor-client-bg-dark: #2D1F3D; --ds-actor-client-tx-dark: #B088D4;
--ds-actor-self-bg-dark: #1E3148; --ds-actor-self-tx-dark: #8BB3D9;
--ds-actor-supplier-bg-dark: #4A2637; --ds-actor-supplier-tx-dark: #D9A0B8;
/* 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;
/* Pulse / ressenti (composant PylotPulse de l'application) : GOOD, NEUTRAL,
BAD, TERRIBLE. Repris tels quels pour les jauges d'exposition (aplats,
seuil 3:1). L'app ne dérive que TERRIBLE en sombre. */
--ds-pulse-good: #7CB342;
--ds-pulse-neutral: #E8B41C;
--ds-pulse-bad: #E27122;
--ds-pulse-terrible: #C92A2A; --ds-pulse-terrible-dark: #E06363;
/* @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: #3E6592; /* @hors-charte bleu clair lisible en texte - 6.03:1 */
/* 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(38, 70, 109, 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(38, 70, 109, 0.08);
--ds-blue-a08: rgb(from var(--ds-blue-700) r g b / 0.08);
--ds-blue-a16: rgba(38, 70, 109, 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(38, 70, 109, 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;
/* Ce que le site déclare au NAVIGATEUR, et pas seulement à sa feuille de
style. Les widgets natifs - case à cocher, bouton radio, ascenseurs,
poignée de redimensionnement d'un textarea - sont dessinés par le système,
pas par nous : sans cette ligne ils restent clairs en thème sombre, et la
case à cocher sort en carré blanc au milieu d'une page presque noire.
« light dark » et non « dark » : le site suit le thème système dans les
deux sens. */
color-scheme: light dark;
/* ---------------------------------------------
2. ALIAS · thème clair
Seuls ces noms sont consommés par style.css.
--------------------------------------------- */
/* Marque */
--brand: var(--ds-blue-700); /* segment « pylot », titres, structure */
--brand-soft: var(--ds-blue-600-txt); /* information lue en texte (badge « planifié ») */
/* ACCENT : le Terracotta de la charte, #CC5500, sans retouche. Décision de
marque, prise en connaissance de cause : ce terracotta ne donne que 4.31:1
avec du blanc, soit un cheveu sous le seuil AA de 4.5:1 pour du texte de
taille courante. Il est appliqué tel quel parce que la couleur identitaire
prime ici ; le palier assombri --ds-terra-800 reste disponible et sert au
SURVOL, où il renforce l'affordance en plus de gagner du contraste.
Pour repasser AA partout, une seule ligne à changer : remettre
var(--ds-terra-800) ci-dessous. */
--accent: var(--ds-terra-700);
--accent-hover: var(--ds-terra-800);
--accent-flat: var(--ds-terra-700); /* même valeur : la distinction entre l'accent
« texte » et l'accent « aplat » n'a plus lieu
d'être, tout est au terracotta de la charte. */
--grey-eq: var(--ds-grey-eq); /* le point « . » - TOUJOURS gris, jamais coloré */
/* LOGOTYPE. Le mot de marque ne se recolore pas : la charte l'interdit
explicitement. Ses segments prennent donc les valeurs identitaires exactes,
et non les terracottas assombris employés pour le texte courant. C'est
admissible parce que le mot de marque est toujours composé en grand
(≥ 24 px, graisse 800), où le seuil applicable est 3:1 - et non 4.5:1. */
--brand-mark: var(--ds-blue-700);
--accent-mark: var(--ds-terra-700);
/* Surfaces */
--shell: var(--ds-gray-050); /* fond de page */
--surface: var(--ds-white); /* cartes, panneaux */
--surface-alt: var(--ds-gray-100); /* survol, alternance */
--line: var(--ds-gray-150);
/* Texte */
--text-title: var(--ds-blue-700);
--text: var(--ds-gray-700);
--text-soft: var(--ds-gray-500);
--on-dark: var(--ds-white);
--on-dark-soft: #B9C4D2; /* @hors-charte 8.1:1 sur la coque sombre */
/* Transparences du blanc, pour les bordures et survols posés sur fond sombre.
Dérivées de --ds-white, comme les transparences de marque : rien en dur
dans les composants. */
--on-dark-a35: rgba(255, 255, 255, 0.35);
--on-dark-a35: rgb(from var(--ds-white) r g b / 0.35);
--on-dark-a10: rgba(255, 255, 255, 0.10);
--on-dark-a10: rgb(from var(--ds-white) r g b / 0.10);
/* Liens */
--link: var(--ds-terra-700);
--link-hover: var(--ds-blue-700);
/* Bandeaux sombres en thème CLAIR : la charte impose la variante foncée du
logo et les couleurs remontées dès que le fond est sombre, même au sein
d'une page claire. Ces alias servent aux sections .band-dark. */
/* Tous les fonds bleus du site partent d'ici. En thème CLAIR c'est le Bleu
principal de la charte : posé sur du blanc, il tranche. En thème SOMBRE
il descend au Bleu 900 : à côté d'une coque quasi noire, le Bleu principal
ressort comme une tache lumineuse, alors qu'un bleu profond se pose dans
la page. La charte parle de « remonter » les couleurs sur fond sombre pour
le TEXTE ; un fond, lui, fait le trajet inverse. Les contrastes ne font
qu'y gagner : l'encre douce passe de 5,46 à 8,44:1, l'accent de 4,65 à
7,20:1. */
--navy-base: var(--ds-blue-700);
--navy-deep: var(--ds-blue-800); /* départ du dégradé des bandeaux */
--dark-shell: var(--navy-base); /* fond des bandeaux et des cartes bleues */
--dark-surface: var(--navy-deep); /* carte posée sur un fond bleu, un cran plus profond */
--dark-line: var(--ds-blue-600-line);
/* Sur du BLEU, la variante « coque sombre » de la charte ne tient plus le
contraste (3.13:1) : elle est faite pour un fond quasi noir. Les fonds
sombres du site étant désormais bleus, ils empruntent les mêmes paliers
éclaircis que les héros. */
--dark-brand: var(--ds-blue-200);
--dark-accent: var(--ds-terra-300);
/* Le pied de page prend la surface sombre #1A1A1D, la MÊME dans les deux
thèmes : c'est la valeur de l'en-tête en mode sombre, un ancrage stable qui
ne dépend pas du réglage système. En thème clair il tranche sur du blanc,
en thème sombre il rejoint l'en-tête. Rien n'est réassigné plus bas. */
--footer-shell: var(--ds-surface-dark);
/* États applicatifs (démonstration produit), en version lisible en texte. */
--state-success: var(--ds-state-success);
--state-success-light: var(--ds-state-success-light-txt);
--state-waiting: var(--ds-state-waiting-txt);
--state-running: var(--ds-state-running-txt);
--state-alert: var(--ds-state-alert);
--pulse-good: var(--ds-pulse-good);
--pulse-neutral: var(--ds-pulse-neutral);
--pulse-bad: var(--ds-pulse-bad);
--pulse-terrible: var(--ds-pulse-terrible);
/* Dégradés. Ils composent les fonds de héros et les bandeaux sombres. Le
palier le plus clair de chacun est celui sur lequel les contrastes se
vérifient - jamais le plus sombre, qui flatte les chiffres. */
/* Héros : le Bleu principal, et lui seul, porte le fond. La chaleur n'est pas
un second aplat mais un VOILE de terracotta à 20 % au maximum, qui ne
commence qu'à 60 % de la largeur et ne sature jamais : au bord droit, le
mélange donne #444959 - un bleu réchauffé, pas un orange. C'est ce qui
permet au blanc d'y rester à 8.96:1 et au texte doux à 5.07:1, là où un
terracotta plein les aurait fait tomber à 4.31:1 et 2.6:1.
Le voile est DÉRIVÉ du terracotta de la charte : le changer là-haut le
change ici. Repli sans syntaxe relative sur la ligne précédente. */
--veil-terra: rgba(204, 85, 0, 0.20);
--veil-terra: rgb(from var(--ds-terra-700) r g b / 0.20);
--veil-terra-soft: rgba(204, 85, 0, 0.16);
--veil-terra-soft: rgb(from var(--ds-terra-700) r g b / 0.16);
/* Le départ du voile est un terracotta d'opacité NULLE, pas `transparent` :
`transparent` vaut un noir transparent, et certaines interpolations le font
virer au gris en cours de route. */
--veil-terra-0: rgba(204, 85, 0, 0);
--veil-terra-0: rgb(from var(--ds-terra-700) r g b / 0);
/* Voile bleu clair, même logique : un halo froid dérivé du Bleu clair de la
charte, qui éclaire un angle du fond sans le déteindre. */
--sheen-blue: rgba(77, 124, 177, 0.26);
--sheen-blue: rgb(from var(--ds-blue-500) r g b / 0.26);
--sheen-blue-0: rgba(77, 124, 177, 0);
--sheen-blue-0: rgb(from var(--ds-blue-500) r g b / 0);
/* Héros : plus une géométrie, une atmosphère. Le Bleu principal porte le fond ;
par-dessus, deux halos radiaux librement posés hors cadre - un froid en haut
à gauche, un chaud (terracotta) en bas à droite - qui se fondent dans le
bleu sans jamais le saturer. Aucun stop net, aucune bascule : le texte, à
gauche, reste sur le bleu franc. Les halos sont DÉRIVÉS des couleurs de la
charte, donc solidaires d'elles. */
--gradient-hero:
radial-gradient(135% 115% at 116% 128%, var(--veil-terra) 0%, var(--veil-terra-0) 48%),
radial-gradient(85% 105% at -12% -25%, var(--sheen-blue) 0%, var(--sheen-blue-0) 55%),
var(--navy-base);
--gradient-hero-page:
radial-gradient(120% 130% at 118% 130%, var(--veil-terra) 0%, var(--veil-terra-0) 42%),
radial-gradient(80% 120% at -10% -30%, var(--sheen-blue) 0%, var(--sheen-blue-0) 52%),
var(--navy-base);
/* Sous 900 px, le chaud descend sous le texte et le froid coiffe le haut. */
--gradient-hero-mobile:
radial-gradient(120% 55% at 108% 112%, var(--veil-terra-soft) 0%, var(--veil-terra-0) 60%),
radial-gradient(120% 45% at 0% -6%, var(--sheen-blue) 0%, var(--sheen-blue-0) 65%),
var(--navy-base);
/* Bandeaux sombres et pied de page : le Bleu principal, pas la coque noire. */
--gradient-band: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-base) 65%);
/* Teintes lisibles sur le dégradé navy - surtitres, liens et mot de marque
des héros. Le fond bleu est un cas à part : ni la palette claire ni la
variante « coque sombre » n'y tiennent le contraste. */
--accent-on-navy: var(--ds-terra-300);
--brand-on-navy: var(--ds-blue-200);
/* Deux états nommés dans le texte, sur fond bleu. Le vert « mode sombre » de
la palette fonctionnelle y tient déjà (7,42:1 sur le Bleu principal). Le
rouge, lui, n'y tient pas : #FF5B4C ne donne que 3,14:1, soit le seuil des
objets graphiques, pas celui d'un mot lu dans une phrase. Il est donc
éclairci à luminosité près, teinte et saturation inchangées, jusqu'à
4,65:1 - et 7,19:1 sur le bleu profond du thème sombre. */
/* Voile du bouton fantôme accentué, dérivé de sa propre encre. */
--accent-on-navy-a12: rgba(242, 162, 104, 0.12);
--accent-on-navy-a12: rgb(from var(--accent-on-navy) r g b / 0.12);
--state-success-on-navy: var(--ds-state-success-dark);
--state-alert-on-navy: var(--ds-state-alert-on-navy);
--pasteque-on-navy: var(--ds-pasteque-on-navy);
--state-waiting-on-navy: var(--ds-state-waiting); /* jaune vif, lisible sur le bleu de marque */
/* Mise en avant « les meilleurs font mieux ». Un aplat vert plein à texte blanc
criait trop fort au milieu d'un paragraphe : c'est devenu un voile, très
léger, avec le texte en vert soutenu. Deux jeux, parce qu'un voile est
translucide et prend donc la couleur de ce qu'il y a derrière.
Sur fond clair : voile à 12 %, texte #0F6B3E, 5.6:1 sur blanc et 5.2:1 sur
le gris de fond. Sur fond bleu : voile de vert clair à 14 %, texte #4CFFA6,
5.3:1. */
--actor-client-bg: var(--ds-actor-client-bg); --actor-client-tx: var(--ds-actor-client-tx);
--actor-self-bg: var(--ds-actor-self-bg); --actor-self-tx: var(--ds-actor-self-tx);
--actor-supplier-bg: var(--ds-actor-supplier-bg); --actor-supplier-tx: var(--ds-actor-supplier-tx);
--success-veil: var(--ds-badge-success-light-bg);
--success-ink: var(--ds-badge-success-light-tx);
--success-veil-on-navy: rgba(163, 230, 53, 0.10);
--success-veil-on-navy: rgb(from var(--ds-state-success-light-dark) r g b / 0.10);
--success-ink-on-navy: var(--ds-state-success-light-dark);
/* Marque de l'éditeur (voir primitives). Deux variantes, comme partout : la
série claire sur fond clair, la série éclaircie sur fond sombre. */
--orga-from: var(--ds-orga-navy);
--orga-to: var(--ds-orga-violet);
--orga-dot: var(--ds-orga-grey);
--orga-from-on-dark: var(--ds-orga-navy-light);
--orga-to-on-dark: var(--ds-orga-violet-light);
--orga-dot-on-dark: var(--ds-orga-grey-light);
--orga-from-on-navy: var(--ds-orga-navy-on-navy);
--orga-to-on-navy: var(--ds-orga-violet-on-navy);
/* Dégradé de panneau aux couleurs de l'éditeur : c'est la signature de fond
d'orgatypik, du navy vers le violet. Réservé aux blocs qui PARLENT
d'orgatypik, jamais employé comme fond de pylotik. Blanc dessus : 12.0:1 au
départ, 8.2:1 à l'arrivée. */
/* Le panneau « Le cabinet orgatypik » reprend l'AMBIANCE NAVY du site
orgatypik : son degrade de heros, un navy profond qui descend d'un bleu
nuit a un bleu de marque, et non le navy vers violet vif de la signature.
Les quatre paliers sont ceux du fichier de tokens d'orgatypik. */
--gradient-orga: linear-gradient(135deg, var(--ds-orga-navy-deep) 0%, var(--ds-orga-navy-dark) 30%, var(--ds-orga-navy) 70%, var(--ds-orga-navy-mid) 100%);
/* Effets */
--tint-brand: var(--ds-blue-a08);
--tint-brand-strong: var(--ds-blue-a16);
--tint-accent: var(--ds-terra-a10);
/* Fonds de pastille dérivés des états, pour les icônes qui parlent de réussite
ou d'alerte. Aplats seulement : rien ne se pose dessus qu'une icône. */
--tint-green: rgba(19, 134, 77, 0.12);
--tint-green: rgb(from var(--ds-state-success) r g b / 0.12);
--tint-alert: rgba(188, 40, 27, 0.10);
--tint-alert: rgb(from var(--ds-state-alert) r g b / 0.10);
--tint-yellow: rgba(255, 228, 26, 0.14);
--tint-yellow: rgb(from var(--ds-state-waiting) r g b / 0.14);
--shadow-card: 0 1px 2px var(--ds-shadow), 0 8px 24px -12px var(--ds-shadow);
/* Une seule ombre, sans étalement ni décalage négatif : drop-shadow() ne les
accepte pas. Pas de variante en mode sombre, son seul fond est le bleu du
héros, qui ne s'éclaircit jamais. */
--shadow-object: 0 18px 26px var(--ds-shadow-object);
/* Voile posé sur l'illustration de fond des héros de page. Nul en clair : les
illustrations sont peintes sur le bleu de la charte, le raccord au héros est
déjà invisible (dix points d'écart, sur le seul canal bleu). En mode sombre
en revanche la coque descend au bleu 900 pendant que l'illustration garde le
sien : sans ce voile, elle se détache en bande claire à mi-hauteur. */
--veil-illu: rgba(38, 70, 109, 0);
--transition: 180ms ease;
/* Typographie */
--font-brand: var(--ds-font-nunito);
--font-heading: var(--ds-font-montserrat);
--font-body: var(--ds-font-dm-sans);
--font-mono: var(--ds-font-jetbrains);
--font-num: var(--ds-font-dm-sans); /* Inter le jour où elle est déposée - voir assets/fonts/fonts.css */
/* Espacements (alias de commodité, mêmes valeurs) */
--space-1: var(--ds-space-1); --space-2: var(--ds-space-2);
--space-3: var(--ds-space-3); --space-4: var(--ds-space-4);
--space-5: var(--ds-space-5); --space-6: var(--ds-space-6);
--space-7: var(--ds-space-7); --space-8: var(--ds-space-8); --space-10: var(--ds-space-10);
--space-12: var(--ds-space-12); --space-16: var(--ds-space-16);
--space-20: var(--ds-space-20); --space-24: var(--ds-space-24);
--radius-sm: var(--ds-radius-sm);
--radius: var(--ds-radius);
--radius-lg: var(--ds-radius-lg);
--radius-pill: var(--ds-radius-pill);
--max-width: 1160px;
}
/* =============================================
3. ALIAS · thème sombre
Aucune primitive n'est redéfinie ici : on ne fait que rebrancher les alias sur
les valeurs « mode sombre » déjà déclarées plus haut. C'est la traduction
littérale de la page 4 de la charte : « les couleurs sont remontées pour
préserver le contraste (AA) : le Bleu principal cède l'affichage au Bleu clair
#7096C1, l'accent passe au Terracotta #E2752C, le Gris à #939393. »
Pas de bouton de bascule sur le site : on suit le thème du système. Le logo
suit par dans le HTML, puisqu'un PNG ne lit pas les tokens.
============================================= */
@media (prefers-color-scheme: dark) {
:root {
--brand: var(--ds-blue-300);
--brand-soft: var(--ds-blue-300);
--accent: var(--ds-terra-500);
--accent-hover: var(--ds-terra-600);
--accent-flat: var(--ds-terra-500);
--grey-eq: var(--ds-grey-eq-dark);
/* Le logotype suit la variante foncée de la charte : sur fond sombre, le
Bleu principal cède l'affichage au Bleu clair et l'accent au Terracotta
lumineux. Ce sont les couleurs du symbole foncé, d'où le côté
HTML : le mot et le symbole restent accordés. */
--brand-mark: var(--ds-blue-300);
--accent-mark: var(--ds-terra-500);
--shell: var(--ds-shell-dark);
--surface: var(--ds-surface-dark);
--surface-alt: var(--ds-line-dark-soft);
--line: var(--ds-line-dark);
--text-title: var(--ds-text-dark);
--text: var(--ds-text-dark);
--text-soft: var(--ds-text-soft-dark);
--link: var(--ds-terra-500);
--link-hover: var(--ds-blue-300);
/* Les bandeaux restent BLEUS en mode sombre - un bandeau noir sur une
coque noire ne se distinguerait plus - mais d'un bleu PLUS PROFOND, qui
cohabite avec la coque au lieu de lui crier dessus. Voir --navy-base.
Le pied de page, lui, ne bouge pas : il vaut #1A1A1D dans les deux
thèmes, il n'y a rien à réassigner ici. */
--navy-base: var(--ds-blue-900);
--navy-deep: var(--ds-blue-950);
/* La carte posée SUR un bandeau ne peut plus être « un cran plus profond »
sans virer au noir : en sombre elle remonte d'un cran à la place. */
--dark-surface: var(--ds-blue-800);
/* Mise en avant « les meilleurs font mieux » : le voile clair de la série
claire serait un pavé lumineux au milieu d'un paragraphe sombre (0.80 de
luminance contre 0.015 pour la page). Elle bascule sur le jeu prévu pour
les fonds sombres, voile translucide et encre vert clair : 8,42:1 sur la
coque, 7,87:1 sur un bandeau bleu. */
--success-veil: var(--success-veil-on-navy);
--success-ink: var(--success-ink-on-navy);
/* Série sombre des états - jamais croisée avec la série claire. */
--state-success: var(--ds-state-success-dark);
--state-success-light: var(--ds-state-success-light-dark);
--state-waiting: var(--ds-state-waiting-dark);
--state-running: var(--ds-state-running-dark);
--state-alert: var(--ds-state-alert-dark);
--pulse-terrible: var(--ds-pulse-terrible-dark);
--actor-client-bg: var(--ds-actor-client-bg-dark); --actor-client-tx: var(--ds-actor-client-tx-dark);
--actor-self-bg: var(--ds-actor-self-bg-dark); --actor-self-tx: var(--ds-actor-self-tx-dark);
--actor-supplier-bg: var(--ds-actor-supplier-bg-dark); --actor-supplier-tx: var(--ds-actor-supplier-tx-dark);
/* Le mot « orgatypik » cité dans le texte courant passe, lui aussi, à la
variante fond sombre de SA charte : navy → bleu clair, violet → violet
clair, point gris → gris clair. */
--orga-from: var(--ds-orga-navy-light);
--orga-to: var(--ds-orga-violet-light);
--orga-dot: var(--ds-orga-grey-light);
--tint-brand: rgb(from var(--ds-blue-300) r g b / 0.12);
--tint-brand-strong: rgb(from var(--ds-blue-300) r g b / 0.22);
--tint-accent: rgb(from var(--ds-terra-500) r g b / 0.14);
--tint-green: rgb(from var(--ds-state-success-dark) r g b / 0.14);
--tint-alert: rgb(from var(--ds-state-alert-dark) r g b / 0.14);
--tint-yellow: rgb(from var(--ds-state-waiting-dark) r g b / 0.16);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
/* La coque est passée au bleu 900, l'illustration de fond est restée peinte
sur le bleu 700 : ce voile la ramène au niveau de la page. Sans lui, elle
forme une bande claire nettement visible sur la moitié droite du héros. */
--veil-illu: rgb(from var(--ds-blue-900) r g b / 0.52);
}
}