/* ============================================
   Module: Comparatif — multi-colonnes
   BEM: .ls-comparatif
   ============================================ */

/* --- Header --- */
.ls-comparatif__header {
  text-align: center;
  margin-bottom: clamp(var(--ls-spacing-xl), 5vw, var(--ls-spacing-3xl));
}

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

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

/* --- Table --- */
.ls-comparatif__table {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--ls-radius-m);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  background: var(--ls-neutral-white);
}

/* --- Row --- */
.ls-comparatif__row {
  display: grid;
  grid-template-columns: 200px repeat(calc(var(--comp-cols) - 1), 1fr);
  border-bottom: 1px solid #f0f0f0;
}

.ls-comparatif__row:last-child {
  border-bottom: none;
}

/* --- Header row --- */
.ls-comparatif__row--header {
  background: var(--ls-secondary-dark);
  color: var(--ls-neutral-white);
  font-family: var(--ls-font-text);
  font-weight: var(--ls-fw-semibold);
  font-size: 14px;
}

.ls-comparatif__row--header .ls-comparatif__cell {
  justify-content: center;
  text-align: center;
}

.ls-comparatif__row--header .ls-comparatif__cell--ls {
  background: var(--ls-primary-main);
}

/* --- Logos concurrents dans le header --- */
.ls-comparatif__logo {
  max-height: 24px;
  max-width: 90px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* --- Cell --- */
.ls-comparatif__cell {
  padding: 16px 14px;
  font-family: var(--ls-font-text);
  font-size: 13.5px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: var(--ls-spacing-xs);
}

/* --- Criteria column --- */
.ls-comparatif__cell--criteria {
  font-weight: var(--ls-fw-medium);
  color: var(--ls-secondary-dark);
  background: #fafafa;
  font-size: 14px;
}

/* --- Data cells --- */
.ls-comparatif__cell--data {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 2px;
}

/* --- LS Compta column (data rows) --- */
.ls-comparatif__cell--ls-data {
  background: var(--ls-primary-lighter);
  font-weight: var(--ls-fw-semibold);
  color: var(--ls-primary-dark);
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 2px;
}

/* --- Alternating row bg --- */
.ls-comparatif__row:nth-child(even):not(.ls-comparatif__row--header) {
  background: #fcfcfc;
}

/* --- Icons --- */
.ls-comparatif__icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ls-comparatif__icon--yes {
  color: var(--ls-success-dark, #2c7a59);
}

.ls-comparatif__icon--no {
  color: var(--ls-error-dark);
  opacity: 0.6;
}

/* ================================================
   MOBILE (max-width: 900px)
   ================================================ */
@media (max-width: 900px) {
  .ls-comparatif__row {
    grid-template-columns: 140px repeat(calc(var(--comp-cols) - 1), 1fr);
  }
  .ls-comparatif__cell {
    padding: 10px 8px;
    font-size: 12px;
  }
  .ls-comparatif__row--header .ls-comparatif__cell {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .ls-comparatif__table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ls-comparatif__row {
    min-width: 700px;
  }
}

/* ================================================
   ANIMATIONS — scroll-driven (CSS only)
   ================================================ */
.ls-comparatif__table {
  opacity: 0;
  animation: ls-comparatif-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes ls-comparatif-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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