/* =============================================================================
   Lexo AI — Marketing site styles
   Direction "Sovereign Counsel". Imports foundations from colors_and_type.css.
   Built on the Lexo website UI kit vocabulary, extended with new sections.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; }
img { max-width: 100%; }

/* Lucide icons sized via font-size */
.lic { display: inline-flex; }
.lic svg { width: 1em; height: 1em; stroke-width: 1.85; }

.lx-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.lx-section { padding: 96px 0; position: relative; }
.lx-overline { display: inline-block; margin-bottom: 16px; }

/* ---- Header ------------------------------------------------------------- */
.lx-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper-100) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.lx-header.scrolled {
  border-bottom-color: var(--border);
  background: color-mix(in oklab, var(--paper-100) 92%, transparent);
  box-shadow: var(--shadow-xs);
}
.lx-header__in { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 70px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.lx-brand { display: flex; align-items: center; gap: 11px; color: var(--navy-700); cursor: pointer; text-decoration: none; justify-self: start; }
.lx-brand svg { display: block; }
.lx-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-size: 21px; color: var(--navy-700); }
.lx-wordmark span { color: var(--brass-600); }
.lx-nav { display: flex; gap: 34px; justify-self: center; }
.lx-nav a { font: var(--text-sm); font-weight: 500; color: var(--fg-muted); cursor: pointer; transition: color .18s; text-decoration: none; position: relative; }
.lx-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--brass-500); transform: scaleX(0); transition: transform .2s; }
.lx-nav a:hover { color: var(--primary); }
.lx-nav a.active { color: var(--primary); }
.lx-nav a.active::after { transform: scaleX(1); }
.lx-header__cta { display: flex; align-items: center; gap: 14px; justify-self: end; }

/* Light/Dark mode toggle — Souverain ⇄ Robe */
.lx-themetoggle { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg-muted); cursor: pointer; padding: 0;
  transition: color .18s, background .18s, border-color .18s, transform .12s; }
.lx-themetoggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.lx-themetoggle:active { transform: translateY(1px); }
.lx-themetoggle .lic svg { width: 18px; height: 18px; }
.lx-menu-btn { display: none; background: none; border: 0; color: var(--navy-700); cursor: pointer; padding: 6px; justify-self: end; }

/* Nav treatment: "marquée" — solid surface, persistent border + accent top-rule */
body.nav-strong .lx-header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
body.nav-strong .lx-header.scrolled { background: var(--surface); box-shadow: var(--shadow-md); }
body.nav-strong .lx-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
body.nav-strong .lx-header__in { height: 74px; }
body.nav-strong .lx-nav a { color: var(--fg); }

/* Mobile nav panel */
.lx-mobnav { display: none; position: fixed; top: 70px; left: 0; right: 0; z-index: 49;
  background: var(--paper-100); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  padding: 14px 32px 22px; flex-direction: column; gap: 4px;
  transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.lx-mobnav.open { transform: none; opacity: 1; pointer-events: auto; }
.lx-mobnav a { font: var(--text-body); font-weight: 500; color: var(--fg); padding: 12px 4px; border-bottom: 1px solid var(--border); text-decoration: none; }
.lx-mobnav a.active { color: var(--primary); }
.lx-mobnav .lx-btn { margin-top: 14px; }

/* ---- Buttons ------------------------------------------------------------ */
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer; transition: all .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; text-decoration: none; }
.lx-btn--md { font-size: 14px; padding: 9px 17px; }
.lx-btn--lg { font-size: 16px; padding: 13px 26px; }
.lx-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.lx-btn--primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--primary-foreground); }
.lx-btn--primary:active { transform: translateY(0); background: var(--primary-active); }
.lx-btn--accent { background: var(--accent); color: var(--accent-foreground); }
.lx-btn--accent:hover { background: var(--accent-hover); color: var(--accent-foreground); }
.lx-btn--secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.lx-btn--secondary:hover { background: var(--paper-50); border-color: var(--fg-subtle); color: var(--fg); }
.lx-btn--ghost { background: transparent; color: var(--primary); }
.lx-btn--ghost:hover { background: var(--navy-50); color: var(--primary); }
/* Button-links: the global `.lexo a { color: var(--primary) }` rule (specificity
   0,1,1) otherwise beats `.lx-btn--*` (0,1,0) and recolors link-button text —
   making a primary <a> button's label match its own background. These equal-
   specificity rules live in the later-loaded sheet, so they win the tie. */
.lexo a.lx-btn { text-decoration: none; }
.lexo a.lx-btn--primary, .lexo a.lx-btn--primary:hover { color: var(--primary-foreground); }
.lexo a.lx-btn--accent, .lexo a.lx-btn--accent:hover { color: var(--accent-foreground); }
.lexo a.lx-btn--secondary, .lexo a.lx-btn--secondary:hover { color: var(--fg); }
.lexo a.lx-btn--ghost, .lexo a.lx-btn--ghost:hover { color: var(--primary); }

/* ---- Hero --------------------------------------------------------------- */
.lx-hero { padding: 92px 0 76px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lx-hero__copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lx-hero__badge { display: inline-flex; align-items: center; gap: 8px;
  font: var(--text-caption); color: var(--fg-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 15px; margin-bottom: 26px; }
.lx-hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-500); }
.lx-hero h1 { font: var(--text-display); font-size: clamp(36px, 5.2vw, 58px); line-height: 1.12; letter-spacing: -.02em;
  max-width: 20ch; margin: 0 auto 26px; color: var(--fg); text-wrap: balance; }
