/* D814 — Demo-Agents UX canonical doctrine Yacine — propagated to all pages */

/* === Google Font DM Sans === */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

/* === Demo-agents CSS variables === */
:root, html, body {
  --bg: #faf7f5 !important;
  --bg2: #FFFFFF !important;
  --fg: #1B1B1B !important;
  --fg2: #555555 !important;
  --fg3: #999999 !important;
  --a: #3730A3 !important;
  --al: #6366F1 !important;
  --g: #047857 !important;
  --r: #B91C1C !important;
  --o: #B45309 !important;
  --bd: #E8E2D9 !important;
  --R: 16px !important;
  --sh: 0 1px 3px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.03) !important;
  /* Backward compat vars */
  --bg-primary: #faf7f5 !important;
  --bg-secondary: #FFFFFF !important;
  --bg3: #FFFFFF !important;
  --text: #1B1B1B !important;
  --text-main: #1B1B1B !important;
  --text-primary: #1B1B1B !important;
  --text-secondary: #555555 !important;
  --text-muted: #999999 !important;
  --ink: #1B1B1B !important;
  --foreground: #1B1B1B !important;
  --card: #FFFFFF !important;
  --panel: #FFFFFF !important;
  --surface: #faf7f5 !important;
  --base: #faf7f5 !important;
  --paper: #faf7f5 !important;
  --background: #faf7f5 !important;
  --canvas: #faf7f5 !important;
  --void: #faf7f5 !important;
  --depth: #faf7f5 !important;
  --header-bg: #FFFFFF !important;
  --nav-bg: #FFFFFF !important;
}

/* === Restore animations (was killed by D807 V2) === */
*, *::before, *::after { animation-play-state: running !important; }
[class*="card"], [class*="kpi"], [class*="pilier"], [class*="metric"], 
[class*="stat"], [class*="signal"], [class*="tile"], [class*="panel"],
[class*="widget"], [class*="dashboard"], [class*="recommendation"],
[class*="action"]:not(button), [class*="reasoning"],
section > div, main > div { 
  opacity: 1 !important; 
  visibility: visible !important; 
}

/* === Body: cream + DM Sans === */
html, html body {
  background: #faf7f5 !important;
  background-color: #faf7f5 !important;
  background-image: none !important;
  color: #1B1B1B !important;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  letter-spacing: -0.005em !important;
}

