/* ============================================================
   Marvin.ai — Landing pages sponsorisées
   Composants partagés par /performance-commerciale-2026/
   et /equation-performance-commerciale/.

   Reprise fidèle du design React (atoms.jsx + sections), converti
   en HTML/CSS statique pour respecter la règle "pas de React in browser"
   du projet. Palette brand Marvin : violet intense #240046, accent
   #8759FF, lilas #b9b1ff, lime #d1de54.
   ============================================================ */

:root {
  --lp-ink: #0a0012;
  --lp-brand: #240046;
  --lp-violet: #8759FF;
  --lp-lilas: #b9b1ff;
  --lp-lime: #d1de54;
  --lp-muted: #5a4d6b;
  --lp-border: rgba(36,0,70,0.10);
}

.lp-page {
  background: #fff;
  color: var(--lp-ink);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lp-page * { box-sizing: border-box; }

/* ============================================================
   HERO SPLIT (50/50 grid, photo right, content left)
   ============================================================ */
.lp-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}
.lp-hero-left {
  position: relative;
  padding: 160px 56px 120px 80px;
  display: flex;
  align-items: center;
  background: #fff;
  overflow: hidden;
}
.lp-hero-left::before {
  content: '';
  position: absolute;
  top: -15%; left: -25%;
  width: 90%; height: 130%;
  background: url('/assets/aura-lilas.png') center/contain no-repeat;
  opacity: 0.42;
  pointer-events: none;
}
.lp-hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(135,89,255,0.08);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-violet);
  font-weight: 500;
  margin-bottom: 22px;
}
.lp-eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lp-lime);
}
.lp-hero h1 {
  margin: 0;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--lp-brand);
  font-weight: 300;
  text-wrap: balance;
}
.lp-hero h1 .accent { color: var(--lp-violet); font-weight: 300; }
.lp-hero .subtitle {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink);
  font-weight: 400;
  max-width: 560px;
}
.lp-hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 6px;
  background: var(--lp-violet);
  color: #fff;
  border: 1.5px solid var(--lp-violet);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgba(135,89,255,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(135,89,255,0.45);
}
.lp-cta-secondary {
  padding: 14px 22px;
  border-radius: 6px;
  color: var(--lp-brand);
  background: transparent;
  border: 1.5px solid var(--lp-brand);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.lp-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(36,0,70,0.06);
  margin-top: 22px;
}
.lp-trust-badge svg { flex-shrink: 0; }
.lp-trust-badge .score {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-brand);
  font-variant-numeric: tabular-nums;
}
.lp-trust-badge .label {
  font-size: 11px;
  font-weight: 500;
  color: #8a7d9b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-hero-right {
  position: relative;
  overflow: hidden;
  background-size: cover;
}
.lp-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  object-position: 50% 30%;
}
/* Note : pas d'overlay ::after volontairement. Le précédent gradient sombre
   posait un bug d'échappement de containing block sur mobile (position:absolute
   ancré à <html>, couvrait la page entière en gris). La photo s'affiche cleanly
   sans assombrissement. */

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.lp-section { padding: 110px 56px; }
.lp-container { max-width: 1240px; margin: 0 auto; }

.lp-section-header {
  text-align: left;
}
.lp-section-header.center {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.lp-section-header .eyebrow-text {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-violet);
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
}
.lp-section-header h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lp-brand);
  font-weight: 400;
  text-wrap: balance;
}
.lp-section-header .subtitle {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink);
  font-weight: 400;
  max-width: 760px;
}
.lp-section-header.center .subtitle { margin-left: auto; margin-right: auto; }

/* "Inline tag" pill (utilisé en Section01 LP A) */
.lp-inline-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(135,89,255,0.08);
  border: 1px solid rgba(135,89,255,0.20);
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-violet);
  letter-spacing: 0.005em;
  margin-bottom: 28px;
}
.lp-inline-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lp-lime);
}

/* "La bonne nouvelle" / "La vraie cause" — left border bloc */
.lp-aside-callout {
  margin-top: 48px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-left: 18px;
  border-left: 3px solid var(--lp-lime);
}
.lp-aside-callout.violet { border-left-color: var(--lp-violet); }
.lp-aside-callout .kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-violet);
  font-weight: 500;
  margin-bottom: 8px;
}
.lp-aside-callout p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-brand);
  font-weight: 400;
  max-width: 880px;
}