.lx-hero h1 em { font-style: italic; color: var(--primary); }
.lx-hero__sub { font: var(--text-body-lg); color: var(--fg-muted); max-width: 56ch; margin: 0 auto 52px; }
.lx-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lx-hero__stats { display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.lx-hero__stat b { display: block; font: var(--text-h2); font-size: 34px; color: var(--primary); letter-spacing: -.01em; }
.lx-hero__stat span { font: var(--text-caption); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .08em; }
.lx-hero__shot { margin-top: 56px; position: relative; width: 100%; }

/* Hero variation: split (text left, preview right) */
body.hero-split .lx-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; text-align: left; padding-top: 76px; }
body.hero-split .lx-hero__copy { align-items: flex-start; }
body.hero-split .lx-hero h1 { margin: 0 0 24px; max-width: 14ch; }
body.hero-split .lx-hero__sub { margin: 0 0 48px; max-width: 46ch; }
body.hero-split .lx-hero__actions { justify-content: flex-start; }
body.hero-split .lx-hero__stats { justify-content: flex-start; gap: 38px; margin-top: 22px; }
body.hero-split .lx-hero__shot { margin-top: 0; }
body.hero-split .lxp { max-width: 100%; }
body.hero-split .lxp-float--l { left: -6px; }
body.hero-split .lxp-float--r { right: -6px; }

/* Hero variation: editorial (large left-aligned serif) */
body.hero-editorial .lx-hero { align-items: flex-start; text-align: left; padding-top: 88px; }
body.hero-editorial .lx-hero__copy { align-items: flex-start; }
body.hero-editorial .lx-hero h1 { font-size: clamp(44px, 6.6vw, 78px); line-height: 1.04; max-width: 17ch; margin: 0 0 26px; }
body.hero-editorial .lx-hero__sub { margin: 0 0 50px; max-width: 52ch; }
body.hero-editorial .lx-hero__actions { justify-content: flex-start; }
body.hero-editorial .lx-hero__stats { justify-content: flex-start; gap: 48px; margin-top: 24px; }
body.hero-editorial .lx-hero__copy::after { content: ""; display: block; width: 72px; height: 3px; background: var(--brass-500); margin: 30px 0 0; order: 99; }

/* ---- Inbox preview (hero product shot) ---------------------------------- */
.lxp { max-width: 760px; margin: 0 auto; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.lxp__bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border);
  background: var(--paper-50); color: var(--navy-700); font: var(--text-sm); font-weight: 600; }
.lxp__bar .lxp__title { color: var(--fg); }
.lxp__count { margin-left: auto; font: var(--text-caption); font-weight: 600; color: var(--brass-700);
  background: var(--brass-100); padding: 3px 10px; border-radius: var(--radius-full); }
.lxp__row { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--border); transition: background .18s; }
.lxp__row:hover { background: var(--paper-50); }
.lxp__av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: var(--text-caption); font-weight: 700; color: #fff; }
.lxp__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lxp__b b { font: var(--text-sm); font-weight: 600; color: var(--fg); }
.lxp__b i { font: var(--text-caption); font-style: normal; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxp__tag { font: var(--text-overline); padding: 4px 11px; border-radius: var(--radius-full); flex: none; letter-spacing: .05em; }
.lxp__tag--urgent { color: var(--tag-urgent-fg); background: var(--tag-urgent-bg); }
.lxp__tag--client { color: var(--tag-client-fg); background: var(--tag-client-bg); }
.lxp__tag--admin { color: var(--tag-admin-fg); background: var(--tag-admin-bg); }
.lxp__tag--info { color: var(--tag-info-fg); background: var(--tag-info-bg); }
.lxp__reply { margin: 14px 18px 18px; background: var(--brass-50); border: 1px solid var(--brass-200); border-radius: var(--radius); padding: 14px 16px; }
.lxp__rh { display: flex; align-items: center; gap: 8px; font: var(--text-overline); color: var(--brass-700); letter-spacing: .06em; margin-bottom: 8px; text-transform: uppercase; }
.lxp__reply p { font: var(--text-sm); color: var(--fg); line-height: 1.55; margin: 0 0 12px; }
.lxp__reply p strong { font-weight: 600; }
.lxp__ra { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.lxp__ra span { font: var(--text-sm); font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.lxp__ra b { font: var(--text-sm); font-weight: 600; color: #fff; background: var(--primary);
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer; }

/* Floating tags around the hero shot */
.lxp-float { position: absolute; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; font: var(--text-sm); font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-md); }
.lxp-float .lic { color: var(--brass-600); }
.lxp-float--l { left: -8px; bottom: 40px; animation: floaty 5s ease-in-out infinite; }
.lxp-float--r { right: -8px; top: 60px; animation: floaty 5s ease-in-out infinite .8s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---- Trust bar ---------------------------------------------------------- */
.lx-trust { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--paper-50); }
.lx-trust__label { text-align: center; font: var(--text-caption); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle); margin-bottom: 26px; }
.lx-trust__row { display: flex; gap: 56px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lx-trust__item { display: flex; align-items: center; gap: 11px; opacity: .72; filter: grayscale(1); transition: all .25s; }
.lx-trust__item:hover { opacity: 1; filter: none; }
.lx-trust__item img { width: 28px; height: 28px; }
.lx-trust__item span { font: var(--text-body); font-weight: 600; color: var(--fg); }

/* ---- Section heads ------------------------------------------------------ */
.lx-head { max-width: 640px; margin-bottom: 48px; }
.lx-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lx-head h2 { font: var(--text-h2); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.01em; margin: 0 0 14px; color: var(--fg); }
.lx-head p { font: var(--text-body-lg); color: var(--fg-muted); margin: 0; }

/* ---- Feature bento ------------------------------------------------------ */
.lx-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-sm); transition: all .22s; position: relative; overflow: hidden; }
.lx-feat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
.lx-feat--wide { grid-column: span 2; }
.lx-feat__ico { width: 46px; height: 46px; border-radius: var(--radius); background: var(--navy-50);
  color: var(--navy-700); display: grid; place-items: center; margin-bottom: 18px; }
