/*!
 * weval-editorial.css — WEVAL Editorial Design System
 * Doctrine: D-OPUS89
 * Source pattern: demo-agents.html (validated by Yacine)
 *
 * Usage:
 *   <link rel="stylesheet" href="/assets/weval-editorial.css">
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">
 *
 * Compatible with Lyti's D807/D700 contrast guard (light theme native).
 * All tokens use CSS variables → easy to override per-page if needed.
 */

/* === DESIGN TOKENS === */
:root {
  /* Backgrounds */
  --we-bg: #faf7f5;          /* warm off-white page background */
  --we-bg2: #ffffff;         /* paper white for cards / panels */
  --we-bg-elev: #fafafa;     /* slightly raised surface */

  /* Foreground / text */
  --we-fg: #1B1B1B;          /* primary text, near-black */
  --we-fg2: #555555;         /* secondary text */
  --we-fg3: #999999;         /* tertiary / hint text */
  --we-fg4: #cccccc;         /* disabled */

  /* Accent palette */
  --we-a: #3730A3;           /* primary indigo */
  --we-al: #6366F1;          /* indigo light (hover, link) */
  --we-a-soft: rgba(99,102,241,0.08); /* subtle backgrounds */

  /* Semantic colors */
  --we-g: #047857;           /* green / success */
  --we-g-soft: rgba(4,120,87,0.08);
  --we-r: #B91C1C;           /* red / danger */
  --we-r-soft: rgba(185,28,28,0.08);
  /* === BRAND CHART ALIGNMENT D-OPUS94 === */
  /* Deepen primary indigo to match main logo (logo-weval-transparent.svg) */
  --we-a-deep: #312e81;        /* matches logo */
  --we-a-light: #6366F1;       /* tonal lighter */

  /* Marbio propale brand accents */
  --we-navy: #1a1a2e;          /* dark navy from logo-weval.svg + Marbio section dividers */
  --we-navy-soft: #2c2c4a;     /* hover/border on navy bg */
  --we-gold: #D4A53B;          /* premium gold accent (Marbio "PARTIE I") */
  --we-gold-soft: rgba(212,165,59,0.12);
  --we-teal-deep: #047857;     /* deeper emerald (Marbio decorative "I") */
  --we-teal-bright: #00a896;   /* bright teal (Marbio rituals badge) */

  /* Serif font for branding marks (matches Marbio "WEVAL Consulting" heading) */
  --we-font-serif: 'Cormorant Garamond', 'Crimson Pro', 'Playfair Display', Georgia, serif;

  --we-o: #B45309;           /* orange / warning */
  --we-o-soft: rgba(180,83,9,0.08);
  --we-y: #B45309;           /* yellow alias */

  /* Borders */
  --we-bd: #E8E2D9;          /* warm beige border */
  --we-bd-strong: #d4cfc5;   /* stronger separator */

  /* Radius */
  --we-R: 16px;              /* default card radius */
  --we-R-sm: 10px;           /* button / input radius */
  --we-R-lg: 24px;           /* hero / large radius */

  /* Shadows */
  --we-sh: 0 1px 3px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.03);
  --we-sh-hover: 0 2px 6px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.04);
  --we-sh-cta: 0 2px 12px rgba(55,48,163,.18);

  /* Typography stack */
  --we-font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --we-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, monospace;

  /* Sector accents (for sector-specific top stripes) */
  --we-sec-pharma:    #7c3aed;
  --we-sec-banking:   #1e40af;
  --we-sec-public:    #dc2626;
  --we-sec-industry:  #475569;
  --we-sec-retail:    #be185d;
  --we-sec-edu:       #0ea5e9;
  --we-sec-energy:    #b45309;
  --we-sec-health:    #0891b2;
  --we-sec-logistics: #0284c7;
  --we-sec-startups:  #6366F1;
}

