/* ================================================
   Tarifs — Pricing cards (Formules)
   BEM : .ls-tarifs__*
   ================================================ */

/* --- Wrapper (fond arrondi) --- */
.ls-tarifs__wrapper {
  background-color: var(--ls-primary-lighter);
  border-radius: var(--ls-radius-m);
  padding: var(--ls-spacing-3xl) var(--ls-spacing-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-spacing-xl);
  overflow: hidden;
}

/* --- Titre --- */
.ls-tarifs__title {
  font-family: var(--ls-font-title);
  font-weight: var(--ls-fw-semibold);
  font-size: clamp(var(--ls-typo-h4-size), 3vw, var(--ls-typo-h2-size));
  line-height: clamp(var(--ls-typo-h4-lh), 4vw, var(--ls-typo-h2-lh));
  color: var(--ls-secondary-dark);
  text-align: center;
}

.ls-tarifs__title .ls-tarifs__highlight {
  color: var(--ls-primary-main);
}

/* --- Grille --- */
.ls-tarifs__grid {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-l);
  width: 100%;
  align-items: stretch;
}

/* --- Carte --- */
.ls-tarifs__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-spacing-xs);
  flex: 1;
  min-width: 0;
}

.ls-tarifs__card-body {
  background-color: var(--ls-neutral-white);
  border-radius: var(--ls-radius-s);
  padding: var(--ls-spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-l);
  width: 100%;
}

/* --- Carte mise en avant --- */
.ls-tarifs__card--featured .ls-tarifs__card-body {
  border: 1px solid var(--ls-primary-dark);
  box-shadow: 0 4px 0 0 var(--ls-primary-dark);
}

/* --- Badge populaire --- */
.ls-tarifs__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--ls-spacing-xs) var(--ls-spacing-s);
  background-color: var(--ls-info-dark);
  color: var(--ls-info-light);
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-semibold);
  font-size: var(--ls-typo-t4-size);
  line-height: var(--ls-typo-t4-lh);
  border-radius: var(--ls-radius-xs);
  white-space: nowrap;
}

/* --- En-tête (nom + prix) --- */
.ls-tarifs__header {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-s);
}

.ls-tarifs__name {
  font-family: var(--ls-font-title);
  font-weight: var(--ls-fw-semibold);
  font-size: clamp(var(--ls-typo-h4-size), 2.5vw, var(--ls-typo-h3-size));
  line-height: clamp(var(--ls-typo-h4-lh), 3vw, var(--ls-typo-h3-lh));
  color: var(--ls-secondary-dark);
}

/* --- Ligne de prix --- */
.ls-tarifs__price-row {
  display: flex;
  align-items: center;
  gap: var(--ls-spacing-s);
}

.ls-tarifs__price-prefix {
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-regular);
  font-size: var(--ls-typo-t7-size);
  line-height: var(--ls-typo-t7-lh);
  color: var(--ls-neutral-main);
}

.ls-tarifs__price {
  font-family: var(--ls-font-title);
  font-weight: var(--ls-fw-semibold);
  font-size: clamp(var(--ls-typo-h3-size), 4vw, var(--ls-typo-h2-size));
  line-height: clamp(var(--ls-typo-h3-lh), 5vw, var(--ls-typo-h2-lh));
  color: var(--ls-secondary-dark);
}

.ls-tarifs__price-suffix {
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-regular);
  font-size: var(--ls-typo-t7-size);
  line-height: var(--ls-typo-t7-lh);
  color: var(--ls-neutral-main);
}

/* --- Description --- */
.ls-tarifs__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);
}

/* --- CTA --- */
.ls-tarifs__cta {
  display: flex;
  justify-content: center;
}

/* ================================================
   TABLET+ (min-width: 769px)
   ================================================ */
@media (min-width: 769px) {
  .ls-tarifs__wrapper {
    padding: var(--ls-spacing-3xl) clamp(var(--ls-spacing-xl), 5vw, 72px);
  }

  .ls-tarifs__grid {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* ================================================
   ANIMATIONS — scroll-driven (CSS only)
   ================================================ */
.ls-tarifs__card {
  opacity: 0;
  transform: translateY(20px);
  animation: ls-tarifs-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes ls-tarifs-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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