/* ========================================================= P14 Hub — Design Tokens Palette monochrome bleue · base #15314A ========================================================= */ :root{ /* ---- Couleurs : échelle bleue ---- */ --blue-950:#081420; /* fond le plus profond */ --blue-900:#0B1E2E; /* fond sombre */ --blue-800:#0E2438; /* surfaces sombres */ --blue-700:#112B40; /* surface intermédiaire */ --blue-600:#15314A; /* base */ --blue-500:#1E4467; /* élévation */ --blue-400:#2C5C88; /* bordures actives */ --blue-300:#4878A2; /* accent / glow */ --blue-200:#7AA0BE; /* accent clair */ --blue-100:#B3C8D8; /* texte secondaire clair */ --blue-050:#DCE7EF; /* highlights */ --white:#F4F8FB; /* ---- Alias sémantiques ---- */ --bg-deep:var(--blue-950); --bg:var(--blue-900); --surface:var(--blue-800); --surface-raised:var(--blue-700); --elevation:var(--blue-500); --border:rgba(123,160,190,.14); /* blue-200 @ 14% */ --border-strong:rgba(123,160,190,.28); --border-active:var(--blue-400); --accent:var(--blue-300); --accent-soft:var(--blue-200); --accent-rgb:72,120,162; /* pour glow rgba() */ --text:var(--blue-050); --text-secondary:var(--blue-100); --text-muted:rgba(179,200,216,.52); --on-accent:#06131F; --glow:rgba(72,120,162,.40); /* FOMO / Urgence — signal global indépendant des thèmes d'univers. Amber doré · même valeur partout en dark, overridée en :root.light. À utiliser UNIQUEMENT sur : badges urgence, fomoStrip, savings, countdown, dot-pulse — PAS sur les éléments informatifs (certifs, CPF). */ --fomo:#FFAA00; --fomo-soft:#FFBB29; --fomo-rgb:255,170,0; --fomo-glow:rgba(255,170,0,.32); --on-fomo:#1A0B00; /* Teinte des voiles/bordures translucides des widgets. En sombre : blanc. En clair (:root.light) : bleu profond — pour que fines bordures et remplissages restent visibles sur fond clair. Voir styles/site.css. */ --tint:255,255,255; /* ---- Accents de programme (variantes du primaire) ---- */ --cyan-500:#15C6CE; --cyan-400:#3ED3D9; --cyan-600:#0FA4AB; /* Numeriklub */ --magenta-500:#CE1A63;--magenta-400:#E13B7E;--magenta-600:#A8124E;/* Formation Continue */ --orange-500:#F18A07;--orange-400:#FBA431; --orange-600:#CC7100; /* Formation Initiale */ /* ---- Typographie ---- */ --font-display:"Space Grotesk",system-ui,sans-serif; --font-body:"Instrument Sans",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace; --mono:var(--font-mono); /* alias spec */ --text-xs:.75rem; /* 12 */ --text-sm:.875rem; /* 14 */ --text-base:1rem; /* 16 */ --text-lg:1.125rem; /* 18 */ --text-xl:1.375rem; /* 22 */ --text-2xl:1.75rem; /* 28 */ --text-3xl:2.5rem; /* 40 */ --text-4xl:3.5rem; /* 56 */ --text-5xl:clamp(3rem,6vw,5.5rem); --tracking-tight:-.02em; --tracking-wide:.08em; --tracking-mono:.12em; /* ---- Espacement : échelle 4px ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; /* ---- Rayons ---- */ --radius-xs:2px; /* vignettes glass */ --radius-sm:2px; --radius-md:2px; /* rayon transition encoche (NR) */ --radius-lg:2px; /* coins de section (R) */ --radius-pill:2px; --radius-ui:2px; /* RAYON UNIFORME des composants */ --radius-photo:12px; /* photos rectangulaires NON détourées : coins adoucis (les visuels détourés object-fit:contain restent nets) */ /* ---- Encart de section (notch) ---- */ --notch-radius:2px; /* R · rayon coin */ --notch-depth:52px; /* ND · profondeur encoche */ --notch-width:50px; /* NW · largeur encoche */ --notch-trans:12px; /* NR · rayon de transition */ --notch-tr:0.65; /* position horizontale TR */ --notch-bl:0.33; /* position horizontale BL */ /* ---- Ombres ---- */ --shadow-card:0 10px 30px rgba(8,20,32,.45), inset 0 1px 0 rgba(220,231,239,.10); --shadow-card-light:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 32px rgba(21,49,74,.08); --shadow-float:0 20px 60px rgba(8,20,32,.5), 0 0 40px rgba(72,120,162,.15); /* ---- Gradients ---- */ --grad-hero:linear-gradient(135deg,#2C5C88 0%,#4878A2 50%,#7AA0BE 100%); --grad-hero-side:linear-gradient(90deg, rgba(14,36,56,.95) 0%, rgba(21,49,74,.70) 25%, rgba(21,49,74,.25) 50%, transparent 72%); /* ---- Timing ---- */ --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:.18s; --dur:.28s; --dur-slow:.6s; } /* ========================================================= Thèmes d'accent — appliquer sur n'importe quel conteneur. Remappe --accent / --accent-soft / --glow / --accent-rgb, donc boutons, badges, dots, KPI, etc. suivent automatiquement. ========================================================= */ .theme-cyan{ --accent:var(--cyan-500); --accent-soft:var(--cyan-400); --accent-rgb:21,198,206; --glow:rgba(21,198,206,.45); --on-accent:#04201F; --grad-hero:linear-gradient(135deg,#0FA4AB 0%,#15C6CE 50%,#3ED3D9 100%); } .theme-magenta{ --accent:var(--magenta-500); --accent-soft:var(--magenta-400); --accent-rgb:206,26,99; --glow:rgba(206,26,99,.38); --on-accent:#fff; /* Dégradé premium adouci : aubergine profond → magenta riche → rose tamisé. 4 arrêts pour une transition plus douce, moins « néon » que l'ancien. */ --grad-hero:linear-gradient(140deg,#3D0B29 0%,#8E1449 40%,#BC1A5D 72%,#D4497F 100%); } .theme-orange{ --accent:var(--orange-500); --accent-soft:var(--orange-400); --accent-rgb:241,138,7; --glow:rgba(241,138,7,.45); --on-accent:#241200; --grad-hero:linear-gradient(135deg,#CC7100 0%,#F18A07 50%,#FBA431 100%); } /* ========================================================= MODE CLAIR — appliqué via `html.light` (défaut = sombre). Remappe les alias sémantiques (fonds, surfaces, textes, bordures, ombres) sans toucher aux échelles de base ni aux accents de programme. Les classes .theme-* (sur ) continuent de fonctionner ; on ajuste seulement le contraste des accents pour rester lisibles sur fond clair. ========================================================= */ :root.light{ --bg-deep:#E7EFF6; /* fond le plus profond (bleu très clair) */ --bg:#EEF4F9; --surface:#FFFFFF; --surface-raised:#FFFFFF; --elevation:#FFFFFF; --border:rgba(21,49,74,.12); --border-strong:rgba(21,49,74,.20); --border-active:var(--blue-400); --accent:var(--blue-600); --accent-soft:var(--blue-400); --accent-rgb:21,49,74; --text:#0E2438; --text-secondary:#39556F; --text-muted:rgba(14,36,56,.56); --on-accent:#F4F8FB; --glow:rgba(21,49,74,.14); --fomo:#9B5A00; --fomo-soft:#B36A00; --fomo-rgb:155,90,0; --fomo-glow:rgba(155,90,0,.16); --on-fomo:#FFFBF0; --tint:21,49,74; --shadow-card:0 8px 26px rgba(21,49,74,.10), inset 0 1px 0 rgba(255,255,255,.7); --shadow-card-light:0 10px 30px rgba(21,49,74,.08), inset 0 1px 0 rgba(255,255,255,.9); --shadow-float:0 20px 56px rgba(21,49,74,.15), 0 0 40px rgba(21,49,74,.06); } /* Accents de programme — contraste renforcé pour texte sur fond clair */ :root.light .theme-cyan{ --accent:var(--cyan-600); --accent-soft:var(--cyan-500); --accent-rgb:15,164,171; --glow:rgba(15,164,171,.18); --on-accent:#04201F; } :root.light .theme-magenta{ --accent:var(--magenta-500); --accent-soft:var(--magenta-400); --accent-rgb:206,26,99; --glow:rgba(206,26,99,.16); --on-accent:#fff; } :root.light .theme-orange{ --accent:var(--orange-600); --accent-soft:var(--orange-500); --accent-rgb:204,113,0; --glow:rgba(204,113,0,.16); --on-accent:#fff; }