/* ============================================================================ Phitalys — tokens.css (v6, refonte « Guide de style Phishia ») ---------------------------------------------------------------------------- SOURCE DE VÉRITÉ DES COULEURS. Chargé AVANT style.css (cf. SPEC §18.1/§18.3). • Tokens du guide §2 (marque, surfaces, bordures, texte, accent, statuts, rayons) déclarés en clair sous :root, en sombre sous :root[data-theme="dark"]. • Le thème est piloté par l'attribut data-theme sur (bascule manuelle + persistance localStorage, posé sans flash par le script de boot d'app.js). color-scheme suit data-theme. Le dark n'est PAS un flip auto : valeurs dédiées. • Tokens data-viz CONSERVÉS (--cat-1..8, --ramp-1..7) repris VERBATIM de l'ancien style.css — la heatmap et les séries catégorielles en dépendent. • ALIAS DE COMPAT (fin de fichier) : les anciens noms (--surface, --ink, --hairline, --good, --critical…) pointent vers les nouveaux tokens, pour que le code existant (style.css, app.js, views/*.js) fonctionne sans réécriture. Note : le fichier « guide de style Phishia §2 » n'étant pas versionné dans le dépôt, ses valeurs sont reconstituées ici à partir de la palette data-viz validée déjà en usage (surfaces / encres / bordures / statuts) et des noms + alias imposés par le SPEC §18.1/§18.2. À réaligner si le guide est fourni. ========================================================================== */ /* ------------------------------------------------------------------ CLAIR -- */ /* ───────────────────────────────────────────────────────────────────────── Police Inter — AUTO-HÉBERGÉE (sous-ensemble latin, graisses 400/500/600 statiques). Choix RGPD : aucun appel à Google Fonts (pas de fuite d'IP), ce qui compte pour un outil de conformité. font-display:swap = pas de FOIT. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-600.woff2') format('woff2'); } :root { color-scheme: light; /* Marque */ --brand: #1478e8; /* monogramme carré Phishia (texte blanc dessus) */ /* Surfaces (du plus enfoncé au plus surélevé) */ --page-bg: #f9f9f7; /* plan de page */ --surface-0: #efeeea; /* enfoncé : piste segmented, piste de barre */ --surface-1: #fcfcfb; /* surface de carte / segment actif / carte live */ --surface-2: #f4f3ef; /* tuile KPI, zébrage de table */ /* Texte */ --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; /* Bordures */ --border: #e1e0d9; /* Accent (chrome UI, sélection, remplissage de barre) */ --accent: #1478e8; --bg-accent: #e7f0fc; /* fond teinté : item de nav actif, avatar */ --text-accent: #1f5fb0; /* texte/initiales sur --bg-accent */ /* Statuts de présence — couleurs EXACTES Microsoft Teams. Identiques en clair ET en sombre : Teams conserve ses teintes de présence quel que soit le thème, donc ces tokens ne sont PAS redéfinis sous [data-theme="dark"]. Jamais la couleur seule : toujours pastille + libellé. Le rouge --status-late (#d03b3b) reste RÉSERVÉ à l'alerte tardifs — ce n'est jamais un statut de présence. */ --status-available: #6BB700; /* Disponible (Available / AvailableIdle) */ --status-busy: #7F77DD; /* Occupé (Busy / BusyIdle) — VIOLET (arbitrage 25/07) */ --status-dnd: #C50F1F; /* Ne pas déranger (DoNotDisturb) + Présente (Presenting) */ --status-away: #FFAA44; /* Absent (Away) / De retour bientôt (BeRightBack) — jaune Teams */ --status-offline: #8A8886; /* Hors ligne (Offline) / Inconnu (PresenceUnknown) */ --status-travel: #E3559E; /* En déplacement (OutOfOffice / OffWork) — rose ; hachuré si combiné à un statut actif */ --status-oof: var(--status-travel); /* alias : Absent du bureau = en déplacement (rose) */ --status-late: #d03b3b; /* alerte tardifs (jamais un statut de présence) */ /* Palette sémantique ANALYTIQUE (distincte des couleurs de présence Teams) : teal = actif/OK, ambre = à vérifier, rouge = grave. Alimente jauges, sparklines, chips de sévérité, deltas. Identiques clair/sombre. */ --teal: #1d9e75; --amber: #ef9f27; --red: #e24b4a; /* Bordure renforcée (contours de contrôles, pistes d'anneaux, ligne N-1). */ --border-strong: rgba(0, 0, 0, .15); /* Alias de compat : anciens noms encore consommés par style.css / les vues. Chez Teams « En réunion » et « En appel » sont ROUGES comme « Occupé ». */ /* #2 (25/07, arbitrage Hugo) : Appel = ROUGE, Présentation = rouge + hachures claires, Réunion = BLEU, Occupé = VIOLET. Le déplacement garde sa surcouche de hachures roses sur le statut actif. */ --status-meeting: #3F8EDE; --status-call: #C4314B; /* Rayons (§4) */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Slots catégoriels data-viz — ordre FIXE, jamais recyclés (verbatim) */ --cat-1: #1478e8; --cat-2: #1baf7a; --cat-3: #eda100; --cat-4: #008300; --cat-5: #4a3aa7; --cat-6: #e34948; --cat-7: #e87ba4; --cat-8: #eb6834; /* Rampe séquentielle bleue (heatmap), du proche-zéro au max (verbatim) */ --ramp-1: #cde2fb; --ramp-2: #9ec5f4; --ramp-3: #6da7ec; --ramp-4: #1478e8; --ramp-5: #256abf; --ramp-6: #184f95; --ramp-7: #0d366b; /* --- Alias de compat (§18.1) : anciens noms → nouveaux tokens --- Déclarés une seule fois : var() se résout au point d'usage contre le cascade, donc ces alias renvoient automatiquement les valeurs sombres quand :root[data-theme="dark"] redéfinit les tokens cibles. */ --page: var(--page-bg); --surface: var(--surface-1); --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-muted: var(--text-muted); --hairline: var(--border); --good: var(--status-available); --critical: var(--status-late); } /* Thème clair explicite (choix mémorisé « light ») : identique à :root. */ :root[data-theme="light"] { color-scheme: light; } /* ------------------------------------------------------------------ SOMBRE - */ :root[data-theme="dark"] { color-scheme: dark; --brand: #5aa0f2; --page-bg: #0d0d0d; --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #232321; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --border: #2c2c2a; --border-strong: rgba(255, 255, 255, .17); --accent: #5aa0f2; --bg-accent: #1c3557; --text-accent: #8fbcf0; /* Statuts de présence : NON redéfinis en sombre — les couleurs Teams (déclarées sous :root) sont volontairement identiques quel que soit le thème. Seul --status-late (alerte tardifs) conserve sa valeur, héritée de :root. */ /* Slots catégoriels — pas séparés, mêmes teintes calées pour surface sombre */ --cat-1: #5aa0f2; --cat-2: #199e70; --cat-3: #c98500; --cat-4: #008300; --cat-5: #9085e9; --cat-6: #e66767; --cat-7: #d55181; --cat-8: #d95926; /* Rampe inversée : « peu » recède vers la surface sombre */ --ramp-1: #0d366b; --ramp-2: #184f95; --ramp-3: #256abf; --ramp-4: #5aa0f2; --ramp-5: #6da7ec; --ramp-6: #9ec5f4; --ramp-7: #cde2fb; /* Les rayons et les alias de compat sont hérités de :root (mêmes valeurs ; les alias re-résolvent les tokens sombres ci-dessus). */ }