.lx-feat__ico.brass { background: var(--brass-100); color: var(--brass-700); }
.lx-feat h3 { font: var(--text-h3); font-size: 20px; margin: 0 0 7px; color: var(--fg); }
.lx-feat p { font: var(--text-body); color: var(--fg-muted); margin: 0; }
/* mini inbox inside a wide feature card */
.lx-feat__mini { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.lx-feat__minirow { display: flex; align-items: center; justify-content: space-between;
  background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 13px; font: var(--text-sm); color: var(--fg); }
.lx-feat__minirow .l { display: flex; align-items: center; gap: 10px; }
.lx-feat__minirow .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- How it works (timeline) -------------------------------------------- */
.lx-steps { max-width: 820px; margin: 0 auto; position: relative; }
.lx-steps::before { content: ""; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, var(--brass-400), var(--navy-300), transparent); }
.lx-step { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 44px; }
.lx-step:last-child { margin-bottom: 0; }
.lx-step__num { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; place-items: center;
  font: var(--text-h3); font-family: var(--font-display); color: var(--primary); position: relative; z-index: 1; }
.lx-step__body h3 { font: var(--text-h3); font-size: 21px; margin: 8px 0 8px; color: var(--fg); }
.lx-step__body p { font: var(--text-body); color: var(--fg-muted); margin: 0; max-width: 60ch; }

/* ---- Security (dark navy) ----------------------------------------------- */
.lx-security { background: var(--navy-900); color: var(--paper-50); }
.lx-security .lx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lx-security .lx-overline { color: var(--brass-400); }
.lx-security h2 { font: var(--text-h2); font-size: clamp(28px,3.4vw,40px); color: var(--paper-0); margin: 0 0 30px; letter-spacing: -.01em; }
.lx-secitem { display: flex; gap: 16px; margin-bottom: 22px; }
.lx-secitem__ico { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in oklab, var(--brass-500) 22%, transparent); color: var(--brass-400); }
.lx-secitem h4 { font: var(--text-title); color: var(--paper-0); margin: 0 0 5px; }
.lx-secitem p { font: var(--text-sm); color: var(--navy-300); margin: 0; }
.lx-code { background: #0d151e; border: 1px solid color-mix(in oklab, var(--paper-0) 10%, transparent);
  border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-lg); }
.lx-code__bar { display: flex; gap: 7px; margin-bottom: 16px; }
.lx-code__bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lx-code pre { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--navy-300); white-space: pre-wrap; }
.lx-code .k { color: var(--brass-400); }
.lx-code .s { color: #9fc6a6; }

/* ---- Stats band (results) ----------------------------------------------- */
.lx-results { background: var(--paper-50); }
.lx-results .lx-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.lx-results h2 { font: var(--text-h2); font-size: clamp(26px,3vw,36px); color: var(--fg); margin: 0 0 8px; max-width: 18ch; }
.lx-benefits { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.lx-benefit { display: flex; gap: 15px; align-items: flex-start; }
.lx-benefit__ico { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); background: var(--forest-100);
  color: var(--forest-600); display: grid; place-items: center; margin-top: 2px; }
.lx-benefit h4 { font: var(--text-title); font-size: 16px; margin: 0 0 3px; color: var(--fg); }
.lx-benefit p { font: var(--text-sm); color: var(--fg-muted); margin: 0; }
.lx-bignum { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brass-500);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 48px 40px; text-align: center; }
.lx-bignum__n { font: var(--text-display); font-size: 84px; line-height: 1; color: var(--primary); letter-spacing: -.03em; }
.lx-bignum__n span { font-size: 44px; color: var(--brass-600); }
.lx-bignum__d { font: var(--text-body-lg); color: var(--fg-muted); margin: 18px auto 0; max-width: 30ch; }
.lx-bignum__sub { display: flex; justify-content: center; gap: 40px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.lx-bignum__sub b { display: block; font: var(--text-h3); font-family: var(--font-display); color: var(--fg); }
.lx-bignum__sub span { font: var(--text-caption); color: var(--fg-subtle); }

/* ---- Integrations grid -------------------------------------------------- */
.lx-integ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-integ__card { display: flex; align-items: center; gap: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: all .22s; }
.lx-integ__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.lx-integ__logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--radius); }
.lx-integ__logo img { width: 26px; height: 26px; }
.lx-integ__t { font: var(--text-title); font-size: 16px; color: var(--fg); }
.lx-integ__d { font: var(--text-sm); color: var(--fg-muted); }
.lx-integ__more { display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 20px 22px;
  font: var(--text-sm); font-weight: 600; color: var(--fg-muted); }

/* ---- Testimonials ------------------------------------------------------- */
.lx-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.lx-quote__stars { color: var(--brass-500); display: flex; gap: 2px; margin-bottom: 13px; }
.lx-quote__stars .lic svg { fill: var(--brass-500); }
.lx-quote p { font: var(--text-body); color: var(--fg); line-height: 1.6; margin: 0 0 18px; font-style: italic; }
.lx-quote__who { display: flex; align-items: center; gap: 11px; }
.lx-quote__mono { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: var(--text-caption); font-weight: 700; color: #fff; }
.lx-quote__name { font: var(--text-sm); font-weight: 600; color: var(--fg); }
.lx-quote__role { font: var(--text-caption); color: var(--fg-subtle); }

/* ---- Pricing ------------------------------------------------------------ */
.lx-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.lx-price { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.lx-price--feat { border-color: var(--primary); box-shadow: var(--shadow-md); position: relative; }
.lx-price__tag { position: absolute; top: -11px; left: 28px; background: var(--brass-500); color: var(--navy-900);
  font: var(--text-overline); padding: 4px 11px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .06em; }
.lx-price__plan { font: var(--text-title); color: var(--primary); margin-bottom: 10px; }
.lx-price__amt { font: var(--text-display); font-size: 42px; color: var(--fg); line-height: 1.1; }
.lx-price__amt small { font: var(--text-sm); color: var(--fg-muted); font-weight: 400; }
.lx-price__desc { font: var(--text-sm); color: var(--fg-muted); margin: 14px 0; min-height: 56px; }
.lx-price ul { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 11px; }
.lx-price li { display: flex; gap: 10px; font: var(--text-sm); color: var(--fg); }
.lx-price li .lic { color: var(--success); flex: none; margin-top: 1px; }
.lx-price .lx-btn { width: 100%; }
.lx-price__hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* ---- FAQ ---------------------------------------------------------------- */
.lx-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lx-faqitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s; }
.lx-faqitem.open { border-color: var(--border-strong); }
.lx-faqitem__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 20px 24px; text-align: left;
  font: var(--text-title); font-size: 17px; color: var(--fg); }
