/* ============================================================================ POLICE UNIQUE HELVETICA (PBI #803) ---------------------------------------------------------------------------- Décision DG : une seule police sur tout SimpioSell, aucun mélange. On remappe TOUTES les familles nommées en dur (Newsreader, IBM Plex Sans/Mono, Rubik, Montserrat, Inter, Roboto, Georgia, Times New Roman, Segoe UI…) vers Helvetica au niveau du navigateur : partout où le code dit font-family:"Newsreader" (ou autre), Helvetica est servie. Réversible : supprimer ce bloc = retour à l'origine. ============================================================================ */ @font-face { font-family: "Newsreader"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "IBM Plex Sans"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "IBM Plex Mono"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Rubik"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Montserrat"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Inter"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Roboto"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Poppins"; src: local("Helvetica"), local("Arial"); } /* Familles restantes (serif, mono, systèmes) — toutes remappées vers Helvetica, aucune exception. */ @font-face { font-family: "Georgia"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Times New Roman"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "IBM Plex Mono"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "SFMono-Regular"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "SF Mono"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Menlo"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Consolas"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Courier"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Courier New"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Monaco"; src: local("Helvetica"), local("Arial"); } @font-face { font-family: "Segoe UI"; src: local("Helvetica"), local("Arial"); } /* ============================================================================ SSM DESIGN TOKENS — source unique du design system SimpioSell (EPIC #12) ---------------------------------------------------------------------------- Toutes les couleurs, polices, rayons et espacements des composants Ssm* passent par ces variables. Référence : docs/charte-graphique.md (EPIC #1240). CHARTE « SAAS MODERNE » (PBI #1241) — gris clair et blanc, texte encre, accent bleu cobalt, rouge brique. Le mobile (/m/*) suit ces valeurs par ses --mv-*. ============================================================================ */ :root { /* --- Surfaces & fonds --- */ --ssm-bg: #F6F7F9; /* fond de page */ --ssm-surface: #FFFFFF; /* cartes, tableaux, panneaux, menu */ --ssm-surface-2: #F9FAFB; /* en-tête de tableau, fond discret */ --ssm-surface-3: #F1F3F6; /* fond enfoncé : piste des segments, étiquette neutre */ --ssm-surface-soft: #FBFCFD; /* survol de ligne, encart déplié */ /* --- Texte / encre --- */ --ssm-ink: #16191D; /* texte principal, titres */ --ssm-ink-2: #344054; /* libellé de champ, texte de puce et de badge */ --ssm-text-2: #4A5262; /* texte secondaire, libellé de KPI */ --ssm-text-3: #6B7380; /* atténué : en-tête de tableau, aide, référence */ --ssm-text-4: #8B93A1; /* valeur vide (tiret « — »), icône neutre */ --ssm-text-disabled: #A3AAB6; /* élément désactivé, jour hors plage */ /* --- Bordures --- */ --ssm-rule: #E4E7EC; /* bordure standard (cartes, tableaux) */ --ssm-rule-2: #D0D5DD; /* bordure des champs, boutons secondaires, puces */ --ssm-rule-light: #EEF0F3; /* séparateur de lignes */ --ssm-rule-strong: #C3C8D1; /* bordure au survol, case non cochée */ /* --- Accent (action, lien, état actif) : bleu cobalt --- */ --ssm-accent: #1F5FAF; --ssm-accent-hover: #174A8A; --ssm-accent-bg: #E8EEF7; /* menu actif, anneau de focus, filtre actif */ --ssm-accent-border: #BFD0EA; /* --- Sémantique --- */ --ssm-success: #2F7D57; --ssm-success-bg: #EAF4EE; --ssm-success-text: #2F7D57; --ssm-success-strong: #246345; /* texte positif appuyé */ --ssm-success-border: #CFE6D8; --ssm-warning: #9A5F0A; --ssm-warning-bg: #FBF3E6; --ssm-warning-bg-soft: #FDF8EF; --ssm-warning-text: #7A4A08; /* titre d'une alerte */ --ssm-warning-border: #EBD3AE; --ssm-danger: #A63D40; /* rouge brique : perte, erreur, suppression */ --ssm-danger-bg: #F8ECEC; --ssm-danger-bg-soft: #FBF4F4; --ssm-danger-text: #8A3033; --ssm-danger-border: #ECCFCF; --ssm-info-bg: #E8EEF7; --ssm-info-text: #174A8A; /* --- Prune (catégorie secondaire : en préparation, assistant, badges) --- */ --ssm-violet: #6b4fa0; --ssm-violet-bg: #efeaf7; --ssm-violet-text: #4b3a78; --ssm-violet-accent: #8a6fbf; /* filet */ /* --- Montants (SsmMoney) : couleur selon signe --- */ --ssm-money-pos: #2F7D57; --ssm-money-neg: #A63D40; --ssm-money-neutral: #16191D; /* --- Graphiques : une couleur suit une entité (pays), jamais son rang --- */ --ssm-chart-1: #1F5FAF; /* France, série principale */ --ssm-chart-2: #EB6834; /* Italie */ --ssm-chart-3: #1BAF7A; /* Espagne */ --ssm-chart-4: #EDA100; /* Royaume-Uni */ --ssm-chart-5: #E87BA4; /* Belgique */ --ssm-chart-6: #4A3AA7; /* Allemagne */ --ssm-chart-7: #008300; /* Pays-Bas */ --ssm-chart-other: #A3AAB6; /* Autres */ --ssm-chart-grid: #EEF0F3; --ssm-chart-axis: #D0D5DD; /* --- Typographie : Helvetica partout (PBI #803), aucun mélange --- */ --ssm-font: "Helvetica", "Arial", sans-serif; /* corps / UI */ --ssm-font-serif: "Helvetica", "Arial", sans-serif; /* ex-titres serif : désormais Helvetica */ --ssm-font-mono: "Helvetica", "Arial", sans-serif; /* ex-chiffres mono : désormais Helvetica */ /* --- Rayons --- */ --ssm-radius-card: 12px; --ssm-radius-ctrl: 8px; /* boutons, champs */ --ssm-radius-sm: 6px; /* badges, petits boutons */ --ssm-radius-inner: 10px; /* piste des segments, encart, liste déroulante */ --ssm-radius-panel: 14px; /* panneau latéral, confirmation */ --ssm-radius-pill: 999px; /* --- Ombres --- */ --ssm-shadow-card: 0 1px 2px rgba(16,24,40,.05); --ssm-shadow-ctrl: 0 1px 2px rgba(16,24,40,.08); --ssm-shadow-pop: 0 12px 24px -6px rgba(16,24,40,.12); --ssm-shadow-panel: 0 24px 48px -12px rgba(16,24,40,.25); --ssm-overlay: rgba(15,20,25,.38); /* --- Espacements de référence --- */ --ssm-gap: 12px; --ssm-pad-card: 18px; --ssm-pad-page: 28px; }