/* ============================================================
   MARVIN STATS GRID — violet bg, ultra-thin lime numbers
   ============================================================ */
.lp-stats-grid {
  border-radius: 24px;
  background: linear-gradient(120deg, #240046 0%, #3d0d6b 35%, #6b3fcc 70%, #8759FF 100%);
  padding: 64px 48px;
  position: relative;
  overflow: hidden;
}
.lp-stats-grid::before,
.lp-stats-grid::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.lp-stats-grid::before {
  top: -40%; right: -15%;
  width: 60%; height: 180%;
  background: url('/assets/aura-violet.png') center/contain no-repeat;
  opacity: 0.45;
  mix-blend-mode: screen;
}
.lp-stats-grid::after {
  bottom: -50%; left: -10%;
  width: 45%; height: 180%;
  background: url('/assets/aura-lilas.png') center/contain no-repeat;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.lp-stats-grid .stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 80px);
  pointer-events: none;
}
.lp-stats-grid .row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.lp-stats-grid .stat {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-stats-grid .stat + .stat {
  border-left: 1px solid rgba(253,252,246,0.18);
}
.lp-stats-grid .v {
  font-size: clamp(56px, 6.2vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--lp-lime);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(209,222,84,0.3);
}
.lp-stats-grid .k {
  font-size: 15px;
  color: rgba(253,252,246,0.9);
  font-weight: 400;
  line-height: 1.4;
  max-width: 280px;
}

/* ============================================================
   NUMBERED SOLUTION ROW (3 piliers avec image 4:5)
   ============================================================ */
.lp-numbered {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  padding: 64px 0;
  border-top: 1px solid var(--lp-border);
  align-items: center;
}
.lp-numbered.reverse { grid-template-columns: 1fr 1.4fr; }
.lp-numbered.reverse .lp-numbered-content { order: 2; }
.lp-numbered.reverse .lp-numbered-image { order: 1; }

.lp-numbered .n {
  font-size: clamp(64px, 6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--lp-violet);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  margin-bottom: 22px;
}
.lp-numbered h3 {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lp-brand);
  font-weight: 400;
  max-width: 760px;
}
.lp-numbered .body {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lp-ink);
  font-weight: 400;
  max-width: 760px;
}
.lp-numbered .body strong { color: var(--lp-brand); font-weight: 500; }
.lp-numbered .body em {
  color: var(--lp-muted);
  font-style: normal;
}
.lp-numbered .result {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(135,89,255,0.08) 0%, rgba(209,222,84,0.08) 100%);
  border: 1px solid rgba(135,89,255,0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-numbered .result .kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-violet);
  font-weight: 500;
}
.lp-numbered .result .text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lp-brand);
}
.lp-numbered .result .big {
  display: inline-block;
  font-size: 28px;
  line-height: 1.05;
  color: var(--lp-violet);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-right: 12px;
}
.lp-numbered .stats-row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.lp-numbered .stat-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(135,89,255,0.06);
  border: 1px solid rgba(135,89,255,0.18);
}
.lp-numbered .stat-chip .v {
  font-size: 16px;
  font-weight: 500;
  color: var(--lp-brand);
  line-height: 1.1;
}
.lp-numbered .stat-chip .k {
  font-size: 11.5px;
  color: var(--lp-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.lp-numbered .cta-link {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-violet);
  text-decoration: none;
}
.lp-numbered-image {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(36,0,70,0.18);
}

/* ============================================================
   RECOGNIZE BANNER (mid-section CTA banner)
   ============================================================ */
.lp-recognize {
  margin-top: 64px;
  padding: 56px;
  border-radius: 20px;
  background: linear-gradient(120deg, #240046 0%, #3d0d6b 50%, #6b3fcc 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.lp-recognize::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50%; height: 160%;
  background: url('/assets/aura-violet.png') center/contain no-repeat;
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lp-recognize-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.lp-recognize-text { max-width: 680px; }
.lp-recognize-title {
  font-size: 28px;
  line-height: 1.2;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.lp-recognize-sub {
  font-size: 17px;
  color: rgba(253,252,246,0.85);
  line-height: 1.5;
}
.lp-recognize a {
  padding: 15px 28px;
  border-radius: 8px;
  background: var(--lp-lime);
  color: var(--lp-brand);
  border: 1.5px solid var(--lp-lime);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease;
}
.lp-recognize a:hover { transform: translateY(-1px); }

/* ============================================================
   CLIENTS STRIP — logos marquee
   ============================================================ */
.lp-clients {
  background: #fff;
  padding: 32px 0;
  overflow: hidden;
}
.lp-clients-label {
  display: flex;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-muted);
  font-weight: 500;
  margin-bottom: 36px;
}
.lp-clients-track {
  position: relative;
  padding: 0 140px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.lp-marquee {
  display: flex;
  gap: 96px;
  width: max-content;
  animation: lpMarquee 38s linear infinite;
}
.lp-marquee:hover { animation-play-state: paused; }
.lp-marquee .logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex-shrink: 0;
}
.lp-marquee img {
  max-width: 180px;
  object-fit: contain;
}
@keyframes lpMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ============================================================
   REFLEX CARDS (LP B Section01 — 3 réflexes insuffisants)
   ============================================================ */
.lp-reflexes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.lp-reflex-frame {
  position: relative;
  padding: 2px;
  border-radius: 18px;
}
.lp-reflex-frame.g1 { background: linear-gradient(160deg, #8759FF 0%, #b9b1ff 100%); }
.lp-reflex-frame.g2 { background: linear-gradient(160deg, #69b7df 0%, #b9b1ff 100%); }
.lp-reflex-frame.g3 { background: linear-gradient(160deg, #d1de54 0%, #b9b1ff 100%); }
.lp-reflex {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.lp-reflex .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lp-reflex .n {
  font-size: clamp(46px, 4.4vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--lp-brand);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
}
.lp-reflex .tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(135,89,255,0.12);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-violet);
  font-weight: 500;
}
.lp-reflex h4 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--lp-brand);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.lp-reflex p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-ink);
  flex: 1;
}
.lp-reflex .metric {
  padding-top: 14px;
  border-top: 1px solid var(--lp-border);
}
.lp-reflex .metric span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lp-violet);
  font-weight: 500;
}

/* ============================================================
   COMPARISON TABLE (LP A Section03)
   ============================================================ */
.lp-compare-wrap {
  margin-top: 64px;
  background: #fdfcfa;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  overflow: hidden;
}
.lp-compare-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 24px;
  padding: 22px 24px;
  background: #f3eff5;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-muted);
  font-weight: 500;
}
.lp-compare-head .marvin-col {
  text-align: center;
  color: var(--lp-brand);
}
.lp-compare-head .other-col { text-align: center; }
.lp-compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 24px;
  padding: 20px 24px;
  border-top: 1px solid var(--lp-border);
  align-items: center;
}
.lp-compare-row .label {
  font-size: 15px;
  color: var(--lp-brand);
  font-weight: 400;
}
.lp-compare-row .cell {
  text-align: center;
}
.lp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.lp-pill.yes-marvin {
  background: rgba(22,163,74,0.15);
  color: #15803d;
  border: 2px solid rgba(22,163,74,0.4);
}
.lp-pill.yes {
  background: rgba(22,163,74,0.10);
  color: #15803d;
  width: 32px; height: 32px;
}
.lp-pill.no {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
  width: 32px; height: 32px;
}
.lp-pill-partial {
  font-size: 12px;
  color: var(--lp-muted);
  font-weight: 500;
}

/* ============================================================
   FINAL CTA — gradient banner
   ============================================================ */
.lp-final {
  padding: 40px 56px 80px;
  background: #fff;
}
.lp-final-banner {
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(120deg, #240046 0%, #3d0d6b 35%, #6b3fcc 70%, #8759FF 100%);
  padding: 72px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.lp-final-banner::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 70%; height: 160%;
  background: url('/assets/aura-violet.png') center/contain no-repeat;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lp-final-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.lp-final h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  font-weight: 400;
  max-width: 1000px;
  text-wrap: balance;
}
.lp-final h2 .accent { color: var(--lp-lime); }
.lp-final a {
  padding: 14px 26px;
  border-radius: 6px;
  background: var(--lp-lime);
  color: var(--lp-brand);
  border: 1.5px solid var(--lp-lime);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease;
}
.lp-final a:hover { transform: translateY(-1px); }

/* ============================================================
   EQUATION PANEL (LP B Section03)
   ============================================================ */
.lp-equation-wrap {
  background: #fff;
  padding: 40px 56px 80px;
}
.lp-equation {
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(120deg, #14002b 0%, #240046 35%, #3d0d6b 70%, #6b3fcc 100%);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.lp-equation::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 70%; height: 160%;
  background: url('/assets/aura-violet.png') center/contain no-repeat;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lp-equation-inner {
  position: relative;
  z-index: 2;
}
.lp-equation-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.lp-equation-tag .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lp-lime);
}
.lp-equation h2 {
  margin: 20px auto 0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: #fff;
  font-weight: 400;
  max-width: 880px;
}
.lp-equation h2 .op { color: var(--lp-lime); }
.lp-equation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.lp-eq-factor {
  flex: 1;
  min-width: 220px;
  padding: 28px 24px;
  background: rgba(253,252,246,0.06);
  border: 1px solid rgba(253,252,246,0.14);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fdfcf6;
}
.lp-eq-factor .label {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  font-weight: 400;
}
.lp-eq-factor .sub {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(253,252,246,0.82);
}
.lp-eq-factor .sub2 {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(253,252,246,0.14);
  font-size: 12px;
  color: var(--lp-lime);
  letter-spacing: 0.005em;
}
.lp-eq-op {
  align-self: center;
  font-size: 36px;
  color: var(--lp-lime);
  font-weight: 300;
  padding: 0 8px;
}
.lp-equation-result {
  margin-top: 36px;
  padding: 24px 28px;
  background: rgba(209,222,84,0.10);
  border: 1px solid rgba(209,222,84,0.35);
  border-radius: 14px;
  text-align: center;
}
.lp-equation-result .kicker {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-lime);
  font-weight: 500;
  margin-bottom: 6px;
}
.lp-equation-result .text {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.4;
}
.lp-equation-cta { margin-top: 32px; text-align: center; }
.lp-equation-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 6px;
  background: var(--lp-lime);
  color: var(--lp-brand);
  border: 1.5px solid var(--lp-lime);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform .15s ease;
}
.lp-equation-cta a:hover { transform: translateY(-1px); }