.lx-faqitem__q .lic { color: var(--brass-600); transition: transform .25s; flex: none; }
.lx-faqitem.open .lx-faqitem__q .lic { transform: rotate(45deg); }
.lx-faqitem__a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); }
.lx-faqitem__a p { font: var(--text-body); color: var(--fg-muted); margin: 0; padding: 0 24px 22px; max-width: 70ch; }

/* ---- Final CTA ---------------------------------------------------------- */
.lx-cta { padding: 92px 0; }
.lx-cta__box { max-width: 860px; margin: 0 auto; text-align: center; background: var(--navy-900);
  border-radius: var(--radius-xl); padding: 72px 56px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.lx-cta__box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% -10%, color-mix(in oklab, var(--brass-500) 14%, transparent), transparent 70%); }
.lx-cta__box h2 { font: var(--text-h2); font-size: clamp(28px,3.6vw,42px); color: var(--paper-0); margin: 0 0 16px; position: relative; letter-spacing: -.01em; }
.lx-cta__box p { font: var(--text-body-lg); color: var(--navy-300); margin: 0 0 32px; position: relative; }
.lx-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.lx-cta__note { font: var(--text-sm); color: var(--navy-300); margin-top: 20px; position: relative; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.lx-cta__note span { display: inline-flex; align-items: center; gap: 7px; }
.lx-cta__note .lic { color: var(--brass-400); }
/* on dark, secondary button needs to read on navy */
.lx-cta__actions .lx-btn--secondary { background: transparent; color: var(--paper-0); border-color: color-mix(in oklab, var(--paper-0) 28%, transparent); }
.lx-cta__actions .lx-btn--secondary:hover { background: color-mix(in oklab, var(--paper-0) 8%, transparent); border-color: var(--paper-0); color: var(--paper-0); }

/* ---- Footer ------------------------------------------------------------- */
.lx-footer { background: var(--paper-50); border-top: 1px solid var(--border); padding: 56px 0 32px; }
.lx-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 40px; }
.lx-footer__brand { max-width: 290px; }
.lx-footer__brand p { font: var(--text-sm); color: var(--fg-muted); margin-top: 14px; }
.lx-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.lx-footer__col h5 { font: var(--text-caption); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); margin: 0 0 14px; }
.lx-footer__col a { display: block; font: var(--text-sm); color: var(--fg-muted); margin-bottom: 10px; cursor: pointer; text-decoration: none; }
.lx-footer__col a:hover { color: var(--primary); }
.lx-footer__bar { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: var(--text-caption); color: var(--fg-subtle); }

/* ---- Demo modal --------------------------------------------------------- */
.lx-modal__scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--navy-900) 52%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 24px;
  opacity: 0; transition: opacity .2s; }
.lx-modal__scrim.show { opacity: 1; }
.lx-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 460px; width: 100%; padding: 32px; border: 1px solid var(--border);
  transform: translateY(8px) scale(.98); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.lx-modal__scrim.show .lx-modal { transform: none; }
.lx-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lx-modal h3 { font: var(--text-h3); margin: 0 0 6px; color: var(--fg); }
.lx-modal__sub { font: var(--text-sm); color: var(--fg-muted); margin: 0 0 22px; }
.lx-modal__x { background: none; border: 0; cursor: pointer; color: var(--fg-subtle); padding: 2px; }
.lx-field { margin-bottom: 16px; }
.lx-field label { display: block; font: var(--text-caption); font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.lx-field input { width: 100%; font: var(--text-sm); color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 13px; }
.lx-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.lx-modal .lx-btn { width: 100%; margin-top: 6px; }
.lx-modal__ok { text-align: center; padding: 14px 0 6px; }
.lx-modal__ok .lic { color: var(--success); }
.lx-modal__ok h3 { margin-top: 14px; }
.lx-modal__ok p { font: var(--text-sm); color: var(--fg-muted); margin: 8px 0 22px; }

/* ---- Reveal animation --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
body.no-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- Tweak: hide hero product preview ----------------------------------- */
body.no-shot .lx-hero__shot { display: none; }
body.no-shot .lx-hero { padding-bottom: 40px; }

/* ═══════════ Inner-page chrome ═══════════ */
/* Page hero (sub-pages) */
.lx-pagehero { padding: 84px 0 56px; text-align: center; border-bottom: 1px solid var(--border); background: var(--paper-50); }
.lx-pagehero h1 { font: var(--text-display); font-size: clamp(34px, 4.6vw, 52px); line-height: 1.12; letter-spacing: -.02em; color: var(--fg); margin: 14px auto 18px; max-width: 18ch; text-wrap: balance; }
.lx-pagehero h1 em { font-style: italic; color: var(--primary); }
.lx-pagehero p { font: var(--text-body-lg); color: var(--fg-muted); max-width: 60ch; margin: 0 auto; }
.lx-crumb { font: var(--text-caption); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .12em; }

/* Services — alternating feature rows */
.lx-srow { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--border); }
.lx-srow:last-child { border-bottom: 0; }
.lx-srow--flip .lx-srow__media { order: -1; }
.lx-srow__ico { width: 50px; height: 50px; border-radius: var(--radius); background: var(--brass-100); color: var(--brass-700); display: grid; place-items: center; margin-bottom: 18px; }
.lx-srow h2 { font: var(--text-h2); font-size: clamp(26px, 3vw, 34px); color: var(--fg); margin: 0 0 14px; letter-spacing: -.01em; }
.lx-srow > div > p { font: var(--text-body-lg); color: var(--fg-muted); margin: 0 0 22px; }
.lx-srow ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lx-srow li { display: flex; gap: 11px; font: var(--text-body); color: var(--fg); }
.lx-srow li .lic { color: var(--brass-600); flex: none; margin-top: 3px; }
.lx-srow__media { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; }

