@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Arkalabs — palette canonique du site. Source de décision : .input/ui/arkalabs-palette.css */ :root { --arka-red: #c70f43; --arka-green: #00d287; --arka-blue: #4a90e2; --arka-purple: #8b5cf6; --arka-fuchsia: #d946ef; --status-pass: #16a34a; --status-warn: #d97706; --status-fail: #dc2626; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --surface: #171718; --bar: #222121; --zone: #1d1c1c; --elevated: #232324; --tx1: #fff; --tx2: #e5e7eb; --tx3: #c2c6cc; --tx4: #9ca3af; --tx5: #6b7280; --w: 255, 255, 255; --link: #e5e7eb; --link-hover: #fff; } .theme-light { --surface: #faf7f4; --bar: #f0ebe5; --zone: #fff; --elevated: #fff; --tx1: #1c1816; --tx2: #2f2a26; --tx3: #453f39; --tx4: #5c5650; --tx5: #9c9288; --w: 0, 0, 0; --link: #1c1816; --link-hover: #000; } /* Compatibilité avec les pages existantes : un seul jeu de tokens pilote désormais les composants, sans dupliquer les couleurs par page. */ #app-root { /* Les couleurs de marque sont invariantes : aucune page ne peut les redéfinir en fonction du thème. */ --arka-red: #c70f43; --arka-green: #00d287; --arka-blue: #4a90e2; --arka-purple: #8b5cf6; --arka-fuchsia: #d946ef; --status-pass: #16a34a; --status-warn: #d97706; --status-fail: #dc2626; --page-bg: var(--surface); --content: var(--tx1); --content-soft: var(--tx2); --content-muted: var(--tx3); --content-subtle: var(--tx5); --border: rgba(var(--w), .08); --border-strong: rgba(var(--w), .12); --card: rgba(var(--w), .018); --card-solid: var(--elevated); --band: var(--bar); --surface-hover: rgba(var(--w), .04); --header-bg: color-mix(in srgb, var(--bar) 88%, transparent); --toggle-bg: rgba(var(--w), .04); background: var(--surface) !important; color: var(--tx3); font-family: var(--font-sans) !important; } /* Le menu mobile est monté sous , hors de #app-root. Il reçoit donc explicitement les mêmes alias une fois sa classe de thème synchronisée. */ .arka-mobile-menu-shell { --page-bg: var(--surface); --content: var(--tx1); --content-soft: var(--tx2); --content-muted: var(--tx3); --content-subtle: var(--tx5); --border: rgba(var(--w), .08); --border-strong: rgba(var(--w), .12); --card-solid: var(--elevated); --surface-hover: rgba(var(--w), .04); } #site-header { background: var(--header-bg) !important; box-shadow: none !important; } #site-header [style*="box-shadow"] { box-shadow: none !important; } .arka-global-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .arka-global-nav > a { color: var(--tx4) !important; font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .arka-global-nav > a:hover { color: var(--tx1) !important; } .arka-global-nav small { color: var(--status-pass); font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; } .arka-global-nav button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--toggle-bg); color: var(--tx4); cursor: pointer; } .arka-global-nav .arka-global-nav-cta { min-height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--tx1); border-radius: 9px; background: var(--tx1); color: var(--surface) !important; } @media (max-width: 1120px) { .arka-global-nav { display: none !important; } } #app-root a { color: var(--link); } #app-root a:hover { color: var(--link-hover); } /* Les CTA primaires restent framboise Arka dans les deux thèmes. Le texte est toujours blanc pour préserver le contraste. */ #site-header a[aria-label*="Candidater"], .arka-global-nav .arka-global-nav-cta, .arka-mobile-menu-cta, #app-root .btn-primary, #app-root a.btn-primary, #app-root button.btn-primary, #app-root button[type="submit"], #app-root .rel-dl-btn, #app-root .btn-1, #app-root a[href="/waiting-list"][style*="background"], #app-root a[href="/skills-factory/releases"][style*="background"], #app-root a[href="/cortex-deck/beta"][style*="background"] { background: var(--arka-red) !important; border-color: var(--arka-red) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(199,15,67,.35), 0 18px 44px -30px rgba(199,15,67,.72) !important; } #app-root .btn-primary:hover, #app-root button[type="submit"]:hover, #app-root .rel-dl-btn:hover, #site-header a[aria-label*="Candidater"]:hover, .arka-global-nav .arka-global-nav-cta:hover, .arka-mobile-menu-cta:hover { color: #fff !important; opacity: .92; } /* La palette exclut les halos décoratifs et les ombres lourdes. */ #app-root .hero-glow, #app-root .stage-glow { display: none !important; } #app-root [aria-hidden="true"][style*="radial-gradient"], #app-root [aria-hidden="true"][style*="mask-image"] { display: none !important; }