.bases {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-88) var(--spacing-120);
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 1535px) {
  .bases {
    padding: var(--spacing-24);
  }
}

.steps-shell-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.step-panel {
  background-image: url('../img/map-inventaire.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--spacing-100) 0 var(--spacing-100) var(--spacing-100);
}

.step-panel-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  justify-content: center;
  position: relative;
  z-index: 1;
  min-width: var(--size-400);
}

.step-panel img {
  height: var(--size-420);
  position: relative;
  right: -150px;
}

.step-panel img.img-mobile {
  display: none;
}

@media (max-width: 1535px) {
  .step-panel {
    flex-direction: column;
    gap: var(--spacing-24);
    padding: 56px 0 0 56px;
  }

  .step-panel img {
    right: auto;
    bottom: -20px;
    width: 80%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .step-panel {
    padding: var(--spacing-24);
  }

  .step-panel-text {
    min-width: auto;
  }

  .step-panel img {
    width: 100%;
  }

  .step-panel img.img-mobile {
    display: block;
  }

  .step-panel img.img-desktop {
    display: none;
  }
}

.step-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-height: var(--size-360);
}

.step-panel-text h3,
.step-card h3 {
  text-align: left;
}

.step-card h3 {
  color: var(--color-text);
}

.step-card-energy {
  background: var(--color-lime);
  padding: var(--spacing-60) 0 var(--spacing-60) var(--spacing-60);
}

.step-card-reno {
  background: var(--color-sage);
  padding: var(--spacing-60);
}

.step-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  max-width: var(--size-500);
}

.step-card-energy,
.step-card-reno {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--spacing-24);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 20px;
  width: fit-content;
}

.badge-lime {
  background: var(--color-lime);
  color: var(--color-text-primary);
}

.badge-forest {
  background: var(--color-forest);
  color: var(--color-white);
}

.badge-cream {
  background: var(--color-pale);
  color: var(--color-text);
}

.step-row {
  display: flex;
  gap: var(--spacing-24);
}

@media (max-width: 1279px) {
  .step-row {
    flex-direction: column;
  }

  .step-card {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .bases {
    gap: var(--spacing-24);
  }

  .step-card-energy,
  .step-card-reno {
    padding: var(--spacing-24);
    align-items: center;
  }
}