/* generic "mock" card used inside service media */
.lx-mock__bar { display: flex; align-items: center; gap: 9px; font: var(--text-sm); font-weight: 600; color: var(--fg); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.lx-mock__bar .lic { color: var(--brass-600); }
.lx-mock__line { display: flex; align-items: center; justify-content: space-between; background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; margin-bottom: 9px; font: var(--text-sm); color: var(--fg); }
.lx-mock__line:last-child { margin-bottom: 0; }
.lx-mock__line .l { display: flex; align-items: center; gap: 10px; }
.lx-mock__line .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lx-mock__cite { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--brass-50); border: 1px solid var(--brass-200); border-radius: var(--radius); font: var(--text-sm); color: var(--fg); margin-top: 4px; }
.lx-mock__cite .lic { color: var(--brass-600); flex: none; margin-top: 2px; }
.lx-mock__cite b { color: var(--brass-700); }
.lx-mock__doc { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--fg-muted); }
.lx-mock__doc .hl { background: var(--brass-100); color: var(--brass-700); border-radius: 3px; padding: 0 3px; }
.lx-mock__doc .risk { background: var(--bordeaux-100); color: var(--bordeaux-600); border-radius: 3px; padding: 0 3px; }

/* Pricing comparison table */
.lx-cmp { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.lx-cmp th, .lx-cmp td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--border); font: var(--text-sm); color: var(--fg); }
.lx-cmp thead th { font: var(--text-title); font-size: 16px; color: var(--fg); background: var(--paper-50); }
.lx-cmp thead th:first-child { font: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.lx-cmp tbody th { font-weight: 500; color: var(--fg-muted); }
.lx-cmp td { text-align: center; }
.lx-cmp td:first-child, .lx-cmp th:first-child { text-align: left; }
.lx-cmp .feat-col { background: color-mix(in oklab, var(--brass-50) 60%, var(--surface)); }
.lx-cmp .lic { color: var(--success); }
.lx-cmp .no { color: var(--fg-subtle); }
.lx-cmp tr:last-child td, .lx-cmp tr:last-child th { border-bottom: 0; }

/* About */
.lx-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lx-about__grid p { font: var(--text-body-lg); color: var(--fg-muted); margin: 0 0 18px; }
.lx-about__grid p:first-of-type { font-size: 21px; color: var(--fg); font-family: var(--font-display); line-height: 1.5; }
.lx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-value { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.lx-value__ico { width: 46px; height: 46px; border-radius: var(--radius); background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; margin-bottom: 16px; }
.lx-value h3 { font: var(--text-h3); font-size: 19px; margin: 0 0 8px; color: var(--fg); }
.lx-value p { font: var(--text-body); color: var(--fg-muted); margin: 0; }
.lx-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; }
.lx-member { text-align: center; width: 180px; }
.lx-member__av { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font: var(--text-h3); font-family: var(--font-display); color: #fff; box-shadow: var(--shadow-sm); }
.lx-member b { display: block; font: var(--text-title); font-size: 16px; color: var(--fg); }
.lx-member span { font: var(--text-sm); color: var(--fg-subtle); }
.lx-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.lx-milestone b { display: block; font: var(--text-display); font-size: 44px; color: var(--primary); letter-spacing: -.02em; }
.lx-milestone span { font: var(--text-sm); color: var(--fg-muted); }

/* Contact */
.lx-contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.lx-contact__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px; }
.lx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lx-field textarea { width: 100%; font: var(--text-sm); font-family: var(--font-sans); color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 13px; resize: vertical; min-height: 110px; }
.lx-field textarea:focus, .lx-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.lx-field select { width: 100%; font: var(--text-sm); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 13px; }
.lx-contact__info { display: flex; flex-direction: column; gap: 14px; }
.lx-cinfo { display: flex; gap: 15px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-xs); }
.lx-cinfo__ico { width: 42px; height: 42px; border-radius: var(--radius); background: var(--brass-100); color: var(--brass-700); display: grid; place-items: center; flex: none; }
.lx-cinfo h4 { font: var(--text-title); font-size: 16px; color: var(--fg); margin: 0 0 3px; }
.lx-cinfo p { font: var(--text-sm); color: var(--fg-muted); margin: 0; }
.lx-formok { display: flex; gap: 12px; align-items: center; background: var(--forest-100); border: 1px solid var(--forest-500); border-radius: var(--radius); padding: 14px 18px; font: var(--text-sm); font-weight: 600; color: var(--forest-600); margin-top: 14px; }

@media (max-width: 760px) {
  .lx-values, .lx-milestones { grid-template-columns: repeat(2, 1fr); }
  .lx-row2 { grid-template-columns: 1fr; }
}

/* ═══════════ Dark theme (Robe) — fixes for sections that assume light ═══════════ */
/* The navy "ink" sections (security, CTA) carry light text baked as paper-0/50,
   which the dark ramp would otherwise flip dark. Re-anchor them to semantic fg. */
body.dark .lx-security { color: var(--fg); }
body.dark .lx-security h2, body.dark .lx-secitem h4 { color: var(--fg); }
body.dark .lx-cta__box h2 { color: var(--fg); }
body.dark .lx-cta__actions .lx-btn--secondary { color: var(--fg); border-color: color-mix(in oklab, var(--fg) 26%, transparent); }
body.dark .lx-cta__actions .lx-btn--secondary:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); border-color: var(--fg); color: var(--fg); }
/* Icon tiles default to the cool navy-50 chip — retint to the active accent on dark. */
body.dark .lx-feat__ico, body.dark .lx-value__ico { background: var(--accent-tint); color: var(--accent); }
body.dark .lx-btn--ghost:hover { background: var(--accent-tint); }

