/* =============================================
ORGATYPIK - DESIGN SYSTEM · tokens
Charte de marque V2.0
SOURCE DE VÉRITÉ UNIQUE des couleurs, de la typographie et des espacements.
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 :
1. PRIMITIVES - des valeurs, sans intention (--ds-*)
2. ALIAS - des rôles, qui pointent vers les primitives
Seuls les alias sont consommés par les composants. Cette séparation permet à
une seconde marque de réutiliser les primitives en réassignant les alias.
Ce fichier a un jumeau, tokens.json, de mêmes valeurs, destiné à un front
JavaScript. Les deux se tiennent à la main : il n'y a pas de compilation.
Toute valeur modifiée ici doit l'être là. Voir README.md.
Chargé par , jamais par @import : un @import bloque le rendu. Il doit
précéder la feuille qui le consomme.
============================================= */
:root {
/* ---------------------------------------------
1. PRIMITIVES
--------------------------------------------- */
/* Bleus */
--ds-navy-900: #151E52; /* @hors-charte palier de degrade, plus sombre que le navy */
--ds-navy-800: #182461; /* @hors-charte palier de degrade */
--ds-navy-700: #1F2F7A; /* navy de marque */
--ds-navy-600: #2A3A8A; /* @hors-charte palier de degrade - le stop le plus CLAIR, celui qui contraint les contrastes */
--ds-navy-300: #6B9BF6;
/* Violets */
--ds-violet-900: #3A2878; /* @hors-charte palier de degrade, melange navy/violet */
--ds-violet-800: #4A1A9E; /* @hors-charte palier de degrade */
--ds-violet-700: #5F23C7; /* violet de marque */
--ds-violet-400: #A379EB;
--ds-violet-200: #C4A8F5; /* @hors-charte accent sur navy - 5.88:1 · 4.96:1 */
--ds-violet-100: #D0BBFA; /* @hors-charte surtitre sur navy - 6.97:1 · 5.88:1 */
/* Gris de marque */
--ds-warm-500: #928D86;
--ds-warm-600: #6E6A66;
/* Neutres */
--ds-white: #FFFFFF;
--ds-gray-50: #F5F5F7; /* @hors-charte fond de section - la charte le cite comme surface de la serie claire */
--ds-gray-100: #F0F0F2; /* @hors-charte neutre d interface */
--ds-gray-200: #E2E2E6; /* @hors-charte filet, bordure */
--ds-gray-500: #686C78; /* @hors-charte gris de texte secondaire - 5.24:1 */
--ds-gray-600: #5C6070; /* @hors-charte gris de texte secondaire */
--ds-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-navy-600), et non sur --ds-navy-700. L'ancienne valeur
#A5AAC5 n'y donnait que 4.42:1. */
--ds-blue-gray-200: #C2C6DB; /* @hors-charte 7.10:1 sur navy · 5.99:1 sur navy-mid */
--ds-blue-gray-300: #A7ACC7; /* @hors-charte 5.37:1 sur navy · 4.52:1 sur navy-mid */
/* Couleurs secondaires - charte V2.0.
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-emerald-700: #206E61; /* 6.10:1 sur blanc */
--ds-emerald-300: #63D8C4; /* 5.87:1 sur navy-mid */
--ds-steel-700: #3B617B; /* @doc-svg silo-transversal - 6.62:1 sur blanc */
--ds-steel-300: #93B7D1; /* @doc-svg engagement-gallup - 4.80:1 sur navy-mid */
--ds-plum-700: #723072; /* 8.76:1 sur blanc */
--ds-plum-300: #CF81CF; /* 3.72:1 sur navy-mid - objets graphiques et
texte large uniquement (seuil 3:1) */
/* Accent - charte V2.0. 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-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-navy-100: #D4D9EC;
--ds-violet-050: #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-red-700: #D91117; /* rouge de la charte, série fond clair */
--ds-green-600: #137A4A; /* @hors-charte vert assombri pour le TEXTE - celui de la charte ne donne que 3.26:1 */
--ds-orange-700: #A95604; /* @hors-charte orange assombri pour le TEXTE - celui de la charte ne donne que 2.28:1 */
--ds-blue-600: #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-navy-700 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-navy-alpha-08: rgb(from var(--ds-navy-700) r g b / 0.08);
--ds-navy-alpha-12: rgb(from var(--ds-navy-700) r g b / 0.12);
--ds-navy-light-alpha-10: rgb(from var(--ds-navy-300) r g b / 0.10);
--ds-violet-alpha-05: rgb(from var(--ds-violet-700) r g b / 0.05);
--ds-violet-alpha-08: rgb(from var(--ds-violet-700) r g b / 0.08);
--ds-violet-alpha-10: rgb(from var(--ds-violet-700) r g b / 0.10);
--ds-violet-alpha-15: rgb(from var(--ds-violet-700) r g b / 0.15);
--ds-violet-alpha-30: rgb(from var(--ds-violet-700) r g b / 0.30);
--ds-violet-alpha-40: rgb(from var(--ds-violet-700) r g b / 0.40);
--ds-orange-alpha-08: rgb(from var(--ds-orange-700) 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-black-alpha-25: rgba(0, 0, 0, 0.25);
--ds-white-alpha-06: rgba(255, 255, 255, 0.06);
--ds-white-alpha-10: rgba(255, 255, 255, 0.10);
--ds-white-alpha-15: rgba(255, 255, 255, 0.15);
--ds-white-alpha-97: rgba(255, 255, 255, 0.97);
/* Échelle d'espacement - base 4 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-25: 100px;
/* Au-delà de l'échelle courante : le hero et les grandes sections. Ils étaient
écrits en dur (« padding: 160px 0 120px ») dans la maquette, ce qui les rendait
impossibles à poser en attribut de bloc - un pattern ne doit porter aucune valeur.
Ils deviennent donc des presets d'espacement, choisissables dans l'éditeur. */
--space-30: 120px;
--space-40: 160px;
/* Rayons */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 100px;
/* ---------------------------------------------
2. ALIAS SÉMANTIQUES
--------------------------------------------- */
/* Marque */
--navy: var(--ds-navy-700);
--navy-dark: var(--ds-navy-900);
--navy-deep: var(--ds-navy-800);
--navy-mid: var(--ds-navy-600);
--navy-light: var(--ds-navy-300);
--violet: var(--ds-violet-700);
--violet-light: var(--ds-violet-400);
--violet-dark: var(--ds-violet-800);
--violet-deep: var(--ds-violet-900);
--gray-brand: var(--ds-warm-500);
/* Surfaces */
--white: var(--ds-white);
--off-white: var(--ds-gray-50);
--surface-header: var(--ds-white-alpha-97);
/* Neutres */
--gray-100: var(--ds-gray-100);
--gray-200: var(--ds-gray-200);
--gray-400: var(--ds-gray-500); /* 5.24:1 AA sur blanc */
--gray-600: var(--ds-gray-600);
--text: var(--ds-gray-900);
--text-light: var(--ds-warm-600);
/* Liens sur fond clair.
--navy sert de couleur de lien par défaut (12.03:1 sur blanc).
--link sert dans les textes déjà gris, où le navy manque d'affordance. */
--link: var(--ds-blue-600); /* 6.58:1 AA sur blanc */
/* États - consommés par les états de validation du formulaire (.form-hint),
donc en TEXTE : le seuil est 4.5:1, pas le 3:1 des aplats de la charte. */
--success: var(--ds-green-600); /* 5.37:1 AA sur blanc */
--attention: var(--ds-orange-700); /* 5.22:1 AA sur blanc */
--error: var(--ds-red-700); /* 5.19:1 AA sur blanc - rouge de la charte */
/* Texte sur fond navy. Ratios donnés sur --navy, puis sur --navy-mid,
le stop le plus clair des dégradés sombres - c'est lui qui contraint. */
--on-navy-title: var(--ds-white); /* 12.03:1 · 10.14:1 */
--on-navy-overline: var(--ds-violet-100); /* 6.97:1 · 5.88:1 */
--on-navy-body: var(--ds-blue-gray-200); /* 7.10:1 · 5.99:1 */
--on-navy-muted: var(--ds-blue-gray-300); /* 5.37:1 · 4.52:1 */
--on-navy-accent: var(--ds-violet-200); /* 5.88:1 · 4.96:1 - badges, survols */
--on-navy-border: var(--ds-white-alpha-15);
--on-navy-border-subtle: var(--ds-white-alpha-06);
--on-navy-divider: var(--ds-white-alpha-10); /* filet de séparation horizontal */
--on-navy-badge-bg: var(--ds-violet-alpha-15);
--on-navy-badge-border: var(--ds-violet-alpha-30);
/* Chiffres mis en avant sur navy.
--on-navy-stat-high reprend l'émeraude du graphe d'engagement : le chiffre
cible du texte et la barre du SVG portent ainsi la même couleur. 5.87:1, il
passe même en texte courant.
--on-navy-stat-violet est réservé au TEXTE LARGE (>= 24px, ou 18.66px gras) :
le violet clair de la charte ne donne que 3.14:1 sur navy-mid. Il sert au titre
du hero, jamais à du texte courant.
--on-navy-stat-plum reprend la prune du graphe. Elle est soumise à la MÊME
restriction que --on-navy-stat-violet : 3.72:1 sur navy-mid, donc TEXTE LARGE
uniquement. Dans le SVG, les barres sont des objets graphiques et les
pourcentages du texte de 30px : le seuil y est de 3:1, jamais de 4.5:1. Hors du
SVG, elle n'est employable que sur un chiffre assez gros pour rester dans ce
régime. En texte courant, elle échoue. */
--on-navy-stat-violet: var(--ds-violet-400); /* 3.72:1 sur navy · 3.14:1 sur navy-mid - TEXTE LARGE */
--on-navy-stat-plum: var(--ds-plum-300); /* 4.41:1 sur navy · 3.72:1 sur navy-mid - TEXTE LARGE */
--on-navy-stat-high: var(--ds-emerald-300); /* 6.96:1 sur navy · 5.87:1 sur navy-mid */
/* Catégorisation sur fond clair - les couleurs SECONDAIRES de la charte, qu'elle
destine explicitement à « la catégorisation ou l'illustration ». Toutes passent
l'AA en TEXTE sur blanc, ce qui les distingue des voyants.
À employer partout où il s'agit de distinguer des familles (statuts, étiquettes,
colonnes), et NON de signaler un état à l'utilisateur. Un badge « Partiel » dans
un document de travail catégorise ; il n'alerte personne. C'est la différence qui
commande le choix, et elle évite d'avoir à inventer une teinte : la charte ne
valide ses voyants (rouge/orange/jaune/vert) qu'en APLAT, au seuil de 3:1. Son
orange ne donne que 2.28:1 en texte sur blanc. */
--cat-emerald: var(--ds-emerald-700); /* 6.06:1 sur blanc */
--cat-plum: var(--ds-plum-700); /* 8.82:1 sur blanc */
--cat-steel: var(--ds-steel-700); /* 6.62:1 sur blanc */
/* Aplats teintés et filets, sur fond clair.
Ce sont des transparences, et non des couleurs opaques : elles se posent
donc sur n'importe quelle surface sans avoir à être recalculées. Fonds
d'icône de carte, de pastille, de panneau ; anneau de focus. Aucune ne
porte de texte : le seuil de contraste ne s'y applique pas. */
--surface-tint-navy: var(--ds-navy-alpha-08);
--surface-table-head: var(--ds-navy-100); /* l'aplat de l'en-tête du tableau comparatif */
--pastel-navy: var(--ds-navy-100); /* aplats clairs, jamais en texte */
--pastel-violet: var(--ds-violet-050);
--surface-tint-violet: var(--ds-violet-alpha-08);
--surface-tint-blue: var(--ds-navy-light-alpha-10);
--surface-accent-soft: var(--ds-violet-alpha-05);
--surface-attention: var(--ds-orange-alpha-08);
--border-accent-soft: var(--ds-violet-alpha-15);
--ring-focus: var(--ds-violet-alpha-10);
/* Typographie */
--font-logo: 'Nunito', sans-serif;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Layout */
--max-width: 1200px;
--header-height: 72px;
--section-padding: var(--space-25) 0;
--radius: var(--radius-lg);
/* Élévation */
--shadow: 0 4px 24px var(--ds-navy-alpha-08);
--shadow-lg: 0 12px 48px var(--ds-navy-alpha-12);
--shadow-on-dark: 0 4px 20px var(--ds-black-alpha-25);
--shadow-violet: 0 4px 16px var(--ds-violet-alpha-30);
--shadow-violet-lg: 0 6px 24px var(--ds-violet-alpha-40);
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Dégradés */
--gradient-brand-text: linear-gradient(90deg, var(--navy) 0%, var(--violet) 100%);
--gradient-hero: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-dark) 30%, var(--navy) 70%, var(--navy-mid) 100%);
--gradient-hero-page: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-dark) 40%, var(--navy) 100%);
/* Se termine sur --violet-dark et non sur --violet : sur violet pur,
--on-navy-muted tombe à 3.67:1 et le badge à 4.02:1. */
--gradient-hero-brand: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--violet-dark) 100%);
--gradient-section-dark: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%);
--gradient-cta: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--violet-deep) 100%);
--gradient-cta-deep: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
--gradient-panel-dark: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
/* Variante CLAIRE du panneau de marque : pastels navy → violet. Les traits fins
d'une icône (le réseau du collectif) ressortent sur ce fond, là où le dégradé
sombre les noyait. Le wordmark employé est alors celui des fonds clairs. */
--gradient-panel-soft: linear-gradient(135deg, var(--pastel-navy) 0%, var(--pastel-violet) 100%);
--gradient-footer: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 80%);
--gradient-surface: linear-gradient(135deg, var(--off-white) 0%, var(--gray-100) 100%);
/* Vignettes d'article - toutes issues de la charte */
--gradient-media-1: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
--gradient-media-2: linear-gradient(135deg, var(--violet) 0%, var(--violet-light) 100%);
--gradient-media-3: linear-gradient(135deg, var(--navy-light) 0%, var(--violet-light) 100%);
}