/* ── Contenu Diagonale (zigzag) ── */

/* Section title */
.ls-diag__title {
  text-align: center;
  color: var(--ls-secondary-dark);
  margin-bottom: var(--ls-spacing-xl);
}

/* ── Row (text + image side by side) ── */
.ls-diag__row {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-xl);
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  animation: ls-diag-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ls-diag__row + .ls-diag__row {
  margin-top: var(--ls-spacing-xl);
}

/* ── Text column ── */
.ls-diag__text {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-xl);
  padding-block: var(--ls-spacing-m);
}

.ls-diag__subtitle {
  color: var(--ls-secondary-dark);
}

/* ── Bullet list ── */
.ls-diag__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-m);
}

.ls-diag__bullet {
  display: flex;
  gap: var(--ls-spacing-s);
  align-items: flex-start;
}

.ls-diag__bullet-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--ls-spacing-xs);
  width: 16px;
  height: var(--ls-typo-t4-lh);
}

.ls-diag__bullet-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.ls-diag__bullet-content {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-xs);
}

.ls-diag__bullet-title {
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-semibold);
  font-size: var(--ls-typo-t6-size);
  line-height: var(--ls-typo-t6-lh);
  color: var(--ls-secondary-dark);
}

.ls-diag__bullet-desc {
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-regular);
  font-size: var(--ls-typo-t4-size);
  line-height: var(--ls-typo-t4-lh);
  color: var(--ls-neutral-dark);
}

/* ── Image column ── */
.ls-diag__media {
  width: 100%;
  min-height: 280px;
  aspect-ratio: 16 / 10;
  border-radius: var(--ls-radius-s);
  overflow: hidden;
  background-color: var(--ls-neutral-beige);
}

.ls-diag__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ls-radius-s);
}

/* ── CTA ── */
.ls-diag__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--ls-spacing-xl);
}

/* ── Animations ── */
@keyframes ls-diag-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports not (animation-timeline: view()) {
  .ls-diag__row {
    opacity: 1;
    transform: none;
  }
}

/* ── Desktop ── */
@media (min-width: 769px) {
  .ls-diag__row {
    flex-direction: row;
    gap: clamp(var(--ls-spacing-3xl), 6vw, var(--ls-spacing-5xl));
  }

  .ls-diag__row--reverse {
    flex-direction: row-reverse;
  }

  .ls-diag__text,
  .ls-diag__media {
    flex: 1 1 0;
    min-width: 0;
  }

  .ls-diag__media {
    aspect-ratio: auto;
    align-self: stretch;
  }
}