/* ============================================
   Module: Comparatif — multi-colonnes
   Colonne LS surélevée via pseudo-élément
   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: 16px auto;
  position: relative;
  border-radius: var(--ls-radius-m);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  background: var(--ls-neutral-white);
  overflow: visible;
}

/* --- Row --- */
.ls-comparatif__row {
  display: grid;
  grid-template-columns: 200px repeat(calc(var(--comp-cols) - 2), 1fr) 180px;
  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;
  border-radius: var(--ls-radius-m) 0 0 0;
}

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

/* Round left corners of first non-LS cell in header */
.ls-comparatif__row--header .ls-comparatif__cell:first-child {
  border-radius: var(--ls-radius-m) 0 0 0;
}

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

.ls-comparatif__logo--ls {
  filter: brightness(0) invert(1);
  max-height: 30px;
  max-width: 120px;
}

/* --- 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;
}

/* Last row criteria: round bottom-left */
.ls-comparatif__row--last .ls-comparatif__cell--criteria {
  border-radius: 0 0 0 var(--ls-radius-m);
}

/* --- Data cells --- */
.ls-comparatif__cell--data {
  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;
}
/* Keep LS cells consistent (override alternating bg) */
.ls-comparatif__row:nth-child(even) .ls-comparatif__cell--ls-data {
  background: var(--ls-primary-lighter);
}

/* ============================================
   LS Compta column — elevated effect
   ============================================ */
.ls-comparatif__cell--ls {
  position: relative;
  z-index: 2;
  background: var(--ls-primary-lighter);
  justify-content: center;
  text-align: center;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(69, 82, 198, 0.08);
}

/* LS header cell */
.ls-comparatif__cell--ls-header {
  background: var(--ls-primary-main);
  color: white;
  border-radius: var(--ls-radius-m) var(--ls-radius-m) 0 0;
  padding: 22px 16px;
  margin-top: -14px;
  margin-right: -2px;
}

/* LS data cells */
.ls-comparatif__cell--ls-data {
  background: var(--ls-primary-lighter);
  font-weight: var(--ls-fw-semibold);
  color: var(--ls-primary-dark);
  margin-right: -2px;
  border-bottom: 1px solid rgba(69, 82, 198, 0.1);
}

/* LS last cell */
.ls-comparatif__cell--ls-last {
  border-radius: 0 0 var(--ls-radius-m) var(--ls-radius-m);
  margin-bottom: -14px;
  border-bottom: none;
  padding-bottom: 22px;
}

/* Shadow on whole LS column via pseudo on header */
.ls-comparatif__cell--ls-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  border-radius: var(--ls-radius-m);
  box-shadow: 0 4px 24px rgba(69, 82, 198, 0.15);
  z-index: -1;
  pointer-events: none;
}

/* --- 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) - 2), 1fr) 140px;
  }
  .ls-comparatif__cell {
    padding: 10px 8px;
    font-size: 12px;
  }
  .ls-comparatif__row--header .ls-comparatif__cell {
    font-size: 12px;
  }
  .ls-comparatif__cell--ls-header {
    margin-top: -8px;
    padding: 16px 10px;
  }
  .ls-comparatif__cell--ls-last {
    margin-bottom: -8px;
    padding-bottom: 16px;
  }
}

@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;
  }
}