/* ═══════════ Typographie directions (Tweak) ═══════════
   Baseline tokens = "Technique" (Space Grotesk display + IBM Plex Mono accents).
   app.jsx always sets one of these body classes; print snapshots inherit it. */

/* Tech directions: mono section eyebrows (security/terminal cue) + the engineered
   grotesque has no true italic, so emphasis switches from italic to colour. */
body.typo-technique .t-overline,
body.typo-plex .t-overline,
body.typo-technique .lx-overline,
body.typo-plex .lx-overline {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .14em;
}
body.typo-technique .lx-hero h1 em,
body.typo-plex .lx-hero h1 em,
body.typo-technique .lx-pagehero h1 em,
body.typo-plex .lx-pagehero h1 em { font-style: normal; }
/* The serif "lead" paragraph reads as a clean grotesque lead in tech modes. */
body.typo-technique .lx-about__grid p:first-of-type,
body.typo-plex .lx-about__grid p:first-of-type { font-family: var(--font-sans); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .lx-bento, .lx-quotes, .lx-pricing, .lx-integ { grid-template-columns: 1fr; }
  .lx-feat--wide { grid-column: span 1; }
  .lx-security .lx-grid, .lx-results .lx-grid { grid-template-columns: 1fr; gap: 40px; }
  .lx-nav { display: none; }
  .lx-header__in { grid-template-columns: 1fr auto auto; }
  .lx-header__cta .lx-btn--ghost, .lx-header__cta .lx-btn--primary { display: none; }
  .lx-menu-btn { display: inline-flex; }
  .lx-mobnav { display: flex; }
  body.hero-split .lx-hero { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  body.hero-split .lx-hero__shot { margin-top: 8px; }
  .lx-srow { grid-template-columns: 1fr !important; gap: 32px !important; }
  .lx-srow__media { order: 2; }
  .lx-about__grid, .lx-contact__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .lx-cmp { overflow-x: auto; }
}
@media (max-width: 600px) {
  .lx-container { padding: 0 20px; }
  .lx-section { padding: 72px 0; }
  .lx-hero__stats { gap: 32px; }
  .lx-footer__top { flex-direction: column; gap: 32px; }
  .lxp-float { display: none; }
  .lx-cta__box { padding: 48px 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRAITEMENT « TECH » (thème Numérique) — registre tech sécurisé, sobre.
   Activé par body.theme-tech (posé pour les thèmes marqués `tech:true` dans
   app.jsx). Les couleurs (bleu acier) viennent des vars du thème ; ces règles
   ajoutent uniquement la présentation : libellés mono, trame d'ingénierie
   discrète derrière le hero, halo bleu au survol des cartes, chiffres en mono.
   Dignité conservée — aucun néon, aucun dégradé criard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Libellés / eyebrows en mono — repère « sécurité / ingénierie » */
body.theme-tech .lx-overline,
body.theme-tech .t-overline {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em;
}

/* Trame d'ingénierie discrète derrière le hero, fondue en vignette douce */
body.theme-tech .lx-hero { position: relative; isolation: isolate; }
body.theme-tech .lx-hero::before {
  content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 28%, transparent 76%);
}

/* Cartes : anneau + lift bleus au survol */
body.theme-tech .lx-feat:hover,
body.theme-tech .lx-integ__card:hover,
body.theme-tech .lx-value:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Badge du hero → pastille teintée avec point d'état lumineux */
body.theme-tech .lx-hero__badge {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  color: var(--fg);
}
body.theme-tech .lx-hero__badge .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 26%, transparent);
}

