/* ══════════════════════════════════════════════════════════════════════════ DESIGN SYSTEM : REXORA (flat / minimal) ────────────────────────────────────────────────────────────────────────── Active uniquement quand . Annule l'esthetique glassmorphism (blur, gradient borders, glow, orbes ambiants) et la remplace par : cards pleines (blanches en light, sombres en dark), bordure subtile #E5E7EB, ombre douce 0 1px 3px rgba(0,0,0,.05), background plat sans mesh ni orbe. Mode jour/nuit (data-theme) et couleur accent (var(--acc)) restent pleinement respectes. ════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── REFONTE IMORIA (2026-06) Thème AUTONOME, sans rapport avec Orbit. Clair/chaud, accent piloté par le picker (var(--acc) → var(--accent)), dégradé + ombres recalculés via color-mix(). Typo Rexora inchangée : on ne touche qu'aux couleurs, ombres, rayons et traitements de surface. IMPORTANT : le picker écrit --acc sur (inline + JS). Les tokens dérivés de l'accent sont donc déclarés sur une portée body (...[theme] body) pour suivre le picker. Les neutres/rayons (sans dépendance accent) restent sur la portée html. ────────────────────────────────────────────────────────────────────────── */ html[data-design="rexora"] { /* Rayons (doc Imoria) */ --r-compact: 6px; --r-input: 8px; --r-icon: 10px; --r-card: 12px; --r-block: 28px; --r-pill: 999px; /* Alias des noms historiques Rexora → rayons Imoria */ --rxr-radius: var(--r-card); --rxr-radius-sm: var(--r-input); } /* ════════════════════════════════════════════════════════════════════════ NEUTRES — LIGHT (crème chaud, fidèle aux captures) Pour revenir au doc strict : --bg:#FFFFFF; --surface:#F7F5F4; ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"][data-theme="light"] { --bg: #F6F2EC; --surface: #FBF8F3; --surface-2: #F1EBE3; --surface-hover: #EFE8DF; --text: #292524; --text-2: #57514A; --text-muted: #77716E; --text-faint: #A3989E; --text-on-accent: #FFFFFF; --text-on-accent-muted: rgba(255,255,255,0.78); --border: #E8E6E5; --border-strong: #D0CAC5; --dot: rgba(41,37,36,0.06); --dot-on-accent: rgba(255,255,255,0.14); /* Ombres signature « inset + drop minime » (doc, statiques) */ --shadow-surface: rgba(255,255,255,0.03) 0 1px 0 0 inset, rgba(0,0,0,0.02) 0 1px 1px 0; --shadow-raised: rgba(255,255,255,0.9) 0 1px 0 0 inset, rgba(0,0,0,0.05) 0 -1px 0 0 inset, rgba(0,0,0,0.08) 0 1px 2px 0, rgba(0,0,0,0.04) 0 2px 4px 0; --shadow-overlay: rgba(255,255,255,0.18) 0 1px 0 0 inset, rgba(0,0,0,0.08) 0 -1px 0 0 inset, rgba(0,0,0,0.10) 0 8px 24px 0; /* ── Alias noms historiques Rexora → neutres Imoria ── */ --bg2: var(--surface); --card: var(--surface); --card2: var(--surface-2); --inp: var(--surface-2); /* champ solide (pas de transparence) */ --elev: var(--surface); --bg-primary: var(--bg); --bg-secondary: var(--surface); --bg-card: var(--surface); --bg-card-hover: var(--surface-hover); --bg-elevated: var(--surface); --bg-sidebar: var(--surface); --t1: var(--text); --t2: var(--text-2); --t3: var(--text-muted); --t4: var(--text-faint); --text-primary: var(--text); --text-secondary: var(--text-2); --text-tertiary: var(--text-muted); --brd: var(--border); --brd2: var(--border-strong); --card-border: var(--border); --card-border-hover: var(--border-strong); --card-bg-solid: var(--surface); --card-bg: var(--surface); --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-bg-soft: var(--surface-2); --glass-border: 1px solid var(--border); --glass-blur: none; --rxr-shadow-card: var(--shadow-surface); --rxr-shadow-card-hover: var(--shadow-raised); --glass-shadow: var(--shadow-surface); --glass-shadow-strong: var(--shadow-raised); } /* ════════════════════════════════════════════════════════════════════════ NEUTRES — DARK (gris très foncé neutre, type zinc — PAS de brun) ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"][data-theme="dark"] { --bg: #0F0F11; --surface: #18181B; --surface-2: #1F1F23; --surface-hover: #26262B; --text: #FAFAFA; --text-2: #C4C4C9; --text-muted: #8A8A91; --text-faint: #5C5C63; --text-on-accent: #FFFFFF; --text-on-accent-muted: rgba(255,255,255,0.75); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --dot: rgba(255,255,255,0.05); --dot-on-accent: rgba(255,255,255,0.12); --shadow-surface: rgba(255,255,255,0.02) 0 1px 0 0 inset, rgba(0,0,0,0.30) 0 1px 1px 0; --shadow-raised: rgba(255,255,255,0.04) 0 1px 0 0 inset, rgba(0,0,0,0.45) 0 2px 4px 0; --shadow-overlay: rgba(255,255,255,0.05) 0 1px 0 0 inset, rgba(0,0,0,0.55) 0 8px 24px 0; /* ── Alias noms historiques ── */ --bg2: var(--surface); --card: var(--surface); --card2: var(--surface-2); --inp: var(--surface-2); --elev: var(--surface); --bg-primary: var(--bg); --bg-secondary: var(--surface); --bg-card: var(--surface); --bg-card-hover: var(--surface-hover); --bg-elevated: var(--surface); --bg-sidebar: var(--surface); --t1: var(--text); --t2: var(--text-2); --t3: var(--text-muted); --t4: var(--text-faint); --text-primary: var(--text); --text-secondary: var(--text-2); --text-tertiary: var(--text-muted); --brd: var(--border); --brd2: var(--border-strong); --card-border: var(--border); --card-border-hover: var(--border-strong); --card-bg-solid: var(--surface); --card-bg: var(--surface); --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-bg-soft: var(--surface-2); --glass-border: 1px solid var(--border); --glass-blur: none; --rxr-shadow-card: var(--shadow-surface); --rxr-shadow-card-hover: var(--shadow-raised); --glass-shadow: var(--shadow-surface); --glass-shadow-strong: var(--shadow-overlay); } /* ════════════════════════════════════════════════════════════════════════ ACCENT — dérivé du picker (--acc sur ). Déclaré en portée body pour que color-mix() se recalcule à chaque changement de couleur. #E85C2B = défaut Imoria, simple fallback ; le picker écrase --acc et tout suit. ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"][data-theme="light"] body { --accent: var(--acc, #E85C2B); --accent-hover: color-mix(in srgb, var(--accent) 90%, black); --accent-active: color-mix(in srgb, var(--accent) 82%, black); --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-tint: color-mix(in srgb, var(--accent) 8%, transparent); --accent-border: color-mix(in srgb, var(--accent) 35%, transparent); --accent-text: var(--accent); --accent-ring: color-mix(in srgb, var(--accent) 10%, transparent); --block-grad: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, white) 0%, color-mix(in srgb, var(--accent) 96%, black) 100%); --shadow-cta: rgba(255,255,255,0.18) 0 1px 0 0 inset, rgba(0,0,0,0.08) 0 -1px 0 0 inset, color-mix(in srgb, var(--accent) 35%, transparent) 0 1px 2px 0; /* Neutralise les gradients accent historiques (auraos) en les branchant sur l'accent piloté — corrige aussi le fait qu'ils ne suivaient pas le picker. */ --acc-grad: var(--accent); --acc-grad-soft: var(--accent-soft); --acc-grad-subtle: var(--accent-tint); } /* Dégradé radial des cartes KPI (centre légèrement plus clair) + pointillés très légers — partagé clair/sombre, portée body pour suivre le picker. */ html[data-design="rexora"][data-theme="light"] body, html[data-design="rexora"][data-theme="dark"] body { --kpi-grad: radial-gradient(130% 150% at 50% -10%, color-mix(in srgb, var(--accent) 72%, white) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 88%, black) 100%); --dot-kpi: rgba(255,255,255,0.07); } html[data-design="rexora"][data-theme="dark"] body { --accent: var(--acc, #E85C2B); --accent-hover: color-mix(in srgb, var(--accent) 85%, white); --accent-active: color-mix(in srgb, var(--accent) 78%, black); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent); --accent-border: color-mix(in srgb, var(--accent) 45%, transparent); --accent-text: color-mix(in srgb, var(--accent) 78%, white); --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent); --block-grad: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, white) 0%, color-mix(in srgb, var(--accent) 90%, black) 100%); --shadow-cta: rgba(255,255,255,0.10) 0 1px 0 0 inset, color-mix(in srgb, var(--accent) 40%, transparent) 0 2px 8px 0; --acc-grad: var(--accent); --acc-grad-soft: var(--accent-soft); --acc-grad-subtle: var(--accent-tint); } /* ══════════════════════════════════════════════════════════════════════════ BODY : fond plat, suppression des orbes/mesh/noise/aura-orbs ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"] body { background: var(--bg) !important; background-attachment: scroll !important; } html[data-design="rexora"] body:not(.has-bg-image)::before, html[data-design="rexora"] body:not(.has-bg-image):has(.app-container)::after { display: none !important; background: none !important; } html[data-design="rexora"] body:not(.has-bg-image):has(.app-container) { background-color: var(--bg) !important; } /* aura-orbs : 3 orbes blurés position:fixed inset:0, posés directement dans . Rien dans Rexora ne doit en montrer trace. */ html[data-design="rexora"] .aura-orbs, html[data-design="rexora"] .aura-orb, html[data-design="rexora"] .aura-liquid, html[data-design="rexora"] .aura-noise { display: none !important; background: none !important; filter: none !important; opacity: 0 !important; } /* content-frame : par defaut rgba(255,255,255,0.32) (overlay glass) qui produit un fond translucide. En Rexora flat on veut un fond opaque pleine couleur var(--bg) pour que la page ait un fond solide. */ html[data-design="rexora"] body .content-frame, html[data-design="rexora"] body div.content-frame { background-color: var(--bg) !important; /* Semis de points qui s'estompent légèrement et irrégulièrement : 3 voiles doux en couleur de fond par-dessus la trame de points (suit --dot/--bg). */ background-image: radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--bg) 88%, transparent) 0%, transparent 46%), radial-gradient(circle at 16% 82%, color-mix(in srgb, var(--bg) 88%, transparent) 0%, transparent 44%), radial-gradient(circle at 46% 52%, color-mix(in srgb, var(--bg) 72%, transparent) 0%, transparent 58%), radial-gradient(var(--dot) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px !important; background-attachment: scroll !important; /* scroll (pas fixed) : évite le scintillement Firefox quand une modale plein écran scrolle par-dessus */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ══════════════════════════════════════════════════════════════════════════ SIDEBAR : flat solide, separateur 1px, radius modeste (8px au lieu de 28px) Note : on utilise html[data-design="rexora"] body .sidebar (et variantes nav/#sidebar) pour battre la regle volontairement haute specificite de auraos.css ligne 189 (html body nav.sidebar { border-radius: 28px }). ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"] .sidebar, html[data-design="rexora"] body .sidebar, html[data-design="rexora"] body nav.sidebar, html[data-design="rexora"] body #sidebar { background: var(--bg-sidebar) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-right: 1px solid var(--brd) !important; box-shadow: none !important; border-radius: 8px !important; } /* App-container, topbar et content-frame : on aligne aussi a 8px pour un rendu coherent. content-frame n'arrondit qu'en bas (top = topbar arrondi). Meme contrainte de specificite pour battre auraos.css. */ html[data-design="rexora"] body .app-container, html[data-design="rexora"] body div.app-container { border-radius: 8px !important; } html[data-design="rexora"] body .topbar, html[data-design="rexora"] body header.topbar, html[data-design="rexora"] body div.topbar { border-radius: 8px 8px 0 0 !important; } html[data-design="rexora"] .content-frame { border-radius: 0 0 8px 8px !important; } /* ══════════════════════════════════════════════════════════════════════════ TOPBAR : effet FROST (translucide + flou) — overlay au-dessus du contenu ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"] .topbar, html[data-design="rexora"] header.topbar, html[data-design="rexora"] div.topbar { background: color-mix(in srgb, var(--surface) 32%, transparent) !important; backdrop-filter: blur(14px) saturate(1.3) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════════════════ CARDS : tout devient flat (annule glass-unified + theme.css glass) ════════════════════════════════════════════════════════════════════════ */ html[data-design="rexora"] .card, html[data-design="rexora"] .card-strato, html[data-design="rexora"] .kpi-card, html[data-design="rexora"] .kpi, html[data-design="rexora"] .stat-card, html[data-design="rexora"] .chart-card, html[data-design="rexora"] .chart-card-new, html[data-design="rexora"] .nf-card, html[data-design="rexora"] .glass-card, html[data-design="rexora"] .pd-kpi, html[data-design="rexora"] .pd-client-infos, html[data-design="rexora"] .orbit-card { background: var(--card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--brd) !important; border-radius: var(--rxr-radius) !important; box-shadow: var(--rxr-shadow-card) !important; } html[data-design="rexora"] .card:hover, html[data-design="rexora"] .card-strato:hover, html[data-design="rexora"] .kpi-card:hover, html[data-design="rexora"] .stat-card:hover, html[data-design="rexora"] .chart-card:hover, html[data-design="rexora"] .chart-card-new:hover, html[data-design="rexora"] .glass-card:hover, html[data-design="rexora"] .orbit-card:hover { transform: none !important; box-shadow: var(--rxr-shadow-card-hover) !important; border-color: var(--brd2) !important; } /* Cards dans grid-2/grid-3 contenant un