/* =============================================
   Les étapes — Timeline
   BEM : .ls-etapes__*
   ============================================= */

/* --- Section --- */
.ls-etapes {
  background-color: var(--ls-neutral-white);
}

/* --- Header (left-aligned per Figma) --- */
.ls-etapes__header {
  text-align: left;
  margin-bottom: clamp(var(--ls-spacing-xl), 4vw, var(--ls-spacing-3xl));
}

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

.ls-etapes__title .highlight {
  color: var(--ls-primary-dark);
}

/* --- Timeline wrapper --- */
.ls-etapes__timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* --- Ligne verticale centrale (dashed) --- */
.ls-etapes__line {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--ls-neutral-light) 0,
    var(--ls-neutral-light) 8px,
    transparent 8px,
    transparent 16px
  );
  transform: translateX(-50%);
}

/* --- Item (une étape) — mobile-first vertical --- */
.ls-etapes__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--ls-spacing-s) 0 var(--ls-spacing-s) var(--ls-spacing-2xl);
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(20px);
  animation: ls-etapes-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* --- Pastille check (24×24) --- */
.ls-etapes__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ls-spacing-l);
  height: var(--ls-spacing-l);
  border-radius: var(--ls-radius-xs);
  background-color: var(--ls-secondary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ls-spacing-xs);
  transform: translateY(-50%);
  z-index: 2;
}

/* --- Carte --- */
.ls-etapes__card {
  display: flex;
  align-items: center;
  gap: var(--ls-spacing-l);
  background-color: var(--ls-neutral-beige);
  border-radius: var(--ls-radius-s);
  padding: var(--ls-spacing-m);
  width: 100%;
}

/* --- Illustration --- */
.ls-etapes__illu {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.ls-etapes__illu-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Contenu texte --- */
.ls-etapes__text {
  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);
}

.ls-etapes__label {
  font-weight: var(--ls-fw-semibold);
}

/* --- Scroll animation --- */
@keyframes ls-etapes-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* =============================================
   DESKTOP — zigzag (min-width: 769px)
   ============================================= */
@media (min-width: 769px) {
  .ls-etapes__line {
    left: 50%;
  }

  .ls-etapes__item {
    width: 50%;
    padding: var(--ls-spacing-m) 0;
  }

  .ls-etapes__item--left {
    margin-right: auto;
    padding-right: var(--ls-spacing-2xl);
    justify-content: flex-end;
  }

  .ls-etapes__item--right {
    margin-left: auto;
    padding-left: var(--ls-spacing-2xl);
    justify-content: flex-start;
  }

  .ls-etapes__item--left .ls-etapes__indicator {
    left: auto;
    right: -12px;
  }

  .ls-etapes__item--right .ls-etapes__indicator {
    left: -12px;
  }
}