/* === RESET (minimal, scoped) === */
.we-reset *,
.we-reset *::before,
.we-reset *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === BASE TYPOGRAPHY === */
.we-body {
  background: var(--we-bg);
  color: var(--we-fg);
  font-family: var(--we-font);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.we-body ::selection { background: rgba(99,102,241,.15); }

.we-h1 {
  font-family: var(--we-font);
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.we-h1 strong { font-weight: 400; color: var(--we-a); }

.we-h2 {
  font-family: var(--we-font);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.we-h2 strong { font-weight: 400; color: var(--we-a); }

.we-h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.we-sub {
  font-size: 16px;
  color: var(--we-fg2);
  font-weight: 300;
  line-height: 1.7;
}

.we-small {
  font-size: 12px;
  color: var(--we-fg3);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.we-mono {
  font-family: var(--we-font-mono);
  font-size: 12px;
  letter-spacing: 0;
}

/* === NAV === */
.we-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,245,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--we-bd);
}
.we-nav-l {
  color: var(--we-fg);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 400; font-size: 16px;
}
.we-nav-l b { color: var(--we-a); font-weight: 600; }
.we-nav-r { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.we-nav-r a, .we-nav-link {
  font-size: 13px; padding: 7px 14px; border-radius: var(--we-R-sm);
  color: var(--we-fg2); font-weight: 500; transition: .2s;
  text-decoration: none;
}
.we-nav-r a:hover, .we-nav-link:hover { color: var(--we-a); background: var(--we-a-soft); }
.we-nav-r a.active, .we-nav-link.active {
  background: var(--we-a); color: #fff; font-weight: 600;
}

/* === HERO === */
.we-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 32px 30px;
  text-align: center;
}
.we-hero-sub {
  max-width: 640px;
  margin: 0 auto 32px;
}

/* === KPI STRIP === */
.we-kpi-strip {
  display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto;
  padding: 28px 32px;
  border-top: 1px solid var(--we-bd);
  border-bottom: 1px solid var(--we-bd);
}
.we-kpi { text-align: center; }
.we-kpi-val {
  font-family: var(--we-font);
  font-size: 36px;
  letter-spacing: -.03em;
  color: var(--we-a);
  line-height: 1;
  font-weight: 400;
}
.we-kpi-lbl {
  font-size: 10px;
  color: var(--we-fg3);
  font-weight: 500;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* === SECTION === */
.we-section { padding: 0 32px; max-width: 1180px; margin: 0 auto; }
.we-sec-head {
  margin: 60px auto 18px;
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.we-sec-head .we-sub-h {
  font-size: 13px;
  color: var(--we-fg3);
  margin-top: 4px;
}

/* === BUTTONS === */
.we-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px;
  border-radius: 12px;
  font: 500 14px var(--we-font);
  cursor: pointer; border: none;
  text-decoration: none;
  transition: .25s;
}
.we-btn-primary {
  background: var(--we-a);
  color: #fff;
  box-shadow: var(--we-sh-cta);
}
.we-btn-primary:hover { transform: translateY(-1px); }
.we-btn-outline {
  background: transparent;
  color: var(--we-fg);
  border: 1.5px solid var(--we-bd);
}
.we-btn-outline:hover {
  border-color: var(--we-al);
  color: var(--we-a);
}
.we-btn-ghost {
  background: transparent;
  color: var(--we-fg2);
}
.we-btn-ghost:hover {
  background: var(--we-a-soft);
  color: var(--we-a);
}
.we-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--we-R-sm); }

/* === CARDS === */
.we-card {
  background: var(--we-bg2);
  border: 1px solid var(--we-bd);
  border-radius: var(--we-R);
  padding: 24px;
  position: relative;
  transition: .25s;
}
.we-card:hover {
  border-color: var(--we-al);
  box-shadow: var(--we-sh);
  transform: translateY(-2px);
}
.we-card-flat:hover { transform: none; }

/* Card with sector-color top stripe */
.we-card-stripe::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--we-stripe-color, var(--we-a));
  border-radius: var(--we-R) var(--we-R) 0 0;
}

/* Card sector colors (use data-sec="X" on card) */
.we-card[data-sec="pharma"]    { --we-stripe-color: var(--we-sec-pharma); }
.we-card[data-sec="banking"]   { --we-stripe-color: var(--we-sec-banking); }
.we-card[data-sec="public"]    { --we-stripe-color: var(--we-sec-public); }
.we-card[data-sec="industry"]  { --we-stripe-color: var(--we-sec-industry); }
.we-card[data-sec="retail"]    { --we-stripe-color: var(--we-sec-retail); }
.we-card[data-sec="edu"]       { --we-stripe-color: var(--we-sec-edu); }
.we-card[data-sec="energy"]    { --we-stripe-color: var(--we-sec-energy); }
.we-card[data-sec="health"]    { --we-stripe-color: var(--we-sec-health); }
.we-card[data-sec="logistics"] { --we-stripe-color: var(--we-sec-logistics); }
.we-card[data-sec="startups"]  { --we-stripe-color: var(--we-sec-startups); }