/* "highlighter" lime sur portion de phrase */
.lp-highlight {
  background: linear-gradient(180deg, transparent 60%, rgba(209,222,84,0.55) 60%);
  padding: 0 4px;
}

/* ============================================================
   RESPONSIVE — mobile (<= 900px) : passage en une colonne
   ============================================================ */
@media (max-width: 900px) {
  .lp-section { padding: 64px 20px; }

  /* Hero mobile : structure complètement différente du desktop.
     On utilise un <img> inline qui se dimensionne naturellement
     (height: auto basé sur l'aspect ratio) — pas de container avec
     background-image qui pourrait s'étirer en zone grise. */
  .lp-hero { min-height: 0 !important; height: auto !important; }
  .lp-hero-grid { grid-template-columns: 1fr; min-height: 0 !important; height: auto !important; }
  .lp-hero-left { padding: 120px 24px 56px; }
  .lp-hero-right {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: none !important;
    overflow: visible !important;
  }
  .lp-hero-photo {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .lp-stats-grid { padding: 40px 24px; }
  .lp-stats-grid .row { grid-template-columns: 1fr; gap: 32px; }
  .lp-stats-grid .stat { padding: 0; }
  .lp-stats-grid .stat + .stat {
    border-left: none;
    padding-top: 32px;
    border-top: 1px solid rgba(253,252,246,0.18);
  }

  /* Solution rows : sur mobile, image AU-DESSUS du texte pour tous les pillars
     (regular ET reverse), au lieu de garder l'ordre HTML qui mettait le texte en haut */
  .lp-numbered,
  .lp-numbered.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 48px 0;
  }
  .lp-numbered .lp-numbered-content,
  .lp-numbered.reverse .lp-numbered-content { order: 2; }
  .lp-numbered .lp-numbered-image,
  .lp-numbered.reverse .lp-numbered-image { order: 1; }
  .lp-numbered-image { aspect-ratio: 16/10; }

  .lp-recognize { padding: 32px 24px; }
  .lp-recognize-inner { flex-direction: column; align-items: flex-start; }
  .lp-reflexes { grid-template-columns: 1fr; gap: 16px; }
  .lp-clients-track { padding: 0 24px; }
  .lp-final-banner,
  .lp-equation { padding: 48px 24px; }
  .lp-compare-head,
  .lp-compare-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 12px; padding: 14px 14px; font-size: 12.5px; }
  .lp-compare-row .label { font-size: 13.5px; }
  .lp-equation-row { flex-direction: column; }
  .lp-eq-op { display: none; }
}