/* Emplacement : css/tokens.css ========================================================================= DESIGN TOKENS — source unique de vérité de l'identité visuelle. Charte Dedienne Aerospace (orange dominant + bleu structurel). Les couleurs sémantiques (vert/orange/rouge/gris) sont RÉSERVÉES aux statuts et ne servent jamais à la décoration. ========================================================================= */ :root { /* ----- Marque ----- */ --primary: #E9631B; /* Orange Dedienne : action / marque (dominant) */ --primary-light: #F2803F; --primary-dark: #C4530F; /* hover / pressé */ --primary-tint: #FDEFE4; /* fond orangé très clair */ --accent: #2059A6; /* Bleu Dedienne : secondaire (liens, info) */ --accent-hover: #17457F; /* ----- Structure (barre latérale) ----- */ --sidebar-bg: #2059A6; --sidebar-bg-2: #16457C; --sidebar-text: rgba(255,255,255,0.85); --sidebar-width: 260px; /* ----- Surfaces & texte ----- */ --bg-body: #f5f6f8; /* fond de contenu (gris très pâle, pas blanc pur) */ --bg-card: #ffffff; --text-main: #1f2d3d; --text-muted: #6b7a8d; --border: #e2e6ea; /* ----- Couleurs sémantiques (STATUTS UNIQUEMENT) ----- */ --color-success: #27ae60; /* conforme / maîtrisé */ --color-warning: #e08a00; /* partiel / à surveiller */ --color-danger: #c0392b; /* critique / non conforme */ --color-info: #2059A6; /* information */ --color-gray: #94a3b8; /* non applicable */ /* alias explicites */ --color-ok: var(--color-success); --color-warn: var(--color-warning); --color-crit: var(--color-danger); --color-na: var(--color-gray); /* teintes claires (fonds de badges) */ --tint-ok: #e6f4ea; --tint-warn: #fff4e0; --tint-crit: #fbe9e7; --tint-na: #eef1f5; /* Tint du bleu de STRUCTURE — et non d'un statut. Ajouté le 11/09/2026 pour l'échelle de diffusion des documents (migration 027), qui ne doit surtout pas emprunter les quatre couleurs sémantiques : un document « restreint » n'est pas « critique ». */ --tint-info: #e8eff8; /* ----- Niveaux de risque (heatmap / matrice) ----- */ --risk-low: var(--color-success); --risk-medium: #f1c40f; --risk-high: #e67e22; --risk-critical: var(--color-danger); /* ----- Espacements ----- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ----- Rayons ----- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* ----- Ombres ----- */ --shadow: 0 1px 3px rgba(16,32,60,0.08); --shadow-md: 0 4px 12px rgba(16,32,60,0.10); /* ----- Typographie ----- ⚠️ AUCUNE police n'est chargée depuis un réseau. La règle du projet est nette — « aucun CDN runtime ni service tiers » —, et un outil déployé sur site derrière un VPN ne doit rien attendre de l'extérieur pour s'afficher. On emploie donc la pile SYSTÈME, ordonnée du plus moderne au plus sûr : chaque système rend sa police d'interface native, ce qui est ce qu'un logiciel professionnel fait de mieux sans rien télécharger. */ --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; /* Pour ce qui doit se LIRE CARACTÈRE PAR CARACTÈRE : identifiants métier, empreintes SHA-256, références d'audit, numéros de récépissé. En proportionnelle, « RSK-1788477623975-5208b3 » se relit mal et se recopie plus mal encore — or c'est ce qu'un auditeur recopie. */ --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace; /* Échelle typographique MODULAIRE. Les tailles étaient posées au cas par cas (0.72, 0.78, 0.8, 0.85, 0.88, 0.9, 1.05, 1.15 rem…) : douze valeurs pour cinq intentions, ce qui se voit à l'œil comme un défaut d'alignement sans qu'on sache le nommer. Sept marches, et rien entre elles. */ --text-xs: 0.75rem; /* 12 px — étiquettes, mentions légales */ --text-sm: 0.8125rem; /* 13 px — tableaux denses */ --text-base: 0.9375rem; /* 15 px — corps */ --text-md: 1rem; /* 16 px — corps confortable, formulaires */ --text-lg: 1.125rem; /* 18 px — titres de carte */ --text-xl: 1.375rem; /* 22 px — titres d'écran */ --text-2xl: 1.75rem; /* 28 px — chiffres clés */ /* ── Les deux tailles d'AFFICHAGE, posées le 16/09 ──────────────────── Elles ne servent pas au corps de texte mais aux nombres qu'on lit de loin : la tuile d'un tableau de bord, le taux d'une synthèse. Elles existent parce que les modules en portaient CINQ valeurs différentes — 2, 2.2, 2.4, 2.5 et 4 rem — pour ce qui est le même geste de lecture, et qu'un tableau de bord dont les chiffres n'ont pas la même taille se lit comme un brouillon. */ --text-3xl: 2.25rem; /* 36 px — chiffre clé d'une tuile */ --text-4xl: 3rem; /* 48 px — chiffre unique d'un écran de synthèse */ /* Interlignes. 1.5 au corps est le plancher de lisibilité ; les titres se resserrent, sans quoi ils flottent. */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Largeur de lecture confortable : 65 à 75 signes. Au-delà, l'œil perd sa ligne au retour — et les notes d'aide de ce produit sont de la prose. */ --mesure-texte: 68ch; /* ----- Mouvement ----- */ --transition: all 0.25s ease; } @media (prefers-reduced-motion: reduce) { :root { --transition: none; } } /* ===================================================================== MARQUE DE CHAMP OBLIGATOIRE (passe de style du 21/09/2026) ⚠️ **Elle a SON token, et n'emprunte PAS `--color-danger`.** Le produit réserve ses quatre couleurs sémantiques aux STATUTS — vert conforme, orange partiel, rouge critique, gris non applicable (`CLAUDE.md` §2) —, et une pièce d'audit vit de cette lecture-là. Un astérisque de saisie peint du rouge « critique » dilue le seul code couleur sur lequel le lecteur d'un rapport s'appuie. ⚠️ Jusqu'au 21/09/2026, ces astérisques portaient `style="color:red"` — **39 fois, dans 17 modules** : une couleur brute, hors du système de tokens que ce fichier existe pour tenir. ===================================================================== */ :root { --marque-requis: #9b4a3f; /* terre brûlée : lisible, et NON sémantique */ }