/* ============================================================================ KAIROPSE v3 — DESIGN TOKENS Source de vérité unique pour les couleurs, typo, espacements et animations du site public (homepage) ET de l'admin. ============================================================================ Référence validée 2026-04-19 : - Homepage : kairopse-homepage-maquette-v10.html - Admin : kairopse-admin-maquette-v10.html Usage : - Ajouter ce fichier en tout début de chaîne CSS (avant Tailwind compilé) - Utiliser les classes CSS ou les variables (var(--quantum), etc.) - Basculer via ou ============================================================================ */ /* ---------------------------------------------------------------------------- MODE NUIT (domicile, par défaut) — ADN KAIROPSE ---------------------------------------------------------------------------- */ :root, :root[data-theme="nuit"] { /* ===== FONDS ===== */ --bg-void: #000000; --bg-canvas: #0A0A0F; --bg-canvas-2: #0F0F18; --bg-canvas-3: #141420; --bg-surface: rgba(20, 20, 32, 0.55); /* glass morphism */ --bg-surface-solid: #12121C; --bg-elevated: rgba(30, 30, 46, 0.92); /* modales, popovers */ --bg-input: rgba(10, 10, 15, 0.55); --bg-hover: rgba(200, 169, 86, 0.06); --bg-active: rgba(200, 169, 86, 0.12); /* ===== BORDURES ===== */ --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(200, 169, 86, 0.32); --border-subtle: rgba(255, 255, 255, 0.05); /* ===== TEXTES ===== */ --text-strong: #F5F5FA; --text-default: #D4D4E0; --text-muted: #8E8EA5; --text-subtle: #5A5A6E; /* ===== ACCENTS (marques KAIROPSE) ===== */ --quantum: #C8A956; /* Or KAIROPSE — identité */ --quantum-dim: #8B6F2A; /* Or foncé — strokes sur fond clair */ --quantum-glow: rgba(200, 169, 86, 0.35); --cyan-signal: #00D4FF; /* Cyan admin (data/signaux) */ --cyan-signal-dim: #0099AA; --neon-cyan: #00FFF0; /* Cyan hero public — plus éclatant */ --psych: #7B2CBF; /* Violet psychométrique */ --psych-dim: #5E1E99; --neon: #FF006E; /* Rose néon (alertes, accents forts) */ --neon-dim: #B8003F; /* ===== ÉTATS SÉMANTIQUES ===== */ --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --info: #60A5FA; /* ===== OMBRES ===== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,169,86,0.08); --shadow-md: 0 8px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,169,86,0.12); --shadow-lg: 0 24px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,169,86,0.18), 0 0 60px rgba(200,169,86,0.06); /* ===== EFFETS AMBIANT ===== */ --scanline-opacity: 0.045; --particle-opacity: 0.60; --grid-opacity: 0.05; --glass-blur: 20px; --cursor-blend: difference; --nav-blend: difference; /* ===== VISUALISATIONS (charts, sparklines, radar, cockpit) ===== Règle clé : stroke = couleur sombre lisible, fill = couleur claire + alpha */ --viz-stroke-accent: #C8A956; --viz-fill-accent: rgba(200, 169, 86, 0.28); --viz-stroke-signal: #00D4FF; --viz-fill-signal: rgba(0, 212, 255, 0.25); --viz-stroke-avg: #00D4FF; --viz-grid: rgba(200, 169, 86, 0.08); --viz-grid-text: #8B8B9F; --viz-prev: #5A5A6E; /* ===== DONUT CHART (4 moteurs) ===== */ --donut-track: rgba(200, 169, 86, 0.08); --donut-structurant: #C8A956; --donut-explorateur: #00D4FF; --donut-integrateur: #4ADE80; --donut-catalyseur: #FBBF24; /* ===== BRIQUES QUANTUM (particules chassées par la souris) ===== */ --brick-base: #1a1a1a; --brick-gold: #C8A956; --brick-psych: #7B2CBF; --brick-wireframe: rgba(255,255,255,0.85); /* ===== SECTION OBJECTIFS (overlay sombre sur images) ===== */ --objective-overlay: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 60%, transparent 100%); } /* ---------------------------------------------------------------------------- MODE JOUR (extérieur, sur mesure) — palette "blanc cassé doré" ---------------------------------------------------------------------------- */ :root[data-theme="jour"] { /* ===== FONDS ===== */ --bg-void: #FFFFFF; --bg-canvas: #EFE7D2; /* Blanc cassé doré chaud */ --bg-canvas-2: #E8DFC5; --bg-canvas-3: #DFD4B4; --bg-surface: #FFFCF3; /* Presque blanc, teinte chaude */ --bg-surface-solid: #FFFCF3; --bg-elevated: #FFFFFF; --bg-input: #F7EFD8; --bg-hover: rgba(122, 95, 31, 0.05); --bg-active: rgba(122, 95, 31, 0.10); /* ===== BORDURES ===== */ --border: rgba(122, 95, 31, 0.18); --border-strong: rgba(122, 95, 31, 0.38); --border-subtle: rgba(122, 95, 31, 0.08); /* ===== TEXTES ===== */ --text-strong: #2E2718; /* Noir chaud (pas pur pour éviter la brutalité) */ --text-default: #3C3322; --text-muted: #6B6149; --text-subtle: #8F8571; /* ===== ACCENTS ===== */ --quantum: #7A5F1F; /* Or foncé saturé (contraste maîtrisé sur beige) */ --quantum-dim: #A68A3C; /* Or moyen (pour fills et secondaires) */ --quantum-glow: rgba(122, 95, 31, 0.25); --cyan-signal: #006B78; --cyan-signal-dim: #008E9E; --neon-cyan: #006B78; /* Pareil en Jour (l'éclat ne fonctionne pas) */ --psych: #4E1781; /* Violet sombre */ --psych-dim: #5E1E99; --neon: #A8003D; /* Rose profond */ --neon-dim: #B8003F; /* ===== ÉTATS SÉMANTIQUES (plus saturés pour lisibilité) ===== */ --success: #166534; --warning: #9A3412; --danger: #991B1B; --info: #1E40AF; /* ===== OMBRES (plus marquées en Jour pour détacher les cards) ===== */ --shadow-sm: 0 1px 2px rgba(31,26,13,0.05), 0 1px 3px rgba(31,26,13,0.04); --shadow-md: 0 6px 16px rgba(31,26,13,0.10), 0 3px 6px rgba(31,26,13,0.06); --shadow-lg: 0 20px 48px rgba(31,26,13,0.14), 0 10px 20px rgba(31,26,13,0.08); /* ===== EFFETS AMBIANT (allégés en Jour) ===== */ --scanline-opacity: 0; --particle-opacity: 0.18; --grid-opacity: 0.03; --glass-blur: 4px; --cursor-blend: normal; --nav-blend: normal; /* ===== VISUALISATIONS — stroke foncé + fill clair ===== Empêche l'effet "brun sombre saturé" sur fond beige */ --viz-stroke-accent: #7A5F1F; --viz-fill-accent: rgba(200, 169, 86, 0.35); /* Utilise l'or CLAIR en fill */ --viz-stroke-signal: #0099AA; --viz-fill-signal: rgba(0, 153, 170, 0.28); --viz-stroke-avg: #00A3B5; /* Moyenne mobile : teal vif */ --viz-grid: rgba(122, 95, 31, 0.12); --viz-grid-text: #857B63; --viz-prev: #9F917C; /* ===== DONUT CHART (palette adaptée Jour) ===== */ --donut-track: rgba(122, 95, 31, 0.10); --donut-structurant: #A68A3C; --donut-explorateur: #0099AA; --donut-integrateur: #16A34A; --donut-catalyseur: #D97706; /* ===== BRIQUES QUANTUM — ton beige doré sur ivoire ===== */ --brick-base: rgba(122, 95, 31, 0.16); --brick-gold: #7A5F1F; --brick-psych: #4E1781; --brick-wireframe: rgba(31, 26, 13, 0.45); /* ===== SECTION OBJECTIFS — overlay reste sombre (images foncées) ===== */ --objective-overlay: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, transparent 100%); } /* ============================================================================ TYPOGRAPHIE — 4 familles KAIROPSE ============================================================================ */ :root { --font-orbitron: 'Orbitron', 'Helvetica Neue', sans-serif; /* Titres, logo */ --font-exo-2: 'Exo 2', system-ui, sans-serif; /* Sous-titres, labels */ --font-rajdhani: 'Rajdhani', system-ui, sans-serif; /* Corps */ --font-mono: 'Source Code Pro', 'Courier New', monospace; /* Données, KPIs */ /* Échelle typo admin (cohérente avec maquette V10) */ --text-caption: 10px; /* Labels tracked, kickers */ --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; /* Titres cards */ --text-2xl: 28px; /* KPIs Source Code Pro */ --text-3xl: 32px; /* Dashboard title */ --text-display: 44px; /* Hero titles admin */ } /* ============================================================================ ESPACEMENTS (multiples de 4) ============================================================================ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Rayons */ --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-full: 9999px; } /* ============================================================================ TIMING D'ANIMATION ============================================================================ */ :root { --duration-fast: 150ms; /* Hover, focus */ --duration-base: 220ms; /* Transitions courantes */ --duration-slow: 350ms; /* Theme switch, cards lift */ --duration-slower: 500ms; /* Reveal, apparitions */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); } /* ============================================================================ BREAKPOINTS (pour référence — Tailwind les gère via config) ============================================================================ */ /* sm : 640px md : 768px lg : 1024px xl : 1280px 2xl : 1536px Cible prioritaire mobile KAIROPSE : iPhone 17 Pro = 393px */ /* ============================================================================ TRANSITION GLOBALE DU THÈME ============================================================================ */ body, body *:not(script):not(style) { transition: background-color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), fill var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); } body.no-transitions, body.no-transitions *:not(script):not(style) { transition: none !important; } /* ============================================================================ SR-ONLY (chantier v5-seo phase 1 — 2026-05-19) Masque visuellement mais reste lu par Google et lecteurs d'ecran. Pattern W3C standard. ============================================================================ */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }