.toggle-container {
  margin: var(--spacing-l) 0;
}

/** ----------------- main ------------------- */
main {
  width: 90%;
  margin: 0 auto;
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-l);
}

/** --------------- Textarea ----------------- */
#target {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  background: hsla(0, 0%, 3%, 0.6);
  color: var(--color-text-primary);
  border: 5px solid var(--color-accent-primary);
  padding: var(--spacing-m);
  border-radius: var(--radius-m);
  resize: none;
}
#target::placeholder {
  color: var(--color-text-primary);
  font-weight: bold;
}

/** ---------------- Buttons ----------------- */
.button-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-l);
}

button {
  /* Style de base */
  padding: var(--spacing-m) var(--spacing-l);
  border-radius: var(--radius-m);
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#submit-btn,
#toggle-json {
  background-color: var(--color-accent-primary);
  color: var(--neutral5);
  border: 1px solid hsla(0, 0%, 3%, 0.6);
}
#reset-btn {
  background: hsla(0, 0%, 3%, 0.6);
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
}
/* Effet de survol */
button:hover {
  /* Un léger effet d'agrandissement */
  transform: scale(1.05);
  /* Et l'ombre pour la profondeur */
  box-shadow: var(--shadow-color);
}

/* Effet de clic (actif) */
button:active {
  transform: scale(0.98);
}