/* === Headings: DM Sans + dark === */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1B1B1B !important;
}
html body h1 { font-size: clamp(26px, 5vw, 50px) !important; line-height: 1.12 !important; }
html body h1 strong, html body h1 em { color: #3730A3 !important; font-weight: 400 !important; font-style: normal !important; }

/* === Text dark === */
html body p, html body span, html body div, html body li, html body td, html body th,
html body section *, html body article *, html body main *, html body aside *,
html body label, html body figcaption, html body strong, html body em {
  color: #1B1B1B !important;
}
html body [class*="muted"], html body [class*="secondary"], html body small,
html body [class*="caption"], html body [class*="subtitle"]:not(h1):not(h2),
html body .sub, html body .tagline {
  color: #555555 !important;
}

/* === Sections transparent (pas de fond noir derrière titres) === */
html body section, html body article, html body main, html body aside {
  background-color: transparent !important;
  background-image: none !important;
}

/* === NAV: cream translucent sticky === */
html body header, html body nav, html body [class*="navbar"],
html body [role="banner"], html body [class*="top-bar"], html body .n {
  background: rgba(250, 248, 245, 0.92) !important;
  background-color: rgba(250, 248, 245, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #E8E2D9 !important;
  color: #1B1B1B !important;
}
html body header *, html body nav *, html body [class*="navbar"] * {
  color: #555555 !important;
  background-color: transparent !important;
}
html body header a, html body nav a, html body [class*="navbar"] a, html body .n a {
  color: #555555 !important;
  text-decoration: none !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: 0.2s !important;
}
html body header a:hover, html body nav a:hover { color: #3730A3 !important; }
html body header [class*="logo"], html body nav [class*="logo"],
html body header [class*="brand"], html body nav [class*="brand"] {
  color: #1B1B1B !important;
}
html body header [class*="logo"] strong, html body nav [class*="brand"] b { color: #3730A3 !important; }

/* === Cards (demo-agents .ppc style): WHITE bg + beige border + soft shadow on hover === */
html body [class*="card"], html body [class*="panel"], html body [class*="tile"],
html body [class*="widget"]:not([class*="chat"]), html body [class*="modal"],
html body [class*="dashboard"], html body [class*="hub-card"], html body [class*="cockpit"],
html body [class*="kpi"], html body [class*="stat-card"], html body [class*="metric-card"],
html body [class*="signal-card"], html body [class*="indicator"], html body [class*="gauge"],
html body [class*="feed"], html body [class*="entry"], html body [class*="recommendation"],
html body [class*="action-item"], html body [class*="pred-"]:not([class*="navbar"]),
html body .ppc, html body .dc {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #1B1B1B !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 16px !important;
  transition: 0.2s !important;
  padding: 20px !important;
}
html body [class*="card"]:hover, html body [class*="panel"]:hover, html body .ppc:hover {
  border-color: #6366F1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.03) !important;
}

/* Card content */
html body [class*="card"] *, html body [class*="panel"] *,
html body [class*="kpi"] *, html body [class*="metric"] *,
html body [class*="signal"] *, html body [class*="recommendation"] *,
html body [class*="reasoning"] *, html body .ppc * {
  color: #1B1B1B !important;
}
html body [class*="card"] [class*="badge"], html body [class*="card"] [class*="pill"],
html body [class*="card"] [class*="tag"], html body [class*="card"] [class*="chip"] {
  color: revert; background-color: revert;
}

/* === KPI/Stat NUMBERS: large indigo === */
html body .kn, html body [class*="kpi"] [class*="number"],
html body [class*="kpi"] [class*="value"], html body [class*="stat"] [class*="number"],
html body [class*="metric"] strong:first-child, html body [class*="big-num"],
html body [class*="counter"] strong, html body [class*="figure-big"] {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 40px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #3730A3 !important;
  font-weight: 700 !important;
}
html body .kl, html body [class*="kpi"] [class*="label"], html body [class*="stat"] [class*="label"] {
  font-size: 10px !important;
  color: #999999 !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* === Buttons primary (indigo bg white text) === */
html body button.bp, html body .btn-primary, html body [class*="btn-primary"],
html body button[class*="primary"]:not([class*="text"]), 
html body a.btn-primary, html body a[class*="btn-primary"],
html body a.btn.primary, html body [class*="cta-primary"],
html body [class*="bp"]:not([class*="cabp"]) {
  background: #3730A3 !important;
  background-color: #3730A3 !important;
  color: #FFFFFF !important;
  padding: 12px 26px !important;
  border-radius: 14px !important;
  font: 500 14px 'DM Sans', system-ui, sans-serif !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: 0.25s !important;
  box-shadow: 0 2px 12px rgba(55, 48, 163, 0.2) !important;
}
html body button.bp:hover, html body .btn-primary:hover { transform: translateY(-1px) !important; }

/* === Buttons outline (transparent border) === */
html body button.bo, html body .btn-outline, html body [class*="btn-outline"],
html body a.btn-outline {
  background: transparent !important;
  color: #1B1B1B !important;
  border: 1.5px solid #E8E2D9 !important;
  padding: 12px 26px !important;
  border-radius: 14px !important;
  font: 500 14px 'DM Sans', system-ui, sans-serif !important;
}
html body button.bo:hover, html body .btn-outline:hover {
  border-color: #6366F1 !important;
  color: #3730A3 !important;
}

/* === Links indigo === */
html body a:not([class*="btn"]):not([class*="button"]):not(.close-x):not([class*="nav"]):not(header a):not(nav a) {
  color: #3730A3 !important;
  text-decoration: none !important;
}
html body a:hover { color: #6366F1 !important; }

/* === Code blocks === */
html body pre, html body code:not([class*="card"]) {
  background: #f5f1ec !important;
  color: #1B1B1B !important;
  border: 1px solid #E8E2D9 !important;
  border-radius: 10px !important;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace !important;
  padding: 12px !important;
}

/* === Kill dark gradients inline === */
html body *[style*="linear-gradient"]:not(button):not(a):not([class*="logo"]):not([class*="badge"]):not(#d466-sticky-cta-bar):not(#d466-sticky-cta-bar *),
html body *[style*="rgba(10"]:not(button):not(a):not([class*="logo"]),
html body *[style*="rgba(14"]:not(button):not(a):not([class*="logo"]),
html body *[style*="rgba(20"]:not(button):not(a):not([class*="logo"]),
html body *[style*="background:#0"]:not(button),
html body *[style*="background-color:#0"]:not(button),
html body *[style*="background:#1"]:not(button),
html body *[style*="background-color:#1"]:not(button) {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1B1B1B !important;
}

/* === CTA banner stays purple === */
html body #d466-sticky-cta-bar, html body #d466-sticky-cta-bar * {
  color: #FFFFFF !important;
}
html body #d466-sticky-cta-bar {
  background: linear-gradient(90deg, #3730A3, #4F46E5) !important;
}
html body #d466-sticky-cta-bar a.cta-btn {
  color: #3730A3 !important;
  background: #FFFFFF !important;
}

/* === Pills/badges keep accent colors === */
html body [class*="pill"]:not(.cta-btn), html body [class*="badge"], html body [class*="chip"],
html body [class*="tag"]:not(html), html body [class*="status"] {
  color: revert; background-color: revert;
}

/* === Selection === */
html body ::selection { background: rgba(99, 102, 241, 0.15); }

/* === Kill black bands forbidden === */
html body header[style*="background:#0"], html body nav[style*="background:#0"],
html body header[style*="background:black"], html body nav[style*="background:black"] {
  background: rgba(250,248,245,0.92) !important;
  background-color: rgba(250,248,245,0.92) !important;
}

/* === KILL dark theme toggles === */
[data-theme="dark"], .dark, .dark-theme, .theme-dark, .night-mode {
  background: #faf7f5 !important; color: #1B1B1B !important; color-scheme: light !important;
}
button[class*="theme-toggle"], [class*="dark-switch"], [data-toggle="dark"] { display: none !important; }

/* === Pseudo-elements overlays off === */
*::before, *::after { 
  background-image: none !important; 
  filter: none !important; 
  backdrop-filter: none !important; 
}
* { backdrop-filter: none !important; }
html body header, html body nav { backdrop-filter: blur(16px) !important; }
[class*="overlay"]:not(#d466-sticky-cta-bar), [class*="backdrop"]:not(#d466-sticky-cta-bar) {
  background-image: none !important; opacity: 0 !important;
}

/* === Body padding for sticky pill === */
html body { padding-bottom: 80px !important; }

/* === Chat widgets above pill === */
[class*="chat-widget"], [class*="wevia-assistant"], [class*="whatsapp-btn"],
[class*="wevia-avatar"], [class*="wevia-live"], [class*="floating-chat"] {
  bottom: 90px !important;
}