/* Chiffres en mono — repère « données / ingénierie » */
body.theme-tech .lx-hero__stat b,
body.theme-tech .lx-bignum__n,
body.theme-tech .lx-milestone b,
body.theme-tech .lx-price__amt {
  font-family: var(--font-mono); letter-spacing: -.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUSION CONTENU — touches issues du document « source de vérité » :
   grain, trame de fond récurrente, libellés « // », signaux « vérifié » verts.
   Sobre et digne — la trame est discrète, le grain ténu, le vert réservé aux
   garanties (souveraineté, aucun entraînement, certifications).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Tokens « vérifié » (vert forêt sobre, lisible clair ET sombre) ----- */
:root {
  --verified:      var(--forest-500);
  --verified-bg:   var(--forest-100);
  --verified-line: color-mix(in oklab, var(--forest-500) 28%, transparent);
  --grid-line:     var(--border);
}
body.dark {
  --verified:      #6FB68F;
  --verified-bg:   color-mix(in oklab, #6FB68F 13%, transparent);
  --verified-line: color-mix(in oklab, #6FB68F 32%, transparent);
}

/* ---- Grain « en fond » (texture chaude, sobre) — piloté par les Tweaks « Grain » ----
   Bruit plein contraste, posé en normal blend SEULEMENT sur les surfaces pertinentes
   (le hero + les bandes navy), jamais sur la barre de navigation ni le pied de page.
   Mouchetures sombres sur surfaces claires, claires sur fonds navy. Désactivable
   (body.grain-off) et dosable (--grain-i) ; toujours masqué à l'impression. */
:root {
  /* Grain sombre — pour les surfaces claires (parchemin). Mouchetures noires, alpha bruité. */
  --lx-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Grain clair — pour les fonds navy (bandes sombres, thèmes sombres). Mouchetures blanches. */
  --lx-grain-lt: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Grain NEUTRE — bruit gris pleinement opaque (RGB issus du bruit, alpha=1).
     À poser en mix-blend-mode: soft-light : éclaircit ET assombrit autour du gris
     moyen, donc texture sans blanchir le fond. */
  --lx-grain-neutral: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Teinte du grain — encre dérivée du navy du thème, plus sombre que les bandes.
     Le grain DÉPOSE cette encre (via masque) → il creuse le fond dans sa propre
     teinte au lieu de le blanchir. Cohérent avec le thème, ajustable d'un seul endroit. */
  --grain-tint: color-mix(in oklab, var(--navy-900) 45%, #000);
}

/* Le grain ne se pose QUE sur les fonds les plus sombres (bandes navy).
   Le grain « éclaircit » la surface : sur du parchemin clair ou sur une carte
   il fait tache, on le réserve donc aux bandes navy pleine largeur.
   --grain-i = multiplicateur d'intensité piloté par le Tweak « Intensité du grain ». */

/* — Hero — grain UNIQUEMENT quand le hero est sombre (thème sombre).
     Sur parchemin clair (par défaut), aucun grain. */
.lx-hero { position: relative; }
body.dark .lx-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background-color: var(--grain-tint);
  -webkit-mask-image: var(--lx-grain-lt); mask-image: var(--lx-grain-lt);
  -webkit-mask-size: 200px 200px; mask-size: 200px 200px;
  -webkit-mask-mode: alpha; mask-mode: alpha;
  opacity: calc(.34 * var(--grain-i, 1));
}
.lx-hero > * { position: relative; z-index: 1; }

/* — Bandes navy (Sécurité / Engagements) — les fonds les plus sombres → grain clair.
     Pas de grain sur la carte CTA ni les autres composants. */
.lx-security, .lx-engage { position: relative; }
.lx-security::after,
.lx-engage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-color: var(--grain-tint);
  -webkit-mask-image: var(--lx-grain-lt); mask-image: var(--lx-grain-lt);
  -webkit-mask-size: 200px 200px; mask-size: 200px 200px;
  -webkit-mask-mode: alpha; mask-mode: alpha;
  opacity: calc(.38 * var(--grain-i, 1));
}
.lx-security .lx-container,
.lx-engage .lx-container { position: relative; z-index: 1; }

/* Interrupteur unique (Tweak « Grain ») — coupe toutes les couches d'un coup */
body.grain-off .lx-hero::after,
body.grain-off .lx-security::after,
body.grain-off .lx-engage::after { display: none; }

/* Snapshots/impression restent nets */
@media print {
  .lx-hero::after,
  .lx-security::after, .lx-engage::after { display: none; }
}

/* ---- Trame de fond discrète (utilitaire) -------------------------------- */
.lx-gridbg { position: relative; isolation: isolate; }
.lx-gridbg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 80% 64% at 50% 34%, #000 24%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 64% at 50% 34%, #000 24%, transparent 80%);
}
/* Sur les bandes navy, la trame passe en clair sur fond sombre. */
.lx-security, .lx-engage { --grid-line: color-mix(in oklab, var(--paper-0) 9%, transparent); }
body.dark .lx-security, body.dark .lx-engage { --grid-line: color-mix(in oklab, var(--fg) 9%, transparent); }

/* ---- Libellés « // » (repère tech qu'on aime) --------------------------- */
body.theme-tech .lx-overline::before,
body.typo-technique .lx-overline::before,
body.typo-plex .lx-overline::before {
  content: "// "; opacity: .6; font-weight: 500;
}

/* ---- Badge « vérifié » (puce verte + mono) ------------------------------ */
.lx-verified {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .01em;
  color: var(--verified); background: var(--verified-bg);
  border: 1px solid var(--verified-line); border-radius: var(--radius-full);
  padding: 7px 15px;
}
.lx-verified::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--verified); box-shadow: 0 0 0 3px color-mix(in oklab, var(--verified) 24%, transparent);
}

/* Stat « garantie » mise en avant en vert dans le hero */
.lx-hero__stat--ok b { color: var(--verified); }

/* ---- Section « Pour qui / Métiers » ------------------------------------- */
.lx-metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-metier { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); transition: all .22s; }
.lx-metier__ico { width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; margin-bottom: 18px; }
.lx-metier h3 { font: var(--text-h3); font-size: 21px; color: var(--fg); margin: 0 0 9px; }
.lx-metier > p { font: var(--text-sm); color: var(--fg-muted); margin: 0 0 18px; line-height: 1.6; }
.lx-metier ul { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px; }
.lx-metier li { display: flex; gap: 10px; align-items: baseline; font: var(--text-sm); color: var(--fg); }
.lx-metier li::before { content: "—"; color: var(--brass-500); flex: none; }
body.dark .lx-metier__ico { background: var(--accent-tint); color: var(--accent); }
body.theme-tech .lx-metier:hover { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px color-mix(in oklab, var(--accent) 22%, transparent); }

/* ---- Section « Engagements » (bande navy + trame + vert garantie) ------- */
.lx-engage { background: var(--navy-900); color: var(--fg-on-dark); position: relative; overflow: hidden; }
.lx-engage .lx-head { margin-left: auto; margin-right: auto; text-align: center; }
.lx-engage .lx-head h2 { color: var(--paper-0); }
.lx-engage .lx-overline { color: var(--verified); }
.lx-engage__list { max-width: 940px; margin: 8px auto 0; }
.lx-engage__row { display: grid; grid-template-columns: 58px 1fr; gap: 14px 26px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid color-mix(in oklab, var(--paper-0) 12%, transparent); }
.lx-engage__row:last-child { border-bottom: 0; }
.lx-engage__n { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--verified); line-height: 1.2; }
.lx-engage__main { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 8px 32px; align-items: baseline; }
.lx-engage__h { display: flex; align-items: center; gap: 11px; font: var(--text-h3); font-size: 21px; color: var(--paper-0); }
.lx-engage__h .lic { color: var(--verified); flex: none; }
.lx-engage__h .lic svg { width: 19px; height: 19px; }
.lx-engage__p { font: var(--text-sm); line-height: 1.65; color: var(--navy-300); margin: 0; }
body.dark .lx-engage .lx-head h2, body.dark .lx-engage__h { color: var(--fg); }
body.dark .lx-engage__p { color: var(--fg-muted); }
body.dark .lx-engage__row { border-bottom-color: color-mix(in oklab, var(--fg) 12%, transparent); }
@media (max-width: 720px) {
  .lx-engage__main { grid-template-columns: 1fr; }
  .lx-engage__row { grid-template-columns: 44px 1fr; }
}