/* === GRIDS === */
.we-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.we-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.we-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.we-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* === FEATURE CARD (icon + title + desc) === */
.we-feat {
  padding: 20px;
  border: 1px solid var(--we-bd);
  border-radius: var(--we-R);
  background: var(--we-bg2);
  transition: .2s;
}
.we-feat:hover { border-color: var(--we-al); box-shadow: var(--we-sh); }
.we-feat-i { font-size: 22px; margin-bottom: 8px; }
.we-feat-t { font-weight: 500; font-size: 14px; margin-bottom: 4px; color: var(--we-fg); letter-spacing: -.01em; }
.we-feat-d { font-size: 12px; color: var(--we-fg2); line-height: 1.6; }

/* === BADGES === */
.we-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.we-badge-a { background: var(--we-a-soft); color: var(--we-a); }
.we-badge-g { background: var(--we-g-soft); color: var(--we-g); }
.we-badge-r { background: var(--we-r-soft); color: var(--we-r); }
.we-badge-o { background: var(--we-o-soft); color: var(--we-o); }

/* === PROMISE / CALLOUT BOX === */
.we-promise {
  max-width: 880px;
  margin: 30px auto;
  padding: 28px 36px;
  background: var(--we-bg2);
  border: 1px solid var(--we-bd);
  border-left: 4px solid var(--we-a);
  border-radius: var(--we-R);
}
.we-promise.we-promise-g { border-left-color: var(--we-g); }
.we-promise.we-promise-r { border-left-color: var(--we-r); }
.we-promise.we-promise-o { border-left-color: var(--we-o); }

/* === DIVIDER === */
.we-hr {
  border: 0;
  border-top: 1px solid var(--we-bd);
  margin: 32px 0;
}

/* === FOOTER === */
.we-footer {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 32px;
  border-top: 1px solid var(--we-bd);
  text-align: center;
  font-size: 12px;
  color: var(--we-fg3);
}
.we-footer a {
  color: var(--we-fg2);
  margin: 0 8px;
  transition: .2s;
  text-decoration: none;
}
.we-footer a:hover { color: var(--we-a); }

