.lp-pyramid {
  background: var(--fm-navy);
  color: #fff;
  padding-block: var(--lp-section-py);
}

.lp-pyramid .lp-kicker {
  color: rgba(242, 245, 251, 0.5);
}

.lp-pyramid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Texte */
.lp-pyramid-text .lp-section-title {
  color: #fff;
}

.lp-pyramid-text .lp-body {
  color: rgba(242, 245, 251, 0.7);
}

/* Pyramide visuelle */
.lp-pyramid-visual {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 5px;
  padding-block: 20px;
}

.lp-pyramid-level {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  height: 48px;
  font-family: var(--fm-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  background: #1f2838;
}

/* Largeurs décroissantes de la base vers le sommet */
.lp-pyramid-level--1 { width: 100%; }
.lp-pyramid-level--2 { width: 85%; }
.lp-pyramid-level--3 { width: 70%; }
.lp-pyramid-level--4 { width: 56%; }
.lp-pyramid-level--5 { width: 42%; }
.lp-pyramid-level--6 { width: 28%; }

/* Couleurs atténuées par niveau */
.lp-pyramid-level--2 { background: #1d2a3c; }
.lp-pyramid-level--3 { background: #1a2536; }
.lp-pyramid-level--4 { background: #172130; }
.lp-pyramid-level--5 { background: #141d2a; }
.lp-pyramid-level--6 { background: #111824; }

/* Niveau NUTRITION — actif, orange */
.lp-pyramid-level--active {
  background: var(--fm-brand);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  box-shadow: 0 0 32px rgba(250, 90, 44, 0.35), 0 0 64px rgba(250, 90, 44, 0.15);
}

/* Texte via pseudo-élément (data-label) */
.lp-pyramid-level::after {
  content: attr(data-label);
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-pyramid-layout {
    grid-template-columns: 1fr;
  }

  .lp-pyramid-visual {
    order: -1;
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .lp-pyramid-visual {
    max-width: 100%;
    padding-block: 8px;
    gap: 4px;
  }

  .lp-pyramid-level {
    height: 40px;
    font-size: 0.6rem;
    letter-spacing: 0.07em;
  }

  .lp-pyramid-level--active {
    height: 44px;
    font-size: 0.7rem;
  }
}