/* ---- SecurityBand : pastille « aucun entraînement » verte --------------- */
.lx-secitem--ok .lx-secitem__ico { background: color-mix(in oklab, var(--verified) 20%, transparent); color: var(--verified); }

/* ---- Barre de chiffres-clés (sous le hero) ------------------------------ */
.lx-figures { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--paper-50); }
.lx-figures__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.lx-figures__cell { padding: 34px 30px; border-left: 1px solid var(--border); }
.lx-figures__cell:first-child { border-left: 0; }
.lx-figures__n { font: var(--text-display); font-size: 46px; line-height: 1; color: var(--primary); letter-spacing: -.02em; }
.lx-figures__cell--ok .lx-figures__n { color: var(--verified); }
.lx-figures__l { font: var(--text-sm); color: var(--fg-muted); margin-top: 11px; max-width: 26ch; }
body.theme-tech .lx-figures__n { font-family: var(--font-mono); letter-spacing: -.02em; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .lx-metiers { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lx-figures__in { grid-template-columns: 1fr 1fr; }
  .lx-figures__cell:nth-child(3) { border-left: 0; }
  .lx-figures__cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ═════════════════════════════════════════════════════════════
   FONDS DE HERO — traitements décoratifs originaux, sobres et juridiques.
   Posés en pleine largeur derrière le hero via body.herobg-*. Chaque fond reste
   digne : sceau en filigrane, gravure guillochée, halo souverain, cannelures —
   hairlines brass, jamais de néon. Piloté par le Tweak « Fond du hero ».
   ═════════════════════════════════════════════════════════════ */

/* Socle commun : un calque pleine largeur, hauteur fixe, calé sur la zone du
   titre (le hero est très haut avec l'aperçu produit — on borne le décor en haut).
   (herobg-sobre = aucun fond ; les pages internes n'ont pas de .lx-hero.) */
body:not(.herobg-sobre) .lx-hero { position: relative; isolation: isolate; }
body:not(.herobg-sobre) .lx-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -104px; height: 760px; left: 50%; width: 100vw; transform: translateX(-50%);
}

/* — Filigrane — grand sceau Lexo (teinté selon le thème), débordant à droite. */
body.herobg-filigrane .lx-hero::before {
  background-image: var(--seal-url);
  background-repeat: no-repeat; background-size: 540px 540px;
  background-position: calc(50% + 350px) 140px;
  opacity: .22;
}
body.dark.herobg-filigrane .lx-hero::before { opacity: .3; }
body.hero-split.herobg-filigrane .lx-hero::before { background-position: calc(50% - 400px) 80px; }

/* — Guilloché — gravure de sécurité : deux rosaces concentriques en moiré. */
body.herobg-guilloche .lx-hero::before {
  --gl: color-mix(in oklab, var(--brass-500) 55%, transparent);
  background-image:
    repeating-radial-gradient(circle at 38% 46%, transparent 0 15px, var(--gl) 15px 16px),
    repeating-radial-gradient(circle at 62% 50%, transparent 0 15px, var(--gl) 15px 16px);
  opacity: .62;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 42%, #000 8%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 42%, #000 8%, transparent 76%);
}

/* — Quadrillage — trame de registre légal, hairline, fondue en vignette. */
body.herobg-quadrillage .lx-hero::before {
  background-image:
    linear-gradient(var(--border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 78% 56% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 78% 56% at 50% 40%, #000 20%, transparent 80%);
}

/* — Aurore — halo souverain doux qui monte derrière le titre (brass + primary). */
body.herobg-aurore .lx-hero::before {
  background:
    radial-gradient(ellipse 50% 52% at 50% 34%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 66%),
    radial-gradient(ellipse 30% 40% at 50% 22%, color-mix(in oklab, var(--brass-500) 22%, transparent), transparent 72%);
}

/* — Colonnade — cannelures verticales (colonnes du palais de justice). */
body.herobg-colonnade .lx-hero::before {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 53px,
    color-mix(in oklab, var(--brass-500) 42%, transparent) 53px 54px,
    transparent 54px 57px,
    color-mix(in oklab, var(--brass-500) 17%, transparent) 57px 58px);
  opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14% 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14% 66%, transparent 100%);
}

/* — Signature — mix Filigrane + Aurore. Le halo n'est PAS centré : il est décalé
   pour envelopper le sceau (sinon les deux se lisent comme deux calques superposés).
   Centré : sceau + halo à droite. Scindé : sceau + halo à gauche, derrière le texte. */
body.herobg-signature .lx-hero {
  background:
    radial-gradient(ellipse 46% 50% at 68% 30%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 62%),
    radial-gradient(ellipse 26% 34% at 72% 22%, color-mix(in oklab, var(--brass-500) 26%, transparent), transparent 68%);
}
body.herobg-signature .lx-hero::before {
  background-image: var(--seal-url);
  background-repeat: no-repeat; background-size: 540px 540px;
  /* Centré : sceau débordant à droite (sous rien). */
  background-position: calc(50% + 350px) 140px;
  opacity: .24;
}
body.dark.herobg-signature .lx-hero::before { opacity: .32; }
/* Scindé : l'aperçu produit occupe la droite — sceau ET halo basculent à gauche. */
body.hero-split.herobg-signature .lx-hero::before { background-position: calc(50% - 400px) 80px; }
body.hero-split.herobg-signature .lx-hero {
  background:
    radial-gradient(ellipse 42% 60% at 22% 40%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 64%),
    radial-gradient(ellipse 24% 40% at 18% 26%, color-mix(in oklab, var(--brass-500) 24%, transparent), transparent 70%);
}