/* === INPUT / SELECT === */
.we-input, .we-select {
  padding: 10px 14px;
  border-radius: var(--we-R-sm);
  border: 1.5px solid var(--we-bd);
  background: var(--we-bg2);
  color: var(--we-fg);
  font-family: var(--we-font);
  font-size: 13px;
  font-weight: 500;
  transition: .2s;
  outline: none;
}
.we-input:focus, .we-select:focus {
  border-color: var(--we-al);
}
.we-select {
  padding-right: 32px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.we-label {
  font-size: 11px;
  color: var(--we-fg3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 4px;
}

/* === UTILITIES === */
.we-flex { display: flex; }
.we-flex-c { display: flex; align-items: center; }
.we-flex-cc { display: flex; align-items: center; justify-content: center; }
.we-flex-sb { display: flex; align-items: center; justify-content: space-between; }
.we-flex-col { display: flex; flex-direction: column; }
.we-gap-1 { gap: 4px; } .we-gap-2 { gap: 8px; } .we-gap-3 { gap: 12px; } .we-gap-4 { gap: 16px; } .we-gap-6 { gap: 24px; } .we-gap-8 { gap: 32px; }
.we-text-c { text-align: center; }
.we-text-l { text-align: left; }
.we-text-r { text-align: right; }
.we-mt-0 { margin-top: 0; } .we-mt-1 { margin-top: 4px; } .we-mt-2 { margin-top: 8px; } .we-mt-4 { margin-top: 16px; } .we-mt-6 { margin-top: 24px; } .we-mt-8 { margin-top: 32px; }
.we-mb-1 { margin-bottom: 4px; } .we-mb-2 { margin-bottom: 8px; } .we-mb-4 { margin-bottom: 16px; } .we-mb-6 { margin-bottom: 24px; }
.we-px-2 { padding-left: 8px; padding-right: 8px; } .we-px-4 { padding-left: 16px; padding-right: 16px; }
.we-fg2 { color: var(--we-fg2); } .we-fg3 { color: var(--we-fg3); } .we-a-color { color: var(--we-a); }
.we-fw-300 { font-weight: 300; } .we-fw-400 { font-weight: 400; } .we-fw-500 { font-weight: 500; } .we-fw-600 { font-weight: 600; }
.we-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* === PRINT === */
@media print {
  @page { size: A4; margin: 10mm; }
  .we-no-print { display: none !important; }
  .we-nav { display: none !important; }
  .we-body { background: #fff; }
  .we-card { box-shadow: none; border: 1px solid var(--we-bd); break-inside: avoid; }
  .we-page-break { page-break-before: always; }
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .we-nav { padding: 12px 16px; }
  .we-hero { padding: 60px 16px 24px; }
  .we-section { padding-left: 16px; padding-right: 16px; }
  .we-kpi-strip { gap: 24px; padding: 24px 16px; }
  .we-kpi-val { font-size: 28px; }
  .we-grid { grid-template-columns: 1fr; }
  .we-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .we-h1 { font-size: 28px; }
  .we-h2 { font-size: 22px; }
  .we-btn { padding: 9px 18px; font-size: 13px; }
}

/* === END weval-editorial.css === */

/* === D-OPUS94 BRAND COMPONENTS === */

/* Dark Marbio-style section (premium propale section dividers) */
.we-section-dark {
  background: var(--we-navy);
  color: #f5f5f5;
  padding: 80px 32px;
  position: relative;
  overflow: hidden;
}
.we-section-dark .we-h1, .we-section-dark .we-h2, .we-section-dark .we-h3 { color: #fff; }
.we-section-dark .we-sub, .we-section-dark .we-fg2 { color: #c5c5d3; }
.we-section-dark .we-fg3 { color: #8b8ba3; }
.we-section-dark a { color: var(--we-gold); }
.we-section-dark .we-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #f5f5f5;
}
.we-section-dark .we-badge {
  background: var(--we-gold-soft);
  color: var(--we-gold);
  border-color: rgba(212,165,59,0.3);
}

/* WEVAL brand mark (serif "WEVAL Consulting" Marbio style) */
.we-brand-mark {
  font-family: var(--we-font-serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--we-fg);
}
.we-brand-mark strong {
  font-weight: 600;
  font-style: italic;
}
.we-brand-mark.dark { color: #fff; }

/* Initial cap (Marbio "I" decorative letter) */
.we-initial {
  font-family: var(--we-font-serif);
  font-size: 84px;
  line-height: 1;
  font-weight: 500;
  color: var(--we-teal-deep);
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
.we-initial.dark { color: var(--we-teal-bright); }
.we-initial.gold { color: var(--we-gold); }

/* Section divider with eyebrow (Marbio "PARTIE I" style) */
.we-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--we-gold);
  margin-bottom: 24px;
}
.we-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--we-gold);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}

/* Gold premium accent button */
.we-btn-gold {
  background: var(--we-gold);
  color: #000;
  border-color: var(--we-gold);
  font-weight: 600;
}
.we-btn-gold:hover {
  background: #b8902c;
  border-color: #b8902c;
}

/* Gold badge */
.we-badge-gold {
  background: var(--we-gold-soft);
  color: var(--we-gold);
  border: 1px solid rgba(212,165,59,0.3);
}

/* Premium card with gold top accent */
.we-card-gold {
  background: var(--we-bg2);
  border: 1px solid var(--we-bd);
  border-top: 3px solid var(--we-gold);
  padding: 24px;
  border-radius: var(--we-R);
}

/* Navy outlined card (Marbio style) */
.we-card-navy {
  background: var(--we-bg2);
  border: 1px solid var(--we-bd);
  border-left: 4px solid var(--we-navy);
  padding: 24px;
  border-radius: var(--we-R);
}

/* Brand stripe (Marbio top header style) */
.we-brand-stripe {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  background: var(--we-navy);
  color: #fff;
  border-bottom: 2px solid var(--we-gold);
}
.we-brand-stripe-left { display: flex; align-items: center; gap: 14px; font-family: var(--we-font-serif); font-size: 22px; font-weight: 500; }
.we-brand-stripe-left small { font-family: var(--we-font); font-size: 11px; opacity: 0.7; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
.we-brand-stripe-right { font-size: 11px; color: rgba(255,255,255,0.7); font-family: var(--we-font-mono); letter-spacing: 0.5px; }

/* === D-OPUS98 Navigation logo === */
.we-nav-l { display: inline-flex; align-items: center; gap: 10px; }
.we-nav-logo {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.we-nav-logo:hover { transform: scale(1.05); }
.we-nav-logo.mark { height: 28px; }
.we-nav-logo.full { height: 30px; }
.we-nav-logo.wevia { height: 30px; }
.we-nav-sep {
  color: var(--we-fg3);
  margin: 0 8px;
  font-weight: 300;
}
.we-nav-page {
  font-family: var(--we-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--we-fg);
  letter-spacing: -.01em;
}
@media (max-width: 600px) {
  .we-nav-logo { height: 22px; }
}