/* ========================================
   PAGE POTENTIEL
======================================== */

.calculator-panel,
.result-panel {
  background: var(--color-white);

  padding: 40px;

  border-radius: var(--radius);
  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);
}

.calculator-panel h2 {
  margin-bottom: 15px;
}

.calculator-panel > p {
  margin-bottom: 30px;
}

.result-panel {
  position: sticky;
  top: 120px;
}

.result-number {
  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 800;
  line-height: 1.1;

  color: var(--color-primary);

  margin: 20px 0;
}

.result-panel hr {
  border: none;
  border-top: 1px solid var(--color-border);

  margin: 25px 0;
}

/* ========================================
   ROI
======================================== */

.roi-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-top: 50px;
}

.roi-card {
  background: var(--color-white);

  padding: 30px;

  border-radius: var(--radius);
  border: 1px solid var(--color-border);

  text-align: center;

  box-shadow: var(--shadow-sm);
}

.roi-card strong {
  display: block;

  font-size: 2rem;
  font-weight: 800;

  color: var(--color-primary);

  margin-bottom: 10px;
}

/* ========================================
   TABLEAU MARCHÉ
======================================== */

.scenario-table {
  margin-top: 40px;
}

.scenario-table td:first-child {
  font-weight: 700;
  color: var(--color-primary);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 992px) {

  .result-panel {
    position: static;
  }

  .roi-grid {
    grid-template-columns: 1fr;
  }

}